/* responsivo.css — ajustes para telas menores (media queries). Carregar por ÚLTIMO (sobrescreve os estilos das telas). */

/* CELULARES E TABLETS (≤ 768px) */
@media (max-width: 768px) {

  /* TELA INICIAL (home) */

  .home-inner { padding: 0 20px; }

  .home-header {
    padding-top: 24px;
    margin-bottom: 32px;
  }

  /* As duas colunas viram uma só (texto em cima, campo de amostra embaixo) */
  .home-corpo {
    grid-template-columns: 1fr;
    gap: 34px;
    margin-bottom: 48px;
  }

  /* Manchete menor — e a sombra dura encolhe junto pra não pesar */
  .manchete {
    font-size: 3.2rem;
    text-shadow: 3px 3px 0 var(--titulo-sombra);
  }

  .home-descricao {
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 26px;
  }

  /* CTA forte: ocupa a largura toda no celular */
  .btn-jogar-agora {
    display: block;
    width: 100%;
    text-align: center;
  }

  .home-modo { margin-top: 28px; }

  /* Cards de passos empilhados */
  .home-cards {
    grid-template-columns: 1fr;
    gap: 12px;
    margin-bottom: 36px;
  }

  /* Rodapé pode quebrar linha se faltar espaço */
  .home-footer {
    flex-wrap: wrap;
    padding: 18px 0 28px;
    font-size: 0.75rem;
  }

  /* TELA DE JOGO (escalação): 3 colunas → 1 */
  .jogo-wrapper {
    grid-template-columns: 1fr;
    padding: 24px 16px;
    min-height: auto;
  }

  /* Cabeçalho das telas do jogo/simulação: empilha (título em cima, info embaixo)
     para "The Dream Team" caber sempre em uma única linha. */
  .jogo-header {
    padding: 18px 16px 14px;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
  .jogo-header-titulo { font-size: 1.5rem; }
  .jogo-header-info,
  .sim-label-campanha { text-align: left; }
  .slot-jogo {
    width: 52px;
    height: 52px;
    font-size: 0.55rem;
  }

  /* Escalação no celular: o Voltar fica COMPACTO ao lado do botão de ação
     (Rolar/Começar), que ocupa o resto da largura. display:contents promove os
     filhos da coluna direita ao .jogo-wrapper. */
  .jogo-direita { display: contents; }

  /* Linha de ação em fila: Voltar (esquerda, compacto) + ação preenchendo o resto */
  .jogo-acao {
    display: flex;
    gap: 8px;
    align-items: stretch;
  }
  .jogo-acao .btn-rolar {
    flex: 1 1 0;       /* Rolar e Começar ocupam exatamente a mesma largura */
    width: auto;
    min-width: 0;      /* ignora o piso de largura do texto (padroniza os dois) */
  }
  .btn-voltar-mobile {
    order: -1;          /* à esquerda da ação, dando a sensação de "voltar" */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: auto;
    padding: 10px 16px;
  }

  /* O Voltar da coluna direita some no celular (substituído pelo da linha de ação)... */
  #btn-voltar-home { display: none; }

  /* ...mas reaparece no topo quando o Draft começa e a coluna esquerda some. */
  .jogo-wrapper.draft-ativo #btn-voltar-home {
    display: inline-block;
    order: -1;
    justify-self: start;
    width: auto;
    margin-bottom: 2px;
  }

  /* Tela de simulação no celular: vira 1 coluna. display:contents "promove" os filhos das duas colunas ao .sim-wrapper, e a ordem vem do `order` (Voltar, controles, histórico, ação, resumo, stats). */
  .sim-wrapper {
    display: flex;
    flex-direction: column;
    align-items: stretch;   /* cards/controles/stats ocupam toda a largura (botões usam align-self) */
    gap: 14px;
    padding: 20px 16px;
  }
  .sim-principal,
  .sim-lateral { display: contents; }

  #btn-voltar-escalacao { order: 1; }

  /* Bloco de controles em largura cheia com MODO e VELOCIDADE lado a lado */
  .sim-controles {
    order: 3;
    margin-bottom: 0;
    padding: 12px 14px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.04);
    flex-direction: row;
    gap: 16px;
  }
  .sim-ctrl-bloco {
    flex: 1;
    min-width: 0;
  }

  #tabela-brasileirao { order: 2; }
  #stats-campanha   { order: 4; }
  #btn-iniciar-jogo { order: 5; }
  #btn-resumo       { order: 6; }
  #historico-jogos  { order: 7; }

  /* No mobile o respiro vem do gap do wrapper; remove a margem extra dos botões */
  .sim-lateral .sim-btn-acao { margin-top: 0; }
}

/* Celulares pequenos (≤ 420px): reduz mais alguns tamanhos por causa do campo estreito. */
@media (max-width: 420px) {

  .manchete {
    font-size: 2.6rem;
    text-shadow: 2px 2px 0 var(--titulo-sombra);
  }

  /* Campo de amostra da home um pouco menor */
  #campo {
    width: 210px;
    height: 314px;
  }

  .slot-jogo {
    width: 44px;
    height: 44px;
    font-size: 0.5rem;
    border-width: 1px;
  }

  /* Cards de passos mais compactos */
  .step-card { padding: 16px 18px; }
  .step-num  { font-size: 1.9rem; }
}