/* =====================================================================
   POKEWORLD UNIVERSE — página /ranking com o visual da aba Highscore do
   lobby do jogo (08/10/2026). Só peças do designer (site/assets/img/ranking,
   geradas pelo pipeline do cliente a partir das artes originais) e texto vivo.
   Geometria: a mesma base 1080 do cliente (modules/pwu_lobby/ranking.lua):
   cada carta do Top 5 é uma célula com as peças em % e as fontes em cqw;
   o rank geral usa o painel gravado do designer com rolagem por linha.
   Este arquivo é só desta página: styles.css / pages.css ficam intocados.
   Revisão de 08/10: nomes, cabeçalho e linhas na Roboto Condensed Bold do cliente (papéis c20/c32; SIL OFL, licença em
   fonts/RobotoCondensed-OFL.txt), piso do nome em 14 px, halos "soltos" abaixo de 1100 px, banner compacto só no desktop.
   ===================================================================== */
@font-face {
  font-family: "Roboto Condensed";
  src: url("fonts/RobotoCondensed-Bold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
.rkj {
  --rkj-condensada: "Roboto Condensed", "Arial Narrow", var(--montreal);
  --rkj-faixa: #0F1B2B;      /* sub-barra do lobby */
  --rkj-contorno: #051839;   /* contorno navy de 1 px do nome (D-C2) */
  --rkj-claro: #DBD9D8;
  --rkj-cabecalho: #9BA9DB;
  --rkj-ouro: #FDDC4F;
  --rkj-barra-h: clamp(52px, 4.5vw, 86px);
  position: relative;
  padding: 0 0 clamp(48px, 6vw, 96px);
  background: #0d1330 url("assets/img/bg/hex-plain.png") center / 40rem repeat;
  color: #fff;
  overflow: visible;
}
.rkj::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, #0d1330 0%, rgba(8,14,40,.96) 18%, rgba(6,12,36,.97) 100%);
  pointer-events: none;
}
/* faixa da sub-barra na largura toda (como no lobby), sem sair da página */
.rkj::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: var(--rkj-barra-h);
  background: var(--rkj-faixa);
  box-shadow: 0 2px 0 rgba(0,0,0,.25);
  pointer-events: none;
}
.rkj > * { position: relative; z-index: 1; }
/* banner compacto SÓ no desktop (o ranking é o conteúdo, não a capa: o pódio entra na tela sem rolar, como no lobby);
   abaixo de 900 px valem as regras móveis do próprio site (pages.css), iguais às das outras páginas */
@media (min-width: 900.02px) {
  body[data-page="ranking-jogo"] .banner { min-height: 0; padding: 2.4rem 0 4.4rem; }
  body[data-page="ranking-jogo"] .banner__crumb { margin-bottom: 1.2rem; }
  body[data-page="ranking-jogo"] .banner__title { margin-top: 1rem; font-size: 5.6rem; }
  body[data-page="ranking-jogo"] .banner__sub { margin-top: 1.4rem; max-width: 96rem; }
  body[data-page="ranking-jogo"] .banner--blend::after { height: 9rem; }
  body[data-page="ranking-jogo"] .banner--solo .banner__ball { margin-top: -22rem; width: 44rem; height: 44rem; }
}

