/* ============================================================
   NOKEMON — shared navigation (single source of truth)
   Loaded LAST on every page so it is authoritative: identical
   menu size / position / style across all pages.
   ============================================================ */

/* smooth, instant cross-document page transitions (Chromium/Safari).
   Browsers without support fall back to a normal (still fast) navigation. */
@view-transition { navigation: auto; }

/* keep the nav anchored (no flicker/resize) while the page crossfades */
.nav-wrap { view-transition-name: site-nav; }

/* snappy crossfade so it never "lingers" */
::view-transition-old(root),
::view-transition-new(root) { animation-duration: .22s; animation-timing-function: cubic-bezier(.16,1,.3,1); }

/* the menu stays. The old snapshot is hidden so the two bars don't stack. */
::view-transition-group(site-nav) { animation: none; }
::view-transition-old(site-nav) { animation: none; opacity: 0; }
::view-transition-new(site-nav) { animation: none; }

/* quick fade-out fallback for browsers without cross-document View Transitions */
html.nav-leaving { opacity: 0; transition: opacity .13s ease; }

/* home arrived from another site page: show the hero now, skip the intro fade */
body.from-site .hero-logo,
body.from-site .tagline,
body.from-site .tagline-sub,
body.from-site .cta-row,
body.from-site .hud,
body.from-site .legal-hud,
body.from-site .ca-pill { transition: none; }

/* ---- floating nav bar ---- */
.nav-wrap{
  position:fixed; top:0; left:0; right:0; z-index:60;
  display:flex; justify-content:center;
  padding:16px clamp(14px,3vw,34px); pointer-events:none;
}
.nav{
  position:relative; pointer-events:auto; width:100%; max-width:1340px;
  display:flex; align-items:center; gap:16px; justify-content:space-between;
  padding:6px 12px 6px 16px; border-radius:16px;
  background:linear-gradient(180deg, rgba(30,17,60,0.62), rgba(22,12,46,0.40));
  -webkit-backdrop-filter:blur(18px) saturate(1.45); backdrop-filter:blur(18px) saturate(1.45);
  border:1px solid rgba(255,255,255,0.16);
  box-shadow:0 16px 50px rgba(14,5,40,0.5), inset 0 1px 0 rgba(255,255,255,0.22);
  opacity:1; transform:none;            /* always visible immediately (no slow load fade) */
}
/* animated gradient sheen on the border -> premium feel */
.nav::before{ content:""; position:absolute; inset:0; border-radius:16px; padding:1.4px; pointer-events:none;
  background:linear-gradient(115deg, rgba(124,235,255,0) 0%, rgba(124,235,255,.65) 18%, rgba(252,211,77,.6) 42%, rgba(176,114,255,.6) 66%, rgba(124,235,255,0) 100%);
  background-size:240% 100%;
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite:exclude;
  opacity:.75; animation:navSheenShared 8s linear infinite; }
@keyframes navSheenShared{ 0%{background-position:0 0;} 100%{background-position:240% 0;} }

.nav-brand{ display:flex; align-items:center; flex:0 0 auto; }
.nav .logo, .nav-brand .logo{
  display:block; height:44px; width:auto; aspect-ratio:1400/933;
  background:url('logo.webp') center/contain no-repeat;
  filter:drop-shadow(0 3px 10px rgba(0,0,0,.5));
  transition:transform .25s cubic-bezier(.16,1,.3,1);
}
.nav-brand:hover .logo{ transform:scale(1.04); }

