/* Navbar global baseada na barra superior da página index.html.
   Mantém ordem/posição da ULTIMAVERSAO V33 e deixa botões comuns sem contorno quando inativos. */
:root { --topbar-h: 65px; }

.topbar {
  position: relative !important;
  z-index: 80 !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  background: linear-gradient(180deg, rgba(14, 81, 42, .94) 0%, rgba(9, 47, 25, .92) 100%) !important;
  border-bottom: 1px solid rgba(245,223,173,.18) !important;
  box-shadow: 0 10px 24px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,235,190,.08) !important;
  backdrop-filter: blur(8px) !important;
}

.topbar-inner {
  position: relative !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  min-height: 50px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 18px !important;
  padding: 0 28px !important;
  border-radius: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.topbar-brand {
  position: absolute !important;
  left: 80px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  height: 50px !important;
  width: auto !important;
  max-width: 260px !important;
  margin: 0 !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  text-decoration: none !important;
  line-height: 0 !important;
  white-space: nowrap !important;
  pointer-events: auto !important;
  overflow: visible !important;
}

.topbar-logo {
  display: block !important;
  width: auto !important;
  height: auto !important;
  max-width: 260px !important;
  max-height: 50px !important;
  object-fit: contain !important;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.34)) !important;
}

.topbar-menu {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
  justify-content: flex-end !important;
  margin-left: auto !important;
  margin-right: 0 !important;
  width: auto !important;
}

.topbar-link {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 40px !important;
  padding: 0 16px !important;
  border-radius: 999px !important;
  border: 1px solid transparent !important;
  background: transparent !important;
  color: #f5dfad !important;
  text-decoration: none !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  letter-spacing: .03em !important;
  line-height: 1 !important;
  box-shadow: none !important;
  outline: 0 !important;
  font-family: Arial, Helvetica, sans-serif !important;
}

.topbar-link[data-nav-profile] {
  border-color: rgba(245,223,173,.30) !important;
  background: linear-gradient(180deg, rgba(255,255,255,.05) 0%, rgba(255,255,255,.02) 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04) !important;
}

.topbar-link:hover,
.topbar-link.active {
  border-color: rgba(245,223,173,.30) !important;
  background: linear-gradient(180deg, rgba(245,223,173,.18) 0%, rgba(245,223,173,.07) 100%) !important;
  color: #fff5d0 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04) !important;
}

.topbar-link:not([data-nav-profile]):not(.active):not(:hover) {
  border-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: 0 !important;
}

/* Ícones outline minimalistas animados da Navbar — mantém ordem, posição e lógica dos botões. */
.topbar-link {
  --nav-icon: none;
}

.topbar-link::before {
  content: '';
  display: inline-block !important;
  width: 18px !important;
  min-width: 18px !important;
  height: 18px !important;
  margin-right: 7px !important;
  background: currentColor !important;
  opacity: .86 !important;
  transform-origin: center center !important;
  -webkit-mask: var(--nav-icon) no-repeat center / contain !important;
  mask: var(--nav-icon) no-repeat center / contain !important;
  filter: drop-shadow(0 0 4px rgba(245,223,173,.18)) !important;
  animation-duration: 2.35s !important;
  animation-timing-function: ease-in-out !important;
  animation-iteration-count: infinite !important;
}

.topbar-link[data-nav-item="battle"] { --nav-icon: url("data:image/svg+xml,%3Csvg%20fill=%22none%22%20stroke=%22black%22%20stroke-width=%221.9%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%3E%3Cpath%20d=%22M14.5%2017.5%203%206V3h3l11.5%2011.5%22/%3E%3Cpath%20d=%22M13%2019l6-6%22/%3E%3Cpath%20d=%22M16%2016l4%204%22/%3E%3Cpath%20d=%22M19%2021l2-2%22/%3E%3Cpath%20d=%22M14.5%206.5%2018%203h3v3l-3.5%203.5%22/%3E%3Cpath%20d=%22M5%2014l5%205%22/%3E%3Cpath%20d=%22M7%2017l-4%204%22/%3E%3Cpath%20d=%22m3%2019%202%202%22/%3E%3C/svg%3E"); }
.topbar-link[data-nav-item="battle"]::before { animation-name: navIconDuel; }
.topbar-link[data-nav-item="giveaways"] { --nav-icon: url("data:image/svg+xml,%3Csvg fill=%22none%22 stroke=%22black%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath d=%22M4.5 10h15v9.5h-15z%22/%3E%3Cpath d=%22M3.5 7h17v3h-17z%22/%3E%3Cpath d=%22M12 7v12.5%22/%3E%3Cpath d=%22M8.2 7c-1.8 0-2.9-1.1-2.5-2.3.5-1.4 2.7-1.1 6.3 2.3%22/%3E%3Cpath d=%22M15.8 7c1.8 0 2.9-1.1 2.5-2.3-.5-1.4-2.7-1.1-6.3 2.3%22/%3E%3C/svg%3E"); }
.topbar-link[data-nav-item="giveaways"]::before { animation-name: navIconFloat; }
.topbar-link[data-nav-item="ranking"] { --nav-icon: url("data:image/svg+xml,%3Csvg fill=%22none%22 stroke=%22black%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath d=%22M8 4h8v3.2c0 3.3-1.7 5.4-4 6.1-2.3-.7-4-2.8-4-6.1z%22/%3E%3Cpath d=%22M8 6H5.2c0 2.6 1.2 4.3 3.1 5%22/%3E%3Cpath d=%22M16 6h2.8c0 2.6-1.2 4.3-3.1 5%22/%3E%3Cpath d=%22M12 13.3V17%22/%3E%3Cpath d=%22M8.5 20h7%22/%3E%3Cpath d=%22M10 17h4v3%22/%3E%3C/svg%3E"); }
.topbar-link[data-nav-item="ranking"]::before { animation-name: navIconLift; }
.topbar-link[data-nav-item="history"] { --nav-icon: url("data:image/svg+xml,%3Csvg fill=%22none%22 stroke=%22black%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath d=%22M4 12a8 8 0 1 0 2.35-5.65%22/%3E%3Cpath d=%22M4 5.5v4h4%22/%3E%3Cpath d=%22M12 8v4.5l3 1.8%22/%3E%3C/svg%3E"); }
.topbar-link[data-nav-item="history"]::before { animation-name: navIconTick; }

