/* Vitrine do Neon War.
 *
 * As cores sao as do tema da loja original (glowbattle.store): fundo
 * azul-marinho #101e38, cartoes #172a48, texto #f4f7fb e o verde-limao neon
 * #b7ff35 como acento. Nenhum CSS do tema Shopify foi copiado: a folha e
 * propria, feita para as classes deste HTML.
 *
 * As cores entram como variaveis trocadas por scripts/gerar-vitrine.mjs a
 * partir de loja.config.json, para o dono mudar a marca num arquivo so.
 */
:root {
  --fundo: #101e38;
  --fundo-alt: #172a48;
  --texto: #f4f7fb;
  --acento: #b7ff35;
  --acento-tx: #101e38;
  --claro: #eef1ea;
  --suave: rgba(244, 247, 251, .62);
  --linha: rgba(244, 247, 251, .14);
  --raio: 14px;
  --larg: 1180px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--fundo);
  color: var(--texto);
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  /* Sem scroll horizontal em nenhuma largura: o conferir-vitrine.mjs acusa
     elemento mais largo que a tela, e o celular e onde a loja vende. */
  overflow-x: hidden;
}

body.gb-travado { overflow: hidden; }

img { max-width: 100%; height: auto; display: block; }

a { color: inherit; }

h1, h2, h3 { line-height: 1.18; margin: 0 0 .5em; font-weight: 800; letter-spacing: -.01em; }

.gb-wrap {
  width: 100%;
  max-width: var(--larg);
  margin: 0 auto;
  padding: 0 16px;
}

/* ------------------------------------------------------------------ faixa */
/* A faixa verde do topo ("Frete grátis · Pagamento por PIX") foi retirada a
   pedido do dono (27/10/2026). As duas informações continuam na página: o
   frete grátis aparece sob o preço e na lista de garantias do bloco de
   compra, e o PIX aparece ali e no checkout. */

/* ----------------------------------------------------------------- topo */
.gb-topo {
  position: sticky;
  top: 0;
  z-index: 30;
  background: var(--fundo);
  border-bottom: 1px solid var(--linha);
}

.gb-topo__in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 62px;
}

.gb-marca {
  display: inline-flex;
  align-items: baseline;
  gap: .3em;
  font-size: 21px;
  font-weight: 800;
  letter-spacing: -.02em;
  text-decoration: none;
}

.gb-marca span:last-child { color: var(--acento); }

.gb-marca img { height: 40px; width: auto; }

.gb-menu {
  display: none;
  gap: 24px;
  font-size: 14.5px;
  font-weight: 600;
}

@media (min-width: 820px) { .gb-menu { display: flex; } }

.gb-menu a { text-decoration: none; color: var(--suave); }

.gb-menu a:hover { color: var(--texto); }

.gb-carrinho {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: none;
  border: 1px solid var(--linha);
  border-radius: 999px;
  color: inherit;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  padding: 8px 15px;
  cursor: pointer;
}

.gb-carrinho:hover { border-color: var(--acento); }

.gb-carrinho svg { width: 18px; height: 18px; }

/* O [hidden] precisa vir antes da regra de display: sem isto o
   `display:inline-grid` ganha do atributo e o contador fica aparecendo "0"
   com o carrinho vazio. */
.gb-carrinho__n[hidden] { display: none; }

.gb-carrinho__n {
  background: var(--acento);
  color: var(--acento-tx);
  border-radius: 999px;
  min-width: 20px;
  height: 20px;
  display: inline-grid;
  place-items: center;
  font-size: 12px;
  font-weight: 800;
  padding: 0 5px;
}

/* ----------------------------------------------------------------- hero */
.gb-produto {
  display: grid;
  gap: 26px;
  padding: 26px 0 10px;
}

@media (min-width: 960px) {
  .gb-produto {
    grid-template-columns: minmax(0, 1fr) minmax(0, 440px);
    gap: 40px;
    align-items: start;
    padding: 36px 0 18px;
  }
}

/* galeria */
.gb-gal { display: grid; gap: 12px; }

.gb-gal__principal {
  background: var(--fundo-alt);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  overflow: hidden;
}

.gb-gal__principal img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

.gb-gal__minis {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: thin;
}

.gb-gal__minis button {
  flex: none;
  width: 74px;
  height: 74px;
  padding: 0;
  border: 2px solid var(--linha);
  border-radius: 10px;
  background: var(--fundo-alt);
  overflow: hidden;
  cursor: pointer;
}

.gb-gal__minis button.on { border-color: var(--acento); }

.gb-gal__minis img { width: 100%; height: 100%; object-fit: cover; }

/* bloco de compra */
.gb-compra h1 {
  font-size: 27px;
  margin: 0 0 10px;
}

@media (min-width: 960px) { .gb-compra h1 { font-size: 33px; } }

.gb-precos {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 6px;
}

.gb-preco {
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -.02em;
}

.gb-preco-de {
  color: var(--suave);
  text-decoration: line-through;
  font-size: 17px;
}

.gb-selo {
  background: var(--acento);
  color: var(--acento-tx);
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 800;
  padding: 3px 10px;
}

.gb-parcela { color: var(--suave); font-size: 14px; margin: 0 0 18px; }

.gb-qtd {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 14px;
}

.gb-qtd__rot { font-size: 14px; font-weight: 600; color: var(--suave); }

.gb-qtd__cx {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--linha);
  border-radius: 999px;
  overflow: hidden;
}

.gb-qtd__cx button {
  width: 42px;
  height: 44px;
  background: none;
  border: 0;
  color: inherit;
  font: inherit;
  font-size: 20px;
  cursor: pointer;
}

.gb-qtd__cx button:hover { background: var(--fundo-alt); }

.gb-qtd__cx input {
  width: 48px;
  height: 44px;
  border: 0;
  border-left: 1px solid var(--linha);
  border-right: 1px solid var(--linha);
  background: none;
  color: inherit;
  font: inherit;
  font-weight: 700;
  text-align: center;
  -moz-appearance: textfield;
}

.gb-qtd__cx input::-webkit-outer-spin-button,
.gb-qtd__cx input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.gb-btn {
  display: block;
  width: 100%;
  border: 1px solid var(--linha);
  border-radius: 999px;
  background: none;
  color: var(--texto);
  font: inherit;
  font-size: 16px;
  font-weight: 800;
  text-align: center;
  text-decoration: none;
  padding: 15px 20px;
  cursor: pointer;
}

.gb-btn--acento {
  background: var(--acento);
  color: var(--acento-tx);
  border-color: var(--acento);
}

.gb-btn--acento:hover { filter: brightness(1.07); }

.gb-btn + .gb-btn { margin-top: 10px; }

.gb-garantias {
  list-style: none;
  margin: 20px 0 0;
  padding: 18px 0 0;
  border-top: 1px solid var(--linha);
  display: grid;
  gap: 9px;
  font-size: 14px;
  color: var(--suave);
}

.gb-garantias li { display: flex; gap: 9px; align-items: flex-start; }

.gb-garantias svg { width: 17px; height: 17px; flex: none; margin-top: 3px; color: var(--acento); }

/* -------------------------------------------------------------- secoes */
.gb-sec { padding: 40px 0; }

.gb-sec--alt { background: var(--fundo-alt); }

.gb-sec h2 {
  font-size: 24px;
  text-align: center;
  margin: 0 0 8px;
}

@media (min-width: 820px) { .gb-sec h2 { font-size: 30px; } }

.gb-sec__sub {
  text-align: center;
  color: var(--suave);
  max-width: 620px;
  margin: 0 auto 28px;
}

.gb-cards {
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr;
}