/* ---------- sub-barra: aba "Ranking" com a barrinha dourada + globo dos mundos ---------- */
.rkj-barra {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  height: var(--rkj-barra-h);
}
.rkj-abas { display: flex; align-items: stretch; height: 100%; }
.rkj-aba {
  position: relative; display: flex; align-items: center;
  padding: 0 2px; font: 700 clamp(17px, 1.65vw, 27px)/1 var(--rkj-condensada); color: #fff; letter-spacing: .01em;
}
.rkj-barrinha {
  position: absolute; left: 0; bottom: 0; width: 100%; height: clamp(3px, .45vw, 7px);
}
.rkj-mundos { position: relative; height: 100%; display: flex; align-items: center; }
.rkj-globo {
  position: relative; display: flex; align-items: center; gap: 10px;
  padding: 6px 8px; border: 0; border-radius: 8px; background: none; cursor: pointer;
  color: var(--rkj-claro); font: 700 clamp(14px, 1.15vw, 18px)/1 var(--rkj-condensada);
}
.rkj-globo__icone { position: relative; z-index: 1; width: clamp(24px, 2.3vw, 36px); height: auto; }
/* mouse em cima = só a luz atrás do ícone (peça -brilho do designer), nunca placa */
.rkj-globo__luz {
  position: absolute; z-index: 0; left: 8px; top: 50%; width: clamp(24px, 2.3vw, 36px); aspect-ratio: 1;
  transform: translate(-16%, -50%) scale(1.36); opacity: 0; transition: opacity .2s; pointer-events: none;
}
.rkj-globo__luz img { width: 100%; height: 100%; }
.rkj-globo:hover .rkj-globo__luz, .rkj-globo[aria-expanded="true"] .rkj-globo__luz, .rkj-globo:focus-visible .rkj-globo__luz { opacity: 1; }
.rkj-globo:hover .rkj-globo__nome, .rkj-globo[aria-expanded="true"] .rkj-globo__nome { color: #fff; }
.rkj-globo:focus-visible { outline: 2px solid var(--rkj-ouro); outline-offset: 2px; }

/* janela dos mundos (janela-mundos.png do designer, 9-slice; só o miolo liso estica) */
.rkj-janela {
  position: absolute; right: 0; top: calc(100% - 4px); z-index: 30; min-width: 150px;
  padding: 8px 6px; background: var(--rkj-faixa);
  border: 4px solid transparent;
  border-image: url("assets/img/ranking/janela-mundos.webp") 7 fill / 4px stretch;
  box-shadow: 0 10px 26px rgba(0,0,0,.45);
}
.rkj-janela[hidden] { display: none; }
.rkj-mundo {
  display: block; width: 100%; padding: 5px 10px; border: 0; background: none; cursor: pointer;
  font: 700 clamp(14px, 1.1vw, 17px)/1.25 var(--rkj-condensada); color: var(--rkj-claro); text-align: center;
  transition: color .15s;
}
.rkj-mundo:hover, .rkj-mundo:focus-visible { color: #fff; outline: none; }
.rkj-mundo:focus-visible { box-shadow: inset 0 0 0 2px var(--rkj-ouro); }
.rkj-mundo.is-ativo, .rkj-mundo.is-ativo:hover { color: var(--rkj-ouro); }
.rkj-mundo.is-breve { opacity: .45; cursor: default; }
.rkj-mundo.is-breve:hover { color: var(--rkj-claro); }

/* ---------- linha de contexto e cartão de estado ---------- */
.rkj-meta {
  margin: clamp(12px, 1.4vw, 22px) 0 0;
  font: 400 clamp(13px, 1vw, 16px)/1.4 var(--montreal); color: rgba(255,255,255,.62);
  min-height: 1.4em;
}
.rkj-meta b { font-weight: 500; color: rgba(255,255,255,.85); }
.rkj-cartao {
  position: relative; max-width: 620px; margin: clamp(56px, 10vw, 150px) auto;
  padding: clamp(16px, 1.6vw, 24px) clamp(22px, 2vw, 32px);
  background: var(--rkj-faixa); border-left: 6px solid #e6a03c; border-radius: 0 4px 4px 0;
  box-shadow: 0 14px 36px rgba(0,0,0,.4), inset 0 0 0 1px rgba(255,255,255,.04);
  text-align: center; font: 500 clamp(16px, 1.3vw, 22px)/1.35 var(--montreal); color: #fff;
}
.rkj-cartao::before {
  content: ""; position: absolute; left: -6px; top: 0; bottom: 0; width: 6px;
  background: linear-gradient(180deg, #fcd05c, #e6a03c 60%, #9a5f16);
}
.rkj-cartao[hidden] { display: none; }
.rkj-cartao.is-carregando { animation: rkj-pulsa 1.6s ease-in-out infinite; }
.rkj-cartao__acao {
  display: inline-block; margin: 14px auto 0; padding: 10px 22px; border: 0; border-radius: 10rem; cursor: pointer;
  background: var(--grad-yellow); color: #000; font: 400 clamp(15px, 1.1vw, 18px)/1 var(--bebas); letter-spacing: .05em;
}
.rkj-cartao__acao[hidden] { display: none; }
.rkj-cartao__acao:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
@keyframes rkj-pulsa { 0%, 100% { opacity: 1; } 50% { opacity: .72; } }

.rkj-conteudo[hidden] { display: none; }

/* ---------- Top 5: palco 1830x788 (base 1080 do lobby), cartas 4-2-1-3-5 ---------- */
.rkj-palco { position: relative; width: 100%; margin-top: clamp(8px, 1.2vw, 18px); container-type: inline-size; }
.rkj-cartas { list-style: none; margin: 0; padding: 0; }
.rkj-carta { position: relative; container-type: inline-size; }
.rkj-peca { position: absolute; display: block; pointer-events: none; user-select: none; -webkit-user-drag: none; }
.rkj-retrato[hidden] { display: none; }
/* célula de cada carta (do nome, acima da crista, até a pedra do pódio): --cw/--ch em px da base 1080 */
.rkj-carta--1 { --cw: 387; --ch: 774; }
.rkj-carta--2 { --cw: 387; --ch: 689; }
.rkj-carta--3 { --cw: 388; --ch: 689; }
.rkj-carta--4 { --cw: 372; --ch: 687; }
.rkj-carta--5 { --cw: 371; --ch: 685; }
.rkj-carta--1 .rkj-brilho { left: 0; top: 3.941%; width: 100%; height: 85.271%; }
.rkj-carta--1 .rkj-base   { left: 12.403%; top: 7.881%; width: 74.935%; height: 79.587%; }
.rkj-carta--1 .rkj-borda  { left: 6.718%; top: 5.297%; width: 86.305%; height: 82.3%; }
.rkj-carta--1 .rkj-podio  { left: 26.873%; top: 79.328%; width: 40.31%; height: 20.672%; }
.rkj-carta--1 .rkj-nivel  { left: 49.935%; top: 13.017%; height: 4.457%; }
.rkj-carta--2 .rkj-brilho { left: 0; top: 1.669%; width: 100%; height: 94.194%; }
.rkj-carta--2 .rkj-base   { left: 12.791%; top: 8.418%; width: 74.935%; height: 85.776%; }
.rkj-carta--2 .rkj-borda  { left: 7.235%; top: 5.951%; width: 86.047%; height: 81.277%; }
.rkj-carta--2 .rkj-podio  { left: 23.256%; top: 77.794%; width: 39.276%; height: 22.206%; }
.rkj-carta--2 .rkj-nivel  { left: 50.388%; top: 13.498%; height: 4.209%; }
.rkj-carta--3 .rkj-brilho { left: 0; top: 1.814%; width: 100%; height: 94.049%; }
.rkj-carta--3 .rkj-base   { left: 12.758%; top: 8.418%; width: 74.742%; height: 85.776%; }
.rkj-carta--3 .rkj-borda  { left: 7.216%; top: 5.951%; width: 85.825%; height: 79.826%; }
.rkj-carta--3 .rkj-podio  { left: 37.113%; top: 77.794%; width: 39.433%; height: 22.206%; }
.rkj-carta--3 .rkj-nivel  { left: 50.064%; top: 14.369%; height: 4.935%; }
.rkj-carta--4 .rkj-brilho { left: 0; top: 4.294%; width: 100%; height: 91.849%; }
.rkj-carta--4 .rkj-base   { left: 8.871%; top: 8.443%; width: 77.957%; height: 86.026%; }
.rkj-carta--4 .rkj-borda  { left: 2.957%; top: 5.968%; width: 89.785%; height: 15.284%; }
.rkj-carta--4 .rkj-podio  { left: 29.032%; top: 80.64%; width: 40.323%; height: 19.36%; }
.rkj-carta--4 .rkj-nivel  { left: 47.984%; top: 14.665%; height: 4.44%; }
.rkj-carta--5 .rkj-brilho { left: 0; top: 4.307%; width: 100%; height: 92.117%; }
.rkj-carta--5 .rkj-base   { left: 13.208%; top: 8.467%; width: 78.167%; height: 86.277%; }
.rkj-carta--5 .rkj-borda  { left: 7.278%; top: 5.985%; width: 90.027%; height: 15.328%; }
.rkj-carta--5 .rkj-podio  { left: 30.189%; top: 80.584%; width: 40.162%; height: 19.416%; }
.rkj-carta--5 .rkj-nivel  { left: 52.493%; top: 14.708%; height: 4.453%; }
/* level: dígitos do atlas do pipeline (imagem), centrados na placa lisa da crista; cada dígito é a própria célula tabular */
.rkj-nivel {
  position: absolute; display: flex; align-items: center; justify-content: center;
  transform: translate(-50%, -50%); max-width: 44%; pointer-events: none;
}
.rkj-nivel img { display: block; height: 100%; width: auto; flex: 0 1 auto; min-width: 0; }
/* nome do jogador em CIMA da carta (decisão do dono, 08/10): branco com o anel navy de 1 px; o "é você" fica dourado.
   Roboto Condensed Bold como o papel c20 do cliente; 20 px da base 1080 com piso de 14 px (o lobby chega a 14 px em
   1366x768; abaixo disso o nome ficaria menor que qualquer texto do site) */
.rkj-nome {
  position: absolute; left: 2%; width: 96%; top: 0; margin: 0;
  line-height: calc(30 / var(--cw) * 100cqw);
  font: 700 max(14px, calc(20 / var(--cw) * 100cqw)) / calc(30 / var(--cw) * 100cqw) var(--rkj-condensada);
  color: #fff; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  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);
}
.rkj-nome.is-voce { color: var(--rkj-ouro); }
/* nome que a janela dos mundos cobriria fica escondido enquanto ela está aberta (mesma regra do lobby, ranking.lua) */
.rkj-nome.is-sob-janela { visibility: hidden; }
.rkj-carta:focus-visible { outline: 2px solid var(--rkj-ouro); outline-offset: 4px; border-radius: 12px; }
/* pedras decorativas e pedras do pódio flutuam de leve, como no lobby (12 px e ±4 px da base 1080, período 3,2 s) */
.rkj-pedras { position: absolute; display: none; pointer-events: none; user-select: none; }
.rkj-pedras--esq { left: 0.492%; top: 56.98%; width: 7.978%; height: 33.122%; }
.rkj-pedras--dir { left: 91.366%; top: 56.98%; width: 8.087%; height: 33.249%; }
@keyframes rkj-flutua-pedras { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4.6%); } }
@keyframes rkj-flutua-podio { 0%, 100% { transform: translateY(0); } 25% { transform: translateY(-2.5%); } 75% { transform: translateY(2.5%); } }
.rkj-anima .rkj-pedras { animation: rkj-flutua-pedras 3.2s ease-in-out infinite; }
.rkj-anima .rkj-podio { animation: rkj-flutua-podio 3.2s ease-in-out .8s infinite; }
@media (prefers-reduced-motion: reduce) {
  .rkj-anima .rkj-pedras, .rkj-anima .rkj-podio, .rkj-cartao.is-carregando { animation: none; }
}

/* palco inteiro (composição do designer) a partir de 1100 px */
@media (min-width: 1100px) {
  .rkj-palco { aspect-ratio: 1830 / 788; }
  .rkj-cartas { position: absolute; inset: 0; }
  .rkj-carta { position: absolute; }
  .rkj-carta--1 { left: 39.399%; top: 1.142%; width: 21.148%; height: 98.223%; }
  .rkj-carta--2 { left: 20.874%; top: 4.695%; width: 21.148%; height: 87.437%; }
  .rkj-carta--3 { left: 57.869%; top: 4.695%; width: 21.202%; height: 87.437%; }
  .rkj-carta--4 { left: 3.224%; top: 4.695%; width: 20.328%; height: 87.183%; }
  .rkj-carta--5 { left: 76.448%; top: 4.695%; width: 20.273%; height: 86.929%; }
  .rkj-pedras { display: block; }
}
/* telas médias: pódio em duas fileiras (2º 1º 3º / 4º 5º), cada carta com a própria proporção */
@media (max-width: 1099.98px) {
  .rkj-cartas { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-end; gap: 3vw 2.5%; padding-top: 2vw; }
  .rkj-carta { flex: 0 0 29.5%; aspect-ratio: var(--cw) / var(--ch); }
  .rkj-carta--2 { order: 1; } .rkj-carta--1 { order: 2; } .rkj-carta--3 { order: 3; } .rkj-carta--4 { order: 4; } .rkj-carta--5 { order: 5; }
}
/* celular: pódio empilhado, 1º ao 5º, sem rolagem horizontal */
@media (max-width: 639.98px) {
  .rkj-cartas { flex-direction: column; align-items: center; gap: 4vw; }
  .rkj-carta { flex: 0 0 auto; width: min(64vw, 280px); }
  .rkj-carta--1 { order: 1; } .rkj-carta--2 { order: 2; } .rkj-carta--3 { order: 3; } .rkj-carta--4 { order: 4; } .rkj-carta--5 { order: 5; }
}

/* ---------- rank geral (6º ao 100º): painel gravado do designer ---------- */
.rkj-geral { margin-top: clamp(28px, 3.5vw, 56px); }
.rkj-geral__titulo {
  margin: 0 0 clamp(10px, 1.2vw, 18px); text-align: center;
  font: 400 clamp(15px, 1.25vw, 20px)/1 var(--bebas); letter-spacing: .18em; text-transform: uppercase; color: rgba(255,255,255,.55);
}
.rkj-painel { position: relative; width: 100%; max-width: 1200px; margin: 0 auto; container-type: inline-size; }
/* texto das linhas: Roboto Condensed Bold (papel c32 do cliente), 30 px da base 1080 (o lobby usa 32; aqui a coluna do
   nome vai até a borda do selo e um nome de 20 letras cabe sem reticências nas larguras testadas) */
.rkj-cabecalho { font: 700 max(13px, calc(30 / 1074 * 100cqw)) / 1.2 var(--rkj-condensada); color: var(--rkj-cabecalho); }
.rkj-lista { list-style: none; margin: 0; padding: 0; }
.rkj-lista:focus-visible { outline: 2px solid var(--rkj-ouro); outline-offset: 2px; }
.rkj-linha { position: relative; font: 700 max(13px, calc(30 / 1074 * 100cqw)) / 1.2 var(--rkj-condensada); color: #fff; letter-spacing: 0; }
.rkj-linha .rkj-col--mundo, .rkj-linha .rkj-col--nivel { color: var(--rkj-claro); }
.rkj-linha.is-voce .rkj-col--nome { color: var(--rkj-ouro); }
.rkj-col { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center; }
.rkj-selo { display: flex; align-items: center; justify-content: center; pointer-events: none; }
.rkj-selo img { display: block; height: 100%; width: auto; }
.rkj-painel__vazio {
  margin: 0; text-align: center; color: rgba(255,255,255,.7);
  font: 500 clamp(15px, 1.2vw, 20px)/1.3 var(--montreal);
}
.rkj-painel__vazio[hidden] { display: none; }
.rkj-trilho { display: none; }

@media (min-width: 900px) {
  .rkj-painel { aspect-ratio: 1074 / 809; background: url("assets/img/ranking/painel.webp") 0 0 / 100% 100% no-repeat; }
  .rkj-cabecalho { position: absolute; left: 0; right: 0; top: 8.096%; height: 0; }
  .rkj-cabecalho .rkj-col { position: absolute; transform: translateY(-50%); }
  /* colunas do painel: nome da borda do selo (x 615 da base) até antes do mundo; mundo e nível como no desenho */
  .rkj-cabecalho .rkj-col--nome  { left: 18.44%; width: 25.6%; }
  .rkj-cabecalho .rkj-col--mundo { left: 46.2%; width: 18.5%; }
  .rkj-cabecalho .rkj-col--nivel { left: 75.5%; width: 13.3%; }
  /* 10 linhas visíveis sobre as faixas gravadas; a rolagem para sempre numa linha (como o lobby rola por linha).
     Sem scroll-snap: a roda e o teclado andam por linha no ranking-jogo.js e a rolagem livre (botão do meio,
     toque, polegar) se acerta na linha mais próxima quando para — o encaixe obrigatório brigava com a roda. */
  .rkj-lista {
    position: absolute; left: 2.048%; top: 12.855%; width: 92.086%; height: 83.164%;
    overflow-y: auto; overflow-x: hidden; scrollbar-width: none;
  }
  .rkj-lista::-webkit-scrollbar { display: none; }
  .rkj-linha { height: 10%; }
  .rkj-linha .rkj-col { position: absolute; top: 43.1%; transform: translateY(-50%); }
  .rkj-linha .rkj-col--nome  { left: 17.8%; width: 27.8%; }
  .rkj-linha .rkj-col--mundo { left: 47.95%; width: 20.1%; }
  .rkj-linha .rkj-col--nivel { left: 79.76%; width: 14.45%; }
  /* número no selo gravado: dígitos do desenho, centro x 8,8 % da linha, altura 45/67,28 da linha */
  .rkj-selo { position: absolute; left: 8.797%; top: 38.6%; height: 66.9%; max-width: 11.628%; transform: translate(-50%, -50%); gap: 0.35%; }
  .rkj-painel__vazio { position: absolute; left: 10%; right: 10%; top: 45%; }
  /* trilho e polegar do designer; o polegar é movido pelo script a partir da rolagem da lista */
  .rkj-trilho {
    display: block; position: absolute; left: 95.438%; top: 18.541%; width: 1.769%; height: 77.874%;
    background: url("assets/img/ranking/trilho.webp") 0 0 / 100% 100% no-repeat; cursor: pointer;
  }
  .rkj-trilho[hidden] { display: none; }
  .rkj-polegar {
    position: absolute; left: 0; top: 0; width: 100%; height: 10.159%;
    background: url("assets/img/ranking/polegar.webp") 0 0 / 100% 100% no-repeat; cursor: grab; touch-action: none;
  }
  .rkj-polegar.is-arrastando { cursor: grabbing; }
  .rkj-polegar[hidden] { display: none; }
}
/* telas estreitas: lista corrida com a placa numerada recortada do próprio painel */
@media (max-width: 899.98px) {
  .rkj-painel {
    padding: 14px 12px 12px; border-radius: 12px; background: #061232;
    box-shadow: 0 0 0 2px #1d3a7a, 0 0 28px rgba(53,97,173,.45);
  }
  .rkj-cabecalho, .rkj-linha {
    display: grid; grid-template-columns: clamp(46px, 15vw, 76px) minmax(0, 1fr) clamp(44px, 15vw, 80px) clamp(36px, 11vw, 60px);
    align-items: center; column-gap: 5px;
  }
  .rkj-cabecalho { padding: 0 0 8px; font-size: clamp(13px, 3.4vw, 16px); }
  .rkj-cabecalho .rkj-col--nome { grid-column: 2; }
  .rkj-linha {
    margin-top: 5px; padding: 0 6px 0 4px; border-radius: 4px; min-height: 38px;
    background: linear-gradient(90deg, #0a1733 0%, #040c22 55%, #0b1735 100%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.05); font-size: clamp(13px, 3.8vw, 17px);
  }
  .rkj-linha .rkj-col--nome { text-align: left; padding-left: 4px; }
  .rkj-selo {
    width: 100%; aspect-ratio: 203 / 79; margin: 3px 0;
    background: url("assets/img/ranking/selo.webp") 0 0 / 100% 100% no-repeat; padding: 0 18% 0 8%; gap: 2px;
  }
  .rkj-selo img { height: 62%; }
  .rkj-painel__vazio { padding: 18px 8px 10px; }
}
@media (max-width: 639.98px) {
  .rkj-barra { gap: 8px; }
  .rkj-globo { padding: 6px 4px; gap: 7px; }
  .rkj-meta { font-size: 13px; }
}
@media (max-width: 359.98px) {
  .rkj-linha { font-size: 12.5px; padding: 0 4px 0 3px; }
  .rkj-cabecalho { font-size: 12.5px; }
}

/* =====================================================================
   PERFIL DO JOGADOR (09/10/2026) — Profile.rar do designer, igual ao lobby
   Clicar numa carta do Top 5 ou num nome do rank geral abre o perfil. Montagem do designer: aura -> base (onde entra a
   foto do treinador) -> borda -> nick -> quadro de informações (guilda e mundo; o resto do quadro fica vago para
   troféus e conquistas) -> time (Teams.rar de 09/10 20:36: coluna de 6 encaixes do lado direito, com a cor do lugar;
   os 6 primeiros da bag com as imagens do Pokémon HOME do lobby). Peças em assets/img/perfil/ (WebP 4K das camadas do
   designer; a foto já vem recortada pelo miolo da moldura). Geometria: a montagem 4K do designer, 1300 x 1287, mais a
   coluna do time (x 1195 a 1447), numa caixa de 1544 x 1287 (margem de 97 dos dois lados), em % (left/width sobre
   1544, top/height sobre 1287) e as fontes em cqw da carta. Texto: Roboto Regular do cliente (Apache 2.0,
   fonts/LICENSE-Roboto.txt); linha de base e altura das maiúsculas medidas no "exemplos de texto.png".
   ===================================================================== */
@font-face {
  font-family: "PWU Roboto";
  src: url("fonts/Roboto-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
/* quem abre o perfil: a carta ocupada do Top 5 e cada linha do rank geral (luz atrás no hover, nunca placa) */
.rkj-carta[data-pos] { cursor: pointer; }
.rkj-carta .rkj-brilho { transition: filter .15s ease; }
.rkj-carta[data-pos]:hover .rkj-brilho, .rkj-carta[data-pos]:focus-visible .rkj-brilho { filter: brightness(1.22) saturate(1.1); }
/* linha do rank geral com o mouse em cima (pedido do dono, 15/10: o dourado a 17% sobre o navy virava um oliva turvo):
   luz fria azul-clara que sai da placa do número e some para a direita (screen: só clareia o navy), com as bordas de
   cima e de baixo esfumadas (luz, nunca placa), a placa um pouco mais clara e o nome em dourado claro. O mesmo no foco do
   teclado (o nome é o botão que abre o perfil). Regras separadas: um navegador sem :has() continua com o hover. */
.rkj-linha { cursor: pointer; }
.rkj-linha::before {
  content: ""; position: absolute; inset: 4% .5% 12%; pointer-events: none; opacity: 0; transition: opacity .18s ease; mix-blend-mode: screen;
  background: linear-gradient(90deg, rgba(126,172,255,0) 0%, rgba(126,172,255,.36) 7%, rgba(104,152,248,.22) 18%, rgba(84,132,236,.10) 45%, rgba(84,132,236,0) 78%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 30%, #000 70%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 30%, #000 70%, transparent 100%);
}
.rkj-linha .rkj-col--nome { transition: color .18s ease; }
.rkj-linha .rkj-selo { transition: filter .18s ease; }
.rkj-linha:hover::before { opacity: 1; }
.rkj-linha:hover .rkj-col--nome { color: #F6DA8C; }
.rkj-linha:hover .rkj-selo { filter: brightness(1.16); }
.rkj-linha:has(.rkj-col--nome:focus-visible)::before { opacity: 1; }
.rkj-linha:has(.rkj-col--nome:focus-visible) .rkj-col--nome { color: #F6DA8C; }
.rkj-linha:has(.rkj-col--nome:focus-visible) .rkj-selo { filter: brightness(1.16); }
:where(.rkj-linha) button.rkj-col--nome {
  -webkit-appearance: none; appearance: none; margin: 0; padding: 0; border: 0; background: none; font: inherit; color: inherit; cursor: pointer;
}
.rkj-linha button.rkj-col--nome:focus-visible { outline: none; }
@media (prefers-reduced-motion: reduce) {
  .rkj-linha::before, .rkj-linha .rkj-col--nome, .rkj-linha .rkj-selo { transition: none; }
}

html.rkj-perfil-aberto { overflow: hidden; }
.rkj-perfil { position: fixed; inset: 0; z-index: 2147483000; display: grid; place-items: center; padding: 16px; }
.rkj-perfil[hidden] { display: none; }
.rkj-perfil__fundo {
  position: absolute; inset: 0; background: radial-gradient(ellipse at center, rgba(10,22,58,.86), rgba(2,6,20,.94));
  opacity: 0; transition: opacity .2s ease;
}
.rkj-perfil__janela {
  position: relative;
  width: min(903px, 100%, calc((100vh - 32px) * 1544 / 1287));    /* 903 = 760 x 1544 / 1300: a carta do mesmo tamanho */
  width: min(903px, 100%, calc((100dvh - 32px) * 1544 / 1287));
  opacity: 0; transform: scale(.96); transition: opacity .22s ease, transform .22s ease;
}
.rkj-perfil.is-aberto .rkj-perfil__fundo { opacity: 1; }
.rkj-perfil.is-aberto .rkj-perfil__janela { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .rkj-perfil__fundo, .rkj-perfil__janela { transition: none; }
  .rkj-perfil__janela { transform: none; }
}
.rkj-pf { position: relative; width: 100%; aspect-ratio: 1544 / 1287; container-type: inline-size; }
.rkj-pf__peca { position: absolute; display: block; max-width: none; pointer-events: none; user-select: none; -webkit-user-drag: none; }
.rkj-pf__aura { left: calc(97 * 100% / 1544); top: calc(10 * 100% / 1287); width: calc(1128 * 100% / 1544); height: calc(1250 * 100% / 1287); }
.rkj-pf__base, .rkj-pf__borda { left: calc(330 * 100% / 1544); top: calc(24 * 100% / 1287); width: calc(878 * 100% / 1544); height: calc(1192 * 100% / 1287); }
/* fundo da cartinha do jogador (15/10/2026): o miolo da moldura com a arte do card dele, na caixa do retrato e com a mesma
   máscara (o miolo da Base dilatado); sem card fica escondido e aparece o miolo navy da base */
.rkj-pf__fundo, .rkj-pf__retrato { left: calc(579 * 100% / 1544); top: calc(183 * 100% / 1287); width: calc(607 * 100% / 1544); height: calc(1004 * 100% / 1287); }
.rkj-pf__fundo[hidden] { display: none; }
.rkj-pf__nick { left: calc(570 * 100% / 1544); top: calc(1098 * 100% / 1287); width: calc(611 * 100% / 1544); height: calc(143 * 100% / 1287); }
.rkj-pf__info { left: calc(112 * 100% / 1544); top: calc(755 * 100% / 1287); width: calc(631 * 100% / 1544); height: calc(389 * 100% / 1287); }
.rkj-pf__time { left: calc(1195 * 100% / 1544); top: calc(116 * 100% / 1287); width: calc(252 * 100% / 1544); height: calc(1117 * 100% / 1287); }
/* time: o ícone do HOME ocupa a pokébola inteira do encaixe (círculo de 96/103, como a bag do JOGAR); encaixes de 165,5 px
   (miolo escuro + contorno) com centros medidos na coluna (x 1310; y 255,5 a 1099,5); quem não tem os 6 mostra só os que
   tem (os outros encaixes ficam com a pokébola vazia) */
.rkj-pf__pokemons { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; pointer-events: none; }
.rkj-pf__pokemon {
  position: absolute; left: calc((1310 - 77.12) * 100% / 1544); width: calc(154.24 * 100% / 1544); height: calc(154.24 * 100% / 1287);
  border-radius: 50%; overflow: hidden; pointer-events: auto;
}
.rkj-pf__pokemon:nth-child(1) { top: calc((255.5 - 77.12) * 100% / 1287); }
.rkj-pf__pokemon:nth-child(2) { top: calc((423.5 - 77.12) * 100% / 1287); }
.rkj-pf__pokemon:nth-child(3) { top: calc((592.5 - 77.12) * 100% / 1287); }
.rkj-pf__pokemon:nth-child(4) { top: calc((760.5 - 77.12) * 100% / 1287); }
.rkj-pf__pokemon:nth-child(5) { top: calc((930 - 77.12) * 100% / 1287); }
.rkj-pf__pokemon:nth-child(6) { top: calc((1099.5 - 77.12) * 100% / 1287); }
.rkj-pf__pokemon img { display: block; width: 100%; height: 100%; }
/* textos: linha de 1,3 em (o acento e a perna do "g" não são cortados) com a linha de base do desenho:
   topo = base - (0,65 + 0,342) x tamanho na Roboto (subida 0,928, descida 0,244) */
.rkj-pf__texto {
  position: absolute; margin: 0; color: #fff; font: 400 14px/1.3 "PWU Roboto", Roboto, Arial, sans-serif; letter-spacing: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none;
}
/* largura útil = até a borda da área escura do quadro na altura de cada linha (641 e 669), menos 6 px */
.rkj-pf__guilda, .rkj-pf__mundo { left: calc(231 * 100% / 1544); font-size: calc(45.5 * 100cqw / 1544); }
.rkj-pf__guilda { top: calc(854.9 * 100% / 1287); width: calc(404 * 100% / 1544); }
.rkj-pf__mundo { top: calc(914.9 * 100% / 1287); width: calc(432 * 100% / 1544); }
.rkj-pf__guilda.is-vazio { color: #9BA9DB; }
/* nick: centrado onde o designer centrou (x 866,5), dentro da área escura da placa (602 a 1144) */
.rkj-pf__nome { left: calc(615.5 * 100% / 1544); width: calc(502 * 100% / 1544); top: calc(1141.8 * 100% / 1287); font-size: calc(57.7 * 100cqw / 1544); font-weight: 400; text-align: center; }
.rkj-perfil__fechar {
  position: absolute; top: 0; right: 0; width: clamp(38px, 6.4%, 50px); aspect-ratio: 1; display: grid; place-items: center;
  padding: 0; border: 2px solid rgba(253,220,79,.85); border-radius: 50%; background: rgba(8,18,46,.92); color: #FDDC4F;
  font: 400 clamp(24px, 3.6vw, 32px)/1 Arial, sans-serif; cursor: pointer; box-shadow: 0 0 16px rgba(253,220,79,.22); transition: box-shadow .15s ease;
}
/* tela estreita ou baixa (celular): o X ganha uma faixa própria em cima da carta, para não encostar no topo da coluna
   do time (a carta desconta essa faixa da altura disponível) */
@media (max-width: 640px), (max-height: 560px) {
  .rkj-perfil__janela {
    padding-top: 46px;
    width: min(903px, 100%, calc((100vh - 78px) * 1544 / 1287));
    width: min(903px, 100%, calc((100dvh - 78px) * 1544 / 1287));
  }
  .rkj-perfil__fechar { width: 38px; }
}
.rkj-perfil__fechar:hover { box-shadow: 0 0 22px 5px rgba(253,220,79,.42); }
.rkj-perfil__fechar:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }