/* =================================================================
   LotoCarva — palpites-dezenas.css
   Escolha das próprias dezenas na página de Palpites (2.1.270).

   O componente "dezena" segue o mesmo padrão do volante do Gerador de
   Jogos (medidas, tipografia, espaçamento e transição), para o usuário
   reconhecer o mesmo controle ao trocar de ferramenta.

   Duas diferenças são intencionais:
   — a dezena não marcada é escura, porque esta grade não carrega a cor de
     temperatura (quente/média/fria) usada no volante do Gerador;
   — a dezena marcada usa a cor da modalidade, com tinta e anel calculados
     para atender WCAG 2.2 (1.4.1, 1.4.3 e 1.4.11).
   ================================================================= */

.palpites-dezenas {
  margin-top: 12px;
  padding: 12px;
  background: rgba(8,13,22,.32);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 12px;
}
.palpites-dezenas[hidden] { display: none !important; }

.palpites-dezenas-topo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 9px;
}

.palpites-dezenas-contagem {
  color: #f4f6f9;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.palpites-dezenas-botoes {
  display: inline-flex;
  gap: 8px;
}

.palpites-dezenas-dica {
  margin: 8px 0 0;
  color: #bfc7d2;
  font-size: .93rem;
  line-height: 1.3;
}

/* Volante — mesmas medidas e mesmos pontos de quebra do volante do Gerador
   de Jogos. As colunas continuam vindo do GameFilterManager (GRID_COLUMNS);
   em telas pequenas o número de colunas se reduz, exatamente como o Gerador
   faz para manter a dezena grande o suficiente para o toque. */
.palpites-dezenas-grade {
  display: grid;
  grid-template-columns: repeat(var(--palpites-colunas, 10), minmax(0, 1fr));
  margin: 10px auto 0;
}

/* Família de 10 colunas (Mega-Sena, Quina, Lotomania, Dupla Sena, Dia de
   Sorte e Timemania): medidas do Gerador. */
.palpites-dezenas-grade--10 {
  width: 100%;
  max-width: 540px;
  gap: 6px;
  font-size: clamp(1rem, 4.4vw, 1.15rem);
}

@media screen and (min-width: 768px) {
  .palpites-dezenas-grade--10 {
    max-width: 520px;
    font-size: 1.2rem;
  }
}

@media screen and (max-width: 339px) {
  .palpites-dezenas-grade--10 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    max-width: 300px;
  }
}

@media screen and (min-width: 340px) and (max-width: 479px) {
  .palpites-dezenas-grade--10 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    max-width: 360px;
  }
}

@media screen and (min-width: 480px) and (max-width: 599px) {
  .palpites-dezenas-grade--10 {
    grid-template-columns: repeat(8, minmax(0, 1fr));
    max-width: 456px;
  }
}

@media screen and (min-width: 600px) and (max-width: 767px) {
  .palpites-dezenas-grade--10 {
    grid-template-columns: repeat(10, minmax(0, 1fr));
    max-width: 540px;
  }
}

/* Família de 5 colunas (Lotofácil e +Milionária). */
.palpites-dezenas-grade--5 {
  width: 95%;
  max-width: 340px;
  gap: 8px;
  font-size: clamp(1.2rem, 6.5vw, 1.6rem);
}

@media screen and (min-width: 768px) {
  .palpites-dezenas-grade--5 {
    width: 100%;
    max-width: 390px;
    gap: 11px;
    font-size: 1.34rem;
  }
}

/* +Milionária mantém as medidas próprias que o Gerador usa para ela. */
.milionaria .palpites-dezenas-grade {
  width: 100%;
  max-width: 270px;
  gap: 8px;
  font-size: clamp(1.1rem, 5vw, 1.35rem);
}

@media screen and (min-width: 768px) {
  .milionaria .palpites-dezenas-grade {
    max-width: 280px;
    gap: 10px;
    font-size: 1.35rem;
  }
}

/* O DNA da dezena, igual ao do volante do Gerador. */
.palpites-dezena {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 1 / 1;
  padding: 0;
  margin: 0;
  text-align: center;
  color: #f4f6f9;
  background: #101722;
  border: 2px solid #5b6b86;
  border-radius: 50%;
  font: inherit;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 0;
  transition: all .2s ease;
  cursor: pointer;
}

/* Dezena escolhida: cor oficial da modalidade, tinta de maior contraste e
   anel no tom secundário para o estado não depender só da cor (WCAG 1.4.1). */
.palpites-dezena.is-selected {
  background: var(--primary-color, var(--yellow));
  border-color: var(--secondary-color, rgba(255,255,255,.45));
  color: var(--text-color, #fff);
}

/* Quina: o secundário fica em 2,95:1 sobre o fundo escuro; o anel usa o
   próprio token de texto da modalidade para delimitar o estado. */
.quina .palpites-dezena.is-selected {
  border-color: var(--quina-text);
}

/* Pares cor/tinta que não atingem 4,5:1 (WCAG 1.4.3) usam tinta escura. */
.megasena .palpites-dezena.is-selected,
.lotomania .palpites-dezena.is-selected,
.loteca .palpites-dezena.is-selected,
.diadesorte .palpites-dezena.is-selected,
.dia-de-sorte .palpites-dezena.is-selected {
  color: #0b0f14;
}

.palpites-dezena:focus-visible {
  outline: 3px solid rgba(250,204,21,.45);
  outline-offset: 2px;
}

/* Indicação do Gerador de Jogos, logo abaixo do botão de gerar. */
.palpites-fechamento-nota {
  margin: 14px 0 0;
}

/* Prévia para visitantes: o painel aparece inteiro, com os controles
   desativados pelo fieldset. O ajuste abaixo só deixa o bloqueio visível e
   impede o cursor de sugerir clique em algo inerte. */
.palpites-config-fieldset[disabled] {
  opacity: .7;
}

.palpites-config-fieldset[disabled] button,
.palpites-config-fieldset[disabled] input,
.palpites-config-fieldset[disabled] select,
.palpites-config-fieldset[disabled] .palpites-dezena {
  cursor: default;
}