@media (min-width: 640px) { .gb-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

@media (min-width: 980px) { .gb-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Galeria "Na prática, é isso aqui": as fotos de gente jogando.
   No celular é uma coluna. A partir de 760px vira 2 colunas e a PRIMEIRA foto
   (.gb-galeria__g) ocupa as duas, porque é a cena mais completa — o quintal
   à noite, que é o que explica o produto numa olhada. */
.gb-galeria {
  display: grid;
  gap: 14px;
  grid-template-columns: 1fr;
  margin-top: 26px;
}

@media (min-width: 760px) {
  .gb-galeria { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
  .gb-galeria__g { grid-column: 1 / -1; }
}

.gb-galeria figure {
  margin: 0;
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  overflow: hidden;
  background: var(--fundo-alt);
}

.gb-galeria img {
  display: block;
  width: 100%;
  height: auto;
  /* As fotos são quadradas (1024x1024) e aqui aparecem inteiras: `contain`
     não corta nada. Com `cover` a foto do quintal perdia as crianças — o
     recorte pegava pernas e grama —, e numa seção cujo trabalho é mostrar
     gente jogando, cortar a gente é o pior defeito possível. */
  aspect-ratio: 1 / 1;
  object-fit: contain;
  background: #0b1627;
}

@media (min-width: 760px) {
  /* Na faixa larga a primeira ocupa as duas colunas. Em 16:9 ela caberia
     numa faixa bonita, mas voltaria a cortar; então a proporção continua
     quadrada e a altura é limitada, que é o que evita o quadrado gigante no
     meio da página sem sacrificar o enquadramento. */
  .gb-galeria__g img { max-height: 540px; margin: 0 auto; width: auto; }
}

.gb-galeria figcaption {
  padding: 11px 14px 13px;
  font-size: 14px;
  color: var(--suave);
}

.gb-card {
  background: var(--fundo);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  padding: 20px;
}

.gb-sec--alt .gb-card { background: var(--fundo); }

.gb-card h3 { font-size: 17px; margin: 0 0 6px; }

.gb-card p { margin: 0; color: var(--suave); font-size: 14.5px; }

.gb-card__i {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: var(--acento);
  color: var(--acento-tx);
  margin: 0 0 13px;
}

.gb-card__i svg { width: 20px; height: 20px; }

/* o que vem na caixa */
.gb-caixa {
  display: grid;
  gap: 24px;
  align-items: center;
}

@media (min-width: 900px) { .gb-caixa { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; } }

.gb-caixa img { border-radius: var(--raio); border: 1px solid var(--linha); }

.gb-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }

.gb-lista li { display: flex; gap: 11px; align-items: flex-start; font-size: 15.5px; }

.gb-lista svg { width: 19px; height: 19px; flex: none; margin-top: 4px; color: var(--acento); }

/* depoimentos */
/* ------------------------------------------------------- depoimentos */
.gb-deps {
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr;
  margin-top: 26px;
}

@media (min-width: 700px) { .gb-deps { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.gb-dep {
  position: relative;
  margin: 0;
  background: var(--fundo-alt);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  padding: 22px 20px 18px;
  display: flex;
  flex-direction: column;
}

.gb-sec--alt .gb-dep { background: var(--fundo); }

/* Aspas decorativas atrás do texto: dizem "isto é fala de cliente" antes
   mesmo de ler. `aria-hidden` por ::before — leitor de tela não anuncia. */
.gb-dep::before {
  content: "\201C";
  position: absolute;
  top: -6px;
  right: 14px;
  font-size: 68px;
  line-height: 1;
  color: var(--acento);
  opacity: .14;
  pointer-events: none;
}

.gb-dep__estrelas {
  color: var(--acento);
  letter-spacing: 3px;
  font-size: 15px;
  text-shadow: 0 0 12px rgba(var(--acento-rgb), .35);
}

/* A frase é o que importa: maior que o resto e com ar para respirar. */
.gb-dep blockquote {
  margin: 12px 0 18px;
  font-size: 17px;
  line-height: 1.5;
  flex: 1;
}

.gb-dep blockquote::before { content: "\201C"; }
.gb-dep blockquote::after  { content: "\201D"; }

.gb-dep figcaption {
  display: flex;
  align-items: center;
  gap: 11px;
  padding-top: 14px;
  border-top: 1px solid var(--linha);
}

/* Inicial do nome num círculo: dá rosto a quem não tem foto, sem fingir que
   existe uma. Foto de banco de imagens aqui seria inventar a pessoa. */
.gb-dep__avatar {
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(var(--acento-rgb), .15);
  color: var(--acento);
  font-weight: 800;
  font-size: 16px;
}

.gb-dep__quem { display: flex; flex-direction: column; line-height: 1.35; }

.gb-dep__quem b {
  font-size: 14.5px;
  font-weight: 700;
}

.gb-dep__quem small {
  font-size: 12px;
  color: var(--suave);
}

/* NÃO declarar `.gb-garantias` aqui: a classe já tem dono lá em cima (a
   lista do bloco de compra, com os ícones). Uma segunda regra com o mesmo
   nome vence pela ordem e repinta aquela lista por tabela — foi o que
   aconteceu quando repeti as garantias nesta seção. As três já estão no
   topo, ao lado do botão de comprar, que é onde tiram o medo de comprar. */

/* perguntas */
.gb-faq { max-width: 760px; margin: 0 auto; display: grid; gap: 10px; }

.gb-faq__item {
  background: var(--fundo-alt);
  border: 1px solid var(--linha);
  border-radius: 12px;
  overflow: hidden;
}

.gb-sec--alt .gb-faq__item { background: var(--fundo); }

.gb-faq__item > button {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  background: none;
  border: 0;
  color: inherit;
  font: inherit;
  font-size: 15.5px;
  font-weight: 700;
  text-align: left;
  padding: 15px 18px;
  cursor: pointer;
}

.gb-faq__item > button::after {
  content: "+";
  font-size: 21px;
  font-weight: 400;
  color: var(--acento);
  flex: none;
}

.gb-faq__item.on > button::after { content: "\2212"; }

.gb-faq__r { display: none; padding: 0 18px 16px; color: var(--suave); font-size: 15px; }

.gb-faq__item.on .gb-faq__r { display: block; }

/* chamada final */
.gb-cta { text-align: center; }

.gb-cta .gb-btn { max-width: 380px; margin: 18px auto 0; }

/* ---------------------------------------------------------------- rodape */
.gb-rodape {
  border-top: 1px solid var(--linha);
  padding: 32px 0;
  font-size: 14px;
  color: var(--suave);
}

.gb-rodape__in {
  display: grid;
  gap: 18px;
}

@media (min-width: 760px) {
  .gb-rodape__in { grid-template-columns: 1fr auto; align-items: start; }
}

.gb-rodape a { text-decoration: none; }

.gb-rodape a:hover { color: var(--texto); text-decoration: underline; }

.gb-rodape__links { display: flex; flex-wrap: wrap; gap: 8px 18px; }

.gb-rodape__fim { margin: 22px 0 0; padding-top: 18px; border-top: 1px solid var(--linha); font-size: 13px; }

/* --------------------------------------------------------- gaveta/carrinho */
.gb-fundo {
  position: fixed;
  inset: 0;
  background: rgba(8, 15, 28, .66);
  z-index: 40;
}

/* O [hidden] ANTES da regra de display, pelo mesmo motivo do contador do
   carrinho e da tela de início do jogo: `display:flex` ganha do atributo, e
   a gaveta "fechada" continuava ocupando a faixa direita da tela,
   interceptando cliques. Invisível, então ninguém entendia por que o botão
   não respondia. */
.gb-gaveta[hidden], .gb-fundo[hidden] { display: none; }

.gb-gaveta {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(100%, 390px);
  background: var(--fundo);
  border-left: 1px solid var(--linha);
  z-index: 41;
  display: flex;
  flex-direction: column;
  padding: 18px;
  overflow-y: auto;
}

.gb-gaveta__topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.gb-gaveta__topo h2 { font-size: 19px; margin: 0; }

.gb-gaveta__x {
  background: none;
  border: 0;
  color: inherit;
  font-size: 27px;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
}

.gb-gaveta__itens { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 14px; }

.gb-item {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) auto auto;
  gap: 11px;
  align-items: center;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--linha);
}

.gb-item img { border-radius: 8px; background: var(--fundo-alt); }

.gb-item__tx { min-width: 0; }

.gb-item__tx b { display: block; font-size: 14px; font-weight: 700; }

.gb-item__tx span { font-size: 13.5px; color: var(--suave); }

.gb-item__qtd {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--linha);
  border-radius: 999px;
}

.gb-item__qtd button {
  width: 30px;
  height: 32px;
  background: none;
  border: 0;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.gb-item__qtd span { min-width: 22px; text-align: center; font-size: 14px; font-weight: 700; }

.gb-item__x {
  background: none;
  border: 0;
  color: var(--suave);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  padding: 0 2px;
}

.gb-gaveta__total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  font-size: 17px;
  margin: 0 0 14px;
}

.gb-gaveta__total b { font-size: 21px; font-weight: 800; }

.gb-gaveta__vazio { color: var(--suave); }

/* ------------------------------------------------------------- whatsapp */
.gb-zap {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 35;
  width: 54px;
  height: 54px;
  border-radius: 999px;
  background: #25d366;
  color: #fff;
  display: grid;
  place-items: center;
  box-shadow: 0 8px 24px -8px rgba(0, 0, 0, .6);
}

.gb-zap svg { width: 29px; height: 29px; }

/* ------------------------------------------------------- acessibilidade */
.gb-pula {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--acento);
  color: var(--acento-tx);
  padding: 10px 16px;
  font-weight: 700;
  z-index: 60;
}

