/* =====================================================================
   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; }

/* 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 (a bola com 314 px no
   quadro de 3840), no centro do encaixe de cada base; 2 a 5 na mesma linha, o 1º um pouco mais alto. */
.rkg-lugar--4 { --ex: 52.45%; --ey: 53.12%; --ew: 59.13%; --px: 33.90%; --py: 88.06%; --pw: 54.05%; --pt: 4.1s; --pd: -.6s; }
.rkg-lugar--2 { --ex: 55.24%; --ey: 54.36%; --ew: 60.62%; --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: 38.77%; --px: 28.89%; --py: 96.41%; --pw: 37.04%; --pt: 3.5s; --pd: 0s; }
.rkg-lugar--3 { --ex: 45.93%; --ey: 48.62%; --ew: 63.43%; --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: 59.13%; --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; }

/* "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%; }
}