/* ============================================================
   Binaryzando — Design System
   Dark premium gaming aesthetic
   ============================================================ */

/* ---------- Google Fonts ----------
   DUAS FONTES (troca de 2026-07-14, pedido do Diego: mais legível sem
   perder o clima cyberpunk): Oxanium (display) + Exo 2 (body/hud).
   Antes era Orbitron + Chakra Petch — bonitas mas cansativas de ler. */
@import url('https://fonts.googleapis.com/css2?family=Oxanium:wght@400;500;600;700;800&family=Exo+2:wght@400;500;600;700;800&display=swap');

/* ---------- CSS Custom Properties ---------- */
:root {
  /* Background layers */
  --bg-deepest:    #010001;
  --bg-base:       #010109;
  --bg-surface:    #020B1C;
  --bg-card:       #021029;
  --bg-elevated:   #012773;
  --bg-hover:      #013B86;
  --bg-input:      #020B1C;

  /* Text */
  --text-primary:   #F9FAFB;
  --text-secondary: #DBDEF1;
  --text-muted:     rgba(219,222,241,.55);
  --text-inverse:   #010001;

  /* Paleta cyberpunk neon oficial — azul neon domina, magenta como acento,
     roxo de apoio. Glow forte; cara de HUD de game / synthwave. */
  --brand-1:        #198ADF;
  --brand-2:        #F00AE6;
  --brand-3:        #AD05EE;
  --brand-gradient: linear-gradient(135deg, #198ADF, #1C48D5, #AD05EE);

  /* Neon individuais (glow, bordas, detalhes HUD) */
  --neon-cyan:      #198ADF;
  --neon-magenta:   #F00AE6;
  --neon-gold:      #FB4F05;
  --neon-violet:    #AD05EE;

  /* Accent */
  --accent:         #198ADF;
  --accent-hover:   #B0DEF8;
  --accent-glow:    rgba(25,138,223,.5);

  /* Rarity colours */
  --rarity-common:      #DBDEF1;
  --rarity-common-glow: rgba(219,222,241,.30);

  --rarity-rare:        #198ADF;
  --rarity-rare-glow:   rgba(25,138,223,.35);

  --rarity-epic:        #AD05EE;
  --rarity-epic-glow:   rgba(173,5,238,.35);

  --rarity-legendary:   #FB4F05;
  --rarity-legendary-2: #FA2C0B;
  --rarity-legendary-glow: rgba(251,79,5,.40);

  /* Mítico — carta que venceu uma temporada (vermelho carmesim, acima da Lendária) */
  --rarity-mythic:      #F71231;
  --rarity-mythic-2:    #FF4D6D;
  --rarity-mythic-glow: rgba(247,18,49,.45);

  /* Exclusivo — raridade numerada/holográfica (topo absoluto, entra no ranking) */
  --rarity-exclusive:      #CFE0FF;
  --rarity-exclusive-glow: rgba(180,210,255,.45);
  --rarity-exclusive-grad: linear-gradient(120deg,#7af7ff 0%,#b98cff 30%,#ff8cf0 55%,#8cffd6 80%,#7af7ff 100%);

  /* Grade colours (note) */
  --grade-d:  #DBDEF1;
  --grade-c:  #198ADF;
  --grade-b:  #1C48D5;
  --grade-a:  #AD05EE;
  --grade-s:  #FB4F05;
  --grade-sp: linear-gradient(135deg,#FB4F05,#F71231,#198ADF);

  /* Semantic (verde mantido como excecao para WIN/lucro) */
  --success:    #22c55e;
  --warning:    #FB4F05;
  --danger:     #F71231;
  --info:       #198ADF;

  /* Borders */
  --border:       rgba(219,222,241,.10);
  --border-light: rgba(219,222,241,.18);

  /* Aliases de compatibilidade — nomes antigos (--border-color, --bg,
     --card-bg) usados em HTML/CSS legado que ficaram ORFAOS na migracao pro
     design system novo. Sem estes viravam variavel indefinida = borda/fundo
     TRANSPARENTE (caixas selecionaveis sumiam). Apontam pros tokens atuais.
     Nao usar em codigo novo: prefira --border-light / --bg-card direto. */
  --border-color: var(--border-light);
  --bg:           var(--bg-card);
  --card-bg:      var(--bg-card);

  /* MOLDURA PADRÃO DO SITE — mesmos cortes chanfrados usados na moldura
     do menu lateral (.shell-nav-frame, css/shell.css). Qualquer borda
     nova no site deve usar .hud-frame (painel) ou --hud-clip-bar (barra),
     nunca inventar outro estilo de borda. Ver memória "bordas-padrao". */
  --hud-clip-panel: polygon(16px 0, calc(100% - 8px) 0, 100% 8px, 100% calc(100% - 16px), calc(100% - 16px) 100%, 8px 100%, 0 calc(100% - 8px), 0 16px);
  --hud-clip-bar:   polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 14px) 100%, 14px 100%, 0 calc(100% - 10px));
  --hud-clip-logo:  polygon(8px 0, calc(100% - 8px) 0, 100% 8px, 100% calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 0 calc(100% - 8px), 0 8px);

  /* Radius */
  --radius-sm:  6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-sm:  0 1px  3px rgba(0,0,0,.4);
  --shadow-md:  0 4px 12px rgba(0,0,0,.5);
  --shadow-lg:  0 8px 30px rgba(0,0,0,.6);
  --shadow-xl:  0 12px 50px rgba(0,0,0,.7);

  /* Typography — EXO 2 EM TODO O SITE (decisão do Diego 15/07: a Oxanium
     confundia — "Todo o histórico" parecia "Toda a histórica"). Exo 2 é a
     fonte padrão de tudo: títulos, headings, botões, corpo, HUD. O tamanho/
     negrito ainda diferencia "display" (grande/bold) de "body" (pequeno).
     A Oxanium continua carregada só pra ARTE das cartas colecionáveis. */
  --font-body:    'Exo 2', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-display: 'Exo 2', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-hud:     'Exo 2', 'Segoe UI', system-ui, sans-serif;

  /* Transitions */
  --ease-out:  cubic-bezier(.25,.46,.45,.94);
  --ease-spring: cubic-bezier(.34,1.56,.64,1);

  /* Glassmorphism */
  --glass-bg:     rgba(15,20,32,.65);
  --glass-border: rgba(255,255,255,.06);
  --glass-blur:   16px;

  /* Sizing */
  --sidebar-width: 260px;
  --header-height: 64px;
  --container-max:  1680px;
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px;-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  font-family:var(--font-body);
  font-weight:400;            /* Exo 2 400 já tem corpo bom no fundo escuro */
  background:var(--bg-deepest);
  color:var(--text-primary);
  line-height:1.6;
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img,video,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:none;background:none;color:inherit}
input,select,textarea{font:inherit;color:inherit;background:none;border:none;outline:none}
ul,ol{list-style:none}
h1,h2,h3,h4,h5,h6{font-family:var(--font-display);line-height:1.2;font-weight:700}

/* ---------- Typography scale ---------- */
.text-xs  {font-size:.75rem}
.text-sm  {font-size:.875rem}
.text-base{font-size:1rem}
.text-lg  {font-size:1.125rem}
.text-xl  {font-size:1.25rem}
.text-2xl {font-size:1.5rem}
.text-3xl {font-size:1.875rem}
.text-4xl {font-size:2.25rem}
.text-5xl {font-size:3rem}
.text-6xl {font-size:3.75rem}
.text-7xl {font-size:4.5rem}

.font-light   {font-weight:300}
.font-normal  {font-weight:400}
.font-medium  {font-weight:500}
.font-semibold{font-weight:600}
.font-bold    {font-weight:700}
.font-black   {font-weight:900}

/* ---------- Container ---------- */
.container{
  width:100%;
  max-width:var(--container-max);
  margin:0 auto;
  padding:0 24px;
}
/* Abas onde o Diego pediu pra soltar a trava de largura (2026-07-11,
   reforçado 2026-07-19 pra TODAS as abas do app sem exceção — só ficam de
   fora páginas estáticas/landing que o Diego confirmou que devem continuar
   centralizadas: Vitrine/Prisma/Mapa/Início e páginas legais). O conteúdo
   passa a esticar até a borda da tela em qualquer zoom/monitor, em vez de
   travar em --container-max. */
body[data-pagina="cartas"] .container,
body[data-pagina="gemas"] .container,
body[data-pagina="builds"] .container,
body[data-pagina="missoes"] .container,
body[data-pagina="marketplace"] .container,
body[data-pagina="rankingmercado"] .container,
body[data-pagina="ranking"] .container,
body[data-pagina="batalhas"] .container,
body[data-pagina="temporadas"] .container,
body[data-pagina="bag"] .container,
body[data-pagina="configuracoes"] .container,
body[data-pagina="notificacoes"] .container,
body[data-pagina="laboratorio"] .container,
body[data-pagina="temperamento"] .container,
body[data-pagina^="radio"] .container{
  max-width:none;
}

/* ---------- Glass panels ---------- */
.glass{
  background:var(--glass-bg);
  backdrop-filter:blur(var(--glass-blur));
  -webkit-backdrop-filter:blur(var(--glass-blur));
  border:1px solid var(--glass-border);
  border-radius:var(--radius-lg);
}

.glass-card{
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  transition:border-color .3s var(--ease-out),box-shadow .3s var(--ease-out),transform .3s var(--ease-out);
}
.glass-card:hover{
  border-color:var(--border-light);
  box-shadow:var(--shadow-lg);
  transform:translateY(-2px);
}

/* ============================================================
   .hud-frame — MOLDURA PADRÃO (painel): cantos chanfrados + gradiente
   azul-neon → vermelho-neon, em duas camadas (gradiente por fora =
   "borda", fundo escuro por dentro clipado 1px menor). É a MESMA
   técnica/forma da moldura do menu lateral (.shell-nav-frame). Use
   esta classe em qualquer cartão/painel que precisar de borda.
   ============================================================ */
.hud-frame{
  position:relative;
  border:none;
  background:linear-gradient(180deg, var(--neon-cyan) 0%, rgba(25,138,223,.3) 30%, rgba(247,18,49,.3) 70%, var(--danger) 100%);
  clip-path:var(--hud-clip-panel);
  filter:drop-shadow(0 0 12px rgba(25,138,223,.15));
}
.hud-frame::before{
  content:'';
  position:absolute; inset:1px;
  background:linear-gradient(180deg, rgba(2,11,28,.96), rgba(1,1,9,.98));
  clip-path:var(--hud-clip-panel);
}
/* Quadradinhos coloridos da moldura REMOVIDOS (Diego 2026-07-09: tirar os
   retângulozinhos vermelho/azul das barras). Antes: .hud-frame::after pintava
   6 tiques neon nas laterais de todo painel via background-image + drop-shadow. */
.hud-frame > *{ position:relative; z-index:1; }

/* ============================================================
   .page-banner — BANNER PADRÃO de topo de aba (Diego, 2026-07-20:
   "adorei o estilo, replique em todas as abas"). Mesma técnica do banner
   de Cartas/Perfil: .hud-frame dá a moldura chanfrada, a arte cyberpunk
   fica num filho absoluto com escurecimento à esquerda pra manter o
   título legível. Use com <div class="page-banner hud-frame">
   <div class="page-banner-bg"></div><h1 class="page-title">...</h1>
   <p class="page-subtitle">...</p></div>. NÃO usar em perfil.html (tem
   banner próprio, .pfh — Diego pediu pra não mexer nele). */
.page-banner{
  position:relative; overflow:hidden;
  padding:40px 44px; min-height:168px;
  display:flex; flex-direction:column; justify-content:center;
  text-align:left;
  margin-top:40px; margin-bottom:40px;
}
.page-banner-bg{
  position:absolute; inset:1px; z-index:0;
  clip-path:var(--hud-clip-panel);
  background-repeat:no-repeat; background-size:cover;
  background-position:right center;
  background-image:
    linear-gradient(90deg, rgba(1,1,9,.92) 0%, rgba(1,1,9,.58) 30%, rgba(1,1,9,.2) 56%, rgba(1,1,9,.02) 100%),
    url('/img/banners/banner-forja.webp');
}
.page-banner .page-subtitle{ margin:8px 0 0; max-width:480px; }

/* ============================================================
   BANCADA DE FORJA — chips do trilho de progresso da carta.
   Compartilhado por inventario.html e criar_estrategia.html
   (ambos geram os chips via atualizarPreviaForja em
   js/strategy-builder.js). Cada chip = um passo da carta;
   os já feitos (is-done) são clicáveis pra reabrir só aquele
   passo. Ver memória "regras-laboratorio". */
.forja-chip{
  display:inline-flex; align-items:center; gap:5px;
  padding:6px 11px; border-radius:20px;
  font-size:12px; font-weight:600; white-space:nowrap;
  border:1px solid transparent; cursor:default;
  transition:box-shadow .18s ease, transform .18s ease, background .18s ease;
}
.forja-chip .fc-ic{ display:none; }
.forja-chip.is-done{
  background:var(--neon-cyan); border-color:var(--neon-cyan);
  color:#fff; cursor:pointer;
}
.forja-chip.is-done::before{ content:'✓'; font-weight:800; color:#fff; }
.forja-chip.is-done:hover{ box-shadow:0 0 12px rgba(25,138,223,.6); transform:translateY(-1px); }
.forja-chip.is-now{
  border-color:var(--neon-cyan); color:#8FCBF5;
  background:rgba(25,138,223,.08);
  animation:forjaChipPulse 1.6s ease-in-out infinite;
}
.forja-chip.is-off{ border-color:rgba(176,222,248,.14); color:var(--text-muted); opacity:.6; }
.forja-chip.is-mystery{ border-color:#AD05EE; color:#AD05EE; box-shadow:0 0 8px rgba(173,5,238,.4); }
@keyframes forjaChipPulse{
  0%,100%{ box-shadow:0 0 4px rgba(25,138,223,.4); }
  50%{ box-shadow:0 0 14px rgba(25,138,223,.75); }
}
.forja-chip-sep{ opacity:.35; color:var(--text-muted); font-size:12px; }

/* ============================================================
   .hud-logo-frame — moldura de logo (mesma técnica da tela holo do
   menu lateral, .shell-brand-screen): cantos chanfrados pequenos +
   gradiente + scanline. Use em qualquer logo solta no site.
   Markup: <span class="hud-logo-frame"><img class="hud-logo-frame-img">
   <i class="hud-logo-frame-scan" aria-hidden="true"></i></span>
   ============================================================ */
.hud-logo-frame{
  display:block;
  position:relative;
  padding:2px;
  background:linear-gradient(120deg, rgba(25,138,223,.85), rgba(28,72,213,.3) 45%, rgba(247,18,49,.75));
  clip-path:var(--hud-clip-logo);
  filter:drop-shadow(0 0 10px rgba(25,138,223,.2));
}
.hud-logo-frame-img{
  display:block;
  width:100%; height:auto;
  clip-path:var(--hud-clip-logo);
}
.hud-logo-frame-scan{
  position:absolute; inset:2px;
  clip-path:var(--hud-clip-logo);
  background:repeating-linear-gradient(0deg, rgba(0,0,0,.18) 0 1px, transparent 1px 3px);
  overflow:hidden;
  pointer-events:none;
}
.hud-logo-frame-scan::after{
  content:'';
  position:absolute; left:0; right:0; top:-25%;
  height:20%;
  background:linear-gradient(180deg, transparent, rgba(176,222,248,.12), transparent);
  animation:hudLogoScan 4.5s linear infinite;
}
@keyframes hudLogoScan{
  0%   { top:-25%; }
  100% { top:125%; }
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:10px 24px;
  border-radius:var(--radius-md);
  font-family:var(--font-display);   /* CTAs em negrito ficam na Oxanium "de jogo" */
  font-weight:600;font-size:.875rem;
  transition:all .25s var(--ease-out);
  white-space:nowrap;
  position:relative;overflow:hidden;
}
.btn::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(255,255,255,.1),transparent);
  opacity:0;transition:opacity .25s;
}
.btn:hover::after{opacity:1}
.btn:disabled{
  opacity:.45;
  cursor:not-allowed;
  filter:grayscale(.4);
}
.btn:disabled:hover::after{opacity:0}

/* cantos cortados (chanfro) — assinatura de HUD cyberpunk */
.btn-primary,.btn-legendary,.btn-lg{
  clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px);
  border-radius:0;
}

