/* =====================================================================
   POKEWORLD UNIVERSE — aba Guildas da página /ranking (16/10/2026)
   Pódio do vídeo do designer ("Guild Highscore"), montado com as peças dele na
   mesma posição do quadro 3840x2160 (pecas.json): as 5 bases lado a lado
   (4, 2, 1, 3, 5), as pedras numeradas flutuando de leve, a imagem da guilda
   no centro da base e o nome em cima (a névoa do quadro ficou de fora). O
   "Geral" usa o painel do rank geral dos treinadores (classes rkj-*).
   Quadro do palco: x 0..3840, y 840..2000 (1160 de altura).
   ===================================================================== */

.rkg[hidden], .rkj-mundos[hidden], .rkg-geral[hidden], .rkg-palco[hidden], #rkj-vista-jogadores[hidden], .rkg-emblema[hidden] { display: none; }

/* aba como botão: mesma letra da aba "Top 100"; só a ativa leva a barrinha dourada */
.rkj-abas { gap: clamp(18px, 2.4vw, 44px); }
button.rkj-aba { background: none; border: 0; cursor: pointer; color: rgba(255,255,255,.62); transition: color .18s ease; }
button.rkj-aba:hover { color: #fff; }
button.rkj-aba.is-active { color: #fff; cursor: default; }
button.rkj-aba:focus-visible { outline: 2px solid var(--rkj-ouro); outline-offset: 4px; }
.rkj-aba .rkj-barrinha { opacity: 0; transition: opacity .18s ease; }
.rkj-aba.is-active .rkj-barrinha { opacity: 1; }
.rkg-sem-transicao .rkj-aba, .rkg-sem-transicao .rkj-barrinha { transition: none !important; }

/* botão do pódio (alterna Top 5 x Geral), a peça do designer ao lado do globo */
.rkg-mundos { gap: clamp(10px, 1.4vw, 22px); }
.rkg-podio {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: clamp(40px, 3.2vw, 56px); height: clamp(40px, 3.2vw, 56px);
  background: none; border: 0; padding: 0; cursor: pointer;
}
.rkg-podio img { display: block; width: 72%; height: auto; }
.rkg-podio__luz { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .18s ease; pointer-events: none; }
.rkg-podio__luz img { width: 100%; }
.rkg-podio:hover .rkg-podio__luz, .rkg-podio[aria-pressed="true"] .rkg-podio__luz { opacity: 1; }
.rkg-podio:focus-visible { outline: 2px solid var(--rkj-ouro); outline-offset: 2px; border-radius: 6px; }
.rkj-globo[aria-disabled="true"] { cursor: default; opacity: .55; }

/* aviso (vazio, em breve, pausado, indisponível): compacto, logo acima do pódio, que continua à vista com as vagas apagadas
   (no Top 100 o mesmo cartão tem margens grandes porque lá ele ocupa o lugar da lista) */
#rkg-estado { margin: clamp(14px, 1.8vw, 30px) auto clamp(2px, .6vw, 10px); }

/* ---------- a cena: pódio e geral trocam com uma transição suave ---------- */
.rkg-cena { position: relative; margin-top: clamp(8px, 1.2vw, 18px); }
.rkg-palco, .rkg-geral { transition: opacity .28s ease, transform .28s ease; }
.rkg-cena.is-trocando .rkg-palco, .rkg-cena.is-trocando .rkg-geral { opacity: 0; transform: translateY(8px); }
.rkg-geral { margin-top: 0; }
/* do 6º ao 50º logo abaixo do pódio (17/10, "tipo dos players"): o mesmo espaço do Top 100 entre as cartas e a tabela */
.rkg-geral.rkg-resto { margin-top: clamp(28px, 3.5vw, 56px); }

/* sem a névoa do designer (16/10, pedido do dono): no quadro dele ela escurece o pé da tela; aqui o pódio fica no meio da
   página e ela virava uma faixa roxa com borda reta embaixo das pedras. O fundo da página continua igual ao do Top 100. */
.rkg-palco { position: relative; width: 100%; container-type: inline-size; overflow: hidden; }
.rkg-lugares { list-style: none; margin: 0; padding: 0; }
.rkg-lugar { position: relative; }
/* .rkg-lugar = lugar e entrada; .rkg-peca (mesma caixa da base) = o boiar: base, bola, pedra e nome sobem e descem juntos */
.rkg-peca { position: relative; --boia: min(-6px, -.5cqw); animation: rkg-boiar 4.6s ease-in-out var(--bd, 0s) infinite; }
.rkg-base { display: block; width: 100%; height: auto; }
.rkg-emblema {
  position: absolute; left: var(--ex); top: var(--ey); width: var(--ew); height: auto; aspect-ratio: 1;
  transform: translate(-50%, -50%);   /* sem sombra: no quadro do designer a bola fica chapada no encaixe da base */
}
.rkg-pedra { position: absolute; left: var(--px); top: var(--py); width: var(--pw); height: auto; animation: rkg-flutuar var(--pt, 3.8s) ease-in-out var(--pd, 0s) infinite; }
@keyframes rkg-flutuar { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(var(--pedra-boia, -7%)); } }
@keyframes rkg-boiar { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(var(--boia)); } }

