/* ============================================================
   MCA RANKING — UI estilo pódio (Weekly/Monthly/All Time)
   ============================================================ */
.rk-wrap{
  max-width:780px;margin:0 auto;padding:18px 14px 100px;
  font-family:'Inter',system-ui,sans-serif;color:#1f2937;
}
.rk-bg{
  position:fixed;inset:0;z-index:-1;
  background:
    radial-gradient(1200px 600px at 10% -10%, #ffe7d6 0%, transparent 60%),
    radial-gradient(900px 500px at 110% 10%, #d8ecff 0%, transparent 55%),
    linear-gradient(180deg,#f6fbff 0%,#ffffff 60%);
}

/* Tabs Weekly / Monthly / All Time */
.rk-tabs{
  display:flex;gap:10px;justify-content:center;margin:6px 0 22px;
}
.rk-tab{
  flex:1;max-width:140px;text-align:center;
  padding:11px 14px;border-radius:999px;font-weight:600;font-size:14px;
  background:#fff;color:#475569;border:1px solid #e5e7eb;
  box-shadow:0 4px 14px rgba(15,23,42,.05);
  cursor:pointer;transition:.25s;
}
.rk-tab.active{
  color:#fff;border-color:transparent;
  background:linear-gradient(135deg,#ff8a3d,#ff5e3a);
  box-shadow:0 10px 24px rgba(255,94,58,.35);
}

/* Header com busca e filtros (opcional acima do pódio) */
.rk-header{
  display:flex;gap:8px;align-items:center;margin-bottom:14px;
}
.rk-search{
  flex:1;display:flex;align-items:center;gap:8px;
  background:#fff;border:1px solid #e5e7eb;border-radius:14px;
  padding:9px 12px;box-shadow:0 4px 14px rgba(15,23,42,.04);
}
.rk-search input{border:0;outline:0;background:transparent;flex:1;font-size:14px}
.rk-chip{
  padding:8px 12px;background:#fff;border:1px solid #e5e7eb;border-radius:999px;
  font-size:12px;font-weight:600;color:#475569;cursor:pointer;
}
.rk-chip.active{background:#111827;color:#fff;border-color:#111827}

/* ========= PÓDIO ========= */
.rk-podium{
  position:relative;display:grid;grid-template-columns:1fr 1.15fr 1fr;
  align-items:end;gap:10px;margin:10px 0 24px;min-height:230px;
}
.rk-pod{ display:flex;flex-direction:column;align-items:center;text-align:center; }
.rk-pod .ava{
  position:relative;border-radius:50%;padding:4px;
  background:linear-gradient(135deg,#cbd5e1,#94a3b8);
  box-shadow:0 12px 24px rgba(15,23,42,.12);
}
.rk-pod .ava img{width:84px;height:84px;border-radius:50%;object-fit:cover;border:3px solid #fff}
.rk-pod .badge-num{
  position:absolute;left:50%;bottom:-10px;transform:translateX(-50%);
  width:26px;height:26px;border-radius:50%;
  background:#fff;color:#0f172a;font-weight:800;font-size:13px;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 6px 14px rgba(0,0,0,.12);
}
.rk-pod .nome{margin-top:18px;font-weight:700;font-size:15px;color:#0f172a}
.rk-pod .coin{
  margin-top:6px;display:inline-flex;align-items:center;gap:6px;
  background:#fff;padding:4px 10px;border-radius:999px;font-size:12px;font-weight:700;
  color:#b45309;box-shadow:0 4px 10px rgba(0,0,0,.06);
}
.rk-pod .coin i{color:#f59e0b}

/* Top 1 destacado */
.rk-pod.top1 .ava{
  padding:5px;background:linear-gradient(135deg,#ffb547,#ff7a18);
  transform:translateY(-22px);
}
.rk-pod.top1 .ava img{width:104px;height:104px}
.rk-pod.top1 .badge-num{background:#ff7a18;color:#fff}
.rk-pod.top1 .crown{
  position:absolute;top:-34px;left:50%;transform:translate(-50%,0);
  font-size:30px;color:#ffb547;filter:drop-shadow(0 4px 8px rgba(255,122,24,.45));
  animation:rk-bounce 2.4s ease-in-out infinite;
}
.rk-pod.top2 .ava{background:linear-gradient(135deg,#9ec5ff,#5b8def)}
.rk-pod.top2 .badge-num{background:#3b82f6;color:#fff}
.rk-pod.top3 .ava{background:linear-gradient(135deg,#ffc1b3,#ff8b6e)}
.rk-pod.top3 .badge-num{background:#fb7185;color:#fff}

@keyframes rk-bounce{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,-6px)}}

/* ========= LISTA ========= */
.rk-list{display:flex;flex-direction:column;gap:10px}
.rk-row{
  display:grid;grid-template-columns:34px 52px 1fr auto;gap:12px;align-items:center;
  background:#fff;border-radius:18px;padding:10px 14px;
  box-shadow:0 6px 18px rgba(15,23,42,.05);
  border:1px solid rgba(15,23,42,.04);
  transition:.2s;
}
.rk-row:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(15,23,42,.08)}
.rk-row .pos{font-weight:800;color:#94a3b8;font-size:15px;text-align:center}
.rk-row .ava{
  width:44px;height:44px;border-radius:50%;padding:2px;
  background:linear-gradient(135deg,#e5e7eb,#cbd5e1);
}
.rk-row .ava img{width:100%;height:100%;border-radius:50%;object-fit:cover;border:2px solid #fff}
.rk-row.tier-ativo  .ava{background:linear-gradient(135deg,#7dd3fc,#3b82f6)}
.rk-row.tier-destaque .ava{background:linear-gradient(135deg,#c4b5fd,#8b5cf6)}
.rk-row.tier-vip    .ava{background:linear-gradient(135deg,#fde68a,#f59e0b)}
.rk-row.tier-elite  .ava{background:linear-gradient(135deg,#a7f3d0,#22d3ee,#a78bfa);background-size:200% 200%;animation:rk-shimmer 4s linear infinite}
@keyframes rk-shimmer{0%{background-position:0% 50%}100%{background-position:200% 50%}}
.rk-row .nome{font-weight:600;font-size:15px;color:#0f172a}
.rk-row .meta{font-size:12px;color:#64748b}
.rk-row .coin{
  display:inline-flex;align-items:center;gap:6px;
  background:#fff7ed;color:#b45309;padding:6px 12px;border-radius:999px;
  font-weight:800;font-size:13px;border:1px solid #fed7aa;
}
.rk-row .coin i{color:#f59e0b}

/* Modal Voto */
.rk-modal-back{
  position:fixed;inset:0;background:rgba(15,23,42,.55);backdrop-filter:blur(6px);
  display:flex;align-items:center;justify-content:center;z-index:9999;padding:18px;
}
.rk-modal{
  background:#fff;border-radius:22px;width:100%;max-width:380px;padding:22px;
  box-shadow:0 30px 60px rgba(0,0,0,.25);animation:rk-pop .25s ease;
}
@keyframes rk-pop{from{transform:scale(.9);opacity:0}to{transform:scale(1);opacity:1}}
.rk-modal h3{margin:0 0 4px;font-size:18px}
.rk-modal p{margin:0 0 14px;color:#64748b;font-size:13px}
.rk-stars{display:flex;justify-content:center;gap:8px;font-size:34px;color:#e5e7eb;margin:10px 0 14px}
.rk-stars i{cursor:pointer;transition:.15s}
.rk-stars i.on{color:#fbbf24;transform:scale(1.1)}
.rk-cats{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px;justify-content:center}
.rk-cats .rk-chip{font-size:12px}
.rk-modal textarea{width:100%;border:1px solid #e5e7eb;border-radius:12px;padding:10px;resize:none;font-family:inherit;font-size:13px}
.rk-modal .actions{display:flex;gap:8px;margin-top:14px}
.rk-modal .btn{
  flex:1;padding:12px;border-radius:12px;font-weight:700;font-size:14px;
  border:0;cursor:pointer;
}
.rk-modal .btn.primary{background:linear-gradient(135deg,#ff8a3d,#ff5e3a);color:#fff;box-shadow:0 8px 20px rgba(255,94,58,.35)}
.rk-modal .btn.ghost{background:#f3f4f6;color:#475569}

/* Página Tarefas */
.rk-tasks{display:flex;flex-direction:column;gap:12px}
.rk-task{
  display:grid;grid-template-columns:46px 1fr auto;gap:12px;align-items:center;
  background:#fff;border-radius:18px;padding:14px;border:1px solid rgba(15,23,42,.04);
  box-shadow:0 6px 18px rgba(15,23,42,.05);
}
.rk-task .ic{
  width:46px;height:46px;border-radius:14px;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#ffedd5,#fed7aa);color:#c2410c;font-size:18px;
}
.rk-task h4{margin:0;font-size:15px}
.rk-task p{margin:2px 0 8px;font-size:12px;color:#64748b}
.rk-task .bar{height:8px;background:#f1f5f9;border-radius:999px;overflow:hidden}
.rk-task .bar > span{display:block;height:100%;background:linear-gradient(90deg,#ff8a3d,#ff5e3a);transition:.4s}
.rk-task .reward{
  display:flex;flex-direction:column;align-items:flex-end;gap:4px;font-size:12px;font-weight:700;color:#b45309;
}
.rk-task .reward .xp{color:#3b82f6}
.rk-task .done{
  background:linear-gradient(135deg,#34d399,#10b981);color:#fff;border:0;padding:8px 12px;
  border-radius:10px;font-weight:700;font-size:12px;cursor:pointer;
}
.rk-task.completed{opacity:.7}
.rk-task.completed .done{background:#94a3b8;cursor:default}

/* Stats panel */
.rk-stats{
  display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:6px 0 18px;
}
.rk-stat{
  background:#fff;border-radius:16px;padding:12px 8px;text-align:center;
  border:1px solid rgba(15,23,42,.04);box-shadow:0 4px 14px rgba(15,23,42,.05);
}
.rk-stat .v{font-weight:800;font-size:18px;color:#0f172a}
.rk-stat .l{font-size:11px;color:#64748b;margin-top:2px}

@media (max-width:480px){
  .rk-pod .ava img{width:72px;height:72px}
  .rk-pod.top1 .ava img{width:92px;height:92px}
  .rk-stats{grid-template-columns:repeat(2,1fr)}
}