/* ===========================================================================
   One Piece: Despertar de Nika — estilo do site

   VERSÃO 11 — reformulação de cor (19/08/2026).

   A versão anterior transcrevia literalmente os assets do jogo
   (fonte-cocos/assets/main): laranja #F3723E, ouro #FEED70, halftone em toda
   superfície, molduras de 3–4px e contorno preto no texto. Dentro do jogo
   isso está certo — é a gramática de página de mangá. Numa página
   institucional o mesmo vocabulário lê como cartoon e tira credibilidade.

   O que mudou, e por quê:

     · a saturação desceu     laranja #F3723E -> carmim   #9C3324
                              ouro    #FEED70 -> dourado  #C6A15B
       (mesma família de cor do jogo, tom envelhecido em vez de fluorescente)

     · o fundo escuro saiu do marrom #2A1710 para um grafite azulado #141A1F,
       que é neutro e deixa a ARTE do jogo ser a única coisa colorida da tela

     · o papel bege-esverdeado #E3E3D7 virou off-white #F7F5F0

     · molduras: outline duplo de cobre -> 1px de borda + sombra difusa
     · halftone: só onde é decorativo, a 4–6% (era 16–34%)
     · texto: acabaram o contorno preto e o gradiente recortado no H1;
       pesos caíram de 900 para 700/800
     · chanfro: 14px -> 8px nos painéis e 4px nos botões — a assinatura
       do jogo continua legível, sem virar balão de HQ

   O acento forte agora é escasso de propósito: dourado e carmim só marcam
   ação e estado. Tudo que é estrutura é neutro.
   =========================================================================== */

/* ----------------------------------------------------------- 1. variáveis */
:root {
  /* superfícies claras */
  --papel-alto:   #FFFFFF;
  --papel:        #F7F5F0;
  --papel-baixo:  #EFECE4;
  --linha:        #DFDACF;
  --linha-forte:  #C7C0B2;

  /* superfícies escuras */
  --noite:        #141A1F;
  --noite-2:      #1B222A;
  --noite-3:      #232C35;
  --noite-linha:  rgba(255,255,255,.09);

  /* acentos — as cores do jogo, dessaturadas */
  --ouro:         #C6A15B;
  --ouro-claro:   #E0C48A;
  --ouro-esc:     #96733A;
  --carmim:       #9C3324;
  --carmim-claro: #B9503C;
  --carmim-esc:   #74231A;
  --verde:        #4F8A5B;
  --verde-esc:    #3B6B45;
  --azul:         #3F6E90;
  --roxo:         #7A5580;

  /* tinta */
  --tinta:        #22262B;
  --tinta-media:  #59616A;
  --tinta-fraca:  #8B939C;
  --creme:        #F1ECE3;
  --creme-fraco:  #BEB7AC;

  /* medidas */
  --larg:         1200px;
  --chanfro:      8px;
  --chanfro-bt:   4px;

  --som-cartao:   0 1px 2px rgba(20,26,31,.05), 0 10px 30px rgba(20,26,31,.09);
  --som-escuro:   0 12px 34px rgba(0,0,0,.38);
  --som-bt:       0 1px 2px rgba(20,26,31,.18);

  /* apelidos antigos — as páginas internas ainda citam estes nomes */
  --vermelho:     #9C3324;
  --capa:         #C7C0B2;
  --capa-esc:     #96733A;
  --ambar-txt:    #96733A;
  --verde-txt:    #3B6B45;
}

/* --------------------------------------------------------------- 2. reset */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--noite);
  color: var(--tinta);
  font: 16px/1.65 "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a   { color: inherit; text-decoration: none; }
button, input, select { font: inherit; color: inherit; }

::selection { background: rgba(198,161,91,.32); }

.larg { width: min(100% - 40px, var(--larg)); margin-inline: auto; }

/* --------------------------------------------------- 3. padrões do mangá */

/* a trama de meio-tom continua existindo — mas como textura de papel, quase
   subliminar, e não mais como enfeite de HQ */
.halftone::after {
  content: "";
  position: absolute; inset: 0;
  background-image: radial-gradient(currentColor .9px, transparent 1px);
  background-size: 7px 7px;
  opacity: .05;
  pointer-events: none;
}

/* corte diagonal do canto — a assinatura do jogo, agora discreta */
.chanfro {
  clip-path: polygon(
    var(--chanfro) 0, 100% 0, 100% calc(100% - var(--chanfro)),
    calc(100% - var(--chanfro)) 100%, 0 100%, 0 var(--chanfro));
}

/* mantidos por compatibilidade — sem o contorno preto de antes */
.contorno       { text-shadow: 0 1px 2px rgba(0,0,0,.35); }
.contorno-fino  { text-shadow: 0 1px 1px rgba(0,0,0,.28); }

/* ------------------------------------------------------------ 4. o papel */

/* a superfície clara: off-white, 1px de borda e sombra difusa.
   sem outline de cobre, sem filete interno, sem halftone no canto */
.papel {
  position: relative;
  background: var(--papel-alto);
  border: 1px solid var(--linha);
  border-radius: 2px;
  box-shadow: var(--som-cartao);
  color: var(--tinta);
}

/* faixa de seção (o "kicker"): era um banner laranja chapado, virou uma
   etiqueta de texto — dourada sobre escuro, carmim sobre claro */
.faixa {
  position: relative;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 0;
  background: none;
  border: 0;
  color: var(--ouro);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .2em;
  text-transform: uppercase;
  clip-path: none;
}
/* o traço curto que vinha antes do texto saiu: é enfeite reconhecível de
   template automático, e o kicker se sustenta sozinho pelo caixa-alta */
.claro .faixa { color: var(--carmim); }

/* ----------------------------------------------------------- 5. os botões */

