/* Reset básico e box-sizing */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Estilos gerais do body */
body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
}

.roleta-container {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 999;
  width: 300px;
  height: 300px;
}

.roleta {
  width: 100%;
  height: auto;
  cursor: pointer;
  transition: transform 4s ease-out;
}

.resultado-container {
  font-size: 24px;
  text-align: center;
  padding: 20px;
  color: #fff;
  background-color: #000;
  border-radius: 10px;
  margin-top: 20px;
  animation: fadeIn 1s ease-in-out;
}
/* Animação de fade-in no resultado */
@keyframes fadeIn {
  0% {
    opacity: 0;
    transform: scale(0.5);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
/* Botão flutuante para abrir a roleta */
.abrir-roleta-btn {
  position: fixed;
  bottom: 20px; /* Distância do rodapé */
  left: 20px;
  padding: 10px 20px;
  background-color: black;
  color: white;
  border: 2px solid yellow;
  border-radius: 5px;
  cursor: pointer;
  font-size: 16px;
  z-index: 1000;
  transition: background-color 0.3s ease;
}

/* Botão de rolar dados */
.buttondice {
  position: fixed;
  bottom: 72px; /* Aumentar a distância do rodapé para 80px */
  left: 20px;
  padding: 10px 20px;
  background-color: black;
  color: white;
  border: 2px solid yellow;
  border-radius: 5px;
  cursor: pointer;
  font-size: 16px;
  z-index: 1000;
  transition: background-color 0.3s ease;
}

.abrir-roleta-btn:hover,
.buttondice:hover {
  background-color: yellow; /* Cor amarela ao clicar */
  color: black; /* Texto preto quando clicado */
}

/* Botão de fechar */
.fechar-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  background-color: black;
  color: white;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  width: 30px;
  height: 30px;
}

/* Resultado do desafio */
.resultado-desafio-overlay {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: rgba(0, 0, 0, 0.8);
  color: white;
  padding: 20px;
  border-radius: 10px;
  text-align: center;
  z-index: 1001;
  box-shadow: 0px 0px 10px rgba(255, 255, 0, 0.8);
  animation: resultadoAnimado 1s ease-out;
}

.resultado-desafio {
  background-color: #fff;
  padding: 20px;
  border-radius: 10px;
  text-align: center;
  width: 80%;
  max-width: 400px;
  animation: resultadoAnimado 1s ease-out;
}

/* Modal */
.modal {
  display: none;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  justify-content: center;
  align-items: center;
  background-image: transparent;
}

.modal-content {
  background-color: #fff;
  padding: 20px;
  border-radius: 5px;
  text-align: center;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  background-image: transparent;
}

.dice-container {
  display: flex;
  justify-content: center;
  margin: 20px;
  background-image: transparent;
}

.dice {
  width: 70px;
  height: 70px;
  color: white;
  font-size: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 10px;
  background-color: red; /* Transparente para o dado */
  background-image: transparent;
  margin-right: 10px; /* Adiciona espaçamento à direita entre os dados */
}

.resultado-container {
  background-color: #211b15; /* Aplica o fundo vermelho apenas ao resultado */
  color: white;
  padding: 20px;
  border-radius: 10px;
  text-align: center;
  margin-top: 20px;
  font-size: 24px;
}

.dice .img {
  width: 100px;
  height: 100px;
  background-color: transparent; /* Garante que a imagem do dado fique sem fundo */
  background-image: none;
}

/* Animação de rotação */
.rolling {
  animation: rollDice 0.5s infinite;
}

@keyframes rollDice {
  0% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(90deg);
  }
  50% {
    transform: rotate(180deg);
  }
  75% {
    transform: rotate(270deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* Estilo da garrafa */
.garrafa-img {
  width: 300px; /* Ajuste conforme necessário */
  height: auto;
  display: none; /* Oculta a garrafa inicialmente */
  margin: 0 auto;
  padding-top: 20px; /* Distância do topo */
  transition: transform 2s ease; /* Transição suave da rotação */
}

/* Container para a garrafa */
.garrafa-container {
  display: none; /* Oculta a garrafa inicialmente */
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1000;
  text-align: center;
}

/* Botão flutuante para abrir a garrafa */
.abrir-garrafa-btn {
  position: fixed;
  bottom: 120px; /* Alinhamento na parte inferior */
  left: 20px; /* Alinhamento na esquerda */
  padding: 10px 20px;
  background-color: black; /* Cor de fundo preta */
  color: white;
  border: 2px solid yellow; /* Borda fina amarela */
  border-radius: 5px;
  cursor: pointer;
  font-size: 16px;
  z-index: 1000;
  transition: background-color 0.3s ease;
}

/* Animação hover no botão de abrir */
.abrir-garrafa-btn:hover {
  background-color: yellow;
  color: black;
}

/* Botão de fechar */
.fechar-garrafa-btn {
  position: absolute;
  top: -20px;
  right: -20px;
  background-color: black;
  color: white;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  width: 30px;
  height: 30px;
}

/* Estilo para a seção .home */
.home {
  display: flex;
  flex-direction: column; /* Alinha os itens verticalmente */
  align-items: flex-start; /* Alinha todos os itens à esquerda */
  justify-content: flex-start; /* Alinha todos os itens ao topo */
  padding: 20px; /* Adiciona um pouco de espaçamento interno */
  gap: 15px; /* Espaço entre os itens */
  width: 100%; /* Garante que a seção ocupe 100% da largura */
  height: auto; /* Altura ajustável ao conteúdo */
  box-sizing: border-box; /* Inclui o padding e borda no tamanho total do elemento */
}

.header-section {
  display: flex;
  justify-content: space-between;
  width: 100%;
  max-width: 1200px;
  margin-bottom: 20px;
}

.header-left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: 350px;
  margin-left: 70px;
}

.header-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  max-width: 350px;
  margin-top: -100px;
}

/* Container principal */
.container {
  display: flex;
  flex-direction: column; /* Alinha os itens verticalmente */
  padding: 20px;
  max-width: 1200px;
  width: 100%; /* Garante que o container ocupe toda a largura disponível */
  margin: 0 auto; /* Centraliza o container horizontalmente */
}

/* Estilo da imagem como logo */
.responsive-img {
  max-width: 350px; /* Mantém o tamanho máximo da logo */
  height: auto; /* Mantém a proporção */
  display: block;
  margin: 10px 0 0 0; /* Alinha a logo ao topo */
  position: relative; /* Pode ajustar se necessário */
}

/* Contêiner da tabela e do título */
.ranking-container {
  max-width: 100%; /* Permite que o contêiner preencha toda a largura da tela */
  margin: 0 auto; /* Centraliza o contêiner horizontalmente */
  text-align: center; /* Centraliza o texto dentro do contêiner */
  padding: 0 20px; /* Adiciona um pouco de padding lateral */
  position: relative; /* Permite ajustes no posicionamento */
}

/* Estilo do título do ranking */
.ranking-list {
  padding: 15px 10px; /* Aumenta o padding para mais espaço */
  text-align: center; /* Centraliza o texto do título */
  font-size: 1.8em; /* Aumenta o tamanho da fonte do título */
  font-weight: bold; /* Deixa o título em negrito */
  border-bottom: 3px solid #ddd; /* Linha inferior mais espessa */
  background-color: #f8f8f8; /* Fundo opcional para o título */
  margin-bottom: 20px; /* Aumenta o espaço abaixo do título */
  margin-left: 400px; /* Adiciona espaço à esquerda da tabela */
  margin-top: 40px;
}

.ranking-table {
  width: calc(100% - 20px); /* Ajusta a largura da tabela com margem */
  border-collapse: collapse;
  margin: 0 auto; /* Centraliza a tabela horizontalmente */
  table-layout: fixed; /* Garante que a tabela ocupe o espaço total disponível */
  margin-left: 370px; /* Adiciona espaço à esquerda da tabela */
}

/* Adiciona um pouco de espaço à direita da tabela */
.ranking-table {
  margin-right: 20px; /* Adiciona espaço à direita da tabela */
}

/* Estilo das células da tabela */
.ranking-table th,
.ranking-table td {
  padding: 8px 10px; /* Reduz o padding das células */
  text-align: center;
  border: 1px solid #ddd; /* Borda mais fina */
}

/* Cabeçalhos da tabela */
.ranking-table th {
  background-color: #333;
  color: #fff;
  font-size: 1.1em; /* Ajusta o tamanho da fonte dos cabeçalhos */
}

/* Dados da tabela */
.ranking-table td {
  font-size: 0.9em; /* Ajusta o tamanho da fonte dos dados */
  color: #333;
}

/* Linhas alternadas da tabela */
.ranking-table tr:nth-child(even) {
  background-color: #f9f9f9;
}

/* Estilos personalizados para o top 3 */
.ranking-table tr.top1 td {
  background-color: #ffd700; /* Ouro */
  color: #000;
  font-weight: bold;
}

.ranking-table tr.top2 td {
  background-color: #c0c0c0; /* Prata */
  color: #000;
  font-weight: bold;
}

.ranking-table tr.top3 td {
  background-color: #cd7f32; /* Bronze */
  color: #000;
  font-weight: bold;
}

/* Estilo específico para a coluna de posição */
.ranking-table th:nth-child(1),
.ranking-table td:nth-child(1) {
  width: 50px; /* Define uma largura fixa para a coluna de posição */
  padding: 8px 5px; /* Ajusta o padding para a coluna de posição */
  border-right: 2px solid #ddd; /* Adiciona uma borda direita para separar a coluna */
}
/* Estilo para o container da mensagem de conquista */
#mensagem-conquista {
    display: none;
    position: fixed;
    top: 30%;
    left: 10%;
    transform: translateX(-50%);
    background-color: #ffeb3b; /* Cor de fundo amarelo */
    color: #333; /* Cor do texto */
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    font-size: 1.5em;
    font-weight: bold;
    text-align: center;
    z-index: 1000;
    animation: fadeInOut 5s ease-out;
}