.btn-primary{
  background:linear-gradient(135deg,#198ADF,#1C48D5);
  color:var(--text-primary);
  font-weight:700;
  box-shadow:0 0 18px rgba(25,138,223,.45),inset 0 0 12px rgba(255,255,255,.15);
}
.btn-primary:hover{
  box-shadow:0 0 30px rgba(25,138,223,.7),inset 0 0 14px rgba(255,255,255,.22);
  transform:translateY(-1px);
}

.btn-legendary{
  background:linear-gradient(135deg,#FB4F05,#FA2C0B,#FB4F05);
  background-size:200% 200%;
  animation:shimmer-bg 3s ease-in-out infinite;
  color:#010001;
  font-weight:700;
  box-shadow:0 0 22px rgba(251,79,5,.5);
}
.btn-legendary:hover{
  box-shadow:0 0 34px rgba(251,79,5,.75);
  transform:translateY(-1px);
}

/* "Próximo", "Gerar Histórico", "Salvar Estratégia" etc. — a classe
   btn-accent era usada em dezenas de botões (Laboratório inteiro) sem
   NENHUMA regra de CSS pra ela, então caía no .btn genérico (sem cor de
   fundo) e só ficava visível no hover — parecia texto solto, não botão. */
.btn-accent{
  background:linear-gradient(135deg,var(--accent),var(--rarity-epic));
  color:#F9FAFB;
  font-weight:700;
  box-shadow:0 0 16px rgba(25,138,223,.35),inset 0 0 10px rgba(255,255,255,.12);
}
.btn-accent:hover{
  box-shadow:0 0 26px rgba(25,138,223,.55),inset 0 0 12px rgba(255,255,255,.18);
  transform:translateY(-1px);
}

/* ============================================================
   PADRÃO DE CAIXA DE SELEÇÃO DO SITE (Diego, 2026-07-20)
   Toda caixa clicável de escolha segue UM visual só:
   - NÃO selecionada (imagem 2): fundo escuro (--bg-card) + borda azulada.
   - SELECIONADA (imagem 1): CONTINUA escura, cresce um tico, borda azul
     mais forte, brilho azul e um SELO redondo no canto sup. direito
     (bolinha azul #198ADF + tique PRETO).
   PROIBIDO em qualquer caixa de seleção: fundo azul cheio com texto preto
   (isso é a imagem 3 — só botão de AÇÃO tipo "Forjar" pode ser assim).
   Não inventar variação por página — usar .btn-outline + .active/.periodo-ativo
   (ou as classes de escolha já cobertas pelo SELO compartilhado abaixo).
   ============================================================ */
.btn-outline{
  border:1px solid rgba(25,138,223,.5);
  color:var(--accent-hover);
  background:var(--bg-card);
  box-shadow:0 0 10px rgba(25,138,223,.12),inset 0 0 10px rgba(25,138,223,.05);
}
.btn-outline:hover{
  border-color:var(--neon-cyan);
  color:#B0DEF8;
  background:rgba(25,138,223,.06);
  box-shadow:0 0 20px rgba(25,138,223,.4),inset 0 0 12px rgba(25,138,223,.1);
}

/* Estado "selecionado" pra botões de filtro tipo abinha (raridade no
   Inventário/Ranking) e atalhos de período: NÃO enche de azul. Fica escuro,
   borda azul reforçada + brilho; o "cresce um tico" e o SELO de canto vêm do
   bloco compartilhado logo abaixo. */
.btn-outline.active,
.btn-outline.periodo-ativo{
  border-color:var(--neon-cyan);
  border-width:2px;
  color:var(--accent-hover);
  background:var(--bg-card);
  box-shadow:0 0 22px rgba(25,138,223,.55),inset 0 0 14px rgba(25,138,223,.12);
}

/* ── SELO DE SELEÇÃO (bolinha azul + tique PRETO no canto) + "cresce um tico" ──
   Vale pra TODA caixa de escolha do site (Laboratório, Forja, Gemas, filtros…).
   Reúne aqui pra nunca mais ter fundo azul cheio com texto preto (imagem 3). */
.btn-outline.active,
.btn-outline.periodo-ativo,
.direction-btn.selected,
.pattern-len-btn.selected,
.dia-chip.selected,
.anchoring-card.selected,
#lab-grupo-tabs .lab-tab.active{
  position:relative;
  overflow:visible;
  transform:scale(1.03);
}
.btn-outline.active::before,
.btn-outline.periodo-ativo::before,
.direction-btn.selected::before,
.pattern-len-btn.selected::before,
.dia-chip.selected::before,
.anchoring-card.selected::before,
#lab-grupo-tabs .lab-tab.active::before{
  content:'✓';
  position:absolute; top:-9px; right:-9px; z-index:5;
  width:22px; height:22px; border-radius:50%;
  background:var(--neon-cyan); color:#010001;
  display:flex; align-items:center; justify-content:center;
  font-weight:900; font-size:13px; line-height:1;
  box-shadow:0 2px 6px rgba(0,0,0,.4),0 0 10px rgba(25,138,223,.7);
  margin:0; pointer-events:none;
}
/* Chip estreito (dias da semana): selo menor pra não cobrir o número. */
.dia-chip.selected::before{
  top:-6px; right:-6px; width:16px; height:16px; font-size:10px;
}
/* Selo do tab "Forjar" (lab-grupo-tabs): azul em vez do laranja padrão. */
#lab-grupo-tabs .lab-tab.active::before{
  background:var(--neon-cyan); box-shadow:0 2px 6px rgba(0,0,0,.4),0 0 10px rgba(25,138,223,.7);
}

