/* ╔══════════════════════════════════════════════════════════════════════╗
   ║  THE MASK CUP — NAVEGAÇÃO v4                                         ║
   ║                                                                      ║
   ║  Estrutura agrupada: 5 itens de topo em vez de 9 soltos.             ║
   ║  Desktop e mobile são renderizados da MESMA fonte no base.html,      ║
   ║  então nunca mais divergem.                                          ║
   ╚══════════════════════════════════════════════════════════════════════╝ */

/* ═══ GRUPO COM SUBMENU ═══ */
.nav-group { position: relative; }

.nav-group-btn {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: 'Rajdhani', sans-serif;
  font-size: 11px; font-weight: 700;
  letter-spacing: 1.2px; text-transform: uppercase;
  color: var(--text-dim); background: none; border: 0;
  padding: 6px 13px; border-radius: 7px; cursor: pointer;
  white-space: nowrap;
  transition: color .2s, background .2s;
}
.nav-group-btn:hover,
.nav-group:focus-within .nav-group-btn {
  color: var(--text); background: rgba(255,255,255,.04);
}
.nav-group-btn .chev {
  transition: transform .25s var(--ease-out-expo, ease);
  opacity: .6;
}
.nav-group:hover .nav-group-btn .chev,
.nav-group:focus-within .nav-group-btn .chev { transform: rotate(180deg); }

/* Item de topo marcado quando um filho é a página atual */
.nav-group.has-active .nav-group-btn {
  color: var(--primary); background: var(--primary-dim);
}

