/* =========================================================================
   GTH UI -- a pele do jogo sobre o site (aprovada na previa de 18/09/2026).

   Carregado DEPOIS do site.css, em todas as paginas, pelo _Layout. Nada do
   site.css e' apagado: aqui so' se veste o que ja existe.

   Arte do jogo, recortada 1:1 do cliente, sem ampliar nem recolorir:
     img/jogo/botao-0|1|2.png   if_main1.dds (0,514) (57,514) (114,514) 57x27
                                o botao de texto do jogo: normal, hover, pressionado
     img/jogo/placa-titulo.png  if_main0.dds (512,426) 217x36  titulo da janela de login
     img/jogo/placa-base.png    if_main0.dds (136,775) 217x21  base da janela de login

   O botao e' um 9-slice em 1:1: os cantos de 6 px ficam exatos e so' o meio
   liso e as bordas retas se estendem. As placas aparecem no tamanho original.

   FICAM DE FORA, com a pele da propria marca: Google e Discord
   (.botao-google, .botao-discord, .btn-discord, .discord-topo) e os seletores
   oficiais de PayPal e USDT (.metodos-pagamento, arquivo proprio).
   ========================================================================= */

/* ---- o botao do jogo em todo .btn e .botao ---- */
.btn:not(.botao-google):not(.botao-discord),
.botao:not(.botao-google):not(.botao-discord){
  box-sizing:border-box;min-height:44px;
  padding:.45rem 1.3rem;
  border-style:solid;border-width:6px;border-radius:0;
  border-image:url(/img/jogo/botao-0.png) 6 fill / 6px stretch;
  background:none;box-shadow:none;
  color:#eef3f6;text-shadow:0 1px 2px rgba(0,0,0,.9);
  transition:none;
}
.btn:not(.botao-google):not(.botao-discord):hover,
.botao:not(.botao-google):not(.botao-discord):hover{
  border-image-source:url(/img/jogo/botao-1.png);
  background:none;color:#fff;transform:none;box-shadow:none;
}
.btn:not(.botao-google):not(.botao-discord):active,
.botao:not(.botao-google):not(.botao-discord):active{
  border-image-source:url(/img/jogo/botao-2.png);
}
.btn:not(.botao-google):not(.botao-discord):focus-visible,
.botao:not(.botao-google):not(.botao-discord):focus-visible{
  outline:2px solid var(--gelo);outline-offset:3px;border-radius:0;
}
/* desabilitado: a placa pressionada, apagada, sem hover */
.btn:not(.botao-google):not(.botao-discord):disabled,
.btn:not(.botao-google):not(.botao-discord)[aria-disabled="true"],
.botao:not(.botao-google):not(.botao-discord):disabled,
.btn.btn-inativo{
  border-style:solid;border-image-source:url(/img/jogo/botao-2.png);
  color:var(--suave);opacity:.6;cursor:not-allowed;
}
.btn.btn-grande:not(.botao-google):not(.botao-discord){min-height:54px;padding:.7rem 2rem}

/* EN/KR e a aba ativa do banco de itens: o estado ativo sai do dourado para
   o gelo da paleta, o mesmo acento do foco dos botoes */
.idi.ativo{background:var(--gelo);color:var(--abismo)}
/* .texto a:not(.btn) pinta todo link de gelo; a aba ativa precisa vencer
   essa regra, senao o rotulo some no fundo claro */
.db-abas .db-aba.ativa,
.db-abas .db-aba.ativa:hover{background:var(--gelo);color:var(--abismo);border-color:var(--gelo)}

/* ---- cabecalho compacto: Download, Account, [Collision Coins], Updates, Help, Story ---- */
.gth-menu{display:flex;align-items:center;gap:1.3rem;margin-left:auto;font-size:.92rem}
.gth-menu > a:not(.btn){color:var(--texto);letter-spacing:.02em;padding:.6rem 0}
.gth-menu > a:not(.btn):hover{color:var(--nuvem)}
.gth-menu > a[aria-current="page"]{color:var(--nuvem)}
.gth-menu .btn{min-height:44px;padding:.3rem 1rem;font-size:.9rem}
.gth-historia{position:relative}
.gth-historia summary{
  list-style:none;cursor:pointer;color:var(--tenue);font-size:.86rem;padding:.6rem 0;
}
.gth-historia summary::-webkit-details-marker{display:none}
.gth-historia summary::after{content:" \25BE";font-size:.7rem}
.gth-historia[open] summary{color:var(--nuvem)}
.gth-historia-menu{
  position:absolute;right:0;top:100%;z-index:60;min-width:11rem;
  display:flex;flex-direction:column;padding:.4rem 0;
  background:rgba(4,16,26,.97);border:1px solid var(--borda-forte);border-radius:3px;
}
.gth-historia-menu a{padding:.6rem 1rem;color:var(--texto);font-size:.9rem}
.gth-historia-menu a:hover{color:var(--nuvem);background:rgba(143,189,212,.08)}
.gth-sair{display:inline-flex}

