/* ===== Tokens — paleta "Turma do Tumate" (vermelho/preto/bronze) ===== */
:root {
  /* Tema escuro: barras de rolagem, calendário, listas de <select> e demais controles nativos também saem escuros. */
  color-scheme: dark;
  --void: #1a1a1d;
  --panel: #222226;
  --panel-raised: #2b2b30;
  --iron: #45454c;
  --iron-dim: #303035;
  --ember: #b8232f;
  --ember-bright: #e2323f;
  --ember-deep: #7a1620;
  --gold: #d1a24f;
  --gold-bright: #e8c179;
  --gold-dim: #7a5f34;
  /* Versões de TEXTO das cores acima (contraste WCAG AA >= 4,5:1 sobre --void, --panel e --panel-raised).
     --ember-bright dá só 3,9:1 e --gold-dim 2,7:1 em texto pequeno; as cores base seguem valendo para
     fundo, borda, botão e texto grande. */
  --ember-text: #f4646e;
  --gold-text: #b08d52;
  --bone: #f3ece1;
  --bone-dim: #a89c8d;
  --blood: #7a1620;
  --good: #6fae5a;
  --good-bg: rgba(111, 174, 90, 0.15);
  --warn: #d99a3d;
  --warn-bg: rgba(217, 154, 61, 0.15);

  --font-display: 'Oswald', sans-serif;
  --font-body: 'Barlow', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
}

* { box-sizing: border-box; }

/* Barra de rolagem combinando com o tema escuro — sem isso, o
   navegador usa a barra branca padrão em qualquer área com scroll
   (painel de ticket, dropdown, a página inteira), destoando de tudo. */
* { scrollbar-width: thin; scrollbar-color: var(--iron) var(--void); }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: var(--void); }
*::-webkit-scrollbar-thumb { background: var(--iron); border-radius: 999px; border: 2px solid var(--void); }
*::-webkit-scrollbar-thumb:hover { background: var(--gold-dim); }

/* Trava de segurança global: nenhuma classe pode "vencer" o atributo
   hidden. Sem isso, qualquer componente que define display:flex/grid
   sem pensar no estado oculto acaba sempre visível — já vimos esse
   exato bug se repetir em 3 componentes diferentes (modal, carrinho,
   dropdown, tela de acesso negado). Uma regra global elimina a classe
   inteira do problema de uma vez, em vez de caçar caso por caso. */
[hidden] { display: none !important; }

html {
  scroll-behavior: smooth; overflow-x: hidden;
  /* Toque no celular: o realce do toque no tom do site (o padrão é um azul acinzentado do sistema). */
  -webkit-tap-highlight-color: rgba(209, 162, 79, 0.18);
}
/* Sem o atraso de toque duplo-para-zoom em controles: o toque responde na hora. */
a, button, input, select, textarea, label, summary { touch-action: manipulation; }
/* Título longo quebra em linhas equilibradas (sem uma palavra sozinha na última linha). */
h1, h2, h3 { text-wrap: balance; }
/* Link para uma parte da página (#pacotes, #privacidade…): o cabeçalho fixo não cobre o começo da seção. */
:target { scroll-margin-top: 80px; }

body {
  margin: 0;
  background: var(--void);
  color: var(--bone);
  font-family: var(--font-body);
  line-height: 1.5;
  position: relative;
  min-height: 100vh;
}

/* Ativado via JS enquanto qualquer modal está aberto — impede que
   rolar dentro do modal também role a página de fundo junto. */
body.modal-open-lock { overflow: hidden; }

.grain-overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1000;
  opacity: 0.035;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

.wrap { max-width: 1160px; margin: 0 auto; padding: 0 24px; }

a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
:focus-visible { outline: 2px solid var(--ember-bright); outline-offset: 2px; }

/* "Pular para o conteúdo": o primeiro item do teclado em cada página, escondido até receber foco — quem navega com Tab
   não precisa atravessar o menu inteiro toda vez. O <main> recebe o foco (tabindex="-1"), sem contorno por ser área. */
.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 1000; padding: 10px 16px; border-radius: 8px;
  background: var(--ember); color: #fff; font-weight: 700; text-decoration: none; transition: transform 0.15s ease;
}
.skip-link:focus { transform: translateY(72px); }
main[tabindex="-1"]:focus { outline: none; }
#conteudo { scroll-margin-top: 80px; }

/* Quem pediu "reduzir movimento" no sistema: animações e transições do site inteiro ficam instantâneas (os eventos de
   fim de animação continuam disparando, então nada que depende deles trava). */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important; animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important; scroll-behavior: auto !important;
  }
}

/* Ícone via CSS mask, não mais SVG inline — o desenho vem de um PNG
   (branco com fundo transparente) em /img, e a cor continua vindo do
   texto ao redor (currentColor), exatamente como funcionava com SVG
   antes. É isso que permite continuar recolorindo por contexto (hover,
   badge de bronze/prata/ouro, verde de sucesso, vermelho de erro etc)
   sem precisar de uma versão colorida separada de cada ícone. */
.icon {
  display: inline-block;
  width: 1em; height: 1em;
  vertical-align: -0.15em;
  flex-shrink: 0;
  /* Sem isso, o Chrome pisca o ícone em preto por 1 frame sempre que um
     elemento pai (ex: botão) anima "transform" no hover — bug conhecido
     do Chromium com mask-image: o ícone perde a camada de composição e
     é redesenhado sem a máscara por um instante. Forçar a própria
     camada aqui (sem mudar nada visualmente) evita o problema. */
  transform: translateZ(0);
}
/* Cada ícone real tem sua própria regra, com mask-image E
   background-color juntos — de propósito, nunca separados. Um ícone sem
   PNG ainda baixado (ex: i-eye, i-castle — ver lista pendente) fica
   simplesmente vazio/invisível em vez de virar um quadrado sólido de
   currentColor: sem "mask-image" nenhum definido, o navegador trata
   como "sem máscara" = mostra a caixa inteira sem recortar nada, que é
   exatamente o quadrado colorido relatado (no check-circle e, se
   baixasse errado, teria acontecido em qualquer outro). Com as duas
   propriedades sempre juntas na MESMA regra, isso não pode mais
   acontecer — só pinta quando os dois estão definidos. ":not(img)" no
   seletor continua necessário: imagens de verdade (gem.png do booster
   etc) usam a classe "icon" só pelo tamanho, não fazem parte da
   máscara. */
.icon.i-alert:not(img) { background-color: currentColor; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-image: url(/img/alert.png); mask-image: url(/img/alert.png); }
.icon.i-bag:not(img) { background-color: currentColor; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-image: url(/img/bag.png); mask-image: url(/img/bag.png); }
.icon.i-bell:not(img) { background-color: currentColor; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-image: url(/img/bell.png); mask-image: url(/img/bell.png); }
.icon.i-bolt:not(img) { background-color: currentColor; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-image: url(/img/bolt.png); mask-image: url(/img/bolt.png); }
.icon.i-card:not(img) { background-color: currentColor; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-image: url(/img/card.png); mask-image: url(/img/card.png); }
.icon.i-cart:not(img) { background-color: currentColor; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-image: url(/img/cart.png); mask-image: url(/img/cart.png); }
.icon.i-castle:not(img) { background-color: currentColor; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-image: url(/img/castle.png); mask-image: url(/img/castle.png); }
.icon.i-chat:not(img) { background-color: currentColor; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-image: url(/img/chat.png); mask-image: url(/img/chat.png); }
.icon.i-check-circle:not(img) { background-color: currentColor; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-image: url(/img/check-circle.png); mask-image: url(/img/check-circle.png); }
.icon.i-chevron-down:not(img) { background-color: currentColor; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-image: url(/img/chevron-down.png); mask-image: url(/img/chevron-down.png); }
.icon.i-chevron-right:not(img) { background-color: currentColor; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-image: url(/img/chevron-right.png); mask-image: url(/img/chevron-right.png); }
.icon.i-clock:not(img) { background-color: currentColor; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-image: url(/img/clock.png); mask-image: url(/img/clock.png); }
.icon.i-coin:not(img) { background-color: currentColor; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-image: url(/img/coin.png); mask-image: url(/img/coin.png); }
.icon.i-copy:not(img) { background-color: currentColor; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-image: url(/img/copy.png); mask-image: url(/img/copy.png); }
.icon.i-crown:not(img) { background-color: currentColor; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-image: url(/img/crown.png); mask-image: url(/img/crown.png); }
.icon.i-edit:not(img) { background-color: currentColor; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-image: url(/img/edit.png); mask-image: url(/img/edit.png); }
.icon.i-eye:not(img) { background-color: currentColor; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-image: url(/img/eye.png); mask-image: url(/img/eye.png); }
.icon.i-eye-off:not(img) { background-color: currentColor; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-image: url(/img/eye-off.png); mask-image: url(/img/eye-off.png); }
.icon.i-gamepad:not(img) { background-color: currentColor; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-image: url(/img/gamepad.png); mask-image: url(/img/gamepad.png); }
.icon.i-grid:not(img) { background-color: currentColor; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-image: url(/img/grid.png); mask-image: url(/img/grid.png); }
.icon.i-headset:not(img) { background-color: currentColor; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-image: url(/img/headset.png); mask-image: url(/img/headset.png); }
.icon.i-heart:not(img) { background-color: currentColor; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-image: url(/img/heart.png); mask-image: url(/img/heart.png); }
.icon.i-helmet:not(img) { background-color: currentColor; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-image: url(/img/helmet.png); mask-image: url(/img/helmet.png); }
.icon.i-help:not(img) { background-color: currentColor; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-image: url(/img/help.png); mask-image: url(/img/help.png); }
.icon.i-hourglass:not(img) { background-color: currentColor; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-image: url(/img/hourglass.png); mask-image: url(/img/hourglass.png); }
.icon.i-image:not(img) { background-color: currentColor; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-image: url(/img/image.png); mask-image: url(/img/image.png); }
.icon.i-list:not(img) { background-color: currentColor; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-image: url(/img/list.png); mask-image: url(/img/list.png); }
.icon.i-lock:not(img) { background-color: currentColor; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-image: url(/img/lock.png); mask-image: url(/img/lock.png); }
.icon.i-logout:not(img) { background-color: currentColor; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-image: url(/img/logout.png); mask-image: url(/img/logout.png); }
.icon.i-medal:not(img) { background-color: currentColor; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-image: url(/img/medal.png); mask-image: url(/img/medal.png); }
.icon.i-menu:not(img) { background-color: currentColor; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-image: url(/img/menu.png); mask-image: url(/img/menu.png); }
.icon.i-paw:not(img) { background-color: currentColor; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-image: url(/img/paw.png); mask-image: url(/img/paw.png); }
.icon.i-pin:not(img) { background-color: currentColor; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-image: url(/img/pin.png); mask-image: url(/img/pin.png); }
.icon.i-pix:not(img) { background-color: currentColor; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-image: url(/img/pix.png); mask-image: url(/img/pix.png); }
.icon.i-plus:not(img) { background-color: currentColor; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-image: url(/img/plus.png); mask-image: url(/img/plus.png); }
.icon.i-power:not(img) { background-color: currentColor; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-image: url(/img/power.png); mask-image: url(/img/power.png); }
.icon.i-refresh:not(img) { background-color: currentColor; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-image: url(/img/refresh.png); mask-image: url(/img/refresh.png); }
.icon.i-search:not(img) { background-color: currentColor; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-image: url(/img/search.png); mask-image: url(/img/search.png); }
.icon.i-server:not(img) { background-color: currentColor; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-image: url(/img/server.png); mask-image: url(/img/server.png); }
.icon.i-settings:not(img) { background-color: currentColor; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-image: url(/img/settings.png); mask-image: url(/img/settings.png); }
.icon.i-shield:not(img) { background-color: currentColor; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-image: url(/img/shield.png); mask-image: url(/img/shield.png); }
.icon.i-star:not(img) { background-color: currentColor; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-image: url(/img/star.png); mask-image: url(/img/star.png); }
.icon.i-raffle:not(img) { background-color: currentColor; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-image: url(/img/sorteio.png); mask-image: url(/img/sorteio.png); }
.icon.i-discord:not(img) { background-color: currentColor; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-image: url(/img/discord.png); mask-image: url(/img/discord.png); }
.icon.i-promo:not(img) { background-color: currentColor; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-image: url(/img/promotions.png); mask-image: url(/img/promotions.png); }
.icon.i-poll:not(img) { background-color: currentColor; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-image: url(/img/enquetes.png); mask-image: url(/img/enquetes.png); }
.icon.i-audit:not(img) { background-color: currentColor; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-image: url(/img/auditoria.png); mask-image: url(/img/auditoria.png); }
.icon.i-swords:not(img) { background-color: currentColor; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-image: url(/img/swords.png); mask-image: url(/img/swords.png); }
.icon.i-trash:not(img) { background-color: currentColor; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-image: url(/img/trash.png); mask-image: url(/img/trash.png); }
.icon.i-user:not(img) { background-color: currentColor; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-image: url(/img/avatar.png); mask-image: url(/img/avatar.png); }
.icon.i-wrench:not(img) { background-color: currentColor; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-image: url(/img/wrench.png); mask-image: url(/img/wrench.png); }
/* mask-size 121% (não "contain") de propósito nesse aqui — o arquivo
   x-circle.png tem bem mais margem em volta do X do que os outros
   ícones têm em volta do próprio desenho (medido: o X ocupa só ~423px
   de uma tela de 512px, contra ~511px do check-circle), então na mesma
   caixa ele saía visivelmente menor que os outros. 121% compensa essa
   margem extra sem precisar reexportar o arquivo. */
.icon.i-x:not(img) { background-color: currentColor; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-image: url(/img/x.png); mask-image: url(/img/x.png); }
.icon.i-x-circle:not(img) { background-color: currentColor; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: 121%; mask-size: 121%; -webkit-mask-image: url(/img/x-circle.png); mask-image: url(/img/x-circle.png); }

/* Confirmação visual rápida (toast), mesmo padrão do painel admin
   (.admin-toast em admin.css) — usado aqui pro lado do jogador, ex:
   vínculo de FuncomID/ID Steam concluído com sucesso. */
