/* GohBomb, landing page.
   GohBomb (landing GoH, 05/11): o site segue o do Game of Heroes (o jogo-mãe) e a HUD nova do jogo, refeito no padrão
   do GoH: cabeçalho fixo com a "jornada" que enche ao rolar, topo de pixel art à noite com a demonstração ao vivo de uma
   partida, etiquetas em pílula dourada, letreiros na Alagard (fonte de pixel medieval, só nos letreiros), a Nunito em
   todo o resto, cartões escuros de borda dourada com folhinhas nos cantos e o botão principal dourado. Antes era o
   "tema GoH, etapa 1" (03/11), com as molduras de bronze e a Pixelify Sans nos títulos. */

/* ---------- Letras ----------
   As duas moram no próprio site (fontes/, com a licença e a origem ao lado), sem o Google Fonts: nenhum pedido a
   terceiros ao abrir a página (privacidade e CSP). A Nunito vem em pedaços com o unicode-range do Google: o navegador só
   baixa o pedaço que a página escreve. A Alagard (GohBomb) não tem acentos, cirílico, tailandês nem vietnamita: o que
   faltar cai na Nunito, letra por letra; em russo, tailandês e vietnamita os letreiros vão direto na Nunito. */
@font-face {
  font-family: "Alagard GohBomb";
  src: url("fontes/alagard-goh.ttf") format("truetype");
  font-weight: 400 900;
  font-display: swap;
}
@font-face {
  font-family: "Nunito";
  src: url("fontes/nunito-cyrillic.woff2") format("woff2");
  font-weight: 200 1000;
  font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Nunito";
  src: url("fontes/nunito-vietnamese.woff2") format("woff2");
  font-weight: 200 1000;
  font-display: swap;
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301,
    U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: "Nunito";
  src: url("fontes/nunito-latin-ext.woff2") format("woff2");
  font-weight: 200 1000;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
    U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Nunito";
  src: url("fontes/nunito-latin.woff2") format("woff2");
  font-weight: 200 1000;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- A paleta ----------
   Os números do site do GoH e da HUD nova do jogo (GohEstiloGoh.cs, GohRaridade.cs), com os nomes --goh-* da tela de
   carregamento do jogo (TemplateData/style.css). */
:root {
  --goh-fundo: #0f141b;
  --goh-fundo-escuro: #0a0e13;
  --goh-painel: #161c25;
  --goh-painel-2: #11161d;
  --goh-painel-claro: #1d2530;
  --goh-trilho: #0a0d12;
  /* a borda dourada fina dos cartões (a comum, a clara e a acesa do escolhido) */
  --goh-borda: #7d5f33;
  --goh-borda-clara: #b8894a;
  --goh-borda-acesa: #e9b552;
  --goh-contorno: #07090c;
  /* o dourado */
  --goh-ouro-claro: #ffe9a8;
  --goh-ouro: #f4c65b;
  --goh-ouro-escuro: #d49a2c;
  --goh-ouro-texto: #2b1705;
  --goh-ouro-fundo: #3a2812;
  --goh-ouro-fundo-escuro: #24180b;
  --goh-madeira: #8a5a1c;
  --goh-dourado: #f2c14e;
  --goh-dourado-fosco: #e3b35a;
  /* as letras */
  --goh-texto: #f4efe4;
  --goh-texto-2: #aab3bf;
  --goh-texto-3: #d9dee6;
  /* a barra ciano (a jornada, como o XP do GoH) e o verde do "+" */
  --goh-ciano: linear-gradient(180deg, #8ff4ff, #22c4e8 55%, #1588b8);
  --goh-verde: linear-gradient(180deg, #7fe56d, #2f9a36);
  --goh-botao-ouro: linear-gradient(180deg, #ffe9a8 0%, #f4c65b 48%, #d49a2c 100%);
  /* o PIX */
  --pix: #32bcad;
  --pix-claro: #6edecf;
  /* as raridades do Farm e as categorias do PvP (GohRaridade.cs) */
  --rar-comum: #9aa3ad;
  --rar-raro: #4cc552;
  --rar-super-raro: #a45ee5;
  --rar-epico: #f0509f;
  --rar-lendario: #f5b82e;
  --rar-super-lendario: #ff3b4f;
  /* os cantos */
  --goh-raio: 8px;
  --goh-raio-cartao: 12px;
  /* a setinha de ouro e a setinha para baixo, como máscara */
  --goh-seta: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 18'%3E%3Cpath d='M3 1l9 8-9 8' fill='none' stroke='black' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --goh-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 12'%3E%3Cpath d='M2 2l7 7 7-7' fill='none' stroke='black' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  /* a letra do texto (com a tailandesa do sistema para o "ไทย" da lista de idiomas, que a Nunito não tem) e a dos
     letreiros */
  --goh-letra: "Nunito", system-ui, -apple-system, "Segoe UI", Roboto, "Leelawadee UI", "Noto Sans Thai", "Thonburi", sans-serif;
  --goh-letreiro: "Alagard GohBomb", "Nunito", sans-serif;
  --largura: 1200px;
  --altura-topo: 76px;
}

/* GohBomb (idioma): a Alagard não tem o cirílico, o tailandês nem os acentos empilhados do vietnamita: nesses três os
   letreiros passam para a Nunito (no tailandês, com a letra tailandesa do sistema logo depois dela). */
html:lang(th) { --goh-letra: "Nunito", "Leelawadee UI", "Noto Sans Thai", "Thonburi", "Tahoma", system-ui, sans-serif; }
html:lang(ru), html:lang(th), html:lang(vi) { --goh-letreiro: var(--goh-letra); }

/* fora do inglês, a página fica invisível até a tradução chegar (no máximo 3 s; ver o <head> do index.html) */
html.i18n-carregando body { visibility: hidden; }

* { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--altura-topo) + 12px); }

body {
  margin: 0;
  font: 600 17px/1.6 var(--goh-letra);
  color: var(--goh-texto-3);
  background-color: var(--goh-fundo);
  background-image:
    radial-gradient(ellipse 50% 900px at 0% 1800px, rgba(94, 240, 220, 0.04), transparent 70%),
    radial-gradient(ellipse 50% 900px at 100% 3600px, rgba(233, 196, 106, 0.04), transparent 70%),
    radial-gradient(ellipse 50% 900px at 0% 5600px, rgba(94, 240, 220, 0.035), transparent 70%);
  background-repeat: no-repeat;
}

/* o que vaza de propósito (as folhinhas dos cantos) não abre rolagem para o lado */
main { overflow-x: clip; }

img { max-width: 100%; }
a { color: var(--goh-ouro-claro); }
:focus-visible { outline: 2px solid var(--goh-dourado-fosco); outline-offset: 3px; }
::selection { background: var(--goh-dourado-fosco); color: #1a1206; }

.conteudo { width: min(var(--largura), 100% - 48px); margin-inline: auto; }

/* pixel art ampliada sem borrar */
[data-bomba], [data-heroi], .elenco img, .palco__heroi, .hud__placar img, .hud__itens img, .atalhos img, .menu__icone img,
.moeda img, .recurso > img, .modo h3 img, .passos-jogo img, .pilula img, .botao-pix img, .botao-jogar img { image-rendering: pixelated; }
.hud__itens img { image-rendering: auto; }

h1, h2, h3, h4 { margin: 0; line-height: 1.2; color: var(--goh-texto); font-weight: 900; }
p { margin: 0 0 0.8em; }

/* GohBomb (idioma, 02/11): palavras longas (alemão, russo, filipino) quebram em vez de vazar dos cartões estreitos */
h2, h3, h4, p, li, figcaption { overflow-wrap: break-word; }
.modos > *, .arenas > li, .bombas > li, .moedas > li, .recursos > li, .novidades > li, .passos-jogo > li, .elenco > li,
.raridades > li, .classes > *, .recurso > div, .moeda > div { min-width: 0; }

/* ---------- O letreiro (a Alagard) ----------
   Fonte de pixel desenhada em 16 px: só em múltiplos inteiros de 16, para os pixels caírem inteiros na tela. */
.letreiro {
  font-family: var(--goh-letreiro);
  font-weight: 400;
  font-size: 48px;
  line-height: 1.1;
  letter-spacing: 0.01em;
  color: var(--goh-texto);
  text-shadow: 0 3px 0 #000, 0 0 18px rgba(0, 0, 0, 0.6);
  -webkit-font-smoothing: none;
  font-smooth: never;
  text-wrap: balance;
}
.letreiro--ouro {
  color: var(--goh-ouro);
  background: linear-gradient(180deg, #fff1c2 0%, var(--goh-ouro) 46%, #d8952a 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: none;
  filter: drop-shadow(0 3px 0 #3a2009) drop-shadow(0 0 1px #1a0d02);
}
html:lang(ru) .letreiro, html:lang(th) .letreiro, html:lang(vi) .letreiro { font-weight: 900; letter-spacing: 0; -webkit-font-smoothing: auto; }

/* ---------- As peças do GoH ---------- */

/* o painel grande: o azul-escuro com a borda dourada fina (o "moldura" do GoH) */
.moldura {
  position: relative;
  border: 2px solid var(--goh-borda-clara);
  border-radius: var(--goh-raio-cartao);
  background: linear-gradient(180deg, var(--goh-painel-claro), var(--goh-painel-2));
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.6), 0 0 0 1px var(--goh-contorno), 0 18px 40px rgba(0, 0, 0, 0.45);
}
/* a de ouro, no que é principal (o token, o PIX) */
.moldura--ouro {
  border-color: var(--goh-borda-acesa);
  background:
    radial-gradient(ellipse 80% 70% at 50% 0%, rgba(233, 181, 82, 0.12), transparent 70%),
    linear-gradient(180deg, #2a2216, #17130d);
  box-shadow: inset 0 0 0 1px rgba(255, 233, 168, 0.18), 0 0 0 1px var(--goh-contorno), 0 0 26px rgba(233, 181, 82, 0.18);
}
/* o cartão de dentro: o azul-escuro com a borda dourada fina */
.cartao {
  position: relative;
  border: 2px solid var(--goh-borda);
  border-radius: var(--goh-raio-cartao);
  background: linear-gradient(180deg, #19202a, #121820);
  box-shadow: 0 0 0 1px var(--goh-contorno), 0 10px 24px rgba(0, 0, 0, 0.35);
}

/* as folhinhas dos cantos (img/folha-canto.png, a do GoH: 20x16, desenhada em 32x16): em cima à esquerda e, espelhada,
   embaixo à direita. Sempre em pixel inteiro: 1x, e 2x no PC largo. */
.folhas::before, .folhas::after,
.idioma--topo .idioma__lista::before, .idioma--topo .idioma__lista::after {
  content: "";
  position: absolute;
  z-index: 3;
  width: 20px;
  height: 16px;
  background: url("img/folha-canto.png") 0 0 / 32px 16px no-repeat;
  image-rendering: pixelated;
  pointer-events: none;
}
.folhas::before, .idioma--topo .idioma__lista::before { left: -11px; top: -10px; }
.folhas::after, .idioma--topo .idioma__lista::after { right: -11px; bottom: -10px; transform: scaleX(-1); }
@media (min-width: 1280px) {
  .folhas::before, .folhas::after { width: 40px; height: 32px; background-size: 64px 32px; }
  .folhas::before { left: -20px; top: -19px; }
  .folhas::after { right: -20px; bottom: -19px; }
}

/* a etiqueta em pílula dourada em cima de cada seção ("MAPAS") */
.etiqueta {
  display: inline-block;
  padding: 5px 16px 4px;
  font: 900 13px/1.2 var(--goh-letra);
  color: var(--goh-dourado);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  border: 2px solid var(--goh-borda);
  border-radius: 999px;
  background: #1a1610;
  box-shadow: 0 0 0 1px var(--goh-contorno);
}
.etiqueta--pix { color: var(--pix-claro); border-color: #1f7d74; background: #0f1d1c; }

/* as pílulas (selos, números, a categoria de uma novidade) */
.pilulas { display: flex; flex-wrap: wrap; gap: 10px; }
.pilula {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 4px 16px;
  font: 900 15px/1.1 var(--goh-letra);
  color: var(--goh-ouro-claro);
  text-decoration: none;
  border: 2px solid var(--goh-borda);
  border-radius: var(--goh-raio);
  background: #1c160e;
  box-shadow: 0 0 0 1px var(--goh-contorno);
}
.pilula--verde { color: #c7f7c0; border-color: #2f7a35; background: #102016; }
.pilula__ponto { width: 9px; height: 9px; border-radius: 50%; background: #4ee35a; box-shadow: 0 0 8px #4ee35a; }
.pilula--pix { color: var(--pix-claro); border-color: #1f7d74; background: #0e1d1c; }
.pilula--ouro {
  min-height: 0;
  padding: 3px 10px 2px;
  font-size: 12px;
  color: var(--goh-ouro-texto);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 0;
  border-radius: 999px;
  background: var(--goh-botao-ouro);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.5), 0 0 0 1px var(--goh-madeira);
}
a.pilula:hover { filter: brightness(1.15); }

/* ---------- Botões ---------- */

.botao-jogar, .botao {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 58px;
  padding: 10px 30px;
  font: 900 20px/1.1 var(--goh-letra);
  letter-spacing: 0.02em;
  text-decoration: none;
  border-radius: var(--goh-raio-cartao);
  transition: transform 0.14s ease, filter 0.14s ease, box-shadow 0.2s;
  -webkit-tap-highlight-color: transparent;
}
/* o botão principal: o dourado do GoH, com a letra marrom-escura */
.botao-jogar {
  color: var(--goh-ouro-texto);
  border: 2px solid var(--goh-madeira);
  background: var(--goh-botao-ouro);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.55), inset 0 -3px 0 rgba(120, 70, 10, 0.3), 0 0 0 1px var(--goh-contorno), 0 10px 24px rgba(0, 0, 0, 0.4);
}
.botao-jogar img { width: 34px; height: 34px; margin: -6px 0; filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.4)); }
.botao-jogar--pequeno { min-height: 44px; padding: 6px 20px; font-size: 17px; border-radius: var(--goh-raio); }
/* o botão escuro (o "Criar conta" do GoH): o marrom com a borda dourada e o "+" verde */
.botao {
  color: var(--goh-texto);
  border: 2px solid var(--goh-borda-clara);
  background: linear-gradient(180deg, #2c1e10, #1d140a);
  box-shadow: 0 0 0 1px var(--goh-contorno), 0 10px 24px rgba(0, 0, 0, 0.35);
}
.mais {
  position: relative;
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 6px;
  background: var(--goh-verde);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.45), 0 0 0 1px #0f3a14;
}
.mais::before, .mais::after { content: ""; position: absolute; inset: 0; margin: auto; width: 14px; height: 4px; border-radius: 1px; background: #fff; }
.mais::after { transform: rotate(90deg); }
.botao-jogar:hover, .botao:hover { transform: translateY(-2px); filter: brightness(1.08); }
.botao-jogar:hover { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.55), 0 0 0 1px var(--goh-contorno), 0 0 26px rgba(255, 210, 110, 0.4); }
.botao-jogar:active, .botao:active { transform: translateY(1px); filter: brightness(0.96); }

/* ---------- Topo ----------
   O cabeçalho do site do GoH: fixo, transparente em cima do topo e escuro ao rolar; à esquerda o ícone na casa de
   borda dourada, o nome e a "jornada" (a barrinha ciano que enche conforme a página rola); no meio as seções, com a
   atual sublinhada em dourado; à direita o PIX, o idioma e o Jogar dourado. */
.topo {
  position: fixed;
  inset: 0 0 auto;
  z-index: 10;
  background: linear-gradient(180deg, rgba(8, 11, 16, 0.85), rgba(8, 11, 16, 0));
  transition: background 0.25s, box-shadow 0.25s, transform 0.25s ease;
}
.topo--rolou, .topo--aberto {
  background: rgba(13, 17, 23, 0.96);
  box-shadow: 0 1px 0 rgba(233, 196, 106, 0.16), 0 10px 30px rgba(0, 0, 0, 0.45);
}
.topo__linha {
  display: flex;
  align-items: center;
  gap: 20px;
  width: min(1520px, 100% - 40px);
  min-height: var(--altura-topo);
  margin-inline: auto;
}

.marca { position: relative; display: flex; flex: none; align-items: center; gap: 12px; text-decoration: none; }
.marca__icone {
  position: relative;
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border: 2px solid var(--goh-borda-clara);
  border-radius: var(--goh-raio);
  background: radial-gradient(circle at 50% 35%, #2b3a4c, #121922);
  box-shadow: 0 0 0 1px var(--goh-contorno);
}
.marca__icone::before {
  content: "";
  position: absolute;
  left: -11px;
  top: -10px;
  width: 20px;
  height: 16px;
  background: url("img/folha-canto.png") 0 0 / 32px 16px no-repeat;
  image-rendering: pixelated;
}
.marca__icone img { width: 40px; height: 40px; }
.marca__texto { display: grid; gap: 1px; width: 200px; }
.marca__nome { font: 400 16px/1 var(--goh-letreiro); color: var(--goh-ouro); letter-spacing: 0.04em; text-shadow: 0 2px 0 #000; -webkit-font-smoothing: none; }
html:lang(ru) .marca__nome, html:lang(th) .marca__nome, html:lang(vi) .marca__nome { font-family: "Alagard GohBomb", var(--goh-letra); }
.jornada { display: flex; justify-content: space-between; font: 800 12px/1.3 var(--goh-letra); color: var(--goh-texto-3); }
.jornada__barra { height: 7px; border-radius: 4px; background: var(--goh-trilho); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08), 0 0 0 1px #2a2f38; overflow: hidden; }
.jornada__barra i { display: block; width: 0; height: 100%; border-radius: 4px; background: var(--goh-ciano); transition: width 0.15s linear; }

.topo__nav { flex: 1 1 auto; min-width: 0; }
.menu { display: flex; gap: 6px; margin: 0; padding: 0; list-style: none; }
.menu a {
  position: relative;
  display: block;
  padding: 8px 10px;
  color: var(--goh-texto);
  text-decoration: none;
  font-size: 17px;
  font-weight: 900;
  white-space: nowrap;
  border-radius: var(--goh-raio);
  text-shadow: 0 1px 0 #000;
  transition: color 0.15s;
}
.menu .menu__pix { color: var(--pix-claro); }
.menu a:hover, .menu a:focus-visible { color: var(--goh-ouro-claro); }
/* a seção atual sublinhada em dourado (script.js marca aria-current) */
.menu a[aria-current="true"] { color: var(--goh-ouro-claro); }
@media (min-width: 961px) {
  .menu a[aria-current="true"]::after { content: ""; position: absolute; left: 6px; right: 6px; bottom: 0; height: 3px; border-radius: 2px; background: var(--goh-botao-ouro); box-shadow: 0 0 8px rgba(242, 193, 78, 0.5); }
}

/* o PIX no lugar do Discord do GoH: a pílula colorida da marca */
.botao-pix {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 4px 16px 4px 10px;
  font: 900 16px/1.1 var(--goh-letra);
  color: #fff;
  text-decoration: none;
  white-space: nowrap;
  border: 2px solid #6ee6d8;
  border-radius: var(--goh-raio);
  background: linear-gradient(180deg, #2fb3a5, #1d8278);
  box-shadow: 0 0 0 1px var(--goh-contorno), 0 6px 14px rgba(0, 0, 0, 0.3);
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.35);
}
.botao-pix img { width: 24px; height: 24px; filter: brightness(0) invert(1); }
.botao-pix:hover { filter: brightness(1.1); }

/* ---------- Idioma (GohBomb, idioma, 02/11) ----------
   No PC, um botão no canto direito do topo, com o globo e o código do idioma (EN, PT...); ele abre a lista dos 12
   idiomas, cada um escrito no próprio idioma. No celular e no tablet o idioma fica no fim do painel do menu (☰). */
.idioma { position: relative; }
.idioma--topo { flex: none; }
.menu__idioma { display: none; }
.idioma__botao {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  margin: 0;
  padding: 4px 12px 4px 8px;
  font: 900 16px/1.2 var(--goh-letra);
  letter-spacing: 0.04em;
  color: var(--goh-texto);
  cursor: pointer;
  border: 2px solid var(--goh-borda);
  border-radius: var(--goh-raio);
  background: #141a22;
  box-shadow: 0 0 0 1px var(--goh-contorno);
  text-shadow: 0 1px 0 #000;
  transition: filter 0.14s ease, border-color 0.14s;
  -webkit-tap-highlight-color: transparent;
}
.idioma__botao:hover, .idioma--aberto .idioma__botao { filter: brightness(1.15); border-color: var(--goh-borda-clara); }
.idioma__globo { display: grid; place-items: center; flex: none; }
.idioma__globo img { display: block; width: 26px; height: 26px; image-rendering: pixelated; }
.idioma__rotulo { display: none; }
.idioma__seta {
  flex: none;
  width: 12px;
  height: 8px;
  background: var(--goh-dourado-fosco);
  -webkit-mask: var(--goh-chevron) center / contain no-repeat;
  mask: var(--goh-chevron) center / contain no-repeat;
  transition: transform 0.15s;
}
.idioma--aberto .idioma__seta { transform: rotate(180deg); }
.idioma__lista { margin: 0; padding: 0; list-style: none; }
.idioma__lista[hidden] { display: none !important; }
.idioma--topo .idioma__lista {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px 10px;
  position: absolute;
  top: calc(100% + 14px);
  right: 0;
  z-index: 12;
  width: 470px;
  padding: 12px;
  border: 2px solid var(--goh-borda-clara);
  border-radius: var(--goh-raio-cartao);
  background: linear-gradient(180deg, var(--goh-painel-claro), var(--goh-painel-2));
  box-shadow: 0 0 0 1px var(--goh-contorno), 0 24px 60px rgba(0, 0, 0, 0.6);
  animation: menu-abrir 0.18s ease-out;
}
.idioma__opcao {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 44px;
  margin: 0;
  padding: 6px 12px;
  font: 800 17px/1.2 var(--goh-letra);
  text-align: left;
  color: var(--goh-texto-3);
  background: none;
  border: 0;
  border-radius: var(--goh-raio);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
/* o losango das listas do GoH; o do idioma atual fica aceso */
.idioma__opcao::before { content: ""; flex: none; width: 7px; height: 7px; margin: 0 3px; background: rgba(233, 196, 106, 0.35); transform: rotate(45deg); }
.idioma__opcao:hover, .idioma__opcao:focus-visible { color: var(--goh-ouro-claro); background: rgba(255, 255, 255, 0.05); }
.idioma__opcao:focus-visible { outline: 2px solid var(--goh-dourado-fosco); outline-offset: -2px; }
/* o idioma atual na aba escolhida do GoH: a pílula marrom-dourada */
.idioma__opcao[aria-current="true"] { color: #fff; background: linear-gradient(180deg, #5c3c1d, #3b2511); box-shadow: inset 0 0 0 1px var(--goh-borda-acesa); }
.idioma__opcao[aria-current="true"]::before { background: var(--goh-dourado); }

/* em alguns idiomas o menu do PC não cabe na linha: o script.js marca o topo como apertado e o menu encolhe */
@media (min-width: 961px) {
  .topo--apertado .topo__linha { gap: 12px; }
  .topo--apertado .menu { gap: 0; }
  .topo--apertado .menu a { padding: 8px 7px; font-size: 15px; }
  .topo--apertado .marca__texto { width: 150px; }
  .topo--muito-apertado .botao-pix span { display: none; }
  .topo--muito-apertado .botao-pix { padding: 4px 10px; }
  .topo--muito-apertado .menu a { padding: 8px 5px; font-size: 14px; }
}
/* PC médio: o PIX fica só com o ícone */
@media (max-width: 1360px) and (min-width: 961px) {
  .botao-pix span { display: none; }
  .botao-pix { padding: 4px 10px; }
}

/* ---------- Abertura ----------
   O topo do site do GoH: o fundo de pixel art à noite (a clareira da tela de carregamento do jogo, escurecida), a
   marca grande, as chamadas com losangos, os botões, as pílulas e, à direita, a demonstração ao vivo. */
.abertura {
  position: relative;
  padding: calc(var(--altura-topo) + 56px) 0 34px;
  image-rendering: pixelated; /* o fundo é pixel art em escala inteira */
  background:
    linear-gradient(180deg, rgba(15, 20, 27, 0) 55%, var(--goh-fundo) 98%),
    radial-gradient(ellipse 70% 60% at 30% 45%, rgba(10, 13, 18, 0.55), transparent 75%),
    url("img/fundo-topo.webp") center top / max(2048px, 100%) auto no-repeat,
    var(--goh-fundo);
}
.abertura > * { image-rendering: auto; }
/* no celular em pé, a versão vertical da mesma cena (a larga recortada perderia a lua e o castelo) */
@media (max-width: 960px) and (orientation: portrait) {
  .abertura {
    background:
      linear-gradient(180deg, rgba(15, 20, 27, 0) 55%, var(--goh-fundo) 98%),
      linear-gradient(rgba(10, 16, 26, 0.4), rgba(10, 16, 26, 0.4)),
      url("img/fundo-topo-em-pe.webp") center top / max(768px, 100%) auto no-repeat,
      var(--goh-fundo);
  }
}
/* no PC, mais céu em cima: a lua aparece inteira acima da demonstração */
@media (min-width: 961px) {
  .abertura { padding-top: calc(var(--altura-topo) + 116px); }
}
.abertura__grade {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 56px;
  align-items: center;
  width: min(1340px, 100% - 48px);
  min-height: min(620px, calc(100vh - var(--altura-topo) - 150px));
}

.letreiro-marca { display: flex; align-items: center; gap: 18px; }
.letreiro-marca__moeda { flex: none; width: 112px; height: auto; filter: drop-shadow(0 8px 12px rgba(0, 0, 0, 0.6)); animation: flutuar 4s ease-in-out infinite; }
.abertura h1 { font-size: 80px; line-height: 1; filter: drop-shadow(0 5px 0 #3a2009) drop-shadow(0 0 2px #1a0d02) drop-shadow(0 12px 18px rgba(0, 0, 0, 0.5)); }
html:lang(ru) .abertura h1, html:lang(th) .abertura h1, html:lang(vi) .abertura h1 { font-family: "Alagard GohBomb", var(--goh-letra); font-weight: 400; }

/* a linha de chamadas com os losangos dourados */
.chamadas { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 24px 0 8px; font-size: 18px; font-weight: 900; color: var(--goh-texto); text-shadow: 0 2px 4px #000; }
.chamadas i { display: none; }
.chamadas span:not(:first-child)::before { content: ""; display: inline-block; width: 8px; height: 8px; margin: 0 12px 2px 0; background: var(--goh-dourado); transform: rotate(45deg); box-shadow: 0 0 6px rgba(242, 193, 78, 0.6); }
.abertura__frase { margin: 0; max-width: 34em; color: var(--goh-texto); font-size: 17px; text-shadow: 0 1px 3px #000, 0 0 10px rgba(0, 0, 0, 0.75); }

.acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin: 26px 0 18px; }

/* a demonstração ao vivo: os 3 modos do jogo no canvas (script.js), na moldura dourada com as folhinhas, e a HUD do jogo
   por cima. A tela tem 704 x 416 px: no PC ela fica em 1x, com os pixels inteiros. */
.demo { width: 710px; margin: 0; }
.demo__moldura {
  position: relative;
  border: 3px solid var(--goh-borda-acesa);
  border-radius: 6px;
  background: #0b1210;
  box-shadow: 0 0 0 2px #2a1b0a, 0 0 0 3px var(--goh-contorno), 0 24px 60px rgba(0, 0, 0, 0.65), 0 0 40px rgba(233, 181, 82, 0.12);
}
.demo__tela { display: block; width: 100%; height: auto; aspect-ratio: 704 / 416; border-radius: 3px; }
/* as 3 legendas no mesmo lugar (a escondida só fica invisível): a página não pula quando uma tem duas linhas */
.demo figcaption { display: grid; margin-top: 14px; font-size: 14px; color: var(--goh-texto-2); }
.demo__legenda { display: grid; grid-area: 1 / 1; align-content: start; gap: 2px; margin: 0; text-shadow: 0 1px 3px #000, 0 0 10px rgba(0, 0, 0, 0.8); }
.demo__legenda[hidden] { display: grid; visibility: hidden; }
.demo figcaption b { font-size: 18px; color: var(--goh-dourado-fosco); }

/* as abas dos modos, em pílula como as do jogo (a escolhida marrom-dourada); a barrinha embaixo da escolhida enche em
   11 s e passa para o próximo modo (script.js); com o mouse em cima, ou a demonstração fora da tela, ela para */
.demo__abas { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.demo__abas button {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 5px 16px 5px 8px;
  overflow: hidden;
  font: 900 15px/1.1 var(--goh-letra);
  color: var(--goh-texto-3);
  cursor: pointer;
  border: 2px solid #3a3226;
  border-radius: 999px;
  background: rgba(16, 20, 26, 0.88);
  box-shadow: 0 0 0 1px var(--goh-contorno);
  transition: border-color 0.15s, color 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.demo__abas button:hover { border-color: var(--goh-borda); color: var(--goh-ouro-claro); }
.demo__abas button[aria-selected="true"] { color: #fff; border-color: var(--goh-borda-acesa); background: linear-gradient(180deg, #5c3c1d, #3b2511); box-shadow: 0 0 0 1px var(--goh-contorno), 0 0 14px rgba(233, 181, 82, 0.2); }
.demo__abas img { width: 26px; height: 26px; object-fit: contain; image-rendering: pixelated; }
.demo__tempo { position: absolute; left: 0; bottom: 0; width: 0; height: 3px; background: var(--goh-botao-ouro); pointer-events: none; }
.demo__aba--andando .demo__tempo { animation: encher 11s linear forwards; }
.demo:hover .demo__tempo, .demo:focus-within .demo__tempo, .demo--parada .demo__tempo { animation-play-state: paused; }

/* a HUD da partida (a do jogo, menor): o placar no meio, o relógio à direita e os itens à esquerda */
/* a HUD acompanha o tamanho da tela pelo zoom (script.js: --hud-zoom, de 0,6 a 1), sem perder os cantos */
.demo__hud { position: absolute; inset: 0; pointer-events: none; font-family: var(--goh-letra); zoom: var(--hud-zoom, 1); }
.demo__hud[hidden] { display: none; }
.hud__voltar, .hud__tempo, .hud__jogador, .hud__itens > span {
  border: 2px solid #5b4527;
  border-radius: 6px;
  background: linear-gradient(180deg, #1b222c, #0f141a);
  box-shadow: 0 0 0 1px var(--goh-contorno);
}
.hud__voltar { position: absolute; left: 8px; top: 8px; width: 32px; height: 30px; }
.hud__voltar::before { content: ""; position: absolute; inset: 0; margin: auto; width: 12px; height: 14px; background: #fff; -webkit-mask: var(--goh-seta) center / contain no-repeat; mask: var(--goh-seta) center / contain no-repeat; transform: scaleX(-1); }
.hud__placar { position: absolute; left: 50%; top: 6px; display: flex; align-items: center; gap: 8px; width: max-content; transform: translateX(-50%); }
.hud__jogador { display: flex; flex: none; align-items: center; gap: 6px; height: 34px; padding: 0 8px 0 2px; font-size: 12px; color: #fff; white-space: nowrap; }
.hud__jogador--rival { padding: 0 2px 0 8px; }
.hud__jogador img { width: 30px; height: 30px; object-fit: contain; object-position: center top; border-radius: 4px; background: #5c2224; }
.hud__jogador b { font-weight: 900; }
.hud__vidas { display: inline-flex; align-items: center; gap: 2px; font-size: 11px; font-weight: 900; color: #ffb3b3; }
.hud__vidas::before { content: ""; width: 12px; height: 11px; background: #ff4757; clip-path: polygon(50% 100%, 0 40%, 0 15%, 15% 0, 35% 0, 50% 15%, 65% 0, 85% 0, 100% 15%, 100% 40%); }
.hud__vs { font: 400 16px/1 var(--goh-letreiro); color: var(--goh-ouro); text-shadow: 0 2px 0 #000; }
.hud__tempo { position: absolute; right: 8px; top: 8px; display: flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px 0 8px; font-size: 15px; font-weight: 900; color: #fff; font-variant-numeric: tabular-nums; }
.hud__tempo::before { content: ""; width: 14px; height: 14px; border-radius: 50%; background: radial-gradient(circle, #fff 0 22%, transparent 24%), #d9a441; box-shadow: inset 0 0 0 2px #fff6dc; }
.hud__itens { position: absolute; left: 8px; top: 74px; display: grid; gap: 6px; }
.hud__itens > span { display: flex; align-items: center; gap: 5px; height: 30px; padding: 0 7px 0 2px; font-size: 13px; font-weight: 900; color: #fff; }
.hud__itens img { width: 24px; height: 24px; }

/* a HUD do Farm: a barra de cima (voltar, as moedas e os botões), as Médias e o Pool de Ranking */
.hud__barra { position: absolute; left: 6px; right: 6px; top: 6px; display: flex; align-items: center; justify-content: space-between; gap: 8px; height: 34px; }
.hud__barra .hud__voltar { position: relative; left: auto; top: auto; flex: none; }
.hud__moedas { display: flex; gap: 6px; }
.hud__moeda, .hud__botoes > span, .hud__cartao {
  border: 2px solid #5b4527;
  border-radius: 6px;
  background: linear-gradient(180deg, #1b222c, #0f141a);
  box-shadow: 0 0 0 1px var(--goh-contorno);
}
.hud__moeda { display: flex; align-items: center; gap: 6px; height: 30px; min-width: 96px; padding: 0 4px 0 2px; font-size: 14px; font-weight: 900; color: var(--goh-ouro); font-variant-numeric: tabular-nums; }
.hud__moeda b { flex: 1; text-align: center; font-weight: 900; }
.hud__moeda--sol { min-width: 76px; padding-right: 10px; color: #fff; }
.hud__moeda img { width: 24px; height: 24px; object-fit: contain; }
.hud__mais { flex: none; width: 18px; height: 18px; border-radius: 4px; background: var(--goh-verde); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.45); position: relative; }
.hud__mais::before, .hud__mais::after { content: ""; position: absolute; inset: 0; margin: auto; width: 10px; height: 3px; background: #fff; }
.hud__mais::after { transform: rotate(90deg); }
.hud__botoes { display: flex; gap: 6px; }
.hud__botoes > span { display: grid; place-items: center; width: 34px; height: 30px; }
.hud__botoes img { width: 24px; height: 24px; object-fit: contain; }
.hud__cartao { position: absolute; top: 48px; display: grid; gap: 4px; padding: 0 0 6px; font-size: 12px; font-weight: 900; color: #fff; overflow: hidden; }
.hud__cartao > b { display: block; padding: 3px 10px 2px; font-size: 10px; font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase; color: var(--goh-texto-3); background: rgba(0, 0, 0, 0.35); text-align: center; }
.hud__cartao > span { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 8px; }
.hud__cartao img { width: 18px; height: 18px; object-fit: contain; }
.hud__cartao i { font-style: normal; font-variant-numeric: tabular-nums; }
.hud__cartao--medias { left: 6px; width: 108px; }
.hud__cartao--pool { right: 6px; width: 118px; }

/* a HUD da Aventura: as vidas, a fase em dourado e os itens */
.hud__coracoes { position: absolute; left: 48px; top: 12px; display: flex; gap: 4px; }
.hud__coracoes i { width: 18px; height: 16px; background: #ff4757; clip-path: polygon(50% 100%, 0 40%, 0 15%, 15% 0, 35% 0, 50% 15%, 65% 0, 85% 0, 100% 15%, 100% 40%); filter: drop-shadow(0 1px 0 #000); }
.hud__coracoes i.hud__coracao--perdido { background: #3a3f48; }
.hud__fase { position: absolute; right: 12px; top: 10px; font: 900 18px/1 var(--goh-letra); color: var(--goh-ouro); text-transform: uppercase; letter-spacing: 0.04em; text-shadow: 0 2px 0 #000, 0 0 6px #000; }

/* os atalhos embaixo do topo (as pílulas grandes do GoH) */
.atalhos { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 44px; padding: 0; list-style: none; }
.atalhos a {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 6px 18px 6px 10px;
  font-size: 16px;
  font-weight: 900;
  color: var(--goh-texto);
  text-decoration: none;
  border: 2px solid var(--goh-borda);
  border-radius: var(--goh-raio-cartao);
  background: rgba(19, 24, 31, 0.92);
  box-shadow: 0 0 0 1px var(--goh-contorno), 0 8px 18px rgba(0, 0, 0, 0.35);
  transition: border-color 0.15s, transform 0.15s;
}
.atalhos a:hover { border-color: var(--goh-borda-acesa); transform: translateY(-2px); }
.atalhos img { width: 32px; height: 32px; object-fit: contain; }

/* ---------- Seções ---------- */

.secao { padding: 96px 0 0; }
.cabeca { max-width: 860px; margin: 0 auto 44px; text-align: center; }
.cabeca .letreiro { margin: 18px 0 14px; }
.cabeca p { margin: 0; color: var(--goh-texto-2); font-size: 18px; text-wrap: balance; }

/* o título de dentro da seção, como o das janelas do jogo: dourado, em maiúsculas espaçadas, com os fios dos lados */
.subtitulo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin: 64px 0 10px;
  font-size: 18px;
  color: var(--goh-dourado);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  text-align: center;
}
.subtitulo::before, .subtitulo::after { content: ""; flex: 0 1 64px; min-width: 18px; height: 2px; background: linear-gradient(90deg, transparent, rgba(233, 196, 106, 0.8)); }
.subtitulo::after { transform: scaleX(-1); }
.intro { max-width: 46em; margin: 0 auto 28px; text-align: center; color: var(--goh-texto-2); text-wrap: balance; }

/* o losango das listas do GoH */
.lista { margin: 0; padding: 0; list-style: none; }
.lista li { position: relative; padding-left: 22px; margin: 4px 0; font-weight: 800; color: var(--goh-texto-3); }
.lista li::before { content: ""; position: absolute; left: 4px; top: 0.6em; width: 8px; height: 8px; background: var(--goh-dourado-fosco); transform: rotate(45deg); }

/* O jogo: os 4 passos */
.passos-jogo { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin: 0; padding: 0; list-style: none; }
.passos-jogo li { display: flex; flex-direction: column; align-items: center; padding: 22px 22px 24px; text-align: center; }
.passos-jogo b { font-size: 14px; font-weight: 900; color: var(--goh-dourado); }
.passos-jogo img { width: 64px; height: 64px; margin: 8px 0 12px; object-fit: contain; filter: drop-shadow(0 4px 0 rgba(0, 0, 0, 0.4)); }
.passos-jogo h3 { margin-bottom: 10px; font-size: 22px; }
.passos-jogo p { margin: 0; font-size: 15px; color: var(--goh-texto-2); }

/* O jogo: os 3 modos, com as fotos do jogo de hoje */
.modos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 26px; }
.modo { display: flex; flex-direction: column; padding: 10px; }
.modo__print { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 8px; box-shadow: 0 0 0 1px var(--goh-contorno); cursor: zoom-in; }
.modo__texto { padding: 16px 10px 8px; }
.modo h3 { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; font-size: 24px; color: var(--goh-ouro-claro); }
.modo h3 img { width: 36px; height: 36px; object-fit: contain; }
.modo p { color: var(--goh-texto-2); font-size: 16px; }

/* As telas: o carrossel e o celular */
.telas { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 26px; align-items: start; }
.carrossel { margin: 0; }
.carrossel__janela {
  position: relative;
  padding: 6px;
  border: 2px solid var(--goh-borda-clara);
  border-radius: var(--goh-raio-cartao);
  background: linear-gradient(180deg, var(--goh-painel-claro), var(--goh-painel-2));
  box-shadow: 0 0 0 1px var(--goh-contorno), 0 18px 40px rgba(0, 0, 0, 0.45);
}
.carrossel__vista { overflow: hidden; border-radius: 7px; background: var(--goh-fundo-escuro); }
.carrossel__trilho { display: flex; margin: 0; padding: 0; list-style: none; transition: transform 0.6s cubic-bezier(0.65, 0, 0.35, 1); touch-action: pan-y; }
.carrossel__trilho li { flex: 0 0 100%; }
.carrossel__trilho img { display: block; width: 100%; height: auto; aspect-ratio: 1920 / 945; object-fit: cover; cursor: zoom-in; user-select: none; -webkit-user-drag: none; }
.carrossel__rodape { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 14px; margin-top: 14px; }
.carrossel__legenda { flex: 1 1 260px; font: 900 18px/1.3 var(--goh-letra); color: var(--goh-ouro-claro); text-shadow: 0 1px 0 #000; }
.carrossel__controles { display: flex; flex: none; align-items: center; gap: 12px; margin-left: auto; }
.carrossel__seta {
  position: relative;
  flex: none;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 2px solid var(--goh-madeira);
  border-radius: var(--goh-raio);
  background: var(--goh-botao-ouro);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.5), 0 0 0 1px var(--goh-contorno);
  cursor: pointer;
  transition: transform 0.12s, filter 0.12s;
}
.carrossel__seta::before { content: ""; position: absolute; inset: 0; margin: auto; width: 11px; height: 15px; background: var(--goh-ouro-texto); -webkit-mask: var(--goh-seta) center / contain no-repeat; mask: var(--goh-seta) center / contain no-repeat; }
.carrossel__seta--antes::before { transform: scaleX(-1); }
.carrossel__seta:hover { transform: translateY(-1px); filter: brightness(1.08); }
/* o relógio do carrossel: uma barrinha invisível; quando ela "enche", o script passa para a próxima tela */
.carrossel__tempo { position: absolute; left: 0; bottom: 0; width: 0; height: 1px; visibility: hidden; }
.carrossel__tempo.andando { animation: encher 5s linear forwards; }
.carrossel:hover .carrossel__tempo, .carrossel:focus-within .carrossel__tempo { animation-play-state: paused; }
.carrossel__pontos { display: flex; flex: none; gap: 12px; padding: 0 4px; }
.carrossel__pontos button { width: 12px; height: 12px; padding: 0; border: 0; background: #2a3340; box-shadow: 0 0 0 1px var(--goh-contorno); transform: rotate(45deg); cursor: pointer; transition: background 0.2s, transform 0.2s; }
.carrossel__pontos button:hover { background: #4a5668; }
.carrossel__pontos button[aria-current="true"] { background: var(--goh-dourado-fosco); transform: rotate(45deg) scale(1.25); }

.celular { padding: 18px 18px 20px; text-align: center; }
.celular__fotos { display: flex; justify-content: center; gap: 12px; margin-bottom: 16px; }
.celular__fotos img {
  width: calc(50% - 6px);
  max-width: 136px;
  height: auto;
  aspect-ratio: 540 / 1207;
  padding: 5px;
  border-radius: 16px;
  background: #05070a;
  box-shadow: 0 0 0 2px #2d3542, 0 0 0 3px var(--goh-contorno), 0 14px 30px rgba(0, 0, 0, 0.5);
  cursor: zoom-in;
}
.celular h3 { margin-bottom: 8px; font-size: 22px; color: var(--goh-ouro-claro); }
.celular p { margin: 0; font-size: 15px; color: var(--goh-texto-2); }

/* Heróis: a lista das classes, o palco e os atributos, como os Heróis do site do GoH */
.classes { display: grid; grid-template-columns: 250px minmax(0, 1fr) 360px; min-height: 520px; padding: 0; overflow: visible; }
.classes__lista { display: grid; align-content: start; gap: 10px; margin: 0; padding: 18px 14px; list-style: none; border-right: 1px solid rgba(233, 196, 106, 0.16); }
.classes__lista button {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 64px;
  padding: 6px 10px 6px 6px;
  font: inherit;
  text-align: left;
  color: var(--goh-texto);
  cursor: pointer;
  border: 2px solid #2a323d;
  border-radius: var(--goh-raio-cartao);
  background: #141a22;
  transition: border-color 0.15s, background 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.classes__lista button:hover { border-color: var(--goh-borda); }
.classes__lista button[aria-selected="true"] { border-color: var(--goh-borda-acesa); background: linear-gradient(180deg, #2f2414, #1d160c); box-shadow: 0 0 14px rgba(233, 181, 82, 0.15); }
.classes__lista b { display: block; font-size: 17px; line-height: 1.2; }
.classes__lista small { display: block; font-size: 13px; font-weight: 700; line-height: 1.25; color: var(--goh-texto-2); }
.classes__retrato { display: grid; place-items: center; flex: none; width: 50px; height: 50px; border: 2px solid #3a4250; border-radius: var(--goh-raio); background: radial-gradient(circle at 50% 35%, #2b3a4c, #121922); overflow: hidden; }
.classes__retrato img { width: 49px; height: 52px; margin-top: 8px; object-fit: contain; }

.palco {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 420px;
  overflow: hidden;
  background:
    radial-gradient(ellipse 30% 8% at 50% 72%, rgba(0, 0, 0, 0.6), transparent 70%),
    radial-gradient(ellipse 42% 40% at 50% 58%, rgba(255, 214, 140, 0.2), transparent 70%),
    radial-gradient(ellipse 70% 70% at 50% 55%, rgba(12, 16, 22, 0.2), rgba(12, 16, 22, 0.88) 100%),
    url("img/arenas/valoria.webp") center / cover;
  image-rendering: pixelated;
}
/* o herói em 4x, de pé em cima da sombra */
.palco__heroi { width: 196px; height: 208px; margin-top: -40px; object-fit: contain; object-position: center bottom; filter: drop-shadow(0 6px 0 rgba(0, 0, 0, 0.35)); }
.palco__botoes { position: absolute; left: 0; right: 0; bottom: 22px; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.palco__botoes button, .abas button {
  min-height: 40px;
  padding: 6px 16px;
  font: 900 15px/1 var(--goh-letra);
  color: var(--goh-texto);
  cursor: pointer;
  border: 2px solid #3a3226;
  border-radius: 999px;
  background: rgba(16, 20, 26, 0.92);
  box-shadow: 0 0 0 1px var(--goh-contorno);
  -webkit-tap-highlight-color: transparent;
}
.palco__botoes button[aria-pressed="true"] { color: var(--goh-ouro-texto); border-color: var(--goh-madeira); background: var(--goh-botao-ouro); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.5), 0 0 0 1px var(--goh-contorno); }

.classes__info { padding: 22px 24px 24px; border-left: 1px solid rgba(233, 196, 106, 0.16); }
.classe__rotulo { display: block; font-size: 13px; font-weight: 900; color: var(--goh-dourado-fosco); text-transform: uppercase; letter-spacing: 0.14em; }
.classe h3 { margin: 4px 0 18px; font-size: 32px; }
.classe h4 { margin: 18px 0 10px; font-size: 13px; color: var(--goh-dourado); text-transform: uppercase; letter-spacing: 0.16em; }
.barras { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.barras li { display: grid; grid-template-columns: 96px minmax(0, 1fr) 16px; align-items: center; gap: 12px; font-size: 14px; font-weight: 900; }
.barras li > span:first-child { min-width: 0; overflow-wrap: anywhere; line-height: 1.2; }
.barras b { text-align: right; color: var(--goh-texto); }
/* a barra dourada (o trilho escuro e o enchimento dourado dos atributos do site do GoH) */
.barra { display: block; height: 9px; border-radius: 5px; background: var(--goh-trilho); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07); overflow: hidden; }
.barra i { display: block; width: calc(var(--v) * 33.34%); height: 100%; border-radius: 5px; background: linear-gradient(180deg, #ffe9a8, #f2c14e 50%, #c98a24); }
.habilidade { margin: 0; padding: 14px 16px; font-size: 15px; color: var(--goh-texto-3); }
.habilidade b { color: var(--goh-ouro-claro); }

/* a raridade à vista: o cartão na cor da raridade (o GohFundoRaridade do jogo: em cima quase o fundo escuro, embaixo a
   cor, a borda na cor e o brilho atrás do herói) e o selo em pílula */
.raridades { display: grid; grid-template-columns: repeat(6, 1fr); gap: 18px; margin: 0; padding: 0; list-style: none; }
.rar { --cor: var(--rar-comum); display: flex; flex-direction: column; align-items: center; gap: 12px; }
.rar--raro { --cor: var(--rar-raro); }
.rar--super-raro { --cor: var(--rar-super-raro); }
.rar--epico { --cor: var(--rar-epico); }
.rar--lendario { --cor: var(--rar-lendario); }
.rar--super-lendario { --cor: var(--rar-super-lendario); }
.rar__cartao, .cat {
  position: relative;
  background: #1a1f28;
  display: grid;
  place-items: center;
  border: 3px solid var(--cor);
  border-radius: var(--goh-raio-cartao);
  background:
    radial-gradient(circle at 50% 55%, color-mix(in srgb, var(--cor) 50%, transparent), transparent 55%),
    linear-gradient(180deg, color-mix(in srgb, #141820 80%, var(--cor)), color-mix(in srgb, #141820 40%, var(--cor)));
  box-shadow: 0 0 0 1px var(--goh-contorno), 0 10px 24px rgba(0, 0, 0, 0.35);
}
.rar__cartao { width: 100%; aspect-ratio: 1; }
.rar__cartao img { width: 98px; height: 104px; object-fit: contain; filter: drop-shadow(0 4px 0 rgba(0, 0, 0, 0.35)); }
.rar__selo {
  padding: 5px 14px 4px;
  font-size: 13px;
  font-weight: 900;
  color: #fff;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border: 2px solid color-mix(in srgb, var(--cor) 60%, #fff);
  border-radius: 999px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--cor) 85%, #fff), color-mix(in srgb, var(--cor) 80%, #000));
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.45);
}

/* o elenco do PvP e da Aventura, na cor da categoria (MVP verde, Normal roxo, Premium dourado) */
.elenco { display: grid; grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.cat { --cor: var(--rar-super-raro); grid-template-rows: auto 1fr; gap: 4px; padding: 8px 6px 10px; }
.cat--mvp { --cor: var(--rar-raro); }
.cat--premium { --cor: var(--rar-lendario); border-width: 3px; box-shadow: 0 0 0 1px var(--goh-contorno), 0 0 16px color-mix(in srgb, var(--rar-lendario) 30%, transparent); }
.cat img { order: 2; width: 98px; height: 104px; object-fit: contain; filter: drop-shadow(0 3px 0 rgba(0, 0, 0, 0.35)); }
.cat span { order: 1; width: 100%; padding: 3px 6px; font-size: 13px; font-weight: 900; line-height: 1.2; text-align: center; color: #fff; border-radius: 6px; background: rgba(8, 10, 14, 0.78); }
.cat--premium span { color: var(--goh-ouro-claro); }

/* Mapas: as ilhas da Aventura nos cartões largos do GoH (a primeira inteira) */
.ilhas { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; margin: 0; padding: 0; list-style: none; }
.ilha { position: relative; height: 210px; border: 2px solid var(--goh-borda-clara); border-radius: var(--goh-raio-cartao); box-shadow: 0 0 0 1px var(--goh-contorno), 0 14px 30px rgba(0, 0, 0, 0.4); }
.ilha:first-child { grid-column: 1 / -1; height: 300px; }
.ilha > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 40%; border-radius: 10px; image-rendering: pixelated; }
.ilha::after { content: ""; position: absolute; inset: 0; border-radius: 10px; background: linear-gradient(90deg, rgba(8, 10, 14, 0.82), rgba(8, 10, 14, 0.25) 60%, transparent), linear-gradient(0deg, rgba(8, 10, 14, 0.7), transparent 60%); }
/* a folhinha só em cima à esquerda da primeira ilha (o ::after é o escurecido do texto) */
.ilha:first-child::before { content: ""; position: absolute; z-index: 3; left: -20px; top: -19px; width: 40px; height: 32px; background: url("img/folha-canto.png") 0 0 / 64px 32px no-repeat; image-rendering: pixelated; }
.ilha > div { position: absolute; left: 20px; bottom: 18px; z-index: 1; display: grid; justify-items: start; gap: 6px; }
.ilha h3 { font-family: var(--goh-letreiro); font-weight: 400; font-size: 32px; line-height: 1.05; text-shadow: 0 2px 0 #000; -webkit-font-smoothing: none; }
html:lang(ru) .ilha h3, html:lang(th) .ilha h3, html:lang(vi) .ilha h3 { font-weight: 900; font-size: 28px; }
.ilha p { margin: 0; font-size: 14px; font-weight: 800; color: var(--goh-texto-3); text-shadow: 0 1px 2px #000; }

/* Mapas: as arenas do PvP */
.arenas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin: 0; padding: 0; list-style: none; }
.arena { padding: 8px 8px 14px; }
.arena__mapa { display: block; width: 100%; height: auto; aspect-ratio: 640 / 448; border-radius: 8px; box-shadow: 0 0 0 1px var(--goh-contorno); image-rendering: pixelated; }
.arena div { padding: 12px 6px 0; }
.arena h4 { margin-bottom: 4px; font-size: 19px; color: var(--goh-ouro-claro); }
.arena p { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--goh-texto-2); font-weight: 800; }
.arena p img { width: 32px; height: 32px; }

/* Bombas */
.bombas { display: grid; grid-template-columns: repeat(auto-fill, minmax(136px, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.bombas li { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 8px 12px; text-align: center; font-weight: 800; font-size: 15px; }
.bombas img { width: 64px; height: 64px; filter: drop-shadow(0 4px 0 rgba(0, 0, 0, 0.35)); }

/* O token: a moeda grande, os destaques (o número grande dourado com o texto ao lado), as moedas e as partes do jogo */
.token { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 24px; align-items: stretch; }
.token__moeda { display: flex; align-items: center; gap: 26px; padding: 26px 30px; }
.token__moeda img { flex: none; width: 176px; height: 176px; filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.6)); animation: flutuar 4s ease-in-out infinite; }
.token__moeda h3 { margin: 14px 0 8px; font-size: 26px; color: var(--goh-ouro-claro); }
.token__moeda p { margin: 0; color: var(--goh-texto-2); }
.destaques { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin: 0; padding: 0; list-style: none; }
.destaques li { display: flex; align-items: center; gap: 16px; padding: 14px 18px; }
.destaques b { flex: none; min-width: 1.4em; font-size: 64px; line-height: 1; }
.destaques span { font-size: 16px; font-weight: 800; line-height: 1.3; color: var(--goh-texto-3); }
html:lang(ru) .destaques b, html:lang(th) .destaques b, html:lang(vi) .destaques b { font-size: 52px; }

.moedas { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin: 26px 0 0; padding: 0; list-style: none; }
.moeda { display: flex; align-items: flex-start; gap: 14px; padding: 16px; }
.icone { display: grid; place-items: center; flex: none; width: 58px; height: 58px; border: 2px solid #3a4250; border-radius: var(--goh-raio); background: radial-gradient(circle at 50% 35%, #2b3a4c, #121922); }
.icone img { width: 40px; height: 40px; object-fit: contain; }
.moeda h3 { margin-bottom: 4px; font-size: 19px; color: var(--goh-ouro-claro); }
.moeda p { margin: 0; font-size: 14.5px; color: var(--goh-texto-2); }
.recursos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 16px 0 0; padding: 0; list-style: none; }
.recurso { display: flex; align-items: center; gap: 14px; padding: 14px 16px; }
.recurso > img { flex: none; width: 44px; height: 44px; object-fit: contain; }
.recurso h3 { font-size: 18px; color: var(--goh-ouro-claro); }
.recurso p { margin: 0; font-size: 14.5px; color: var(--goh-texto-2); }

/* PIX: os passos no cartão de ouro, a tela de compra desenhada como uma janela do jogo e a comparação */
.pix { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 24px; align-items: stretch; }
.pix__texto { display: flex; flex-direction: column; padding: 26px 30px 24px; }
.pix__nota { margin-top: auto !important; }
.pix__texto h3 { margin: 18px 0 14px; font-size: 26px; color: var(--goh-ouro-claro); }
.passos { display: grid; gap: 12px; margin: 0 0 16px; padding: 0; list-style: none; }
.passos li { display: flex; align-items: flex-start; gap: 14px; }
.passos b { display: grid; flex: none; place-items: center; width: 32px; height: 32px; font: 900 16px/1 var(--goh-letra); color: var(--goh-ouro-texto); border-radius: 50%; background: var(--goh-botao-ouro); box-shadow: 0 0 0 2px var(--goh-madeira); }
.passos h4 { font-size: 17px; }
.passos p { margin: 0; font-size: 15px; color: var(--goh-texto-2); }
.pix__nota { margin: 0; padding: 12px 14px; font-size: 15px; color: var(--pix-claro); border-radius: var(--goh-raio); background: rgba(50, 188, 173, 0.09); box-shadow: inset 0 0 0 1px rgba(50, 188, 173, 0.35); }
.pix__tela { display: grid; align-content: center; margin: 0; padding: 22px; background: radial-gradient(closest-side, rgba(50, 188, 173, 0.16), transparent), linear-gradient(180deg, var(--goh-painel-claro), var(--goh-painel-2)); }
.pix__tela figcaption { margin-top: 12px; text-align: center; font-size: 14px; color: var(--goh-texto-2); }
.janela { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 100%; max-width: 360px; margin: 0 auto; padding: 18px 20px 22px; border: 2px solid var(--goh-borda-clara); border-radius: var(--goh-raio-cartao); background: linear-gradient(180deg, #1b222c, #10151b); box-shadow: 0 0 0 1px var(--goh-contorno), 0 24px 60px rgba(0, 0, 0, 0.6); }
.janela__titulo { display: flex; align-items: center; justify-content: center; gap: 14px; font-size: 18px; color: var(--goh-dourado); text-transform: uppercase; letter-spacing: 0.2em; }
.janela__titulo::before, .janela__titulo::after { content: ""; flex: none; width: 36px; height: 2px; background: linear-gradient(90deg, transparent, rgba(233, 196, 106, 0.8)); }
.janela__titulo::after { transform: scaleX(-1); }
.janela__linha { display: grid; justify-items: center; width: 100%; padding: 10px 12px; border-radius: var(--goh-raio); background: rgba(6, 8, 11, 0.55); box-shadow: inset 0 0 0 1px rgba(196, 150, 80, 0.26); }
.janela__linha span { font-size: 12px; font-weight: 900; color: var(--goh-texto-2); text-transform: uppercase; letter-spacing: 0.12em; }
.janela__linha strong { display: flex; align-items: center; gap: 10px; font-size: 30px; font-weight: 900; color: var(--goh-dourado); font-variant-numeric: tabular-nums; text-shadow: 0 2px 0 rgba(0, 0, 0, 0.6); }
.janela__linha strong img { image-rendering: pixelated; }
.janela__linha small { font-size: 13px; font-weight: 700; color: var(--goh-texto-2); }
.janela__seta { width: 18px; height: 12px; margin: -2px 0; background: var(--goh-dourado-fosco); -webkit-mask: var(--goh-chevron) center / contain no-repeat; mask: var(--goh-chevron) center / contain no-repeat; }
.janela__qr { position: relative; margin-top: 4px; line-height: 0; border-radius: 4px; box-shadow: 0 0 0 2px var(--goh-borda-clara), 0 0 0 3px var(--goh-contorno); }
.janela__qr img { width: 160px; height: 160px; image-rendering: pixelated; }
.janela__qr .janela__qr-icone { position: absolute; inset: 0; width: 44px; height: 44px; margin: auto; }
.janela__copiar { min-height: 44px; margin-top: 4px; padding: 8px 18px; font-size: 15px; cursor: default; }
.janela__copiar:hover { transform: none; filter: none; }

.comparar { display: grid; grid-template-columns: 1fr auto 1fr; gap: 18px; align-items: center; margin-top: 22px; }
.comparar__lado { padding: 18px 22px; }
.comparar__lado h3 { margin-bottom: 10px; font-size: 22px; }
.comparar__lado:not(.comparar__lado--goh) { filter: saturate(0.55) brightness(0.85); }
.comparar__lado:not(.comparar__lado--goh) h3 { color: var(--goh-texto-2); }
.comparar__lado--goh { border-color: var(--goh-borda-acesa); box-shadow: 0 0 0 1px var(--goh-contorno), 0 0 22px rgba(233, 181, 82, 0.16); }
.comparar__lado--goh h3 { color: var(--goh-ouro-claro); }
.comparar__vs { font: 400 48px/1 var(--goh-letreiro); color: var(--goh-ouro); text-shadow: 0 3px 0 #000; }
.lista--nao li { color: var(--goh-texto-2); }
.lista--nao li::before { background: #e5484d; transform: none; clip-path: polygon(20% 0, 50% 30%, 80% 0, 100% 20%, 70% 50%, 100% 80%, 80% 100%, 50% 70%, 20% 100%, 0 80%, 30% 50%, 0 20%); width: 11px; height: 11px; left: 2px; top: 0.5em; }
.lista--sim li::before { background: var(--pix-claro); }

/* Novidades: os cartões do mural do GoH (a pílula, a data e o título em negrito) */
.novidades { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin: 0; padding: 0; list-style: none; }
.novidade { padding: 18px 20px 20px; }
.novidade__topo { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; font-size: 13px; font-weight: 900; color: var(--goh-dourado-fosco); }
.novidade .pilula--pix { min-height: 0; padding: 3px 10px 2px; font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; border-radius: 999px; }
.novidade h3 { margin-bottom: 8px; font-size: 19px; }
.novidade > p:last-child { margin: 0; font-size: 15px; color: var(--goh-texto-2); }

/* Chamada final: o letreiro no meio, com a luz dourada atrás */
.final { padding: 120px 0 110px; background: radial-gradient(ellipse 50% 60% at 50% 55%, rgba(233, 181, 82, 0.08), transparent 70%); }
.final__caixa { text-align: center; }
.final__caixa p { max-width: 40em; margin: 16px auto 0; color: var(--goh-texto-2); font-size: 18px; text-wrap: balance; }
.final .acoes { justify-content: center; margin-bottom: 0; }

/* Rodapé: o do GoH, com a marca no meio e os links em linha */
.rodape { padding: 48px 0 40px; text-align: center; border-top: 1px solid rgba(233, 196, 106, 0.14); background: linear-gradient(180deg, rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.35)); }
.rodape__marca { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 0; }
.rodape__marca .letreiro { font-size: 32px; }
html:lang(ru) .rodape__marca .letreiro, html:lang(th) .rodape__marca .letreiro, html:lang(vi) .rodape__marca .letreiro { font-family: "Alagard GohBomb", var(--goh-letra); font-weight: 400; }
.rodape__frase { margin: 12px 0 18px; font-size: 13px; font-weight: 900; color: var(--goh-texto-2); text-transform: uppercase; letter-spacing: 0.14em; }
.rodape__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 26px; margin: 0; padding: 0; list-style: none; }
.rodape__links a { font-weight: 900; color: var(--goh-texto-3); text-decoration: none; }
.rodape__links a:hover { color: var(--goh-ouro-claro); }

/* Imagem ampliada: na moldura dourada, com o ✕ no quadradinho das janelas do jogo */
.ampliada { max-width: 96vw; max-height: 96vh; padding: 0; border: 0; background: transparent; overflow: visible; }
.ampliada::backdrop { background: rgba(6, 9, 13, 0.88); }
.ampliada img { display: block; max-width: 96vw; max-height: 90vh; border: 2px solid var(--goh-borda-clara); border-radius: var(--goh-raio-cartao); box-shadow: 0 0 0 1px var(--goh-contorno), 0 10px 40px rgba(0, 0, 0, 0.7); }
.ampliada__fechar {
  position: absolute;
  top: -18px;
  right: -18px;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0 0 3px;
  font: 900 28px/1 var(--goh-letra);
  color: var(--goh-texto);
  border: 2px solid var(--goh-borda-clara);
  border-radius: var(--goh-raio);
  background: linear-gradient(180deg, #1b222c, #10151b);
  box-shadow: 0 0 0 1px var(--goh-contorno);
  cursor: pointer;
}
.ampliada__fechar:hover { color: #fff; filter: brightness(1.2); }

/* ---------- Animações ---------- */

@keyframes flutuar { 50% { transform: translateY(-8px); } }
@keyframes encher { to { width: 100%; } }
@keyframes menu-abrir { from { opacity: 0; transform: translateY(-8px); } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---------- Telas menores ---------- */

/* PC estreito: a demonstração encolhe junto com a coluna (sai do 1x) */
@media (max-width: 1240px) {
  .abertura__grade { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 36px; }
  .demo { width: 100%; }
  .abertura h1 { font-size: 64px; }
  .letreiro-marca__moeda { width: 96px; }
  .abertura .acoes { gap: 10px; }
  .abertura .acoes .botao-jogar, .abertura .acoes .botao { padding: 10px 20px; font-size: 18px; }
  .classes { grid-template-columns: 220px minmax(0, 1fr) 320px; }
  .raridades { grid-template-columns: repeat(3, 1fr); }
  .moedas { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 1100px) {
  .passos-jogo { grid-template-columns: repeat(2, 1fr); }
  .modos { grid-template-columns: 1fr; }
  .modo { flex-direction: row; gap: 18px; }
  .modo__print { width: 46%; flex: none; }
  .telas { grid-template-columns: 1fr; }
  .celular { display: grid; grid-template-columns: auto 1fr; grid-template-rows: 1fr auto auto 1fr; gap: 6px 22px; text-align: left; }
  .celular__fotos { grid-row: 1 / 5; margin: 0; }
  .celular h3 { grid-row: 2; }
  .celular p { grid-row: 3; }
  .celular__fotos img { width: 120px; }
  .classes { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .classes__lista { grid-column: 1 / -1; grid-template-columns: repeat(5, minmax(0, 1fr)); border-right: 0; border-bottom: 1px solid rgba(233, 196, 106, 0.16); }
  .classes__lista button { flex-direction: column; align-items: center; text-align: center; padding: 8px 6px; }
  .classes__lista small { display: none; }
  .arenas { grid-template-columns: repeat(2, 1fr); }
  .token, .pix { grid-template-columns: 1fr; }
  .novidades { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- Tablet e celular: o menu vira um painel que abre pelo botão de três barras ---------- */
.menu-botao, .menu__icone { display: none; }

@media (max-width: 960px) {
  .topo__linha { gap: 10px; }
  .topo__nav { flex: 0 0 0; }
  .menu { display: none; }
  .botao-pix { display: none; }
  .topo__linha > .botao-jogar--pequeno { margin-left: auto; }
  .carrossel__legenda { display: flex; align-items: center; min-height: 2.6em; }

  .menu-botao {
    display: block;
    position: relative;
    flex: none;
    width: 46px;
    height: 46px;
    padding: 0;
    border: 2px solid var(--goh-borda);
    border-radius: var(--goh-raio);
    background: #141a22;
    box-shadow: 0 0 0 1px var(--goh-contorno);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .menu-botao span, .menu-botao span::before, .menu-botao span::after {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 20px;
    height: 3px;
    margin: -1.5px 0 0 -10px;
    border-radius: 2px;
    background: var(--goh-ouro-claro);
    transition: transform 0.2s, background 0.2s;
  }
  .menu-botao span::before, .menu-botao span::after { content: ""; left: 0; top: 0; margin: 0; }
  .menu-botao span::before { transform: translateY(-7px); }
  .menu-botao span::after { transform: translateY(7px); }
  .topo--aberto .menu-botao span { background: transparent; }
  .topo--aberto .menu-botao span::before { transform: rotate(45deg); }
  .topo--aberto .menu-botao span::after { transform: rotate(-45deg); }
  .topo--aberto .menu-botao { border-color: var(--goh-borda-acesa); background: linear-gradient(180deg, #5c3c1d, #3b2511); }

  /* o painel desce logo abaixo da barra, como a gaveta do menu do jogo: as seções em linhas */
  .topo--aberto .menu {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0 18px;
    position: absolute;
    top: calc(100% + 6px);
    left: 8px;
    right: 8px;
    margin: 0;
    padding: 6px 12px;
    border: 2px solid var(--goh-borda-clara);
    border-radius: var(--goh-raio-cartao);
    background: linear-gradient(180deg, var(--goh-painel-claro), var(--goh-painel-2));
    box-shadow: 0 0 0 1px var(--goh-contorno), 0 24px 60px rgba(0, 0, 0, 0.6);
    max-height: calc(100vh - 100px);
    max-height: calc(100dvh - 100px);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(196, 150, 80, 0.55) transparent;
    animation: menu-abrir 0.18s ease-out;
  }
  .topo--aberto .menu li { border-bottom: 1px solid rgba(233, 196, 106, 0.12); }
  .topo--aberto .menu a { display: flex; align-items: center; gap: 12px; min-height: 58px; padding: 6px; font-size: 18px; -webkit-tap-highlight-color: transparent; }
  .topo--aberto .menu a::after { content: ""; position: static; flex: none; margin-left: auto; width: 9px; height: 13px; background: var(--goh-dourado-fosco); box-shadow: none; -webkit-mask: var(--goh-seta) center / contain no-repeat; mask: var(--goh-seta) center / contain no-repeat; }
  .topo--aberto .menu a:hover, .topo--aberto .menu a:focus-visible, .topo--aberto .menu a:active { color: var(--goh-ouro-claro); background: rgba(255, 255, 255, 0.05); }
  .menu__icone { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border: 2px solid #3a4250; border-radius: var(--goh-raio); background: radial-gradient(circle at 50% 35%, #2b3a4c, #121922); overflow: hidden; }
  .menu__icone img { width: 32px; height: 32px; object-fit: contain; }
  .menu__icone img[src$="player_front_00.png"] { width: 40px; height: 42px; margin-top: 8px; }
  .menu__icone img[src$="pix.png"] { width: 24px; height: 24px; }

  /* atrás do painel, a página escurece; tocar fora fecha (script.js) */
  body.menu-aberto::after { content: ""; position: fixed; inset: 0; z-index: 9; background: rgba(6, 9, 13, 0.62); }

  /* GohBomb (idioma, 02/11): o idioma sai do topo e fica no fim do painel, numa linha como as das seções */
  .idioma--topo { display: none; }
  /* GohBomb (idioma): se o Jogar e o menu não cabem ao lado do nome (alemão num celular de 360 px), sai o nome e a
     jornada e fica só o ícone (o script.js marca o topo como apertado) */
  .topo--apertado .marca__texto { display: none; }
  .topo--aberto .menu .menu__idioma { display: block; grid-column: 1 / -1; border-bottom: 0; }
  .menu__idioma .idioma__botao { display: flex; gap: 12px; width: 100%; min-height: 58px; padding: 6px; font-size: 18px; letter-spacing: 0; color: var(--goh-texto); border: 0; background: none; box-shadow: none; }
  .menu__idioma .idioma__botao:hover, .menu__idioma .idioma__botao:focus-visible, .menu__idioma.idioma--aberto .idioma__botao { filter: none; color: var(--goh-ouro-claro); background: rgba(255, 255, 255, 0.05); }
  .menu__idioma .idioma__globo { width: 44px; height: 44px; border: 2px solid #3a4250; border-radius: var(--goh-raio); background: radial-gradient(circle at 50% 35%, #2b3a4c, #121922); }
  .menu__idioma .idioma__rotulo { display: inline; }
  .menu__idioma .idioma__atual { margin-left: auto; font-size: 16px; font-weight: 800; color: var(--goh-dourado); text-align: right; }
  .menu__idioma .idioma__seta { margin-right: 2px; }
  .menu__idioma .idioma__lista { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 10px; padding: 8px 0 10px; border-top: 1px solid rgba(233, 196, 106, 0.12); animation: menu-abrir 0.18s ease-out; }
  .menu__idioma .idioma__opcao { min-height: 48px; font-size: 17px; }

  /* a abertura em uma coluna: a marca, os botões e a demonstração embaixo */
  .abertura__grade { grid-template-columns: minmax(0, 1fr); gap: 32px; min-height: 0; }
  .abertura__texto { text-align: center; }
  .letreiro-marca, .chamadas, .acoes, .abertura .pilulas { justify-content: center; }
  .abertura__frase { margin-inline: auto; }
  .demo { width: min(710px, 100%); margin-inline: auto; }
}

/* ---------- Celular, em pé e deitado ----------
   O público é de celular: tudo aqui fica só dentro das media queries (largura de celular, ou deitado com pouca
   altura); no PC nada muda. */
@media (max-width: 640px), (orientation: landscape) and (max-height: 500px) {
  :root { --altura-topo: 60px; }
  /* o topo some ao rolar para baixo e volta ao rolar para cima (script.js) */
  .topo--escondido { transform: translateY(-100%); }
  .topo__linha { width: calc(100% - 20px); gap: 8px; }
  .marca { gap: 8px; }
  .marca__icone { width: 44px; height: 44px; }
  .marca__icone img { width: 32px; height: 32px; }
  .marca__texto { width: 116px; }
  .botao-jogar--pequeno { min-height: 44px; padding: 0 14px; font-size: 15px; }
  .menu-botao { width: 44px; height: 44px; }

  .conteudo { width: calc(100% - 32px); }
  .letreiro { font-size: 32px; }
  html:lang(ru) .letreiro, html:lang(th) .letreiro, html:lang(vi) .letreiro { font-size: 28px; }
  .secao { padding-top: 64px; }
  .cabeca { margin-bottom: 28px; }
  .cabeca .letreiro { margin: 14px 0 10px; }
  .cabeca p, .intro { font-size: 15.5px; }
  .subtitulo { margin-top: 44px; font-size: 15px; letter-spacing: 0.14em; }

  .botao-jogar, .botao { min-height: 54px; padding: 8px 22px; font-size: 18px; }
  .botao-jogar img { width: 30px; height: 30px; }
  .pilula:not(.pilula--ouro) { min-height: 36px; padding: 4px 12px; font-size: 14px; }
  .novidade .pilula--pix { min-height: 0; padding: 3px 10px 2px; font-size: 12px; }

  .passos-jogo li { padding: 16px 14px 18px; }
  .passos-jogo img { width: 48px; height: 48px; }
  .passos-jogo h3 { font-size: 19px; }
  .modo { flex-direction: column; gap: 0; }
  .modo__print { width: 100%; }
  .celular { display: block; text-align: center; }
  .celular__fotos { margin-bottom: 14px; }

  .classes { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  /* as classes passam com o dedo numa fileira, cada uma do tamanho do nome (os nomes longos não quebram no meio) */
  .classes__lista { display: flex; gap: 8px; padding: 12px 10px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scrollbar-width: none; }
  .classes__lista::-webkit-scrollbar { display: none; }
  .classes__lista li { flex: none; scroll-snap-align: start; }
  .classes__lista button { min-width: 84px; min-height: 0; gap: 4px; padding: 6px 10px; }
  .classes__lista b { font-size: 13px; white-space: nowrap; }
  .classes__retrato { width: 44px; height: 44px; }
  .palco { min-height: 300px; }
  .palco__heroi { width: 147px; height: 156px; margin-top: -30px; }
  .classes__info { padding: 18px 18px 20px; border-left: 0; border-top: 1px solid rgba(233, 196, 106, 0.16); }
  .classe h3 { font-size: 26px; margin-bottom: 8px; }

  .raridades { grid-template-columns: repeat(3, 1fr); gap: 12px; }
  .rar__cartao img { width: 74px; height: 78px; }
  .rar__selo { padding: 4px 8px 3px; font-size: 11px; }
  .elenco { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
  .cat img { width: 74px; height: 78px; }
  .cat span { font-size: 11.5px; padding: 3px 4px; }

  .ilhas { grid-template-columns: 1fr; gap: 14px; }
  .ilha, .ilha:first-child { height: 170px; }
  .ilha h3 { font-size: 32px; }
  .arenas { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .arena { padding: 6px 6px 10px; }
  .arena h4 { font-size: 15.5px; }
  .arena p { font-size: 14px; gap: 6px; }
  .arena p img { width: 26px; height: 26px; }
  .arenas li:last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; width: calc(50% - 6px); }
  .bombas { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .bombas li { padding: 10px 4px; font-size: 13px; }
  .bombas img { width: 56px; height: 56px; }

  .token__moeda { flex-direction: column; text-align: center; padding: 22px 18px; }
  .token__moeda img { width: 128px; height: 128px; }
  .destaques { gap: 10px; }
  .destaques li { flex-direction: column; align-items: flex-start; gap: 6px; padding: 12px 14px; }
  .destaques b { font-size: 48px; }
  .moedas, .recursos { grid-template-columns: 1fr; gap: 10px; }

  .pix__texto { padding: 20px 18px; }
  .pix__tela { padding: 18px 12px; }
  .janela__linha strong { font-size: 25px; white-space: nowrap; }
  .comparar { grid-template-columns: 1fr; gap: 10px; }
  .comparar__vs { justify-self: center; font-size: 32px; }

  .novidades { grid-template-columns: 1fr; gap: 12px; }
  .final { padding: 80px 0 70px; }
  .final__caixa p { font-size: 16px; }
  .rodape__links { gap: 6px 18px; }

  .carrossel__rodape { gap: 8px; }
  .carrossel__legenda { flex-basis: 100%; font-size: 16px; }
  .carrossel__controles { width: 100%; margin: 0; gap: 4px; justify-content: space-between; }
  .carrossel__pontos { flex: 1; min-width: 0; justify-content: space-evenly; }
  .carrossel__pontos button { flex: none; width: 13px; height: 13px; }

  /* a imagem grande: o X fica em cima dela; embaixo, a dica de deitar o celular */
  .ampliada__fechar { top: -54px; right: 0; }
  .ampliada::after { content: attr(data-dica); display: block; margin-top: 14px; font: 700 15px/1.4 var(--goh-letra); text-align: center; color: var(--goh-texto-2); }
}

/* Celular em pé */
@media (max-width: 640px) and (orientation: portrait) {
  .topo--aberto .menu { grid-template-columns: 1fr; }
  .abertura { padding-top: calc(var(--altura-topo) + 30px); }
  .letreiro-marca { gap: 10px; }
  .letreiro-marca__moeda { width: 72px; }
  .abertura h1 { font-size: 48px; }
  .chamadas { gap: 4px 10px; margin-top: 16px; font-size: 15px; }
  .abertura__frase { font-size: 15px; }
  .acoes { flex-direction: column; align-items: stretch; gap: 10px; margin: 20px 0 14px; }
  .abertura .pilulas { gap: 8px; }
  .abertura .pilula { min-height: 34px; padding: 3px 10px; font-size: 13px; }
  .demo__abas { gap: 6px; margin-bottom: 10px; }
  .demo__abas button { min-height: 40px; padding: 4px 12px 4px 6px; font-size: 14px; }
  .atalhos { gap: 8px; margin-top: 30px; }
  .atalhos a { min-height: 44px; padding: 4px 12px 4px 6px; font-size: 14px; }
  .atalhos img { width: 26px; height: 26px; }
  .ilha > div { left: 14px; bottom: 12px; }
}

/* telinha de 320 a 359 px: a jornada sai do topo, para o Jogar e o menu caberem */
@media (max-width: 359px) {
  .marca__texto { width: auto; }
  .jornada, .jornada__barra { display: none; }
  .bombas li { font-size: 12px; }
}

/* Celular deitado: a abertura em duas colunas como no PC (a marca e os botões de um lado, a demonstração do outro) e
   as listas em mais colunas, porque a tela é larga e baixa */
@media (orientation: landscape) and (max-height: 500px) {
  .topo--aberto .menu { grid-template-columns: repeat(3, 1fr); }
  .topo--aberto .menu a { min-height: 52px; font-size: 17px; }
  .abertura { padding: calc(var(--altura-topo) + 18px) 0 24px; }
  .abertura__grade { grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: 22px; width: calc(100% - 32px); }
  .abertura__texto { text-align: left; }
  .letreiro-marca, .chamadas, .acoes, .abertura .pilulas { justify-content: flex-start; }
  .letreiro-marca__moeda { width: 64px; }
  .abertura h1 { font-size: 48px; }
  .chamadas { margin: 12px 0 4px; gap: 2px 8px; font-size: 14px; }
  .abertura__frase { display: none; }
  .acoes { margin: 14px 0 10px; gap: 10px; }
  .acoes .botao-jogar, .acoes .botao { min-height: 48px; padding: 6px 16px; font-size: 16px; }
  .abertura .pilula { min-height: 32px; padding: 2px 10px; font-size: 12.5px; }
  .demo figcaption { margin-top: 8px; font-size: 12.5px; }
  .demo figcaption b { font-size: 15px; }
  .demo__abas { margin-bottom: 8px; }
  .demo__abas button { min-height: 38px; padding: 3px 12px 3px 6px; font-size: 13.5px; }
  .atalhos { margin-top: 22px; gap: 8px; }
  .atalhos a { min-height: 44px; font-size: 14px; }
  .passos-jogo { grid-template-columns: repeat(4, 1fr); gap: 10px; }
  .passos-jogo p { font-size: 13.5px; }
  .modos { grid-template-columns: 1fr; }
  .modo { flex-direction: row; gap: 14px; }
  .modo__print { width: 44%; }
  .telas { grid-template-columns: minmax(0, 1fr); }
  .celular { display: grid; grid-template-columns: auto 1fr; grid-template-rows: 1fr auto auto 1fr; gap: 6px 18px; text-align: left; }
  .celular__fotos { grid-row: 1 / 5; margin: 0; }
  .celular h3 { grid-row: 2; }
  .celular p { grid-row: 3; }
  .celular__fotos img { width: 96px; }
  .classes { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .classes__lista { grid-column: 1 / -1; }
  .classes__info { border-top: 0; border-left: 1px solid rgba(233, 196, 106, 0.16); }
  .raridades { grid-template-columns: repeat(6, 1fr); gap: 8px; }
  .rar__cartao img { width: 49px; height: 52px; }
  .elenco { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); }
  .ilhas { grid-template-columns: repeat(2, 1fr); }
  .ilha:first-child { grid-column: 1 / -1; }
  .arenas { grid-template-columns: repeat(3, 1fr); }
  .arenas li:last-child:nth-child(odd) { grid-column: auto; width: auto; }
  .bombas { grid-template-columns: repeat(5, 1fr); }
  .token__moeda { flex-direction: row; text-align: left; }
  .destaques { grid-template-columns: repeat(4, 1fr); }
  .moedas { grid-template-columns: repeat(2, 1fr); }
  .recursos { grid-template-columns: repeat(2, 1fr); }
  .pix { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .comparar { grid-template-columns: 1fr auto 1fr; }
  .novidades { grid-template-columns: repeat(2, 1fr); }
  .ampliada::after { display: none; }
}