/* style.css */

/* --------------------
   1. Reset e Base
   -------------------- */

* {
  /* Define o modelo de caixa para incluir padding e border no tamanho total do elemento */
  box-sizing: border-box;
  /* Remove margens e paddings padrão do navegador */
  margin: 0;
  padding: 0;
}

:root {
  /* Define variáveis CSS para a paleta de cores inspirada no Dracula */
  --bg-gradient-start: #1a1a2e; /* Roxo/azul escuro inicial do gradiente */
  --bg-gradient-end: #16213e;   /* Azul escuro final do gradiente */
  --text-color: #e0e0ff;        /* Cor de texto principal (tom claro azul/roxo) */
  --neon-green: #50fa7b;       /* Verde neon */
  --neon-pink: #ff79c6;        /* Rosa neon */
  --light-purple: #bd93f9;     /* Roxo claro */
  --light-yellow: #f1fa8c;     /* Amarelo claro */
  --dark-gray: #44475a;         /* Cinza escuro */
  --medium-gray: #6272a4;       /* Cinza médio */
  --canvas-bg: #0f101a;         /* Fundo escuro levemente azulado para o canvas */
  --container-bg: rgba(40, 42, 54, 0.6); /* Fundo semi-transparente para containers (baseado no Dracula background) */
}