/* entrada (abrir a aba, trocar de mundo ou de modo, ou a lista mudar): as bases sobem até o lugar, o 1º primeiro, com um
   leve passar do ponto; o nome aparece depois. Só "backwards": quando termina, nada fica preso no elemento. */
@keyframes rkg-subir { from { opacity: 0; transform: translateY(var(--sobe, 38px)) scale(.94); } to { opacity: 1; transform: none; } }
@keyframes rkg-nome-entra { from { opacity: 0; transform: translate(-50%, -10px); } }
@keyframes rkg-linha { from { opacity: 0; transform: translateY(18px); } }
@keyframes rkg-aparecer { from { opacity: 0; } }
.rkg-palco.is-aguardando .rkg-lugar, .rkg-geral.is-aguardando .rkj-lista > li { opacity: 0; }   /* esperando a 1ª lista */
.rkg-palco.is-entrando .rkg-lugar { animation: rkg-subir .85s cubic-bezier(.2, .9, .3, 1.16) var(--entrada, 0s) backwards; }
.rkg-palco.is-entrando .rkg-nome { animation: rkg-nome-entra .5s ease-out calc(var(--entrada, 0s) + .45s) backwards; }
.rkg-geral.is-entrando .rkj-lista > li { animation: rkg-linha .5s cubic-bezier(.22, 1, .36, 1) calc(min(var(--i, 0), 12) * 45ms) backwards; }
.rkg-nome {
  position: absolute; left: 50%; bottom: calc(100% + .35em); transform: translateX(-50%);
  width: max-content; max-width: 150%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: center;
  color: #fff; font: 700 max(14px, calc(50 / 3840 * 100cqw)) / 1.2 var(--rkj-condensada);
  text-shadow: 1px 0 0 var(--rkj-contorno), -1px 0 0 var(--rkj-contorno), 0 1px 0 var(--rkj-contorno), 0 -1px 0 var(--rkj-contorno),
    1px 1px 0 var(--rkj-contorno), -1px -1px 0 var(--rkj-contorno), 1px -1px 0 var(--rkj-contorno), -1px 1px 0 var(--rkj-contorno);
}
.rkg-lugar--1 .rkg-nome { color: var(--rkj-ouro); }
.rkg-lugar.is-vaga .rkg-base { opacity: .55; }

/* posição de cada peça dentro da caixa da própria base (frações do quadro do designer). A imagem da guilda foi MEDIDA no
   quadro do vídeo (tools/medir_emblemas.py -> emblemas-medidos.json): mesmo tamanho nas 5 bases, no centro do encaixe de
   cada base; 2 a 5 na mesma linha, o 1º um pouco mais alto. A imagem é o QUADRO INTEIRO de 1000 do designer (394 px no
   quadro de 3840; a bola ocupa 797/1000 dele), para asas, raios etc. das variantes não serem cortados. */
