:root{
  --gold:#f1d77e;
  --gold-border:#c8a95a;
}

.ranking-board{
  margin-top:14px;
}

.ranking-table-wrap{
  overflow:auto;
  border-radius:10px;
  background:rgba(0,0,0,.18);
}

.ranking-table{
  width:100%;
  border-collapse:collapse;
  min-width:860px;
  table-layout:fixed; /* keep all rows perfectly aligned */
}

.ranking-table col.col-rank{ width:90px; }
.ranking-table col.col-class{ width:110px; }
.ranking-table col.col-name{ width:260px; }
.ranking-table col.col-level{ width:90px; }
.ranking-table col.col-guild{ width:200px; }
.ranking-table col.col-online{ width:160px; }
.ranking-table col.col-player{ width:250px; }
.ranking-table col.col-total{ width:170px; }
.ranking-table col.col-count{ width:140px; }
.ranking-table col.col-recorded{ width:200px; }

.ranking-table thead th{
  padding:14px 10px;
  text-align:left;
  font-family:"Cinzel",serif;
  font-weight:800;
  letter-spacing:.04em;
  color:#f7e8b7;
  border-bottom:1px solid rgba(241,215,126,.55);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.ranking-tabs{
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  margin:10px 0 6px;
}

.ranking-tab{
  appearance:none;
  border:1px solid rgba(241,215,126,.55);
  background:rgba(0,0,0,.15);
  color:#f7e8b7;
  padding:8px 14px;
  border-radius:10px;
  cursor:pointer;
  font-family:"Cinzel",serif;
  font-weight:800;
  letter-spacing:.02em;
}

.ranking-tab--disabled-feature{
  display:none !important;
}

.ranking-tab.is-active{
  background:rgba(241,215,126,.14);
  border-color:rgba(241,215,126,.85);
  color:#fff2b8;
}

.ranking-table tbody td{
  padding:14px 10px;
  border-bottom:2px solid rgba(19,19,19,.95);
  color:#eef2ff;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.ranking-table td.rank{
  text-align:center;
}

.ranking-table td.class{
  text-align:center;
}

.ranking-table thead th:nth-child(1),
.ranking-table thead th:nth-child(2),
.ranking-table thead th:nth-child(4){
  text-align:center;
}
.ranking-table thead th:nth-child(6){
  text-align:right;
}

.ranking-table tbody td:nth-child(4){
  text-align:center;
}

.ranking-table td.class .class-icon{
  width:26px;
  height:26px;
  display:inline-block;
  border-radius:3px;
  border:1px solid rgba(255,255,255,.25);
  background-image:url("./assets/class-icons.png");
  background-repeat:no-repeat;
  background-size:156px 208px;
  /* ranking.js sẽ set background-position theo data-class-id */
  background-position:0 0;
  image-rendering:auto;
}

.ranking-table td.time{
  text-align:right;
}

.ranking-table td.amount,
.ranking-table td.count,
.ranking-table td.recorded{
  text-align:right;
  font-variant-numeric:tabular-nums;
}

.ranking-table.is-cashvip{
  min-width:960px;
}

.ranking-table.is-cashvip thead th:nth-child(1),
.ranking-table.is-cashvip thead th:nth-child(2){
  text-align:center;
}

.ranking-table.is-cashvip thead th:nth-child(4),
.ranking-table.is-cashvip thead th:nth-child(5),
.ranking-table.is-cashvip thead th:nth-child(6){
  text-align:right;
}

.ranking-table.is-cashvip tbody td:nth-child(4),
.ranking-table.is-cashvip tbody td:nth-child(5),
.ranking-table.is-cashvip tbody td:nth-child(6){
  text-align:right;
}

.ranking-table td.empty{
  padding:28px 10px;
  text-align:center;
  color:rgba(238,242,255,.72);
  font-weight:700;
}

.ranking-table td.time.is-online{
  color:#87f3b2; /* green */
  font-weight:800;
}

.ranking-table td.time.is-offline{
  color:rgba(238,242,255,.62); /* gray */
  font-weight:700;
}

.ranking-table img{
  height:26px;
  width:auto;
  image-rendering:auto;
}

.ranking-table img.trophy{
  height:28px;
}

@media (max-width:900px){
  .ranking-table{
    min-width:720px;
  }

  .ranking-table.is-cashvip{
    min-width:860px;
  }
}