.site-toast {
  position: fixed; bottom: 24px; right: 24px; z-index: 999;
  display: flex; align-items: center; gap: 8px;
  background: var(--panel); border: 1px solid var(--good); color: var(--bone);
  padding: 12px 18px; border-radius: 6px; font-size: 0.85rem; font-weight: 600;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
  opacity: 0; transform: translateY(12px); pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.site-toast .icon { color: var(--good); width: 18px; height: 18px; flex-shrink: 0; }
.site-toast.show { opacity: 1; transform: translateY(0); }

/* ===== Header ===== */
.maintenance-banner {
  background: linear-gradient(90deg, #7a4a1a, #9c5f1f);
  color: #fff2df;
  font-size: 0.88rem;
  font-weight: 600;
  text-align: center;
  padding: 10px 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-bottom: 1px solid rgba(0,0,0,0.2);
}
.maintenance-banner .icon { width: 16px; height: 16px; flex-shrink: 0; }

.site-header {
  border-bottom: 1px solid var(--iron-dim);
  background: linear-gradient(180deg, rgba(26,26,29,0.98), rgba(26,26,29,0.92));
  position: sticky;
  top: 0;
  z-index: 40;
  backdrop-filter: blur(6px);
}
.header-inner { display: flex; align-items: center; justify-content: space-between; padding: 14px 0; gap: 24px; }

.brand { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.brand-emoji.mascot-img { width: 38px; height: 38px; object-fit: contain; flex-shrink: 0; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5)); }
.mascot-img-inline { width: 1.3em; height: 1.3em; object-fit: contain; vertical-align: -0.35em; }
.brand-text { font-family: var(--font-display); font-weight: 600; font-size: 1.15rem; letter-spacing: 0.02em; line-height: 1.1; }
.brand-text .hl { color: var(--ember-bright); }
.brand-tagline { display: block; font-family: var(--font-body); font-size: 0.68rem; font-weight: 600; color: var(--bone-dim); letter-spacing: 0.22em; margin-top: 2px; }

.main-nav { display: flex; align-items: center; gap: 28px; flex: 1; justify-content: center; }
.main-nav a { font-size: 0.86rem; font-weight: 600; color: var(--bone-dim); letter-spacing: 0.02em; padding: 6px 2px; border-bottom: 2px solid transparent; }
.main-nav a:hover, .main-nav a.active { color: var(--bone); border-bottom-color: var(--ember); }

/* Interruptor de jogo — deixa claro qual dos jogos a pessoa está vendo
   agora, e permite trocar sem precisar voltar pro hub ("/") toda vez.
   Fica sempre visível (desktop e mobile), diferente do menu principal
   que some no mobile — trocar de jogo é uma ação importante o
   suficiente pra não ficar escondida atrás do botão hambúrguer. */
.game-switcher { position: relative; flex-shrink: 0; }
.game-switcher-btn {
  display: flex; align-items: center; gap: 6px; background: var(--panel); border: 1px solid var(--iron-dim);
  border-radius: 999px; padding: 6px 12px; color: var(--bone); font-size: 0.8rem; font-weight: 600; cursor: pointer;
}
.game-switcher-btn:hover { border-color: var(--gold-dim); }
.game-switcher-btn .icon { width: 14px; height: 14px; color: var(--bone-dim); }
.game-switcher-icon { width: 18px; height: 18px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.game-switcher-panel {
  position: absolute; top: calc(100% + 8px); left: 0; z-index: 45; min-width: 160px;
  background: var(--panel); border: 1px solid var(--iron-dim); border-radius: 8px; padding: 6px; box-shadow: 0 10px 24px rgba(0,0,0,0.4);
}
.game-switcher-panel a {
  display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-radius: 6px; font-size: 0.84rem; font-weight: 600; color: var(--bone-dim);
}
.game-switcher-panel a:hover { background: rgba(255,255,255,0.04); color: var(--bone); }
.game-switcher-panel a.current { color: var(--gold-bright); }

/* Botão de menu (☰) e painel de navegação mobile — escondidos por
   padrão (só aparecem na media query mobile, onde .main-nav some).
   Sem isso, no celular o site inteiro perdia o acesso a Pacotes,
   Ranking, Status e Bazar pelo cabeçalho — não sobrava nenhum jeito
   de chegar nessas páginas por ali. */
.mobile-nav-toggle {
  display: none; align-items: center; justify-content: center; width: 38px; height: 38px;
  background: none; border: 1px solid var(--iron-dim); border-radius: 6px; color: var(--bone); cursor: pointer;
  flex-shrink: 0;
}
.mobile-nav-toggle .icon { width: 20px; height: 20px; }
.mobile-nav-toggle:hover { border-color: var(--gold-dim); color: var(--gold-bright); }
.mobile-nav-panel {
  display: flex; flex-direction: column;
  background: var(--panel); border-top: 1px solid var(--iron-dim); border-bottom: 1px solid var(--iron-dim);
  padding: 6px 0;
}
.mobile-nav-panel[hidden] { display: none; } /* display:flex acima venceria o atributo hidden sem essa regra */
.mobile-nav-panel a {
  padding: 14px 20px; font-size: 0.94rem; font-weight: 600; color: var(--bone-dim);
  border-left: 3px solid transparent;
}
.mobile-nav-panel a:hover, .mobile-nav-panel a.active { color: var(--bone); border-left-color: var(--ember); background: rgba(255,255,255,0.03); }

.auth-area { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }
.link-muted { background: none; border: none; color: var(--bone-dim); font-size: 0.78rem; padding: 0; text-align: left; text-decoration: underline; }
.link-muted:hover { color: var(--bone); }

.btn {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid var(--iron);
  background: transparent;
  color: var(--bone);
  padding: 10px 18px;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  border-radius: 3px;
  transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn-ember { background: var(--ember); border-color: var(--ember); color: #fff5f2; }
.btn-ember:hover { background: var(--ember-bright); }
.btn-outline:hover { border-color: var(--ember); color: var(--ember-text); }
.btn-sm { padding: 7px 13px; font-size: 0.78rem; }

/* Botão desabilitado — antes não tinha NENHUMA diferença visual (nem
   o hover de levantar 1px era bloqueado), então um botão desabilitado
   parecia normal/clicável, só não fazia nada — bem confuso. Agora fica
   visivelmente apagado, cursor de "bloqueado", e pointer-events:none
   desliga qualquer hover/clique de vez (mais confiável que tentar
   sobrescrever cada regra de :hover uma por uma). */
.btn:disabled { opacity: 0.4; cursor: not-allowed; pointer-events: none; }
.btn-danger-outline { border-color: var(--ember-deep); color: #e08a7d; }
.btn-danger-outline:hover { border-color: var(--ember); background: rgba(184,35,47,0.1); color: var(--ember-text); }

/* User chip + dropdown */
.user-menu { position: relative; }
.user-chip {
  display: flex; align-items: center; gap: 9px;
  background: var(--panel); border: 1px solid var(--iron-dim);
  padding: 6px 12px 6px 8px; border-radius: 4px;
}
button.user-chip { cursor: pointer; }
button.user-chip:hover { border-color: var(--gold-dim); }
.user-avatar { width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--iron); display: block; }
.user-chip-name { font-size: 0.85rem; font-weight: 700; color: var(--bone); max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-chip .icon { color: var(--bone-dim); }

.badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 999px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.03em; margin-right: 4px; }
.badge .icon { width: 10px; height: 10px; flex-shrink: 0; }
.badge-pending, .badge-approved { background: rgba(217,154,61,0.16); color: #d99a3d; }
.badge-delivered, .badge-active { background: rgba(111,174,90,0.16); color: var(--good); }
.badge-cancelled, .badge-failed, .badge-inactive { background: rgba(224,138,125,0.16); color: #e08a7d; }
.badge-resolved { background: rgba(111,174,90,0.15); color: var(--good); }
.badge-resolved .icon { width: 9px; height: 9px; }

.gender-icon {
  position: absolute; bottom: -2px; right: -2px; width: 16px; height: 16px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-size: 0.72rem; font-weight: 700;
  border: 1.5px solid var(--void); line-height: 1;
}
.gender-m { background: #4a90d9; color: #fff; }
.gender-f { background: #d94a90; color: #fff; }
.gender-icon-inline { position: static; display: inline-flex; vertical-align: middle; }
.badge-role-admin { background: rgba(217,154,61,0.16); color: var(--warn); border: 1px solid var(--warn); }
.badge-role-support { background: rgba(112,150,210,0.16); color: #9dbbe6; border: 1px solid rgba(112,150,210,0.55); }

.badge-tier { border: 1px solid; }
.badge-discord-rank { background: rgba(209,162,79,0.16); color: var(--gold-bright); border: 1px solid var(--gold-dim); }
.badge-booster-inline {
  background: rgba(185,142,255,0.18); color: #b98eff; border: 1px solid #b98eff;
  display: inline-flex; align-items: center; gap: 4px;
}
.badge-booster-inline .icon { width: 11px; height: 11px; }

.badge-booster svg { width: 11px; height: 11px; }

.user-dropdown {
  position: absolute; top: calc(100% + 8px); right: 0;
  background: var(--panel-raised); border: 1px solid var(--iron-dim);
  min-width: 190px; padding: 6px; border-radius: 4px;
  box-shadow: 0 12px 28px rgba(0,0,0,0.5);
  display: flex; flex-direction: column; gap: 2px;
}
.user-dropdown a, .user-dropdown button {
  display: flex; align-items: center; gap: 10px;
  background: none; border: none; color: var(--bone);
  padding: 9px 10px; font-size: 0.84rem; text-align: left; border-radius: 3px; width: 100%;
}
.user-dropdown a:hover, .user-dropdown button:hover { background: var(--iron-dim); }
.user-dropdown .danger { color: #e08a7d; }
.user-dropdown .danger:hover { background: rgba(122,22,32,0.25); }

/* ===== Hero ===== */
.hero { position: relative; padding: 64px 0 0; border-bottom: 1px solid var(--iron-dim); overflow: hidden; min-height: 460px; }
.hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 72% 10%; z-index: 0; }
.hero-overlay {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(90deg, rgba(26,26,29,0.97) 0%, rgba(26,26,29,0.92) 28%, rgba(26,26,29,0.5) 58%, rgba(26,26,29,0.18) 100%),
    linear-gradient(0deg, rgba(26,26,29,0.96) 0%, rgba(26,26,29,0.55) 22%, rgba(26,26,29,0.15) 45%, rgba(26,26,29,0.35) 100%);
}

.hero-content { position: relative; z-index: 2; padding: 0 24px 40px; padding-left: max(24px, calc((100vw - 1160px) / 2 + 24px)); }
.eyebrow {
  font-family: var(--font-mono); color: var(--ember-text);
  font-size: 0.72rem; letter-spacing: 0.25em; margin: 0 0 14px; font-weight: 500;
}
.hero-title { font-family: var(--font-display); font-weight: 600; font-size: clamp(2rem, 4vw, 2.7rem); line-height: 1.14; margin: 0; letter-spacing: 0.01em; }
.hero-title .hl { color: var(--ember-bright); }
.hero-sub { max-width: 46ch; color: var(--bone-dim); font-size: 1rem; margin: 18px 0 28px; }
/* Mesmo visual do .hero-sub, mas com classe própria — a Conta usa essa
   frase pra descrever a própria página (pedidos/histórico), não é o
   hero de "destaques" que muda de texto por jogo (ver setupGameContent
   em main-core.js, que troca .hero-sub via querySelector). Reaproveitar a
   mesma classe fazia esse texto ser sobrescrito pelo texto do hero da
   loja toda vez que a página carregava. */
.pf-welcome-sub { max-width: 46ch; color: var(--bone-dim); font-size: 1rem; margin: 18px 0 28px; }
.hero-ctas { display: flex; gap: 14px; flex-wrap: wrap; }

/* ===== Features strip (por cima da imagem, na base do hero, centralizada como o resto do site) ===== */
/* flex + justify-content:center (não mais grid auto-fit) — com só 3
   itens agora (tirei o quarto card), o grid esticava as colunas pra
   preencher a largura toda do container, ficando bem espalhado. Flex
   deixa cada card do próprio tamanho e centraliza o grupo inteiro. */
.features-grid { position: relative; z-index: 2; max-width: 1160px; margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: center; gap: 24px 160px; padding: 30px 24px 34px; }
.feature-item { display: flex; align-items: center; gap: 14px; }
.feature-icon {
  width: 44px; height: 44px; flex-shrink: 0; border-radius: 50%;
  background: rgba(184,35,47,0.14); border: 1px solid var(--ember-deep);
  display: flex; align-items: center; justify-content: center; color: var(--ember-bright); font-size: 1.2rem;
}
.feature-title { font-weight: 700; font-size: 0.88rem; }
.feature-sub { font-size: 0.78rem; color: var(--bone-dim); }

/* ===== Section heading ===== */
.section-heading { display: flex; align-items: center; justify-content: center; gap: 16px; margin-bottom: 32px; text-align: center; }
.section-heading h2 { font-family: var(--font-display); font-weight: 600; font-size: 1.6rem; margin: 0; }
.section-heading .hl { color: var(--ember-bright); }
.section-heading .rule { width: 46px; height: 1px; background: var(--iron); }

/* ===== Packages ===== */
.packages-section { padding: 28px 0 72px; border-bottom: 1px solid var(--iron-dim); }
.packages-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 22px; }

.package-card {
  background: linear-gradient(180deg, var(--panel-raised) 0%, var(--panel) 55%);
  border: 1px solid var(--iron-dim); border-radius: 6px;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  position: relative; overflow: hidden; padding: 20px 20px 22px;
  transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.package-card:hover { transform: translateY(-3px); border-color: var(--gold-dim); box-shadow: 0 14px 28px rgba(0,0,0,0.35); }
.package-card.featured { border-color: var(--ember); box-shadow: 0 0 0 1px var(--ember), 0 16px 32px rgba(184,35,47,0.16); }
.package-card.best-seller { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold), 0 16px 32px rgba(209,162,79,0.16); }

/* Faixa de oferta por tempo limitada — sangra até a borda do card
   (margin negativo cancelando o padding do .package-card) pra ficar
   bem no topo, mais chamativa que os selinhos de canto abaixo. */
.limited-offer-banner {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  background: var(--ember); color: #fff5f2; font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.02em; padding: 7px 10px; margin: -20px -20px 14px;
  /* Sem position, um elemento em fluxo normal sempre é pintado ATRÁS de
     qualquer elemento posicionado (mesmo com z-index baixo) — é por
     isso que ficava atrás de .card-top-left (position:absolute,
     z-index:2), mesmo vindo primeiro no HTML. position:relative entra
     na mesma disputa de camadas sem sair do fluxo (continua empurrando
     o resto do card pra baixo normalmente). */
  position: relative; z-index: 3;
  /* .package-card é display:flex + align-items:center — sem isso, a
     faixa (um item flex igual aos outros) encolhia pro tamanho do
     texto/ícone em vez de esticar, então a cor só aparecia atrás da
     palavra, não de ponta a ponta do card. */
  align-self: stretch;
}
.limited-offer-banner svg { width: 13px; height: 13px; }
.limited-offer-banner.ending-soon { background: #b8232f; animation: limited-offer-pulse 1.4s ease-in-out infinite; }
.limited-offer-banner.ended { background: var(--iron); color: var(--bone-dim); animation: none; }
@keyframes limited-offer-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.72; }
}

.card-top-left { position: absolute; top: 10px; left: 10px; z-index: 2; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }

/* Com a faixa de oferta por tempo limitado ocupando o topo, os selinhos
   de canto (destaque/mais vendido/cargo exigido) precisam descer pra
   não ficar embaixo dela — como os dois usam position:absolute, eles
   não respeitam o fluxo normal sozinhos, tem que empurrar manualmente. */
.package-card.has-limited-offer .card-top-left { top: 44px; }

.featured-badge {
  background: var(--ember); color: #fff5f2; font-size: 0.68rem; font-weight: 700;
  letter-spacing: 0.04em; padding: 3px 8px; border-radius: 2px; text-transform: uppercase;
  box-shadow: 0 4px 10px rgba(0,0,0,0.4);
}

.bestseller-badge {
  background: var(--gold); color: #1a1310; font-size: 0.68rem; font-weight: 700;
  letter-spacing: 0.04em; padding: 3px 8px; border-radius: 2px; text-transform: uppercase;
  box-shadow: 0 4px 10px rgba(0,0,0,0.4);
  display: flex; align-items: center; gap: 4px;
}
.bestseller-badge svg { width: 10px; height: 10px; }

.rank-required-badge {
  background: var(--panel-raised); border: 1px solid var(--gold-dim); color: var(--gold-bright);
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.04em; padding: 3px 8px; border-radius: 2px;
  text-transform: uppercase; box-shadow: 0 4px 10px rgba(0,0,0,0.4); display: flex; align-items: center; gap: 4px;
}
.rank-required-badge svg { width: 10px; height: 10px; }


/* Coração de favoritar: discreto, à direita do botão de comprar (sem borda nem fundo até passar o mouse ou favoritar), para não
   competir com o "Adicionar". Centralizado na altura do botão de comprar em todos os cartões. */
.package-buy-row { display: flex; align-items: center; gap: 6px; width: 100%; margin-top: 14px; }
.package-buy-row .btn-buy { flex: 1; width: auto; min-width: 0; margin-top: 0; padding-left: 10px; padding-right: 10px; gap: 6px; }
.favorite-btn {
  flex: 0 0 34px; width: 34px; height: 34px; border-radius: 50%;
  background: transparent; border: 1px solid transparent; color: var(--bone-dim);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease, transform 0.15s ease;
}
.favorite-btn .icon { width: 17px; height: 17px; }
.favorite-btn:hover { color: var(--ember-text); background: rgba(184, 35, 47, 0.1); }
.favorite-btn:active { transform: scale(0.9); }
.favorite-btn.active { color: var(--ember-bright); }
.favorite-btn.active .icon { filter: drop-shadow(0 0 4px rgba(226, 50, 63, 0.6)); }
.favorite-btn:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 1px; }
.favorite-btn:disabled { opacity: 0.6; cursor: wait; }
@media (pointer: coarse) {
  .favorite-btn { flex-basis: 40px; width: 40px; height: 40px; }
}

.package-card.best-seller .package-icon { border-color: var(--gold); box-shadow: 0 0 0 3px var(--panel), 0 0 0 4px var(--gold-dim), inset 0 2px 6px rgba(0,0,0,0.5); }
.package-card.best-seller .package-name { color: var(--gold-bright); }
.package-card.best-seller .package-price { color: var(--gold-bright); }

/* Medalhão do ícone/imagem — círculo com anel dourado, como um selo. Emoji
   e ícone padrão ficam centralizados sobre um brilho radial; imagem/gif
   preenche o círculo inteiro (object-fit: cover corta sem distorcer). */
.package-icon {
  width: 84px; height: 84px; border-radius: 50%; flex-shrink: 0; margin-bottom: 12px;
  position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden;
  background: radial-gradient(60% 60% at 50% 40%, rgba(209,162,79,0.18), var(--void) 75%);
  border: 2px solid var(--gold-dim);
  box-shadow: 0 0 0 3px var(--panel), 0 0 0 4px var(--iron-dim), inset 0 2px 6px rgba(0,0,0,0.5);
}
.package-card.featured .package-icon { border-color: var(--ember); box-shadow: 0 0 0 3px var(--panel), 0 0 0 4px var(--ember-deep), inset 0 2px 6px rgba(0,0,0,0.5); }
.package-icon img { width: 100%; height: 100%; object-fit: cover; display: block; }
.package-icon .banner-emoji { font-size: 40px; line-height: 1; filter: drop-shadow(0 3px 6px rgba(0,0,0,0.6)); }
.package-icon .banner-default-icon { width: 38px; height: 38px; color: var(--gold-bright); }

.package-name { font-family: var(--font-display); font-weight: 600; font-size: 1.1rem; margin: 0; letter-spacing: 0.02em; }
.package-card.featured .package-name { color: var(--ember-bright); }
.package-desc { color: var(--bone-dim); font-size: 0.84rem; margin: 6px 0 0; }

.package-contents { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; align-self: stretch; }
.package-contents li { font-size: 0.82rem; color: var(--bone-dim); display: flex; align-items: flex-start; gap: 8px; text-align: left; }
.package-contents li::before { content: ''; width: 4px; height: 4px; border-radius: 50%; background: var(--gold); flex-shrink: 0; margin-top: 7px; }

/* Agrupa "leia mais" + preço + botão de comprar sempre no final do
   card, na mesma posição entre cards vizinhos — sem isso, um card com
   descrição/lista maior empurrava esses elementos mais pra baixo que
   os cards ao lado, ficando desalinhado na mesma linha do grid. */
.package-card-footer { margin-top: auto; display: flex; flex-direction: column; align-items: center; width: 100%; }

.package-contents.pd-items-grid {
  display: grid; grid-template-columns: repeat(auto-fill, 116px); gap: 10px; width: 100%;
  justify-content: center;
}
.pd-item-card {
  width: 116px; box-sizing: border-box; background: var(--panel); border: 1px solid var(--iron-dim); border-radius: 8px;
  padding: 12px 10px; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center;
  transition: border-color 0.15s ease;
}
.pd-item-card:hover { border-color: var(--gold-dim); }
.package-contents.pd-items-grid li.pd-item-card {
  align-items: center; text-align: center; justify-content: flex-start;
}
.package-contents.pd-items-grid li.pd-item-card::before { content: none; }
.pd-item-name {
  font-size: 0.72rem; font-weight: 600; color: var(--bone); line-height: 1.2; width: 100%;
  min-height: 2.4em; display: flex; align-items: center; justify-content: center;
}
.pd-item-icon {
  width: 42px; height: 42px; border-radius: 6px; background: var(--void); border: 1px solid var(--iron);
  display: flex; align-items: center; justify-content: center; overflow: hidden; font-size: 1.3rem; position: relative;
}
.pd-item-icon img { width: 100%; height: 100%; object-fit: contain; }
.pd-item-qty { font-family: var(--font-mono); font-size: 0.72rem; color: var(--gold-bright); font-weight: 600; white-space: nowrap; }

.pd-category-header {
  grid-column: 1 / -1; font-family: var(--font-display); font-size: 0.78rem; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--gold-bright); border-bottom: 1px solid var(--iron-dim);
  padding-bottom: 6px; margin: 14px 0 2px;
}
.pd-category-header:first-child { margin-top: 0; }
.pd-category-header::before { content: none; }

.package-price { font-family: var(--font-mono); font-size: 1.35rem; font-weight: 500; color: var(--bone); margin: 0; padding-top: 6px; }
.package-card.featured .package-price { color: var(--ember-bright); }
.package-price-free { color: var(--good); font-size: 1.15rem; letter-spacing: 0.03em; }
.package-price-kit { color: var(--gold-bright); font-size: 0.92rem; font-family: var(--font-body); font-weight: 600; }
.free-remaining { font-size: 0.72rem; color: var(--bone-dim); margin-top: 2px; }
.free-remaining-personal { color: var(--gold-text); }
.personal-limit-hint { font-size: 0.76rem; color: var(--ember-text); margin: 4px 0 0; }
.package-price-booster { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.package-price-booster-row { display: flex; align-items: baseline; justify-content: center; gap: 5px; }
.booster-price-gem { width: 26px; height: 26px; align-self: center; }
.booster-gem-inline { width: 14px; height: 14px; vertical-align: -3px; }
.booster-gem-inline-sm { width: 9px; height: 9px; vertical-align: -1px; }
.booster-gem-inline-lg { width: 20px; height: 20px; vertical-align: -5px; }
/* Precisa bater a regra ".player-list-card-row img" (admin.css), que
   pega QUALQUER imagem na linha (o avatar redondo de 34px) e teria
   especificidade maior que só ".booster-gem-inline-sm" sozinha —
   sem isso a joia saía do tamanho do avatar, redonda e com borda. */
.player-list-card-row img.booster-gem-inline-sm { width: 15px; height: 15px; border-radius: 0; border: none; }

/* Brilho pulsante roxo em toda imagem da joia de booster (gem.png) —
   um único ponto de manutenção em vez de repetir a animação em cada
   classe/página que usa o ícone. NÃO inclui ".ranking-booster-icon" de
   propósito — esse ícone fica dentro de um container com
   overflow:hidden (necessário pro nome comprido cortar com "..."), que
   corta o brilho do drop-shadow no meio, virando um quadrado feio em
   vez de um brilho suave. */
.booster-price-gem,
.booster-gem-inline,
.badge-booster-inline img,
.booster-perks-icon img {
  animation: boosterGemGlow 2.4s ease-in-out infinite;
}
@keyframes boosterGemGlow {
  0%, 100% { filter: drop-shadow(0 0 2px rgba(185,142,255,0.55)); }
  50% { filter: drop-shadow(0 0 7px rgba(185,142,255,0.95)); }
}
.price-original { font-size: 0.82rem; color: var(--bone-dim); text-decoration: line-through; }
.booster-perk-tag {
  font-size: 0.72rem; font-weight: 600; color: #b98eff;
  background: rgba(185,142,255,0.18); border: 1px solid #b98eff;
  border-radius: 999px; padding: 1px 8px; white-space: nowrap;
}

/* ===== Página de catálogo (/pacotes.html) ===== */
.catalog-header { padding: 56px 0 32px; border-bottom: 1px solid var(--iron-dim); text-align: center; }
.catalog-header-compact { padding: 30px 0 18px; }
.catalog-header-compact .catalog-title { font-size: clamp(1.4rem, 3vw, 1.8rem); margin: 6px 0 6px; }
.catalog-header-compact .catalog-sub { font-size: 0.86rem; }
.catalog-title { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.7rem, 4vw, 2.3rem); margin: 8px 0 10px; }
.catalog-sub { color: var(--bone-dim); max-width: 52ch; margin: 0 auto; }

.catalog-section { padding: 40px 0 80px; }
.support-section { padding: 24px 0 48px; }
.catalog-search-wrap {
  position: relative; max-width: 420px; margin: 0 auto 24px;
}
.catalog-search-wrap .icon {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  color: var(--bone-dim); width: 16px; height: 16px; pointer-events: none;
}
.catalog-search-input {
  width: 100%; background: var(--panel); border: 1px solid var(--iron-dim); color: var(--bone);
  padding: 11px 14px 11px 38px; border-radius: 999px; font-size: 0.88rem; font-family: var(--font-body);
}
.catalog-search-input:focus { border-color: var(--gold-dim); }
.catalog-search-input::placeholder { color: var(--bone-dim); }

.category-tabs { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-bottom: 36px; }
.category-tab {
  background: var(--panel); border: 1px solid var(--iron-dim); color: var(--bone-dim);
  padding: 9px 18px; border-radius: 999px; font-size: 0.84rem; font-weight: 600;
}
.category-tab:hover { border-color: var(--gold-dim); color: var(--bone); }
.category-tab.active { background: var(--ember); border-color: var(--ember); color: #fff5f2; }

@media (max-width: 520px) {
  .rank-row { grid-template-columns: 30px 40px 1fr auto; gap: 10px; padding: 12px 14px; }
  .rank-avatar { width: 40px; height: 40px; }
  .rank-username { font-size: 0.86rem; }
  .rank-amount { font-size: 0.9rem; }
}

.package-more-btn {
  background: none; border: none; color: var(--gold-bright); font-size: 0.76rem; font-weight: 600;
  text-decoration: underline; padding: 0; margin-top: 6px; cursor: pointer;
}
.package-more-btn:hover { color: var(--ember-text); }

.btn-buy {
  width: 100%; margin-top: 14px;
  background: linear-gradient(180deg, var(--ember-bright), var(--ember)); border: 1px solid var(--ember); color: #fff5f2;
  padding: 11px 16px; font-weight: 700; font-size: 0.85rem; letter-spacing: 0.02em; border-radius: 3px;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  box-shadow: 0 4px 12px rgba(184,35,47,0.3);
}
.btn-buy:hover { background: var(--ember-bright); }
.btn-buy:disabled { opacity: 0.5; cursor: not-allowed; }
/* Sem isso o ícone herdava só 1em do texto do botão (~13.6px) — e o
   carrinho especificamente tem bem mais espaço vazio ao redor do
   desenho do que os outros ícones (só ~26% da tela é "tinta", contra
   ~33% do check-circle), então nesse tamanho pequeno ele quase
   desaparecia. 16px dá espaço suficiente pra ler o desenho mesmo com
   essa margem extra do arquivo. */
.btn-buy .icon { width: 16px; height: 16px; flex-shrink: 0; }

.empty-state, .error-state { grid-column: 1 / -1; color: var(--bone-dim); font-size: 0.9rem; padding: 32px 0; text-align: center; }

/* ===== Como funciona ===== */
.steps-section { padding: 72px 0; border-bottom: 1px solid var(--iron-dim); }
.steps-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 24px; }
.step-card { background: var(--panel); border: 1px solid var(--iron-dim); border-radius: 4px; padding: 24px; }
.step-num {
  width: 34px; height: 34px; border-radius: 50%; background: var(--ember); color: #fff5f2;
  display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-weight: 700;
  margin-bottom: 14px;
}
.step-title { font-weight: 700; margin: 0 0 6px; font-size: 0.95rem; }
.step-desc { color: var(--bone-dim); font-size: 0.84rem; margin: 0; }

/* ===== Contato ===== */
.contact-section { padding: 72px 0; border-bottom: 1px solid var(--iron-dim); }
.contact-card {
  background: var(--panel); border: 1px solid var(--iron-dim); border-radius: 4px;
  padding: 36px; text-align: center; max-width: 560px; margin: 0 auto;
}
.contact-card p { color: var(--bone-dim); margin: 8px 0 22px; }

/* ===== FAQ ===== */
.faq-section { padding: 72px 0; }
.faq-list { max-width: 720px; margin: 0 auto; display: flex; flex-direction: column; gap: 10px; }
.faq-item { background: var(--panel); border: 1px solid var(--iron-dim); border-radius: 4px; }
.faq-item summary {
  padding: 16px 20px; cursor: pointer; font-weight: 600; font-size: 0.92rem;
  display: flex; align-items: center; justify-content: space-between; list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: '+'; color: var(--ember-text); font-size: 1.1rem; }
.faq-item[open] summary::after { content: '–'; }
.faq-item .faq-answer { padding: 0 20px 18px; color: var(--bone-dim); font-size: 0.86rem; }

/* ===== Footer ===== */
.site-footer { border-top: 1px solid var(--iron-dim); padding: 26px 0; color: var(--bone-dim); font-size: 0.78rem; text-align: center; }
.footer-link { display: inline-block; margin-top: 8px; color: var(--bone-dim); text-decoration: underline; font-size: 0.76rem; }
.footer-link:hover { color: var(--gold-bright); }

/* ===== Termos de Uso / Privacidade ===== */
.legal-section { max-width: 780px; margin: 0 auto; }
.legal-toc {
  display: flex; gap: 20px; flex-wrap: wrap; margin-bottom: 32px; padding-bottom: 16px;
  border-bottom: 1px solid var(--iron-dim);
}
.legal-toc a { color: var(--gold-bright); font-size: 0.88rem; font-weight: 600; }
.legal-toc a:hover { text-decoration: underline; }
.legal-article h2 {
  font-family: var(--font-display); font-size: 1.5rem; margin: 40px 0 16px;
  padding-top: 8px; border-top: 1px solid var(--iron-dim);
}
.legal-article h2:first-child { border-top: none; padding-top: 0; margin-top: 0; }
.legal-article h3 { font-size: 1rem; margin: 22px 0 8px; color: var(--gold-bright); }
.legal-article p { font-size: 0.9rem; line-height: 1.7; color: var(--bone-dim); margin: 0 0 4px; }
.legal-article p strong { color: var(--bone); }
.legal-article a { color: var(--gold-bright); text-decoration: underline; }
.legal-list { margin: 8px 0 4px; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; }
.legal-list li { font-size: 0.9rem; line-height: 1.6; color: var(--bone-dim); }
.legal-list li strong { color: var(--bone); }
.legal-contact {
  margin-top: 36px; padding-top: 20px; border-top: 1px solid var(--iron-dim);
  text-align: center; font-size: 0.9rem; color: var(--bone-dim);
}

/* ===== SteamID banner (reutilizado na loja e na conta) ===== */
.tablet-notice {
  background: var(--panel); border: 1px solid var(--iron-dim); border-left: 3px solid var(--ember);
  padding: 20px 24px; display: flex; flex-wrap: wrap; align-items: center; gap: 20px;
}
.tablet-notice p { margin: 0; font-size: 0.92rem; }
#steamid-auto-wrap { margin-left: auto; }
.steamid-auto-code-row { display: flex; align-items: center; gap: 8px; }
.player-copy-btn {
  width: 30px; height: 30px; border-radius: 6px; background: var(--void); border: 1px solid var(--iron-dim);
  color: var(--bone-dim); cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.player-copy-btn:hover { border-color: var(--gold-dim); color: var(--gold-bright); }
.player-copy-btn.copied { border-color: var(--good); color: var(--good); }
.player-copy-btn .icon { width: 13px; height: 13px; }
.help-tooltip-wrap { position: relative; display: inline-flex; vertical-align: middle; }
.help-tooltip-icon {
  display: inline-flex; align-items: center; justify-content: center; width: 17px; height: 17px;
  border-radius: 50%; border: 1px solid var(--bone-dim); color: var(--bone-dim); font-size: 0.72rem;
  font-weight: 700; cursor: help; margin-left: 4px;
}
.help-tooltip-icon:hover { border-color: var(--ember-bright); color: var(--ember-text); }
.help-tooltip-box {
  position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%);
  width: 260px; background: var(--panel-raised); border: 1px solid var(--ember-deep); border-radius: 8px;
  padding: 12px 14px; font-size: 0.78rem; line-height: 1.5; color: var(--bone); font-weight: 400;
  box-shadow: 0 12px 28px rgba(0,0,0,0.5); z-index: 30; opacity: 0; visibility: hidden;
  transition: opacity 0.15s ease; pointer-events: none;
}
.help-tooltip-wrap:hover .help-tooltip-box { opacity: 1; visibility: visible; }
.help-tooltip-box::after {
  content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  border: 6px solid transparent; border-top-color: var(--ember-deep);
}
#steamid-auto-pending {
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
  background: var(--void); border: 1px solid var(--iron-dim); border-radius: 10px; padding: 16px 20px;
}
#steamid-auto-pending-info { display: flex; flex-direction: column; gap: 6px; }
.steamid-auto-code {
  font-family: var(--font-mono); font-size: 1.8rem; font-weight: 600; letter-spacing: 0.35em;
  color: var(--ember-text); background: var(--panel); border: 1px solid var(--ember-deep); border-radius: 8px;
  padding: 12px 16px; text-align: center; margin: 0; width: fit-content;
}
/* Copiar código, aqui dentro do card do código — vermelho igual o
   resto do sistema de vincular, mesmo o .player-copy-btn base (usado
   em vários outros lugares do site) continuando dourado no hover. */
.steamid-auto-code-row .player-copy-btn:hover { border-color: var(--ember-deep); color: var(--ember-text); }
.funcomid-locked-note {
  display: flex; align-items: center; gap: 8px; font-size: 0.84rem; color: var(--good);
}
.funcomid-locked-note .icon { width: 15px; height: 15px; flex-shrink: 0; }

/* Escolha de método de vínculo (chat vs nome) — antes era um botão
   sólido de destaque ("Gerar código") ao lado de um botão bem menor e
   discreto ("Joga no console?"), o que dava a impressão de "ação
   principal + opção escondida" em vez de "duas formas igualmente
   válidas de fazer a mesma coisa". Agora os dois são cartões do MESMO
   tamanho e peso visual, lado a lado, cada um com ícone + nome do
   método + uma linha bem curta explicando pra quem serve — fica claro
   de cara que é uma escolha, não um botão principal com uma nota de
   rodapé ao lado. */
/* flex (não grid) — lado a lado sempre, sem empilhar. flex-basis: 0
   (em vez de só "flex: 1") garante que os dois cartões dividam o
   espaço em partes IGUAIS, ignorando o conteúdo de cada um — sem isso,
   o "CONSOLES" do badge (mais largo que "PC") podia puxar um cartão
   pra ficar mais largo que o outro, mudando onde cada descrição
   quebrava linha e deixando um título mais alto que o outro. */
.verify-method-choices { display: flex; gap: 10px; }
.verify-method-choice {
  display: flex; align-items: flex-start; gap: 12px; text-align: left; flex: 1 1 0; min-width: 0;
  background: linear-gradient(160deg, rgba(184, 35, 47, 0.12) 0%, var(--panel) 60%);
  border: 1px solid rgba(184, 35, 47, 0.32); border-radius: 10px;
  padding: 12px 16px; cursor: pointer; transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;
}
.verify-method-choice:hover {
  border-color: var(--ember-bright); transform: translateY(-1px);
  background: linear-gradient(160deg, rgba(184, 35, 47, 0.22) 0%, var(--panel) 60%);
}
.verify-method-choice-icon {
  width: 34px; height: 34px; flex-shrink: 0; border-radius: 50%;
  background: rgba(184, 35, 47, 0.18); border: 1px solid var(--ember-deep);
  display: flex; align-items: center; justify-content: center;
}
.verify-method-choice-icon .icon { width: 17px; height: 17px; color: var(--ember-bright); }
.verify-method-choice-text { display: flex; flex-direction: column; gap: 2px; }
.verify-method-choice-title { display: flex; align-items: center; gap: 7px; font-size: 0.86rem; font-weight: 700; color: var(--bone); }
.verify-method-choice-sub { font-size: 0.73rem; color: var(--bone-dim); line-height: 1.3; }
.verify-method-badge {
  font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em;
  background: rgba(184, 35, 47, 0.2); color: var(--ember-text); padding: 2px 7px; border-radius: 999px;
}

/* Painel do formulário em si — um cartão próprio, separado visualmente
   do fluxo por código acima (não é só mais um parágrafo solto no meio
   do banner). */
.console-verify-panel {
  margin-top: 14px; padding: 16px 18px; background: var(--void);
  border: 1px solid var(--iron-dim); border-radius: 10px; max-width: 380px;
}
.console-verify-heading {
  display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font-weight: 600; font-size: 0.86rem; color: var(--bone);
}
.console-verify-heading .icon { width: 16px; height: 16px; color: var(--ember-bright); flex-shrink: 0; }
.console-verify-input-label { display: block; font-size: 0.78rem; color: var(--bone-dim); margin-bottom: 6px; }
.console-verify-input {
  display: block; width: 100%; background: var(--panel); border: 1px solid var(--iron-dim); color: var(--bone);
  padding: 10px 12px; font-size: 0.92rem; border-radius: 6px;
}
.console-verify-input:focus { border-color: var(--ember-bright); outline: none; }
.console-verify-input::placeholder { color: var(--bone-dim); opacity: 0.6; }
.console-verify-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 12px; }
.console-verify-waiting { color: var(--bone-dim); }

@media (max-width: 860px) {
  .main-nav { display: none; }
  .header-inner { gap: 10px; }
  .brand-tagline { display: none; } /* decorativo, primeiro a sair quando o espaço aperta */
  .auth-area { gap: 8px; }
  /* Botão de menu (☰) só aparece aqui — no desktop o menu já mostra
     todos os links direto, não precisa de botão nenhum. */
  .mobile-nav-toggle { display: flex; }
  .game-switcher-btn { padding: 6px 9px; font-size: 0.74rem; }
  .hero-content { max-width: 100%; }
  .hero-overlay {
    background:
      linear-gradient(90deg, rgba(26,26,29,0.94) 0%, rgba(26,26,29,0.8) 100%),
      linear-gradient(0deg, rgba(26,26,29,0.97) 0%, rgba(26,26,29,0.55) 30%, rgba(26,26,29,0.4) 100%);
  }
}

@media (max-width: 420px) {
  /* Em telas bem estreitas, mesmo com fonte menor, "Conan Exiles" +
     hambúrguer + avatar não cabem numa linha só — troca pro nome curto
     do jogo (só "Conan"/"Palworld"), que o JS já grava num atributo
     separado pra não perder o nome completo no menu que abre. */
  #game-switcher-current { font-size: 0; }
  #game-switcher-current::after { content: attr(data-short); font-size: 0.74rem; }
}
/* Telas bem pequenas (a maioria dos celulares) — o nome do Discord some
   do cabeçalho (fica só o avatar+seta), abrindo espaço pro carrinho e
   sino não brigarem por espaço com ele. */
@media (max-width: 420px) {
  .user-chip-name { display: none; }
  .user-chip { padding: 6px 8px; }
  .brand-text { font-size: 1rem; }
}
@media (max-width: 640px) {
  #steamid-auto-pending { flex-direction: column; align-items: flex-start; }
}

/* ===== Carrinho ===== */
.cart-btn {
  position: relative; background: none; border: 1px solid var(--iron-dim); color: var(--bone);
  width: 40px; height: 40px; border-radius: 4px; display: flex; align-items: center; justify-content: center;
}
.cart-btn:hover { border-color: var(--ember); color: var(--ember-text); }
.cart-count {
  position: absolute; top: -6px; right: -6px; background: var(--ember); color: #fff5f2;
  font-size: 0.68rem; font-weight: 700; min-width: 17px; height: 17px; border-radius: 999px;
  display: flex; align-items: center; justify-content: center; padding: 0 4px; font-family: var(--font-mono);
}

.notif-wrap { position: relative; }
.notif-panel {
  position: absolute; top: calc(100% + 10px); right: 0; width: 320px; max-height: 400px; overflow-y: auto;
  background: var(--panel-raised); border: 1px solid var(--iron-dim); border-radius: 8px;
  box-shadow: 0 16px 40px rgba(0,0,0,0.5); z-index: 60;
}
.notif-panel-head { padding: 14px 16px; font-weight: 700; font-size: 0.88rem; border-bottom: 1px solid var(--iron-dim); }
.notif-panel-list { display: flex; flex-direction: column; }
.notif-item {
  display: flex; flex-direction: column; gap: 3px; padding: 12px 16px; text-align: left;
  background: none; border: none; border-bottom: 1px solid var(--iron-dim); color: inherit; cursor: pointer;
  font-family: inherit; width: 100%;
}
.notif-item:last-child { border-bottom: none; }
.notif-item:hover { background: rgba(209,162,79,0.06); }
.notif-item-title { font-size: 0.84rem; font-weight: 600; display: flex; align-items: center; gap: 6px; }
.notif-item-title .icon { width: 13px; height: 13px; color: var(--gold-bright); flex-shrink: 0; }
.notif-item-sub { font-size: 0.74rem; color: var(--bone-dim); }
.notif-item-sub-wrap { white-space: normal; line-height: 1.4; }
.notif-item-announcement { cursor: default; }
.notif-item-announcement:hover { background: none; }
.notif-panel-empty { padding: 24px 16px; text-align: center; font-size: 0.84rem; color: var(--bone-dim); }

.cart-drawer[hidden] { display: none !important; }
.cart-drawer { position: fixed; inset: 0; z-index: 90; }
.cart-drawer-backdrop { position: absolute; inset: 0; background: rgba(14,14,16,0.7); }
.cart-drawer-panel {
  position: absolute; top: 0; right: 0; height: 100%; width: min(400px, 100%);
  background: var(--panel-raised); border-left: 1px solid var(--iron-dim);
  display: flex; flex-direction: column; padding: 22px; gap: 16px; overflow: hidden;
  animation: cart-slide-in 0.2s ease;
}
/* O passo base do carrinho (itens + servidor + resumo + botão) agora
   fica dentro de um wrapper próprio, pra poder ser escondido inteiro
   quando avança pros outros passos (confirmação, CPF, vínculo de
   FuncomID) — antes ficava tudo empilhado ao mesmo tempo, crescendo
   sem parar. Precisa do mesmo flex+gap que o painel pai tinha, senão
   os itens de dentro perdem o espaçamento uniforme entre eles. */
/* Itens do carrinho — sempre visíveis, com rolagem própria, ocupando
   todo o espaço que sobrar depois do rodapé (que tem tamanho fixo). */
.cart-footer { display: flex; flex-direction: column; gap: 16px; flex-shrink: 0; padding-top: 14px; border-top: 1px solid var(--iron-dim); }
#cart-footer-step1 { display: flex; flex-direction: column; gap: 16px; }
.cart-items { display: flex; flex-direction: column; gap: 10px; flex: 1; min-height: 0; overflow-y: auto; }
@keyframes cart-slide-in { from { transform: translateX(100%); } to { transform: translateX(0); } }

.cart-drawer-head { display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; }
.cart-drawer-head h3 { font-family: var(--font-display); font-size: 1.05rem; margin: 0; display: flex; align-items: center; gap: 10px; }
.cart-close { background: none; border: none; color: var(--bone-dim); font-size: 1.6rem; line-height: 1; padding: 0; }
.cart-close:hover { color: var(--ember-text); }


.cart-item {
  display: grid; grid-template-columns: 40px 1fr auto auto; align-items: center; gap: 12px;
  padding: 10px; border: 1px solid var(--iron-dim); border-radius: 5px; font-size: 0.85rem;
  background: var(--panel);
}
.cart-item-thumb {
  width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0; overflow: hidden;
  background: radial-gradient(60% 60% at 50% 40%, rgba(209,162,79,0.18), var(--void) 75%);
  border: 1px solid var(--gold-dim);
  display: flex; align-items: center; justify-content: center;
}
.cart-item-thumb img { width: 100%; height: 100%; object-fit: cover; }
.cart-item-thumb .icon { width: 18px; height: 18px; color: var(--gold-bright); }
.cart-item-emoji { font-size: 18px; line-height: 1; }
.cart-item-name { font-weight: 600; line-height: 1.25; }
.cart-item-price { font-size: 0.72rem; color: var(--bone-dim); margin-top: 2px; }
.cart-item-kit-summary { white-space: normal; line-height: 1.4; }
.cart-item-qty {
  display: flex; align-items: center; gap: 6px; font-family: var(--font-mono);
  background: var(--void); border: 1px solid var(--iron-dim); border-radius: 999px; padding: 3px;
}
.cart-item-qty button {
  width: 22px; height: 22px; border-radius: 50%; background: none; border: none; color: var(--bone);
  display: flex; align-items: center; justify-content: center; font-size: 0.95rem;
}
.cart-item-qty button:hover { background: var(--ember); color: #fff5f2; }
.cart-item-qty span { min-width: 18px; text-align: center; font-size: 0.82rem; }
.cart-item-right { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.cart-item-total { font-family: var(--font-mono); font-size: 0.82rem; white-space: nowrap; }
.cart-item-remove { background: none; border: none; color: var(--bone-dim); padding: 0; display: flex; }
.cart-item-remove .icon { width: 15px; height: 15px; }
.cart-item-remove:hover { color: #e08a7d; }
.cart-item-kit-actions { display: flex; align-items: center; gap: 10px; margin-top: 4px; }
.cart-item-edit { background: none; border: none; color: var(--bone-dim); padding: 0; display: flex; cursor: pointer; }
.cart-item-edit .icon { width: 15px; height: 15px; }
.cart-item-edit:hover { color: var(--gold-bright); }

.cart-server-select { display: flex; flex-direction: column; gap: 6px; }
.cart-server-select label { font-size: 0.76rem; color: var(--bone-dim); font-weight: 600; }
.cart-server-select select {
  background: var(--void); border: 1px solid var(--iron-dim); color: var(--bone);
  padding: 9px 11px; font-family: var(--font-body); font-size: 0.86rem; border-radius: 3px;
}
.cart-server-select select:focus { border-color: var(--ember); }

.server-options { display: flex; flex-direction: column; gap: 8px; }
.server-option {
  display: flex; align-items: center; gap: 10px;
  background: var(--void); border: 1px solid var(--iron-dim); border-radius: 5px;
  padding: 11px 14px; color: var(--bone-dim); font-size: 0.86rem; font-weight: 600;
  text-align: left; position: relative;
}
.server-option .icon { width: 18px; height: 18px; flex-shrink: 0; color: var(--bone-dim); }
.server-option:hover { border-color: var(--gold-dim); color: var(--bone); }
.server-option.active { border-color: var(--ember); background: rgba(184,35,47,0.1); color: var(--bone); }
.server-option.active .icon { color: var(--ember-bright); }
.server-option.active::after {
  content: '✓'; position: absolute; right: 14px; color: var(--ember-text); font-weight: 700;
}

.cashback-toggle {
  display: flex; align-items: center; gap: 8px; font-size: 0.82rem; color: var(--bone-dim);
  background: rgba(209,162,79,0.08); border: 1px solid var(--gold-dim); border-radius: 5px; padding: 9px 11px;
  cursor: pointer;
}
.cashback-toggle input { width: auto; accent-color: var(--gold); }
.cashback-toggle strong { color: var(--gold-bright); }

.cart-coupon { display: flex; gap: 8px; }
.cart-coupon input {
  flex: 1; background: var(--void); border: 1px solid var(--iron-dim); color: var(--bone);
  padding: 9px 11px; font-family: var(--font-mono); font-size: 0.82rem; border-radius: 3px; text-transform: uppercase;
}
.cart-coupon input:focus { border-color: var(--ember); }
.coupon-feedback { font-size: 0.78rem; margin: -8px 0 0; }
.coupon-feedback.coupon-success { color: var(--good); }
.coupon-feedback.coupon-error { color: #e08a7d; }

.cart-summary { border-top: 1px solid var(--iron-dim); padding-top: 12px; display: flex; flex-direction: column; gap: 6px; }
.cart-summary-row { display: flex; justify-content: space-between; font-size: 0.86rem; color: var(--bone-dim); }
.cart-summary-row.discount-row { color: var(--good); }
.cart-summary-row.total-row { color: var(--bone); font-weight: 700; font-size: 1.05rem; font-family: var(--font-mono); }

.cart-checkout-btn { width: 100%; justify-content: center; }
.cart-checkout-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* ===== Modal (base compartilhada — usada pelo admin e pelo Pix) ===== */
.modal-backdrop[hidden] { display: none !important; }
.modal-backdrop {
  position: fixed; inset: 0; background: rgba(14,14,16,0.82);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 48px 20px; overflow-y: auto; z-index: 100;
}
.modal-card {
  background: var(--panel-raised); border: 1px solid var(--iron-dim); border-radius: 10px;
  padding: 32px 36px; width: 100%; max-width: 620px;
  display: flex; flex-direction: column; gap: 18px;
  box-shadow: 0 24px 64px rgba(0,0,0,0.5);
  position: relative;
}
.modal-card.modal-card-lg { max-width: 820px; }
.modal-card h3 {
  font-family: var(--font-display); font-size: 1.3rem; margin: 0 0 4px;
  display: flex; align-items: center; gap: 10px;
  padding-bottom: 14px; padding-right: 32px; border-bottom: 1px solid var(--iron-dim);
}
.modal-card label { display: flex; flex-direction: column; gap: 7px; font-size: 0.86rem; color: var(--bone-dim); font-weight: 500; }
.modal-card input, .modal-card textarea, .modal-card select {
  background: var(--void); border: 1px solid var(--iron-dim); color: var(--bone);
  padding: 11px 13px; font-family: var(--font-body); font-size: 0.92rem; border-radius: 5px;
}
.modal-card textarea { font-family: var(--font-mono); font-size: 0.82rem; resize: vertical; }
.modal-card textarea[readonly] { background: rgba(0,0,0,0.25); color: var(--bone-dim); cursor: default; }
.modal-card input:focus, .modal-card textarea:focus, .modal-card select:focus { border-color: var(--ember); }
.modal-actions { display: flex; justify-content: flex-end; gap: 12px; margin-top: 8px; padding-top: 18px; border-top: 1px solid var(--iron-dim); }
.modal-close {
  background: none; border: none; color: var(--bone-dim); font-size: 1.6rem; line-height: 1;
  cursor: pointer; padding: 0 4px; flex-shrink: 0;
}
.modal-close:hover { color: var(--bone); }
.modal-card h3 .modal-close {
  position: absolute; top: 20px; right: 20px; margin-left: 0;
}

/* ===== Central de tickets (suporte.html) — layout dividido ===== */
.login-required-state {
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  padding: 48px 20px; text-align: center; color: var(--bone-dim);
}
.login-required-state .icon { width: 36px; height: 36px; color: var(--gold-text); }
.login-required-state p { font-size: 0.95rem; max-width: 360px; }

/* ===== Suporte: tela travada, mesmo padrão do bazar (ver bazar.css) —
   body vira flex column de altura fixa (100vh), cabeçalho do site não
   encolhe, e o conteúdo ocupa TODO o resto sem precisar rolar a
   página. Isolado por [data-page="suporte"], não afeta nenhuma outra
   página (o admin usa outra estrutura de body, nem tem esse atributo). */
body[data-page="suporte"] { height: 100vh; overflow: hidden; display: flex; flex-direction: column; }
body[data-page="suporte"] .site-header { flex-shrink: 0; }
body[data-page="suporte"] main { flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; }
body[data-page="suporte"] .support-section { flex: 1; min-height: 0; padding: 20px 0; display: flex; flex-direction: column; }
body[data-page="suporte"] .support-split { flex: 1; min-height: 0; }
body[data-page="suporte"] .support-split > * { min-height: 0; } /* sem isso, os itens do grid não encolhem abaixo do conteúdo, e a rolagem interna não funciona de verdade */
body[data-page="suporte"] .support-sidebar,
body[data-page="suporte"] .support-conversation,
body[data-page="suporte"] .ticket-details-panel {
  max-height: none; /* as regras de altura fixa (720px) eram pro layout antigo, com cabeçalho grande acima — agora quem manda é o 100vh do body */
}
@media (max-width: 860px) {
  /* Combinado com a media query que já existe mais abaixo (troca o
     grid pra coluna única) — em telas estreitas volta a rolar a
     página normal, o "travado" só faz sentido com as 3 colunas lado a
     lado. */
  body[data-page="suporte"] { height: auto; overflow: visible; }
  body[data-page="suporte"] main { overflow: visible; }
  body[data-page="suporte"] .support-split { flex: none; }
}

.support-split {
  display: grid; grid-template-columns: 340px 1fr;
  border: 1px solid var(--iron-dim); border-radius: 10px; overflow: hidden;
  min-height: 620px; max-width: 1400px; margin: 0 auto; background: var(--void);
}
.support-sidebar {
  background: var(--panel); border-right: 1px solid var(--iron-dim);
  display: flex; flex-direction: column; gap: 14px; padding: 20px;
  max-height: 720px; overflow-y: auto;
}
.support-sidebar-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.support-sidebar-head h2 { font-family: var(--font-display); font-size: 1.2rem; margin: 0; }
.support-new-btn {
  width: 34px; height: 34px; border-radius: 8px; background: var(--ember); color: #fff;
  border: none; display: flex; align-items: center; justify-content: center; cursor: pointer;
  flex-shrink: 0; transition: background 0.15s ease;
}
.support-new-btn:hover { background: var(--ember-bright); }
.support-new-btn .icon { width: 17px; height: 17px; }

.support-search-wrap { position: relative; }
.support-search-wrap .icon {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  width: 15px; height: 15px; color: var(--bone-dim); pointer-events: none;
}
.support-search-wrap input {
  width: 100%; background: var(--void); border: 1px solid var(--iron-dim); color: var(--bone);
  padding: 9px 12px 9px 34px; border-radius: 6px; font-size: 0.85rem; font-family: var(--font-body);
}
.support-search-wrap input:focus { border-color: var(--gold-dim); }

.tickets-list { display: flex; flex-direction: column; gap: 8px; }
.ticket-card {
  display: block; width: 100%; position: relative;
  background: var(--void); border: 1px solid var(--iron-dim); border-left: 3px solid var(--iron-dim);
  border-radius: 6px; padding: 12px 14px; text-align: left; cursor: pointer;
  font-family: inherit; color: inherit; transition: border-color 0.15s ease, background 0.15s ease;
}
.ticket-card:hover { border-color: var(--gold-dim); border-left-color: var(--gold-dim); }
.ticket-card.active { background: var(--panel-raised); border-left-color: var(--gold); box-shadow: inset 0 0 0 1px var(--gold-dim); }
.ticket-card-unread { border-left-color: var(--ember); }
.ticket-card-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.ticket-card-number { font-family: var(--font-mono); font-size: 0.72rem; color: var(--bone-dim); }
.unread-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--ember); margin-right: 2px; animation: nav-badge-pulse 1.6s ease-in-out infinite; }
.ticket-card-main { display: flex; flex-direction: column; gap: 4px; }
.ticket-card-main strong { font-size: 0.9rem; line-height: 1.3; }
.ticket-card-meta { font-size: 0.74rem; color: var(--bone-dim); }

/* Painel da direita nunca rola inteiro — só a lista de mensagens rola
   por dentro, com o cabeçalho e a caixa de resposta sempre fixos à
   vista. min-height:0 é o que permite um filho flex encolher e ganhar
   scroll próprio, em vez de esticar o pai infinito (senão a página
   inteira que precisa rolar pra achar o campo de responder). */
.support-conversation { display: flex; flex-direction: column; padding: 26px 30px; max-height: 720px; }
.support-empty-state {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px; color: var(--bone-dim); text-align: center;
}
.support-empty-state .icon { width: 40px; height: 40px; color: var(--iron); }
.support-empty-hint { font-size: 0.92rem; line-height: 1.5; }
.support-empty-title { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.5rem, 3vw, 2rem); margin: 0 0 6px; }
.support-empty-title .hl { color: var(--ember-bright); }
.support-empty-sub { color: var(--bone-dim); font-size: 0.92rem; max-width: 46ch; margin: 0 0 8px; line-height: 1.5; }
#support-active-ticket { display: flex; flex-direction: column; flex: 1; gap: 16px; min-height: 0; }
#support-active-ticket .ticket-modal-head { flex-shrink: 0; }
#support-active-ticket .ticket-thread { flex: 1; min-height: 0; max-height: none; overflow-y: auto; }
#support-active-ticket .ticket-reply-row { flex-shrink: 0; }

/* Ocupa a largura toda da página (com o mesmo respiro lateral do admin), em vez de
   80vw — antes ficava menor que o resto da página, com sobra dos dois lados. */
.support-split-3col { grid-template-columns: 320px 1fr 280px; width: auto; max-width: none; margin: 0 28px; }
@media (max-width: 640px) { .support-split-3col { margin: 0 14px; } }

.ticket-details-panel {
  background: var(--panel); border-left: 1px solid var(--iron-dim);
  padding: 22px; display: flex; flex-direction: column; gap: 24px;
  max-height: 720px; overflow-y: auto;
}
.ticket-details-section h4 {
  font-family: var(--font-display); font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--gold-bright); margin: 0 0 12px; padding-bottom: 8px; border-bottom: 1px solid var(--iron-dim);
}
.ticket-details-section dl { display: grid; grid-template-columns: auto 1fr; gap: 8px 12px; margin: 0; }
.ticket-details-section dt { font-size: 0.78rem; color: var(--bone-dim); }
.ticket-details-section dd { margin: 0; font-size: 0.82rem; text-align: right; word-break: break-word; }
.ticket-details-user { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.ticket-details-user img { width: 40px; height: 40px; border-radius: 50%; border: 2px solid var(--gold-dim); flex-shrink: 0; }
.ticket-details-user strong { display: block; font-size: 0.88rem; }
.ticket-details-user span { font-size: 0.72rem; color: var(--bone-dim); }

@media (max-width: 860px) {
  .support-split { grid-template-columns: minmax(0, 1fr); }
  .support-sidebar { max-height: 320px; border-right: none; border-bottom: 1px solid var(--iron-dim); }
  .support-conversation { max-height: none; }
}

.ticket-modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.ticket-modal-head h3 { border: none; padding: 0; margin: 0 0 8px; font-size: 1.4rem; }
.ticket-modal-meta { display: flex; align-items: center; gap: 10px; font-size: 0.84rem; color: var(--bone-dim); margin: 0; }
.ticket-thread {
  display: flex; flex-direction: column; gap: 16px; max-height: 420px; overflow-y: auto;
  padding: 20px; margin: 4px -4px; background: var(--void); border: 1px solid var(--iron-dim); border-radius: 10px;
}
/* Empurra as mensagens pra baixo (perto de onde a pessoa digita) sem
   quebrar a rolagem — "justify-content: flex-end" faria isso só
   visualmente, mas tem um bug conhecido em todo navegador: quando o
   conteúdo estoura a caixa, o topo fica inacessível pela rolagem (o
   scroll simplesmente não alcança as mensagens mais antigas). Esse
   elemento invisível ocupa o espaço vazio sozinho (margin-top:auto
   "puxa" ele pra cima, empurrando o resto do conteúdo real pra baixo),
   sem interferir na área rolável — comportamento certo com poucas OU
   muitas mensagens, nos dois casos. */
.ticket-thread::before {
  content: '';
  margin-top: auto;
}
.ticket-msg-row { display: flex; gap: 10px; align-items: flex-end; max-width: 85%; }
.ticket-msg-row-admin { align-self: flex-start; }
.ticket-msg-row-user { align-self: flex-end; flex-direction: row-reverse; }
.ticket-msg-avatar { width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0; border: 2px solid var(--iron-dim); object-fit: cover; }
.ticket-msg-row-admin .ticket-msg-avatar { border-color: var(--gold); }
.ticket-msg-row-user .ticket-msg-avatar { border-color: var(--ember-deep); }

.ticket-msg { background: var(--panel); border: 1px solid var(--iron-dim); border-radius: 12px; padding: 12px 16px; box-shadow: 0 4px 14px rgba(0,0,0,0.3); min-width: 0; }
.ticket-msg-admin { border-color: var(--gold-dim); background: linear-gradient(135deg, rgba(209,162,79,0.1), var(--panel) 65%); border-bottom-left-radius: 3px; }
.ticket-msg-user { border-color: var(--ember-deep); background: linear-gradient(135deg, rgba(184,35,47,0.12), var(--panel-raised) 65%); border-bottom-right-radius: 3px; }
.ticket-msg-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 8px; }
.ticket-msg-head strong { font-size: 0.85rem; display: flex; align-items: center; gap: 6px; }
.ticket-msg-admin .ticket-msg-head strong { color: var(--gold-bright); }
.ticket-msg-user .ticket-msg-head strong { color: var(--ember-text); }
.ticket-msg-head span { font-size: 0.72rem; color: var(--bone-dim); white-space: nowrap; font-family: var(--font-mono); }
.ticket-msg p { margin: 0; font-size: 0.92rem; line-height: 1.55; white-space: pre-wrap; word-break: break-word; }
.ticket-reply-row {
  display: flex; flex-direction: column; gap: 10px; margin-top: 4px;
  /* Antes era só um campo de texto solto flutuando embaixo da
     conversa — agora tem um cartão próprio (fundo + borda), pra ficar
     claro que essa é a área "de ação" da tela, não uma continuação
     qualquer do vazio de cima. */
  background: var(--panel); border: 1px solid var(--iron-dim); border-radius: 10px; padding: 14px;
}
.ticket-reply-row textarea {
  min-height: 76px; width: 100%; background: var(--void); border: 1px solid var(--iron-dim); color: var(--bone);
  font-family: var(--font-body); font-size: 0.9rem; padding: 12px 14px; border-radius: 6px; resize: vertical;
}
.ticket-reply-row textarea:focus { border-color: var(--gold-dim); }
.ticket-reply-row textarea::placeholder { color: var(--bone-dim); }
.ticket-reply-row textarea:disabled { opacity: 0.5; cursor: not-allowed; }
.ticket-reply-actions button:disabled { opacity: 0.4; cursor: not-allowed; }

.ticket-closed-note {
  display: flex; align-items: center; gap: 8px; margin: 0;
  background: rgba(184,35,47,0.14); border: 1px solid var(--ember-deep); color: #f0a89e;
  padding: 10px 14px; border-radius: 6px; font-size: 0.82rem; font-weight: 600;
}
.ticket-closed-note .icon { width: 15px; height: 15px; flex-shrink: 0; color: var(--ember-bright); }
.ticket-reply-actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; }

.ticket-rating-prompt {
  display: flex; flex-direction: column; gap: 8px;
  background: var(--panel); border: 1px solid var(--gold-dim); border-radius: 8px;
  padding: 12px 14px; margin: 0;
}
.ticket-rating-label { font-size: 0.78rem; color: var(--bone-dim); }
.ticket-rating-emoji-row { display: flex; gap: 8px; }
.ticket-rating-emoji {
  background: var(--void); border: 1px solid var(--iron-dim); border-radius: 50%;
  width: 32px; height: 32px; font-size: 1.05rem; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center; transition: transform 0.1s ease, border-color 0.15s ease;
}
.ticket-rating-emoji:hover { transform: scale(1.12); border-color: var(--gold-dim); }
.ticket-rating-emoji.selected { border-color: var(--gold); background: rgba(209,162,79,0.12); }
.ticket-rating-prompt textarea {
  width: 100%; background: var(--void); border: 1px solid var(--iron-dim); color: var(--bone);
  font-family: var(--font-body); font-size: 0.82rem; padding: 8px 10px; border-radius: 6px; resize: vertical;
}
.ticket-rating-prompt textarea:focus { border-color: var(--gold-dim); }
.ticket-rating-prompt textarea::placeholder { color: var(--bone-dim); }

.ticket-rating-done {
  display: flex; align-items: flex-start; gap: 8px; margin: 0; font-size: 0.78rem; line-height: 1.4; color: var(--good);
  background: rgba(111,174,90,0.1); border: 1px solid var(--good); border-radius: 6px; padding: 10px 12px;
}
.ticket-rating-done .icon { flex-shrink: 0; margin-top: 1px; }
.ticket-attach-btn {
  width: 38px; height: 38px; padding: 0 !important;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.ticket-attach-btn .icon { width: 17px; height: 17px; }
.emoji-picker-wrap { margin-right: auto; }

/* ===== Categorias visuais (novo ticket) ===== */
.ticket-category-picker { display: flex; flex-wrap: wrap; gap: 8px; }
.ticket-category-btn {
  display: flex; align-items: center; gap: 6px; padding: 8px 14px;
  background: var(--panel); border: 1px solid var(--iron-dim); border-radius: 999px;
  color: var(--bone-dim); font-size: 0.82rem; font-family: inherit; cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.ticket-category-btn .icon { width: 15px; height: 15px; }
.ticket-category-btn:hover { border-color: var(--gold-dim); }
.ticket-category-btn.active { border-color: var(--gold); background: rgba(209,162,79,0.1); color: var(--gold-bright); }

/* ===== Upload de imagem (tickets) ===== */
.image-drop-zone {
  border: 2px dashed var(--iron-dim); border-radius: 8px; padding: 20px; cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.image-drop-zone:hover, .image-drop-zone.dragover { border-color: var(--gold-dim); background: rgba(209,162,79,0.04); }
.image-drop-empty { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; color: var(--bone-dim); }
.image-drop-empty .icon { width: 26px; height: 26px; color: var(--iron); }
.image-drop-empty span:not(.field-hint) { font-size: 0.86rem; }

.image-preview-wrap { position: relative; display: inline-block; max-width: 100%; }
.image-preview-wrap img { max-width: 100%; max-height: 220px; border-radius: 8px; display: block; border: 1px solid var(--iron-dim); }
.image-remove-btn {
  position: absolute; top: -8px; right: -8px; width: 24px; height: 24px; border-radius: 50%;
  background: var(--ember); color: #fff; border: 2px solid var(--panel-raised); font-size: 1rem; line-height: 1;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.image-remove-btn:hover { background: var(--ember-bright); }

.image-preview-list { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 14px; }
.image-preview-list:empty { margin-top: 0; }
.image-preview-list-sm { margin: 0 0 10px; }
.image-preview-list .image-preview-wrap img { width: 96px; height: 96px; object-fit: cover; max-width: none; }
.image-preview-list-sm .image-preview-wrap img { width: 64px; height: 64px; }

.ticket-msg-image { max-width: 260px; max-height: 220px; border-radius: 6px; margin-top: 8px; display: block; cursor: zoom-in; border: 1px solid var(--iron-dim); }
.ticket-msg-images { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.ticket-msg-images .ticket-msg-image { margin-top: 0; max-width: 120px; max-height: 120px; object-fit: cover; }

.emoji-picker-wrap { position: relative; }
.emoji-picker-panel {
  position: absolute; bottom: calc(100% + 8px); left: 0; width: 220px;
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px;
  background: var(--panel-raised); border: 1px solid var(--iron-dim); border-radius: 8px;
  padding: 8px; box-shadow: 0 12px 32px rgba(0,0,0,0.5); z-index: 20;
  overflow: hidden;
}
.emoji-picker-item {
  background: none; border: none; font-size: 1.05rem; padding: 6px; border-radius: 5px; cursor: pointer;
  line-height: 1; display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.emoji-picker-item:hover { background: rgba(209,162,79,0.15); }

.nav-badge {
  background: var(--ember); color: #fff; font-size: 0.72rem; font-weight: 700;
  padding: 1px 7px; border-radius: 999px; margin-left: 2px;
  animation: nav-badge-pulse 1.6s ease-in-out infinite;
}
@keyframes nav-badge-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(184,35,47,0.5); }
  50% { box-shadow: 0 0 0 5px rgba(184,35,47,0); }
}

/* ===== Monte seu kit ===== */
.kit-builder-card { max-width: 560px; }
.kb-filters { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; }
.kb-search-wrap {
  display: flex; align-items: center; gap: 8px; background: var(--void); border: 1px solid var(--iron-dim);
  border-radius: 8px; padding: 8px 12px;
}
.kb-search-wrap .icon { width: 15px; height: 15px; color: var(--bone-dim); flex-shrink: 0; }
.kb-search-wrap input { background: none; border: none; color: var(--bone); font-family: inherit; font-size: 0.86rem; width: 100%; outline: none; }
/* O campo em si não tem contorno (fica dentro da caixa com a lupa): o foco acende a caixa inteira, senão quem usa teclado
   não vê onde está. */
.kb-search-wrap:focus-within { border-color: var(--ember-bright); box-shadow: 0 0 0 3px rgba(184, 35, 47, 0.18); }
.kb-category-tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.kb-category-tab {
  background: var(--void); border: 1px solid var(--iron-dim); color: var(--bone-dim); padding: 5px 12px;
  border-radius: 999px; font-size: 0.74rem; cursor: pointer; font-family: inherit; display: flex; align-items: center; gap: 5px;
}
.kb-category-tab:hover { border-color: var(--gold-dim); }
.kb-category-tab.active { background: rgba(209,162,79,0.14); border-color: var(--gold); color: var(--gold-bright); }
.kb-category-tab-count {
  background: var(--panel-raised); border-radius: 999px; padding: 0 5px; font-size: 0.72rem; font-family: var(--font-mono);
}
.kb-items-list { display: flex; flex-direction: column; gap: 10px; max-height: 360px; overflow-y: auto; padding-right: 4px; }
.kb-item-row {
  display: flex; align-items: center; gap: 12px; padding: 10px 12px;
  background: var(--panel); border: 1px solid var(--iron-dim); border-radius: 6px;
}
.kb-item-row.kb-item-selected { border-color: var(--gold-dim); background: rgba(209,162,79,0.06); }
.kb-item-icon {
  width: 40px; height: 40px; border-radius: 4px; background: var(--void); border: 1px solid var(--iron);
  display: flex; align-items: center; justify-content: center; overflow: hidden; font-size: 1.2rem; flex-shrink: 0;
  position: relative;
}
.kb-item-icon img { width: 100%; height: 100%; object-fit: contain; }
.kb-item-info { flex: 1; min-width: 0; }
.kb-item-name { font-size: 0.88rem; font-weight: 600; }
.kb-item-price { font-size: 0.74rem; color: var(--bone-dim); }
.kb-item-stepper { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
/* Sem texto "+"/"−" — os dois caracteres não alinhavam bem juntos
   dependendo da fonte (o "−" ficava mais alto/torto que o "+"). Desenha
   as barrinhas direto em CSS: uma barra horizontal sempre (a base do
   "−"), e o botão de somar (data-dir="1") ganha uma segunda barra
   igual, só girada 90°, formando o "+" — as duas sempre do mesmo
   tamanho e sempre centralizadas de verdade, sem depender de fonte. */
.kb-stepper-btn {
  width: 26px; height: 26px; border-radius: 50%; background: var(--panel-raised); border: 1px solid var(--iron-dim);
  color: var(--bone); cursor: pointer; position: relative; font-size: 0; line-height: 0;
}
.kb-stepper-btn::before {
  content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 10px; height: 2px; background: currentColor; border-radius: 1px;
}
.kb-stepper-btn[data-dir="1"]::after {
  content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(90deg);
  width: 10px; height: 2px; background: currentColor; border-radius: 1px;
}
.kb-stepper-btn:hover:not(:disabled) { border-color: var(--gold-dim); color: var(--gold-bright); }
.kb-stepper-btn:disabled { opacity: 0.35; cursor: default; }
.kb-item-qty { font-family: var(--font-mono); font-size: 0.85rem; min-width: 52px; text-align: center; }
.kb-item-line-price { font-family: var(--font-mono); font-size: 0.85rem; color: var(--gold-bright); min-width: 70px; text-align: right; flex-shrink: 0; }

.kb-total-row {
  display: flex; align-items: center; justify-content: space-between; padding-top: 12px;
  border-top: 1px solid var(--iron-dim); font-size: 1.05rem;
}
.kb-total-row strong { font-family: var(--font-mono); color: var(--gold-bright); font-size: 1.3rem; }

/* ===== Slot de escolha embutido num pacote pronto ===== */
.cs-step-indicator { font-size: 0.74rem; color: var(--bone-dim); text-transform: uppercase; letter-spacing: 0.04em; margin: 0 0 8px; }
.cs-slot-block { margin-bottom: 18px; }
.cs-slot-block:last-child { margin-bottom: 0; }
.cs-slot-title { font-size: 0.94rem; font-weight: 700; color: var(--bone); margin: 0; display: flex; align-items: center; gap: 8px; }
.cs-slot-progress { font-family: var(--font-mono); font-size: 0.78rem; color: var(--gold-bright); font-weight: 500; }
.cs-slot-items { max-height: 260px; }

/* ===== Passo de CPF (dentro da gaveta do carrinho) ===== */
.pix-cpf-step { display: flex; flex-direction: column; gap: 10px; }
.pix-cpf-step label { display: flex; flex-direction: column; gap: 6px; font-size: 0.82rem; color: var(--bone-dim); }
.pix-cpf-step input {
  background: var(--void); border: 1px solid var(--iron-dim); color: var(--bone);
  padding: 10px 12px; font-family: var(--font-mono); font-size: 0.9rem; border-radius: 3px;
}
.pix-cpf-step input:focus { border-color: var(--ember); }
.pix-cpf-hint { font-size: 0.74rem; color: var(--bone-dim); margin: -4px 0 0; }
.form-error {
  color: #e08a7d; font-size: 0.82rem; margin: 2px 0 0; padding: 8px 12px;
  background: rgba(224,138,125,0.1); border: 1px solid rgba(224,138,125,0.3); border-radius: 4px;
  animation: form-error-in 0.15s ease;
}
@keyframes form-error-in { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: translateY(0); } }

.confirm-title { font-weight: 700; font-size: 0.9rem; margin: 0; }
.confirm-row {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  font-size: 0.86rem; padding: 8px 0; border-bottom: 1px solid var(--iron-dim);
}
.confirm-row span { color: var(--bone-dim); }
.confirm-row strong { font-family: var(--font-mono); font-weight: 500; text-align: right; word-break: break-word; }

label.terms-check-row {
  display: flex !important; flex-direction: row !important; align-items: flex-start; gap: 9px;
  font-size: 0.82rem; color: var(--bone-dim); line-height: 1.45; cursor: pointer; margin-top: 4px;
}
.terms-check-row input { margin: 3px 0 0; flex-shrink: 0; accent-color: var(--gold); }
.terms-check-row a { color: var(--gold-bright); text-decoration: underline; }

/* Caixa de confirmação de inventário — precisa chamar bem mais atenção
   que o checkbox comum de termos (cor de alerta, borda grossa, ícone),
   já que é sobre um risco real de perder item comprado, não só uma
   formalidade jurídica. */
.inventory-warning-box {
  display: flex; align-items: flex-start; gap: 12px; margin: 14px 0;
  background: rgba(217, 119, 6, 0.1); border: 1.5px solid #d97706; border-radius: 8px; padding: 14px 16px;
}
.inventory-warning-box > .icon { width: 22px; height: 22px; color: #f59e0b; flex-shrink: 0; margin-top: 1px; }
.inventory-warning-check { display: flex !important; flex-direction: row !important; align-items: flex-start; gap: 10px; cursor: pointer; font-size: 0.82rem; line-height: 1.5; color: var(--bone); }
.inventory-warning-check input { margin-top: 3px; flex-shrink: 0; width: 17px; height: 17px; accent-color: #f59e0b; cursor: pointer; }
.inventory-warning-check strong { color: #f59e0b; }
.confirm-actions { display: flex; gap: 10px; }
.confirm-actions .btn { flex: 1; justify-content: center; }

.payment-methods { display: flex; gap: 10px; }
.payment-method-option {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px;
  background: var(--void); border: 1px solid var(--iron-dim); border-radius: 5px;
  padding: 12px 10px; color: var(--bone-dim); font-size: 0.8rem; font-weight: 600;
  position: relative;
}
.payment-method-option .icon { width: 20px; height: 20px; }
.payment-method-option:not(.active):hover { border-color: var(--iron); color: var(--bone); }
.payment-method-option.active { border-color: var(--ember); color: var(--bone); background: rgba(184,35,47,0.1); }
.payment-method-option.active .icon { color: var(--ember-bright); }
.payment-method-option:disabled { opacity: 0.55; cursor: not-allowed; }
.soon-badge {
  position: absolute; top: -8px; right: -6px; background: var(--gold); color: #1a1310;
  font-size: 0.68rem; font-weight: 700; padding: 2px 6px; border-radius: 999px; letter-spacing: 0.02em;
}
/* Mesmo selo do "Em breve", mas com outra cor quando vira informativo
   (quem processa o pagamento) em vez de "chamativo" — roxo remete à
   marca da própria Stripe, sem copiar a logo. */
.soon-badge.processor-badge { background: #635bff; color: #fff; }

/* ===== Modal de pagamento Pix ===== */
.pix-modal-card { max-width: 380px; text-align: center; align-items: center; }
.pix-modal-card h3 { justify-content: center; }
.pix-qr-wrap {
  width: 220px; height: 220px; background: #fff; border-radius: 6px;
  display: flex; align-items: center; justify-content: center; padding: 10px;
}
.pix-qr-wrap img { width: 100%; height: 100%; object-fit: contain; }
.pix-amount { font-family: var(--font-mono); font-size: 1.2rem; font-weight: 600; margin: 4px 0 0; }
.pix-copy-label { width: 100%; text-align: left; }
.pix-copy-row { display: flex; gap: 8px; }
.pix-copy-row input {
  flex: 1; background: var(--void); border: 1px solid var(--iron-dim); color: var(--bone-dim);
  padding: 8px 10px; font-family: var(--font-mono); font-size: 0.72rem; border-radius: 3px;
}
.pix-status { display: flex; align-items: center; gap: 8px; justify-content: center; font-size: 0.86rem; font-weight: 600; margin: 4px 0 0; }
.pix-status.ok { color: var(--good); }
.pix-status .spinner {
  width: 14px; height: 14px; border: 2px solid var(--iron-dim); border-top-color: var(--ember);
  border-radius: 50%; animation: pix-spin 0.8s linear infinite;
}
@keyframes pix-spin { to { transform: rotate(360deg); } }
.pix-expiry { font-size: 0.74rem; color: var(--bone-dim); margin: 0; }

/* Avatar do Discord que não carregou (ver handler de "error" em main-notifications.js): troca por
   /img/avatar-default.svg, uma silhueta que já vem com fundo e respiro desenhados. Antes o fallback era o
   ícone de máscara (avatar.png) com "padding: 14%" — porcentagem de padding é sobre a LARGURA DO CONTEÚDO
   AO REDOR, não da imagem, então numa coluna larga o padding passava de 60px e a moldura de 34px virava 99px. */
img[data-avatar-fallback] { object-fit: cover; }

/* ===== Cabeçalho em celular =====
   Até 860px o menu principal some e vira o botão ☰. Nessa largura o
   cabeçalho fica: ☰ à esquerda | logo + TURMADOTUMATE no centro |
   carrinho/sino/avatar à direita. O botão "Entrar com Discord" e o
   seletor de jogo saem daqui e moram dentro do menu ☰ (montados por
   setupMobileNavExtras em main-auth-ui.js). Fica no fim do arquivo de propósito:
   precisa vencer .cart-btn/.wrap/.header-inner, declarados antes com a
   mesma especificidade.
   Grade "auto 1fr auto": o logo é centralizado no espaço LIVRE entre o ☰ e
   o primeiro ícone da direita (o carrinho) — folga igual dos dois lados,
   mesmo logado, quando a direita é mais larga (carrinho + sino + avatar). */
/* Só nos cabeçalhos que TÊM o botão ☰ (o do pedido, por exemplo, é só
   logo + entrar/avatar, sem menu — ali o botão Entrar tem que ficar). */
@media (max-width: 860px) {
  .header-inner:has(.mobile-nav-toggle) { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 8px; }
  .header-inner:has(.mobile-nav-toggle) .mobile-nav-toggle { justify-self: start; }
  .header-inner:has(.mobile-nav-toggle) .brand { justify-self: center; min-width: 0; }
  .header-inner:has(.mobile-nav-toggle) .auth-area { justify-self: end; }
  .header-inner:has(.mobile-nav-toggle) .game-switcher,
  .header-inner:has(.mobile-nav-toggle) #btn-login { display: none; }
}
@media (max-width: 640px) {
  .wrap { padding-left: 14px; padding-right: 14px; }
  .auth-area { gap: 6px; }
  .brand { gap: 6px; }
  .brand-emoji.mascot-img { width: 32px; height: 32px; }
  .brand-text { font-size: 0.95rem; }
  .mobile-nav-toggle, .cart-btn { width: 36px; height: 36px; }
  .user-chip { padding: 4px 6px; gap: 4px; }
  .user-chip-name { display: none; }
  /* O selo ADMIN dentro do chip alargava demais o lado direito e empurrava o
     logo por cima do ☰ e do carrinho — o acesso ao painel continua no menu
     do avatar (link "Painel Admin"). */
  .user-chip .badge-role-admin, .user-chip .badge-role-support { display: none; }
  .brand-text { white-space: nowrap; }
  /* Cabeçalho sem menu ☰ (pedido): o botão continua ali, só mais curto. */
  .header-inner #btn-login { font-size: 0; padding: 8px 12px; gap: 6px; }
  .header-inner #btn-login .icon { width: 14px; height: 14px; }
  .header-inner #btn-login::after { content: 'Entrar'; font-size: 0.8rem; }
}
@media (max-width: 360px) {
  .wrap { padding-left: 12px; padding-right: 12px; }
  .header-inner, .auth-area { gap: 4px; }
  .brand-text { font-size: 0.85rem; }
  .brand-emoji.mascot-img { width: 28px; height: 28px; }
  .user-chip > .icon { display: none; }
}

/* Itens extras dentro do menu ☰ (jogo + entrar) */
.mobile-nav-section-label {
  margin-top: 6px; padding: 14px 20px 6px; border-top: 1px solid var(--iron-dim);
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--bone-dim);
}
.mobile-nav-panel a.mobile-nav-game { display: flex; align-items: center; gap: 10px; }
.mobile-nav-panel a.mobile-nav-game.current { color: var(--gold-bright); border-left-color: var(--gold); }
.mobile-nav-login-wrap { margin-top: 6px; padding: 14px 20px 10px; border-top: 1px solid var(--iron-dim); }
.mobile-nav-login { width: 100%; justify-content: center; padding: 12px 18px; }

/* Balão de ajuda (?) no celular: ele nasce centralizado no ícone com 260px
   de largura, então perto da borda da tela passava dela (e alargava a
   página inteira, mesmo invisível). Vira um aviso fixo no rodapé da tela,
   na largura toda, enquanto o ícone está sendo tocado. */
@media (max-width: 640px) {
  .help-tooltip-box {
    position: fixed; left: 16px; right: 16px; bottom: 16px; top: auto; width: auto;
    transform: none; z-index: 60;
  }
  .help-tooltip-box::after { display: none; }
}

/* Caixa "Vincule seu FuncomID" no celular: as duas opções de verificação
   lado a lado passavam alguns px da largura útil — ficam uma embaixo da
   outra, ocupando a largura toda. */
@media (max-width: 640px) {
  #steamid-auto-wrap { margin-left: 0; width: 100%; max-width: 100%; min-width: 0; }
  .verify-method-choices { flex-direction: column; }
}

/* ===== Cabeçalho em tablet / "modo computador" do celular =====
   Entre 861px (onde o menu completo aparece) e ~1180px, logo + tagline +
   seletor de jogo + 5 links + carrinho/sino + avatar com nome e selo ADMIN
   somavam mais de 1100px — o Chrome do celular em "site para computador"
   usa ~980px de largura, então o cabeçalho passava da tela e a página
   inteira encolhia pra caber, deixando o resto do site menor e torto.
   Aperta espaçamentos e tira o que é só decoração (tagline, selo ADMIN). */
/* .header-inner { padding: 14px 0 } zerava o respiro lateral do .wrap (24px)
   — só não aparecia em tela larga, onde o .wrap centralizado deixa
   margem sozinho; abaixo disso o logo e o avatar ficavam grudados nas
   bordas da tela. */
/* Só de 641px pra cima — no celular o respiro é menor (14px/12px, ver
   "Cabeçalho em celular"), e essa regra, vindo depois, anulava ele. */
@media (min-width: 641px) and (max-width: 1207px) {
  .header-inner { padding-left: 24px; padding-right: 24px; }
}
@media (min-width: 861px) and (max-width: 1180px) {
  .header-inner { gap: 14px; }
  .brand-tagline { display: none; }
  .main-nav { gap: 14px; }
  .main-nav a { font-size: 0.82rem; }
  .auth-area { gap: 8px; }
  .user-chip { padding: 6px 8px; }
  .user-chip-name { max-width: 80px; }
  .user-chip .badge-role-admin, .user-chip .badge-role-support { display: none; }
}
@media (min-width: 861px) and (max-width: 1020px) {
  .game-switcher-btn { padding: 6px 9px; font-size: 0.74rem; }
}
/* Os 5 links do menu precisam de ~280px: abaixo de ~940px não sobra lugar
   pro nome do usuário ao lado do avatar (medido), acima disso sobra. */
@media (min-width: 861px) and (max-width: 939px) {
  .user-chip-name { display: none; }
}

/* ===== Respiro lateral das páginas (.wrap) =====
   Várias páginas usam "wrap" junto com a classe própria da seção
   (.conta-wrap, .status-page, .perfil-page, .bz-page, .catalog-section...),
   e essas classes definem "padding: 40px 0 ..." — o "0" zerava o respiro
   lateral de 24px do .wrap, então títulos, "Ver histórico", totais do
   pedido etc. ficavam colados na borda da tela (só não aparecia em tela
   larga, onde a caixa centralizada de 1160px já deixa margem sozinha).
   ".wrap.wrap" (duas classes) vence essas regras em qualquer ordem de
   arquivo; um style="padding:0" inline, quando existir de propósito,
   continua valendo. Acima de 1207px nada muda. */
@media (max-width: 1207px) {
  .wrap.wrap { padding-left: 24px; padding-right: 24px; }
}
@media (max-width: 640px) {
  .wrap.wrap { padding-left: 14px; padding-right: 14px; }
}
@media (max-width: 360px) {
  .wrap.wrap { padding-left: 12px; padding-right: 12px; }
}

/* ===== Faixa de destaques do hero (Entrega automática / Pagamento seguro / Suporte rápido) =====
   Antes: flex com "gap: 160px" e wrap livre — no celular cada item caía
   numa linha própria, centralizado pelo próprio tamanho (cada um com a
   borda esquerda num lugar) e a faixa ocupava a tela toda. Agora são 3
   colunas de largura igual, com o conteúdo centralizado em cada uma; no
   celular, ícone em cima e texto pequeno embaixo, tudo alinhado numa
   linha só. */
.features-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); justify-items: center; align-items: start;
  gap: 16px 24px; padding: 28px 24px 32px;
}
.feature-item { min-width: 0; }
.feature-icon { width: 40px; height: 40px; }
@media (max-width: 700px) {
  .features-grid { gap: 8px; padding: 22px 14px 26px; }
  .feature-item { flex-direction: column; text-align: center; gap: 8px; }
  .feature-icon { width: 36px; height: 36px; font-size: 1rem; }
  .feature-title { font-size: 0.72rem; line-height: 1.25; letter-spacing: 0.02em; }
  .feature-sub { font-size: 0.72rem; }
}

/* Painel de notificações (sino) no celular: nascia ancorado no sino com
   320px de largura e podia sair pela esquerda da tela. Vira um painel na
   largura toda, logo abaixo do topo. */
@media (max-width: 640px) {
  .notif-panel { position: fixed; left: 12px; right: 12px; top: 66px; width: auto; max-width: none; }
}

/* ===== Suporte (cliente): lista → conversa em tela estreita (até 1180px) =====
   Mesmo fluxo da aba Tickets do admin. Sem ticket aberto só a lista
   aparece; ao tocar num ticket, a conversa ocupa a largura toda (botão
   "Lista" no topo pra voltar) e os detalhes ficam logo abaixo. As 3
   colunas só voltam acima de 1180px. */
.tv-back-btn { display: none; }
@media (max-width: 1180px) {
  body[data-page="suporte"] { height: auto; overflow: visible; }
  body[data-page="suporte"] main { overflow: visible; }
  body[data-page="suporte"] .support-split { flex: none; }
  .support-split-3col { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .support-split-3col .support-sidebar { max-height: none; border-right: none; border-bottom: none; }
  .support-split-3col:not(.tv-detail-open) .support-conversation,
  .support-split-3col:not(.tv-detail-open) .ticket-details-panel { display: none; }
  .support-split-3col.tv-detail-open .support-sidebar { display: none; }
  .support-split-3col.tv-detail-open .support-conversation { max-height: none; padding: 12px; }
  .support-split-3col.tv-detail-open .ticket-details-panel { max-height: none; }

  .tv-back-btn { display: inline-flex; flex-shrink: 0; }
  #support-active-ticket .ticket-modal-head { flex-wrap: wrap; gap: 10px; }
  #support-active-ticket .ticket-modal-head > div { flex: 1 1 100%; min-width: 0; }
  #support-active-ticket .ticket-modal-head h3 { font-size: 1.05rem; overflow-wrap: anywhere; }
  #support-active-ticket .ticket-modal-meta { flex-wrap: wrap; gap: 4px 10px; overflow-wrap: anywhere; }

  #support-active-ticket .ticket-thread { max-height: 62vh; max-height: 62dvh; padding: 12px 10px; margin: 0; gap: 12px; }
  .support-split-3col .ticket-msg-row { gap: 8px; }
  .support-split-3col .ticket-msg-avatar { width: 26px; height: 26px; }
  .support-split-3col .ticket-msg { padding: 10px 12px; flex: 1; }
  .support-split-3col .ticket-msg p { font-size: 0.9rem; }
  .support-split-3col .ticket-msg-head { flex-wrap: wrap; gap: 4px 10px; }
}
@media (max-width: 1180px) and (min-width: 641px) {
  .support-split-3col .ticket-msg-row { max-width: 88%; }
}
@media (max-width: 640px) {
  .support-split-3col .ticket-msg-row { max-width: 100%; }
}

/* Botão "Voltar para a lista" (tickets do cliente e do admin, jogadores do
   admin): era um contorno fino e pequeno, quase invisível no topo da
   conversa. Agora é uma barra dourada na largura toda — fácil de ver e de
   tocar no celular. */
.tv-back-btn, .ticket-back-btn, .player-back-btn {
  width: 100%; gap: 8px; align-items: center; justify-content: flex-start;
  padding: 11px 16px; font-size: 0.92rem; font-weight: 700; letter-spacing: 0.02em;
  color: var(--gold-bright); background: rgba(209,162,79,0.12);
  border: 1px solid var(--gold-dim); border-radius: 10px;
}
.tv-back-btn:hover, .ticket-back-btn:hover, .player-back-btn:hover {
  background: rgba(209,162,79,0.2); border-color: var(--gold); color: var(--gold-bright);
}
.tv-back-btn .icon, .ticket-back-btn .icon, .player-back-btn .icon { width: 16px; height: 16px; flex-shrink: 0; }

/* Tela vazia da lista de tickets do cliente (nenhum ticket ainda). */
.tickets-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; padding: 32px 8px 12px; }
.tickets-empty-icon {
  width: 68px; height: 68px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: rgba(184,35,47,0.14); border: 1px solid var(--ember-deep); color: var(--ember-text);
  box-shadow: 0 0 0 6px rgba(184,35,47,0.06);
}
.tickets-empty-icon .icon { width: 30px; height: 30px; }
.tickets-empty h3 { font-family: var(--font-display); font-size: 1.15rem; margin: 8px 0 0; }
.tickets-empty p { color: var(--bone-dim); font-size: 0.86rem; line-height: 1.55; margin: 0; max-width: 34ch; }
.tickets-empty-btn { margin-top: 12px; padding: 12px 20px; }

/* Modal "Leia mais" dos pacotes: o cartão cabe na tela e NÃO rola — só a lista de itens rola, por dentro. Título,
   X e botão "Fechar" ficam parados, em qualquer navegador.
   Antes o modal inteiro rolava (o .modal-backdrop) e o X era position:fixed lá dentro. No Chrome (mesmo
   emulando celular) isso funcionava, mas no celular de verdade o X seguia descendo junto com a lista: alguns
   navegadores de celular tratam um "fixed" dentro de contêiner rolável como parte do conteúdo que rola. Aqui não
   há nada fixo dentro de área rolável, então não depende de como cada navegador trata isso. */
#package-details-modal { overflow: hidden; align-items: center; padding: 12px 20px; overscroll-behavior: contain; }
#package-details-modal .modal-card { max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px); overflow: hidden; }
#pd-modal-contents { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.pd-modal-x {
  position: absolute; top: 14px; right: 14px; z-index: 2;
  width: 38px; height: 38px; margin: 0;
  display: flex; align-items: center; justify-content: center; padding: 0;
  font-size: 1.5rem; line-height: 1; border-radius: 50%;
  background: var(--panel); border: 1px solid var(--iron); box-shadow: 0 2px 10px rgba(0,0,0,0.4);
}
.pd-modal-x:hover { color: var(--bone); border-color: var(--gold-dim); background: var(--panel-raised); }
#pd-modal-title { padding-right: 46px; }
/* Celular deitado (tela baixa): título, rodapé e margens mais enxutos para sobrar área para a lista. */
@media (max-height: 520px) {
  #package-details-modal .modal-card { padding: 12px 22px; gap: 8px; }
  #pd-modal-title { font-size: 1.05rem; padding-bottom: 8px; }
  #pd-modal-contents { margin-top: 0; }
  #package-details-modal .modal-actions { margin-top: 0; padding-top: 8px; }
  .pd-modal-x { top: 8px; right: 8px; }
}

/* ---------- Acessibilidade e toque (auditoria de UX 2026-09) ---------- */
/* Só para leitores de tela (ex.: <h1> que a página já mostra de outro jeito). */
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
/* Link no meio de texto corrido: sublinhado, pra não depender só da cor (WCAG 1.4.1). */
.empty-state a:not(.btn), .toggle-row-sub a, .field-hint a, .support-empty-sub a, .catalog-sub a { text-decoration: underline; text-underline-offset: 2px; }
/* Alvos de toque no celular com pelo menos ~36 px, SEM mudar o desenho: padding maior com margem negativa
   compensando, pra o layout não crescer. */
@media (max-width: 860px) {
  .package-more-btn { padding: 10px 6px; margin-top: -8px; margin-bottom: -8px; }
  .footer-link { padding: 9px 0; margin-top: -1px; }
  .link-muted { padding: 9px 4px; margin: -9px -4px; }
  body:not(.admin-body) .btn { min-height: 40px; }
}

/* ===== Pop-up de badge nova (main-notifications.js) ===== */
.badge-popup {
  position: fixed; right: 24px; bottom: 24px; z-index: 998; display: flex; align-items: flex-start; gap: 14px;
  width: min(380px, calc(100vw - 32px)); padding: 16px 40px 16px 16px; box-sizing: border-box;
  background: var(--panel); border: 1px solid var(--gold-dim); border-radius: 10px; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
  opacity: 0; transform: translateY(16px); pointer-events: none; transition: opacity 0.25s ease, transform 0.25s ease;
}
.badge-popup.show { opacity: 1; transform: translateY(0); pointer-events: auto; }
.badge-popup.is-rare { border-color: var(--gold); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5), 0 0 22px rgba(209, 162, 79, 0.25); }
.badge-popup-icon { width: 64px; height: 64px; flex-shrink: 0; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--gold-bright); overflow: hidden; }
.badge-popup-icon img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.badge-popup-icon .icon { width: 32px; height: 32px; }
.badge-popup-body { min-width: 0; }
.badge-popup-eyebrow { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold-bright); }
.badge-popup-rare { padding: 1px 8px; border-radius: 999px; background: rgba(184, 35, 47, 0.16); border: 1px solid rgba(226, 50, 63, 0.5); color: #f7a3a8; letter-spacing: 0.08em; }
.badge-popup-name { margin-top: 3px; font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; overflow-wrap: anywhere; }
.badge-popup-desc { margin-top: 4px; font-size: 0.8rem; color: var(--bone-dim); line-height: 1.4; }
.badge-popup-xp { margin-top: 6px; font-family: var(--font-mono); font-size: 0.78rem; color: var(--gold-bright); }
.badge-popup-more { margin-top: 6px; font-size: 0.76rem; color: var(--bone-dim); }
.badge-popup-link { display: inline-block; margin-top: 10px; font-size: 0.8rem; font-weight: 600; color: var(--gold-bright); text-decoration: underline; }
.badge-popup-close { position: absolute; top: 6px; right: 8px; width: 28px; height: 28px; border: 0; background: none; color: var(--bone-dim); font-size: 1.3rem; line-height: 1; cursor: pointer; }
.badge-popup-close:hover { color: var(--bone); }
@media (prefers-reduced-motion: reduce) { .badge-popup { transition: none; transform: none; } }

/* Preço em promoção agendada (main-packages.js): de/por com a porcentagem e o prazo. */
.package-price-promo { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.package-price-promo-row { display: flex; align-items: center; justify-content: center; gap: 8px; }
.package-price-promo-now { color: var(--gold-bright); }
.package-price-promo-until { font-family: var(--font-mono); font-size: 0.68rem; color: var(--bone-dim); }

/* ===== Enquete (cartão na página inicial, faixa em Minha Conta) ===== */
.poll-section { margin-top: 32px; }
.poll-section[hidden], .poll-banner[hidden] { display: none; }

/* Cartão: painel da pergunta à esquerda, opções à direita. Brilho de brasa no canto e borda dourada. */
.poll-card {
  position: relative; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); overflow: hidden;
  border: 1px solid var(--gold-dim); border-radius: 8px; scroll-margin-top: 90px;
  background: radial-gradient(120% 90% at 0% 0%, rgba(184, 35, 47, 0.2) 0%, transparent 55%), linear-gradient(180deg, var(--panel-raised) 0%, var(--panel) 70%);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
  animation: pollIn 0.35s ease both;
}
@keyframes pollIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.poll-side { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 12px; padding: 24px 28px 26px; text-align: center; border-right: 1px solid var(--iron-dim); background: rgba(0, 0, 0, 0.16); }
.poll-seal {
  display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%;
  border: 1px solid var(--gold); background: radial-gradient(circle at 35% 30%, rgba(232, 193, 121, 0.28), rgba(209, 162, 79, 0.06) 70%);
  box-shadow: 0 0 0 5px rgba(209, 162, 79, 0.08), 0 0 26px rgba(209, 162, 79, 0.28);
}
.poll-seal .icon { width: 24px; height: 24px; color: var(--gold-bright); }
.poll-eyebrow { font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-bright); font-weight: 700; }
.poll-question { font-family: var(--font-display); font-weight: 600; font-size: 1.75rem; line-height: 1.22; margin: 0; overflow-wrap: anywhere; text-wrap: balance; }
/* margin-top: auto prende o prazo na base do painel, seja qual for a altura do cartão. */
.poll-deadline {
  display: inline-flex; align-items: center; gap: 8px; margin: auto 0 0; padding: 7px 13px; border: 1px solid var(--gold-dim); border-radius: 999px;
  background: rgba(209, 162, 79, 0.08); font-size: 0.8rem; color: var(--bone-dim);
}
.poll-deadline .icon { width: 14px; height: 14px; color: var(--gold-bright); flex-shrink: 0; }
.poll-deadline strong { color: var(--gold-bright); font-weight: 700; }

.poll-main { display: flex; flex-direction: column; gap: 12px; padding: 30px 32px; min-width: 0; }
.poll-prompt { margin: 0 0 2px; font-size: 0.74rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--bone-dim); font-weight: 600; }
.poll-options { display: flex; flex-direction: column; gap: 10px; }
.poll-option {
  position: relative; display: flex; align-items: center; gap: 14px; min-height: 58px; padding: 10px 16px 10px 12px;
  background: var(--void); border: 1px solid var(--iron-dim); border-radius: 8px; cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.poll-option:hover { border-color: var(--gold-dim); background: #202024; transform: translateX(3px); }
.poll-option input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.poll-option-key {
  flex: 0 0 36px; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 6px; border: 1px solid var(--iron);
  font-family: var(--font-display); font-size: 1rem; font-weight: 600; color: var(--bone-dim); background: var(--panel);
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.poll-option-label { flex: 1; min-width: 0; font-size: 1rem; overflow-wrap: anywhere; }
.poll-option-check { flex: 0 0 20px; width: 20px; height: 20px; color: var(--gold-bright); opacity: 0; transform: scale(0.6); transition: opacity 0.15s ease, transform 0.15s ease; }
.poll-option:has(input:checked) { border-color: var(--gold); background: linear-gradient(90deg, rgba(209, 162, 79, 0.16), rgba(209, 162, 79, 0.05)); box-shadow: 0 0 0 1px var(--gold), 0 8px 22px rgba(209, 162, 79, 0.12); transform: none; }
.poll-option:has(input:checked) .poll-option-key { background: var(--gold); border-color: var(--gold-bright); color: var(--void); }
.poll-option:has(input:checked) .poll-option-check { opacity: 1; transform: none; }
.poll-option:has(input:focus-visible) { outline: 2px solid var(--gold-bright); outline-offset: 2px; }

.poll-error { margin: 0; }
.poll-submit {
  position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; width: 100%; min-height: 52px; margin-top: 6px; padding: 12px 20px;
  font-size: 0.95rem; letter-spacing: 0.02em; box-shadow: 0 6px 20px rgba(184, 35, 47, 0.35);
}
.poll-submit-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.poll-submit::after {
  content: ''; position: absolute; top: 0; left: -60%; width: 40%; height: 100%; pointer-events: none;
  background: linear-gradient(100deg, transparent 0%, rgba(255, 255, 255, 0.45) 50%, transparent 100%); filter: blur(3px); animation: pollShine 3.5s ease-in-out infinite;
}
@keyframes pollShine { 0%, 40% { left: -60%; } 100% { left: 130%; } }
.poll-submit:disabled { opacity: 0.55; cursor: not-allowed; box-shadow: none; }
.poll-submit:disabled::after { display: none; }
.poll-note { margin: 2px 0 0; font-size: 0.78rem; color: var(--bone-dim); text-align: center; }
/* Sem conta do jogo vinculada: no lugar das opções, o convite para vincular (só quem tem o jogo confirmado vota). */
.poll-main.poll-locked { align-items: center; justify-content: center; gap: 10px; text-align: center; }
.poll-locked-icon {
  display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%;
  border: 1px solid var(--iron); background: var(--void); color: var(--gold-bright);
}
.poll-locked-icon .icon { width: 20px; height: 20px; }
.poll-locked-title { margin: 0; font-family: var(--font-display); font-size: 1.2rem; font-weight: 600; color: var(--bone); text-wrap: balance; }
.poll-locked-text { margin: 0 0 6px; max-width: 42ch; font-size: 0.88rem; line-height: 1.5; color: var(--bone-dim); }
@media (prefers-reduced-motion: reduce) {
  .poll-card, .poll-option, .poll-option-check { animation: none; transition: none; }
  .poll-submit::after { display: none; }
}

/* Faixa em Minha Conta */
.poll-banner {
  display: flex; align-items: center; gap: 16px; margin-bottom: 20px; padding: 16px 20px; border: 1px solid var(--gold-dim); border-radius: 8px;
  background: radial-gradient(90% 200% at 0% 50%, rgba(184, 35, 47, 0.18) 0%, transparent 60%), var(--panel);
}
.poll-banner-seal { flex: 0 0 40px; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--gold); background: rgba(209, 162, 79, 0.1); box-shadow: 0 0 16px rgba(209, 162, 79, 0.22); }
.poll-banner-seal .icon { width: 18px; height: 18px; color: var(--gold-bright); }
.poll-banner-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.poll-banner-text strong { font-size: 0.92rem; }
.poll-banner-question { font-size: 0.84rem; color: var(--bone-dim); overflow-wrap: anywhere; }
.poll-banner-link { flex-shrink: 0; }

@media (max-width: 820px) {
  .poll-card { grid-template-columns: minmax(0, 1fr); }
  .poll-side { padding: 20px 20px 20px; border-right: 0; border-bottom: 1px solid var(--iron-dim); gap: 10px; }
  .poll-main { padding: 20px; }
  .poll-question { font-size: 1.4rem; }
  .poll-option:hover { transform: none; }
}
@media (max-width: 600px) {
  .poll-banner { flex-wrap: wrap; }
  .poll-banner-text { flex-basis: calc(100% - 60px); }
  .poll-banner-link { width: 100%; text-align: center; }
}

/* Selo de desconto: faixa diagonal no canto de cima, à direita, do cartão de pacote em promoção (o cartão tem overflow hidden e
   corta as pontas da faixa). Dourada — o vermelho já é do "Mais popular" e do botão de comprar. A estrela de favoritar desce
   para baixo da faixa. */
.promo-ribbon {
  position: absolute; z-index: 3; top: 20px; right: -38px; width: 138px; overflow: hidden; transform: rotate(45deg); pointer-events: none;
  padding: 6px 0; text-align: center;
  background: linear-gradient(180deg, #fbe6a6 0%, var(--gold-bright) 45%, var(--gold) 100%);
  border-top: 1px solid #fff2c7; border-bottom: 1px solid #a9812f;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.45), 0 0 16px rgba(232, 193, 121, 0.35);
}
.promo-ribbon-text { position: relative; display: block; font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; line-height: 1.1; letter-spacing: 0.04em; color: #2b1a04; }
.promo-ribbon::after {
  content: ''; position: absolute; top: 0; left: -60%; width: 40%; height: 100%;
  background: linear-gradient(100deg, transparent 0%, rgba(255, 255, 255, 0.7) 50%, transparent 100%); animation: promoRibbonShine 3.2s ease-in-out infinite;
}
@keyframes promoRibbonShine { 0%, 45% { left: -60%; } 100% { left: 140%; } }
.package-card.has-limited-offer .promo-ribbon { top: 54px; }
@media (prefers-reduced-motion: reduce) {
  .promo-ribbon::after { display: none; }
}