/* ============================================================
   RANKING DOS MASTERS — desenho compartilhado
   ============================================================
   O mesmo arquivo veste a tela do admin e a do Master. Os dois HTML
   têm tokens com nomes parecidos, mas não iguais (o admin chama o
   âmbar de --amber e o sistema chama de --warn, a sombra é --sh de um
   lado e --shadow do outro), então tudo aqui usa var(A, var(B, valor))
   e nenhuma tela precisa ganhar token novo.

   Ritmo vertical: o container é flex column com gap, porque bloco
   colado em bloco vira paredão. Vale para as duas telas.
   ============================================================ */

.rk-wrap{display:flex;flex-direction:column;gap:26px}
.rk-wrap *{box-sizing:border-box}

/* ---- topo: período e atualizar ---- */
.rk-topo{display:flex;align-items:center;justify-content:space-between;gap:12px 16px;flex-wrap:wrap}
.rk-per{display:inline-flex;gap:5px;padding:5px;border-radius:13px;
  border:1px solid var(--line, rgba(120,160,255,.12));
  background:var(--surface, rgba(120,160,255,.05))}
.rk-per-b{padding:8px 15px;border-radius:9px;border:0;background:transparent;cursor:pointer;
  color:var(--muted,#8b95ad);font:700 12.5px/1 inherit;transition:color .16s,background .16s}
.rk-per-b:hover{color:var(--txt,#dbe4f7)}
.rk-per-b.on{background:var(--grad, linear-gradient(135deg,#1646c8,#2b6cff,#4dc9f6));color:#fff}
.rk-per-b:focus-visible,.rk-mini:focus-visible,.rk-busca:focus-visible,.rk-jan:focus-visible{
  outline:2px solid var(--cyan,#4dc9f6);outline-offset:2px}
.rk-mini{display:inline-flex;align-items:center;gap:7px;padding:8px 13px;border-radius:10px;cursor:pointer;
  border:1px solid var(--line-2, rgba(120,160,255,.22));background:transparent;
  color:var(--muted,#8b95ad);font:600 12px/1 inherit;transition:color .16s,border-color .16s}
.rk-mini:hover{color:var(--ink,#eaf1ff);border-color:var(--cyan,#4dc9f6)}
.rk-mini svg{width:14px;height:14px}

/* ---- legenda da régua de pontos ---- */
.rk-legenda{display:flex;align-items:center;gap:10px;padding:13px 16px;border-radius:14px;
  border:1px solid rgba(77,201,246,.28);background:rgba(77,201,246,.07);
  color:var(--muted,#8b95ad);font:500 12.5px/1.5 inherit}
.rk-legenda svg{width:16px;height:16px;flex:0 0 auto;color:var(--cyan,#4dc9f6)}
.rk-legenda b{color:var(--ink,#eaf1ff)}

/* ---- cartões do admin ---- */
.rk-cards{display:grid;gap:14px;grid-template-columns:repeat(4,minmax(0,1fr))}
.rk-card{display:flex;flex-direction:column;gap:5px;min-width:0;padding:16px 17px 15px;border-radius:15px;
  border:1px solid var(--line, rgba(120,160,255,.12));
  background:var(--panel-2, var(--panel,#0e1320))}
.rk-card-rot{font:700 10px/1.3 inherit;letter-spacing:.12em;text-transform:uppercase;color:var(--muted-2,#6b7692)}
.rk-card-val{font:800 23px/1.1 inherit;color:var(--ink,#eaf1ff);letter-spacing:-.02em}
.rk-card-pe{margin-top:auto;font:500 11px/1.4 inherit;color:var(--muted,#8b95ad)}

/* ---- pódio ---- */
.rk-podio{display:grid;grid-template-columns:1fr 1.16fr 1fr;align-items:end;gap:16px;
  max-width:760px;margin:0 auto;width:100%}
.rk-podio>*{min-width:0}
.rk-pod{display:flex;flex-direction:column;align-items:center;text-align:center;
  opacity:0;transform:translateY(16px);animation:rkSobe .55s cubic-bezier(.2,.8,.2,1) forwards;
  animation-delay:calc(var(--i) * .12s + .05s)}
.rk-pod-1{--medalha:#f5b301}
.rk-pod-2{--medalha:#c3ccd6}
.rk-pod-3{--medalha:#d98a4e}
.rk-coroa{display:block;height:26px;color:#f5b301;margin-bottom:4px}
.rk-coroa svg{width:24px;height:24px}
.rk-pod-foto{position:relative;display:inline-block}
.rk-av{position:relative;width:78px;height:78px;border-radius:50%;display:grid;place-items:center;overflow:hidden;
  background:var(--surface-2, rgba(120,160,255,.10));color:var(--cyan,#4dc9f6);
  font:800 24px/1 inherit;flex:0 0 auto}
.rk-av img{width:100%;height:100%;object-fit:cover}
.rk-av i{font-style:normal}
.rk-pod-foto .rk-av{box-shadow:0 0 0 3px var(--panel,#0e1320),0 0 0 6px var(--medalha)}
.rk-pod-1 .rk-av{width:94px;height:94px;font-size:29px}
.rk-medalha{position:absolute;bottom:-8px;left:50%;transform:translateX(-50%);width:25px;height:25px;
  border-radius:50%;display:grid;place-items:center;background:var(--medalha);color:#20160a;
  font:800 12px/1 inherit;border:2px solid var(--panel,#0e1320);z-index:2}
.rk-pod-nome{margin-top:15px;font:700 13.5px/1.25 inherit;color:var(--ink,#eaf1ff);
  display:flex;align-items:center;gap:6px;flex-wrap:wrap;justify-content:center;max-width:190px;
  overflow-wrap:anywhere}
.rk-pod-1 .rk-pod-nome{font-size:15px}
.rk-pod-emp{margin-top:3px;font:500 11.5px/1.35 inherit;color:var(--muted,#8b95ad);max-width:190px;
  overflow-wrap:anywhere}
.rk-pod-pts{margin-top:7px}
.rk-pod-pts b{font:800 21px/1 inherit;color:var(--cyan,#4dc9f6)}
.rk-pod-1 .rk-pod-pts b{font-size:26px}
.rk-pod-pts small{margin-left:3px;font:600 10.5px/1 inherit;color:var(--muted-2,#6b7692)}
.rk-base{margin-top:14px;width:100%;height:var(--h,48px);border-radius:15px 15px 0 0;display:grid;place-items:center;
  border:1px solid var(--line, rgba(120,160,255,.12));border-bottom:0;
  background:linear-gradient(180deg, var(--surface-2, rgba(120,160,255,.10)), transparent);
  box-shadow:inset 0 3px 0 var(--medalha)}
.rk-base i{font-style:normal;font:800 15px/1 inherit;color:var(--muted,#8b95ad)}
.rk-pod-1 .rk-base{--h:92px}
.rk-pod-2 .rk-base{--h:66px}
.rk-pod-3 .rk-base{--h:48px}
.rk-pod.eu .rk-pod-nome{color:var(--cyan,#4dc9f6)}
.rk-eu{font-style:normal;padding:2px 8px;border-radius:999px;font:700 10px/1.4 inherit;
  background:rgba(77,201,246,.16);color:var(--cyan-text, var(--cyan,#4dc9f6))}

/* ---- chips de detalhamento ---- */
.rk-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px}
.rk-pod .rk-chips{justify-content:center}
.rk-chip{display:inline-flex;align-items:baseline;gap:5px;padding:4px 10px;border-radius:999px;
  border:1px solid var(--line-2, rgba(120,160,255,.22));background:var(--surface, rgba(120,160,255,.05));
  white-space:nowrap}
.rk-chip b{font:700 11.5px/1.3 inherit;color:var(--txt,#dbe4f7)}
.rk-chip small{font:600 10px/1.3 inherit;color:var(--muted-2,#6b7692)}

/* ---- blocos ---- */
.rk-bloco{padding:20px 22px 22px;border-radius:18px;
  border:1px solid var(--line, rgba(120,160,255,.12));
  background:var(--panel, #0e1320);
  box-shadow:var(--shadow, var(--sh, 0 18px 40px -22px rgba(0,0,0,.9)))}
.rk-bloco-cab{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap;
  margin-bottom:16px}
.rk-bloco-cab h3{margin:0;font:700 15px/1.25 inherit;color:var(--ink,#eaf1ff);letter-spacing:-.01em}
.rk-bloco-cab p{margin:5px 0 0;font:500 12px/1.5 inherit;color:var(--muted,#8b95ad)}
.rk-busca{padding:9px 13px;border-radius:10px;min-width:210px;
  border:1px solid var(--line, rgba(120,160,255,.12));
  background:var(--panel-2, rgba(0,0,0,.2));color:var(--txt,#dbe4f7);font:500 12.5px/1.2 inherit}
.rk-busca:focus{outline:2px solid var(--cyan,#4dc9f6);outline-offset:1px;border-color:var(--cyan,#4dc9f6)}

/* ---- lista 4º em diante ---- */
.rk-lista{display:flex;flex-direction:column;gap:10px}
.rk-linha{display:flex;align-items:center;gap:14px;padding:12px 15px;border-radius:14px;
  border:1px solid var(--line, rgba(120,160,255,.12));
  background:var(--surface, rgba(120,160,255,.05));
  opacity:0;transform:translateY(10px);animation:rkSobe .45s ease forwards;
  animation-delay:calc(var(--i) * .05s + .3s)}
.rk-linha.eu{border-color:var(--cyan,#4dc9f6);background:rgba(77,201,246,.09)}
.rk-pos{width:30px;flex:0 0 auto;text-align:center;font:800 13px/1 inherit;color:var(--muted-2,#6b7692)}
.rk-av.quad{width:46px;height:46px;border-radius:13px;font-size:16px}
.rk-av.quad.mini{width:30px;height:30px;border-radius:9px;font-size:11px}
/* o nome precisa de piso: sem ele os chips e os pontos espremiam a
   coluna até sobrar uma letra por linha */
.rk-linha-meta{flex:1 1 230px;min-width:170px}
.rk-linha-meta>b{display:block;font:700 13.5px/1.3 inherit;color:var(--ink,#eaf1ff);overflow-wrap:anywhere}
.rk-emp{display:block;margin-top:2px;font:500 11.5px/1.35 inherit;color:var(--muted,#8b95ad);
  overflow-wrap:anywhere}
.rk-barra{display:block;margin-top:8px;height:6px;border-radius:999px;overflow:hidden;
  background:var(--surface-2, rgba(120,160,255,.10))}
.rk-barra i{display:block;height:100%;border-radius:999px;
  background:var(--grad, linear-gradient(135deg,#1646c8,#2b6cff,#4dc9f6))}
/* 340px é o que os dois chips pedem lado a lado; abaixo disso eles
   empilham sozinhos, e a linha continua legível */
.rk-linha .rk-chips{margin:0;flex:0 1 340px;justify-content:flex-end}
.rk-linha-pts{flex:0 0 auto;text-align:right;min-width:62px}
.rk-linha-pts b{display:block;font:800 17px/1 inherit;color:var(--cyan,#4dc9f6)}
.rk-linha-pts small{font:600 10px/1.3 inherit;color:var(--muted-2,#6b7692)}

/* ---- cartão do próprio Master ---- */
.rk-meu-eu{display:inline-flex;align-items:center;gap:10px;font:700 13px/1.2 inherit;color:var(--ink,#eaf1ff)}
.rk-janelas{display:grid;gap:12px;grid-template-columns:repeat(4,minmax(0,1fr))}
.rk-jan{min-width:0;padding:14px 15px;border-radius:14px;cursor:pointer;
  border:1px solid var(--line, rgba(120,160,255,.12));
  background:var(--surface, rgba(120,160,255,.05));transition:border-color .16s,background .16s}
.rk-jan:hover{border-color:var(--cyan,#4dc9f6)}
.rk-jan.on{border-color:var(--cyan,#4dc9f6);background:rgba(77,201,246,.09)}
.rk-jan-rot{display:block;font:700 10px/1.3 inherit;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted-2,#6b7692)}
.rk-jan-pos{display:block;margin-top:6px;font:800 24px/1 inherit;color:var(--ink,#eaf1ff)}
.rk-jan-pts{display:block;margin-top:4px;font:600 11.5px/1.4 inherit;color:var(--cyan,#4dc9f6)}
.rk-jan-val{display:block;margin-top:1px;font:500 11px/1.4 inherit;color:var(--muted,#8b95ad)}

/* ---- tabela de todos (admin) ---- */
.rk-tab-wrap{overflow-x:auto}
.rk-tab{width:100%;border-collapse:collapse;font:500 12.5px/1.45 inherit}
.rk-tab th{padding:0 12px 11px;text-align:left;font:700 10px/1.3 inherit;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted-2,#6b7692);border-bottom:1px solid var(--line, rgba(120,160,255,.12));
  white-space:nowrap}
.rk-tab td{padding:11px 12px;border-bottom:1px solid var(--line, rgba(120,160,255,.12));
  color:var(--txt,#dbe4f7);vertical-align:middle}
.rk-tab tbody tr:last-child td{border-bottom:0}
.rk-tab tbody tr:hover td{background:var(--surface, rgba(120,160,255,.05))}
.rk-tab tr.eu td{background:rgba(77,201,246,.08)}
.rk-tab .num{text-align:right}
.rk-tab td small{display:block;margin-top:3px;font:500 10.5px/1.3 inherit;color:var(--muted-2,#6b7692)}
.rk-th-pos{width:56px}
.rk-tab .rk-pos{display:inline-grid;place-items:center;width:32px;height:26px;border-radius:8px;
  background:var(--surface-2, rgba(120,160,255,.10))}
.rk-tab .rk-pos.m1{background:#f5b301;color:#3a2a00}
.rk-tab .rk-pos.m2{background:#c3ccd6;color:#25303a}
.rk-tab .rk-pos.m3{background:#d98a4e;color:#3a1f06}
.rk-nome-cel{display:inline-flex;align-items:center;gap:10px;min-width:0}
.rk-nome-cel b{font:700 12.5px/1.3 inherit;color:var(--ink,#eaf1ff);overflow-wrap:anywhere}
.rk-mini-barra{display:inline-block;width:84px;height:6px;border-radius:999px;overflow:hidden;vertical-align:middle;
  background:var(--surface-2, rgba(120,160,255,.10))}
.rk-mini-barra i{display:block;height:100%;border-radius:999px;background:var(--cyan,#4dc9f6)}

/* aviso de quem está olhando e não está na lista (conta de admin) */
.rk-fora{display:flex;align-items:center;gap:11px;padding:15px 17px;border-radius:14px;
  border:1px dashed var(--line-2, rgba(120,160,255,.22));background:var(--surface, rgba(120,160,255,.05));
  color:var(--muted,#8b95ad);font:500 12.5px/1.55 inherit}
.rk-fora svg{width:17px;height:17px;flex:0 0 auto;opacity:.8}
.rk-fora b{color:var(--ink,#eaf1ff)}

/* ---- estados ---- */
.rk-vazio{display:flex;align-items:center;gap:11px;flex-wrap:wrap;padding:20px 18px;border-radius:14px;
  border:1px dashed var(--line-2, rgba(120,160,255,.22));color:var(--muted,#8b95ad);
  font:500 12.5px/1.5 inherit}
.rk-vazio svg{width:17px;height:17px;flex:0 0 auto;opacity:.75}
.rk-vazio.bad{border-style:solid;border-color:rgba(255,122,122,.4);background:rgba(255,122,122,.06)}
.rk-vazio .rk-mini{margin-left:auto}
.rk-carregando{display:flex;align-items:center;justify-content:center;gap:12px;padding:60px 20px;
  color:var(--muted,#8b95ad);font-size:14px}
.rk-spin{width:18px;height:18px;border-radius:50%;border:2px solid var(--line-2, rgba(120,160,255,.22));
  border-top-color:var(--cyan,#4dc9f6);animation:rkGira .8s linear infinite}

@keyframes rkSobe{to{opacity:1;transform:none}}
@keyframes rkGira{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion: reduce){
  .rk-pod,.rk-linha{animation:none;opacity:1;transform:none}
}

/* ---- claro (só o sistema do Master tem) ---- */
body.light .rk-medalha{border-color:var(--panel,#fff)}
body.light .rk-per-b.on{color:#fff}
body.light .rk-tab .rk-pos.m1{color:#3a2a00}
body.light .rk-busca{background:#fff}

@media (max-width:980px){
  .rk-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rk-janelas{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rk-linha .rk-chips{display:none}
}
@media (max-width:640px){
  .rk-wrap{gap:18px}
  .rk-topo{gap:10px}
  .rk-per{width:100%;justify-content:space-between}
  .rk-per-b{flex:1 1 0;padding:9px 6px;font-size:12px}
  .rk-mini{width:100%;justify-content:center;min-height:42px}
  .rk-podio{gap:8px}
  .rk-av{width:58px;height:58px;font-size:18px}
  .rk-pod-1 .rk-av{width:70px;height:70px;font-size:22px}
  .rk-pod-nome{font-size:12px;margin-top:11px}
  .rk-pod-1 .rk-pod-nome{font-size:13px}
  .rk-pod-emp{font-size:10.5px}
  .rk-pod-pts b{font-size:17px}
  .rk-pod-1 .rk-pod-pts b{font-size:20px}
  /* no celular cada degrau tem ~110px: o chip precisa caber na coluna,
     então ele ocupa a largura toda e a frase quebra em vez de vazar */
  .rk-pod .rk-chips{flex-direction:column;align-items:stretch;gap:4px;width:100%}
  .rk-pod .rk-chip{white-space:normal;justify-content:center;text-align:center;padding:4px 6px;
    flex-direction:column;align-items:center;gap:1px}
  .rk-chip{padding:3px 8px}
  .rk-bloco{padding:16px 15px 17px}
  .rk-bloco-cab{margin-bottom:14px}
  .rk-busca{width:100%;font-size:16px}
  .rk-linha{gap:10px;padding:11px 12px}
  /* no celular o piso de 170px do nome estourava a linha: aqui ele cede
     e o nome quebra, que é o certo numa tela estreita */
  .rk-linha-meta{flex:1 1 auto;min-width:0}
  .rk-linha-pts{min-width:52px}
  .rk-av.quad{width:40px;height:40px}
  .rk-linha-pts b{font-size:15px}
  .rk-cards{gap:11px}
  .rk-card{padding:14px 14px 13px}
  .rk-card-val{font-size:20px}
  .rk-janelas{gap:10px}
  .rk-jan-pos{font-size:20px}
  .rk-tab{min-width:620px}
}