/* styles/style-melhorado.css - Versão com melhorias de responsividade */
:root {
  --cor-primaria: #ffd43b;
  --cor-secundaria: #ffe066;
  --cor-texto-botao: #1a2633;
  --cor-azul-escuro: #25406b;
  --cor-fundo: #fffdf2;
  --cor-sombra-clara: #e0cfa1;
  --cor-sombra-escura: #b5a57a;
  --cor-texto-geral: #3d3d3d;
  --cor-fundo-painel: #ffffff;
  --cor-destaque-vermelho: #E53935;

  --cor-primaria-rgb: 255, 212, 59;
  --cor-azul-escuro-rgb: 37, 64, 107;
  --cor-fundo-rgb: 255, 253, 242;

  --fonte-principal: 'Montserrat', Arial, sans-serif;
  
  /* Novas variáveis para melhor responsividade */
  --tamanho-minimo-touch: 44px; /* Tamanho mínimo recomendado para elementos touch */
  --espacamento-mobile: clamp(0.5rem, 2vw, 1rem);
  --espacamento-desktop: clamp(1rem, 3vw, 2rem);
}

/* Base e Reset */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  /* Melhora a suavidade do scroll em dispositivos móveis */
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
  min-height: 100dvh; /* Usa dynamic viewport height para melhor suporte mobile */
  font-family: var(--fonte-principal);
  background-color: var(--cor-fundo);
  background-image:
    radial-gradient(circle at 80% 15%, var(--cor-secundaria) 5vw, transparent 15vw),
    radial-gradient(circle at 15% 80%, var(--cor-primaria) 4vw, transparent 12vw),
    radial-gradient(circle at 90% 75%, rgba(var(--cor-azul-escuro-rgb), 0.5) 3vw, transparent 10vw),
    radial-gradient(circle at 20% 25%, rgba(var(--cor-azul-escuro-rgb), 0.6) 2vw, transparent 9vw),
    radial-gradient(ellipse at center, var(--cor-fundo) 60%, #fff2d1 100%);
  overflow-x: hidden;
  color: var(--cor-texto-geral);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--espacamento-mobile);
  /* Melhora a renderização de texto em dispositivos móveis */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Container Principal */
.container {
  width: 100%;
  max-width: 500px;
  margin: auto;
  text-align: center;
  padding: var(--espacamento-mobile);
  background-color: rgba(var(--cor-fundo-rgb), 0.85);
  border-radius: 20px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.1);
  backdrop-filter: blur(5px);
  border: 1px solid rgba(255, 255, 255, 0.5);
  /* Melhora a performance em dispositivos móveis */
  will-change: transform;
}

/* Logo */
.logo {
  width: clamp(120px, 35vw, 220px);
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  border-radius: 50%;
  margin: 0 auto 1.5rem auto;
  box-shadow:
    0 4px 15px 0 rgba(var(--cor-sombra-escura), 0.5),
    0 0 0 6px var(--cor-fundo),
    0 0 0 10px var(--cor-azul-escuro),
    0 0 0 14px var(--cor-primaria);
  display: block;
  transition: transform 0.3s ease-out, box-shadow 0.3s ease-out;
  /* Melhora a performance da animação */
  transform: translateZ(0);
}

.logo:hover {
  transform: scale(1.05) rotate(-3deg) translateZ(0);
}

/* Títulos */
.titulo-jogo {
  font-size: clamp(1.5rem, 5vw, 2.5rem);
  color: var(--cor-azul-escuro);
  font-weight: 800;
  text-shadow: 1px 1px 0 var(--cor-sombra-clara);
  margin-bottom: 0.5rem;
  line-height: 1.2;
}

.subtitulo {
  font-size: clamp(0.85rem, 2.2vw, 1.1rem);
  color: var(--cor-texto-geral);
  margin-bottom: 2rem;
  line-height: 1.6;
  max-width: 45ch;
  margin-left: auto;
  margin-right: auto;
}

/* Menu de Botões */
.menu {
  display: flex;
  flex-direction: column;
  gap: clamp(1rem, 3vw, 1.25rem);
  width: 100%;
}