.bt {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 13px 28px;
  border: 1px solid var(--carmim-esc);
  background: linear-gradient(180deg, var(--carmim-claro) 0%, var(--carmim) 100%);
  color: #FCF6EE;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: .01em;
  cursor: pointer;
  clip-path: polygon(var(--chanfro-bt) 0, 100% 0, 100% calc(100% - var(--chanfro-bt)),
                     calc(100% - var(--chanfro-bt)) 100%, 0 100%, 0 var(--chanfro-bt));
  box-shadow: var(--som-bt);
  transition: background .15s, transform .08s, box-shadow .15s;
}
.bt:hover  { background: linear-gradient(180deg, #C25A45 0%, #A93A2A 100%); }
.bt:active { transform: translateY(1px); box-shadow: none; }
.bt:disabled, .bt[aria-disabled="true"] {
  background: #B7B0A5; border-color: #9E978C; color: #F2EFEA;
  cursor: not-allowed; box-shadow: none;
}

/* CTA — o botão dourado. Sem halftone, sem borda vermelha de 5px */
.bt-ouro {
  padding: 16px 40px;
  font-size: 16.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  border-color: var(--ouro-esc);
  background: linear-gradient(180deg, var(--ouro-claro) 0%, var(--ouro) 100%);
  color: #2E2413;
  text-shadow: none;
  box-shadow: 0 1px 2px rgba(20,26,31,.2), 0 8px 22px rgba(150,115,58,.22);
}
.bt-ouro:hover  { background: linear-gradient(180deg, #EBD3A0 0%, #CFAC69 100%); }
.bt-ouro::after { content: none; }

/* verde de confirmação */
.bt-verde {
  border-color: var(--verde-esc);
  background: linear-gradient(180deg, #5C9B68 0%, var(--verde) 100%);
  color: #F7FBF7;
}
.bt-verde:hover { background: linear-gradient(180deg, #67A874 0%, #4A8455 100%); }

/* ação secundária sobre a arte */
.bt-vazado {
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.32);
  color: var(--creme);
  backdrop-filter: blur(6px);
  box-shadow: none;
}
.bt-vazado:hover { background: rgba(255,255,255,.13); border-color: rgba(255,255,255,.5); }

/* ------------------------------------------------------------- 6. o topo */

.topo {
  position: sticky; top: 0; z-index: 60;
  background: rgba(17,22,27,.88);
  backdrop-filter: blur(14px) saturate(1.1);
  border-bottom: 1px solid var(--noite-linha);
}
.topo .larg { display: flex; align-items: center; gap: 22px; height: 66px; }

.marca { display: flex; align-items: center; gap: 11px; flex-shrink: 0; }
.marca .roger {
  width: 36px; height: 36px; flex-shrink: 0;
  opacity: .95;
}
.marca b {
  display: block; font-size: 16.5px; font-weight: 700; line-height: 1.1;
  color: var(--creme); letter-spacing: .005em;
  text-shadow: none;
}
.marca span {
  display: block; font-size: 9.5px; letter-spacing: .3em;
  color: var(--ouro); text-transform: uppercase; font-weight: 600;
  opacity: .85;
}

.menu { display: flex; gap: 2px; margin-left: 18px; }
.menu a {
  position: relative;
  padding: 9px 14px;
  color: rgba(241,236,227,.72); font-size: 14.5px; font-weight: 500;
  border-bottom: 2px solid transparent;
  transition: color .15s;
}
.menu a:hover  { color: var(--creme); }
.menu a.atual  { color: var(--creme); border-bottom-color: var(--ouro); }

.topo-dir { margin-left: auto; display: flex; align-items: center; gap: 12px; }

/* status do servidor */
.pulso {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 12px;
  background: rgba(79,138,91,.13);
  border: 1px solid rgba(79,138,91,.38);
  border-radius: 100px;
  color: #96C79F; font-size: 12px; font-weight: 600;
  clip-path: none;
}
.pulso i {
  width: 7px; height: 7px; border-radius: 50%;
  background: #5FA96D; box-shadow: 0 0 0 0 rgba(95,169,109,.55);
  animation: bate 2.4s infinite;
}
.pulso.fora {
  background: rgba(156,51,36,.14); border-color: rgba(185,80,60,.42); color: #DA9A8C;
}
.pulso.fora i { background: #B9503C; animation: none; }
@keyframes bate {
  70%  { box-shadow: 0 0 0 8px rgba(95,169,109,0); }
  100% { box-shadow: 0 0 0 0 rgba(95,169,109,0); }
}

/* seletor de idioma */
.idioma {
  display: flex;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 3px;
  background: rgba(255,255,255,.04);
  overflow: hidden;
}
/* só as bandeiras, sem rótulo: a inativa fica dessaturada e apagada, e a
   ativa acende — sem isso as duas competem e nenhuma parece selecionada */
.idioma button {
  display: grid; place-items: center;
  padding: 6px 9px; background: none; border: none; cursor: pointer;
  transition: background .15s, opacity .15s, filter .15s;
  opacity: .55; filter: saturate(.35);
}
.idioma button .bandeira {
  width: 22px; height: 15px; display: block;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(0,0,0,.35), 0 1px 2px rgba(0,0,0,.3);
}
.idioma button.ativa {
  background: rgba(198,161,91,.18);
  opacity: 1; filter: none;
}
.idioma button:hover:not(.ativa) { opacity: .85; filter: saturate(.7); }

.topo .quem { color: var(--ouro-claro); font-size: 13px; font-weight: 600; }

.abre-menu {
  display: none;
  background: none; border: 1px solid rgba(255,255,255,.2); border-radius: 3px;
  color: var(--creme);
  width: 38px; height: 36px; cursor: pointer; font-size: 17px;
}

/* -------------------------------------------------------------- 7. herói */

.heroi {
  position: relative;
  min-height: 620px;
  display: flex; align-items: center;
  padding: 64px 0 76px;
  overflow: hidden;
}
.heroi .arte {
  position: absolute; inset: 0;
  background: url("arte/fundo/tripulacao.jpg") center 22% / cover no-repeat;
  filter: saturate(.86) brightness(.95);
}
/* vinheta neutra: escurece sem tingir de laranja */
.heroi .arte::after {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(15,20,25,.93) 0%, rgba(15,20,25,.78) 38%, rgba(15,20,25,.30) 62%, rgba(15,20,25,.05) 80%),
    linear-gradient(180deg, rgba(15,20,25,.55) 0%, transparent 24%, transparent 58%, rgba(15,20,25,.92) 100%);
}
.heroi .larg {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: 1fr 400px; gap: 48px; align-items: center;
}

.chamada h1 {
  margin: 18px 0 16px;
  font-size: clamp(36px, 4.8vw, 56px);
  line-height: 1.08;
  font-weight: 700;
  letter-spacing: -.022em;
  color: #FFFFFF;
  text-shadow: 0 2px 18px rgba(0,0,0,.5);
}
/* era gradiente recortado com sombra vermelha; agora é uma segunda linha
   em dourado sólido — a mesma hierarquia, sem o efeito de adesivo */
.chamada h1 em {
  display: block; font-style: normal;
  color: var(--ouro-claro);
  -webkit-text-fill-color: currentColor;
  filter: none;
}
.chamada p {
  max-width: 52ch;
  color: rgba(241,236,227,.82); font-size: 16.5px; line-height: 1.7;
  text-shadow: 0 1px 8px rgba(0,0,0,.6);
}

.acoes { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 28px; }
.acoes .obs { color: var(--creme-fraco); font-size: 13px; }

/* os números */
.numeros {
  display: flex; gap: 40px; margin-top: 38px;
  padding-top: 26px;
  border-top: 1px solid rgba(255,255,255,.14);
}
.numeros div  { display: flex; flex-direction: column; }
.numeros b {
  font-size: 27px; font-weight: 700; line-height: 1;
  color: #FFFFFF; text-shadow: none;
}
.numeros span {
  margin-top: 7px; font-size: 11.5px; color: rgba(241,236,227,.62);
  text-transform: uppercase; letter-spacing: .11em; font-weight: 600;
}

/* ------------------------------------------------ 8. o painel de entrada */

.entrada { padding: 0; overflow: hidden; box-shadow: var(--som-escuro); }
/* a cabeça era laranja chapado com halftone; virou barra escura com um
   filete dourado embaixo — mesma leitura de "cabeçalho", sem o berro */
.entrada .cabeca {
  margin: 0;
  padding: 15px 20px;
  background: linear-gradient(180deg, var(--noite-3) 0%, var(--noite-2) 100%);
  border-bottom: 2px solid var(--ouro);
  color: var(--creme); font-weight: 700; font-size: 16px; letter-spacing: .01em;
  display: flex; align-items: center; gap: 10px;
  position: relative; overflow: hidden;
}
.entrada .cabeca::after { content: none; }
.entrada .cabeca svg,
.entrada .cabeca img { width: 24px; height: 24px; opacity: .9; }

.entrada .corpo { padding: 20px 22px 24px; }

/* abas Entrar / Criar conta — sublinhado em vez de dois botões coloridos */
.abas {
  display: flex; gap: 22px; margin-bottom: 18px;
  border-bottom: 1px solid var(--linha);
}
.abas button {
  flex: 0 0 auto; padding: 0 0 11px;
  background: none;
  border: none; border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  color: var(--tinta-fraca); font-weight: 600; font-size: 14.5px; cursor: pointer;
  clip-path: none;
  transition: color .15s, border-color .15s;
}
.abas button:hover:not(.ativa) { color: var(--tinta-media); }
.abas button.ativa {
  color: var(--carmim);
  border-bottom-color: var(--carmim);
  background: none; text-shadow: none;
}

.campo { margin-bottom: 14px; }
.campo label {
  display: block; margin-bottom: 6px;
  font-size: 12px; font-weight: 600; color: var(--tinta-media);
  text-transform: none; letter-spacing: .01em;
}
.campo input[type=text], .campo input[type=password] {
  width: 100%; padding: 11px 13px;
  background: #FFFFFF;
  border: 1px solid var(--linha-forte);
  border-radius: 3px;
  color: var(--tinta); font-size: 15px;
  clip-path: none;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.campo input::placeholder { color: #A9AFB6; }
.campo input:focus {
  border-color: var(--ouro-esc);
  box-shadow: 0 0 0 3px rgba(198,161,91,.2);
}
.campo input:-webkit-autofill,
.campo input:-webkit-autofill:hover,
.campo input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 100px #FFFFFF inset !important;
  -webkit-text-fill-color: var(--tinta) !important;
}
.campo .dica { margin-top: 5px; font-size: 11.5px; color: var(--tinta-fraca); line-height: 1.5; }

.linha-opcoes {
  display: flex; align-items: center; justify-content: space-between;
  margin: 6px 0 16px; font-size: 13px; color: var(--tinta-media);
}
.linha-opcoes label { display: flex; align-items: center; gap: 7px; cursor: pointer; }
.linha-opcoes a { color: var(--carmim); font-weight: 600; }
.linha-opcoes a:hover { text-decoration: underline; }

.entrada .bt { width: 100%; }

/* aviso dentro do painel */
.aviso {
  margin-top: 14px; padding: 11px 13px;
  font-size: 13.5px; font-weight: 500; line-height: 1.5;
  border: 1px solid rgba(156,51,36,.28);
  border-left: 3px solid var(--carmim);
  border-radius: 2px;
  background: rgba(156,51,36,.06); color: #8A2E20;
}
.aviso.ok {
  border-color: rgba(79,138,91,.3); border-left-color: var(--verde);
  background: rgba(79,138,91,.07); color: #326B3F;
}
.aviso:empty { display: none; }

/* ------------------------------------ 9. escolher o mundo (pós-login) */

.escolha { display: none; }
.escolha.on { display: block; }

.mundos-lista { display: flex; flex-direction: column; gap: 7px; margin-bottom: 16px; }

/* era amarelo chapado com halftone e fita vermelha; virou linha de lista
   sóbria — o estado é que carrega a cor, e só em pílula pequena */
.mundo-item {
  position: relative;
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px;
  background: var(--papel);
  border: 1px solid var(--linha);
  border-radius: 3px;
  color: var(--tinta); cursor: pointer; text-align: left; width: 100%;
  clip-path: none;
  overflow: hidden;
  transition: border-color .15s, background .15s, box-shadow .15s;
}
.mundo-item::after { content: none; }
.mundo-item:hover { background: #FFFFFF; border-color: var(--linha-forte); }
.mundo-item.on {
  background: #FFFFFF;
  border-color: var(--ouro);
  box-shadow: 0 0 0 2px rgba(198,161,91,.22);
}
.mundo-item .nome { flex: 1; font-weight: 600; font-size: 15px; }
.mundo-item .estado {
  font-size: 10.5px; font-weight: 700; padding: 3px 9px;
  border-radius: 100px;
  text-transform: uppercase; letter-spacing: .06em;
  clip-path: none;
}
.estado.aberto { background: rgba(79,138,91,.14);  color: #3B6B45; }
.estado.novo   { background: rgba(63,110,144,.14); color: #33607F; }
.estado.cheio  { background: rgba(89,97,106,.14);  color: #59616A; }
.estado.quente { background: rgba(156,51,36,.12);  color: #8A2E20; }

/* o mundo recomendado: um traço dourado à esquerda, não uma fita de canto */
.mundo-item.destaque { border-left: 3px solid var(--ouro); }
.mundo-item.destaque::before { content: none; }
.mundo-item.destaque .nome { padding-left: 0; }

/* --------------------------------------------------------- 10. seções */

.secao { padding: 84px 0; position: relative; }

.secao-cabeca { text-align: center; margin-bottom: 44px; }
.secao-cabeca h2 {
  margin: 16px 0 10px;
  font-size: clamp(26px, 3vw, 36px); font-weight: 700; line-height: 1.18;
  letter-spacing: -.015em;
}
.secao-cabeca p { margin: 0; font-size: 16px; }

/* seção clara — off-white liso, com uma trama de papel quase invisível */
.claro { background: var(--papel); color: var(--tinta); }
.claro::before {
  content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(#9A9284 .9px, transparent 1px);
  background-size: 10px 10px; opacity: .05; pointer-events: none;
}
.claro > .larg { position: relative; z-index: 1; }
.claro .secao-cabeca h2 { color: var(--tinta); }
.claro .secao-cabeca p  { color: var(--tinta-media); }

/* seção escura */
.escuro { background: var(--noite); color: var(--creme); }
.escuro .secao-cabeca h2 { color: #FFFFFF; text-shadow: none; }
.escuro .secao-cabeca p  { color: rgba(241,236,227,.68); }

/* ------------------------------------------------------- 11. novidades */

.novidades-grade { display: grid; grid-template-columns: 1.35fr 1fr; gap: 28px; align-items: start; }

.filtros { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-bottom: 28px; }
.filtros button {
  padding: 8px 16px;
  background: #FFFFFF;
  border: 1px solid var(--linha);
  border-radius: 100px;
  color: var(--tinta-media); font-size: 13.5px; font-weight: 600; cursor: pointer;
  clip-path: none;
  transition: border-color .15s, color .15s, background .15s;
}
.filtros button:hover:not(.ativa) { border-color: var(--linha-forte); color: var(--tinta); }
.filtros button.ativa {
  background: var(--tinta);
  border-color: var(--tinta);
  color: var(--papel-alto);
  text-shadow: none;
}

.noticia {
  display: flex; gap: 16px; align-items: flex-start;
  padding: 16px 18px; margin-bottom: 10px;
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s;
}
.noticia:hover {
  transform: none;
  border-color: var(--linha-forte);
  box-shadow: 0 2px 4px rgba(20,26,31,.06), 0 14px 34px rgba(20,26,31,.10);
}

.noticia .data {
  flex-shrink: 0; width: 52px; text-align: center;
  padding: 8px 0;
  background: var(--papel);
  border: 1px solid var(--linha);
  border-radius: 3px;
  color: var(--tinta);
  clip-path: none;
}
.noticia .data b    { display: block; font-size: 19px; font-weight: 700; line-height: 1; }
.noticia .data span { display: block; font-size: 9.5px; text-transform: uppercase; letter-spacing: .12em; margin-top: 4px; color: var(--tinta-fraca); }

.noticia .texto { flex: 1; min-width: 0; }
.noticia .marcador {
  display: inline-block; margin-bottom: 7px;
  padding: 3px 9px;
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
  border-radius: 100px;
  clip-path: none;
}
.marcador.servidor    { background: rgba(63,110,144,.13); color: #33607F; }
.marcador.atualizacao { background: rgba(150,115,58,.15); color: #7E5F2C; }
.marcador.evento      { background: rgba(122,85,128,.14); color: #6B4870; }
.marcador.beta        { background: rgba(79,138,91,.14);  color: #3B6B45; }

.noticia h3 { margin: 0 0 6px; font-size: 16px; font-weight: 700; color: var(--tinta); line-height: 1.4; }
.noticia p  { margin: 0; font-size: 14px; color: var(--tinta-media); line-height: 1.6; }

.noticia .corpo { display: none; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--linha); }
.noticia.aberta .corpo { display: block; }
.noticia .corpo p { white-space: pre-line; color: var(--tinta); }

/* lado direito: destaque com arte */
.lado-arte {
  position: relative; overflow: hidden;
  min-height: 340px;
  background: url("arte/fundo/porto.jpg") center / cover no-repeat;
  border: 1px solid var(--linha);
  border-radius: 2px;
  box-shadow: var(--som-cartao);
}
.lado-arte .selo {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 22px;
  background: linear-gradient(180deg, transparent, rgba(15,20,25,.72) 30%, rgba(15,20,25,.94) 78%);
  color: #FFFFFF;
}
.lado-arte .selo b { display: block; font-size: 18px; font-weight: 700; margin-bottom: 6px; }
.lado-arte .selo span { font-size: 13.5px; color: rgba(241,236,227,.78); line-height: 1.6; }

/* ---------------------------------------------------------- 12. mundos */

.mundos {
  position: relative;
  background: #101820;
}
/* o mapa era um fundo azul saturado a 58%; agora entra dessaturado e
   escuro, como textura — quem tem cor na seção são os cartões */
.mundos .arte-mapa {
  position: absolute; inset: 0;
  background: url("arte/fundo/mapa.jpg") center / cover no-repeat;
  opacity: .36;
  filter: saturate(.5);
}
.mundos .arte-mapa::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(16,24,32,.9) 0%, rgba(16,24,32,.6) 42%, rgba(16,24,32,.95) 100%);
}
.mundos > .larg { position: relative; z-index: 1; }
.mundos .secao-cabeca h2 { color: #FFFFFF; text-shadow: none; }
.mundos .secao-cabeca p  { color: rgba(241,236,227,.7); }

.grade-mundos { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; }

.cartao-mundo {
  position: relative;
  padding: 24px 22px 22px;
  text-align: left;
}
.cartao-mundo .topo-linha { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.cartao-mundo .num {
  display: grid; place-items: center;
  width: 42px; height: 42px; flex-shrink: 0;
  background: rgba(198,161,91,.14);
  border: 1px solid rgba(198,161,91,.5);
  border-radius: 3px;
  color: var(--ouro-esc); font-weight: 700; font-size: 16px;
  clip-path: none;
}
.cartao-mundo h3 { margin: 0; font-size: 17px; font-weight: 700; color: var(--tinta); }
.cartao-mundo .sub { font-size: 12.5px; color: var(--tinta-fraca); font-weight: 500; }
.cartao-mundo .dados { display: flex; gap: 20px; margin: 0 0 18px; }
.cartao-mundo .dados div > span:not(.online) { display: block; font-size: 10.5px; color: var(--tinta-fraca); text-transform: uppercase; letter-spacing: .09em; font-weight: 600; }
.cartao-mundo .dados div b    { font-size: 16px; color: var(--tinta); font-weight: 700; }
.cartao-mundo .bt { width: 100%; }
/* o JS marca estes botões como .bt-verde; num cartão claro, três botões
   verdes competem com o CTA do herói — aqui o botão é neutro */
.cartao-mundo .bt, .cartao-mundo .bt-verde {
  background: var(--tinta); border-color: var(--tinta); color: var(--papel-alto);
}
.cartao-mundo .bt:hover, .cartao-mundo .bt-verde:hover {
  background: #333A42; border-color: #333A42;
}

/* ----------------------------------------------------- 13. personagens */

.vitrine {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 30px; align-items: stretch;
  min-height: 480px;
}

.lista-chars {
  display: flex; flex-direction: column; gap: 4px;
  max-height: 480px; overflow-y: auto;
  padding-right: 6px;
}
.lista-chars::-webkit-scrollbar { width: 7px; }
.lista-chars::-webkit-scrollbar-track { background: rgba(255,255,255,.04); }
.lista-chars::-webkit-scrollbar-thumb { background: rgba(255,255,255,.16); border-radius: 100px; }

.char-item {
  display: flex; align-items: center; gap: 11px;
  padding: 8px 11px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08);
  border-left: 2px solid transparent;
  border-radius: 3px;
  color: rgba(241,236,227,.8); cursor: pointer; text-align: left; width: 100%;
  clip-path: none;
  transition: background .15s, border-color .15s, color .15s;
}
.char-item:hover { background: rgba(255,255,255,.07); }
.char-item.on {
  background: rgba(198,161,91,.10);
  border-color: rgba(198,161,91,.35);
  border-left-color: var(--ouro);
  color: #FFFFFF;
}
.char-item img {
  width: 40px; height: 40px; flex-shrink: 0;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 3px;
  background: var(--noite-2);
  object-fit: cover;
}
.char-item .n { flex: 1; min-width: 0; }
.char-item .n b { display: block; font-size: 14px; font-weight: 600; }
.char-item .n span {
  display: block; font-size: 11.5px; color: rgba(241,236,227,.5);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* palco do personagem — saíram as raias de velocidade e o halftone */
.palco {
  position: relative;
  display: grid; grid-template-columns: 1fr 320px; align-items: center;
  padding: 26px 32px;
  background:
    radial-gradient(ellipse at 34% 46%, rgba(198,161,91,.13) 0%, transparent 60%),
    linear-gradient(180deg, var(--noite-3) 0%, #171E25 100%);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 3px;
  box-shadow: var(--som-escuro);
  overflow: hidden;
}
.palco::before { content: none; }
.palco::after  { content: none; }
.palco > * { position: relative; z-index: 1; }

.palco .arte-char {
  grid-column: 1; grid-row: 1;
  justify-self: center;
  max-height: 430px; width: auto;
  filter: drop-shadow(0 16px 30px rgba(0,0,0,.55));
  animation: entra .4s cubic-bezier(.2,.8,.3,1);
}
@keyframes entra {
  from { opacity: 0; transform: translateY(14px) scale(.97); }
  to   { opacity: 1; transform: none; }
}

.ficha { grid-column: 2; grid-row: 1; }
.ficha .zh {
  font-size: 12.5px; color: var(--ouro); letter-spacing: .18em; font-weight: 600;
  opacity: .85;
}
.ficha h3 {
  margin: 6px 0 12px;
  font-size: 34px; font-weight: 700; line-height: 1.05;
  color: #FFFFFF;
  text-shadow: none;
}
/* a função do personagem — etiqueta discreta, era um selo laranja */
.ficha .funcao {
  display: inline-block; margin-bottom: 14px;
  padding: 4px 12px;
  background: rgba(198,161,91,.13);
  border: 1px solid rgba(198,161,91,.42);
  border-radius: 100px;
  color: var(--ouro-claro); font-size: 12px; font-weight: 600;
  letter-spacing: .04em;
  clip-path: none;
}
.ficha p { margin: 0; color: rgba(241,236,227,.75); font-size: 14.5px; line-height: 1.7; }

.contagem {
  margin-top: 28px; text-align: center;
  color: rgba(241,236,227,.6); font-size: 14.5px;
}
.contagem b { color: #FFFFFF; font-size: 18px; font-weight: 700; }

/* ---------------------------------------------------------- 14. o jogo */

.recursos { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; }
.recurso { padding: 26px 24px; }
.recurso .icone {
  display: grid; place-items: center;
  width: 46px; height: 46px; margin-bottom: 16px;
  background: var(--papel);
  border: 1px solid var(--linha);
  border-radius: 3px;
  font-size: 21px;
  clip-path: none;
}
.recurso h3 { margin: 0 0 9px; font-size: 16.5px; font-weight: 700; color: var(--tinta); }
.recurso p  { margin: 0; font-size: 14.5px; color: var(--tinta-media); line-height: 1.68; }

/* perguntas */
.faq { max-width: 800px; margin-inline: auto; }
.faq details { margin-bottom: 8px; padding: 0; }
.faq summary {
  padding: 16px 18px; cursor: pointer; list-style: none;
  font-weight: 600; font-size: 15.5px; color: var(--tinta);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; font-size: 19px; font-weight: 400; color: var(--tinta-fraca);
  line-height: 1; flex-shrink: 0;
}
.faq details[open] summary::after { content: "–"; }
.faq details[open] summary { border-bottom: 1px solid var(--linha); }
.faq .resposta { padding: 15px 18px 18px; font-size: 14.5px; color: var(--tinta-media); line-height: 1.7; }

/* --------------------------------------------------------- 15. rodapé */

.rodape {
  background: #0F141A;
  border-top: 1px solid var(--noite-linha);
  padding: 48px 0 28px;
  color: rgba(241,236,227,.55);
}
.rodape .linhas { display: flex; gap: 44px; flex-wrap: wrap; justify-content: space-between; }
.rodape .marca b { color: var(--creme); }
.rodape .marca p { color: rgba(241,236,227,.5); }
.rodape h4 {
  margin: 0 0 13px; font-size: 11px; text-transform: uppercase;
  letter-spacing: .14em; color: var(--ouro); font-weight: 700; opacity: .9;
}
.rodape ul { list-style: none; margin: 0; padding: 0; }
.rodape li { margin-bottom: 8px; }
.rodape a { font-size: 14px; color: rgba(241,236,227,.62); transition: color .15s; }
.rodape a:hover { color: #FFFFFF; }
.rodape .fim {
  margin-top: 34px; padding-top: 22px;
  border-top: 1px solid var(--noite-linha);
  font-size: 12.5px; line-height: 1.75; color: rgba(241,236,227,.38);
}

/* ------------------------------------------- 16. páginas internas

   suporte.html, novidades.html, servidores.html, cadastro.html e
   novidade.html carregam esta mesma folha e usam classes que não existiam
   aqui — ficavam sem estilo nenhum. Ficam com a paleta nova.
   ------------------------------------------------------------------- */

.pagina    { background: var(--papel); min-height: 60vh; padding: 56px 0 76px; }
.principal { position: relative; z-index: 1; }
.estreito  { width: min(100% - 40px, 820px); margin-inline: auto; }

.titulo-pag {
  margin: 0 0 10px;
  font-size: clamp(26px, 3vw, 36px); font-weight: 700; letter-spacing: -.015em;
  color: var(--tinta);
}
.sub-pag { margin: 0 0 32px; color: var(--tinta-media); font-size: 16px; }

.titulo-bloco {
  margin: 40px 0 14px;
  font-size: 19px; font-weight: 700; color: var(--tinta);
  padding-bottom: 9px; border-bottom: 1px solid var(--linha);
}

.painel, .artigo {
  background: var(--papel-alto);
  border: 1px solid var(--linha);
  border-radius: 2px;
  box-shadow: var(--som-cartao);
  padding: 24px 26px;
  margin-bottom: 16px;
}
.artigo h2 { margin: 0 0 8px; font-size: 19px; font-weight: 700; }
.artigo p  { color: var(--tinta-media); line-height: 1.7; }

.lista-noticias { display: flex; flex-direction: column; gap: 12px; }

.filtro-linha { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 24px; }

.nota {
  padding: 13px 15px;
  background: rgba(198,161,91,.09);
  border: 1px solid rgba(198,161,91,.32);
  border-left: 3px solid var(--ouro);
  border-radius: 2px;
  color: #6E5527; font-size: 14px; line-height: 1.6;
}

.voltar {
  display: inline-flex; align-items: center; gap: 7px;
  margin-bottom: 20px;
  color: var(--tinta-media); font-size: 14px; font-weight: 600;
}
.voltar:hover { color: var(--carmim); }

.legal { margin-top: 34px; color: var(--tinta-fraca); font-size: 12.5px; line-height: 1.7; }

/* ---------------------------------------------------- 17. modo celular */

@media (max-width: 1000px) {
  .heroi .larg      { grid-template-columns: 1fr; gap: 34px; }
  .heroi .arte::after {
    background:
      linear-gradient(180deg, rgba(15,20,25,.72) 0%, rgba(15,20,25,.62) 45%, rgba(15,20,25,.95) 100%);
  }
  .entrada          { max-width: 440px; }
  .novidades-grade  { grid-template-columns: 1fr; }
  .vitrine          { grid-template-columns: 1fr; }
  .lista-chars      { flex-direction: row; overflow-x: auto; max-height: none; padding-bottom: 8px; }
  .char-item        { flex-shrink: 0; width: 190px; }
  .palco            { grid-template-columns: 1fr; padding: 22px; }
  .palco .arte-char { grid-row: 1; max-height: 300px; }
  .ficha            { grid-column: 1; grid-row: 2; text-align: center; margin-top: 12px; }
}

@media (max-width: 760px) {
  .topo .larg  { height: 58px; gap: 12px; }
  .menu {
    display: none;
    position: absolute; top: 58px; left: 0; right: 0;
    flex-direction: column; gap: 0; margin: 0;
    background: rgba(17,22,27,.98);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--noite-linha);
    padding: 6px 0;
  }
  .menu.aberto { display: flex; }
  .menu a { padding: 13px 22px; border-bottom: none; border-left: 2px solid transparent; }
  .menu a.atual { border-left-color: var(--ouro); border-bottom-color: transparent; }
  .abre-menu { display: block; }
  .topo .pulso, .topo .quem { display: none; }   /* escopado: `.quem` também é a coluna do ranking */
  .heroi { min-height: auto; padding: 40px 0 54px; }
  .numeros { gap: 24px; flex-wrap: wrap; }
  .numeros b { font-size: 23px; }
  .secao { padding: 58px 0; }
  .acoes .bt, .acoes .bt-ouro { width: 100%; }
  .ficha h3 { font-size: 28px; }
}

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

/* ==========================================================================
   18. páginas internas: capa, elenco em abas e ficha do personagem
   (adicionado em 19/08/2026, quando o site deixou de ser uma página só)
   ========================================================================== */

/* ------------------------------------------------------------- 18.1 capa */

/* o cabeçalho das páginas /novidades, /mundos, /tripulacao e /o-jogo — faz o
   papel do herói sem tomar a tela inteira */
.capa {
  position: relative;
  padding: 68px 0 46px;
  background: var(--noite);
  overflow: hidden;
}
.capa-arte {
  position: absolute; inset: 0;
  background: url("arte/fundo/tripulacao.jpg") center 28% / cover no-repeat;
  filter: saturate(.5) brightness(.5);
  opacity: .5;
}
.capa-arte::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(20,26,31,.72) 0%, rgba(20,26,31,.9) 65%, var(--noite) 100%);
}
.capa .larg { position: relative; z-index: 1; }
.capa h1 {
  margin: 14px 0 10px;
  font-size: clamp(30px, 3.6vw, 42px); font-weight: 700; letter-spacing: -.02em;
  color: #FFFFFF;
}
.capa p { margin: 0; max-width: 62ch; color: rgba(241,236,227,.72); font-size: 16px; }

/* "ver todas as novidades", "ver os 118 personagens" */
.mais { margin-top: 34px; text-align: center; }

/* a lista de novidades sozinha na página ocupa a largura toda */
.novidades-grade.sozinha { grid-template-columns: 1fr; }

.nota-escura {
  position: relative; z-index: 1;
  margin: 26px auto 0; max-width: 720px; text-align: center;
  color: rgba(241,236,227,.66); font-size: 14.5px; line-height: 1.7;
}

/* ----------------------------------------------------------- 18.2 elenco */

.elenco-barra {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; flex-wrap: wrap;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--noite-linha);
}

.abas-elenco { display: flex; gap: 4px; flex-wrap: wrap; }
.aba-elenco {
  padding: 9px 15px;
  background: none; border: 0; border-bottom: 2px solid transparent;
  color: rgba(241,236,227,.6); font-size: 14.5px; font-weight: 600; cursor: pointer;
  display: inline-flex; align-items: center; gap: 7px;
  transition: color .15s, border-color .15s;
}
.aba-elenco i {
  font-style: normal; font-size: 11px; font-weight: 700;
  padding: 2px 7px; border-radius: 100px;
  background: rgba(255,255,255,.07); color: rgba(241,236,227,.55);
}
.aba-elenco:hover { color: var(--creme); }
.aba-elenco.ativa { color: #FFFFFF; border-bottom-color: var(--ouro); }
.aba-elenco.ativa i { background: rgba(198,161,91,.2); color: var(--ouro-claro); }

.elenco-filtros { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.tiers { display: flex; gap: 5px; }
.chip-tier {
  padding: 6px 11px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 100px;
  color: rgba(241,236,227,.62); font-size: 12px; font-weight: 700; cursor: pointer;
  transition: border-color .15s, color .15s, background .15s;
}
.chip-tier:hover { color: var(--creme); border-color: rgba(255,255,255,.25); }
.chip-tier.ativa {
  background: rgba(198,161,91,.16); border-color: rgba(198,161,91,.5); color: var(--ouro-claro);
}

#buscaElenco {
  width: 200px; padding: 8px 13px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 100px;
  color: var(--creme); font-size: 13.5px; outline: none;
}
#buscaElenco::placeholder { color: rgba(241,236,227,.42); }
#buscaElenco:focus { border-color: rgba(198,161,91,.55); background: rgba(255,255,255,.08); }

.elenco-conta { margin: 16px 0 18px; color: rgba(241,236,227,.5); font-size: 13px; }
.elenco-conta b { color: var(--creme); font-weight: 700; }
.elenco-vazio { color: rgba(241,236,227,.55); text-align: center; padding: 40px 0; }

/* a grade dos 118 */
.grade-elenco {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
  gap: 12px;
}
.card-char {
  display: block; padding: 0; width: 100%; text-align: left; cursor: pointer;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 4px;
  overflow: hidden;
  transition: border-color .15s, background .15s, transform .12s;
}
.card-char:hover {
  background: rgba(255,255,255,.07);
  border-color: rgba(198,161,91,.45);
  transform: translateY(-2px);
}
.card-arte { position: relative; aspect-ratio: 157 / 168; background: var(--noite-2); }
.card-arte img { width: 100%; height: 100%; object-fit: cover; }
.card-txt { padding: 9px 11px 11px; }
.card-txt b {
  display: block; font-size: 13.5px; font-weight: 600; color: var(--creme);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.card-txt span {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
  margin-top: 3px; font-size: 11.5px; line-height: 1.45;
  color: rgba(241,236,227,.5);
}

/* o selo de tier — o jogo pinta S / SS / SSS / SP em misc/role_group_N.png;
   aqui é a mesma hierarquia, em cor sóbria */
.tier {
  position: absolute; top: 6px; left: 6px;
  padding: 2px 7px;
  border-radius: 3px;
  font-size: 10.5px; font-weight: 800; letter-spacing: .04em;
  background: rgba(20,26,31,.82); color: var(--creme);
  backdrop-filter: blur(3px);
}
.tier.tS   { color: #9FC0D6; }
.tier.tSS  { color: #C3B0DC; }
.tier.tSSS { color: #E0C48A; }
.tier.tSP  { color: #E4A28C; }

/* ------------------------------------------------------ 18.3 ficha (modal) */

.ficha-fundo {
  position: fixed; inset: 0; z-index: 90;
  display: grid; place-items: center;
  padding: 24px;
  background: rgba(10,14,18,.78);
  backdrop-filter: blur(4px);
  animation: apareceFundo .16s ease-out;
}
.ficha-fundo[hidden] { display: none; }
@keyframes apareceFundo { from { opacity: 0; } to { opacity: 1; } }

.ficha-caixa {
  position: relative;
  width: min(100%, 900px); max-height: min(88vh, 760px);
  overflow: auto;
  background: linear-gradient(180deg, var(--noite-3) 0%, #171E25 100%);
  border: 1px solid rgba(255,255,255,.12);
  color: var(--creme);
  box-shadow: var(--som-escuro);
  animation: entra .2s cubic-bezier(.2,.8,.3,1);
}
.ficha-fecha {
  position: absolute; top: 10px; right: 12px; z-index: 2;
  width: 34px; height: 34px;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14);
  border-radius: 50%;
  color: var(--creme); font-size: 20px; line-height: 1; cursor: pointer;
}
.ficha-fecha:hover { background: rgba(255,255,255,.13); }

.ficha-corpo { display: grid; grid-template-columns: 300px 1fr; gap: 26px; padding: 26px 28px; }
.ficha-arte {
  align-self: start;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 3px;
  background: radial-gradient(ellipse at 50% 40%, rgba(198,161,91,.14), transparent 65%), var(--noite-2);
  overflow: hidden;
}
.ficha-arte img { width: 100%; height: auto; display: block; }
.ficha-arte.grande { background: none; border: 0; }

.ficha-topo { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.ficha-topo .tier { position: static; }
.ficha-topo .zh { color: var(--ouro); font-size: 12.5px; letter-spacing: .16em; opacity: .85; }
.ficha-dados h3 { margin: 4px 0 10px; font-size: 30px; font-weight: 700; color: #FFF; line-height: 1.1; }
.ficha-dados .funcao {
  display: inline-block; margin-bottom: 12px; padding: 4px 12px;
  background: rgba(198,161,91,.13); border: 1px solid rgba(198,161,91,.42);
  border-radius: 100px; color: var(--ouro-claro); font-size: 12px; font-weight: 600;
}
.ficha-dados .desc { margin: 0 0 18px; color: rgba(241,236,227,.75); font-size: 14.5px; line-height: 1.7; }

.ficha-stats {
  list-style: none; margin: 0 0 22px; padding: 16px 0;
  border-top: 1px solid rgba(255,255,255,.09);
  border-bottom: 1px solid rgba(255,255,255,.09);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 14px;
}
.ficha-stats span { display: block; font-size: 10.5px; text-transform: uppercase; letter-spacing: .09em; color: rgba(241,236,227,.45); font-weight: 600; }
.ficha-stats b    { font-size: 15px; color: #FFF; font-weight: 700; }

.ficha-dados h4 {
  margin: 0 0 12px; font-size: 12px; text-transform: uppercase; letter-spacing: .14em;
  color: var(--ouro); font-weight: 700;
}
.ficha-skills { list-style: none; margin: 0; padding: 0; }
.ficha-skills li {
  padding: 11px 0;
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.ficha-skills li:last-child { border-bottom: 0; }
.ficha-skills b { color: #FFF; font-size: 14.5px; font-weight: 600; }
.ficha-skills .tipo {
  margin-left: 9px; padding: 2px 8px; border-radius: 100px;
  background: rgba(255,255,255,.07); color: rgba(241,236,227,.6);
  font-size: 10.5px; font-weight: 600;
}
.ficha-skills p { margin: 6px 0 0; color: rgba(241,236,227,.66); font-size: 13.5px; line-height: 1.6; }

@media (max-width: 760px) {
  .elenco-barra    { flex-direction: column; align-items: stretch; }
  .elenco-filtros  { justify-content: space-between; }
  #buscaElenco     { flex: 1; width: auto; }
  .grade-elenco    { grid-template-columns: repeat(auto-fill, minmax(122px, 1fr)); gap: 9px; }
  .ficha-corpo     { grid-template-columns: 1fr; padding: 22px; gap: 18px; }
  .ficha-arte      { max-width: 230px; margin-inline: auto; }
  .capa            { padding: 46px 0 34px; }
}

/* a seção que vem logo depois da capa não repete o respiro de topo */
.capa + .secao { padding-top: 44px; }
/* o texto do card ocupa duas linhas sempre — senão a grade fica serrilhada */
.card-txt { min-height: 62px; }
.grade-elenco { align-items: start; }

/* ---------------------------------------- 19. quantos estão jogando agora

   O número vem do servidor (`/user/serverInfo` devolve `online` por mundo,
   contando as sessões abertas no connector). Zero também é informação: some
   com o ponto verde e mostra "vazio", em vez de sumir com a linha inteira.
   ------------------------------------------------------------------------ */

.online {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; font-weight: 600; color: var(--tinta-media);
  white-space: nowrap;
}
.online i {
  flex: 0 0 auto;
  width: 7px; height: 7px; border-radius: 50%;
  background: #5FA96D;
  box-shadow: 0 0 0 3px rgba(95,169,109,.18);
}
.online b { color: var(--tinta); font-weight: 700; }
.online.vazio i { background: #B2B7BC; box-shadow: none; }
.online.vazio, .online.vazio b { color: var(--tinta-fraca); font-weight: 600; }

/* dentro da lista do painel de entrada, à direita do nome do mundo */
.mundo-item .online { font-size: 11.5px; }

/* no cartão da seção Mundos, como um dado a mais */
.cartao-mundo .dados .online { font-size: 15px; margin-top: 2px; }
.cartao-mundo .dados .online b { font-size: 16px; }

/* ==========================================================================
   20. classificação — a página /ranking

   Refeita depois de "está muito básico". O desenho segue o que os leaderboards
   de jogo consolidaram, e cada peça responde a uma pergunta que a tabela crua
   deixava sem resposta:

     resumo ....... o estado do mundo antes de olhar nome nenhum
     pódio ........ quem está ganhando, sem ler linha nenhuma
     retrato ...... QUEM é a pessoa (o jogo guarda o herói que ela usa de foto)
     delta ........ o que mudou desde a última visita — seta E número, nunca
                    só cor: quem não distingue a cor fica sem a informação
     barra ........ o tamanho da distância; número solto não mostra isso
     sua linha .... um placar de 50 nomes só serve se você se acha nele
   ========================================================================== */

/* --------------------------------------------------------- 20.1 a barra de topo */

.rank-topo {
  display: flex; flex-direction: column; gap: 16px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--noite-linha);
}

/* as abas: pílulas com ícone, roláveis no celular */
.abas-rank {
  display: flex; gap: 6px; flex-wrap: wrap;
}
.aba-rank {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 15px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 100px;
  color: rgba(241,236,227,.62);
  font-size: 13.5px; font-weight: 600; cursor: pointer;
  transition: background .16s, border-color .16s, color .16s, transform .1s;
}
.aba-rank .ico { width: 15px; height: 15px; opacity: .8; }
.aba-rank:hover { color: var(--creme); border-color: rgba(255,255,255,.2); }
.aba-rank.ativa {
  background: linear-gradient(180deg, rgba(198,161,91,.28), rgba(198,161,91,.14));
  border-color: rgba(198,161,91,.6);
  color: #FFF6E4;
  box-shadow: 0 4px 16px rgba(150,115,58,.22);
}
.aba-rank.ativa .ico { opacity: 1; color: var(--ouro-claro); }

.rank-linha2 {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
}
.rank-mundos { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.rank-rotulo {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .12em;
  color: rgba(241,236,227,.4); font-weight: 700;
}

/* o mundo, com quantos estão jogando nele */
.chip-mundo {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 13px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 100px;
  color: rgba(241,236,227,.66); font-size: 12.5px; font-weight: 600; cursor: pointer;
  transition: background .16s, border-color .16s, color .16s;
}
.chip-mundo:hover { color: var(--creme); border-color: rgba(255,255,255,.22); }
.chip-mundo.ativa {
  background: rgba(198,161,91,.16); border-color: rgba(198,161,91,.5); color: var(--ouro-claro);
}
.chip-mundo em { font-style: normal; color: #7FC98C; font-weight: 700; }
.chip-mundo.filtro.ativa {
  background: rgba(95,169,109,.16); border-color: rgba(95,169,109,.5); color: #9BD3A6;
}

.rank-modos { display: flex; align-items: center; gap: 10px; }
.rank-modos label {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .12em;
  color: rgba(241,236,227,.4); font-weight: 700;
}
.rank-modos select {
  padding: 8px 12px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 4px;
  color: var(--creme); font-size: 13.5px; outline: none; cursor: pointer;
}
.rank-modos select:focus { border-color: rgba(198,161,91,.55); }
.rank-modos option { background: var(--noite-2); color: var(--creme); }

/* busca + filtro + "atualizado há" */
.rank-ferramentas {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin: 18px 0 4px;
}
.rank-busca { position: relative; }
.rank-busca svg {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  width: 15px; height: 15px; color: rgba(241,236,227,.4); pointer-events: none;
}
.rank-busca input {
  width: 230px; padding: 9px 14px 9px 34px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 100px;
  color: var(--creme); font-size: 13.5px; outline: none;
}
.rank-busca input::placeholder { color: rgba(241,236,227,.38); }
.rank-busca input:focus { border-color: rgba(198,161,91,.5); background: rgba(255,255,255,.08); }
.rank-atualizado {
  margin-left: auto;
  font-size: 12px; color: rgba(241,236,227,.35);
}

/* ------------------------------------------------------------- 20.2 resumo */

.rank-resumo {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1px;
  margin: 22px 0 26px;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 6px;
  overflow: hidden;
}
.rank-resumo div { padding: 16px 18px; background: var(--noite-2); }
.rank-resumo b {
  display: block; font-size: 24px; font-weight: 700; color: #FFFFFF; line-height: 1.1;
}
.rank-resumo b.vivo { color: #7FC98C; }
.rank-resumo span {
  display: block; margin-top: 5px;
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .09em;
  color: rgba(241,236,227,.42); font-weight: 600;
}

/* -------------------------------------------------------------- 20.3 pódio */

.podio {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 16px; align-items: end;
  margin-bottom: 30px;
}
.podio-card {
  position: relative;
  display: flex; flex-direction: column; align-items: center;
  padding: 30px 16px 0;
  background: linear-gradient(180deg, rgba(255,255,255,.07) 0%, rgba(255,255,255,.02) 60%);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 8px 8px 0 0;
  text-align: center;
  animation: sobePodio .5s cubic-bezier(.2,.8,.3,1) both;
}
@keyframes sobePodio {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}
/* o degrau: é ele que dá altura diferente a cada lugar sem mexer no conteúdo */
.degrau {
  width: 100%; margin-top: 14px;
  border-top: 1px solid rgba(255,255,255,.07);
  background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,0));
}
.podio-card.ouro .degrau { background: linear-gradient(180deg, rgba(198,161,91,.16), rgba(198,161,91,0)); }
.podio-card.ouro   .degrau { height: 30px; }
.podio-card.prata  .degrau { height: 16px; }
.podio-card.bronze .degrau { height: 8px; }

.podio-card.ouro {
  padding-top: 38px;
  border-color: rgba(198,161,91,.6);
  background:
    radial-gradient(120% 60% at 50% 0%, rgba(198,161,91,.28), transparent 70%),
    linear-gradient(180deg, rgba(198,161,91,.14) 0%, rgba(198,161,91,.02) 65%);
  box-shadow: 0 14px 40px rgba(150,115,58,.22);
  animation-delay: .06s;
}
.podio-card.prata  { border-color: rgba(196,201,208,.4);  animation-delay: 0s; }
.podio-card.bronze { border-color: rgba(176,124,82,.42);  animation-delay: .12s; }
.podio-card.eu     { box-shadow: 0 0 0 2px rgba(198,161,91,.55), 0 14px 40px rgba(150,115,58,.2); }

.coroa {
  position: absolute; top: -14px; left: 50%; transform: translateX(-50%);
  width: 44px; height: 28px;
  fill: var(--ouro); filter: drop-shadow(0 3px 6px rgba(0,0,0,.45));
}

.podio-fita {
  position: absolute; top: 12px; left: 14px;
  font-size: 12px; font-weight: 800; letter-spacing: .04em;
  color: rgba(241,236,227,.45);
}
.podio-card.ouro   .podio-fita { color: var(--ouro-claro); }
.podio-card.prata  .podio-fita { color: #C7CCD3; }
.podio-card.bronze .podio-fita { color: #C08B5E; }

.podio-moldura { position: relative; margin-bottom: 13px; }
.podio-arte {
  display: block; width: 94px; height: 100px;
  border-radius: 6px; overflow: hidden;
  background: var(--noite-3);
  box-shadow: 0 8px 22px rgba(0,0,0,.4);
}
.podio-card.ouro .podio-arte {
  width: 116px; height: 124px;
  box-shadow: 0 10px 28px rgba(0,0,0,.5), 0 0 0 2px rgba(198,161,91,.65);
}
.podio-card.prata  .podio-arte { box-shadow: 0 8px 22px rgba(0,0,0,.4), 0 0 0 2px rgba(196,201,208,.4); }
.podio-card.bronze .podio-arte { box-shadow: 0 8px 22px rgba(0,0,0,.4), 0 0 0 2px rgba(176,124,82,.45); }
.podio-arte img { width: 100%; height: 100%; object-fit: cover; display: block; }
.podio-arte.sem-foto {
  display: grid; place-items: center;
  color: rgba(241,236,227,.4); font-size: 26px; font-weight: 700;
}
.podio-arte.brasao-img { background: rgba(198,161,91,.1); }
.podio-arte.brasao-img img { object-fit: contain; padding: 10px; }
.podio-moldura .ponto-online {
  position: absolute; right: -3px; bottom: -3px;
  width: 13px; height: 13px; margin: 0;
  border: 2px solid var(--noite);
  box-shadow: none;
}

.podio-nome {
  display: flex; align-items: center; gap: 7px; justify-content: center;
  max-width: 100%;
  font-size: 16px; font-weight: 700; color: #FFFFFF;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.podio-card.ouro .podio-nome { font-size: 18px; }
.podio-sub {
  margin-top: 3px; max-width: 100%;
  font-size: 11.5px; color: rgba(241,236,227,.42);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.podio-valor { margin-top: 14px; }
.podio-valor b {
  display: block; font-size: 24px; font-weight: 700; color: var(--ouro-claro); line-height: 1.1;
}
.podio-card.prata  .podio-valor b { color: #DCE1E8; }
.podio-card.bronze .podio-valor b { color: #DBA97F; }
.podio-valor span {
  display: block; margin-top: 4px;
  font-size: 10px; text-transform: uppercase; letter-spacing: .1em;
  color: rgba(241,236,227,.38); font-weight: 600;
}
.podio-pe {
  display: flex; gap: 14px; align-items: center; justify-content: center; flex-wrap: wrap;
  width: 100%; margin-top: 14px; padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,.08);
  font-size: 11.5px; color: rgba(241,236,227,.45);
}
.podio-pe b { color: rgba(241,236,227,.85); font-weight: 700; }

/* --------------------------------------------------------- 20.4 a tabela */

.rank-tabela-caixa {
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 8px;
  overflow: hidden auto;
  background: rgba(255,255,255,.015);
}
.tabela-rank { width: 100%; border-collapse: collapse; font-size: 14.5px; min-width: 640px; }
.tabela-rank th {
  position: sticky; top: 0; z-index: 2;
  padding: 11px 14px; text-align: left;
  background: var(--noite-2);
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .1em;
  color: rgba(241,236,227,.4); font-weight: 700;
  border-bottom: 1px solid rgba(255,255,255,.08);
  white-space: nowrap;
}
.tabela-rank td {
  padding: 11px 14px;
  border-bottom: 1px solid rgba(255,255,255,.05);
  color: rgba(241,236,227,.82);
}
.tabela-rank tbody tr {
  animation: entraLinha .32s ease-out both;
  animation-delay: calc(var(--i) * 18ms);
  transition: background .14s;
}
@keyframes entraLinha {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}
.tabela-rank tbody tr:hover td { background: rgba(255,255,255,.04); }
.tabela-rank tr.top10 td.pos .medalha { color: var(--ouro-claro); }
.tabela-rank tr.on td { background: rgba(95,169,109,.05); }
.tabela-rank tr.on:hover td { background: rgba(95,169,109,.09); }
.tabela-rank tr.eu td { background: rgba(198,161,91,.1); }
.tabela-rank tr.eu td:first-child { box-shadow: inset 3px 0 0 var(--ouro); }
.tabela-rank tr.eu:hover td { background: rgba(198,161,91,.15); }

.tabela-rank .pos { width: 96px; white-space: nowrap; }
.tabela-rank .nivel, .tabela-rank .valor, .tabela-rank .poder { text-align: right; white-space: nowrap; }
.tabela-rank .valor { color: #FFFFFF; font-weight: 700; }
.tabela-rank .rank-quem { display: flex; align-items: center; gap: 11px; }
.tabela-rank .rank-quem b {
  display: flex; align-items: center; gap: 7px;
  color: #FFFFFF; font-weight: 600;
}
.tabela-rank .rank-quem > .nome-bloco > span {
  display: block; margin-top: 2px; font-size: 12px; color: rgba(241,236,227,.42);
}
.nome-bloco { min-width: 0; }
.nome-bloco em { font-style: normal; color: rgba(241,236,227,.26); }
.fraco { color: rgba(241,236,227,.4); font-weight: 500; }

.medalha {
  display: inline-grid; place-items: center;
  width: 30px; height: 30px; border-radius: 50%;
  background: rgba(255,255,255,.06);
  color: rgba(241,236,227,.7); font-size: 13px; font-weight: 700;
  vertical-align: middle;
}
.medalha.m1 { background: linear-gradient(180deg, #E0C48A, #C6A15B); color: #241B08; }
.medalha.m2 { background: linear-gradient(180deg, #DDE2E8, #B9C0C9); color: #22262B; }
.medalha.m3 { background: linear-gradient(180deg, #D6A075, #B07C52); color: #241608; }

/* variação de posição desde a última visita: seta + número, nunca só cor */
.delta {
  display: inline-block; margin-left: 7px;
  font-size: 11px; font-weight: 700; letter-spacing: .02em;
  vertical-align: middle;
}
.delta.sobe  { color: #6FBF7F; }
.delta.desce { color: #D98570; }
.delta.igual { color: rgba(241,236,227,.28); }
.delta.novo  {
  padding: 2px 7px; border-radius: 100px;
  background: rgba(198,161,91,.16); color: var(--ouro-claro);
  font-size: 10px; text-transform: uppercase; letter-spacing: .06em;
}

.etiqueta-eu {
  padding: 2px 8px; border-radius: 100px;
  background: rgba(198,161,91,.2); color: var(--ouro-claro);
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em;
}

.pilula-nivel {
  display: inline-block; min-width: 34px; padding: 3px 9px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 100px;
  font-size: 12.5px; font-weight: 700; color: rgba(241,236,227,.8);
  text-align: center;
}

.retrato-mini {
  flex: 0 0 auto;
  width: 38px; height: 40px; border-radius: 4px; overflow: hidden;
  background: var(--noite-3);
  box-shadow: 0 0 0 1px rgba(255,255,255,.08);
}
.retrato-mini img { width: 100%; height: 100%; object-fit: cover; display: block; }
.retrato-mini.sem-foto {
  display: grid; place-items: center;
  color: rgba(241,236,227,.4); font-size: 13px; font-weight: 700;
}
.retrato-mini.brasao-img { background: rgba(198,161,91,.1); box-shadow: 0 0 0 1px rgba(198,161,91,.3); }
.retrato-mini.brasao-img img { object-fit: contain; padding: 4px; }

/* a barra de proporção fica ATRÁS do número, crescendo da direita para a esquerda */
.tabela-rank td.valor { position: relative; }
.tabela-rank td.valor .barra {
  position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
  height: 26px; max-width: calc(100% - 28px);
  border-radius: 4px;
  background: linear-gradient(90deg, rgba(198,161,91,.04), rgba(198,161,91,.24));
  animation: cresceBarra .5s cubic-bezier(.2,.8,.3,1) both;
  pointer-events: none;
}
@keyframes cresceBarra { from { width: 0 !important; } }
.tabela-rank tr.on td.valor .barra {
  background: linear-gradient(90deg, rgba(95,169,109,.04), rgba(95,169,109,.26));
}
.tabela-rank tr.eu td.valor .barra {
  background: linear-gradient(90deg, rgba(198,161,91,.1), rgba(198,161,91,.4));
}
.tabela-rank td.valor .valor-txt { position: relative; }

/* ------------------------------------------------ 20.5 a sua posição, fixa */

.minha-pos {
  position: sticky; bottom: 16px; z-index: 20;
  display: flex; align-items: center; gap: 12px;
  margin-top: 18px; padding: 12px 16px;
  background: linear-gradient(180deg, rgba(35,44,53,.97), rgba(27,34,42,.97));
  border: 1px solid rgba(198,161,91,.45);
  border-radius: 100px;
  box-shadow: 0 12px 34px rgba(0,0,0,.42);
  backdrop-filter: blur(8px);
}
.minha-pos[hidden] { display: none; }
.minha-pos .nome-bloco b { color: #FFFFFF; font-weight: 700; }
.minha-pos .nome-bloco span {
  display: block; margin-top: 2px;
  font-size: 11.5px; color: rgba(241,236,227,.45);
}
.minha-pos .minha-valor {
  margin-left: auto;
  font-size: 18px; font-weight: 700; color: var(--ouro-claro);
}

/* --------------------------------------------- 20.6 esqueleto e vazio */

.esqueleto { animation: pulsa 1.4s ease-in-out infinite; }
@keyframes pulsa { 0%,100% { opacity: .55; } 50% { opacity: .28; } }
.esq-podio { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; align-items: end; margin-bottom: 26px; }
.esq-podio span { height: 210px; border-radius: 8px; background: rgba(255,255,255,.06); }
.esq-podio span.alto { height: 260px; }
.esq-linha {
  height: 56px; margin-bottom: 8px; border-radius: 6px;
  background: linear-gradient(90deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
}

.rank-vazio { padding: 56px 0; text-align: center; color: rgba(241,236,227,.5); }
.rank-vazio svg { width: 64px; height: 64px; margin-bottom: 14px; color: rgba(241,236,227,.5); }
.rank-vazio p { margin: 0; font-size: 14.5px; max-width: 46ch; margin-inline: auto; line-height: 1.6; }

.rank-nota { margin-top: 22px; font-size: 13px; color: rgba(241,236,227,.42); }

/* -------------------------------------------------------- 20.7 celular */

@media (max-width: 860px) {
  .podio { grid-template-columns: 1fr; align-items: stretch; gap: 12px; }
  .podio-card { border-radius: 8px; padding-bottom: 16px; }
  .podio-card.ouro { order: -1; }
  .degrau { display: none; }
  .podio-arte, .podio-card.ouro .podio-arte { width: 86px; height: 92px; }
  .coroa { top: -12px; width: 38px; }
  .rank-resumo b { font-size: 20px; }
  .rank-busca input { width: 100%; }
  .rank-busca { flex: 1; }
  .rank-atualizado { width: 100%; margin-left: 0; }
  .minha-pos { border-radius: 10px; flex-wrap: wrap; }
  .minha-pos .minha-valor { margin-left: 0; }
}

/* ==========================================================================
   21. a conta do jogador — a página /conta

   O painel do próprio jogador. Fica sobre fundo claro (é leitura de dados e
   formulário, não vitrine), e usa o mesmo `.papel` do resto do site.
   ========================================================================== */

.conta-cabeca {
  display: flex; align-items: center; gap: 16px;
  padding: 20px 22px;
  margin-bottom: 16px;
}
.conta-avatar {
  display: grid; place-items: center;
  width: 56px; height: 56px; flex-shrink: 0;
  border-radius: 50%;
  background: linear-gradient(180deg, var(--ouro-claro), var(--ouro));
  color: #2E2413; font-size: 19px; font-weight: 700; letter-spacing: .02em;
}
.conta-id { min-width: 0; }
.conta-id h2 { margin: 0; font-size: 22px; font-weight: 700; color: var(--tinta); line-height: 1.2; }
.conta-id span { display: block; margin-top: 4px; font-size: 13px; color: var(--tinta-fraca); }
.conta-cabeca .bt { margin-left: auto; }
.conta-cabeca .bt-vazado { background: transparent; border-color: var(--linha-forte); color: var(--tinta-media); }
.conta-cabeca .bt-vazado:hover { background: var(--papel); border-color: var(--tinta-fraca); color: var(--tinta); }

.conta-fichas {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 1px; margin-bottom: 22px;
  background: var(--linha);
  border: 1px solid var(--linha);
  border-radius: 3px;
  overflow: hidden;
}
.conta-ficha { padding: 14px 16px; background: var(--papel-alto); }
.conta-ficha span {
  display: block; font-size: 10.5px; text-transform: uppercase; letter-spacing: .09em;
  color: var(--tinta-fraca); font-weight: 600;
}
.conta-ficha b { display: block; margin-top: 5px; font-size: 15px; color: var(--tinta); font-weight: 600; }
.conta-ficha em { font-style: normal; color: var(--tinta-fraca); font-weight: 500; }
.conta-ficha code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13.5px; letter-spacing: .04em; color: var(--carmim);
}

.conta-bloco { padding: 22px 24px; margin-bottom: 16px; }
.conta-bloco h3 {
  margin: 0 0 16px; font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .13em; color: var(--carmim);
}
.conta-nota { margin: 0; color: var(--tinta-media); font-size: 13.5px; line-height: 1.6; }
.conta-hr { border: 0; border-top: 1px solid var(--linha); margin: 24px 0; }

/* --------------------------------------------------------- personagens */

.conta-chars { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.char-conta {
  display: flex; flex-direction: column;
  padding: 16px;
  background: var(--papel);
  border: 1px solid var(--linha);
  border-radius: 4px;
}
.char-conta-topo { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.char-mundo {
  padding: 3px 9px; border-radius: 100px;
  background: rgba(156,51,36,.1); color: var(--carmim);
  font-size: 11px; font-weight: 700;
}
.char-vip {
  padding: 3px 9px; border-radius: 100px;
  background: rgba(198,161,91,.18); color: #7E5F2C;
  font-size: 11px; font-weight: 700;
}
.char-conta > b { font-size: 17px; font-weight: 700; color: var(--tinta); }
.char-guilda { margin-top: 2px; font-size: 12.5px; color: var(--tinta-fraca); }
.char-guilda em { font-style: normal; opacity: .8; }
.char-nums { display: flex; gap: 20px; margin: 14px 0 10px; }
.char-nums span {
  display: block; font-size: 10px; text-transform: uppercase; letter-spacing: .09em;
  color: var(--tinta-fraca); font-weight: 600;
}
.char-nums b { font-size: 17px; color: var(--tinta); font-weight: 700; }
.char-visto { margin-bottom: 14px; font-size: 11.5px; color: var(--tinta-fraca); }
.char-conta .bt { margin-top: auto; width: 100%; }

/* ------------------------------------------------------------ formulários */

.conta-linha { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; }
.conta-acao { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 6px; }
.conta-bloco .aviso { margin-top: 14px; }

/* ------------------------------------------------------------- compras */

.conta-pedidos { list-style: none; margin: 0; padding: 0; }
.conta-pedidos li {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 0; border-bottom: 1px solid var(--linha);
  font-size: 14px; color: var(--tinta-media);
}
.conta-pedidos li:last-child { border-bottom: 0; }
.conta-pedidos code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12.5px; color: var(--tinta);
}
.conta-pedidos b { margin-left: auto; color: var(--tinta); font-weight: 700; }

/* --------------------------------------------------- vazio e esqueleto */

.conta-vazia { padding: 46px 30px; text-align: center; }
.conta-vazia h2 { margin: 0 0 10px; font-size: 22px; font-weight: 700; color: var(--tinta); }
.conta-vazia p { margin: 0 auto 22px; max-width: 46ch; color: var(--tinta-media); line-height: 1.65; }

.conta-esqueleto { animation: pulsa 1.4s ease-in-out infinite; }
.conta-esqueleto span {
  display: block; margin-bottom: 14px; border-radius: 4px;
  background: rgba(34,38,43,.08);
}
.conta-esqueleto span:nth-child(1) { height: 96px; }
.conta-esqueleto span:nth-child(2) { height: 190px; }
.conta-esqueleto span:nth-child(3) { height: 240px; }

@media (max-width: 760px) {
  .conta-cabeca { flex-wrap: wrap; }
  .conta-cabeca .bt { margin-left: 0; width: 100%; }
  .conta-chars { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------- idioma do JOGO
   O seletor de bandeiras troca o SITE (pt/en). O jogo fala mais linguas: as duas
   traduzidas aqui, o vietnamita e o chines do cliente original, e as quatro em que o
   estudio publica a arte (es, id, th, zh-tw). Elas ficam neste menu, para nao encher a
   barra do topo com oito bandeiras. Ver site/idiomajogo.js. */
#idioma-jogo .globo { font-size: 14px; line-height: 1; filter: grayscale(1); }
#idioma-jogo.ativa .globo { filter: none; }

#idioma-jogo-menu {
  position: absolute; z-index: 60; width: 260px;
  background: #14161c; border: 1px solid rgba(255,255,255,.14);
  border-radius: 8px; box-shadow: 0 14px 40px rgba(0,0,0,.55);
  padding: 6px; font-size: 13px;
}
#idioma-jogo-menu .cab {
  color: var(--ouro-claro, #c6a15b); font-size: 11px; text-transform: uppercase;
  letter-spacing: .06em; padding: 4px 8px 6px;
}
#idioma-jogo-menu button {
  display: grid; grid-template-columns: 22px 1fr; grid-template-rows: auto auto;
  gap: 1px 9px; align-items: center; width: 100%; text-align: left;
  background: none; border: none; cursor: pointer; color: #e8e8ea;
  padding: 6px 8px; border-radius: 6px;
}
#idioma-jogo-menu button:hover { background: rgba(255,255,255,.06); }
#idioma-jogo-menu button.ativo { background: rgba(198,161,91,.18); }
#idioma-jogo-menu button .bandeira {
  grid-row: 1 / 3; width: 22px; height: 15px; border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(0,0,0,.35);
}
/* prefixo `ij-` porque o site ja' tem uma classe `.nota` global, com fundo e borda: sem o
   prefixo, cada linha do menu virava uma caixa com cara de campo de formulario */
#idioma-jogo-menu button .ij-nome { font-weight: 600; }
#idioma-jogo-menu button .ij-nota {
  font-size: 11px; color: #8b8f98; background: none; border: none; padding: 0;
}
#idioma-jogo-menu .rodape {
  color: #8b8f98; font-size: 11px; line-height: 1.35; padding: 8px 8px 4px;
  border-top: 1px solid rgba(255,255,255,.08); margin-top: 4px;
}