.gb-pula:focus { left: 0; }

:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }

/* =====================================================================
   EFEITOS
   =====================================================================
   Duas coisas, nesta ordem de importância:

   1. POLIMENTO — botão que reage ao mouse e ao clique, foto que cresce de
      leve, seção que surge ao rolar. É o que separa "página profissional"
      de "página parada": sem isso o site parece quebrado em movimento
      nenhum, inclusive nos botões.

   2. BRILHO NEON — o produto É luz no escuro, então o site ecoa isso no
      preço, no botão de comprar e nas fotos. Usado com parcimônia: se tudo
      brilha, nada chama atenção, e a página vira árvore de Natal.

   Tudo aqui é desligado por `prefers-reduced-motion` lá no fim do arquivo —
   quem configurou o sistema para reduzir movimento (enjoo, vertigem,
   epilepsia fotossensível) vê a página inteira, parada. */

:root {
  /* O verde-limão em rgb cru, para montar sombras com transparência.
     `color-mix` resolveria isso sozinho, mas não existe em navegador de
     celular antigo — e aqui metade das visitas vem de celular. */
  --acento-rgb: 183, 255, 53;
  --brilho: 0 0 24px rgba(var(--acento-rgb), .45);
  --brilho-forte: 0 0 34px rgba(var(--acento-rgb), .62);
}

/* --------------------------------------------- escolha do kit */
/* Três kits (2, 4 e 8 jogadores) como variantes do mesmo produto. Fica
   ACIMA da quantidade e dos botões: a primeira decisão é qual kit, a
   segunda é quantos. */
.gb-kits {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 0 0 18px;
}

.gb-kit {
  border: 1px solid var(--linha);
  border-radius: 12px;
  background: none;
  color: var(--texto);
  font: inherit;
  padding: 11px 8px;
  cursor: pointer;
  text-align: center;
  transition: border-color .16s ease, background-color .16s ease, transform .14s ease;
}

.gb-kit:hover { transform: translateY(-1px); border-color: rgba(var(--acento-rgb), .5); }

.gb-kit.on {
  border-color: var(--acento);
  background: rgba(var(--acento-rgb), .1);
  box-shadow: 0 0 16px rgba(var(--acento-rgb), .18);
}

.gb-kit b {
  display: block;
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.25;
}

.gb-kit.on b { color: var(--acento); }

.gb-kit span {
  display: block;
  font-size: 13px;
  color: var(--suave);
  margin-top: 3px;
}

.gb-kit.on span { color: var(--texto); }

@media (max-width: 380px) {
  /* Telas bem estreitas: os três ainda cabem, com fonte menor. Empilhar
     empurraria os botões de compra para baixo da dobra. */
  .gb-kit { padding: 9px 4px; }
  .gb-kit b { font-size: 12.5px; }
  .gb-kit span { font-size: 12px; }
}

/* --------------------------------------------------------- vídeo */
/* Demonstração montada com as próprias fotos do produto. Fica logo abaixo do
   bloco de compra: quem rolou até aqui já viu o preço, e o vídeo é o que
   empurra a decisão. */
.gb-video {
  max-width: 620px;
  margin: 0 auto;
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  overflow: hidden;
  background: #080f1d;
  line-height: 0; /* tira o vão que o inline-block do vídeo deixaria */
}

.gb-video video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
}

/* ------------------------------------------- simulador de batalha */
/* Mini-jogo que demonstra o produto. Nasce `hidden` no HTML e só aparece
   quando o JavaScript liga — sem ele, nenhuma caixa quebrada na página. */