/* Animação de entrada e saída */
@keyframes fadeInOut {
    0% { opacity: 0; transform: translateY(-20px); }
    20% { opacity: 1; transform: translateY(0); }
    80% { opacity: 1; transform: translateY(0); }
    100% { opacity: 0; transform: translateY(20px); }
}

/* Efeito de destaque */
#mensagem-conquista::before {
    content: "🎉 ";
    font-size: 1.5em;
    display: inline-block;
    vertical-align: middle;
}

/* Gráfico */
.grafico {
  width: 100%;
  background-color: #fff;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  display: flex;
  justify-content: center;
  align-items: center;
  height: 300px;
  margin-top: 20px; /* Espaço acima do gráfico */
}

.grafico canvas {
  width: 100%;
  max-width: 400px;
  height: 100%;
}

/* Estilo dos troféus */
.trofeus-medalhas {
  display: flex;
  justify-content: center; /* Centraliza os troféus */
  gap: 20px;
  margin-top: 20px; /* Espaço acima dos troféus */
}

.posicao {
  text-align: center;
}

.posicao img {
  width: 100px; /* Tamanho dos troféus */
  height: auto;
}

.destaque img {
  width: 200px; /* Destaque para o troféu do primeiro lugar */
  height: auto;
}

.info {
  margin-top: 10px;
}

