/* ============================================================================
   RANKINGS — a tela do topo que reúne os rankings do jogo (Fase 156)
   ----------------------------------------------------------------------------
   Mesma identidade de Missões (Fase 149): abas douradas, painel escuro,
   texto em calc(Npx * var(--text-scale,1)). Centralizada, largura limitada.
   ========================================================================== */
#rankingsConteudo{display:grid;gap:12px;max-width:760px;margin:0 auto}

.rankings-abas{position:relative;z-index:4;display:flex;gap:6px;flex-wrap:wrap;padding:6px;border:1px solid #2c313d;border-radius:12px;background:#151820}
.rankings-aba{flex:1 1 130px;min-width:0;padding:10px 12px;border:1px solid transparent;border-radius:9px;background:transparent;color:#8f97aa;
  font-size:calc(10px * var(--text-scale,1));font-weight:900;letter-spacing:1px}
.rankings-aba:hover{border-color:#3f4657;filter:none}
.rankings-aba.active{background:var(--botao-ouro-fundo);color:var(--botao-ouro-texto);box-shadow:0 5px 16px rgba(215,169,68,.22)}
/* Ícone da aba: alvo da Forja (rank_*); sem arte, o emoji. A arte ocupa o mesmo quadrado do emoji. */
.rankings-aba .col-icone{display:inline-grid;place-items:center;width:1.3em;height:1.3em;font-style:normal;line-height:1;vertical-align:middle;margin-top:-.15em}
.rankings-aba .col-icone-img{width:100%;height:100%;object-fit:contain;display:block}

.rankings-corpo{display:grid;gap:8px;padding:14px;border:1px solid var(--line);border-radius:12px;background:var(--panel3)}
.rankings-titulo{margin:0 0 4px;color:#ffb84d;font-size:calc(14px * var(--text-scale,1))}

.rankings-lista{display:grid;gap:6px;max-height:min(60vh,560px);overflow-y:auto;padding-right:4px}
.rankings-linha{display:grid;grid-template-columns:44px minmax(0,1fr) auto;align-items:center;gap:10px;padding:8px 12px;
  border:1px solid rgba(255,255,255,.06);border-radius:8px;background:rgba(0,0,0,.35)}
.rankings-linha.voce{border-color:#ffb84d;background:rgba(255,184,77,.13)}
.rankings-pos{color:#888;font-size:calc(12px * var(--text-scale,1))}
.rankings-linha.topo .rankings-pos{color:#ffd700}
.rankings-nome{display:grid;gap:2px;min-width:0}
.rankings-nome b{color:#f2f2f2;font-size:calc(12px * var(--text-scale,1));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rankings-linha.voce .rankings-nome b{color:#ffb84d}
.rankings-nome em{font-style:normal;font-weight:400;color:#c9a15d}
.rankings-nome small{color:#9aa1b1;font-size:calc(10px * var(--text-scale,1))}
.rankings-valor{color:#ffb84d;font-weight:900;font-size:calc(12px * var(--text-scale,1));white-space:nowrap}
.rankings-rodape{margin:4px 0 0;color:#8f97aa;font-size:calc(10.5px * var(--text-scale,1));line-height:1.5}

.rankings-destaque{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:8px}
.rankings-destaque>div{display:grid;gap:4px;padding:12px;border:1px solid #343947;border-radius:10px;background:#1b1f29}
.rankings-destaque small{color:#8f97aa;font-size:calc(10px * var(--text-scale,1));letter-spacing:1px;text-transform:uppercase}
.rankings-destaque strong{color:#f1e3bf;font-size:calc(16px * var(--text-scale,1))}

/* O "Progresso salvo" saiu do topo (pedido do autor). O mesmo lugar ainda
   AVISA quando o save falha ou a troca de personagem está travada: o jogo
   marca esses textos com .save-status-alerta, e só eles aparecem. */
.save-panel .save-status{display:none}
.save-panel .save-status.save-status-alerta{display:inline-flex}

/* ============================================================================
   PÓDIO, DESTAQUES E SUA POSIÇÃO (auditoria social, 26/09)
   TOP 3 grande (1º no centro), 4–8 em cards, 9+ lista compacta, e a faixa
   com a posição do jogador sempre visível no pé da aba.
   ========================================================================== */
/* PÓDIO (conceito do autor): o personagem INTEIRO sobre um pedestal, o título
   acima da cabeça e a placa (medalha + nome + valor) embaixo. O 1º no centro,
   maior e mais alto; 2º e 3º nas laterais. Sem moldura no pódio. */
.rk-podio{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr) minmax(0,1fr);align-items:end;gap:4px;padding:6px 0 10px;
  background:radial-gradient(ellipse at 50% 70%,rgba(255,207,74,.10),transparent 60%)}
.rk-podio-item{--rk-cor:#c7cfdd;display:flex;flex-direction:column;align-items:center;min-width:0;text-align:center}
.rk-lugar-1{--rk-cor:#ffcf4a}
.rk-lugar-3{--rk-cor:#d8935a}
/* Cada lugar na SUA coluna (01/10): com menos de 3 no ranking (ex.: Resets no jogo
   local, só você), o 1º caía na coluna da esquerda, a do 2º. */
.rk-lugar-2{grid-column:1;grid-row:1}.rk-lugar-1{grid-column:2;grid-row:1}.rk-lugar-3{grid-column:3;grid-row:1}
/* OS PÉS DOS TRÊS NA MESMA LINHA (06/11, autor: "um mais baixo, outro mais alto"). O pódio alinha os três pelo
   fundo da coluna, e a placa do 1º (medalha e nome maiores) é mais alta: o pedestal do 1º ficava mais alto. As placas
   ganham a mesma altura (igualarPodio, rankings-ui.js) e o pedestal do 1º, mais grosso, desce o que tem a mais para o
   meio dele (onde ficam os pés) bater com o dos outros. */
.rk-podio .rk-lugar-1 .rk-pedestal{bottom:-3px}
.rk-podio .rk-placa{box-sizing:border-box}
.rk-podio-titulo{display:flex;align-items:flex-end;justify-content:center;height:38px;max-width:100%;margin-bottom:-4px;position:relative;z-index:3}
.rk-lugar-1 .rk-podio-titulo{height:46px}
.rk-titulo-arte{max-height:100%;max-width:100%;object-fit:contain;filter:drop-shadow(0 2px 6px rgba(0,0,0,.85))}
.rk-titulo-texto{padding:2px 10px;border-radius:999px;border:1px solid color-mix(in srgb,var(--rk-cor) 60%,transparent);background:rgba(10,11,16,.8);
  color:#ffd98a;font-weight:800;font-size:calc(9.5px * var(--text-scale,1));white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.rk-palco{position:relative;width:100%;height:170px;display:flex;align-items:flex-end;justify-content:center}
.rk-lugar-1 .rk-palco{height:215px}
/* O selo "+N" do refino é do duelo; no pódio ele flutuava na frente da espada
   (relato do autor, 27/09). Mesma regra da tela de seleção (ui-scale.css). */
.rk-palco .pvp-weapon-enh{display:none!important}
/* A FICHA de quem está no ranking/chat também sem o "+N" na frente da arma (01/10, autor:
   "números na frente das armas"): o pódio e a seleção já escondiam; a ficha mostrava. */
.col-ficha-lutador .pvp-weapon-enh{display:none!important}
.rk-lutador{position:relative;z-index:2;width:150px;height:150px;margin-bottom:14px;display:flex;align-items:flex-end;justify-content:center;
  transform:scale(.92);transform-origin:50% 100%;pointer-events:none}
.rk-lugar-1 .rk-lutador{transform:scale(1.18)}
.rk-sem-lutador{position:relative;z-index:2;margin-bottom:22px;display:grid;place-items:center;width:64px;height:64px;border-radius:50%;
  border:1px solid var(--rk-cor);background:#171a22;color:var(--rk-cor);font-weight:900;font-size:calc(22px * var(--text-scale,1))}
.rk-pedestal{position:absolute;left:50%;bottom:0;z-index:1;width:min(150px,92%);height:26px;transform:translateX(-50%);border-radius:50%;
  background:radial-gradient(ellipse at 50% 40%,color-mix(in srgb,var(--rk-cor) 45%,#1a1d26),#0e1016 72%);
  box-shadow:0 0 18px color-mix(in srgb,var(--rk-cor) 30%,transparent),inset 0 -4px 8px rgba(0,0,0,.6);border:1px solid color-mix(in srgb,var(--rk-cor) 55%,transparent)}
.rk-lugar-1 .rk-pedestal{width:min(180px,95%);height:32px}
.rk-placa{position:relative;z-index:5;display:flex;align-items:center;gap:7px;max-width:100%;margin-top:14px;padding:4px 10px 4px 4px;border-radius:12px;
  background:rgba(8,9,13,.85);border:1px solid color-mix(in srgb,var(--rk-cor) 45%,transparent)}
.rk-medalha{flex:0 0 auto;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#fff8,transparent 45%),var(--rk-cor);color:#16120a;font-size:calc(12px * var(--text-scale,1));
  box-shadow:0 2px 6px rgba(0,0,0,.6)}
.rk-lugar-1 .rk-medalha{width:32px;height:32px;font-size:calc(15px * var(--text-scale,1))}
.rk-medalha b{font-weight:900}
/* Medalha desenhada (06/10): sem o disco de cor por trás, o SVG é a medalha. */
.rk-medalha.rk-medalha-arte{width:42px;height:42px;border-radius:0;background:none;box-shadow:none;filter:drop-shadow(0 2px 3px rgba(0,0,0,.7))}
.rk-lugar-1 .rk-medalha.rk-medalha-arte{width:50px;height:50px}
.rk-medalha-svg{display:block;width:100%;height:100%;overflow:visible}
.rk-placa-texto{display:grid;min-width:0;text-align:left;line-height:1.15}
.rk-podio-nome{max-width:100%;color:#f2f2f2;font-size:calc(11.5px * var(--text-scale,1));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rk-lugar-1 .rk-podio-nome{font-size:calc(13px * var(--text-scale,1));color:#ffe29a}
.rk-podio-nome em,.rk-destaque-nome em{font-style:normal;font-weight:400;color:#c9a15d}
.rk-podio-valor{max-width:100%;color:var(--rk-cor);font-weight:900;font-size:calc(11.5px * var(--text-scale,1));overflow-wrap:anywhere}
.rk-podio-det{color:#9aa1b1;font-size:calc(9px * var(--text-scale,1));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rk-podio-nome .col-ficha-link{color:inherit}
/* "(Você)" no pódio vai para a linha de baixo: nome de 12+ letras com o texto em 130% não cabia junto (01/10). */
.rk-podio-nome em{display:block;font-size:.85em;line-height:1.1}
.rk-podio-item.voce .rk-placa{border-color:#ffb84d;box-shadow:0 0 0 1px #ffb84d}
.rk-sub{color:#8f97aa;font-size:calc(9.5px * var(--text-scale,1));max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rk-titulo{color:#d9b766!important;font-weight:700}

/* 4º–8º: rosto com moldura e selo de nível; posição, nome e valor em volta. */
.rk-destaques{display:grid;grid-template-columns:repeat(auto-fit,minmax(118px,1fr));gap:8px;padding:4px 0}
.rk-destaque{display:flex;flex-direction:column;align-items:center;gap:2px;min-width:0;padding:8px 6px 10px;text-align:center;
  border:1px solid #2f3442;border-radius:12px;background:linear-gradient(180deg,#1b1f2b,#12141b)}
.rk-destaque.voce{border-color:#ffb84d;background:linear-gradient(180deg,rgba(255,184,77,.16),#12141b)}
.rk-destaque .cj-avatar{margin:calc(58px * .22) 0 calc(58px * .18)}
.rk-pos{color:#8f97aa;font-weight:900;font-size:calc(10.5px * var(--text-scale,1))}
.rk-destaque-nome{max-width:100%;color:#f2f2f2;font-size:calc(11px * var(--text-scale,1));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rk-destaque small{max-width:100%;font-size:calc(9px * var(--text-scale,1));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rk-valor{color:#ffb84d;font-weight:900;font-size:calc(11px * var(--text-scale,1));white-space:nowrap}
/* Arena por posição (26/10): setinha de lugares subidos/caídos hoje (Coliseu da semana) */
.rk-seta{font-style:normal;font-weight:900;white-space:nowrap}
.rk-seta.sobe{color:#5fd38a}
.rk-seta.desce{color:#ff6b5e}
/* 10/10: "1.234.567.890 de dano" saía do cartão do 4º–8º no celular. O texto quebra no espaço e o número encolhe (rankings-ui.js). */
.rk-destaque .rk-valor{max-width:100%;white-space:normal;overflow:hidden}

.rk-voce-faixa{position:sticky;bottom:0;z-index:6;display:flex;align-items:center;gap:10px;padding:8px 12px;margin-top:4px;
  border:1px solid #ffb84d;border-radius:10px;background:rgba(28,22,10,.96);box-shadow:0 -6px 16px rgba(0,0,0,.45);
  font-size:calc(11px * var(--text-scale,1))}
.rk-voce-faixa>span:first-child{color:#c9a15d;text-transform:uppercase;letter-spacing:1px;font-size:calc(9.5px * var(--text-scale,1))}
.rk-voce-faixa strong{color:#ffd24d;font-size:calc(14px * var(--text-scale,1))}
.rk-voce-faixa b{flex:1;min-width:0;color:#f2f2f2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Sua linha já está na tela: a faixa some sem mudar o tamanho da página (06/10). */
.rk-voce-faixa{transition:opacity .18s ease,visibility .18s}
.rk-voce-faixa.rk-faixa-escondida{opacity:0;visibility:hidden;pointer-events:none}
.rk-voce-faixa.fora{border-style:dashed;border-color:#5b5f6b;background:rgba(20,22,28,.9)}
.rk-voce-faixa.fora>span:first-child{text-transform:none;letter-spacing:0;color:#9aa1b1}

/* ============================================================================
   COL_CARTAO_JOGADOR (src/ui/cartao-jogador.js) — retrato + moldura, e a linha
   compacta das listas de Amigos e Guild. Mora aqui porque o ranking é o
   primeiro a usar; vale para as três telas.
   ========================================================================== */
.cj-avatar{position:relative;display:inline-grid;place-items:center;flex:0 0 auto;width:var(--cj-tam,44px);height:var(--cj-tam,44px);
  border-radius:8px;border:1px solid #5a5140;background:radial-gradient(circle at 50% 35%,#2b3040,#12141b);overflow:visible;box-shadow:inset 0 0 0 1px rgba(0,0,0,.6)}
/* Retrato QUADRADO (pedido do autor, 26/09); com moldura-skin equipada, ela manda. */
.cj-avatar>.perfil-rosto{position:absolute;inset:0;border-radius:7px;overflow:hidden}
.cj-avatar .perfil-character-sprite{position:relative;z-index:0}
.cj-avatar.cj-com-moldura{border-color:transparent;background:radial-gradient(circle at 50% 35%,#2b3040,#12141b)}
.cj-avatar .cj-moldura{position:absolute;left:50%;top:50%;width:168%;height:168%;transform:translate(-50%,-50%);pointer-events:none;
  filter:drop-shadow(0 2px 5px rgba(0,0,0,.55))}
/* A moldura transborda ~34% para cada lado: onde o retrato está entre textos, reservar o espaço. */
.rk-podio .cj-com-moldura,.rk-destaque .cj-com-moldura,.cj-linha .cj-com-moldura,.rk-voce-faixa .cj-com-moldura{margin:calc(var(--cj-tam,44px) * .3)}
.cj-selo-nivel{position:absolute;left:-6%;top:-6%;z-index:4;min-width:22px;padding:1px 4px;border-radius:7px;border:1px solid #6d8fd6;
  background:linear-gradient(180deg,#2a4f9a,#162c5c);color:#fff;font-weight:900;font-size:calc(9px * var(--text-scale,1));line-height:1.3;text-align:center;box-shadow:0 2px 5px rgba(0,0,0,.6)}
.cj-inicial{color:#c9ccd6;font-weight:900;font-size:calc(var(--cj-tam,44px) * .42)}
.cj-linha{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:10px;padding:7px 10px;
  border:1px solid rgba(255,255,255,.07);border-radius:9px;background:rgba(0,0,0,.3)}
.cj-linha.cj-voce{border-color:#ffb84d;background:rgba(255,184,77,.1)}
.cj-corpo{display:grid;gap:1px;min-width:0}
.cj-topo{display:flex;align-items:baseline;gap:6px;min-width:0}
.cj-nome{color:#f2f2f2;font-size:calc(11.5px * var(--text-scale,1));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cj-nome em{font-style:normal;font-weight:400;color:#c9a15d}
.cj-cargo{flex:0 0 auto;padding:1px 6px;border-radius:999px;border:1px solid #6b5a2c;color:#e3c46f;font-size:calc(8.5px * var(--text-scale,1));font-weight:800;letter-spacing:.5px}
.cj-titulo{color:#d9b766;font-size:calc(9.5px * var(--text-scale,1));font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cj-det{color:#9aa1b1;font-size:calc(9.5px * var(--text-scale,1));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cj-lado{display:flex;flex-direction:column;align-items:flex-end;gap:4px}
.cj-status{font-size:calc(9px * var(--text-scale,1));font-weight:700;white-space:nowrap}
.cj-online{color:#6fdc86}.cj-afk{color:#e3c46f}.cj-offline{color:#7d8394}
/* 9º em diante: lista compacta de verdade (uma linha por jogador). */
:is(.rk-podio,.rk-palco-largo)~.rankings-lista .rankings-linha{padding:4px 12px 4px 8px;grid-template-columns:38px auto minmax(0,1fr) auto;border-color:transparent}
:is(.rk-podio,.rk-palco-largo)~.rankings-lista .rankings-linha:nth-child(odd){background:rgba(255,255,255,.035)}
:is(.rk-podio,.rk-palco-largo)~.rankings-lista .rankings-linha.voce{border-color:#ffb84d}
:is(.rk-podio,.rk-palco-largo)~.rankings-lista .rankings-pos{text-align:center;color:#8f97aa}
:is(.rk-podio,.rk-palco-largo)~.rankings-lista .rankings-nome{display:flex;align-items:baseline;gap:8px}
:is(.rk-podio,.rk-palco-largo)~.rankings-lista .rankings-nome small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-width:520px){
  .rk-podio{gap:6px}
  .rk-destaques{grid-template-columns:1fr}
}
/* CINCO ABAS NO CELULAR (aba Resets, 01/10): duas por linha deixava a 5ª sozinha
   numa linha inteira. Grade de 6 colunas: as 3 primeiras ocupam 2 cada (uma
   linha), as 2 últimas ocupam 3 cada (outra linha). Com o texto grande (Opções
   130%) o nome quebra em duas linhas dentro da aba, nunca vaza. */
@media (max-width:620px){
  .rankings-abas{display:grid;grid-template-columns:repeat(6,minmax(0,1fr))}
  .rankings-aba{grid-column:span 2;padding:9px 4px;letter-spacing:.4px;line-height:1.2;overflow-wrap:anywhere}
  .rankings-aba:nth-child(n+4):nth-last-child(-n+2){grid-column:span 3}
}

/* ============================================================================
   VER RECOMPENSAS (03/10, 0340) — botão no topo da tela e os cartões de prêmio.
   Os textos encolhem (letraQueCabe) e quebram linha: nada sai da caixa.
   ========================================================================== */
.rankings-topo{display:flex;justify-content:flex-end}
.rk-rc-botao{display:inline-flex;align-items:center;gap:8px;max-width:100%;min-width:0;padding:8px 14px;border:1px solid #c2912f;border-radius:10px;
  background:linear-gradient(180deg,#2a2213,#1a150b);color:#ffd27a;font-weight:900;letter-spacing:.5px;font-size:calc(11px * var(--text-scale,1))}
.rk-rc-botao img{width:24px;height:24px;object-fit:contain;flex:0 0 auto}
.rk-rc-botao span{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rk-rc-botao.active,.rk-rc-botao:hover{background:var(--botao-ouro-fundo);color:var(--botao-ouro-texto);filter:none}
.rk-rc{display:grid;gap:10px;min-width:0}
.rk-rc-topo{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}
.rk-rc-topo .rankings-titulo{margin:0;min-width:0}
.rk-rc-voltar{padding:6px 12px;border:1px solid #3f4657;border-radius:8px;background:#151820;color:#c9cfdb;font-weight:800;font-size:calc(10px * var(--text-scale,1))}
.rk-rc-nota{margin:0;color:#9aa3b5;font-size:calc(11px * var(--text-scale,1));line-height:1.4}
.rk-rc-grade{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:10px;max-height:min(64vh,620px);overflow-y:auto;padding-right:4px}
.rk-rc-cartao{display:grid;align-content:start;gap:8px;min-width:0;padding:10px 12px;border:1px solid #2c313d;border-radius:10px;background:rgba(0,0,0,.32)}
.rk-rc-cartao header{display:flex;align-items:flex-start;gap:8px;min-width:0}
.rk-rc-cartao header .col-icone{display:inline-grid;place-items:center;width:28px;height:28px;flex:0 0 28px;font-style:normal;font-size:20px;line-height:1}
.rk-rc-cartao header .col-icone-img{width:100%;height:100%;object-fit:contain}
.rk-rc-cartao header div{min-width:0}
.rk-rc-cartao h4{margin:0;color:#ffb84d;font-size:calc(12.5px * var(--text-scale,1));line-height:1.25;overflow-wrap:anywhere}
.rk-rc-cartao p{margin:2px 0 0;color:#8f97aa;font-size:calc(10.5px * var(--text-scale,1));line-height:1.35;overflow-wrap:anywhere}
.rk-rc-linhas{display:grid;gap:5px}
.rk-rc-linha{display:grid;grid-template-columns:minmax(64px,auto) minmax(0,1fr);align-items:center;gap:8px;padding:6px 8px;border-radius:7px;background:rgba(255,255,255,.035)}
.rk-rc-linha:first-child{background:rgba(255,184,77,.10)}
.rk-rc-pos{color:#ffd27a;font-weight:900;font-size:calc(11px * var(--text-scale,1));white-space:nowrap}
.rk-rc-premio{display:flex;flex-wrap:wrap;gap:4px 10px;min-width:0}
.rk-rc-chip{display:inline-flex;align-items:center;gap:4px;min-width:0;max-width:100%;color:#e8ebf2;font-size:calc(11px * var(--text-scale,1))}
.rk-rc-chip .col-icone,.rk-rc-ic{display:inline-grid;place-items:center;width:18px;height:18px;flex:0 0 18px;font-style:normal;line-height:1;object-fit:contain}
.rk-rc-chip .col-icone-img{width:100%;height:100%;object-fit:contain}
.rk-rc-nome{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.rk-rc-titulo{gap:5px;padding:1px 7px;border:1px solid rgba(255,184,77,.45);border-radius:999px;background:rgba(255,184,77,.08)}
.rk-rc-titulo span{color:#c9a15d;font-size:calc(10px * var(--text-scale,1))}
.rk-rc-titulo b{color:#ffd27a;min-width:0;overflow-wrap:break-word;line-height:1.25}
@media (max-width:520px){
  .rankings-topo{justify-content:stretch}
  .rk-rc-botao{width:100%;justify-content:center}
  .rk-rc-grade{max-height:none;overflow:visible;padding-right:0}
}
/* 0341: "Hoje!" do evento Coliseu em dobro. */
.rk-rc-valendo{color:#8fe3b3;white-space:nowrap}
/* Painel de recompensas limpo (03/10): topo curto, faixa do evento, abas (A) ou cartões curtos (B). */
.rk-rc-limpo .rk-rc-topo{flex-wrap:nowrap}
.rk-rc-limpo .rk-rc-topo .rankings-titulo{flex:1 1 auto}
.rk-rc-carta{color:#9aa3b5;font-size:calc(10.5px * var(--text-scale,1));white-space:nowrap}
.rk-rc-faixa-evento{display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px;padding:7px 10px;border:1px solid #c9a24a;border-radius:9px;background:linear-gradient(90deg,rgba(201,162,74,.22),rgba(201,162,74,.06));color:#f3e3b8;font-size:calc(11px * var(--text-scale,1))}
.rk-rc-fe-tit b{color:#ffd27a}
.rk-rc-fe-dias{color:#c9b98e}
.rk-rc-fe-pres{display:inline-flex;flex-wrap:wrap;align-items:center;gap:4px 8px;margin-left:auto}
.rk-rc-fe-pres>span:not(.rk-rc-chip){color:#e8dcb8;font-weight:800}
.rk-rc-valendo{font-style:normal;color:#8fe3b3;font-weight:900}
.rk-rc-curto header{align-items:center;flex-wrap:wrap}
.rk-rc-curto header h4{flex:1 1 auto}
.rk-rc-quando-chip{color:#8f97aa;font-size:calc(10.5px * var(--text-scale,1))}
.rk-rc-3{grid-template-columns:minmax(58px,auto) minmax(0,1fr) minmax(0,1.3fr)}
.rk-rc-cab{background:none!important;padding-top:0;padding-bottom:0;color:#8f97aa;font-size:calc(10px * var(--text-scale,1));font-weight:800;text-transform:uppercase;letter-spacing:.04em}
.rk-rc-cab:first-child{background:none}
.rk-rc-3:nth-child(2){background:rgba(255,184,77,.10)}
.rk-rc-nada{color:#5d6475;font-style:normal}
@media (max-width:520px){
  .rk-rc-carta{display:none}
  .rk-rc-fe-pres{margin-left:0}
}
/* ============================================================================
   TOPO NOVO DA TELA (04/10): cabeçalho com o ícone de Rankings + botão, e as
   abas com a arte dos ícones rank_* grande, em brasões (B, escolha do autor).
   ========================================================================== */
#rankingsView.rk-topo-novo>.menu-page-header{display:none}
.rk-cabeca{display:flex;align-items:center;justify-content:space-between;gap:12px;min-width:0;padding:12px 16px;border:1px solid #3a3222;border-radius:14px;
  background:radial-gradient(120% 140% at 0% 0%,rgba(201,162,74,.20),transparent 60%),linear-gradient(180deg,#1b1a17,#121318)}
.rk-cab-tit{display:flex;align-items:center;gap:12px;min-width:0}
.rk-cab-ic{display:inline-grid;place-items:center;width:46px;height:46px;flex:0 0 46px}
.rk-cab-ic .col-icone{display:grid;place-items:center;width:100%;height:100%;font-style:normal;font-size:34px;line-height:1}
.rk-cab-ic .col-icone-img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 2px 6px rgba(0,0,0,.6))}
.rk-cab-tit small{display:block;color:#c9a15d;font-size:calc(9.5px * var(--text-scale,1));font-weight:900;letter-spacing:2px;text-transform:uppercase}
.rk-cab-tit h2{margin:0;color:#f4e6c3;font-family:Georgia,"Times New Roman",serif;font-size:calc(24px * var(--text-scale,1));line-height:1.1}
.rk-nav{display:grid;grid-template-columns:repeat(var(--n,5),minmax(0,1fr));gap:6px;min-width:0}
.rk-nav-aba{display:flex;align-items:center;justify-content:center;gap:8px;min-width:0;border:0;background:none;color:#9aa3b5;font-weight:900;
  font-size:calc(11px * var(--text-scale,1));letter-spacing:.4px;filter:none}
.rk-nav-ic{display:inline-grid;place-items:center;flex:0 0 auto}
.rk-nav-ic .col-icone{display:grid;place-items:center;width:100%;height:100%;font-style:normal;line-height:1}
.rk-nav-ic .col-icone-img{width:100%;height:100%;object-fit:contain}
.rk-nav-txt{min-width:0;line-height:1.15;overflow-wrap:anywhere;text-align:center}
/* B: brasões — ícone grande em cima, nome embaixo, a ativa com borda e brilho dourado. */
.rk-nav-B .rk-nav-aba{flex-direction:column;gap:5px;padding:10px 4px 9px;border:1px solid #2a2f3b;border-radius:12px;background:linear-gradient(180deg,#191c24,#111318)}
.rk-nav-B .rk-nav-ic{width:52px;height:52px}
.rk-nav-B .rk-nav-ic .col-icone{font-size:36px}
.rk-nav-B .rk-nav-aba:hover{border-color:#4a4330}
.rk-nav-B .rk-nav-aba:not(.active) .rk-nav-ic{filter:saturate(.75) brightness(.85)}
.rk-nav-B .rk-nav-aba.active{border-color:#c9a24a;color:#ffd27a;background:radial-gradient(90% 70% at 50% 30%,rgba(255,190,80,.22),transparent 70%),linear-gradient(180deg,#221d12,#14120c);
  box-shadow:0 0 0 1px rgba(201,162,74,.35),0 6px 18px rgba(201,162,74,.18)}
@media (max-width:620px){
  .rk-cabeca{flex-wrap:wrap;padding:10px 12px}
  .rk-cabeca .rk-rc-botao{width:100%;justify-content:center}
  .rk-cab-ic{width:38px;height:38px;flex-basis:38px}
  .rk-nav{gap:4px}
  .rk-nav-aba{font-size:calc(9.5px * var(--text-scale,1));letter-spacing:0}
  .rk-nav-B .rk-nav-aba{padding:8px 2px 7px;border-radius:10px}
  .rk-nav-B .rk-nav-ic{width:34px;height:34px}
}
/* ============================================================================
   RESETS DO DIA + CAIXA DOS REIS (04/10, 0500): a chave Hoje/Geral da aba
   Resets e as linhas da caixa no painel de recompensas.
   ========================================================================== */
/* Ajuda "Como funciona" (06/10): mora ao lado do título do ranking, sem cartão fixo. */
.rk-tit-linha{position:relative;display:flex;align-items:center;flex-wrap:wrap;gap:4px 8px;margin:0 0 4px;min-width:0}
.rk-tit-linha .rankings-titulo{margin:0;min-width:0}
.rk-ajuda-btn{flex:0 0 auto;display:inline-grid;place-items:center;width:calc(24px * var(--text-scale,1));height:calc(24px * var(--text-scale,1));padding:0;border:1px solid #8a6a2c;border-radius:50%;background:#1a1710;color:#e3b65a;font:900 calc(12px * var(--text-scale,1))/1 inherit;line-height:1;overflow:hidden;cursor:var(--cur-mao,pointer)} /* 26/10: 24 px (era 20) e o ? não vaza a 130% */
.rk-ajuda-btn:hover,.rk-ajuda-btn.active{background:var(--botao-ouro-fundo);color:var(--botao-ouro-texto);border-color:var(--botao-ouro-borda)}
.rk-ajuda-balao{position:absolute;top:calc(100% + 6px);left:0;z-index:30;display:grid;gap:5px;width:min(360px,100%);padding:9px 12px;border:1px solid #6b5426;border-radius:10px;background:#16130d;box-shadow:0 8px 24px rgba(0,0,0,.55);color:#c3c9d6;font-size:calc(11.5px * var(--text-scale,1));line-height:1.45;overflow-wrap:anywhere}
.rk-ajuda-balao b{color:#e3b65a;font-size:calc(10px * var(--text-scale,1));letter-spacing:.06em;text-transform:uppercase}
.rk-resets-chave{display:inline-flex;align-self:flex-start;margin:0 0 8px;padding:3px;border:1px solid #3a3222;border-radius:999px;background:#12141a}
.rk-resets-chave button{min-width:84px;padding:6px 16px;border:0;border-radius:999px;background:none;color:#9aa3b5;font-weight:900;font-size:calc(11.5px * var(--text-scale,1))}
.rk-resets-chave button.active{background:var(--botao-ouro-fundo);color:var(--botao-ouro-texto)}
.rk-rc-resets{grid-column:1/-1}
.rk-rc-sub{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;margin:4px 0 2px;color:#e6d3a3;font-weight:800;font-size:calc(11px * var(--text-scale,1))}
.rk-rc-nota-curta{margin:0 0 4px;color:#8f97aa;font-size:calc(10.5px * var(--text-scale,1))}
.rk-rc-caixa{gap:6px;padding:2px 9px 2px 3px;border:1px solid #c9a24a;border-radius:999px;background:rgba(201,162,74,.12)}
.rk-rc-caixa .rk-rc-ic{width:24px;height:24px;flex-basis:24px}
.rk-rc-caixa b{color:#ffd27a;white-space:nowrap}
/* 1705: no celular estreito com texto grande, o nome da caixa quebra a linha em vez de vazar */
@media (max-width:420px){.rk-rc-caixa{max-width:100%;min-width:0}.rk-rc-caixa b{white-space:normal;min-width:0}
  .rk-rc-titulo{flex-wrap:wrap;border-radius:10px}.rk-rc-titulo b{min-width:auto}}
.rk-rc-caixa-prata{border-color:#aeb6c4;background:rgba(174,182,196,.10)}
.rk-rc-caixa-prata b{color:#dfe5ef}
.rk-rc-caixa-prata .rk-rc-ic{filter:grayscale(1) brightness(1.25)}
.rk-rc-caixa-bronze{border-color:#b07a4a;background:rgba(176,122,74,.10)}
.rk-rc-caixa-bronze b{color:#e8b88a}
.rk-rc-caixa-bronze .rk-rc-ic{filter:sepia(1) saturate(1.6) hue-rotate(-15deg) brightness(.9)}
.rk-rc-chance{color:#9aa3b5;font-size:calc(10.5px * var(--text-scale,1));white-space:nowrap}
.rk-rc-chance b{color:#e8ebf2}
.rk-rc-caixa-linha .rk-rc-premio{align-items:center}
/* 0501: a caixa curta (Coliseu e Guildas): só o baú com a dica, e as faixas de joias ao lado. */
.rk-rc-caixa-mini{padding:1px 6px 1px 2px;cursor:var(--cur-seta,help)}
.rk-rc-caixa-mini .rk-rc-ic{width:22px;height:22px;flex-basis:22px}
.rk-rc-raro{font-style:normal;font-weight:900;color:#ffd27a;font-size:calc(9.5px * var(--text-scale,1));white-space:nowrap}

/* Moldura também do 9º para baixo (06/10, autor: "molduras ainda não aparecem abaixo do top 8"):
   rosto de 30px e a moldura passa um pouco da linha, sem engordar a lista. */
.rankings-linha .cj-avatar{margin:5px 6px}
.rankings-linha .cj-avatar .cj-moldura{width:150%;height:150%}
/* RETRATO MAIOR DENTRO DA MOLDURA (07/10, ?v=845): as molduras novas têm a abertura maior (~66% da arte, antes ~55%);
   com moldura o rosto cresce 22% (11% para cada lado; 14% ainda sobrava espaço) e preenche a abertura. A moldura não muda de tamanho.
   Nas linhas do 9º para baixo a moldura já é 150% e a abertura cobre o rosto: lá fica como está. */
/* O fundo escuro do retrato cresce junto com o rosto (autor 07/10: "tem um quadrado atrás que não foi junto"). */
.cj-avatar.cj-com-moldura{background:transparent;box-shadow:none}
.cj-avatar.cj-com-moldura>.perfil-rosto{scale:1.22;background:radial-gradient(circle at 50% 35%,#2b3040,#12141b)}
.rankings-linha .cj-avatar.cj-com-moldura>.perfil-rosto{scale:none}
/* 1320 (Ranking Rewards 2.0): quando fecha, o prêmio da sua posição agora e o Hall dos Campeões. */
.rk-fecha{margin:-2px 0 4px;color:#9aa3b5;font-size:calc(10.5px * var(--text-scale,1));line-height:1.35;overflow-wrap:anywhere}
.rk-premio-agora{flex:0 1 auto;min-width:0;color:#8fe3b3;font-size:calc(10px * var(--text-scale,1));white-space:normal;overflow-wrap:anywhere;text-align:right}
.rk-cab-botoes{display:flex;gap:8px;min-width:0;flex-wrap:wrap;justify-content:flex-end}
.rk-campeoes-botao span:first-child{font-size:calc(16px * var(--text-scale,1))}
@media (max-width:520px){
  .rk-cab-botoes{width:100%;flex-wrap:nowrap}
  .rk-cab-botoes .rk-rc-botao{flex:1 1 0;width:auto}
  .rk-voce-faixa{flex-wrap:wrap}
}
/* 1323: níveis e média embaixo da superação (Resets de hoje) */
.rk-valor-extra{display:block;max-width:100%;color:var(--text-muted,#9aa3b2);font-size:calc(10.5px * var(--text-scale,1));line-height:1.2;overflow-wrap:anywhere}
#rankingsView .rk-podio-det.rk-extra{white-space:normal;text-overflow:clip;overflow:visible;line-height:1.2}
/* ============================================================================
   PÓDIO PRIMEIRO (22/10, autor: "pra eu ver ele, preciso rolar pra baixo [...] e olha
   o tanto de espaço nas laterais"). Plano aprovado ("recomendados"):
   - cabeçalho numa linha: título, abas e botões (no celular, as abas viram uma faixa
     que desliza para o lado e os botões ficam só com o ícone);
   - chave, título, "?" e "fecha em" numa linha fina (rk-barra);
   - no PC largo, a sua posição à esquerda e do 4º ao 10º à direita do pódio.
   ========================================================================== */
#rankingsView .rk-cabeca{flex-wrap:nowrap;gap:10px;padding:8px 12px}
#rankingsView .rk-cab-tit{flex:0 0 auto;gap:8px}
#rankingsView .rk-cab-ic{width:34px;height:34px;flex-basis:34px}
#rankingsView .rk-cab-tit small{display:none}
#rankingsView .rk-cab-tit h2{font-size:calc(19px * var(--text-scale,1))}
#rankingsView .rk-cabeca .rk-nav{flex:1 1 auto;display:flex;gap:4px;min-width:0;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;overscroll-behavior-x:contain}
#rankingsView .rk-cabeca .rk-nav::-webkit-scrollbar{display:none}
#rankingsView .rk-cabeca .rk-nav-B .rk-nav-aba{flex:1 0 auto;flex-direction:row;gap:5px;padding:5px 9px;border-radius:9px;white-space:nowrap}
#rankingsView .rk-cabeca .rk-nav-B .rk-nav-ic{width:24px;height:24px}
#rankingsView .rk-cabeca .rk-nav-B .rk-nav-ic .col-icone{font-size:18px}
#rankingsView .rk-cabeca .rk-nav-txt{overflow-wrap:normal;white-space:nowrap}
#rankingsView .rk-cab-botoes{flex:0 0 auto;flex-wrap:nowrap;gap:6px}
#rankingsView .rk-cabeca .rk-rc-botao{width:auto;padding:5px 10px;gap:6px}
#rankingsView .rk-cabeca .rk-rc-botao img{width:22px;height:22px}
.rk-barra{display:flex;align-items:center;flex-wrap:wrap;gap:4px 10px;min-width:0}
.rk-barra .rk-resets-chave{margin:0}
.rk-barra .rk-tit-linha{margin:0}
/* 29/10 (print do autor, "texto da ajuda dos rankings totalmente quebrado"): ao lado de "Corrida do dia | Geral" a linha do
   título só tem o "?" (o título fica escondido), e o balão, com largura de até 100% dessa linha, virava uma coluna de uma
   letra. O balão agora se mede pela barra inteira. */
.rk-barra{position:relative}
.rk-barra .rk-tit-linha{position:static}
.rk-barra .rk-fecha{margin:0 0 0 auto}
.rk-palco-largo{display:block;min-width:0}
.rk-barra-eu,#rankingsView .rk-destaque.rk-fila-9e10{display:none}
/* Selos do VIP e do PATRONO: linha própria, nunca cortados pelo "…" do nome (25/10). */
.rk-selos{display:flex;flex-wrap:wrap;align-items:center;gap:3px;min-width:0;line-height:1}
.rk-selos .col-patrono-selo,.rk-selos .col-vip-em-lado{margin-left:0}
.rk-destaque .rk-selos{justify-content:center}
/* Até 1180px os botões ficam só com o ícone (o nome no "title") para as abas caberem na mesma linha. */
@media (max-width:1180px){
  #rankingsView .rk-cabeca .rk-bt-txt,#rankingsView .rk-cabeca .rk-gl-nome{display:none}
  #rankingsView .rk-cabeca .rk-rc-botao{padding:5px 8px}
}
@media (max-width:620px){
  #rankingsView .rk-cabeca{flex-wrap:wrap}
  #rankingsView .rk-cabeca .rk-nav{order:3;flex:1 0 100%}
  #rankingsView .rk-cab-tit{flex:1 1 auto}
  #rankingsView .rk-cabeca{gap:6px;padding:6px 8px}
  #rankingsView .rk-cab-ic{width:28px;height:28px;flex-basis:28px}
  #rankingsView .rk-cab-tit h2{font-size:calc(16px * var(--text-scale,1))}
  #rankingsView .rk-cabeca .rk-rc-botao{width:auto;padding:4px 8px}
  #rankingsView .rk-cabeca .rk-bt-txt,#rankingsView .rk-cabeca .rk-gl-nome{display:none}
  #rankingsView .rk-cabeca .rk-nav-B .rk-nav-aba{padding:5px 8px}
  #rankingsView .rk-cabeca .rk-nav-B .rk-nav-ic{width:22px;height:22px}
  #rankingsConteudo{gap:8px}
  #rankingsView .rankings-corpo{padding:10px}
  .rk-barra .rk-fecha{margin-left:0}
}
/* PC largo (25/10, escolha C do autor): pódio no meio e a fileira de honra do 4º ao 10º logo embaixo;
   a sua posição numa etiqueta na barra de cima. */
@media (min-width:1100px){
  #rankingsConteudo{max-width:1240px}
  #rankingsView .rk-palco-largo~.rankings-lista .rankings-linha.rk-ate10,#rankingsView .rk-palco-largo~.rk-voce-faixa{display:none}
  #rankingsView .rk-destaque.rk-fila-9e10{display:flex}
  #rankingsView .rk-palco-largo~.rk-destaques{grid-template-columns:repeat(7,minmax(0,1fr));gap:8px;margin-top:2px;padding:0}
  #rankingsView .rk-palco-largo~.rk-destaques .rk-destaque{padding:7px 6px 9px}
  #rankingsView .rk-palco-largo~.rk-destaques .rk-destaque .cj-avatar{margin:calc(50px * .2) 0 calc(50px * .16)}
  .rk-barra-eu{display:inline-flex;align-items:baseline;flex-wrap:wrap;gap:2px 6px;padding:4px 10px;border:1px solid #c9a24a;border-radius:999px;
    background:#17140d;color:#c9a15d;font-weight:800;font-size:calc(10.5px * var(--text-scale,1))}
  .rk-barra-eu strong{color:#ffd24d;font-size:calc(13px * var(--text-scale,1))}
  .rk-barra-eu b{color:#f2f2f2}
  .rk-barra-eu.fora{border-style:dashed;border-color:#4b505c;background:transparent;color:#8f97aa;font-weight:700}
  .rk-barra .rk-fecha+.rk-barra-eu{margin-left:0}
  .rk-barra .rk-barra-eu{margin-left:auto}
}
/* Sem rolagem dupla (22/10, mesmo padrão das outras telas): a lista cresce e quem rola é a página. */
#rankingsView .rankings-lista{max-height:none;overflow:visible;padding-right:0}
@media (max-width:620px){
  #rankingsView .rk-cab-botoes{width:auto;flex:0 0 auto}
  #rankingsView .rk-cab-botoes .rk-rc-botao{flex:0 0 auto}
}
/* Celular deitado: pouca altura, tudo mais baixo para o pódio começar na primeira tela. */
@media (max-height:500px) and (max-width:1100px){
  #rankingsView .rk-cabeca{padding:4px 8px}
  #rankingsView .rk-cab-ic{width:26px;height:26px;flex-basis:26px}
  #rankingsView .rk-cab-tit h2{font-size:calc(15px * var(--text-scale,1))}
  #rankingsView .rk-cabeca .rk-nav-B .rk-nav-aba{padding:3px 8px}
  #rankingsView .rk-cabeca .rk-nav-B .rk-nav-ic{width:20px;height:20px}
  #rankingsView .rankings-corpo{padding:8px 10px}
  #rankingsConteudo{gap:6px}
  #rankingsView .rk-palco{height:130px}
  #rankingsView .rk-lugar-1 .rk-palco{height:160px}
  /* a faixa "Sua posição" presa no rodapé cobria o pódio: deitado, ela fica no fim da lista */
  #rankingsView .rk-voce-faixa{position:static}
}
/* 26/10 (auditoria Android): deitado (800x360) o Corvo do Dark Lord do pódio voava por cima das abas
   (Resets · Coliseu · Gens…). A cabeça da tela (título + abas) fica na frente do palco. */
.rk-cabeca,.rankings-abas{position:relative;z-index:4}
/* 2051 (29/10, escolha A do autor): "Ver top 100" / "Ver top 500" no fim da lista e a janela com a lista simples
   (só texto: posição, nome, classe e o número). Fica na frente da barra de baixo do Android e do botão de Ajuda. */
.rk-top-mais{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:14px 0 6px}
.rk-top-mais button,.rk-top-pe button{min-height:36px;padding:7px 18px;border:1px solid #e3b65a;border-radius:999px;background:#1b1610;color:#ffd56a;
  font-weight:900;font-size:calc(12px * var(--text-scale,1));cursor:var(--cur-mao,pointer)}
.rk-top-mais button:hover,.rk-top-pe button:hover{filter:brightness(1.15)}
.rk-top-veu{position:fixed;inset:0;z-index:10040;display:grid;place-items:center;background:rgba(0,0,0,.62);
  padding:max(10px,env(safe-area-inset-top,0px)) max(10px,env(safe-area-inset-right,0px)) max(10px,env(safe-area-inset-bottom,0px)) max(10px,env(safe-area-inset-left,0px))}
.rk-top-janela{display:flex;flex-direction:column;width:min(560px,100%);max-height:min(86dvh,760px);border-radius:14px;
  border:1px solid rgba(255,207,74,.45);background:#0d0f14;color:#dfe3ea;box-shadow:0 10px 40px rgba(0,0,0,.6);overflow:hidden}
.rk-top-cab{display:flex;align-items:center;gap:10px;padding:10px 12px 8px 14px;border-bottom:1px solid #232835}
.rk-top-cab h3{flex:1 1 auto;min-width:0;margin:0;color:#ffe08a;font-size:calc(14px * var(--text-scale,1));overflow-wrap:anywhere}
.rk-top-fechar{flex:0 0 auto;width:36px;height:36px;border-radius:50%;border:1px solid #3a3f4c;background:#171a22;color:#cfd4dd;font-size:16px;cursor:var(--cur-mao,pointer)}
.rk-top-corpo{flex:1 1 auto;min-height:0;overflow:auto;overscroll-behavior:contain;padding:4px 10px}
.rk-top-tabela{width:100%;border-collapse:collapse;font-size:calc(12.5px * var(--text-scale,1));font-variant-numeric:tabular-nums}
.rk-top-tabela td{padding:6px 6px;border-bottom:1px solid #1d212b;vertical-align:middle}
.rk-top-pos{width:1%;white-space:nowrap;color:#ffd56a;font-weight:900}
.rk-top-nome{min-width:0}
.rk-top-nome b{display:block;color:#eef2f7;overflow-wrap:anywhere}
.rk-top-nome small{display:block;color:#8e95a5;font-size:calc(10.5px * var(--text-scale,1))}
.rk-top-valor{width:1%;white-space:nowrap;text-align:right;color:#ffd98a;font-weight:800}
.rk-top-voce td{background:rgba(255,207,74,.12)}
.rk-top-pe{display:flex;justify-content:center;padding:8px}
.rk-top-pe:empty{display:none}
/* 2490 (31/10, abas por Reset): a mesma pílula da chave "Corrida do dia | Geral", em classe própria para o título do
   Blood Castle não sumir (a regra :has(.rk-resets-chave) esconde o título). Rola de lado no celular estreito. */
.rk-faixas-chave{display:inline-flex;align-self:flex-start;max-width:100%;overflow-x:auto;scrollbar-width:none;margin:0;padding:3px;border:1px solid #3a3222;border-radius:999px;background:#12141a}
.rk-faixas-chave::-webkit-scrollbar{display:none}
.rk-faixas-chave button{flex:0 0 auto;padding:6px 12px;border:0;border-radius:999px;background:none;color:#9aa3b5;font-weight:900;font-size:calc(11.5px * var(--text-scale,1));white-space:nowrap}
.rk-faixas-chave button.active{background:var(--botao-ouro-fundo);color:var(--botao-ouro-texto)}
/* Celular estreito (360 com texto grande): as 4 abas quebram em duas linhas em vez de cortar a última. */
@media (max-width:480px){
  .rk-faixas-chave{flex-wrap:wrap;overflow:visible;border-radius:16px}
  .rk-faixas-chave button{padding:6px 10px}
}
/* ABAS NA LINHA DE BAIXO (03/11, escolha 1 do autor: "notei que tem rank sendo escondido pelos botões da loja e recompensas").
   Glória, Campeões e Ver recompensas dividiam a linha com as abas e empurravam Caçadores (e mais) para fora. Agora: título e
   botões em cima, as abas numa linha só delas dividindo a largura. No celular (até 620px) continua a faixa que desliza. */
#rankingsView .rk-cabeca.rk-cabeca-2l{flex-wrap:wrap;row-gap:8px}
#rankingsView .rk-cabeca-2l .rk-cab-tit{flex:1 1 auto}
#rankingsView .rk-cabeca-2l .rk-nav{order:3;flex:1 0 100%}
@media (min-width:621px){
  #rankingsView .rk-cabeca-2l .rk-nav-B .rk-nav-aba{flex:1 0 auto;justify-content:center}
  #rankingsView .rk-cabeca-2l .rk-bt-txt,#rankingsView .rk-cabeca-2l .rk-gl-nome{display:inline}
}
/* O filtro por Reset (03/11, "o que é esse TODOS?"): "Todos os Resets" | POR RESET | as faixas; a sua faixa com contorno. */
.rk-faixas-chave{align-items:center}
.rk-faixas-sep{flex:0 0 auto;margin:0 4px 0 8px;padding-left:10px;border-left:1px solid #3a3222;color:#7f8798;font-size:calc(10px * var(--text-scale,1));font-weight:800;text-transform:uppercase;letter-spacing:.5px;white-space:nowrap}
.rk-faixas-chave button.rk-faixa-minha:not(.active){box-shadow:inset 0 0 0 1px #c9a24a;color:#f0d79a}
/* 05/11 (escolha C): Corrida do dia e Mais Resets viraram abas; embaixo do título, a frase do que cada uma conta. */
.rk-tit-frase{margin:0;color:#aeb5c4;font-size:calc(12.5px * var(--text-scale,1));line-height:1.4}
/* 06/11 (autor: "esse painel é complexo e bagunçado", opção A): um ranking por vez, com abas de arte, e só a sua aba de Reset */
.rk-rc-abas{display:flex;gap:6px;overflow-x:auto;padding-bottom:2px;scrollbar-width:thin}
.rk-rc-aba{display:inline-flex;align-items:center;gap:6px;flex:0 0 auto;padding:6px 11px;border:1px solid #2c313d;border-radius:9px;background:#1b1f28;color:#9aa3b5;
  font-weight:800;font-size:calc(12.5px * var(--text-scale,1));cursor:var(--cur-mao,pointer)}
.rk-rc-aba .rk-nav-ic{width:22px;height:22px}
.rk-rc-aba.active{border-color:#8a6a25;background:#2a2312;color:#ffb84d}
.rk-rc-aba:focus-visible{outline:2px solid #ffb84d;outline-offset:1px}
.rk-rc-uma .rk-rc-grade{grid-template-columns:1fr;max-height:none;overflow:visible;padding-right:0}
.rk-rc-sua{color:#ffb84d}
.rk-rc-carta{display:inline-flex;align-items:center;gap:5px}.rk-rc-carta .col-icone{display:inline-grid;place-items:center;width:18px;height:18px;font-style:normal}.rk-rc-carta .col-icone-img{width:100%;height:100%;object-fit:contain}

/* ============================================================================
   RANKINGS MAIS CLAROS (06/11, autor: "achei tudo meio confuso", escolha C). Cada ranking montava o topo de
   um jeito (filtro antes do título, título escondido no Coliseu, "?" sozinho). Agora é sempre a mesma ordem:
   nome + "?", a frase do que ele conta, quando fecha, os filtros e a sua posição.
   - PC (1100+): essa barra vira uma coluna à esquerda e o pódio fica à direita; a tela fica mais larga (1500+).
   - Celular: a mesma ordem, empilhada em cima do pódio; a sua posição continua na faixa de baixo.
   Só nos rankings que começam pela barra (Turma e Temporada têm o painel deles antes e ficam como estavam).
   ========================================================================== */
#rankingsView .rk-barra{flex-direction:column;align-items:stretch;flex-wrap:nowrap;gap:8px}
#rankingsView .rk-barra>.rk-tit-linha{order:1;display:flex;align-items:center;gap:10px}
#rankingsView .rk-barra .rankings-titulo{margin:0;color:#ffcf6b;font-size:calc(20px * var(--text-scale,1));line-height:1.15}
#rankingsView .rk-barra>.rk-tit-frase{order:2}
#rankingsView .rk-barra>.rk-fecha{order:3;display:flex;align-items:flex-start;gap:6px;margin:0;font-size:calc(12px * var(--text-scale,1))}
#rankingsView .rk-barra>.rk-faixas-chave,#rankingsView .rk-barra>.rk-resets-chave{order:4;align-self:flex-start;max-width:100%}
#rankingsView .rk-barra>.rk-barra-eu{order:5;margin:0}
@media (min-width:1100px){
  #rankingsView .rankings-corpo:has(>.rk-barra:first-child){grid-template-columns:clamp(240px,22%,300px) minmax(0,1fr);column-gap:20px;row-gap:0;align-items:start}
  #rankingsView .rankings-corpo:has(>.rk-barra:first-child)>*{grid-column:2;margin-bottom:8px}
  #rankingsView .rankings-corpo>.rk-barra:first-child{grid-column:1;grid-row:1/span 12;margin-bottom:0;position:sticky;top:8px;gap:14px;padding:16px;
    border:1px solid #3a3222;border-radius:12px;background:#16140f}
  #rankingsView .rankings-corpo>.rk-barra:first-child .rankings-titulo{font-size:calc(24px * var(--text-scale,1))}
  #rankingsView .rankings-corpo>.rk-barra:first-child>.rk-tit-frase{font-size:calc(13.5px * var(--text-scale,1))}
  #rankingsView .rankings-corpo>.rk-barra:first-child>.rk-fecha{font-size:calc(13px * var(--text-scale,1))}
  #rankingsView .rankings-corpo>.rk-barra:first-child>:is(.rk-faixas-chave,.rk-resets-chave){display:flex;flex-direction:column;align-self:stretch;overflow:visible;border-radius:12px}
  #rankingsView .rankings-corpo>.rk-barra:first-child>:is(.rk-faixas-chave,.rk-resets-chave)>*{width:100%;min-width:0;text-align:left}
  #rankingsView .rankings-corpo>.rk-barra:first-child>:is(.rk-faixas-chave,.rk-resets-chave) button{text-align:left;border-radius:8px;padding:8px 14px;font-size:calc(13px * var(--text-scale,1))}
  #rankingsView .rankings-corpo>.rk-barra:first-child .rk-faixas-sep{padding:8px 14px 2px;border:0;color:#7f8798}
  #rankingsView .rankings-corpo>.rk-barra:first-child>.rk-barra-eu{display:flex;flex-direction:column;align-items:flex-start;gap:3px;padding:12px 16px;border-radius:10px;
    background:#1d180d;font-size:calc(13px * var(--text-scale,1))}
  #rankingsView .rankings-corpo>.rk-barra:first-child>.rk-barra-eu strong{font-size:calc(22px * var(--text-scale,1))}
  #rankingsView .rankings-corpo>.rk-barra:first-child>.rk-barra-eu b{font-size:calc(14px * var(--text-scale,1))}
  #rankingsView .rankings-corpo>.rk-barra:first-child .rk-ajuda-balao{width:min(420px,calc(100vw - 40px))}
  /* até 1500 a coluna da direita é estreita: o 4º ao 10º em duas linhas, para os nomes caberem */
  #rankingsView .rankings-corpo:has(>.rk-barra:first-child) .rk-palco-largo~.rk-destaques{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (min-width:1500px){
  #rankingsConteudo{max-width:1540px}
  #rankingsView .rankings-corpo:has(>.rk-barra:first-child) .rk-palco-largo~.rk-destaques{grid-template-columns:repeat(7,minmax(0,1fr))}
}