/* =========================================================================
   Ranking — Imperfect MIR4
   Carregado DEPOIS de marketplace.css: a moldura (cabeçalho, rodapé, cores
   --mp-*, abas .mp-tabs, busca .mp-filters, paginação .mp-pager) vem de lá.
   Aqui só a tabela, as abas internas e o filtro de classe.
   ========================================================================= */

.rk-wrap { max-width: 1180px; }

/* ------------------------------------------------- abas da categoria --- */
.rk-groups { flex-wrap: wrap; margin-bottom: 0; }
.rk-tabs {
  display: flex; flex-wrap: wrap; gap: 6px;
  padding: 14px; margin-bottom: 16px;
  background: var(--mp-panel-2);
  border: 1px solid var(--mp-line);
}
.rk-tabs a {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px;
  border: 1px solid transparent; border-radius: 999px;
  color: var(--mp-dim); font-size: 14px;
  transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.rk-tabs a:hover { color: #fff; }
.rk-tabs a[aria-current="page"] {
  color: #fff; border-color: var(--mp-gold);
  background: rgba(217, 183, 116, .1);
}
.rk-tabs img { width: 20px; height: 20px; object-fit: contain; }

/* ----------------------------------------------- filtro de classe --- */
.rk-bar { display: flex; flex-direction: column; gap: 12px; margin-bottom: 18px; }
.rk-classes { display: flex; flex-wrap: wrap; gap: 6px; }
.rk-classes a {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px 6px 8px;
  background: var(--mp-panel);
  border: 1px solid var(--mp-line);
  color: var(--mp-dim); font-size: 13px;
}
.rk-classes a:first-child { padding-left: 12px; }
.rk-classes a:hover { color: #fff; }
.rk-classes a[aria-current="true"] { color: #fff; border-color: var(--mp-gold); }
.rk-classes img { width: 22px; height: 22px; object-fit: contain; }
.rk-search { margin: 0; }
.rk-clear { align-self: center; color: var(--mp-dim); font-size: 13px; text-decoration: underline; }
.rk-note { margin: -6px 0 14px; color: var(--mp-dim); font-size: 13px; }

/* -------------------------------------------------------- tabela --- */
.rk-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--mp-line);
  background: var(--mp-panel);
}
.rk-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.rk-table th {
  padding: 12px 16px;
  text-align: left; font-weight: 600; font-size: 12px;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--mp-gold);
  background: var(--mp-panel-2);
  border-bottom: 1px solid var(--mp-line);
  white-space: nowrap;
}
.rk-table td { padding: 10px 16px; border-bottom: 1px solid var(--mp-line); vertical-align: middle; }
.rk-table tbody tr:last-child td { border-bottom: none; }
.rk-table tbody tr:hover td { background: rgba(255, 255, 255, .03); }
.rk-num { text-align: right !important; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rk-value { color: #fff; font-weight: 600; }
.rk-dim { color: var(--mp-dim); }

.rk-pos { width: 1%; white-space: nowrap; }
.rk-rank {
  display: inline-grid; place-items: center;
  min-width: 34px; height: 34px; padding: 0 6px;
  border: 1px solid var(--mp-line); border-radius: 50%;
  font-weight: 700; font-variant-numeric: tabular-nums;
  color: var(--mp-dim);
}
.rk-top-1 .rk-rank { color: #1a1205; background: linear-gradient(160deg, #f6dc8c, #c8992f); border-color: #f6dc8c; }
.rk-top-2 .rk-rank { color: #14161a; background: linear-gradient(160deg, #eef1f5, #9aa3ad); border-color: #eef1f5; }
.rk-top-3 .rk-rank { color: #1c0f06; background: linear-gradient(160deg, #e9a66f, #9b5a2a); border-color: #e9a66f; }
.rk-top td { background: rgba(217, 183, 116, .04); }
.rk-tag {
  display: block; margin-top: 4px;
  font-size: 11px; color: var(--mp-pink); white-space: nowrap;
}

.rk-who { display: flex; align-items: center; gap: 10px; min-width: 0; }
.rk-who strong { display: block; color: #fff; font-weight: 600; }
.rk-who small { display: block; color: var(--mp-dim); font-size: 12px; }
.rk-class { width: 32px; height: 32px; object-fit: contain; flex: none; }
.rk-emblem {
  display: inline-grid; place-items: center; flex: none;
  width: 32px; height: 36px;
  clip-path: polygon(50% 0, 100% 18%, 100% 70%, 50% 100%, 0 70%, 0 18%);
  background: linear-gradient(160deg, #3a2f57, #1d1830);
  color: var(--mp-gold); font-weight: 700;
}
.rk-sale {
  margin-left: 4px; padding: 2px 8px;
  border: 1px solid var(--mp-green); border-radius: 999px;
  color: var(--mp-green); font-size: 11px; white-space: nowrap;
}
.rk-sale:hover { background: rgba(66, 255, 0, .08); }

.rk-empty { text-align: center; }
.rk-empty strong { display: block; color: #fff; font-size: 18px; margin-bottom: 6px; }
.rk-empty p { margin: 0 auto; max-width: 56ch; }
.rk-foot { margin-top: 18px; color: var(--mp-dim); font-size: 12px; text-align: right; }

@media (max-width: 720px) {
  .rk-table th, .rk-table td { padding: 8px 10px; }
  .rk-hide-sm { display: none; }
  .rk-tabs { padding: 10px; }
}