/* ===========================
   RANKING LEVEL - tema do site (glass + dourado)
   =========================== */

/* card principal (usa vibe do pro-card/content-bg) */
.ranking-level-card{
  position: relative;
  overflow: hidden;
}

/* deco do shura */
.ranking-deco-img{
  position: absolute;
  right: -30px;
  top: 20px;
  width: 320px;
  opacity: .28;
  filter: saturate(1.05) contrast(1.05);
  pointer-events: none;
}

/* ===== TOP 99 ===== */
.top99-wrap{
  padding: 18px 18px 8px;
  margin-bottom: 18px;
  border: 1px solid rgba(255,210,125,.12);
  border-radius: 16px;
  background: rgba(0,0,0,.20);
}

.top99-title{
  text-align: center;
  margin-bottom: 14px;
}

.badge-soft{
  display: inline-block;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: rgba(255,255,255,.9);
  border: 1px solid rgba(255,210,125,.22);
  background: rgba(15,15,15,.50);
}

.top99-title h2{
  margin: 10px 0 6px;
  font-size: 18px;
  font-weight: 900;
  letter-spacing: .5px;
  color: rgba(255,255,255,.92);
}

.top99-title p{
  margin: 0;
  font-size: 13px;
  color: rgba(255,255,255,.60);
}

.top99-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-top: 14px;
}

.top99-item{
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(255,210,125,.16);
  background: rgba(15,15,15,.55);
  box-shadow: 0 16px 40px rgba(0,0,0,.35);
}

.top99-icon{
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: rgba(0,0,0,.35);
  border: 1px solid rgba(255,210,125,.20);
}

.top99-icon img{
  width: 30px;
  height: 30px;
}

.top99-info{
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.top99-name{
  font-weight: 900;
  font-size: 13px;
  color: rgba(255,255,255,.92);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.top99-empire{
  font-size: 12px;
  font-weight: 800;
  opacity: .95;
}

.top99-time{
  font-size: 12px;
  color: rgba(255,255,255,.55);
}

/* cores por reino */
.empire-shinsoo{ color: #ff4b4b; }
.empire-chunjo{ color: #ffd27d; }
.empire-jinno{ color: #5aa7ff; }

/* ===== TABELA ===== */
.ranking-table-wrap{
  padding: 6px 4px 2px;
  border-radius: 16px;
  border: 1px solid rgba(255,210,125,.12);
  background: rgba(0,0,0,.18);
}

.ranking-table-head{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px 12px;
}

.table-title{
  font-weight: 900;
  letter-spacing: .6px;
  color: rgba(255,255,255,.92);
  display: flex;
  align-items: center;
  gap: 8px;
}

.table-sub{
  font-size: 12px;
  color: rgba(255,255,255,.55);
}

/* tema da tabela */
.table-theme{
  margin: 0;
  border-collapse: separate;
  border-spacing: 0;
}

.table-theme thead th{
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: rgba(255,255,255,.75);
  background: rgba(15,15,15,.65);
  border-bottom: 1px solid rgba(255,210,125,.14);
  padding: 12px 10px;
}

.table-theme tbody td,
.table-theme tbody th{
  border-color: rgba(255,255,255,.06);
  padding: 12px 10px;
  background: rgba(0,0,0,.08);
}

.table-theme tbody tr:hover td,
.table-theme tbody tr:hover th{
  background: rgba(255,210,125,.06);
}

/* colunas */
.pos-col{
  font-weight: 900;
  color: rgba(255,255,255,.85);
}

.class-icon-img{
  width: 28px;
  height: 28px;
  opacity: .95;
}

.player-name{
  font-weight: 900;
  color: rgba(255,255,255,.92);
}

/* pill de level */
.level-pill{
  display: inline-block;
  padding: 6px 10px;
  border-radius: 999px;
  font-weight: 900;
  font-size: 12px;
  color: #ffd27d;
  border: 1px solid rgba(255,210,125,.22);
  background: rgba(15,15,15,.55);
  box-shadow: 0 0 0 1px rgba(0,0,0,.25) inset;
}

/* pill do reino */
.empire-pill{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  font-weight: 900;
  font-size: 12px;
  background: rgba(15,15,15,.55);
  border: 1px solid rgba(255,255,255,.10);
  color: rgba(255,255,255,.85);
}

.empire-pill img{
  width: 16px;
  height: 16px;
  opacity: .95;
}

.empire-pill-shinsoo{ border-color: rgba(255,75,75,.28); }
.empire-pill-chunjo{ border-color: rgba(255,210,125,.28); }
.empire-pill-jinno{ border-color: rgba(90,167,255,.28); }

/* ===== responsivo ===== */
@media (max-width: 992px){
  .top99-grid{ grid-template-columns: repeat(2, 1fr); }
  .ranking-deco-img{ width: 260px; right: -60px; opacity: .20; }
}

@media (max-width: 576px){
  .top99-grid{ grid-template-columns: 1fr; }
  .ranking-table-head{ flex-direction: column; align-items: flex-start; }
}