/* Rankings (Gameplay): só o que as peças do site (recursos-ui.css) não trazem; portado do mockup aprovado docs/mockups/naruto/rankings.html.
   Letra mínima 15px (regra 18); alinhado (regra 25); feixe de luz (regra 20) e cenário (regra 11). */
#rk-app{display:grid;gap:14px}
#rk-app .num{font-variant-numeric:tabular-nums}
.rk-sub{color:var(--t-low,#7d8898)}
.rk-bloco-top{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.rk-bloco-top .card-title{margin:0}

/* cabeça com cenário */
.rk-cabeca{--faixa:var(--gold,#e3b341);min-height:150px;display:flex;align-items:flex-end}
.rk-cabeca::after{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:var(--faixa);z-index:1}
.rk-fundo{position:absolute;inset:0;width:100%;height:100%;z-index:-3;display:block}
.rk-cabeca>.evx-cortes{z-index:-1}
.rk-cabeca-corpo{position:relative}
.rk-cabeca::before{background:linear-gradient(90deg,rgba(12,15,22,.94) 0%,rgba(12,15,22,.8) 50%,rgba(12,15,22,.35) 100%)!important;z-index:-2}
.rk-et{display:flex;gap:8px;flex-wrap:wrap}
.rk-etq{display:inline-block;font:500 15px var(--mono,monospace);color:var(--t-mid,#a7b0bd);letter-spacing:.03em;border:1px solid var(--border,#29313d);background:var(--s-900,#0c0f16);border-radius:999px;padding:5px 14px;white-space:nowrap;text-decoration:none}
.rk-etq.ouro{color:var(--gold,#e3b341);border-color:var(--gold-line,rgba(227,179,65,.34));background:var(--gold-wash,rgba(227,179,65,.12))}
a.rk-etq.fonte{color:var(--cyan,#4fd1e0);border-color:var(--cyan-line,rgba(79,209,224,.34));background:var(--cyan-wash,rgba(79,209,224,.1))}
a.rk-etq.fonte:hover{background:var(--cyan,#4fd1e0);color:#06222a}
.rk-pisca{animation:rk-piscar 4s ease-in-out infinite}
@keyframes rk-piscar{0%,100%{opacity:.3}50%{opacity:1}}
.rk-folha{fill:#6f8f4a;animation:rk-cair 11s linear infinite;transform-box:fill-box}
@keyframes rk-cair{0%{transform:translate(0,0) rotate(0);opacity:0}8%{opacity:.9}100%{transform:translate(-160px,300px) rotate(260deg);opacity:0}}
@media (prefers-reduced-motion:reduce){.rk-pisca,.rk-folha{animation:none}.rk-folha{opacity:.7}}
.rk-abas{display:flex;gap:8px;flex-wrap:wrap}
.rk-aba{border:1px solid var(--border,#29313d);background:var(--s-800,#141a25);color:var(--t-mid,#a7b0bd);font:600 15px var(--body,Inter,sans-serif);padding:10px 18px;border-radius:10px;display:inline-flex;gap:8px;align-items:center}
.rk-aba.active{border-color:var(--gold-line,rgba(227,179,65,.34));background:var(--gold-wash,rgba(227,179,65,.12));color:var(--gold,#e3b341)}
.rk-aba[disabled]{opacity:.65;cursor:not-allowed}

/* selo de mudança de posição: antes do número */
.rk-mv{display:inline-flex;align-items:center;justify-content:center;gap:4px;min-width:84px;height:28px;padding:0 10px;border-radius:999px;border:1px solid;font:700 15px var(--body,Inter,sans-serif);white-space:nowrap;font-variant-numeric:tabular-nums}
.rk-mv.novo{color:var(--gold,#e3b341);background:var(--gold-wash,rgba(227,179,65,.12));border-color:var(--gold-line,rgba(227,179,65,.34))}
.rk-mv.sobe{color:var(--green,#43c79b);background:rgba(67,199,155,.12);border-color:rgba(67,199,155,.34)}
.rk-mv.desce{color:#ff6b6b;background:rgba(255,107,107,.12);border-color:rgba(255,107,107,.34)}
.rk-mv.igual{color:var(--t-mid,#a7b0bd);background:var(--s-800,#141a25);border-color:var(--border,#29313d)}
.rk-mv.vazio{border-color:transparent;color:var(--t-low,#7d8898)}
.rk-s{font-style:normal;font-weight:700;margin-left:5px}
.rk-s.sobe{color:var(--green,#43c79b)}
.rk-s.desce{color:#ff6b6b}


/* pódio */
.rk-podio{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:14px}
.rk-podio .rk-card{display:flex;--sub:var(--gold,#e3b341);--sub2:#ffd97a;position:relative;overflow:hidden;flex-direction:column;gap:14px;padding:18px;border-radius:13px;color:var(--t-hi,#f0f3f7);
  border:1px solid color-mix(in srgb,var(--sub) 38%,var(--border,#29313d));
  background:radial-gradient(120% 90% at 100% 0%,color-mix(in srgb,var(--sub) 22%,transparent),transparent 60%),radial-gradient(80% 70% at 0% 100%,color-mix(in srgb,var(--sub2) 14%,transparent),transparent 65%),var(--s-900,#0c0f16)}
.rk-podio .rk-card::before{content:"";position:absolute;inset:0 auto 0 0;width:3px;background:linear-gradient(180deg,var(--sub),var(--sub2))}
.rk-podio .p2{--sub:#c9d3e0;--sub2:#7f8da1}
.rk-podio .p3{--sub:var(--or,#ff7a2f);--sub2:#b8581f}
.rk-pod-topo{display:flex;justify-content:space-between;align-items:center;gap:10px;height:34px}
.rk-pod-pos{display:flex;align-items:center;gap:10px}
.rk-pod-pos .n{font:800 28px/1 var(--display,Archivo,sans-serif);color:var(--sub)}
.rk-srv{font:600 15px var(--mono,monospace);color:var(--t-mid,#a7b0bd);border:1px solid var(--border,#29313d);background:var(--s-850,#0f131c);border-radius:8px;padding:3px 10px}
.rk-pod-id{display:flex;gap:14px;align-items:center;height:96px}
.rk-main{width:88px;height:88px;flex:0 0 auto;border-radius:14px;border:1px dashed var(--sub,var(--gold,#e3b341));background:rgba(255,255,255,.03);display:grid;place-items:center;text-align:center;color:var(--t-mid,#a7b0bd)}
.rk-main b{font:800 30px/1 var(--display,Archivo,sans-serif);color:var(--sub,var(--gold,#e3b341));display:block}
.rk-main small{font-size:15px;line-height:1.1;display:block}
.rk-nm{min-width:0}
.rk-nick{font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rk-pod-id .rk-nick{font:700 20px/1.2 var(--display,Archivo,sans-serif);white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;word-break:break-word}
.rk-guilda{color:var(--t-mid,#a7b0bd);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rk-pod-stats{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.rk-stat{background:rgba(9,12,19,.55);border:1px solid var(--border,#29313d);border-radius:10px;padding:10px 12px}
.rk-stat .k{color:var(--t-low,#7d8898);font-size:15px}
.rk-stat .v{font:800 20px/1.2 var(--display,Archivo,sans-serif);font-variant-numeric:tabular-nums}
.rk-btn{border:1px solid var(--line-hi,#3a4759);background:var(--s-800,#141a25);color:var(--t-hi,#f0f3f7);border-radius:10px;font:700 15px var(--body,Inter,sans-serif);height:44px;padding:0 18px;cursor:pointer;white-space:nowrap}
.rk-btn:hover{border-color:var(--cyan-line,rgba(79,209,224,.34));color:var(--cyan,#4fd1e0)}
.rk-pod-btn{margin-top:auto;width:100%}
.rk-podio .p1 .rk-btn{border-color:var(--gold-line,rgba(227,179,65,.34));color:var(--gold,#e3b341)}

/* lista */
.rk-ferr{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-bottom:14px}
.rk-busca{flex:1 1 260px;display:flex;align-items:center;gap:10px;height:44px;padding:0 14px;background:var(--s-950,#090c13);border:1px solid var(--border,#29313d);border-radius:10px}
.rk-busca input{flex:1;min-width:0;background:transparent;border:0;outline:0;color:var(--t-hi,#f0f3f7);font:500 15px var(--body,Inter,sans-serif)}
.rk-busca:focus-within{border-color:var(--cyan-line,rgba(79,209,224,.34));box-shadow:0 0 0 3px var(--cyan-wash,rgba(79,209,224,.1))}
.rk-ord{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.rk-ord span{color:var(--t-low,#7d8898)}
.rk-ord button{border:1px solid var(--border,#29313d);background:var(--s-800,#141a25);color:var(--t-mid,#a7b0bd);font:600 15px var(--body,Inter,sans-serif);padding:8px 14px;border-radius:9px;cursor:pointer}
.rk-ord button.active{background:var(--cyan,#4fd1e0);border-color:var(--cyan,#4fd1e0);color:#06222a}
.rk-lista{border:1px solid var(--border,#29313d);border-radius:12px;overflow:hidden;background:var(--s-900,#0c0f16)}
.rk-lin{display:grid;grid-template-columns:92px 56px minmax(0,1fr) 124px 104px 128px;gap:12px;align-items:center;padding:10px 14px;border-top:1px solid rgba(41,49,61,.7)}
.rk-lin:first-child{border-top:0}
.rk-lin.cab{background:var(--s-800,#141a25);color:var(--t-low,#7d8898);font:500 15px var(--mono,monospace);letter-spacing:.03em}
.rk-lin .c-pos{font:800 20px var(--display,Archivo,sans-serif)}
.rk-lin .c-jog{min-width:0}
.rk-lin .c-f,.rk-lin .c-a{text-align:right;font-weight:600}
.rk-lin .rk-btn{height:38px;width:100%}
.rk-lin .rk-mini{display:none}
.rk-lin:not(.cab):hover{background:rgba(79,209,224,.05)}
.rk-mais{display:flex;justify-content:center;margin-top:14px}
.rk-vazio{padding:28px;text-align:center;color:var(--t-mid,#a7b0bd)}
@media (max-width:1000px){
  .rk-lin{grid-template-columns:92px 48px minmax(0,1fr) 112px}
  .rk-lin .c-f,.rk-lin .c-a,.rk-lin.cab{display:none}
  .rk-lin .rk-mini{display:flex;gap:12px;flex-wrap:wrap;color:var(--t-low,#7d8898)}
  .rk-lin .rk-mini b{font-weight:600;margin-right:4px}
}

/* janelinha de detalhes */
.rk-veu{position:fixed;inset:0;z-index:60;background:rgba(5,7,12,.78);display:none;align-items:flex-start;justify-content:center;padding:28px 16px;overflow:auto}
.rk-veu.on{display:flex}
.rk-jan{position:relative;width:min(820px,100%);background:var(--s-850,#0f131c);border:1px solid var(--line-hi,#3a4759);border-radius:16px;padding:24px;overflow:hidden}
.rk-jan::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:var(--gold,#e3b341)}
.rk-x{position:absolute;top:12px;right:12px;width:40px;height:40px;border-radius:10px;border:1px solid var(--border,#29313d);background:var(--s-800,#141a25);color:var(--t-hi,#f0f3f7);font-size:20px;cursor:pointer}
.rk-x:hover{border-color:rgba(255,107,107,.34);color:#ff6b6b}
.rk-jan h3{font:800 22px/1.2 var(--display,Archivo,sans-serif);margin:0 48px 4px 0}
.rk-jan-topo{display:flex;gap:16px;align-items:center;margin-bottom:18px}
.rk-jan-topo .rk-main{width:72px;height:72px}
.rk-jan-sub{color:var(--t-mid,#a7b0bd)}
.rk-jan-pos{display:flex;gap:10px;align-items:center;margin:8px 0;flex-wrap:wrap}
.rk-jan-pos .n{font:800 24px var(--display,Archivo,sans-serif)}
.rk-jan-tt{font:700 17px var(--display,Archivo,sans-serif);margin:16px 0 10px}
.rk-meses{display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:10px}
.rk-mes{background:var(--s-900,#0c0f16);border:1px solid var(--border,#29313d);border-radius:12px;padding:12px;display:grid;grid-template-rows:auto auto auto auto auto;gap:2px;min-width:0}
.rk-mes.atual{border-color:var(--gold-line,rgba(227,179,65,.34));background:var(--gold-wash,rgba(227,179,65,.12))}
.rk-mes .m{color:var(--t-low,#7d8898)}
.rk-mes .p{font:800 22px var(--display,Archivo,sans-serif)}
.rk-mes .p.vaz{color:var(--t-low,#7d8898)}
.rk-mes .n,.rk-mes .g{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rk-mes .g,.rk-mes .f{color:var(--t-mid,#a7b0bd)}
.rk-attrs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.rk-graficos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.rk-graf{background:var(--s-900,#0c0f16);border:1px solid var(--border,#29313d);border-radius:12px;padding:14px;display:flex;flex-direction:column;gap:6px;min-width:0}
.rk-graf .tt{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap}
.rk-graf .tt b{font:700 17px var(--display,Archivo,sans-serif)}
.rk-graf svg{width:100%;height:auto;display:block}
.rk-graf .nota{color:var(--t-low,#7d8898);min-height:46px}
.rk-ganho{font:800 18px var(--display,Archivo,sans-serif);font-variant-numeric:tabular-nums}
.rk-ganho.pos{color:var(--green,#43c79b)}
.rk-ganho.neg{color:#ff6b6b}
@media (max-width:640px){.rk-attrs{grid-template-columns:repeat(2,minmax(0,1fr))}.rk-graficos{grid-template-columns:1fr}.rk-meses{grid-template-columns:1fr}}
.rk-main.com{border-style:solid;background:radial-gradient(90% 90% at 50% 20%,color-mix(in srgb,var(--sub,var(--gold,#e3b341)) 28%,transparent),rgba(255,255,255,.03));overflow:hidden;padding:0}
.rk-main.com img{width:100%;height:100%;object-fit:cover;object-position:50% 12%;display:block}
/* pódio mais cheio (dono, 10/10/2026, "ficou muito seco"): arte grande do personagem ao fundo e os outros atributos */
.rk-card > *:not(.rk-arte){position:relative;z-index:1}
.rk-arte{position:absolute!important;right:-8px;bottom:0;height:88%;width:auto;max-width:70%;object-fit:contain;object-position:right bottom;opacity:.3;pointer-events:none;z-index:0;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 38%);mask-image:linear-gradient(90deg,transparent 0,#000 38%)}
.rk-pod-mini{display:grid;grid-template-columns:1fr 1fr;gap:6px 18px}
.rk-pod-mini div{display:flex;justify-content:space-between;gap:8px;border-bottom:1px solid rgba(255,255,255,.07);padding-bottom:4px}
.rk-pod-mini span{color:var(--t-low,#7d8898)}
.rk-pod-mini b{font-weight:700}