/* Campo de senha com olho de mostrar/ocultar — usado em qualquer input de
   senha do site (login, perfil, redefinir-senha). Ver alternarVisibilidadeSenha()
   em js/auth.js. */
.auth-senha-wrap{ position:relative; }
.auth-senha-wrap .form-input{ padding-right:44px; }
.auth-senha-toggle{
  position:absolute; right:4px; top:50%; transform:translateY(-50%);
  background:none; border:none; cursor:pointer;
  padding:6px 8px; line-height:1; color:var(--text-secondary);
  display:flex; align-items:center; justify-content:center;
}
.auth-senha-toggle:hover{ color:var(--text-primary); }

.btn-ghost{
  color:var(--text-secondary);
  padding:8px 16px;
}
.btn-ghost:hover{
  color:var(--text-primary);
  background:var(--bg-hover);
}

.btn-lg{padding:14px 32px;font-size:1rem;border-radius:var(--radius-lg)}
.btn-sm{padding:6px 14px;font-size:.75rem}

/* ---------- Badges ---------- */
.badge{
  display:inline-flex;align-items:center;gap:4px;
  padding:3px 10px;
  border-radius:var(--radius-full);
  font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;
}
.badge-common    {background:rgba(219,222,241,.15);color:var(--rarity-common);border:1px solid rgba(219,222,241,.25)}
.badge-rare      {background:rgba(25,138,223,.12);color:var(--rarity-rare);border:1px solid rgba(25,138,223,.25)}
.badge-epic      {background:rgba(173,5,238,.12);color:var(--rarity-epic);border:1px solid rgba(173,5,238,.25)}
.badge-legendary {
  background:linear-gradient(135deg,rgba(251,79,5,.15),rgba(250,44,11,.15));
  color:var(--rarity-legendary);
  border:1px solid rgba(251,79,5,.3);
}
.badge-mythic {
  background:linear-gradient(135deg,rgba(247,18,49,.18),rgba(255,77,109,.15));
  color:var(--rarity-mythic-2);
  border:1px solid rgba(247,18,49,.35);
}
.badge-exclusive {
  background:rgba(207,224,255,.10);
  color:#eaf2ff;
  border:1px solid transparent;
  border-image:var(--rarity-exclusive-grad) 1;
}