/* ═══ PAINEL DO SUBMENU ═══ */
.nav-submenu {
  position: absolute; top: calc(100% - 1px); left: 50%;
  transform: translateX(-50%) translateY(8px) scale(.97);
  transform-origin: top center;
  min-width: 232px; padding: 7px;
  /* Chanfrado, com camadas de luz — mesma linguagem dos cards */
  clip-path: polygon(13px 0, 100% 0, 100% calc(100% - 13px), calc(100% - 13px) 100%, 0 100%, 0 13px);
  border-radius: 0;
  border: 0;
  background:
    radial-gradient(90% 60% at 0% 0%, rgba(79,163,157,.14), transparent 58%),
    radial-gradient(80% 60% at 100% 100%, rgba(217,169,76,.08), transparent 60%),
    linear-gradient(160deg, #15171B, #0A0B0D);
  box-shadow: 0 26px 74px rgba(0,0,0,.75);
  opacity: 0; visibility: hidden;
  transition: opacity .18s, transform .18s, visibility .18s;
  z-index: 300;
}
/* Contorno luminoso (clip-path não aceita border) */
.nav-submenu::before {
  content: ''; position: absolute; inset: 0; z-index: -1; clip-path: inherit;
  background: linear-gradient(150deg, rgba(217,169,76,.45), rgba(194,200,208,.12) 45%, rgba(79,163,157,.45));
  opacity: .55;
}
/* Abre no hover E no foco por teclado (antes era só hover) */
.nav-group:hover .nav-submenu,
.nav-group:focus-within .nav-submenu {
  opacity: 1; visibility: visible;
  transform: translateX(-50%) translateY(0) scale(1);
}
/* Ponte invisível: evita que o menu feche ao mover o mouse até ele */
.nav-group::after {
  content: ''; position: absolute;
  top: 100%; left: 0; right: 0; height: 12px;
}

.nav-sub-item {
  position: relative;
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; border-radius: 0;
  clip-path: polygon(7px 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%, 0 7px);
  text-decoration: none; color: var(--text-dim);
  transition: background .2s, color .2s, transform .25s var(--ease-out-expo, ease);
}
.nav-sub-item:hover {
  background: linear-gradient(110deg, rgba(79,163,157,.16), transparent 70%);
  color: var(--silver-hi); transform: translateX(3px);
}
.nav-sub-item.active {
  background: linear-gradient(110deg, rgba(79,163,157,.22), transparent 72%);
  color: var(--teal-hi);
}
/* Traço lateral no item ativo */
.nav-sub-item.active::before {
  content: ''; position: absolute; left: 0; top: 6px; bottom: 6px; width: 2px;
  background: linear-gradient(180deg, var(--gold), var(--teal));
}

/* Ícone em moldura hexagonal — motivo geométrico da marca */
.nav-sub-ico {
  width: 32px; height: 32px; flex: 0 0 auto;
  display: grid; place-items: center;
  clip-path: polygon(50% 0%, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%);
  background: linear-gradient(150deg, rgba(194,200,208,.09), rgba(194,200,208,.02));
  color: var(--accent-hi);
  transition: background .25s, color .25s;
}
.nav-sub-item:hover .nav-sub-ico {
  background: linear-gradient(150deg, rgba(79,163,157,.3), rgba(79,163,157,.06));
  color: var(--teal-hi);
}
.nav-sub-item.active .nav-sub-ico {
  background: linear-gradient(150deg, var(--teal-deep), rgba(44,102,99,.2));
  color: var(--teal-hi);
}

.nav-sub-label {
  font-family: 'Rajdhani', sans-serif;
  font-size: 12.5px; font-weight: 700; letter-spacing: .6px;
  line-height: 1.2;
}
.nav-sub-desc {
  font-family: 'DM Sans', sans-serif;
  font-size: 10.5px; color: var(--text-mute);
  margin-top: 1px; line-height: 1.3;
}

/* ═══ ITEM QUE EXIGE LOGIN ═══
   Fica visível (o visitante descobre que o recurso existe), mas avisa
   antes do clique em vez de jogá-lo direto na tela de login. */
.nav-sub-item.locked { opacity: .72; }
.nav-sub-item.locked:hover { opacity: 1; }
.nav-sub-desc.lock {
  display: inline-flex; align-items: center; gap: 4px;
  color: var(--gold); opacity: .85;
}
.mob-lock {
  display: inline-flex; vertical-align: middle;
  margin-left: 6px; color: var(--gold); opacity: .8;
}

/* ═══ MOBILE: subgrupos ═══ */
.mob-group-lbl {
  display: flex; align-items: center; gap: 8px;
  padding: 14px 22px 6px;
  font-family: 'Rajdhani', sans-serif;
  font-size: 10px; font-weight: 700;
  letter-spacing: 2px; text-transform: uppercase;
  color: var(--text-mute);
}
.mob-group-lbl::after {
  content: ''; flex: 1; height: 1px;
  background: linear-gradient(90deg, var(--border), transparent);
}

/* Item ativo no menu mobile */
.mob-nav-link.active {
  background: var(--primary-dim);
}
.mob-nav-link.active > span { color: var(--primary); }
.mob-nav-link.active .mob-nav-ico {
  background: var(--primary-dim) !important;
  box-shadow: 0 0 0 1px rgba(79,163,157,.25);
}

@media (prefers-reduced-motion: reduce) {
  .nav-submenu, .nav-group-btn .chev { transition: none; }
}

/* ╔══════════════════════════════════════════════════════════════════════╗
   ║  HEADER v5 — BARRA DE ESPORTS                                        ║
   ║                                                                      ║
   ║  Feedback: o estilo "pílula arredondada" parecia site genérico.      ║
   ║  Agora é uma barra de transmissão/HUD:                               ║
   ║    • fundo de vidro permanente (antes era transparente = sumia)      ║
   ║    • marca com presença: logo 50px + nome 31px + divisor angular     ║
   ║    • abas de altura total, com indicador que nasce do centro         ║
   ║    • placa trapezoidal atrás da navegação (geometria, não pílula)    ║
   ║    • linha de marca ouro → prata → teal na base                      ║
   ║                                                                      ║
   ║  Fica no FIM do arquivo de propósito: sobrescreve o CSS legado do    ║
   ║  base.html sem precisar editar as 700 linhas antigas.                ║
   ╚══════════════════════════════════════════════════════════════════════╝ */

/* ── Barra ─────────────────────────────────────────────────────── */
#site-header {
  background:
    radial-gradient(40% 180% at 0% 0%, rgba(217,169,76,.07), transparent 60%),
    radial-gradient(40% 180% at 100% 0%, rgba(79,163,157,.08), transparent 60%),
    linear-gradient(180deg, rgba(8,8,10,.94), rgba(6,6,7,.80));
  backdrop-filter: blur(20px) saturate(1.5);
  -webkit-backdrop-filter: blur(20px) saturate(1.5);
  border-bottom: 0;
}
/* Linha da marca na base da barra */
#site-header::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: linear-gradient(90deg,
      transparent 2%, rgba(217,169,76,.55) 22%, rgba(237,240,244,.4) 50%,
      rgba(79,163,157,.55) 78%, transparent 98%);
  pointer-events: none;
}
#site-header.scrolled {
  background:
    radial-gradient(40% 180% at 0% 0%, rgba(217,169,76,.06), transparent 60%),
    radial-gradient(40% 180% at 100% 0%, rgba(79,163,157,.07), transparent 60%),
    linear-gradient(180deg, rgba(6,6,7,.97), rgba(6,6,7,.92));
  box-shadow: 0 12px 40px rgba(0,0,0,.55);
  border-bottom: 0;
}