.gb-jogo {
  margin-top: 26px;
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  background: #0b1627;
  overflow: hidden;
}

.gb-jogo__hud {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--linha);
}

.gb-jogo__times { display: flex; gap: 8px; flex-wrap: wrap; }

.gb-jogo__time {
  border: 1px solid var(--linha);
  background: none;
  color: var(--texto);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  border-radius: 999px;
  padding: 7px 14px;
  cursor: pointer;
  transition: border-color .16s ease, box-shadow .2s ease, color .16s ease;
}

.gb-jogo__time:hover { border-color: var(--c); }

/* O time escolhido acende na própria cor — é o colete do brinquedo. */
.gb-jogo__time.on {
  color: var(--c);
  border-color: var(--c);
  box-shadow: 0 0 14px color-mix(in srgb, var(--c) 45%, transparent);
}

/* Navegador sem color-mix (celular antigo) ignora a linha acima e fica só
   com a borda colorida, que já distingue o time escolhido. */

.gb-jogo__placar {
  display: flex;
  gap: 16px;
  align-items: center;
  font-size: 13.5px;
  color: var(--suave);
}

.gb-jogo__placar b {
  color: var(--texto);
  font-size: 17px;
  margin-left: 4px;
}

/* Multiplicador de combo: só aparece a partir de 2 acertos seguidos, e
   pulsa a cada subida. É o indicador que faz a pessoa querer não errar. */
.gb-jogo__combo[hidden] { display: none; }

.gb-jogo__combo {
  display: inline-flex;
  align-items: center;
  background: rgba(var(--acento-rgb), .16);
  color: var(--acento);
  border-radius: 999px;
  padding: 3px 11px;
  font-weight: 800;
  font-size: 13px;
  animation: gb-combo-pulsa .3s ease;
}

.gb-jogo__combo b { color: var(--acento); font-size: 15px; margin-left: 1px; }

@keyframes gb-combo-pulsa {
  0%   { transform: scale(1); }
  45%  { transform: scale(1.22); }
  100% { transform: scale(1); }
}

/* ---------------------------------------------------- modos de arma */
/* Os quatro são os mesmos do produto. No celular rolam na horizontal em vez
   de quebrar em duas linhas e empurrar a arena para baixo da dobra. */
.gb-jogo__armas {
  display: flex;
  gap: 8px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--linha);
  overflow-x: auto;
  scrollbar-width: none;
}

.gb-jogo__armas::-webkit-scrollbar { display: none; }

.gb-jogo__arma {
  flex: 1 0 auto;
  min-width: 128px;
  border: 1px solid var(--linha);
  border-radius: 10px;
  background: none;
  color: var(--texto);
  font: inherit;
  text-align: left;
  padding: 9px 12px;
  cursor: pointer;
  transition: border-color .16s ease, background-color .16s ease, transform .14s ease;
}

.gb-jogo__arma:hover { transform: translateY(-1px); border-color: rgba(var(--acento-rgb), .45); }

.gb-jogo__arma.on {
  border-color: var(--acento);
  background: rgba(var(--acento-rgb), .09);
}

.gb-jogo__arma b { display: block; font-size: 13.5px; font-weight: 700; }
.gb-jogo__arma.on b { color: var(--acento); }
.gb-jogo__arma small { display: block; font-size: 11.5px; color: var(--suave); margin-top: 1px; }

.gb-jogo__arena {
  position: relative;
  /* Quadrada no celular, mais larga no computador: a arena acompanha o
     formato da tela em vez de virar uma faixa fina ou um quadrado gigante. */
  aspect-ratio: 1 / 1;
  transition: aspect-ratio .3s ease;
  background:
    radial-gradient(circle at 50% 45%, rgba(53, 184, 255, .07), transparent 62%),
    #080f1d;
  cursor: crosshair;
  touch-action: manipulation; /* sem atraso de 300ms no toque */
}

@media (min-width: 760px) { .gb-jogo__arena { aspect-ratio: 16 / 7; } }

/* Terminado o jogo, a arena encolhe: sem alvo nenhum, aquele retângulo
   inteiro vira um vazio preto empurrando o resultado (e o botão de compra)
   para baixo da dobra. O que importa ali é a nota e o "quero o kit". */
.gb-jogo--fim .gb-jogo__arena { aspect-ratio: 16 / 3; }

@media (max-width: 759px) { .gb-jogo--fim .gb-jogo__arena { aspect-ratio: 16 / 5; } }

/* O [hidden] precisa vir ANTES da regra de display: sem isto o `display:flex`
   ganha do atributo e a tela de "Começar" fica por cima da arena durante a
   partida inteira. Mesmo tropeço do contador do carrinho, lá em cima. */
.gb-jogo__inicio[hidden] { display: none; }

.gb-jogo__inicio {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 20px;
  text-align: center;
}

.gb-jogo__inicio .gb-btn { width: auto; min-width: 190px; }
.gb-jogo__inicio p { margin: 0; color: var(--suave); font-size: 14px; }

/* O alvo: um hexágono aceso, como o colete de peito do produto.
   O tamanho vem do modo de arma (--tam): o laser tem alvo pequeno e vale
   mais, o plasma tem alvo grande e vale muito. */