.topbar-link[data-nav-item="livepix"] { --nav-icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 16 16%22%3E%3Cpath fill=%22black%22 d=%22M11.917 11.71a2.046 2.046 0 0 1-1.454-.602l-2.1-2.1a.4.4 0 0 0-.551 0l-2.108 2.108a2.044 2.044 0 0 1-1.454.602h-.414l2.66 2.66c.83.83 2.177.83 3.007 0l2.667-2.668h-.253zM4.25 4.282c.55 0 1.066.214 1.454.602l2.108 2.108a.39.39 0 0 0 .552 0l2.1-2.1a2.044 2.044 0 0 1 1.453-.602h.253L9.503 1.623a2.127 2.127 0 0 0-3.007 0l-2.66 2.66h.414z%22/%3E%3Cpath fill=%22black%22 d=%22m14.377 6.496-1.612-1.612a.307.307 0 0 1-.114.023h-.733c-.379 0-.75.154-1.017.422l-2.1 2.1a1.005 1.005 0 0 1-1.425 0L5.268 5.32a1.448 1.448 0 0 0-1.018-.422h-.9a.306.306 0 0 1-.109-.021L1.623 6.496c-.83.83-.83 2.177 0 3.008l1.618 1.618a.305.305 0 0 1 .108-.022h.901c.38 0 .75-.153 1.018-.421L7.375 8.57a1.034 1.034 0 0 1 1.426 0l2.1 2.1c.267.268.638.421 1.017.421h.733c.04 0 .079.01.114.024l1.612-1.612c.83-.83.83-2.178 0-3.008z%22/%3E%3C/svg%3E"); }
.topbar-link[data-nav-item="livepix"]::before { animation-name: navIconPix; }
.topbar-link[data-nav-item="profile"] { --nav-icon: url("data:image/svg+xml,%3Csvg fill=%22none%22 stroke=%22black%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath d=%22M12 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8z%22/%3E%3Cpath d=%22M4.5 20c.7-4.1 3.4-6.3 7.5-6.3s6.8 2.2 7.5 6.3%22/%3E%3C/svg%3E"); }
.topbar-link[data-nav-item="profile"]::before { animation-name: navIconProfile; }

.topbar-link:hover::before,
.topbar-link.active::before,
.topbar-link[data-nav-profile]::before {
  opacity: 1 !important;
  filter: drop-shadow(0 0 7px rgba(245,223,173,.34)) !important;
  animation-duration: 1.15s !important;
}

@keyframes navIconDuel {
  0%, 100% { transform: rotate(-5deg) translateY(0) scale(1); }
  50% { transform: rotate(5deg) translateY(-1px) scale(1.07); }
}
@keyframes navIconFloat {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-2px) scale(1.06); }
}
@keyframes navIconLift {
  0%, 100% { transform: translateY(0) scale(1); }
  45% { transform: translateY(-2px) scale(1.08); }
}
@keyframes navIconTick {
  0%, 100% { transform: rotate(0deg) scale(1); }
  50% { transform: rotate(-10deg) scale(1.04); }
}
@keyframes navIconPix {
  0%, 100% { transform: rotate(0deg) scale(1); }
  50% { transform: rotate(45deg) scale(1.06); }
}
@keyframes navIconPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.07); }
}
@keyframes navIconProfile {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-1px) scale(1.06); }
}
@media (prefers-reduced-motion: reduce) {
  .topbar-link::before { animation: none !important; }
}

.admin-only { display: none !important; }
html.is-admin .admin-only,
body.is-admin .admin-only { display: inline-flex !important; }

