/* home.css — tela inicial (manchete, modo, campo de amostra, passos e rodapé). */

/* Tela inicial: sobrescreve .tela para um layout de página completa (header, dois blocos, cards e rodapé). */

#tela-inicial {
  /* O conteúdo começa do topo, não centralizado verticalmente */
  justify-content: flex-start;
  /* Estica para ocupar a largura toda (o .home-inner cuida da margem) */
  align-items: stretch;
  /* Remove o padding do .tela; cada seção tem o seu próprio */
  padding: 0;
  /* Fundo escuro fixo — base da identidade da tela inicial */
  background-color: var(--bg);
}

/* Caixa interna com largura máxima e margens automáticas (centraliza) */
.home-inner {
  max-width: 1100px;
  margin: 0 auto;
  width: 100%;
  padding: 0 40px;
}


/* TOPO DA HOME — rótulo verde + linha fina */

.home-header {
  padding-top: 32px;
  margin-bottom: 56px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
}

/* Rótulo pequeno em maiúsculas no verde de acento */
.home-rotulo-topo {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 12px;
  flex: 1;
}

/* Linha fina que separa o topo do restante */
.home-linha-divisor {
  height: 1px;
  background-color: var(--linha);
  flex-basis: 100%;
  margin-top: 4px;
}


/* CORPO — grade de dois blocos lado a lado */

/* CSS Grid: duas colunas iguais com espaço entre elas */
.home-corpo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
  margin-bottom: 72px;
}


/* COLUNA ESQUERDA — manchete, texto, botão e pílulas de modo */

/* Manchete em 3 linhas — "Sorteie. / Escale. / Goleie." */
.manchete {
  font-family: 'Archivo Black', sans-serif;
  font-size: 4.8rem;
  line-height: 0.97;         /* linhas bem juntas para impacto visual */
  color: var(--txt);
  margin-bottom: 28px;
  letter-spacing: -1.5px;

  /* Sombra dura cinza deslocada para baixo/direita — efeito retrô, leitura suave */
  text-shadow: 4px 4px 0 var(--titulo-sombra);
}

/* Parágrafo descritivo abaixo da manchete */
.home-descricao {
  font-size: 1rem;
  color: var(--txt-soft);
  line-height: 1.7;
  margin-bottom: 36px;
}

/* Espaço entre o botão "Jogar agora" e o seletor de modo */
.home-modo {
  margin-top: 36px;
}


/* BOTÃO "JOGAR AGORA" — verde, destaque máximo */

.btn-jogar-agora {
  display: inline-block;
  background-color: var(--accent);
  color: var(--btn-txt);      /* texto escuro sobre o verde — contraste alto */
  font-family: 'Archivo Black', sans-serif;
  font-size: 1rem;
  padding: 15px 32px;
  border: none;
  border-radius: 2px;         /* quase reto, estilo adesivo/retrô */
  cursor: pointer;

  /* Sombra verde-escura dura deslocada — efeito de "adesivo" */
  box-shadow: 4px 4px 0 var(--accent-sombra);

  /* Transição rápida para a animação de pressionar ser responsiva */
  transition: transform 0.08s ease, box-shadow 0.08s ease;
}

/* Ao pressionar: botão "desce" 2px e sombra encolhe — sensação de apertar */
.btn-jogar-agora:active {
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0 var(--accent-sombra);
}


/* RÓTULO DE SEÇÃO — "MODO DE JOGO", "FORMAÇÃO" etc. */

.home-rotulo-campo {
  display: block;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--txt-soft);
  margin-bottom: 10px;
}


/* Pílulas (modo e formação): superfície escura translúcida com texto claro; a selecionada inverte (fundo branco, texto escuro). O verde fica só no botão de ação. */

.area-pilulas {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;   /* em telas pequenas, quebra para a linha de baixo */
}

.pilula {
  padding: 7px 16px;
  border-radius: 2px;          /* quase reto — visual de "escolha/estado", diferente do botão verde */
  border: 1.5px solid var(--linha);
  background-color: rgba(255, 255, 255, 0.06);
  color: var(--txt);
  font-family: 'Archivo', sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

/* Hover: superfície levemente mais clara, mantém texto e borda */
.pilula:hover:not(.pilula-ativa) {
  background-color: rgba(255, 255, 255, 0.12);
}

/* Pílula selecionada: inverte para fundo branco e texto escuro. */
.pilula.pilula-ativa {
  background-color: var(--txt);
  color: var(--bg);
  border-color: var(--txt);
}


/* COLUNA DIREITA — campo de futebol + pílulas de formação */

.home-direita {
  display: flex;
  flex-direction: column;
  align-items: center;   /* centraliza o campo e os controles horizontalmente */
}


/* CAMPO DE FUTEBOL — gramado com listras e linhas brancas */

#campo {
  position: relative;    /* necessário para as fichas (position:absolute) ficarem dentro */
  width: 230px;
  height: 344px;
  border-radius: 6px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  overflow: visible;     /* fichas nas bordas extremas não são cortadas */
  margin-bottom: 20px;

  /* Listras horizontais simulando a grama (dois tons de verde alternados) */
  background: repeating-linear-gradient(
    to bottom,
    #2a8018 0px,
    #2a8018 30px,
    #309120 30px,
    #309120 60px
  );
}

/* Linha branca do meio-campo */
.campo-linha-meio {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 2px;
  background: rgba(255, 255, 255, 0.6);
}

/* Círculo central */
.campo-circulo {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.6);
}

/* Base compartilhada pelas duas áreas (retângulos brancos) */
.campo-area {
  position: absolute;
  left: 20%;
  right: 20%;
  height: 21%;
  border: 2px solid rgba(255, 255, 255, 0.6);
}