.gb-jogo__alvo {
  position: absolute;
  width: var(--tam, 62px);
  height: var(--tam, 62px);
  margin: calc(var(--tam, 62px) / -2) 0 0 calc(var(--tam, 62px) / -2);
  padding: 0;
  border: 0;
  background: none;
  cursor: crosshair;
  /* UMA animação só, cuidando de opacidade e tamanho.
     Eram duas (entrar + encolher) e isso deu errado de um jeito silencioso:
     as duas disputavam as mesmas propriedades, o `animation-duration` com
     dois valores se desencontrava do que o JavaScript escrevia por modo de
     arma, e o alvo ficava parado em opacity 0,3 — apagado, que é o oposto
     do que o produto é. Com uma animação só não há pareamento para errar.
     A duração vem do JS (arma.vida). */
  animation: gb-alvo-vida 1250ms linear forwards;
}

/* Entra acendendo e crescendo, vive no tamanho cheio, e encolhe devagar até
   70% — o encolher dá urgência sem precisar de texto dizendo "rápido". */
/* O alvo fica no tamanho CHEIO quase a vida toda e só apaga no finalzinho.
   Antes ele encolhia do começo ao fim, e mirar num alvo que diminui enquanto
   você move o mouse é duplamente injusto — o jogo ficava difícil por um
   motivo que nem aparece na tela. Agora o aviso de "vai sumir" é o esmaecer
   nos últimos 20%, que não atrapalha a mira. */
@keyframes gb-alvo-vida {
  0%   { opacity: 0; transform: scale(.7); }
  8%   { opacity: 1; transform: scale(1); }
  80%  { opacity: 1; transform: scale(1); }
  100% { opacity: .45; transform: scale(.92); }
}

/* Encolhe até 70%, não até 42%. O alvo do laser nasce com 40px: encolhendo
   para 42% ele terminava com 17px, menor que a ponta de um dedo (a
   recomendação de alvo tocável é 44px). O jogo ficava injogável justamente
   no modo que vale mais ponto. Em 70% ele ainda comunica urgência sem virar
   um alvo impossível. */
/* Sumiu sozinho: pisca e apaga, para a pessoa entender que PERDEU aquele
   alvo (e o combo junto) em vez de ele simplesmente desaparecer. */
.gb-jogo__alvo--fugiu {
  pointer-events: none;
  animation: gb-alvo-fugiu .2s ease-out forwards;
}

@keyframes gb-alvo-fugiu {
  to { transform: scale(.3); opacity: 0; filter: grayscale(1); }
}

