/* Estilos gerais */
 :root {
  --cor-texto-branco: white;
  --cor-borda-escura: #333;
  --cor-botao-gradiente: linear-gradient(to bottom, #666, #444);

  --fonte-principal: Arial, sans-serif;
  --fonte-botao: 'Arial Black', Gadget, sans-serif;
  --fonte-tempo: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
 }

 footer {
  font-size: 0.75em;
  color: #666;
  font-style: italic;
 }

 a{
  text-decoration: none;
  color: black;
  font-weight: bold;
 }

 /* Tema Hit Mode (Azul) */
 body.hit-mode {
  --cor-primaria: #003366; /* Azul Escuro Cabeçalho */
  --cor-primaria-borda: #0055aa;
  --cor-site-fundo: linear-gradient(to bottom, #e6f2ff, #ffffff); /* Azul perdendo cor no site */
  --cor-config-fundo: linear-gradient(to bottom, #004080, #0066cc); /* Azul perdendo cor no config */
  --cor-tempos-fundo: #fffacd; /* Amarelo claro */
  --cor-tempos-texto: #006400; /* Verde escuro */
  --cor-texto-sombra: rgba(0, 50, 0, 0.3);
 }

 /* Tema Fight Mode (Vermelho) */
 body.fight-mode {
  --cor-primaria: #8b0000; /* Vermelho Escuro Cabeçalho */
  --cor-primaria-borda: #cc0000;
  --cor-site-fundo: linear-gradient(to bottom, #ffe6e6, #ffffff); /* Vermelho perdendo cor no site */
  --cor-config-fundo: linear-gradient(to bottom, #a30000, #e60000); /* Vermelho perdendo cor no config */
  --cor-tempos-fundo: #d3d3d3; /* Cinza */
  --cor-tempos-texto: #000000; /* Preto */
  --cor-texto-sombra: rgba(0, 0, 0, 0.3);
 }
 
 *,
 *::before,
 *::after {
  box-sizing: border-box;
 }

 body {
  font-family: var(--fonte-principal);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  min-height: 100vh;
  margin: 0;
  padding: 0;
  background: var(--cor-site-fundo); /* Gradiente do corpo do site */
  overflow-x: hidden; /* Evita barra de rolagem horizontal durante animações */
 }

 header, main, footer {
  width: 100%;
  text-align: center;
  padding: 20px;
 }

 header {
  background-color: var(--cor-primaria);
  color: var(--cor-texto-branco);
  padding: 10px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
 }

 header h1 {
  margin: 0;
  font-size: 1.8em;
  transition: all 0.3s ease;
 }

 /* Estilos do Título por Modo */
 body.hit-mode header h1 {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* Slim e delicada */
  font-weight: 300;
  color: white;
 }

 body.fight-mode header h1 {
  font-family: 'Arial Black', Gadget, sans-serif; /* Fonte mais robusta e legível */
  color: black;
  text-shadow: 1px 1px 0 rgba(255,255,255,0.4); /* Contraste para leitura */
 }

 header img {
  display: none; /* Esconde a imagem original do header */
 }

 /* Estilos para os seletores de modo */
 .mode-option {
  font-size: 0.75em;
  cursor: pointer;
  padding: 8px 10px;
  border-radius: 8px;
  border: none;
  background-color: #7f8c8d; /* Cinza desativado */
  color: #bdc3c7;
  box-shadow: 0 4px 0 #555; /* Sombra 3D */
  transition: all 0.1s;
  font-weight: bold;
  text-transform: uppercase;
 }

 .mode-option:active {
  transform: translateY(4px);
  box-shadow: none;
 }

 /* Hit Mode Ativo (Azul Claro, Texto Branco) */
 #mode-hit.active {
  background-color: #3498db;
  color: white;
  box-shadow: 0 4px 0 #2980b9;
 }

 /* Fight Mode Ativo (Vermelho Claro, Texto Preto) */
 #mode-fight.active {
  background-color: #ff6b6b;
  color: black;
  box-shadow: 0 4px 0 #c0392b;
 }

 /* Estilos para a seção de configurações */
 #configuracoes {
  margin-bottom: 20px;
 }
 
 .config-container {
  display: flex;
  flex-direction: column;
  background: var(--cor-config-fundo); /* Gradiente do container */
  color: var(--cor-texto-branco);
  padding: 15px 20px;
  border-radius: 15px; /* Bordas mais arredondadas */
  border: 1px solid var(--cor-primaria-borda);
  box-shadow: inset 2px 2px 5px rgba(0,0,0,0.1), /* Sombra interna para efeito 3D */
              1px 1px 3px rgba(255,255,255,0.8);
  width: 290px;
  margin: 0 auto; /* Centraliza o elemento */
 }
 
 .config-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
 }
 
 .config-item span {
  margin: 0 2px;
 }
 
 .config-item input[type="number"] {
  width: 50px; /* Tamanho para os campos de número */
  text-align: center;
  border: 1px solid #bbb;
  border-radius: 5px;
 }

 /* Estilos para a seção de propaganda */
 #propaganda {
  display: none; /* Oculto inicialmente */
  width: 290px;
  margin: 0 auto 20px auto;
  overflow: hidden; /* Garante que a animação de cima para baixo fique contida */
 }

 #propaganda img {
  width: 100%;
  border-radius: 15px;
  box-shadow: 0 4px 6px rgba(0,0,0,0.4);
 }

 /* Animações de entrada e saída */
 @keyframes slideIn {
  from { transform: translateX(100vw); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
 }

 @keyframes slideOut {
  from { transform: translateX(0); opacity: 1; }
  to { transform: translateX(100vw); opacity: 0; }
 }

 .animar-entrada { animation: slideIn 0.5s ease-out forwards; }
 .animar-saida { animation: slideOut 0.5s ease-in forwards; }

 /* Animações para troca de imagens (interno) */
 @keyframes imgFadeOut {
  to { opacity: 0; filter: grayscale(100%); }
 }

 @keyframes imgSlideInTop {
  from { transform: translateY(-100%); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
 }

 .img-fade-out { animation: imgFadeOut 0.5s ease-in forwards; }
 .img-slide-in { animation: imgSlideInTop 0.5s ease-out forwards; }

 /* Estilos para os botões */
 #botoes {
  margin-bottom: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
 }

 #botoes button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 55px;
  height: 55px;
  margin: 0 10px;
  padding: 0;
  cursor: pointer;
  border-radius: 12px; /* Cantos mais arredondados */
  border: 1px solid var(--cor-borda-escura);
  background: var(--cor-botao-gradiente);
  color: var(--cor-texto-branco);
  /* Usa a melhor fonte do sistema para renderizar os ícones de forma consistente */
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 1.5em; /* Tamanho da fonte para os ícones */
  font-weight: bold;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.5); /* Sombra no texto */
  box-shadow: 0 4px 6px rgba(0,0,0,0.4); /* Sombra para "flutuar" */
  transition: all 0.1s ease-in-out; /* Transição suave */
 }

 #botoes button:active {
  /* Efeito de botão pressionado */
  box-shadow: 0 1px 2px rgba(0,0,0,0.5);
  transform: translateY(2px);
 }

 #logo-botao {
  width: 55px;
  height: 55px;
  margin: 0 10px;
  border-radius: 12px;
 }

 /* Estilos para os tempos em destaque */
 #tempos {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: var(--fonte-tempo);
  background: var(--cor-tempos-fundo); /* Cor de fundo específica (Amarelo ou Cinza) */
  color: var(--cor-tempos-texto); /* Cor do texto específica (Verde ou Preto) */
  padding: 20px;
  border-radius: 15px; /* Bordas mais arredondadas */
  border: 1px solid var(--cor-borda-escura);
  box-shadow: 0 4px 6px rgba(0,0,0,0.4); /* Sombra para "flutuar" */
  text-shadow: 1px 1px 2px var(--cor-texto-sombra);
  width: 290px; /* Largura afinada em 15% */
  margin-left: auto; /* Centraliza o elemento */
  margin-right: auto; /* Centraliza o elemento */
  margin-bottom: 20px;
 }

 #tempos div {
  font-size: 1.5em;
  margin: 5px 0; /* Ajusta o espaçamento vertical entre os textos */
  padding: 5px;

 }

 /* Estilos para o rodapé */
 footer {
  background-color: transparent; /* Transparente para mostrar o gradiente do body */
  padding: 10px;
  font-size: 0.8em;
 }

 /* Responsividade */
 @media (max-width: 600px) {
  .config-container, #tempos, #propaganda {
  width: 90%;
  }

  #botoes button {  
    margin: 0 5px; /* Reduz a margem em telas pequenas */
  }
 }