/* the menu */
.nav-mid{
  display:flex; align-items:center; gap:2px; padding:5px; border-radius:14px;
  background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.10);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.08);
}
.nav-mid a{
  position:relative; font-family:'Space Grotesk', system-ui, sans-serif;
  font-weight:600; font-size:13.5px; letter-spacing:.01em;
  color:rgba(255,255,255,0.82); padding:9px 14px; border-radius:10px; white-space:nowrap;
  transition:color .2s, background .2s, box-shadow .2s, transform .2s;
}
.nav-mid a:hover{ color:#fffdf7; background:rgba(255,255,255,0.10); transform:translateY(-1px); }
.nav-mid a.active{ color:#160a2a; background:linear-gradient(120deg,#7af0ff,#fcd34d); box-shadow:0 6px 18px rgba(34,211,238,.42), inset 0 1px 0 rgba(255,255,255,.5); }
.nav-mid a .new{ display:none; }   /* keep every item identical across pages */

/* right cluster */
.nav-right{ display:flex; align-items:center; gap:12px; flex:0 0 auto; }
.nav-right .socials{ display:flex; align-items:center; gap:6px; padding:4px; border-radius:12px; background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.10); }
.nav-right .socials a{ width:34px; height:34px; display:grid; place-items:center; border-radius:9px; color:rgba(255,255,255,0.82); transition:color .2s, background .2s, transform .2s; }
.nav-right .socials a:hover{ color:#fffdf7; background:rgba(255,255,255,0.12); transform:translateY(-1px); }
.nav-right .socials svg{ width:17px; height:17px; fill:currentColor; }

/* connect-wallet button (scoped so it matches on every page) */
.nav-right .btn{ font-family:'Space Grotesk', system-ui, sans-serif; font-weight:600; font-size:14px; padding:10px 18px; border-radius:11px; display:inline-flex; align-items:center; gap:8px; white-space:nowrap; cursor:pointer; border:none; transition:transform .2s cubic-bezier(.16,1,.3,1), box-shadow .25s; }
.nav-right .btn-solid{ color:#27123f; font-weight:700; background:linear-gradient(120deg,#fcd34d,#7af0ff); box-shadow:0 8px 24px rgba(251,191,36,.36), inset 0 1px 0 rgba(255,255,255,.4); }
.nav-right .btn-solid:hover{ transform:translateY(-2px); box-shadow:0 12px 32px rgba(124,235,255,.46), inset 0 1px 0 rgba(255,255,255,.5); }

/* hamburger (narrow screens only) */
.nav-toggle{ display:none; width:44px; height:40px; border-radius:12px; background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.14); padding:0; cursor:pointer; }
.nav-toggle span{ display:block; width:19px; height:2px; margin:4px auto; background:#fffdf7; border-radius:2px; transition:transform .25s cubic-bezier(.16,1,.3,1), opacity .2s; }
.nav-toggle.open span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
.nav-toggle.open span:nth-child(2){ opacity:0; }
.nav-toggle.open span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

/* mobile slide-down drawer */
/* ══ A GAVETA DO CELULAR: VIDRO CLARO (opcao 1, escolhida por ele entre cinco) ══════════════
   🚨 ANTES ERA UM PAINEL QUASE PRETO, `rgba(30,17,60,.97)` sobre `rgba(19,10,38,.97)`: uma chapa
      opaca colada no topo do ceu, que foi o que ele chamou de horroroso. E o problema nao era so
      a cor -- os 6 links tinham EXATAMENTE o mesmo peso, entao a pagina em que voce esta nao se
      distinguia das outras.
   ⛔ E O VIDRO CLARO NAO E COR NOVA NO SITE: e literalmente o tratamento que ele ja aprovou no
      /roadmap (o "modelo 3", escolhido entre quatro), e o mesmo das 608 fichas de criatura. O
      ceu e a ilha continuam passando por tras em vez de serem tapados.
   ⚠️ A TINTA E ESCURA, e isso foi MEDIDO e nao escolhido no olho: sobre vidro branco a 42% o
      texto branco fica em ~1,2:1 -- eu ja apanhei disso hoje, nas bolinhas do roadmap. Tinta
      #1e1132 sobre este chao passa de 9:1. Saturar tom claro nao escurece; so escurecer escurece.
   ⚠️ E o item ATIVO ganha fundo ciano E uma barra na lateral: cor sozinha nao pode ser o unico
      sinal de estado, porque quem nao distingue cor fica sem nenhum. */
.nav-drawer{ position:fixed; top:82px; left:clamp(14px,3vw,34px); right:clamp(14px,3vw,34px); z-index:59; display:none; flex-direction:column; gap:3px; padding:10px; border-radius:18px;
  background:rgba(255,255,255,0.42); -webkit-backdrop-filter:blur(22px) saturate(1.3); backdrop-filter:blur(22px) saturate(1.3);
  border:1px solid rgba(255,255,255,0.6); box-shadow:0 22px 64px rgba(8,3,26,0.42);
  opacity:0; transform:translateY(-10px); transition:opacity .26s cubic-bezier(.16,1,.3,1), transform .26s cubic-bezier(.16,1,.3,1); pointer-events:none; }
.nav-drawer.open{ opacity:1; transform:none; pointer-events:auto; }
.nav-drawer a{ position:relative; font-family:'Space Grotesk', system-ui, sans-serif; font-weight:650; font-size:15.5px; color:#1e1132; padding:13px 15px; border-radius:11px; transition:color .18s, background .18s; }
.nav-drawer a:hover{ background:rgba(255,255,255,0.55); }
.nav-drawer a.active{ color:#0d2b33; background:rgba(122,240,255,0.32); }
/* a barra da esquerda e o segundo sinal do item ativo, o que nao depende de enxergar cor */
.nav-drawer a.active::before{ content:""; position:absolute; left:5px; top:11px; bottom:11px; width:3px; border-radius:99px; background:#12697d; }
.nav-drawer a:focus-visible{ outline:2px solid #12697d; outline-offset:2px; }
.nav-drawer .dsoc{ display:flex; gap:7px; margin-top:7px; padding-top:9px; border-top:1px solid rgba(30,17,50,0.18); }
.nav-drawer .dsoc a{ flex:1; display:grid; place-items:center; background:rgba(30,17,50,0.08); color:#1e1132; padding:11px 0; }
.nav-drawer .dsoc a:hover{ background:rgba(30,17,50,0.14); }
.nav-drawer .dsoc a.active::before{ display:none; }
.nav-drawer .dsoc svg{ width:18px; height:18px; fill:currentColor; }

/* ---- idioma DENTRO da gaveta ----
   🚨 MEDIDO: 81 paginas com o menu de idioma no desktop, 81 com esta gaveta, ZERO com opcao de
      idioma dentro dela. Como `.idioma` some abaixo de 1040px, no telefone NENHUMA das 726 URLs
      deixava trocar de idioma -- e telefone e a maior parte de quem entra num site de jogo.
   ⛔ A gaveta e CLARA e o menu de desktop e ESCURO, e os dois usam a mesma classe `.idi-op`
      (de proposito: e o mesmo componente, ligado pelo mesmo hreflang). Entao aqui a cor tem de
      ser reescrita com seletor mais especifico -- `.nav-drawer .dlang .idi-op` (0,3,0) vence
      `.idi-op` (0,1,0) sem depender de ordem de arquivo, que e o que sempre me pega. */
/* ⛔ DUAS COLUNAS, NAO TRES, e com o NOME e nao so a bandeira. Bandeira sozinha e pais, nao
   idioma -- e o visitante que fala espanhol nao mora necessariamente na Espanha. Em tres
   colunas de 375px sobra ~110px por celula e "Bahasa Indonesia" pede ~126px; em duas sobram
   ~160px e todos os nove cabem inteiros, no nome NATIVO, que e como a pessoa reconhece o
   proprio idioma. Sao 5 fileiras a mais na gaveta, e por isso ela ganhou rolagem abaixo. */
.nav-drawer .dlang{ display:flex; flex-wrap:wrap; gap:6px; margin-top:7px; padding-top:9px; border-top:1px solid rgba(30,17,50,0.18); }
/* ⛔ `flex-grow:0`: sao NOVE numa grade de duas colunas, entao um sempre sobra sozinho na
   ultima fileira. Com `grow:1` esse ultimo esticava pra largura inteira e a grade parecia
   quebrada. E o recuo saiu de 12 pra 9px com a fonte em 12.5 porque "Bahasa Indonesia" e o
   nome mais longo dos nove e estava sendo cortado com reticencias. */
.nav-drawer .dlang .idi-op{ flex:0 1 calc(50% - 3px); display:flex; align-items:center; gap:8px; min-width:0; min-height:43px; padding:10px 9px; border:0; border-radius:11px; background:rgba(30,17,50,0.08); color:#1e1132; font-family:'Space Grotesk', system-ui, sans-serif; font-weight:650; font-size:12.5px; text-align:left; cursor:pointer; }
.nav-drawer .dlang .idi-op:hover:not([disabled]){ background:rgba(30,17,50,0.14); }
.nav-drawer .dlang .idi-op.on{ background:rgba(122,240,255,0.32); color:#0d2b33; }
.nav-drawer .dlang .idi-op[disabled]{ opacity:.45; cursor:default; }
.nav-drawer .dlang .idi-op:focus-visible{ outline:2px solid #12697d; outline-offset:2px; }
.nav-drawer .dlang .idi-op .bnd{ width:19px; height:13px; border-radius:2px; flex:0 0 auto; box-shadow:0 0 0 1px rgba(0,0,0,.22); }
.nav-drawer .dlang .idi-op .nm{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.nav-drawer .dlang .idi-op .soon{ font-size:9px; letter-spacing:.1em; text-transform:uppercase; color:rgba(30,17,50,.5); flex:none; }
/* ⛔ a gaveta nao tinha teto de altura nenhum: com 9 idiomas a mais ela passaria do fim da tela
   em telefone baixo e a pessoa nao alcancaria as ultimas linhas -- sem barra, sem aviso. */
.nav-drawer{ max-height:calc(100vh - 100px); overflow-y:auto; }

/* ---- responsive ---- */
/* 🚨 1040px ERA A MEDIDA DE SETE ITENS de menu. Sao SEIS desde que o "Bet" saiu (ele nao
   levava a lugar nenhum), entao a barra cabia bem antes disso e a gaveta abria cedo demais:
   quem esta entre 940 e 1040 via o menu de hamburguer com espaco de sobra na tela.
   940 e a largura em que os 6 itens + logo + carteira ainda cabem sem apertar. */
@media (min-width:941px){ .nav-drawer{ display:none !important; } }
@media (max-width:940px){ .nav-mid{ display:none; } .nav-right .socials{ display:none; } .nav-toggle{ display:block; } .nav-drawer{ display:flex; } }
/* 🚨 O BOTAO DA CARTEIRA MEDIA 35px DE ALTURA NO TELEFONE, e a causa estava nesta propria linha:
   ela encolhia o padding pra 9px pra caber na barra, e 9 + 17 (a caixa do texto de 13px) + 9 da
   exatamente 35. Medido em 375px por `mede-responsivo.mjs`, em 63 paginas.
   ⛔ 44px NAO E GOSTO MEU: e o minimo que Apple e Google publicam pra alvo de toque, e a regua
      deste repo cobra 40. O dedo nao encolhe junto com a barra.
   ⚠️ `min-height` e nao `height`: o botao e `inline-flex` com `align-items:center`, entao a altura
      minima centraliza o texto sozinha e nada corta se a traducao crescer -- e ela cresce
      ("Conectar carteira" em pt, "Кошелёк" em ru). Altura fixa cortaria a segunda linha calada. */
@media (max-width:560px){ .nav-right .btn-solid{ font-size:13px; padding:9px 15px; min-height:44px; } }

@media (prefers-reduced-motion: reduce){
  .nav::before{ animation:none; }
  .nav-mid a, .nav-right .socials a, .nav-toggle span, .nav-drawer{ transition:none; }
  ::view-transition-old(root), ::view-transition-new(root){ animation:none !important; }
}