/* ---- janela de download: placas da janela de login do jogo ---- */
.gth-janela-download{width:min(400px,100%);margin:0 auto 1.2rem}
.gth-janela-download > img{display:block;margin:0 auto;max-width:100%;height:auto}
.gth-janela-download > img:first-child{margin-bottom:-1px}
.gth-janela-download > img:last-child{margin-top:-1px}
.gth-janela-corpo{
  padding:1.3rem 1rem 1rem;text-align:center;
  background:rgba(4,16,26,.78);
  border-left:1px solid rgba(190,190,190,.45);border-right:1px solid rgba(190,190,190,.45);
}
.gth-janela-corpo .btn.btn-grande{min-height:64px;padding:.7rem 2.6rem;font-size:1.2rem;letter-spacing:.04em}
.gth-arquivo{margin:.9rem 0 .2rem;font-size:.85rem;color:var(--suave)}
.gth-conta{margin:.6rem 0 0;font-size:.95rem;display:flex;gap:.6rem;justify-content:center;flex-wrap:wrap}
.gth-conta a{color:var(--gelo);padding:.5rem .2rem}
.gth-conta a:hover{color:var(--nuvem)}
.gth-sep{width:1px;align-self:stretch;margin:.5rem .2rem;background:var(--borda-forte)}

/* ---- home: dobra de cima ---- */
.gth-hero{min-height:calc(100svh - 80px);padding-top:3rem;padding-bottom:3rem}
.gth-titulo{font-size:clamp(2.2rem,5.4vw,3.6rem);margin:0 0 .4rem;color:var(--nuvem)}
.gth-chamada{margin:0 0 1.4rem;font-family:var(--serif);font-style:italic;font-size:clamp(1.2rem,2.4vw,1.55rem);color:var(--gelo)}

/* A logo oficial no lugar do titulo em texto: proporcional, so' reduzida. */
.gth-hero .gth-logo{display:block;width:clamp(230px,32vw,400px);height:auto;margin:0 auto}

/* A janela de download da HOME fecha nas pontas das placas originais: a
   janela tem a largura delas (217 px, 1:1) e as laterais sao o mesmo filete
   prateado das extremidades (#8c8e84), da borda de uma placa a da outra.
   So' na home; /download e /ko seguem como estao. */
.gth-hero .gth-janela-download{width:217px;max-width:100%}
.gth-hero .gth-janela-corpo{padding:1rem .5rem .9rem;border-left:2px solid #8c8e84;border-right:2px solid #8c8e84}
.gth-hero .gth-janela-corpo .btn.btn-grande{width:100%;min-height:54px;padding:.45rem .6rem;font-size:1rem;letter-spacing:.02em}
.gth-hero .gth-arquivo{font-size:.8rem}

/* ---- secoes da home ---- */
.gth-secao{max-width:var(--larg);margin:0 auto;padding:2.2rem clamp(1rem,4vw,2rem);scroll-margin-top:84px}
.gth-caixa{background:rgba(6,26,36,.6)}
.gth-passos{list-style:none;margin:0;padding:1.4rem clamp(1rem,3vw,2rem) 1.6rem;display:grid;gap:1.6rem;grid-template-columns:repeat(3,1fr)}
.gth-passos li{margin:0;position:relative;padding-left:2.6rem}
.gth-passos h2{font-size:1.25rem;margin:0 0 .4rem;color:var(--nuvem)}
.gth-passos p{margin:0 0 .6rem;color:var(--suave);font-size:.93rem}
.gth-n{
  position:absolute;left:0;top:.1rem;width:1.8rem;height:1.8rem;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--serif);font-size:1.1rem;color:var(--gelo);
  border:1px solid var(--borda-forte);border-radius:50%;
}
.gth-link{color:var(--gelo);font-size:.92rem;display:inline-block;padding:.3rem 0}
.gth-link:hover{color:var(--nuvem)}

/* cards: os botoes na mesma base e do mesmo tamanho */
.gth-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:1.6rem}
.gth-cards .gth-caixa{display:flex;flex-direction:column}
.gth-card-texto{flex:1;display:flex;flex-direction:column;padding:1.1rem clamp(1rem,3vw,2rem) 1.3rem}
.gth-card-texto p{margin:0 0 1rem;color:var(--suave);font-size:.95rem}
.gth-card-texto .gth-botoes{margin:auto 0 0}
.gth-cards .gth-botoes .btn{width:100%;max-width:15rem;min-height:54px}

.gth-historia-bloco{display:grid;grid-template-columns:minmax(0,300px) 1fr;gap:2rem;align-items:center}
.gth-historia-bloco figure{margin:0}
.gth-historia-bloco img{border:1px solid var(--borda-forte);border-radius:3px}
.gth-links-historia{display:flex;gap:1.4rem;flex-wrap:wrap}
.gth-links-historia a{color:var(--gelo);padding:.4rem 0}

/* ---- telefone ---- */
@media (max-width:900px){
  .topo{flex-wrap:wrap;row-gap:.2rem}
  /* o site.css esconde `.topo nav` abaixo de 900px; o menu compacto fica,
     numa segunda linha */
  .topo .gth-menu{display:flex;order:3;width:100%;margin-left:0;flex-wrap:wrap;justify-content:space-between;gap:.2rem .55rem;font-size:.85rem}
  .topo .gth-menu .btn{padding:.25rem .75rem;font-size:.85rem}
  .gth-passos,.gth-cards{grid-template-columns:1fr}
  .gth-cards .gth-botoes .btn{max-width:none}
  .gth-historia-bloco{grid-template-columns:1fr}
  .gth-historia-bloco figure{max-width:320px}
}
@media (max-width:420px){
  .gth-janela-corpo .btn.btn-grande{padding:.7rem 1.4rem;font-size:1.08rem;width:100%}
  .gth-hero{align-items:flex-start;padding-top:1.6rem;min-height:0}
}