/* ── Marca ─────────────────────────────────────────────────────── */
.hdr-logo {
  position: relative; align-self: stretch;
  padding-right: 30px; gap: 14px;
}
/* Divisor angular entre a marca e a navegação */
.hdr-logo::after {
  content: ""; position: absolute; right: 0; top: 22%; bottom: 22%;
  width: 1px; transform: skewX(-18deg);
  background: linear-gradient(180deg, transparent, rgba(194,200,208,.28), transparent);
}
.hdr-logo-img {
  height: 50px; width: 50px;
  filter: drop-shadow(0 0 14px rgba(217,169,76,.22)) drop-shadow(0 0 22px rgba(79,163,157,.14));
}
.hdr-logo:hover .hdr-logo-img {
  filter: drop-shadow(0 0 18px rgba(217,169,76,.4)) drop-shadow(0 0 26px rgba(79,163,157,.26));
  transform: scale(1.06) rotate(-3deg);
}
.hdr-logo-text {
  font-size: 31px; letter-spacing: 2px;
  text-shadow: 0 2px 18px rgba(0,0,0,.6);
}
.hdr-logo-mask { color: var(--silver-hi); }
/* "CUP" com o degradê da marca, como no logo */
.hdr-logo-cup {
  background: linear-gradient(95deg, var(--gold-hi), var(--teal-hi));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hdr-logo-sub {
  font-size: 8px; letter-spacing: 3.4px;
  color: rgba(194,200,208,.42);
}

/* ── Placa trapezoidal da navegação ────────────────────────────── */
.hdr-nav {
  position: relative; align-self: stretch;
  gap: 0 !important; padding: 0 26px !important;
}
.hdr-nav::before {
  content: ""; position: absolute; inset: 14px 0; z-index: -1;
  clip-path: polygon(16px 0, 100% 0, calc(100% - 16px) 100%, 0 100%);
  background: linear-gradient(180deg, rgba(22,24,28,.75), rgba(12,13,16,.55));
  box-shadow: inset 0 1px 0 rgba(194,200,208,.06);
}

/* ── Abas: altura total, sem pílula ────────────────────────────── */
.hdr-nav > .nav-link,
.hdr-nav > .nav-group,
.hdr-nav .nav-group-btn {
  height: 100%;
}
.hdr-nav > .nav-group { display: flex; align-items: stretch; }
.hdr-nav .nav-link,
.hdr-nav .nav-group-btn {
  position: relative;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 0 17px !important;
  border-radius: 0 !important; clip-path: none !important;
  background: none !important;
  font-family: "Rajdhani", sans-serif;
  font-size: 13px !important; font-weight: 700;
  letter-spacing: 1.5px; text-transform: uppercase;
  color: rgba(194,200,208,.62);
  transition: color .25s ease;
}
/* Indicador: nasce do centro no hover, fica cheio na página atual */
.hdr-nav .nav-link::after,
.hdr-nav .nav-group-btn::after {
  content: ""; position: absolute; left: 12px; right: 12px; bottom: 14px;
  height: 2px; transform: scaleX(0); transform-origin: center;
  clip-path: polygon(3px 0, 100% 0, calc(100% - 3px) 100%, 0 100%);
  background: linear-gradient(90deg, var(--teal-deep), var(--teal-hi), var(--teal-deep));
  box-shadow: 0 0 10px var(--teal-glow);
  transition: transform .35s var(--ease-out-expo, cubic-bezier(.16,1,.3,1));
  opacity: 1;
}
/* Brilho vertical sutil subindo do indicador */
.hdr-nav .nav-link::before,
.hdr-nav .nav-group-btn::before {
  content: ""; position: absolute; left: 8px; right: 8px; top: 14px; bottom: 14px;
  background: radial-gradient(70% 90% at 50% 100%, rgba(79,163,157,.16), transparent 70%);
  opacity: 0; transition: opacity .3s ease; pointer-events: none;
}
.hdr-nav .nav-link:hover,
.hdr-nav .nav-group-btn:hover,
.hdr-nav .nav-group:focus-within .nav-group-btn { color: var(--silver-hi); }
.hdr-nav .nav-link:hover::after,
.hdr-nav .nav-group-btn:hover::after,
.hdr-nav .nav-group:focus-within .nav-group-btn::after { transform: scaleX(.55); }
.hdr-nav .nav-link:hover::before,
.hdr-nav .nav-group-btn:hover::before { opacity: 1; }

/* Página atual */
.hdr-nav .nav-link.active,
.hdr-nav .nav-group.has-active .nav-group-btn { color: var(--teal-hi) !important; }
.hdr-nav .nav-link.active::after,
.hdr-nav .nav-group.has-active .nav-group-btn::after { transform: scaleX(1); }
.hdr-nav .nav-link.active::before,
.hdr-nav .nav-group.has-active .nav-group-btn::before { opacity: 1; }

/* MaskPro em ouro */
.hdr-nav .nav-link.maskpro-link { color: rgba(217,169,76,.78); }
.hdr-nav .nav-link.maskpro-link:hover,
.hdr-nav .nav-link.maskpro-link.active { color: var(--gold-hi) !important; }
.hdr-nav .nav-link.maskpro-link::after {
  background: linear-gradient(90deg, var(--gold-deep), var(--gold-hi), var(--gold-deep));
  box-shadow: 0 0 10px var(--gold-glow);
}
.hdr-nav .nav-link.maskpro-link::before {
  background: radial-gradient(70% 90% at 50% 100%, rgba(217,169,76,.16), transparent 70%);
}

/* ── Lado direito ──────────────────────────────────────────────── */
.hdr-right { gap: 10px; }

.theme-toggle,
.hdr-icon-btn {
  width: 40px !important; height: 40px !important;
  border-radius: 0 !important; border: 0 !important;
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
  background: linear-gradient(150deg, rgba(28,30,35,.95), rgba(14,15,18,.95)) !important;
  color: var(--silver) !important;
  transition: color .25s, background .25s, transform .25s var(--ease-out-expo, ease) !important;
}
.theme-toggle:hover,
.hdr-icon-btn:hover {
  color: var(--teal-hi) !important;
  background: linear-gradient(150deg, rgba(44,102,99,.55), rgba(14,15,18,.95)) !important;
  transform: translateY(-1px);
}

/* Botão Steam: mantém as cores da Steam, ganha a forma angular do site */
.hdr-steam-btn {
  height: 42px; padding: 0 22px !important;
  border-radius: 0 !important; border: 0 !important;
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
  font-size: 12.5px !important; letter-spacing: 1.4px !important;
  box-shadow: inset 0 0 0 1px rgba(102,192,244,.28);
}
.hdr-steam-btn:hover { transform: translateY(-1px); filter: brightness(1.15); }

/* Chip do usuário logado */
.hdr-user-chip {
  border-radius: 0 !important;
  clip-path: polygon(9px 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%, 0 9px);
  background: linear-gradient(150deg, rgba(28,30,35,.95), rgba(14,15,18,.95)) !important;
  border: 0 !important;
}
.hdr-user-av {
  border-radius: 0 !important;
  clip-path: polygon(50% 0%, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%);
}

/* Menus do usuário/notificações com a mesma linguagem do submenu */
.hdr-dropdown-panel {
  border-radius: 0 !important;
  clip-path: polygon(13px 0, 100% 0, 100% calc(100% - 13px), calc(100% - 13px) 100%, 0 100%, 0 13px);
}

/* Em telas médias a marca encolhe um pouco para caber a navegação */
@media (max-width: 1280px) {
  .hdr-nav .nav-link, .hdr-nav .nav-group-btn { padding: 0 12px !important; font-size: 12px !important; }
  .hdr-logo-text { font-size: 27px; }
}
@media (max-width: 640px) {
  .hdr-logo { padding-right: 0; }
  .hdr-logo::after { display: none; }
  .hdr-logo-img { height: 42px; width: 42px; }
  .hdr-logo-text { font-size: 24px; }
  .hdr-logo-sub { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .hdr-nav .nav-link::after, .hdr-nav .nav-group-btn::after { transition: none; }
  .hdr-logo:hover .hdr-logo-img { transform: none; }
}

/* ── Celular: a marca volta a aparecer ─────────────────────────────
   Antes, abaixo de 480px, só o logo ficava visível e o nome sumia.
   Para caber: o botão de tema sai da barra (o menu mobile já tem o
   dele) e o botão da Steam encurta para "Entrar". */
@media (max-width: 640px) {
  .hdr-brand-copy { display: flex !important; }
  .hdr-logo-text { display: flex !important; }
  .hdr-right > .theme-toggle { display: none !important; }
  .hdr-steam-long { display: none; }
  .hdr-steam-btn { padding: 0 14px !important; height: 38px; }
  .hdr-logo { gap: 10px; }
}
@media (max-width: 380px) {
  .hdr-logo-img { height: 36px; width: 36px; }
  .hdr-logo-text { font-size: 21px; letter-spacing: 1.4px; }
}

/* Botão do menu mobile na mesma forma angular dos demais */
.hdr-hamburger {
  border-radius: 0 !important; border: 0 !important;
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
  background: linear-gradient(150deg, rgba(28,30,35,.95), rgba(14,15,18,.95)) !important;
}
.hdr-hamburger:hover { background: linear-gradient(150deg, rgba(44,102,99,.55), rgba(14,15,18,.95)) !important; }