.main-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  width: 100%;
  min-height: var(--tamanho-minimo-touch); /* Garante tamanho mínimo para touch */
  background: linear-gradient(135deg, var(--cor-secundaria) 0%, var(--cor-primaria) 100%);
  color: var(--cor-texto-botao);
  font-size: clamp(1rem, 2.8vw, 1.3rem);
  font-weight: 700;
  border: none;
  border-radius: 12px;
  padding: clamp(0.8rem, 2.5vw, 1rem) clamp(0.5rem, 2vw, 0.75rem);
  cursor: pointer;
  box-shadow: 0 4px 0px var(--cor-sombra-escura), 0 6px 12px rgba(0,0,0,0.15);
  letter-spacing: 0.5px;
  text-decoration: none;
  transition: all 0.15s ease-out;
  font-family: var(--fonte-principal);
  /* Melhora a performance da animação */
  transform: translateZ(0);
  /* Melhora a experiência touch */
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.main-btn:hover {
  transform: translateY(-3px) translateZ(0);
  box-shadow: 0 6px 0px var(--cor-sombra-escura), 0 8px 16px rgba(0,0,0,0.2);
}

.main-btn:active {
  transform: translateY(1px) translateZ(0);
  box-shadow: 0 2px 0px var(--cor-sombra-escura), 0 4px 8px rgba(0,0,0,0.2);
}

.main-btn.destaque {
  border: 2px solid var(--cor-azul-escuro);
  box-shadow: 0 4px 0px var(--cor-azul-escuro), 0 0 15px var(--cor-primaria), 0 6px 12px rgba(0,0,0,0.15);
}

.btn-icon {
  font-size: 1.1em;
  transition: transform 0.2s ease;
}

.main-btn:hover .btn-icon {
  transform: scale(1.1);
}

/* Botão Voltar */
.btn-voltar-top {
  background: var(--cor-fundo-painel);
  color: var(--cor-azul-escuro);
  font-size: 1rem;
  border: 2px solid var(--cor-sombra-clara);
  width: var(--tamanho-minimo-touch);
  height: var(--tamanho-minimo-touch);
  min-width: var(--tamanho-minimo-touch);
  min-height: var(--tamanho-minimo-touch);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  transition: all 0.2s ease-out;
  text-decoration: none;
  flex-shrink: 0;
  /* Melhora a experiência touch */
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transform: translateZ(0);
}

.btn-voltar-top:hover {
  transform: scale(1.1) translateZ(0);
  border-color: var(--cor-primaria);
  color: var(--cor-primaria);
}

/* Melhorias para dispositivos móveis */
@media (max-width: 768px) {
  body {
    padding: var(--espacamento-mobile);
  }
  
  .container {
    padding: var(--espacamento-mobile);
    border-radius: 16px;
  }
  
  /* Aumenta ligeiramente o tamanho dos botões em mobile */
  .main-btn {
    min-height: 48px;
    padding: 1rem 0.75rem;
  }
  
  /* Melhora o espaçamento entre elementos */
  .menu {
    gap: 1rem;
  }
}

@media (max-width: 480px) {
  /* Para telas muito pequenas */
  .container {
    margin: 0.5rem;
    padding: 1rem;
  }
  
  .logo {
    width: clamp(100px, 30vw, 180px);
    margin-bottom: 1rem;
  }
  
  .subtitulo {
    margin-bottom: 1.5rem;
  }
}

/* Melhorias para dispositivos desktop */
@media (min-width: 769px) {
  body {
    padding: var(--espacamento-desktop);
  }
  
  .container {
    padding: var(--espacamento-desktop);
  }
  
  /* Adiciona hover states mais sutis para desktop */
  .main-btn:hover {
    transform: translateY(-2px) translateZ(0);
  }
}

/* Melhorias para orientação landscape em mobile */
@media (max-height: 500px) and (orientation: landscape) {
  body {
    padding: 0.5rem;
  }
  
  .container {
    padding: 1rem;
    max-width: 90vw;
  }
  
  .logo {
    width: clamp(80px, 20vw, 150px);
    margin-bottom: 0.5rem;
  }
  
  .titulo-jogo {
    font-size: clamp(1.2rem, 4vw, 2rem);
    margin-bottom: 0.25rem;
  }
  
  .subtitulo {
    font-size: clamp(0.8rem, 2vw, 1rem);
    margin-bottom: 1rem;
  }
  
  .menu {
    gap: 0.75rem;
  }
  
  .main-btn {
    padding: 0.75rem 0.5rem;
    min-height: 40px;
  }
}

/* Melhorias para acessibilidade */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  
  .logo:hover {
    transform: scale(1.02) translateZ(0);
  }
  
  .main-btn:hover {
    transform: translateY(-1px) translateZ(0);
  }
}

/* Melhorias para alto contraste */
@media (prefers-contrast: high) {
  .main-btn {
    border: 2px solid var(--cor-texto-botao);
  }
  
  .btn-voltar-top {
    border-width: 3px;
  }
}