@media (max-width: 900px) {
  .topbar-inner {
    min-height: 88px !important;
    flex-direction: column !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 10px 14px !important;
  }
  .topbar-inner {
    padding-left: 170px !important;
  }
  .topbar-brand {
    position: absolute !important;
    left: 80px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    height: 88px !important;
    max-width: 150px !important;
    margin: 0 !important;
  }
  .topbar-logo {
    max-width: 150px !important;
    max-height: 46px !important;
  }
  .topbar-menu {
    justify-content: center !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    gap: 7px !important;
  }
  .topbar-link {
    min-height: 34px !important;
    padding: 0 11px !important;
    font-size: 12px !important;
  }
}


/* V94: modo celular da navbar inspirado no menu expansível da referência CodePen, mantendo os ícones atuais. */
@media (max-width: 900px) {
  :root { --topbar-h: 118px; }

  .topbar {
    padding: 0 !important;
    overflow: visible !important;
  }

  .topbar-inner {
    min-height: var(--topbar-h) !important;
    height: auto !important;
    padding: 10px 10px 12px !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
  }

  .topbar-brand {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    height: 48px !important;
    max-width: min(76vw, 230px) !important;
    width: auto !important;
    margin: 0 auto !important;
    justify-content: center !important;
  }

  .topbar-logo {
    max-width: min(76vw, 230px) !important;
    max-height: 48px !important;
  }

  .topbar-menu {
    width: min(94vw, 390px) !important;
    min-height: 52px !important;
    margin: 0 auto !important;
    padding: 5px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-wrap: nowrap !important;
    gap: 4px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    border-radius: 16px !important;
    border: 1px solid rgba(245, 223, 173, .18) !important;
    background:
      linear-gradient(135deg, rgba(9, 90, 48, .94), rgba(6, 63, 32, .94) 52%, rgba(1, 18, 9, .94)) !important;
    box-shadow:
      0 8px 24px rgba(0, 0, 0, .34),
      inset 0 1px 0 rgba(255, 255, 255, .07) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    scrollbar-width: none !important;
  }

  .topbar-menu::-webkit-scrollbar {
    display: none !important;
  }

  .topbar-link {
    flex: 0 0 44px !important;
    width: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
    min-height: 42px !important;
    height: 42px !important;
    padding: 0 12px !important;
    border-radius: 12px !important;
    border: 1px solid transparent !important;
    background: transparent !important;
    color: #f5dfad !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    justify-content: flex-start !important;
    font-size: 0 !important;
    letter-spacing: .01em !important;
    transition:
      flex-basis .26s ease,
      width .26s ease,
      max-width .26s ease,
      background-color .22s ease,
      border-color .22s ease,
      color .22s ease,
      transform .22s ease !important;
  }

  .topbar-link::before {
    width: 20px !important;
    min-width: 20px !important;
    height: 20px !important;
    margin-right: 0 !important;
    opacity: .82 !important;
    transition: margin-right .24s ease, opacity .2s ease, transform .2s ease !important;
  }

  .topbar-link[data-nav-profile]:not(.active):not(:hover):not(:focus-visible) {
    border-color: transparent !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .topbar-link:hover,
  .topbar-link:focus-visible,
  .topbar-link.active {
    flex-basis: 112px !important;
    width: 112px !important;
    min-width: 112px !important;
    max-width: 124px !important;
    padding: 0 12px !important;
    font-size: 12px !important;
    font-weight: 950 !important;
    color: #fff7d7 !important;
    background: rgba(255, 255, 255, .16) !important;
    border-color: rgba(245, 223, 173, .25) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, .10),
      0 8px 18px rgba(0, 0, 0, .22) !important;
  }

  /* V38: reduz somente o texto do botão Recompensas no menu mobile. */
  .topbar-link[data-nav-item="giveaways"]:hover,
  .topbar-link[data-nav-item="giveaways"]:focus-visible,
  .topbar-link[data-nav-item="giveaways"].active {
    font-size: 10px !important;
  }

  .topbar-link:hover::before,
  .topbar-link:focus-visible::before,
  .topbar-link.active::before {
    margin-right: 8px !important;
    opacity: 1 !important;
  }

  .topbar-link:active {
    transform: scale(.97) !important;
  }
}

@media (max-width: 380px) {
  .topbar-menu {
    justify-content: flex-start !important;
  }

  .topbar-link:hover,
  .topbar-link:focus-visible,
  .topbar-link.active {
    flex-basis: 104px !important;
    width: 104px !important;
    min-width: 104px !important;
  }
}

/* Kubitza green theme v2: navbar totalmente verde no desktop e no mobile. */
.topbar {
  background: linear-gradient(180deg, rgba(8, 78, 42, .96) 0%, rgba(3, 35, 18, .94) 100%) !important;
  border-bottom-color: rgba(120, 255, 165, .16) !important;
}
.topbar-link:hover,
.topbar-link.active,
.topbar-link[data-nav-profile] {
  background: linear-gradient(180deg, rgba(120, 255, 165, .16) 0%, rgba(30, 150, 80, .08) 100%) !important;
  border-color: rgba(120, 255, 165, .28) !important;
}
@media (max-width: 900px) {
  .topbar {
    background: linear-gradient(180deg, rgba(8, 78, 42, .98) 0%, rgba(2, 25, 13, .96) 100%) !important;
  }
}