.numero {
  display: block;
  font-size: 1.9em;
  font-weight: bold;
}

.destaque .numero {
  color: gold; /* Destaque para o primeiro lugar */
  font-size: 2.2em;
}

#nome-primeiro,
#nome-segundo,
#nome-terceiro {
  font-size: 1em;
}
@keyframes trocarPosicao {
  0% {
    transform: scale(1);
    opacity: 0;
  }
  50% {
    transform: scale(1.3);
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.cronometro-container {
  margin-left: 20px;
  font-size: 1em;
  text-align: center;
}

/* Animação de preenchimento das colunas do gráfico */
.column {
  position: relative;
  background: linear-gradient(
    to top,
    #ffd700,
    #f7e7ce
  ); /* Gradiente para simular o líquido */
  border-radius: 5px 5px 0 0; /* Bordas arredondadas no topo */
  animation: fill 2s ease-in-out forwards; /* Animação de preenchimento */
}

@keyframes fill {
  from {
    height: 0;
  }
  to {
    height: 100%; /* Ajuste conforme necessário */
  }
}

/* Animação de espuma */
#medalhas {
  display: flex;
  justify-content: center;
  margin-top: 10px;
}

#medalhas img {
  width: 50px;
  height: auto;
  margin: 0 10px;
}

.bar {
  position: relative;
  width: 100%;
  background-color: rgba(255, 215, 0, 0.2); /* Ou prata/bronze */
  border: 1px solid #ccc;
  height: 200px;
}

.foam {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 0;
  background-color: rgba(255, 215, 0, 0.7); /* Cor do líquido */
  transition: height 2s ease-in-out;
}

.litros {
  position: absolute;
  bottom: 5px;
  left: 50%;
  transform: translateX(-50%);
  font-weight: bold;
  font-size: 1.2em;
  color: #fff;
}

@keyframes foam {
  0% {
    height: 0;
  }
  100% {
    height: 100%;
  }
}

.btn-group button {
  margin: 0 2px; /* Define o espaço mínimo entre os botões */
  border-radius: 4px; /* Mantém bordas arredondadas */
  flex-wrap: nowrap; /* Impede os botões de quebrarem para a próxima linha */
  font-size: 16px; /* Reduz um pouco o tamanho dos botões */
  padding: 8px 12px; /* Ajusta o espaçamento interno dos botões */
}

/* Estilo do rodapé */
footer {
  background-color: #000; /* Fundo preto para o rodapé */
  padding: 20px; /* Espaçamento interno do rodapé */
  color: #fff; /* Cor do texto */
  display: flex;
  flex-direction: column; /* Alinha os itens verticalmente */
  align-items: center; /* Centraliza os itens horizontalmente */
  gap: 10px; /* Espaço entre os itens */
}

