/* ============================================================
   JV — barra inferior neon por item (Início / Sacar / Convidar /
   Depósito / Perfil). Carregado no fim do <body> para vencer os
   overrides dark que ficam em <style> no corpo das páginas.
   ============================================================ */

/* ---------- trilho: fundo chumbo + hairline arco-íris ---------- */
.hub-nav{
  position:relative !important;
  background:linear-gradient(180deg,#08110d 0%,#040a07 100%) !important;
  border-top:1px solid rgba(255,255,255,.07) !important;
  box-shadow:0 -20px 38px -30px #000, inset 0 1px 0 rgba(255,255,255,.03) !important;
  overflow:visible !important;
}
.hub-nav::before{
  content:"";position:absolute;left:0;right:0;top:-1px;height:1.5px;
  background:linear-gradient(90deg,
    #2AE9FF 0%, #4C86FF 25%, #A855F7 50%, #FFC22E 75%, #FF5CA8 100%);
  opacity:.65;filter:blur(.2px);pointer-events:none;
}
.hub-nav::after{
  content:"";position:absolute;left:0;right:0;top:-16px;height:16px;
  background:radial-gradient(60% 100% at 50% 100%,rgba(168,85,247,.10),transparent 70%);
  pointer-events:none;
}

/* ---------- tokens por item ---------- */
.hub-nav .hub-nav-item[data-hub-acao="jogar"]{
  --nv:#2AE9FF; --nv-lo:rgba(42,233,255,.45); --nv-hi:rgba(42,233,255,.85);
  --nv-h:40deg; --nv-s:1.5;  --nv-b:1.05; --nv-anim:jvn-bob 2.9s ease-in-out infinite;
}
.hub-nav .hub-nav-item[data-hub-acao="sacar"]{
  --nv:#4C86FF; --nv-lo:rgba(76,134,255,.45); --nv-hi:rgba(76,134,255,.85);
  --nv-h:110deg; --nv-s:2.6; --nv-b:.94;  --nv-anim:jvn-swing 3.4s ease-in-out infinite;
}
.hub-nav .hub-nav-item[data-hub-acao="depositar"]{
  --nv:#FFC22E; --nv-lo:rgba(255,194,46,.42); --nv-hi:rgba(255,194,46,.85);
  --nv-h:-88deg; --nv-s:2.0; --nv-b:1;    --nv-anim:jvn-pop 3.6s cubic-bezier(.34,1.56,.64,1) infinite;
}
.hub-nav .hub-nav-item[data-hub-acao="perfil"]{
  --nv:#FF5CA8; --nv-lo:rgba(255,92,168,.42); --nv-hi:rgba(255,92,168,.85);
  --nv-h:178deg; --nv-s:1.75; --nv-b:1.05; --nv-anim:jvn-breathe 3.1s ease-in-out infinite;
}
.hub-center-wrap{
  --nv:#C24BFF; --nv-lo:rgba(194,75,255,.5); --nv-hi:rgba(255,79,208,.85);
  --nv-h:150deg; --nv-s:1.45; --nv-b:1.05;
}

/* ---------- ícone: cor + halo pulsante ---------- */
.hub-nav .hub-nav-ico,
.hub-center-wrap .hub-nav-ico{
  opacity:1 !important;
  filter:drop-shadow(0 0 5px var(--nv-lo)) !important;
  animation:var(--nv-anim, jvn-bob 2.9s ease-in-out infinite),
            jvn-glow 3.2s ease-in-out infinite !important;
  will-change:transform,filter;
  backface-visibility:hidden;
}
.hub-nav .hub-nav-ico svg,
.hub-center-wrap .hub-center-btn svg{
  filter:hue-rotate(var(--nv-h,0deg)) saturate(var(--nv-s,1)) brightness(var(--nv-b,1)) !important;
  transition:transform .22s ease;
}

/* ---------- rótulos ---------- */
.hub-nav .hub-nav-item .hub-nav-label{
  color:var(--nv) !important;
  font-weight:800 !important;
  letter-spacing:.015em !important;
  text-shadow:0 0 7px var(--nv-lo),0 1px 0 rgba(0,0,0,.65) !important;
  transition:color .2s ease,text-shadow .2s ease;
}
.hub-nav .hub-nav-label.hub-jogar-label{
  color:#E96BFF !important;
  text-shadow:0 0 8px rgba(194,75,255,.6),0 1px 0 rgba(0,0,0,.7) !important;
  margin-top:2px !important;
}

/* ---------- interação ---------- */
.hub-nav .hub-nav-item:hover .hub-nav-label{color:#fff !important;text-shadow:0 0 10px var(--nv-hi) !important}
.hub-nav .hub-nav-item:hover .hub-nav-ico svg{transform:translateY(-1px) scale(1.06)}
.hub-nav .hub-nav-item:active .hub-nav-ico{animation-play-state:paused !important}
.hub-nav .hub-nav-item:active .hub-nav-ico svg{transform:scale(.88)}

/* ativo ganha saturação total + pílula de luz atrás */
.hub-nav .hub-nav-item[aria-current="page"] .hub-nav-label,
.hub-nav .hub-nav-item.is-active .hub-nav-label{
  color:#fff !important;
  text-shadow:0 0 12px var(--nv-hi),0 0 3px var(--nv-hi) !important;
}
.hub-nav .hub-nav-item[aria-current="page"] .hub-nav-ico,
.hub-nav .hub-nav-item.is-active .hub-nav-ico{
  filter:drop-shadow(0 0 11px var(--nv-hi)) !important;
}
.hub-nav .hub-nav-item[aria-current="page"]::before,
.hub-nav .hub-nav-item.is-active::before{
  content:"";position:absolute;left:50%;bottom:2px;width:16px;height:2px;border-radius:2px;
  transform:translateX(-50%);
  background:var(--nv);box-shadow:0 0 8px var(--nv-hi);opacity:.9;
}
.hub-nav .hub-nav-item{position:relative}

/* ---------- botão central (convidar) ---------- */
.hub-center-wrap .hub-center-btn{
  background:linear-gradient(140deg,#8B5CFF 0%,#C24BFF 52%,#FF4FD0 100%) !important;
  border:2px solid rgba(255,255,255,.14) !important;
  box-shadow:
    0 0 0 4px rgba(168,85,247,.10),
    0 10px 26px -8px rgba(194,75,255,.85),
    0 0 22px -4px rgba(255,79,208,.55) !important;
  animation:jvn-center 2.6s ease-in-out infinite !important;
  position:relative;
}
.hub-center-wrap .hub-center-btn::after{
  content:"";position:absolute;inset:-7px;border-radius:999px;
  border:1px solid rgba(194,75,255,.45);
  animation:jvn-ring 2.6s ease-out infinite;
  pointer-events:none;
}
.hub-center-wrap:active .hub-center-btn{transform:scale(.93)}

/* ---------- keyframes ---------- */
@keyframes jvn-bob{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-3px)}
}
@keyframes jvn-swing{
  0%,100%{transform:rotate(-7deg)}
  50%{transform:rotate(7deg)}
}
@keyframes jvn-pop{
  0%,68%,100%{transform:translateY(0) scale(1)}
  78%{transform:translateY(-4px) scale(1.06)}
  88%{transform:translateY(1px) scale(.97)}
}
@keyframes jvn-breathe{
  0%,100%{transform:scale(1)}
  50%{transform:scale(1.08)}
}
@keyframes jvn-glow{
  0%,100%{filter:drop-shadow(0 0 4px var(--nv-lo))}
  50%{filter:drop-shadow(0 0 11px var(--nv-hi))}
}
@keyframes jvn-center{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-3px)}
}
@keyframes jvn-ring{
  0%{transform:scale(.86);opacity:.9}
  70%{transform:scale(1.16);opacity:0}
  100%{transform:scale(1.16);opacity:0}
}

/* ---------- respeito a quem pediu menos movimento ---------- */
@media (prefers-reduced-motion: reduce){
  .hub-nav .hub-nav-ico,
  .hub-center-wrap .hub-center-btn,
  .hub-center-wrap .hub-center-btn::after{
    animation:none !important;
  }
  .hub-nav .hub-nav-ico{filter:drop-shadow(0 0 6px var(--nv-lo)) !important}
}

/* ---------- ajuste fino: azul mais definido no "Sacar" ---------- */
.hub-nav .hub-nav-item[data-hub-acao="sacar"] .hub-nav-ico svg{
  filter:hue-rotate(96deg) saturate(2.9) brightness(1.02) contrast(1.2) !important;
}