body {
  /* Aplica o gradiente diagonal como fundo */
  background: linear-gradient(135deg, var(--bg-gradient-start), var(--bg-gradient-end));
  /* Define a fonte padrão com fallback sans-serif */
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  /* Cor de texto padrão */
  color: var(--text-color);
  /* Define o corpo como um container flexível em coluna */
  display: flex;
  flex-direction: column;
  /* Garante que o corpo ocupe pelo menos 100% da altura da viewport */
  min-height: 100vh;
  /* Suavização de fonte */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* --------------------
   2. Layout Principal
   -------------------- */

.main-content {
  /* Faz com que o conteúdo principal ocupe o espaço disponível */
  flex-grow: 1;
  /* Usa Flexbox para centralizar o conteúdo filho */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  /* Adiciona padding geral */
  padding: 20px;
  width: 100%; /* Garante que o container use a largura total */
}

.game-container,
.menu-container {
  /* Container principal para o jogo ou menu */
  background-color: var(--container-bg);
  /* Padding interno */
  padding: 30px;
  /* Bordas arredondadas */
  border-radius: 12px;
  /* Sombra sutil para profundidade */
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
  /* Largura máxima para manter a legibilidade */
  max-width: 650px; /* Aumentado ligeiramente para acomodar o canvas */
  width: 95%; /* Responsividade em telas menores */
  /* Centraliza o texto dentro do container */
  text-align: center;
  margin-top: 20px; /* Espaço acima */
  margin-bottom: 20px; /* Espaço abaixo */
}

/* --------------------
   3. Componentes
   -------------------- */

/* --- Cabeçalho/Títulos --- */
h1 {
  /* Usa a fonte Orbitron para títulos principais */
  font-family: 'Orbitron', sans-serif;
  font-size: 2.8rem; /* Tamanho da fonte */
  margin-bottom: 30px; /* Espaçamento inferior */
  /* Cor base do título */
  color: var(--text-color);
  text-shadow: 0 0 5px rgba(224, 224, 255, 0.3); /* Leve brilho */
}

/* Classes para estilizar partes específicas do texto (ex: GΞΞK CΦDΞ) */
.geek {
  color: var(--neon-green);
}

.code {
  color: var(--neon-pink);
}

/* --- Botões --- */
.button {
  /* Estilo base para todos os botões */
  display: inline-block; /* Permite padding e margem */
  padding: 12px 25px; /* Padding generoso */
  margin: 10px 5px; /* Margem entre botões */
  border: none; /* Sem borda padrão */
  border-radius: 8px; /* Bordas arredondadas */
  font-size: 1rem; /* Tamanho da fonte */
  font-weight: bold; /* Texto em negrito */
  text-decoration: none; /* Remove sublinhado de links estilizados como botões */
  cursor: pointer; /* Cursor de mão ao passar */
  transition: transform 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease; /* Transição suave */
  text-align: center;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* Garante consistência */
}

.mode-button {
  /* Botões de seleção de modo (index.html) */
  background-color: var(--medium-gray);
  color: var(--text-color);
  width: 80%; /* Ocupa mais espaço */
  max-width: 300px; /* Limita largura máxima */
  font-size: 1.2rem; /* Fonte maior */
}

.mode-button:hover {
  background-color: var(--dark-gray);
  transform: translateY(-2px); /* Efeito de levantar ao passar o mouse */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.control-button {
  /* Botões de controle do jogo (Reset, Pause) */
  background-color: var(--neon-green);
  color: var(--bg-gradient-start); /* Texto escuro para contraste */
  padding: 10px 20px; /* Padding ligeiramente menor */
  min-width: 100px; /* Largura mínima */
}

.control-button:hover {
  background-color: #45e06e; /* Verde um pouco mais claro */
  transform: translateY(-2px);
  box-shadow: 0 3px 6px rgba(80, 250, 123, 0.3);
}

/* Ajuste específico para o botão de pausa quando pausado */
.control-button.paused {
    background-color: var(--neon-pink); /* Usa rosa quando pausado */
}
.control-button.paused:hover {
    background-color: #f56ab6; /* Rosa um pouco mais claro */
    box-shadow: 0 3px 6px rgba(255, 121, 198, 0.3);
}


/* --- Canvas (Área do Jogo) --- */
#myCanvas {
  /* Fundo do canvas */
  background-color: var(--canvas-bg);
  /* Borda sutil */
  border: 1px solid var(--medium-gray);
  /* Bordas arredondadas */
  border-radius: 8px;
  /* Garante que o canvas não exceda o container */
  max-width: 100%;
  height: auto; /* Mantém a proporção */
  display: block; /* Remove espaço extra abaixo */
  margin: 20px auto; /* Centraliza com margem */
}

/* --- Parágrafos e Links --- */
p {
  margin-bottom: 15px; /* Espaçamento padrão para parágrafos */
  line-height: 1.6; /* Altura da linha para melhor leitura */
}

a {
  /* Cor padrão para links */
  color: var(--light-purple);
  /* Remove sublinhado padrão */
  text-decoration: none;
  /* Transição suave para a cor */
  transition: color 0.2s ease;
}

a:hover {
  /* Muda a cor ao passar o mouse */
  color: var(--neon-pink);
  text-decoration: underline; /* Adiciona sublinhado no hover */
}

/* --------------------
   4. Rodapé
   -------------------- */

footer {
  /* Impede que o rodapé encolha */
  flex-shrink: 0;
  /* Padding superior e inferior */
  padding: 20px 0;
  /* Centraliza o texto */
  text-align: center;
  /* Fundo levemente diferente ou pode ser transparente */
  background-color: rgba(10, 10, 20, 0.2); /* Fundo muito sutil */
  /* Borda superior para separação visual */
  border-top: 1px solid var(--dark-gray);
  width: 100%;
  margin-top: auto; /* Empurra para o final da página */
}

.footer-links a,
.footer-links span {
  /* Cor dos links e separadores */
  color: var(--medium-gray);
  margin: 0 8px; /* Espaçamento horizontal */
  font-size: 0.9rem; /* Tamanho da fonte */
}

.footer-links a:hover {
  /* Cor do link no hover */
  color: var(--light-purple);
  text-decoration: none; /* Remove sublinhado no hover do rodapé */
}

.copyright {
  /* Margem acima do texto de direitos autorais */
  margin-top: 10px;
  /* Tamanho da fonte menor */
  font-size: 0.85rem;
  /* Cor mais sutil */
  color: var(--medium-gray);
}

/* Cores específicas para GEEK CODE no rodapé */
.copyright .geek, .footer-links .geek {
  color: var(--neon-green);
  font-weight: bold;
}

.copyright .code, .footer-links .code {
  color: var(--neon-pink);
  font-weight: bold;
}

/* --------------------
   5. Responsividade
   -------------------- */

/* Telas médias (tablets) */
@media (max-width: 768px) {
  h1 {
    font-size: 2.2rem; /* Reduz tamanho do título */
  }

  .game-container,
  .menu-container {
    padding: 20px; /* Reduz padding interno */
  }

  .button {
      padding: 10px 20px; /* Reduz padding dos botões */
      font-size: 0.9rem;
  }

  .mode-button {
      font-size: 1rem; /* Reduz fonte do botão de modo */
  }
}

/* Telas pequenas (smartphones) */
@media (max-width: 480px) {
  body {
      /* Remove gradiente complexo se causar problemas de performance, opcional */
      /* background: var(--bg-gradient-end); */
  }

  h1 {
    font-size: 1.8rem; /* Reduz ainda mais o título */
    margin-bottom: 20px;
  }

  .game-container,
  .menu-container {
    padding: 15px; /* Padding mínimo */
    border-radius: 8px; /* Reduz arredondamento */
  }

  .button {
    padding: 9px 15px;
    font-size: 0.85rem;
    width: auto; /* Permite que os botões fiquem menores */
  }

  .mode-button {
    width: 90%; /* Ajusta largura */
    font-size: 0.95rem;
  }

  .control-button {
      min-width: 80px; /* Largura mínima menor */
  }

  .footer-links {
      display: flex;
      flex-wrap: wrap; /* Quebra os links em múltiplas linhas */
      justify-content: center; /* Centraliza os links quebrados */
      font-size: 0.8rem;
  }
   .footer-links span {
       display: none; /* Oculta separadores | em telas pequenas */
   }
   .footer-links a {
       margin: 5px 10px; /* Espaçamento vertical e horizontal */
   }

   .copyright {
       font-size: 0.75rem;
   }
}