/* Grade badges */
.grade{
  display:inline-flex;align-items:center;justify-content:center;
  width:32px;height:32px;
  border-radius:var(--radius-sm);
  font-family:var(--font-display);font-weight:800;font-size:.85rem;
}
.grade-d  {background:rgba(219,222,241,.2);color:var(--grade-d)}
.grade-c  {background:rgba(25,138,223,.15);color:var(--grade-c)}
.grade-b  {background:rgba(28,72,213,.15);color:var(--grade-b)}
.grade-a  {background:rgba(173,5,238,.15);color:var(--grade-a)}
.grade-s  {background:rgba(251,79,5,.15);color:var(--grade-s)}
.grade-sp {background:linear-gradient(135deg,rgba(251,79,5,.2),rgba(240,10,230,.2));color:#FB4F05;text-shadow:0 0 8px rgba(251,79,5,.5)}

/* ---------- Stat bars ---------- */
.stat-bar{
  width:100%;height:6px;
  background:var(--bg-base);
  border-radius:var(--radius-full);
  overflow:hidden;
}
.stat-bar-fill{
  height:100%;
  border-radius:var(--radius-full);
  transition:width 1s var(--ease-out);
  background:linear-gradient(90deg,var(--accent),var(--accent-hover));
}
.stat-bar-fill.success{background:linear-gradient(90deg,#16a34a,#22c55e)}
.stat-bar-fill.warning{background:linear-gradient(90deg,#FA2C0B,#FB4F05)}
.stat-bar-fill.danger {background:linear-gradient(90deg,#EB0441,#F71231)}
.stat-bar-fill.epic   {background:linear-gradient(90deg,#8104D5,#AD05EE)}
.stat-bar-fill.legendary{background:linear-gradient(90deg,#FA2C0B,#FB4F05)}

/* ---------- Tags / Pills ---------- */
.tag{
  display:inline-flex;align-items:center;gap:4px;
  padding:4px 12px;
  border-radius:var(--radius-full);
  font-size:.75rem;font-weight:500;
  background:var(--bg-elevated);
  border:1px solid var(--border);
  color:var(--text-secondary);
  transition:all .2s;
}
.tag:hover{border-color:var(--accent);color:var(--accent-hover)}

/* ---------- Section ---------- */
.section{
  padding:80px 0;
}
.section-title{
  font-family:var(--font-display);
  font-size:2rem;
  font-weight:800;
  letter-spacing:.5px;
  margin-bottom:12px;
  color:var(--neon-cyan);
  text-shadow:0 0 24px rgba(25,138,223,.28);
}
.section-subtitle{
  color:var(--text-secondary);
  font-size:1.05rem;
  max-width:600px;
}

/* Cabeçalho de página (Laboratório, Inventário, Perfil) — padrão do site é
   tudo centralizado, igual ao cabeçalho de Rankings/Planos (que já usava
   text-align:left inline). */
.lab-header{
  text-align:left;
}
.lab-header .page-subtitle{
  max-width:600px;
  margin:8px 0 0;
}

/* ---------- Glow text ---------- */
.glow-text{
  background:linear-gradient(135deg,#F9FAFB,#198ADF,#AD05EE);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
}
.glow-legendary{
  background:linear-gradient(135deg,#FB4F05,#F9FAFB,#FB4F05);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  animation:shimmer-text 3s ease-in-out infinite;
  background-size:200% auto;
  /* zera o text-shadow herdado (a aberração cromática do .hero-title
     "vazava" sobre o dourado e mascarava a cor); o glow vem do drop-shadow */
  text-shadow:none;
  filter:drop-shadow(0 0 18px rgba(251,79,5,.5));
}

/* ---------- Cyberpunk FX (scanlines CRT + glow utilities) ---------- */
body::after{
  content:'';
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:9000;
  background:repeating-linear-gradient(rgba(0,0,0,0) 0 2px,rgba(0,0,0,.09) 2px 3px);
}
.text-neon{color:var(--neon-cyan);text-shadow:0 0 12px rgba(25,138,223,.6)}
.text-neon-mag{color:var(--neon-magenta);text-shadow:0 0 12px rgba(240,10,230,.6)}
/* HUD eyebrow/label — fonte condensada estilo terminal */
.hud{font-family:var(--font-hud);letter-spacing:2px;text-transform:uppercase}

/* ---------- Keyframes ---------- */
@keyframes shimmer-bg{
  0%,100%{background-position:0% 50%}
  50%{background-position:100% 50%}
}
@keyframes shimmer-text{
  0%,100%{background-position:0% center}
  50%{background-position:200% center}
}
@keyframes float{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-10px)}
}
@keyframes pulse-glow{
  0%,100%{box-shadow:0 0 15px var(--glow-color,rgba(25,138,223,.3))}
  50%{box-shadow:0 0 30px var(--glow-color,rgba(25,138,223,.5))}
}
@keyframes fade-in{
  from{opacity:0;transform:translateY(20px)}
  to{opacity:1;transform:translateY(0)}
}
@keyframes slide-up{
  from{opacity:0;transform:translateY(40px)}
  to{opacity:1;transform:translateY(0)}
}
@keyframes scale-in{
  from{opacity:0;transform:scale(.9)}
  to{opacity:1;transform:scale(1)}
}
@keyframes spin{to{transform:rotate(360deg)}}

.animate-float{animation:float 3s ease-in-out infinite}
.animate-pulse{animation:pulse-glow 2s ease-in-out infinite}
.animate-fade-in{animation:fade-in .6s var(--ease-out) forwards}
.animate-slide-up{animation:slide-up .6s var(--ease-out) forwards}

/* Staggered children */
.stagger > *:nth-child(1){animation-delay:.05s}
.stagger > *:nth-child(2){animation-delay:.1s}
.stagger > *:nth-child(3){animation-delay:.15s}
.stagger > *:nth-child(4){animation-delay:.2s}
.stagger > *:nth-child(5){animation-delay:.25s}
.stagger > *:nth-child(6){animation-delay:.3s}
.stagger > *:nth-child(7){animation-delay:.35s}
.stagger > *:nth-child(8){animation-delay:.4s}

/* ---------- Scrollbar ---------- */
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-track{background:var(--bg-base)}
::-webkit-scrollbar-thumb{background:var(--bg-elevated);border-radius:4px}
::-webkit-scrollbar-thumb:hover{background:var(--bg-hover)}

/* ---------- Selection ---------- */
::selection{background:rgba(25,138,223,.3);color:#F9FAFB}

/* ---------- Responsive ---------- */
@media(max-width:768px){
  :root{--sidebar-width:0px}
  .container{padding:0 16px}
  .section{padding:48px 0}
  .section-title{font-size:1.75rem}
  .text-7xl{font-size:2.5rem}
  .text-6xl{font-size:2.25rem}
  .text-5xl{font-size:2rem}
  .text-4xl{font-size:1.5rem}
  .hide-mobile{display:none!important}
}
@media(max-width:480px){
  .text-7xl{font-size:2rem}
  .text-6xl{font-size:1.75rem}
  .text-5xl{font-size:1.5rem}
  .btn-lg{padding:12px 24px;font-size:.875rem}
}

/* ---------- Modo Economia de Energia (Diego, 2026-07-09) ----------
   Site pesado pra abrir no celular -> chave geral que mata os efeitos mais
   caros pro navegador (glow via box-shadow, blur, animações em loop) em
   QUALQUER elemento do site. Ativada em configuracoes.html, aplicada pelo
   shell.js (primeiro script de cada página) via classe no <body> ANTES do
   layout pintar, pra não ter flash dos efeitos pesados.
   NÃO mexe em "transition": elementos como o toggle-switch usam transition
   pra mover a bolinha via transform — matar transition em TODO elemento de
   uma vez (troca de milhares de nós de estilo no mesmo frame) deixava esse
   movimento instável/deslocado. Quem realmente pesa é o box-shadow/blur
   (repintura cara) e animação em loop (roda sem parar) — não a transição
   rápida de 0.2s de um clique. */
body.eco-energia,
body.eco-energia *{
  animation:none!important;
  box-shadow:none!important;
  text-shadow:none!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}
body.eco-energia video,
body.eco-energia .hud-video,
body.eco-energia .holo-video{display:none!important}