/* Estilo para o container de inputs e botões no rodapé */
.input-container {
  background-color: #333; /* Fundo escuro para o painel de inputs e botões */
  padding: 15px; /* Espaçamento interno do painel */
  border-radius: 8px; /* Bordas arredondadas */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Sombra para um efeito de destaque */
  width: 100%; /* Ocupa toda a largura disponível */
  max-width: 600px; /* Largura máxima */
}

/* Estilo dos inputs e botões no rodapé */
.input-container input,
.input-container button {
  background-color: #444; /* Fundo dos inputs e botões */
  border: 1px solid #555; /* Borda dos inputs e botões */
  color: #fff; /* Cor do texto */
  padding: 10px; /* Espaçamento interno */
  margin: 5px 0; /* Margem vertical */
  border-radius: 5px; /* Bordas arredondadas */
  font-size: 1em; /* Tamanho da fonte */
  width: calc(
    100% - 22px
  ); /* Ajusta a largura para ocupar o espaço disponível */
}

.input-container button {
  background-color: #555; /* Fundo dos botões */
  cursor: pointer; /* Cursor em forma de mão ao passar sobre o botão */
}

.input-container button:hover {
  background-color: #666; /* Fundo dos botões ao passar o mouse */
}
.premios-selecionar {
  margin-top: 20px;
}

.premios-selecionar div {
  margin-bottom: 10px;
}

.premios-selecionar input {
  margin-left: 10px;
  padding: 5px;
}

.premios-selecionar button {
  background-color: #007bff;
  color: #fff;
  border: none;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
}

.premios-selecionar button:hover {
  background-color: #0056b3;
}

/* Media queries para diferentes tamanhos de tela */
@media (max-width: 768px) {
  .header-section {
    flex-direction: column; /* Muda para coluna em telas menores */
    align-items: center;
  }

  .header-right {
    margin-top: 0; /* Remove a margem superior em telas menores */
  }

  .ranking-list {
    margin-left: 0; /* Remove a margem à esquerda em telas menores */
  }

  .ranking-table {
    margin-left: 0; /* Remove a margem à esquerda da tabela em telas menores */
    width: 100%;
  }

  .grafico {
    height: 200px; /* Reduz a altura do gráfico em telas menores */
  }

  .trofeus-medalhas {
    flex-direction: flex; /* Muda a direção para coluna em telas menores */
    margin-left: 30px;
  }

  .posicao img {
    width: 80px; /* Reduz o tamanho dos troféus */
  }

  .destaque img {
    width: 150px; /* Reduz o tamanho do troféu de destaque */
  }

  .cronometro-container {
    font-size: 0.9em; /* Ajusta o tamanho da fonte do cronômetro */
  }

  @media (max-width: 480px) {
    .header-left,
    .header-right {
      max-width: 100%; /* Ajusta o máximo de largura das seções */
      text-align: center; /* Centraliza o texto */
      margin-left: 20px;

    }

    .ranking-list {
      font-size: 1.5em; /* Ajusta o tamanho da fonte do título */
    }

    .ranking-table th,
    .ranking-table td {
      font-size: 0.8em; /* Reduz o tamanho da fonte das células */
      padding: 6px 8px; /* Reduz o padding das células */
    }

    .grafico {
      height: 150px; /* Reduz a altura do gráfico em telas muito pequenas */
    }

    .posicao img {
      width: 60px; /* Reduz o tamanho dos troféus */
    }

    .destaque img {
      width: 120px; /* Reduz o tamanho do troféu de destaque */
    }

    .cronometro-container {
      font-size: 0.8em; /* Ajusta ainda mais o tamanho da fonte do cronômetro */
    }
    .btn-group button {
      margin: 0 2px; /* Define o espaço mínimo entre os botões */
      border-radius: 4px; /* Mantém bordas arredondadas */
      flex-wrap: nowrap; /* Impede os botões de quebrarem para a próxima linha */
      font-size: 16px; /* Reduz um pouco o tamanho dos botões */
      padding: 4px 6px; /* Ajusta o espaçamento interno dos botões */
    }
  }
  .roleta-container {
    width: 250px;
    height: 250px;
  }

  .fechar-btn {
    width: 30px;
    height: 30px;
    top: -20px; /* Aumente este valor para distanciar o botão para cima */
    right: -20px;
  }

  .resultado-container {
    font-size: 14px;
  }
}
#mensagem-conquista {
        top: 20%;
        left: 10%;
        transform: translateX(-50%) translateY(-20%);
        padding: 15px;
        font-size: 1em;
        width: 80%; /* Reduz a largura para telas pequenas */
    }

    #mensagem-conquista::before {
        font-size: 1.2em;
    }
}