/* rk-base.css — o ranking e a ficha: os tokens do site (os mesmos do Mix novo),
 * a tipografia, os controles, a dica dos gráficos e o agente dos acertos. O
 * desenho de cada tela fica no rk-faixas.css. */

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{
    --bg:#050507;--bg2:#0a0a0f;--bg3:#111118;--bg4:#16161f;
    --border:#1a1a25;--border2:#252535;
    --text:#eeeef0;--muted:#6b6b80;--muted2:#9595ad;
    --accent:#f5a623;--accent2:#ffc344;
    --green:#2ecc71;--red:#e5484d;--azul:#4a9eff;
    --radius:14px;--radius-sm:8px;
    --texto2:#b9b9c9;--mudo:#8b8ba1;--apagado:#5d5d72;
    --mono:'JetBrains Mono',ui-monospace,monospace;
    --cond:'Barlow Condensed','Inter',sans-serif;
    --sai:cubic-bezier(.23,1,.32,1);
}
html{scrollbar-gutter:stable;scrollbar-color:var(--border2) var(--bg);scrollbar-width:thin}
body{font-family:'Inter',system-ui,sans-serif;background:var(--bg);color:var(--text);min-height:100vh;overflow-x:hidden;
     font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased;animation:pageIn .35s ease-out}
/* A animação global das páginas (a mesma da roleta, do mix e do resto): o body
   entra subindo e sai subindo no clique em link do site (rk-base.js). A cascata
   dos blocos é a do _entrada.php. */
body.page-out{animation:pageOut .25s ease-in forwards}
@keyframes pageIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes pageOut{from{opacity:1;transform:none}to{opacity:0;transform:translateY(-8px)}}
::selection{background:rgba(245,166,35,.3);color:#fff}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
.num{font-family:var(--mono);font-variant-numeric:tabular-nums}
.so-leitor{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* A página: larga, nunca coluna estreita no meio (pedido dele no Mix). */
.rk{position:relative;max-width:1400px;margin:0 auto;padding:6.5rem 2rem 5rem}
.rk-carregando,.rk-vazio{padding:4rem 1rem;text-align:center;color:var(--mudo);font-size:.9rem}

.rk h1{font-size:clamp(2rem,3.2vw,2.75rem);font-weight:800;letter-spacing:-.03em;line-height:1.05}
.rk-sub{color:var(--mudo);font-size:.95rem;margin-top:.45rem}
.rk-sub b{color:var(--text);font-weight:600}
.rk-sub .hoje{color:var(--green)}

/* Controles: busca, ordem e período. */
.rk-busca{position:relative;display:flex;align-items:center}
.rk-busca svg{position:absolute;left:.85rem;width:16px;height:16px;color:var(--muted);pointer-events:none}
.rk-busca input{width:100%;height:40px;background:var(--bg2);border:1px solid var(--border2);border-radius:10px;color:var(--text);
    padding:0 .9rem 0 2.4rem;font:inherit;font-size:.9rem;outline:none;transition:border-color .15s}
.rk-busca input:focus{border-color:var(--accent)}
.rk-busca input::placeholder{color:var(--muted)}
.rk-seg{display:inline-flex;background:var(--bg2);border:1px solid var(--border);border-radius:10px;padding:3px;gap:2px}
.rk-seg button{height:32px;padding:0 .8rem;border-radius:7px;font-size:.84rem;font-weight:500;color:var(--mudo);white-space:nowrap;
    transition:color .15s,background-color .15s}
.rk-seg button:hover{color:var(--text)}
.rk-seg button.on{color:var(--accent);background:rgba(245,166,35,.1);font-weight:600}
.rk-btn{display:inline-flex;align-items:center;gap:.5rem;height:40px;padding:0 1rem;border-radius:10px;font-size:.88rem;font-weight:600;
    background:var(--bg3);border:1px solid var(--border2);color:var(--text);transition:border-color .15s,background-color .15s}
.rk-btn:hover{border-color:var(--accent)}
.rk-btn svg{width:16px;height:16px}
.rk-btn.ouro{background:var(--accent);border-color:var(--accent);color:#14100a}
.rk-btn.ouro:hover{background:var(--accent2)}

/* Quando a pessoa jogou por último. */
.vivo{display:inline-block;width:7px;height:7px;border-radius:50%;flex-shrink:0;background:#34343f}
.vivo.hoje{background:var(--green);box-shadow:0 0 0 3px rgba(46,204,113,.16)}
.vivo.semana{background:var(--accent)}
.vivo.mes{background:#5d5d72}

/* O card do rank do placar do jogo (vem pronto em SVG da API). */
.card-rank{display:block;flex-shrink:0}

/* Paginação. */
.rk-paginas{display:flex;align-items:center;justify-content:center;gap:.4rem;margin-top:1.6rem}
.rk-paginas button{height:36px;min-width:36px;padding:0 .8rem;border-radius:9px;border:1px solid var(--border2);font-size:.85rem;color:var(--texto2);
    transition:border-color .15s,color .15s}
.rk-paginas button:hover:not(:disabled){border-color:var(--accent);color:var(--text)}
.rk-paginas button:disabled{opacity:.35;cursor:default}
.rk-paginas span{font-family:var(--mono);font-size:.8rem;color:var(--mudo);padding:0 .6rem}

/* A dica dos gráficos: segue o mouse, nunca rouba o clique. */
.rk-dica{position:fixed;z-index:200;pointer-events:none;background:#121219;border:1px solid var(--border2);border-radius:9px;
    padding:.55rem .75rem;font-size:.8rem;line-height:1.45;color:var(--texto2);box-shadow:0 10px 28px rgba(0,0,0,.55);
    max-width:260px;transform:translate(-50%,calc(-100% - 12px))}
.rk-dica.lado{transform:none}
.rk-dica b{color:var(--text);font-weight:600}
.rk-dica .num{color:var(--text)}
.rk-dica .rk-dica-t{display:block;color:var(--mudo);font-size:.72rem;margin-bottom:.15rem}

/* A curva dos pontos: passar o mouse num dia mostra a guia, o ponto e a dica. */
.rk-curva{display:block;width:100%;height:220px;overflow:visible}
.rk-curva .rk-linha{fill:none;stroke:var(--cor);stroke-width:2.2;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke}
/* Os pontos são linhas de comprimento zero com ponta redonda: continuam redondos
   quando o gráfico estica na largura. */
.rk-curva .rk-fim,.rk-curva .rk-ponto,.rk-curva .rk-ponto-meio{stroke-linecap:round;vector-effect:non-scaling-stroke}
.rk-curva .rk-fim{stroke:var(--cor);stroke-width:10}
.rk-curva .rk-rotulos text{font-family:var(--mono);font-size:11px;fill:var(--muted)}
.rk-curva .rk-guia{stroke:rgba(255,255,255,.22);stroke-width:1;stroke-dasharray:3 3;opacity:0;vector-effect:non-scaling-stroke}
.rk-curva .rk-ponto{stroke:var(--cor);stroke-width:12;opacity:0}
.rk-curva .rk-ponto-meio{stroke:var(--bg);stroke-width:6;opacity:0}
.rk-curva .rk-col:hover .rk-guia,.rk-curva .rk-col:hover .rk-ponto,.rk-curva .rk-col:hover .rk-ponto-meio{opacity:1}

/* O agente do CS2: o vídeo dele chegando, o calor por cima (só a cor, a luz do
   render continua) e os tiros. As bordas do vídeo somem no fundo da página. */
.rk-agente{position:relative;width:100%}
/* As quatro bordas do vídeo somem em degradê até o transparente: o preto do
   render nunca desenha um retângulo sobre o fundo da página. */
.rk-ag-quadro{position:relative;aspect-ratio:2/3;width:100%;cursor:crosshair;
    -webkit-mask:linear-gradient(to bottom,transparent 0,#000 10%,#000 78%,transparent 100%),linear-gradient(to right,transparent 0,#000 14%,#000 86%,transparent 100%);
    -webkit-mask-composite:source-in;
    mask:linear-gradient(to bottom,transparent 0,#000 10%,#000 78%,transparent 100%),linear-gradient(to right,transparent 0,#000 14%,#000 86%,transparent 100%);
    mask-composite:intersect}
.rk-ag-quadro > *{position:absolute;inset:0;width:100%;height:100%}
.rk-ag-video{object-fit:cover;background:#000;transition:filter .3s var(--sai);opacity:0}
.rk-ag-video.on{opacity:1}
.rk-ag-bt:disabled{opacity:.45;cursor:default}
.rk-ag-bt:disabled:hover{color:var(--texto2);border-color:var(--border2)}
.rk-ag-bt[hidden]{display:none}
/* Ao apontar uma parte: o agente escurece e só ela acende em dourado, com contorno. */
.rk-ag-foco{mix-blend-mode:screen;opacity:0;transition:opacity .22s var(--sai);pointer-events:none}
.rk-ag-foco.on{opacity:1}
.rk-agente.focando .rk-ag-video{filter:brightness(.62) saturate(.75)}
.rk-agente.reserva .rk-ag-quadro{display:grid;place-items:center;-webkit-mask:none;mask:none;cursor:default}
.rk-agente.reserva .rk-ag-quadro > *{position:static;width:auto;height:88%}
@media (prefers-reduced-motion:reduce){.rk-ag-foco,.rk-ag-video{transition:none}}
/* O rodapé do agente: nome numa linha, botões na outra, sempre com a mesma altura. */
.rk-ag-rodape{display:flex;flex-direction:column;align-items:center;gap:.55rem;margin-top:.6rem}
.rk-ag-nome{display:flex;align-items:center;justify-content:center;gap:.5rem;min-height:1.4em;max-width:100%;font-size:.78rem;color:var(--mudo);
    text-align:center;opacity:0;transition:opacity .6s var(--sai)}
.rk-ag-nome .txt{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rk-agente.parado .rk-ag-nome{opacity:1}
.rk-ag-nome .lado:empty{display:none}
.rk-ag-nome .lado{font-family:var(--mono);font-size:.68rem;font-weight:700;padding:.08rem .38rem;border-radius:4px;flex-shrink:0}
.rk-ag-botoes{display:flex;justify-content:center}
/* O botão ao lado do "Outro agente" ("Posição HVH" ou "Agente HVH") entra
   abrindo espaço (o "Outro agente" escorrega em vez de pular) e aparece
   deslizando; sai pelo mesmo caminho. */
.rk-ag-extra{display:grid;grid-template-columns:0fr;transition:grid-template-columns .34s var(--sai)}
.rk-ag-extra > div{min-width:0;overflow:hidden;padding:3px;margin:-3px}
.rk-ag-extra .rk-ag-bt{margin-left:.4rem;white-space:nowrap;opacity:0;transform:translateX(-10px) scale(.96);
    transition:color .15s,border-color .15s,background-color .15s,opacity .2s var(--sai),transform .34s var(--sai)}
.rk-ag-extra.vem{grid-template-columns:1fr}
.rk-ag-extra.vem .rk-ag-bt{opacity:1;transform:none;transition-delay:0s,0s,0s,.08s,.04s}
.rk-ag-extra.vem .rk-ag-bt:disabled{opacity:.45}
@media (prefers-reduced-motion:reduce){
    .rk-ag-extra{transition:none}
    .rk-ag-extra .rk-ag-bt{transform:none;transition:opacity .2s}
}
.rk-ag-bt{display:inline-flex;align-items:center;gap:.35rem;height:30px;padding:0 .7rem;border-radius:8px;font-size:.78rem;color:var(--texto2);
    border:1px solid var(--border2);background:var(--bg2);transition:color .15s,border-color .15s,background-color .15s}
.rk-ag-bt:hover{color:var(--accent);border-color:var(--accent)}
.rk-ag-bt.on{color:#14100a;background:var(--accent);border-color:var(--accent)}
.rk-ag-bt svg{width:13px;height:13px}
.rk-ag-nome .lado.ct{color:#8fb3ec;background:rgba(93,143,216,.14)}
.rk-ag-nome .lado.tr{color:#e7b56a;background:rgba(217,162,75,.14)}
[data-parte]{transition:background-color .2s}
[data-parte].on{background:rgba(245,166,35,.08)}

/* O boneco de reserva (sem o vídeo do agente). */
.rk-boneco{display:block;height:auto;overflow:visible}
.rk-ag-pele{stroke:#14161c;stroke-width:1;stroke-linejoin:round;transition:filter .2s}
.rk-parte{cursor:default}
.rk-parte:hover .rk-ag-pele{filter:brightness(1.3)}
.rk-ag-det{fill:#20242d;stroke:#14161c;stroke-width:.8}
.rk-ag-lente{fill:#0b0d12;stroke:#4a5163;stroke-width:.6}
.rk-ag-linha{fill:none;stroke:rgba(0,0,0,.35);stroke-width:1;stroke-linecap:round}
.rk-ag-metal{fill:#8b8f9c}
.rk-ag-luva{fill:#1d2027;stroke:#14161c;stroke-width:.8}
.rk-ag-bota{fill:#16181e;stroke:#0e0f13;stroke-width:.8}
.rk-ag-sombra{fill:rgba(0,0,0,.45)}
/* Respira devagar; os tiros caem um a um quando a seção aparece. */
.rk-ag{animation:rkRespira 3.8s ease-in-out infinite;transform-box:fill-box;transform-origin:50% 100%}
@keyframes rkRespira{0%,100%{transform:translateY(0)}50%{transform:translateY(-1.2px)}}
.rk-tiro{fill:#fff;stroke:#f5a623;stroke-width:1.1;paint-order:stroke;opacity:0;transform-box:fill-box;transform-origin:center;pointer-events:none}
.rk-boneco.ver .rk-tiro{animation:rkTiro .55s var(--sai) forwards}
@keyframes rkTiro{0%{opacity:0;transform:scale(3)}55%{opacity:1}100%{opacity:.92;transform:scale(1)}}
@media (prefers-reduced-motion:reduce){.rk-ag{animation:none}.rk-tiro,.rk-boneco.ver .rk-tiro{animation:none;opacity:.92}}

/* A foto do jogador; por baixo, as iniciais (aparecem se não houver foto). */
.rk-av{--s:40px;position:relative;display:inline-grid;place-items:center;flex-shrink:0;width:var(--s);height:var(--s);border-radius:50%;overflow:hidden;
    background:#15151d;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.rk-av b{font-size:calc(var(--s) * .36);font-weight:700;color:var(--cor);letter-spacing:.02em}
.rk-av img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* A capa: a foto do próprio jogador, enorme e desfocada. */
.rk-capa{position:absolute;inset:0;overflow:hidden;background:radial-gradient(80% 120% at 30% 0,color-mix(in srgb,var(--cor) 35%,transparent),transparent 70%),#0b0b10}
.rk-capa img{position:absolute;inset:-15%;width:130%;height:130%;object-fit:cover;filter:blur(48px) saturate(1.35) brightness(.55);opacity:.9}
.rk-capa::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(5,5,7,.05),rgba(5,5,7,.55) 60%,var(--bg))}

/* As seções da ficha. */
.rk-sec-cab{display:flex;align-items:baseline;justify-content:space-between;gap:.4rem 1.5rem;flex-wrap:wrap;margin-bottom:1.25rem}
.rk-sec-cab h2{font-size:1.125rem;font-weight:600;letter-spacing:-.01em}
.rk-sec-cab p{font-size:.875rem;color:var(--mudo)}
.rk-sec-cab p b{color:var(--text);font-weight:600}
.rk-sec-cab .sobe{color:var(--green);font-family:var(--mono)}
.rk-sec-cab .desce{color:var(--red);font-family:var(--mono)}

.rk-vs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:2.5rem}
@media (max-width:1000px){.rk-vs{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:1.5rem}}
.rk-vs-i{padding:1.1rem 0 1.2rem;border-top:1px solid var(--border)}
.rk-vs-cab{display:flex;justify-content:space-between;align-items:baseline;gap:.8rem;font-size:.86rem;color:var(--mudo)}
.rk-vs-cab em{font-style:normal;font-size:.78rem;color:var(--muted)}
.rk-vs-cab em.bom{color:var(--green)}
.rk-vs-val{display:block;font-family:var(--mono);font-size:1.75rem;font-weight:500;letter-spacing:-.02em;margin:.2rem 0 .7rem}
.rk-vs-pista{position:relative;height:6px;border-radius:3px;background:rgba(255,255,255,.07)}
.rk-vs-pista i{position:absolute;left:0;top:0;bottom:0;border-radius:inherit;background:var(--accent)}
.rk-vs-pista i.abaixo{background:#6c6c84}
.rk-vs-pista em{position:absolute;top:-5px;bottom:-5px;width:2px;margin-left:-1px;border-radius:1px;background:#fff}
.rk-vs-med{font-size:.78rem;color:var(--muted);margin-top:.5rem}
.rk-vs-med b{font-family:var(--mono);font-weight:500;color:var(--texto2)}

.rk-hb{display:grid;grid-template-columns:240px minmax(0,1fr);gap:2rem;align-items:center}
.rk-hb .rk-boneco{width:118px;margin:0 auto}
.rk-hb-l{display:grid;grid-template-columns:84px minmax(0,1fr) 54px 38px;align-items:center;gap:.8rem;padding:.34rem 0;font-size:.88rem}
.rk-hb-l span{color:var(--texto2)}
.rk-hb-p{height:5px;border-radius:3px;background:rgba(255,255,255,.06);overflow:hidden}
.rk-hb-p i{display:block;height:100%;border-radius:inherit;background:var(--cor,var(--accent))}
.rk-hb-l b{font-family:var(--mono);font-weight:500;text-align:right;font-size:.86rem}
.rk-hb-l em{font-style:normal;font-family:var(--mono);color:var(--muted);text-align:right;font-size:.8rem}
.rk-hb-nota{font-size:.84rem;color:var(--mudo);margin-top:.8rem}
.rk-hb-nota b{color:var(--text);font-family:var(--mono);font-weight:500}

.rk-esp{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));border-top:1px solid var(--border)}
.rk-esp div{padding:1.1rem .2rem 0;display:flex;flex-direction:column;gap:.25rem}
.rk-esp svg{width:18px;height:18px;color:var(--accent);margin-bottom:.35rem}
.rk-esp b{font-family:var(--mono);font-size:1.4rem;font-weight:500;letter-spacing:-.02em}
.rk-esp span{font-size:.8rem;color:var(--mudo)}

.rk-kv{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));border-top:1px solid var(--border)}
.rk-kv div{padding:1.1rem .2rem 0}
.rk-kv span{display:block;font-size:.8rem;color:var(--mudo)}
.rk-kv b{display:block;font-family:var(--mono);font-size:1.3rem;font-weight:500;margin-top:.2rem;letter-spacing:-.01em}
.rk-kv small{font-size:.76rem;color:var(--muted)}

.rk-prog-rot{display:flex;justify-content:space-between;gap:1rem;font-size:.84rem;color:var(--mudo)}
.rk-prog-rot b{color:var(--cor);font-weight:600}
.rk-prog-barra{height:5px;margin:.5rem 0 .45rem;border-radius:3px;background:rgba(255,255,255,.08);overflow:hidden}
.rk-prog-barra i{display:block;height:100%;border-radius:inherit;background:var(--cor)}
.rk-prog p{font-size:.82rem;color:var(--mudo)}
.rk-prog p b{font-family:var(--mono);font-weight:500;color:var(--text)}

@media (max-width:760px){
    .rk-hb{grid-template-columns:1fr;gap:.5rem}
    .rk-hb .rk-agente{max-width:280px;margin:0 auto}
    .rk-hb-l{grid-template-columns:70px minmax(0,1fr) 46px 34px;gap:.5rem}
    .rk-esp{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:1rem}
    .rk-kv{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:.6rem}
    .rk-vs-val{font-size:1.5rem}
    .rk-vs-cab{flex-direction:column;gap:.1rem}
}

/* Voltar. */
.rk-voltar{display:inline-flex;align-items:center;gap:.4rem;color:var(--mudo);font-size:.86rem;margin-bottom:1.4rem;transition:color .15s}
.rk-voltar:hover{color:var(--text)}
.rk-voltar svg{width:16px;height:16px}

/* A tela de quem não pode ver a ficha. */
.rk-trava{max-width:560px;margin:3rem auto 0;text-align:center}
.rk-trava h2{font-size:1.6rem;font-weight:800;letter-spacing:-.02em}
.rk-trava p{color:var(--mudo);margin:.7rem auto 1.4rem;max-width:44ch}
.rk-trava .acoes{display:flex;gap:.6rem;justify-content:center;flex-wrap:wrap}

/* Rodapé. */
.rk-rodape{max-width:1400px;margin:0 auto;padding:2rem 2rem 6rem;display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
    color:var(--muted);font-size:.8rem;border-top:1px solid var(--border)}
.rk-rodape-links{display:flex;gap:1.2rem}
.rk-rodape a:hover{color:var(--accent)}

/* A barra da prévia: troca de versão e de tela. */
.pv-barra{position:fixed;left:50%;bottom:16px;transform:translateX(-50%);z-index:150;display:flex;gap:.4rem;padding:5px;
    background:rgba(10,10,15,.88);border:1px solid var(--border2);border-radius:14px;backdrop-filter:blur(10px);
    box-shadow:0 12px 32px rgba(0,0,0,.5);max-width:calc(100vw - 24px);overflow-x:auto}
.pv-grupo{display:flex;gap:2px}
.pv-grupo+.pv-grupo{border-left:1px solid var(--border2);padding-left:.4rem}
.pv-bt{height:34px;display:inline-flex;align-items:center;padding:0 .8rem;border-radius:9px;font-size:.82rem;font-weight:600;color:var(--mudo);white-space:nowrap}
.pv-bt:hover{color:var(--text)}
.pv-bt.on{background:var(--accent);color:#14100a}

/* Entrada: um momento só, no carregamento, a partir do visível. */
@keyframes rkEntra{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.rk-entra{animation:rkEntra .45s var(--sai) both}

@media (max-width:760px){
    .rk{padding:5.75rem 1rem 5rem}
    .rk-rodape{padding:1.6rem 1rem 6rem}
}
@media (prefers-reduced-motion:reduce){
    .rk-entra{animation:none}
    *{transition-duration:.01ms!important}
}