/* Pontos ganhos, subindo do ponto do acerto. */
.gb-jogo__ganho {
  position: absolute;
  transform: translate(-50%, -50%);
  color: var(--c, #fff);
  font-weight: 800;
  font-size: 19px;
  text-shadow: 0 0 12px var(--c, #fff);
  pointer-events: none;
  animation: gb-ganho .7s ease-out forwards;
}

@keyframes gb-ganho {
  0%   { opacity: 1; transform: translate(-50%, -50%) scale(.8); }
  30%  { opacity: 1; transform: translate(-50%, -115%) scale(1.15); }
  100% { opacity: 0; transform: translate(-50%, -210%) scale(1); }
}

/* Flash na arena: verde no acerto, vermelho no tiro no vazio. */
.gb-jogo__arena--acerto { box-shadow: inset 0 0 70px rgba(var(--acento-rgb), .2); }
.gb-jogo__arena--erro   { box-shadow: inset 0 0 70px rgba(255, 70, 70, .22); }

/* Contagem 3-2-1 antes de valer. */
.gb-jogo__contagem[hidden] { display: none; }

.gb-jogo__contagem {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 64px;
  font-weight: 800;
  color: var(--acento);
  text-shadow: 0 0 30px rgba(var(--acento-rgb), .6);
  pointer-events: none;
}

.gb-jogo__contagem--pulsa { animation: gb-contagem .55s ease-out; }

@keyframes gb-contagem {
  0%   { opacity: 0; transform: scale(1.7); }
  35%  { opacity: 1; transform: scale(1); }
  100% { opacity: .25; transform: scale(.9); }
}

/* Recorde pessoal, na tela de início. Fica no navegador de quem joga e não
   vai para servidor nenhum. */
.gb-jogo__recorde[hidden] { display: none; }
.gb-jogo__recorde { margin: 0; font-size: 13px; color: var(--suave); }
.gb-jogo__recorde b { color: var(--acento); }

/* Rodapé: botão de som e a dica do combo. */
.gb-jogo__rodape {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 16px;
  border-top: 1px solid var(--linha);
  font-size: 12.5px;
  color: var(--suave);
}

.gb-jogo__som {
  border: 1px solid var(--linha);
  background: none;
  color: var(--suave);
  font: inherit;
  font-size: 12.5px;
  border-radius: 999px;
  padding: 5px 12px;
  cursor: pointer;
  transition: border-color .16s ease, color .16s ease;
}

.gb-jogo__som:hover { border-color: rgba(var(--acento-rgb), .5); color: var(--texto); }
.gb-jogo__som.on { border-color: var(--acento); color: var(--acento); }

.gb-jogo__detalhe {
  margin: -6px 0 14px;
  font-size: 13.5px;
  color: var(--suave);
}

@media (max-width: 520px) {
  .gb-jogo__dica { display: none; } /* no celular o espaço é do botão */
}

/* O HALO vem do ::before do botão, não do hexágono.
   O `clip-path` recorta tudo o que sai da forma, inclusive o box-shadow do
   próprio elemento — o alvo ficava chapado, sem o brilho que é a cara do
   produto. Aqui o halo é um círculo desfocado numa camada ATRÁS, fora do
   recorte. */
.gb-jogo__alvo::before {
  content: "";
  position: absolute;
  inset: -45%;
  border-radius: 50%;
  background: radial-gradient(circle, var(--c) 0%, transparent 68%);
  opacity: .55;
  pointer-events: none;
}

.gb-jogo__alvo span {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  background: var(--c);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}

/* Miolo claro, como o visor do colete real aceso. Fica dentro do recorte
   do pai, que é o que lhe dá a forma de hexágono menor. */
.gb-jogo__alvo span::after {
  content: "";
  position: absolute;
  inset: 30%;
  background: #fff;
  opacity: .62;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}

/* Acerto: o alvo "apaga" crescendo, igual ao colete quando leva o tiro. */
.gb-jogo__alvo--morto {
  pointer-events: none;
  animation: gb-alvo-morre .17s ease-out forwards;
}

@keyframes gb-alvo-morre {
  to { transform: scale(1.7); opacity: 0; }
}

.gb-jogo__aviso {
  margin: 0;
  padding: 0 16px;
  min-height: 0;
  font-size: 0;
  /* Só para leitor de tela: o texto é anunciado, não ocupa espaço na página. */
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.gb-jogo__fim {
  padding: 18px 16px 20px;
  border-top: 1px solid var(--linha);
  text-align: center;
}

.gb-jogo__nota {
  margin: 0 0 14px;
  font-size: 15.5px;
  line-height: 1.5;
}

.gb-jogo__acoes {
  display: grid;
  gap: 10px;
  max-width: 520px;
  margin: 0 auto;
}

@media (min-width: 620px) {
  .gb-jogo__acoes { grid-template-columns: auto 1fr; }
}

/* ------------------------------------------------ efeitos de rolagem */

/* Rolagem suave nos links internos do menu ("Como funciona", "Perguntas").
   Antes o salto era seco e a pessoa perdia a noção de onde foi parar.
   `scroll-padding-top` desconta a altura do cabeçalho fixo, senão o título
   da seção fica escondido atrás dele. */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 86px;
}

/* O cabeçalho encolhe e escurece ao descer: devolve espaço de tela no
   celular (onde cada pixel conta) e dá a sensação de que a página responde
   a quem rola. A classe entra pelo loja.js. */
.gb-topo {
  transition: padding .22s ease, background-color .22s ease, box-shadow .22s ease;
}

.gb-topo--rolado {
  background: rgba(8, 15, 29, .92);
  box-shadow: 0 6px 24px rgba(0, 0, 0, .35);
  backdrop-filter: blur(10px);
}

@supports not (backdrop-filter: blur(4px)) {
  /* Sem suporte ao desfoque, fundo sólido — senão o menu fica ilegível
     por cima das fotos claras. */
  .gb-topo--rolado { background: #080f1d; }
}

/* Barra de progresso da leitura, no topo. Mostra o quanto falta da página:
   numa landing longa, é o que evita a sensação de "isso não acaba nunca".
   Só aparece depois que a pessoa começa a rolar. */
.gb-progresso {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 100%;
  transform: scaleX(0);
  transform-origin: 0 50%;
  background: var(--acento);
  box-shadow: 0 0 12px rgba(var(--acento-rgb), .6);
  z-index: 40;
  opacity: 0;
  transition: opacity .25s ease;
  pointer-events: none;
}

.gb-progresso--on { opacity: 1; }

/* Profundidade nas fotos de gente jogando: a imagem desliza um pouco mais
   devagar que a página. É sutil de propósito — parallax forte embrulha o
   estômago e atrapalha quem rola rápido procurando o preço. */
.js-anima .gb-galeria figure img {
  will-change: transform;
}

/* ------------------------------------------------------- 1. polimento */

/* Botões: reagem ao passar o mouse e AFUNDAM ao clicar. O afundar importa
   mais do que parece — é o retorno que diz "o clique pegou", e sem ele o
   cliente clica de novo achando que não funcionou. */
.gb-btn {
  transition: transform .14s ease, box-shadow .22s ease, filter .18s ease,
              background-color .18s ease, border-color .18s ease;
}

.gb-btn:hover { transform: translateY(-1px); }
.gb-btn:active { transform: translateY(1px); transition-duration: .05s; }

/* O botão secundário ("Adicionar ao carrinho") ganha contorno aceso no
   hover, para não parecer desativado ao lado do verde. */
.gb-btn:not(.gb-btn--acento):hover {
  border-color: rgba(var(--acento-rgb), .55);
  background: rgba(var(--acento-rgb), .07);
}

/* Miniaturas da galeria: a escolhida fica evidente. Antes só mudava a cor
   da borda, que passava despercebido numa tela de celular. */
.gb-gal__minis button {
  transition: transform .16s ease, border-color .16s ease, box-shadow .2s ease;
}

.gb-gal__minis button:hover { transform: translateY(-2px); }

.gb-gal__minis button.on {
  box-shadow: 0 0 0 1px var(--acento), 0 0 14px rgba(var(--acento-rgb), .35);
}

/* Cards de benefício e fotos da seção "Na prática": sobem de leve. */
.gb-card, .gb-galeria figure {
  transition: transform .2s ease, border-color .2s ease, box-shadow .25s ease;
}

.gb-card:hover, .gb-galeria figure:hover {
  transform: translateY(-3px);
  border-color: rgba(var(--acento-rgb), .3);
}

/* Perguntas frequentes: o "+" vira "−" girando, em vez de trocar seco. */
.gb-faq__item > button::after { transition: transform .2s ease; }
.gb-faq__item.on > button::after { transform: rotate(180deg); }

/* Entrada ao rolar — SEM nunca esconder o conteúdo.
   O elemento entra deslizando de baixo e levemente esmaecido (.55), nunca
   invisível. A diferença não é detalhe:

   A primeira versão zerava a opacidade, e a página ficava em branco do meio
   para baixo até o visitante rolar — 28 elementos de uma vez. Tentei .001
   em seguida, o que resolve no papel (o elemento "existe") e não resolve
   nada na prática: .001 é invisível a olho nu, e quem abrisse num celular
   lento continuaria vendo página vazia.

   Com .55 o cliente SEMPRE lê a página, mesmo que o JavaScript nunca rode,
   trave ou chegue atrasado. O movimento continua perceptível ao rolar, que
   é o efeito que se queria. Numa loja, conteúdo legível ganha de animação
   bonita toda vez que os dois entram em conflito. */
.js-anima .gb-revela {
  opacity: .55;
  transform: translateY(12px);
  transition: opacity .45s ease, transform .5s cubic-bezier(.22, .61, .36, 1);
}

.js-anima .gb-revela--visivel {
  opacity: 1;
  transform: none;
}

/* ---------------------------------------------------- 2. brilho neon */

/* O preço é o número que decide a compra: ganha o halo mais visível. */
.gb-preco {
  text-shadow: 0 0 18px rgba(var(--acento-rgb), .3);
}

/* O botão de comprar respira. 3,2s é lento de propósito: rápido vira
   pisca-pisca e cansa antes de o cliente terminar de ler a página. */
.gb-btn--acento {
  box-shadow: var(--brilho);
  animation: gb-pulsa 3.2s ease-in-out infinite;
}

.gb-btn--acento:hover {
  box-shadow: var(--brilho-forte);
  animation: none; /* no hover a atenção já é dele; pulsar vira ruído */
}

@keyframes gb-pulsa {
  0%, 100% { box-shadow: 0 0 18px rgba(var(--acento-rgb), .32); }
  50%      { box-shadow: 0 0 30px rgba(var(--acento-rgb), .5); }
}

/* Selo de desconto e o contador do carrinho: acesos, sem animação. */
.gb-selo { box-shadow: 0 0 16px rgba(var(--acento-rgb), .4); }
.gb-carrinho__n { box-shadow: 0 0 12px rgba(var(--acento-rgb), .5); }

/* Fotos de gente jogando: borda acesa no hover. O brilho é da cor do
   produto, não do acento, porque a foto já tem azul e rosa dela. */
.gb-galeria figure:hover {
  box-shadow: 0 0 26px rgba(90, 170, 255, .22);
}

/* Título de seção com um fio de luz embaixo — o mesmo gesto do produto:
   uma linha acesa no escuro. */
.gb-sec h2 {
  position: relative;
  padding-bottom: 14px;
}

.gb-sec h2::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 54px;
  height: 2px;
  margin-left: -27px;
  border-radius: 2px;
  background: var(--acento);
  box-shadow: 0 0 14px rgba(var(--acento-rgb), .7);
}

/* O h2 do "O que vem na caixa" é alinhado à esquerda (style inline no
   gerador), então o fio o acompanha em vez de ficar centralizado solto. */
.gb-caixa h2::after { left: 0; margin-left: 0; }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
  /* Sem transição, o estado inicial de `gb-revela` deixaria a seção
     invisível para sempre. Aqui ela nasce visível. */
  .js-anima .gb-revela { opacity: 1; transform: none; }

  /* O jogo continua jogável, só perde o movimento decorativo. Duas regras
     específicas porque o `animation-duration: .001ms` acima quebraria as
     duas de um jeito ruim: */

  /* 1. O alvo encolhe durante toda a sua vida. Com a duração zerada ele
        nasceria já minúsculo e seria impossível acertar. Aqui ele fica
        parado no tamanho cheio — o tempo de vida continua valendo, só não
        é mais anunciado pelo encolhimento. */
  .gb-jogo__alvo { animation: none !important; transform: none !important; }

  /* 2. O número de pontos subindo apareceria e sumiria no mesmo quadro.
        Fica estático por um instante, tempo de ser lido. */
  .gb-jogo__ganho { animation: none !important; opacity: 1; }

  /* Flash de acerto e erro saem: é piscar de tela, exatamente o que quem
     liga essa preferência está evitando. */
  .gb-jogo__arena--acerto, .gb-jogo__arena--erro { box-shadow: none !important; }
}