/* PADRÃO MAOMAO: Correção Obrigatória para Windows 7 (Emojis) */
@import url("https://fonts.googleapis.com/css2?family=Noto+Color+Emoji&display=swap");

* {
  font-family: "Nunito", "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif !important;
  -webkit-tap-highlight-color: transparent;
}

.pixel-font {
  font-family: "Press Start 2P", monospace !important;
}

:root {
  --azul-maomao: #219ebc;
  --azul-escuro: #023047;
  --amarelo-maomao: #ffb703;
  --azul-hub: #8ecae6;
}

body {
  background-color: var(--azul-maomao);
  color: white;
  min-height: 100vh;
  overflow-x: hidden;
  margin: 0;
  touch-action: manipulation; /* Melhora a resposta ao toque em Lousas/Tablets */
}

.escondido {
  display: none !important;
}

@keyframes flutuar {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-20px);
  }
}
.maomao-float {
  animation: flutuar 3s ease-in-out infinite;
  filter: drop-shadow(0 0 20px var(--amarelo-maomao));
}

.zoom-netflix {
  transition: all 1.2s cubic-bezier(0.25, 1, 0.5, 1);
  z-index: 100;
}
.zoom-active {
  transform: scale(4) translateY(-10%);
  opacity: 0;
  pointer-events: none;
}

.selecionado {
  border: 4px solid var(--amarelo-maomao) !important;
  transform: scale(1.1);
  box-shadow: 0 0 20px rgba(255, 183, 3, 0.4);
}

/* Camadas Estilizadas */
#camada-hub {
  background-color: var(--azul-hub);
  color: var(--azul-escuro);
  z-index: 80;
  position: fixed;
  inset: 0;
  overflow-y: auto;
}
#camada-jogo {
  background: black;
  z-index: 150;
  position: fixed;
  inset: 0;
}

.cat-card {
  transition: all 0.3s;
  border-bottom: 8px solid rgba(0, 0, 0, 0.2);
  cursor: pointer;
}
.cat-card:hover {
  transform: translateY(-10px);
}

#toast {
  transition: all 0.3s ease;
  transform: translateY(-100px);
  opacity: 0;
  z-index: 2000;
}
#toast.visivel {
  transform: translateY(0);
  opacity: 1;
}

/* Suporte para notch em iOS e safe areas */
.safe-area-top {
  padding-top: max(0.5rem, env(safe-area-inset-top));
}
.safe-area-bottom {
  padding-bottom: max(0.5rem, env(safe-area-inset-bottom));
}

#splash {
  background: var(--azul-maomao);
  z-index: 1000;
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

/* Melhor toque em dispositivos móveis */
@media (max-width: 768px) {
  button {
    min-height: 44px;
    min-width: 44px;
  }
  
  /* Garante que o botão voltar seja sempre acessível */
  #camada-jogo .fixed.top-0 {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    z-index: 211 !important;
  }
}