/* Layout Principal do Mapa de Calor */
.heatmap-container { 
  max-width: 650px; 
  margin: 30px auto; 
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 
  background-color: #0b1220;
  color: #e2e8f0;
  padding: 25px;
  border-radius: 14px;
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.45);
}

.heatmap-container h2 {
  text-align: center;
  margin-bottom: 20px;
  color: #2d6cff;
}

/* Grid 6x10 do Volante da Mega-Sena */
.volante-grid { 
  display: grid; 
  grid-template-columns: repeat(10, 1fr); 
  gap: 10px; 
  margin-bottom: 20px; 
}

/* Bolas das Dezenas */
.dezena-bola { 
  aspect-ratio: 1 / 1; 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  border-radius: 50%; 
  font-weight: bold; 
  color: #ffffff; 
  font-size: 16px; 
  text-shadow: 1px 1px 3px rgba(0,0,0,0.7); 
  cursor: pointer; 
  transition: all 0.2s ease; 
  border: 3px solid transparent;
  user-select: none;
}

.dezena-bola:hover { 
  transform: scale(1.15); 
}

/* Estado da bola quando clicada/selecionada */
.dezena-bola.selecionada {
  border: 3px solid #fbbf24;
  transform: scale(1.15);
  box-shadow: 0 0 15px rgba(251, 191, 36, 0.9);
}

/* Barra de Legenda de Cores */
.legenda { 
  display: flex; 
  justify-content: space-between; 
  align-items: center; 
  font-size: 13px; 
  color: #94a3b8; 
  margin-top: 15px;
}

.escala-cores { 
  height: 12px; 
  flex-grow: 1;
  background: linear-gradient(to right, hsl(240, 100%, 50%), hsl(0, 100%, 50%)); 
  border-radius: 6px; 
  margin: 0 15px; 
}

/* Tooltip (Caixa de informação flutuante) */
.tooltip { 
  position: absolute; 
  background-color: rgba(15, 23, 42, 0.95); 
  color: #f8fafc; 
  padding: 10px 14px; 
  border-radius: 8px; 
  font-size: 13px; 
  pointer-events: none; 
  z-index: 1000; 
  transition: opacity 0.15s ease-in-out; 
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5); 
  border: 1px solid #242447;
  white-space: nowrap; 
}

.tooltip strong { 
  color: #38bdf8; 
}

/* Painel de resumo de seleção */
#painel-selecao {
  margin-top: 25px;
  padding: 15px;
  background: #16162a;
  border: 1px solid #242447;
  border-radius: 10px;
  text-align: center;
}

#lista-selecao {
  color: #fbbf24;
  margin-top: 5px;
  font-size: 16px;
}

/* --- ESTILOS DO GERADOR DE JOGOS --- */
.controles-gerador {
  display: flex;
  justify-content: center;
  gap: 15px;
  margin-top: 25px;
  flex-wrap: wrap;
  align-items: flex-end;
  border-top: 1px solid #242447;
  padding-top: 20px;
}

.input-group {
  display: flex;
  flex-direction: column;
  text-align: left;
}

.input-group label {
  font-size: 13px;
  color: #94a3b8;
  margin-bottom: 6px;
  font-weight: bold;
}

.input-group input, .input-group select {
  padding: 10px 12px;
  background-color: #0b1220;
  border: 1px solid #242447;
  color: #fbbf24; /* Texto dourado */
  border-radius: 6px;
  font-size: 14px;
  width: 110px;
  outline: none;
}

.input-group input:focus, .input-group select:focus {
  border-color: #2d6cff;
}

.btn-acao {
  background-color: #2d6cff;
  color: white;
  border: none;
  padding: 10px 24px;
  border-radius: 6px;
  font-weight: bold;
  font-size: 14px;
  cursor: pointer;
  transition: background-color 0.2s;
  height: 40px;
}

.btn-acao:hover {
  background-color: #1e4bb8;
}

/* Lista de resultados gerados */
.resultado-container {
  margin-top: 25px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-align: left;
}

.jogo-gerado {
  background: #0b1220;
  border: 1px solid #242447;
  border-left: 4px solid #fbbf24; /* Linha dourada de destaque */
  padding: 15px;
  border-radius: 8px;
  font-size: 18px;
  letter-spacing: 3px;
  color: #e2e8f0;
  font-weight: bold;
  box-shadow: 0 4px 6px rgba(0,0,0,0.3);
}