/* ===================================================================
   ENERGIA.BET — CÓDIGO PERFEITO (v17 - Baseado na Análise Real)..
   - Banners cinematográficos com animações insanas
   - Cards de jogos com efeitos 3D e nomes visíveis
   - Header com identidade "energia" total
   - FAB que nunca desaparece
   - Identidade visual da marca em cada elemento
   =================================================================== */

:root {
  --energia-yellow: #ffea00;
  --energia-yellow-glow: #fff455;
  --energia-ink: #0b0b0b;
  --energia-bg: #0a0a0a;
  --energia-dark: #1a1a1a;
  --energia-radius: 12px;
  --energia-shadow: 0 8px 32px rgba(255, 234, 0, 0.15);
  --energia-glow: 0 0 20px rgba(255, 234, 0, 0.3);
}

/* ===================================================================
   1. FUNDAÇÃO ENERGÉTICA
   =================================================================== */

/* Fundo com grid de energia animado */
body {
  background: 
    radial-gradient(circle at 20% 20%, rgba(255, 234, 0, 0.03) 0%, transparent 50%),
    radial-gradient(circle at 80% 80%, rgba(255, 234, 0, 0.03) 0%, transparent 50%),
    linear-gradient(rgba(255, 234, 0, 0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 234, 0, 0.02) 1px, transparent 1px),
    var(--energia-bg) !important;
  background-size: 100% 100%, 100% 100%, 30px 30px, 30px 30px;
  animation: energyGrid 25s linear infinite;
}

html body header nav a:hover::before {
  left: 100%;
}

html body header nav a:hover {
  color: var(--energia-yellow) !important;
  text-shadow: 0 0 8px rgba(255, 234, 0, 0.6);
  transform: translateY(-2px);
}

/* Botões Entrar/Cadastro energizados */
html body header button {
  position: relative !important;
  border-radius: 25px !important;
  font-weight: 700 !important;
  transition: all 0.3s ease !important;
  overflow: hidden !important;
}

/* Botão Entrar */
html body header button:first-of-type {
  background: transparent !important;
  border: 2px solid rgba(255, 234, 0, 0.5) !important;
  color: var(--energia-yellow) !important;
}

html body header button:first-of-type:hover {
  background: rgba(255, 234, 0, 0.1) !important;
  border-color: var(--energia-yellow) !important;
  box-shadow: var(--energia-glow);
  transform: scale(1.05);
}

/* Botão Cadastro */
html body header button:last-of-type {
  background: var(--energia-yellow) !important;
  border: 2px solid var(--energia-yellow) !important;
  color: var(--energia-ink) !important;
  animation: depositPulse 3s ease-in-out infinite;
}

html body header button:last-of-type:hover {
  background: var(--energia-yellow-glow) !important;
  transform: scale(1.05);
  box-shadow: 0 0 25px rgba(255, 234, 0, 0.6);
}