.campo-area-ataque {
  top: 0;
  border-top: none;    /* o limite é a própria borda do campo */
}

.campo-area-defesa {
  bottom: 0;
  border-bottom: none;
}


/* Fichas dos jogadores: círculos posicionados por left/top em %; translate(-50%,-50%) centraliza no ponto e a transição anima a troca de formação. */
.ficha {
  position: absolute;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: #ffffff;
  color: #1A1813;
  font-family: 'Archivo Black', sans-serif;
  font-size: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translate(-50%, -50%);

  /* Anima a mudança de posição ao trocar de formação */
  transition: left 0.45s ease, top 0.45s ease;
}


/* PÍLULAS DE FORMAÇÃO (amostra) + LEGENDA */

.home-formacao {
  text-align: center;
  width: 100%;
  max-width: 280px;
}

/* Centraliza as pílulas de formação */
.home-formacao .area-pilulas {
  justify-content: center;
  margin-bottom: 10px;
}

/* Legenda explicativa abaixo das pílulas de formação */
.home-legenda {
  font-size: 0.7rem;
  color: var(--txt-soft);
  font-style: italic;
}


/* CARDS DE PASSOS — 01 Escolha / 02 Sorteie / 03 Escale */

/* Grade de 3 colunas iguais */
.home-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 48px;
}

.step-card {
  background-color: var(--surface);
  border: 1px solid var(--linha);
  border-radius: 12px;
  padding: 20px 24px;          /* reduzido de 28px — card menos alto */
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: 16px;                   /* respiro entre texto e ícone */
}

/* Grupo de texto à esquerda do card */
.step-texto {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

/* Ícone SVG à direita, centralizado verticalmente pelo align-items do card */
.step-icon {
  display: block;
  width: 38px;                 /* ligeiramente maior que os 30px anteriores */
  height: 38px;
  flex-shrink: 0;              /* não encolhe se o texto for longo */
  color: var(--accent);        /* verde — herdado pelo currentColor do SVG */
}

/* Número grande verde em Archivo Black */
.step-num {
  font-family: 'Archivo Black', sans-serif;
  font-size: 2.2rem;
  color: var(--accent);
  line-height: 1;
}

.step-titulo {
  font-family: 'Archivo Black', sans-serif;
  font-size: 1rem;
  color: var(--txt);
}

.step-desc {
  font-size: 0.85rem;
  color: var(--txt-soft);
}


/* RODAPÉ — estatísticas do jogo */

.home-footer {
  border-top: 1px solid var(--linha);
  padding: 20px 0 36px;
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  color: var(--txt-soft);
}

/* Pontinho separador entre as estatísticas */
.footer-sep {
  color: rgba(255, 255, 255, 0.25);
}


/* ============================================================
   Modo online (MAQUETE): botão "Brasileirão - Online" + modal de sala
   ============================================================ */

/* Pílula do modo online — visual de pílula, com leve destaque de "novo" */
.pilula-online {
  border-style: dashed;
  position: relative;
}
.pilula-online::after {
  content: "";
  position: absolute;
  top: 6px;
  right: 7px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}
.pilula-online:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* Overlay do modal de sala */
.sala-overlay {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.sala-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.66);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}
.sala-card {
  position: relative;
  width: 100%;
  max-width: 620px;
  background: #14161C;
  border: 1px solid var(--linha);
  border-radius: 14px;
  padding: 26px 28px 22px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.55);
}

.sala-badge {
  position: absolute;
  top: 16px;
  left: 28px;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--btn-txt);
  background: var(--accent);
  padding: 3px 9px;
  border-radius: 999px;
}
.sala-fechar {
  position: absolute;
  top: 14px;
  right: 16px;
  width: 30px;
  height: 30px;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--txt-soft);
  font-size: 1rem;
  cursor: pointer;
  transition: color 0.15s ease, background 0.15s ease;
}
.sala-fechar:hover { color: var(--txt); background: rgba(255, 255, 255, 0.06); }

.sala-colunas {
  display: grid;
  grid-template-columns: 1fr 1px 1fr;
  gap: 22px;
  margin-top: 18px;
}
.sala-divisor { background: var(--linha); }

.sala-col-titulo {
  font-family: 'Archivo Black', sans-serif;
  font-size: 1.05rem;
  color: var(--txt);
  margin-bottom: 14px;
}

.sala-rotulo {
  display: block;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--txt-soft);
  margin: 12px 0 6px;
}

.sala-input {
  width: 100%;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--linha);
  border-radius: 6px;
  color: var(--txt);
  font-family: 'Archivo', sans-serif;
  font-size: 0.9rem;
  padding: 9px 12px;
  outline: none;
  transition: border-color 0.15s ease;
}
.sala-input::placeholder { color: var(--txt-soft); }
.sala-input:focus { border-color: var(--accent); }

.sala-codigo-wrap { display: flex; gap: 8px; }
.sala-codigo {
  font-family: 'Archivo Black', sans-serif;
  letter-spacing: 1px;
  flex: 1;
}
.sala-copiar {
  flex: 0 0 auto;
  width: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--linha);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--txt);
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.sala-copiar:hover { border-color: var(--accent); color: var(--accent); }
.sala-copiar-ico { width: 17px; height: 17px; }

.sala-velocidade { margin-bottom: 4px; }

.sala-acao {
  width: 100%;
  margin-top: 18px;
}

.sala-aviso {
  margin-top: 18px;
  text-align: center;
  font-size: 0.8rem;
  color: var(--accent);
}

/* Celular: empilha as duas colunas e esconde o divisor vertical */
@media (max-width: 560px) {
  .sala-colunas { grid-template-columns: 1fr; gap: 8px; }
  .sala-divisor { display: none; }
}