/* V3.1.0 — 7TuT Cloud player catalogue / ranking polish. */

.vlp-catalog-summary{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin:0 0 14px;
}
.vlp-catalog-summary .vlp-result-count{margin:0}
.vlp-catalog-summary a,
.vlp-filter-reset{
  color:#7c7c7c;
  font-weight:700;
  font-size:13px;
  text-decoration:none;
}
.vlp-catalog-summary a:hover,
.vlp-filter-reset:hover{color:var(--vlp-lime)}
.vlp-filter-reset{
  grid-column:1/-1;
  justify-self:start;
  margin-top:-2px;
}

.vlp-player-photo,
.vlp-ranking-avatar,
.vlp-ranking-row-avatar,
.vlp-player-image{
  position:relative;
}
.vlp-player-photo-fallback{
  display:grid;
  place-items:center;
  width:100%;
  height:100%;
  min-height:inherit;
  background:
    radial-gradient(circle at 30% 20%,rgba(255,79,58,.18),transparent 38%),
    linear-gradient(145deg,#2f2f2f,#222222);
  color:var(--vlp-lime);
  font-weight:900;
  font-size:28px;
  letter-spacing:.04em;
}
.vlp-player-photo-fallback[hidden]{display:none!important}
.vlp-cloud-player-img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}
.vlp-player-detail-img{object-position:center 20%}

.vlp-ranking-section{
  background:linear-gradient(125deg,#1c1c1c,#212121 55%,#1c1c1c);
  color:#fff;
  padding:34px 0 75px;
}
.vlp-ranking{
  display:grid;
  gap:18px;
}
.vlp-ranking .vlp-player-tools{margin:0}
.vlp-ranking-podium{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
}
.vlp-ranking-leader{
  display:grid;
  grid-template-columns:54px minmax(0,1fr) auto;
  grid-template-areas:
    "avatar position score"
    "avatar name score";
  gap:2px 12px;
  align-items:center;
  padding:12px;
  border-radius:9px;
  border:1px solid #ff7a45;
  background:#222222;
}
.vlp-ranking-avatar{
  grid-area:avatar;
  width:54px;
  height:54px;
  overflow:hidden;
  border-radius:50%;
  background:#2e2e2e;
}
.vlp-ranking-avatar .vlp-player-photo-fallback{font-size:20px}
.vlp-ranking-position{
  grid-area:position;
  color:#7c7c7c;
  font-size:11px;
  font-weight:800;
}
.vlp-ranking-leader-name{
  grid-area:name;
  color:#fff;
  font-weight:800;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.vlp-ranking-leader strong{
  grid-area:score;
  color:var(--vlp-lime);
  font-size:22px;
}

.vlp-ranking-table-wrap{
  overflow:auto;
  border:1px solid #ff7a45;
  border-radius:10px;
  background:#222222;
}
.vlp-ranking-table{
  width:100%;
  min-width:760px;
  border-collapse:collapse;
}
.vlp-ranking-table th,
.vlp-ranking-table td{
  padding:12px 14px;
  border-bottom:1px solid rgba(255,122,69,.35);
  text-align:left;
  vertical-align:middle;
}
.vlp-ranking-table th{
  color:#e6e6e6;
  background:#252525;
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.07em;
}
.vlp-ranking-table td{
  color:#f5f5f5;
  font-size:13px;
}
.vlp-ranking-table tbody tr:last-child td{border-bottom:0}
.vlp-ranking-table tbody tr:hover{background:#262626}
.vlp-ranking-rank{
  color:#7c7c7c!important;
  font-weight:800;
}
.vlp-ranking-score{
  color:var(--vlp-lime)!important;
  font-size:18px!important;
  font-weight:900;
}
.vlp-ranking-person{
  display:flex;
  align-items:center;
  gap:10px;
}
.vlp-ranking-person strong{color:#fff}
.vlp-ranking-row-avatar{
  width:42px;
  height:42px;
  overflow:hidden;
  flex:0 0 auto;
  border-radius:50%;
  background:#2e2e2e;
}
.vlp-ranking-row-avatar .vlp-player-photo-fallback{font-size:16px}

@media(max-width:760px){
  .vlp-catalog-summary{align-items:flex-start;flex-direction:column;gap:6px}
  .vlp-ranking-podium{grid-template-columns:1fr}
}