.rkg-lugar--4 { --ex: 52.45%; --ey: 53.12%; --ew: 74.19%; --px: 33.90%; --py: 88.06%; --pw: 54.05%; --pt: 4.1s; --pd: -.6s; }
.rkg-lugar--2 { --ex: 55.24%; --ey: 54.36%; --ew: 76.06%; --px: 25.10%; --py: 91.63%; --pw: 56.37%; --pt: 3.7s; --pd: -1.4s; }
.rkg-lugar--1 { --ex: 50.56%; --ey: 53.98%; --ew: 48.65%; --px: 28.89%; --py: 96.41%; --pw: 37.04%; --pt: 3.5s; --pd: 0s; }
.rkg-lugar--3 { --ex: 45.93%; --ey: 48.62%; --ew: 79.59%; --px: 19.19%; --py: 90.58%; --pw: 58.99%; --pt: 3.9s; --pd: -2.1s; }
.rkg-lugar--5 { --ex: 47.55%; --ey: 53.12%; --ew: 74.19%; --px: 13.94%; --py: 87.42%; --pw: 54.05%; --pt: 4.3s; --pd: -1s; }
/* entrada: 1º, depois 2º e 3º, depois 4º e 5º. Boiar em onda da esquerda para a direita (4, 2, 1, 3, 5): cada lugar
   ~0,3 de volta atrás do vizinho, então um sobe enquanto o do lado ainda desce */
.rkg-lugar--4 { --entrada: .3s;  --bd: 0s; }
.rkg-lugar--2 { --entrada: .12s; --bd: -1.4s; }
.rkg-lugar--1 { --entrada: 0s;   --bd: -2.8s; }
.rkg-lugar--3 { --entrada: .2s;  --bd: -4.2s; }
.rkg-lugar--5 { --entrada: .38s; --bd: -5.6s; }

/* ---------- clicar numa guilda abre os membros: no pódio a luz atrás da base; no Geral o nome é botão ---------- */
/* a luz tem a cor da base de cada lugar (dono, 16/10: "tem que acender a correspondente da posição"), medida nas imagens:
   1º ouro (o corpo da base), 2º prata (o corpo), 3º bronze e 4º/5º azul-aço (o tom claro da borda: o corpo é escuro e não
   brilha sobre o navy); a força de cada uma igualada na foto */
