/* =============================================================
   SIDEBAR "FORJA" — preto fosco, ouro, tipografia grande.
   Carregado por ÚLTIMO: vence os estilos antigos sem !important.
   A sidebar é sempre escura (superfície própria), inclusive no tema claro —
   é o que dá o contraste da identidade.
   ============================================================= */

:root{
  --forja-bg:      #0c0c0e;
  --forja-bg-2:    #121214;
  --forja-linha:   #23231f;
  --forja-ouro:    #c9a227;
  --forja-ouro-cl: #f0d67a;
  --forja-ouro-es: #8f6f14;
  --forja-txt:     #e8e4d9;
  --forja-mudo:    #8a8578;
  --forja-mudo-2:  #6b665c;
  --forja-w:       268px;
}

/* A coluna da sidebar SÓ existe no desktop. Sem este escopo, esta regra (carregada
   por último) vencia o .shell{1fr} do mobile do premium.css e o celular ficava com
   uma coluna de 268px reservada para uma sidebar escondida — conteúdo espremido.
   861px casa com o breakpoint de gaveta do premium.css (max-width:860px). */
@media (min-width: 861px){
  .shell{ grid-template-columns: var(--forja-w) 1fr; }
}

.sidebar{
  background: linear-gradient(180deg, #0e0e10 0%, var(--forja-bg) 60%, #090909 100%);
  border-right: 1px solid var(--forja-linha);
  padding: 20px 16px 16px;
  gap: 0;
  color: var(--forja-txt);
}
html.tema-claro .sidebar{ background: linear-gradient(180deg,#0e0e10 0%,var(--forja-bg) 60%,#090909 100%); border-right-color: var(--forja-linha); }

/* ---------- marca ---------- */
.logo{
  display:flex; align-items:center; gap:12px;
  padding: 2px 4px 18px; text-decoration:none; color:var(--forja-txt);
  /* Blindagem contra CSS legado: qualquer gradiente-texto herdado apagaria o E do
     selo e a tagline (text-fill-color herda e vence o color dos filhos). */
  background:none; -webkit-background-clip:border-box; background-clip:border-box;
  -webkit-text-fill-color:currentColor;
}
.logo-selo{ -webkit-text-fill-color:#1a1508; }
.logo-tx em{ -webkit-text-fill-color:currentColor; }
/* o b usa a técnica de gradiente-texto de propósito — text-fill transparente é o correto ali */
.logo-tx b{ -webkit-text-fill-color:transparent; }
.logo-selo{
  width:42px; height:42px; flex:none; border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  font-family:'Playfair Display',Georgia,serif; font-weight:700; font-size:23px; color:#1a1508;
  background: linear-gradient(145deg, var(--forja-ouro-cl), var(--forja-ouro) 55%, var(--forja-ouro-es));
  box-shadow: 0 6px 18px -6px rgba(201,162,39,.55), inset 0 1px 0 rgba(255,255,255,.45);
  transition: transform .35s cubic-bezier(.2,.9,.25,1), box-shadow .35s;
}
.logo:hover .logo-selo{ transform: translateY(-1px) rotate(-3deg); box-shadow:0 10px 24px -6px rgba(201,162,39,.75), inset 0 1px 0 rgba(255,255,255,.5); }
.logo-tx{ display:flex; flex-direction:column; line-height:1; min-width:0; }
.logo-tx b{
  font-family:'Playfair Display',Georgia,serif; font-weight:700;
  font-size:23px; letter-spacing:.06em; text-transform:uppercase;
  background:linear-gradient(95deg,var(--forja-ouro-cl),#fff8e2 40%,var(--forja-ouro) 75%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.logo-tx em{
  font-style:normal; margin-top:5px;
  font-size:9px; letter-spacing:.22em; text-transform:uppercase; color:var(--forja-mudo-2);
}

/* ---------- card de patente ---------- */
.patente{
  border:1px solid var(--forja-linha); border-radius:14px; padding:13px 14px 12px;
  background: linear-gradient(160deg, #17170f 0%, var(--forja-bg-2) 70%);
  margin-bottom:20px; position:relative; overflow:hidden;
}
.patente::after{ /* brilho sutil que atravessa o card — só na 1ª montagem (ver forja-ok) */
  content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(105deg,transparent 40%,rgba(240,214,122,.10) 50%,transparent 60%);
  transform:translateX(-100%);
}
html:not(.forja-ok) .patente::after{ animation: forja-brilho 2.6s ease-out .35s 1; }
@keyframes forja-brilho{ to{ transform:translateX(100%); } }
.patente-topo{ display:flex; justify-content:space-between; align-items:center; }
.patente-rot{ font-size:9px; letter-spacing:.2em; text-transform:uppercase; color:var(--forja-mudo-2); }
.patente-nv{ font-family:ui-monospace,Consolas,monospace; font-size:10.5px; letter-spacing:.1em; color:var(--forja-ouro); text-transform:uppercase; }
.patente-nome{
  font-family:'Playfair Display',Georgia,serif; font-weight:700; font-size:25px; line-height:1.1;
  margin:7px 0 11px; color:#f5efdf; text-transform:capitalize;
}
.patente-barra{ height:4px; border-radius:4px; background:#1e1e18; overflow:hidden; }
.patente-barra i{
  display:block; height:100%; border-radius:4px;
  background:linear-gradient(90deg,var(--forja-ouro-es),var(--forja-ouro) 45%,var(--forja-ouro-cl));
  box-shadow:0 0 10px rgba(201,162,39,.45);
  transform-origin:left;
}
html:not(.forja-ok) .patente-barra i{ animation: forja-barra .9s cubic-bezier(.2,.9,.25,1) both; }
@keyframes forja-barra{ from{ transform:scaleX(0); } to{ transform:scaleX(1); } }
.patente-xp{
  display:flex; justify-content:space-between; margin-top:8px;
  font-family:ui-monospace,Consolas,monospace; font-size:10px; color:var(--forja-mudo-2);
}

/* ---------- grupos com filete ---------- */
.nav{ gap:1px; }
.nav-group{
  display:flex; align-items:center; gap:10px;
  font-size:9px; letter-spacing:.2em; text-transform:uppercase; font-weight:600;
  color:var(--forja-mudo-2); padding:16px 6px 7px;
}
.nav-group::after{ content:''; flex:1; height:1px; background:linear-gradient(90deg,var(--forja-linha),transparent); }

/* ---------- itens ---------- */
.nav-link{
  display:flex; align-items:center; gap:12px;
  padding:9px 12px; border-radius:10px;
  color:var(--forja-mudo); font-size:13.5px; font-weight:500; letter-spacing:.005em;
  border:1px solid transparent; background:transparent;
  transition: color .2s ease, background .2s ease, border-color .2s ease, transform .2s cubic-bezier(.2,.9,.25,1);
}
.nav-link .nav-ic{
  width:17px; height:17px; flex:none; display:inline-flex; align-items:center; justify-content:center;
  background:none; border:none; box-shadow:none; color:var(--forja-mudo-2);
  transition: color .2s ease, transform .3s cubic-bezier(.2,.9,.25,1);
}
.nav-link .nav-ic .ic{ width:15px; height:15px; stroke-width:1.6; }
.nav-link .nav-tx{ flex:1; min-width:0; }

.nav-link:hover{
  color:var(--forja-txt); background:rgba(201,162,39,.055);
  border-color:rgba(201,162,39,.14); transform:translateX(3px);
}
.nav-link:hover .nav-ic{ color:var(--forja-ouro); transform:scale(1.08); }

.nav-link.ativo{
  color:#f7f1e0; background:linear-gradient(90deg, rgba(201,162,39,.16), rgba(201,162,39,.04));
  border-color:rgba(201,162,39,.42); box-shadow:0 0 0 1px rgba(201,162,39,.08), 0 6px 18px -12px rgba(201,162,39,.9);
  transform:none;
}
.nav-link.ativo::before{ display:none; }           /* remove a barrinha do tema antigo */
.nav-link.ativo .nav-ic{ color:var(--forja-ouro-cl); background:none; box-shadow:none; }
.nav-link:focus-visible{ outline:2px solid rgba(201,162,39,.55); outline-offset:2px; }

/* posição no ranking (#14) e ponto de novidade (Conquistas) */
.nav-num{
  margin-left:auto; font-family:ui-monospace,Consolas,monospace; font-size:10.5px;
  color:var(--forja-mudo-2); letter-spacing:.02em; transition:color .2s ease;
}
.nav-link:hover .nav-num{ color:var(--forja-ouro); }
.nav-dot{
  margin-left:auto; width:6px; height:6px; border-radius:50%;
  background:var(--forja-ouro); box-shadow:0 0 8px rgba(201,162,39,.9);
  animation: forja-pulso 2.4s ease-in-out infinite;
}
@keyframes forja-pulso{ 0%,100%{ opacity:.55; transform:scale(.85); } 50%{ opacity:1; transform:scale(1); } }

/* badge (Revisões) e contadores */
.nav-badge{
  margin-left:auto; background:linear-gradient(145deg,var(--forja-ouro-cl),var(--forja-ouro));
  color:#1a1508; font-family:ui-monospace,Consolas,monospace; font-size:10px; font-weight:700;
  padding:2px 8px; border-radius:999px; box-shadow:0 2px 8px -2px rgba(201,162,39,.7);
}

/* ---------- CTA ---------- */
.side-cta{
  display:block; margin-top:14px; padding:13px 15px; border-radius:13px; text-decoration:none;
  border:1px solid var(--forja-linha);
  background:linear-gradient(140deg,#191910 0%, var(--forja-bg-2) 75%);
  transition: border-color .25s ease, transform .25s cubic-bezier(.2,.9,.25,1), box-shadow .25s;
}
.side-cta:hover{ border-color:rgba(201,162,39,.4); transform:translateY(-2px); box-shadow:0 10px 24px -14px rgba(201,162,39,.8); }
.side-cta .side-cta-ic{ display:none; }
.side-cta-tx{ display:flex; flex-direction:column; gap:3px; }
.side-cta-tx b{ font-size:13px; font-weight:600; color:var(--forja-txt); }
.side-cta-tx em{ font-style:normal; font-size:11px; color:var(--forja-mudo-2); }
.side-cta:hover .side-cta-tx em{ color:var(--forja-ouro); }

/* ---------- rodapé: perfil ---------- */
.sidebar-foot{ padding-top:12px; margin-top:10px; border-top:1px solid var(--forja-linha); }
.mini-perfil{
  display:flex; align-items:center; gap:11px; padding:9px 10px; border-radius:12px;
  background:var(--forja-bg-2); border:1px solid var(--forja-linha);
  transition:border-color .25s ease, background .25s ease;
}
.mini-perfil:hover{ border-color:rgba(201,162,39,.3); background:#16160f; }
.avatar{
  width:34px; height:34px; border-radius:10px; font-size:13px; color:#1a1508;
  background:linear-gradient(145deg,var(--forja-ouro-cl),var(--forja-ouro) 60%,var(--forja-ouro-es));
  box-shadow:0 4px 12px -4px rgba(201,162,39,.6), inset 0 1px 0 rgba(255,255,255,.4);
}
.mp-nome{ font-size:12.5px; font-weight:600; color:var(--forja-txt); }
.mp-rank{ font-family:ui-monospace,Consolas,monospace; font-size:10px; color:var(--forja-ouro); letter-spacing:.03em; }
.btn-sair{
  color:var(--forja-mudo-2); font-size:15px; letter-spacing:1px; line-height:1;
  border-radius:8px; padding:4px 6px; transition:color .2s, background .2s;
}
.btn-sair:hover{ color:var(--forja-ouro); background:rgba(201,162,39,.1); }
.visitante-nota{ color:var(--forja-mudo-2); }

/* ---------- entrada suave — SÓ na primeira montagem ----------
   O SPA re-renderiza o shell (sidebar incluída) a cada rota. Sem este escopo,
   as animações de entrada (opacity 0 → 1) rodavam de novo em TODO clique e a
   sidebar "piscava". Após a 1ª montagem, app.js marca <html class="forja-ok">
   e nada disto re-executa. */
html:not(.forja-ok) .sidebar .logo,
html:not(.forja-ok) .sidebar .patente,
html:not(.forja-ok) .sidebar .nav-group,
html:not(.forja-ok) .sidebar .nav-link,
html:not(.forja-ok) .sidebar .side-cta,
html:not(.forja-ok) .sidebar .sidebar-foot{ animation: forja-entra .5s cubic-bezier(.2,.9,.25,1) both; }
@keyframes forja-entra{ from{ opacity:0; transform:translateX(-10px); } to{ opacity:1; transform:none; } }
html:not(.forja-ok) .sidebar .logo{ animation-delay:.02s }
html:not(.forja-ok) .sidebar .patente{ animation-delay:.06s }
html:not(.forja-ok) .sidebar .nav-group:nth-of-type(1){ animation-delay:.10s }
html:not(.forja-ok) .sidebar .nav-link:nth-of-type(-n+4){ animation-delay:.12s }
html:not(.forja-ok) .sidebar .side-cta{ animation-delay:.20s }
html:not(.forja-ok) .sidebar .sidebar-foot{ animation-delay:.24s }

/* barra de rolagem discreta */
.nav::-webkit-scrollbar{ width:5px; }
.nav::-webkit-scrollbar-thumb{ background:#2a2a22; border-radius:5px; }
.nav::-webkit-scrollbar-thumb:hover{ background:#3d3a2c; }
.nav{ scrollbar-width:thin; scrollbar-color:#2a2a22 transparent; }

/* ---------- responsivo ----------
   MESMO breakpoint do premium.css (860px), que é quem faz a gaveta
   (position:fixed + translateX). Aqui só entram os acabamentos Forja. */
@media (max-width: 860px){
  .sidebar{ width:var(--forja-w); box-shadow:24px 0 60px -20px rgba(0,0,0,.9); }
  .sidebar.aberta{ transform:none; }
  /* alvo de toque mínimo de 44px (WCAG/Apple) — o botão tinha 38px */
  .menu-toggle{ min-width:44px; min-height:44px; display:inline-flex; align-items:center; justify-content:center; }
  /* itens da gaveta um pouco mais altos no dedo */
  .nav-link{ padding:11px 12px; }
}
@media (max-width: 420px){
  /* largura da GAVETA direto no elemento — nunca via --forja-w, que o grid
     do .shell desktop também lê (84vw no grid quebrava tudo) */
  .sidebar{ width:min(84vw, 320px); }
  .patente-nome{ font-size:22px; }
  .logo-tx b{ font-size:21px; }
}
/* quem pede menos animação, recebe menos */
@media (prefers-reduced-motion: reduce){
  .sidebar *, .sidebar *::after{ animation:none !important; transition-duration:.01ms !important; }
}