.rkg-lugar { --rkg-cor: #FDDC4F; --rkg-luz: rgba(253, 220, 79, .45); }
.rkg-lugar--2 { --rkg-cor: #CFDBE7; --rkg-luz: rgba(207, 219, 231, .5); }
.rkg-lugar--3 { --rkg-cor: #E1873F; --rkg-luz: rgba(225, 135, 63, .75); }
.rkg-lugar--4, .rkg-lugar--5 { --rkg-cor: #8793CF; --rkg-luz: rgba(135, 147, 207, .8); }
.rkg-lugar.is-clicavel { cursor: pointer; }
.rkg-lugar.is-clicavel .rkg-base { transition: filter .2s ease; }
.rkg-lugar.is-clicavel:hover .rkg-base, .rkg-lugar.is-clicavel:focus-visible .rkg-base { filter: drop-shadow(0 0 1.1cqw var(--rkg-luz)); }
.rkg-lugar.is-clicavel:focus-visible { outline: none; }
.rkg-lugar.is-clicavel:focus-visible .rkg-nome { outline: 2px solid var(--rkg-cor); outline-offset: 4px; border-radius: 4px; }
.rkg-geral .rkj-linha { cursor: pointer; }   /* o nome-botão, a luz da linha e o foco vêm do Top 100 (ranking-jogo.css) */

/* ---------- membros da guilda: a cena troca o pódio/Geral pela tabela do rank geral (Nome · Cargo · Nível) ---------- */
.rkg-gd__topo {
  display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; align-items: center; gap: 12px 18px;
  max-width: 1200px; margin: 0 auto clamp(14px, 1.6vw, 26px);
}
.rkg-gd__voltar {
  display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px 8px 10px; border: 1px solid #FEDFA2; border-radius: 4px;
  background: none; color: #fff; font: 700 16px/1 var(--rkj-condensada); letter-spacing: .02em; cursor: pointer; transition: background .18s ease, color .18s ease;
}
.rkg-gd__voltar span { font-size: 22px; line-height: .7; margin-top: -2px; }
.rkg-gd__voltar:hover { background: rgba(253, 220, 79, .08); color: var(--rkj-ouro); }
.rkg-gd__voltar:focus-visible { outline: 2px solid var(--rkj-ouro); outline-offset: 2px; }
.rkg-gd__emblema { width: clamp(58px, 6vw, 88px); height: auto; aspect-ratio: 1; }
.rkg-gd__titulo { min-width: 0; }
.rkg-gd__pos { margin: 0 0 4px; font: 700 clamp(13px, 1vw, 15px)/1.2 var(--rkj-condensada); letter-spacing: .08em; text-transform: uppercase; color: var(--rkj-cabecalho); }
.rkg-gd__pos.is-ouro { color: var(--rkj-ouro); }
.rkg-gd__nome { margin: 0; font: 700 clamp(24px, 2.4vw, 38px)/1.1 var(--rkj-condensada); color: #fff; overflow-wrap: anywhere; }
.rkg-gd__dados { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin: 0; }
.rkg-gd__dados:empty { display: none; }
.rkg-gd__dado { min-width: 116px; margin: 0; padding: 8px 10px 9px; text-align: center; background: rgba(255, 255, 255, .045); border-radius: 4px; }
.rkg-gd__dado dt {
  display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 2.4em; margin: 0 0 4px;
  font: 700 11.5px/1.2 var(--rkj-condensada); letter-spacing: .04em; text-transform: uppercase; color: var(--rkj-cabecalho);
}
.rkg-gd__sub { display: block; font-size: 10.5px; letter-spacing: .05em; opacity: .85; }
.rkg-gd__dado dd { margin: 0; font: 700 20px/1.1 var(--rkj-condensada); color: #fff; }
/* na tabela: o cargo vai na coluna do meio (a do mundo no Top 100); o do líder em dourado */
.rkg-guilda .rkj-linha.is-lider .rkj-col--mundo { color: var(--rkj-ouro); }
.rkg-guilda .rkj-linha:not(:has(button.rkj-col--nome)) { cursor: default; }
.rkg-gd__tentar { margin-left: 8px; vertical-align: middle; }
.rkg-gd__tentar[hidden] { display: none; }
#rkg-gd-estado[hidden] { display: none; }
@media (max-width: 899.98px) {
  .rkg-gd__topo { grid-template-columns: auto minmax(0, 1fr); }
  .rkg-gd__voltar { grid-column: 1 / -1; justify-self: start; }
  .rkg-gd__dados { grid-column: 1 / -1; justify-content: stretch; }
  .rkg-gd__dado { flex: 1 1 120px; min-width: 0; }
}
/* "menos movimento" (no Windows: Efeitos de animação desligado): sem a subida e sem o passar do ponto, só aparece; o pódio
   continua boiando bem de leve e devagar */
@media (prefers-reduced-motion: reduce) {
  .rkg-peca { --boia: min(-3px, -.2cqw); animation-duration: 7s; }
  .rkg-pedra { --pedra-boia: -3%; animation-duration: 6s; }
  .rkg-palco.is-entrando .rkg-lugar, .rkg-geral.is-entrando .rkj-lista > li { animation: rkg-aparecer .45s ease-out backwards; }
  .rkg-palco.is-entrando .rkg-nome { animation: none; }
  .rkg-palco, .rkg-geral { transition: none; }
}

/* telas largas: a cena inteira do designer (as 5 bases lado a lado). Quadro x 0..3840, y 840..2000 (1160). */
@media (min-width: 640px) {
  .rkg-palco { aspect-ratio: 3840 / 1160; }
  .rkg-lugar { position: absolute; }
  .rkg-lugar--4 { left: 6.276%;  top: 11.552%; width: 13.828%; }
  .rkg-lugar--2 { left: 23.438%; top: 10.086%; width: 13.490%; }
  .rkg-lugar--1 { left: 39.115%; top: 11.983%; width: 21.094%; }
  .rkg-lugar--3 { left: 62.448%; top: 16.293%; width: 12.891%; }
  .rkg-lugar--5 { left: 78.984%; top: 11.552%; width: 13.828%; }
}

/* celular: 1º em cima, depois 2º e 3º, depois 4º e 5º (nome legível; mesma montagem dentro de cada base) */
@media (max-width: 639.98px) {
  .rkg-palco { padding: 34px 0 76px; }
  /* a pedra pendura abaixo da base: a fileira de baixo começa depois dela, com o nome livre (medido: sem sobreposição) */
  .rkg-lugares { display: grid; grid-template-columns: 1fr 1fr; column-gap: 8%; row-gap: 84px; justify-items: center; align-items: end; }
  .rkg-lugar--1 { grid-column: 1 / -1; width: 56%; order: 1; }
  .rkg-lugar--2 { width: 78%; order: 2; }
  .rkg-lugar--3 { width: 74%; order: 3; }
  .rkg-lugar--4 { width: 72%; order: 4; }
  .rkg-lugar--5 { width: 72%; order: 5; }
  .rkg-nome { font-size: 15px; max-width: 120%; }
}