/* =========================================================
   PODIUM RANK PLATES
   ========================================================= */

.table-card.overall-active .row{
  position:relative;
  min-height:66px;
}

.table-card.overall-active .row .rank-plate{
  align-self:stretch;
  display:flex;
  align-items:center;
  gap:6px;
  margin-left:-18px;
  width:auto;
  padding:0 0 0 12px;
  overflow:visible;
  border-radius:0 8px 8px 0;
  transition:transform 0.3s ease-out,filter 0.3s ease-out;
  position:relative;
}

.table-card.overall-active .row .rank-plate::before{
  border-radius:inherit;
}

.table-card.overall-active .row:hover .rank-plate{
  transform:translateX(4px);
}

.table-card.overall-active .row .rank-num{
  flex:none;
  font-size:20px;
  font-weight:800;
  font-style:italic;
}

.table-card.overall-active .row .rank-plate .avatar{
  flex:none;
  margin-left:6px;
  margin-right:-10px;
  width:48px;
  height:48px;
  border-radius:6px;
  background:transparent;
}

.table-card.overall-active .row .player-info{
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:2px;
}

/* #1 gold */
.table-card.overall-active .row.rank-gold .rank-plate{
  background:repeating-linear-gradient(
    120deg,
    #f5d03b,
    #f5d03b 16px,
    #ddb624 16px,
    #ddb624 32px
  );
  color:#ffffff;
  position:relative;
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.3);
}

.table-card.overall-active .row.rank-gold .rank-plate::before{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,#fff0a033 0%,transparent 55%);
  pointer-events:none;
}

.table-card.overall-active .row.rank-gold .rank-num{
  position:relative;
  z-index:1;
  text-shadow:0 2px 4px rgba(0,0,0,0.3);
}

/* #2 silver */
.table-card.overall-active .row.rank-silver .rank-plate{
  background:repeating-linear-gradient(
    120deg,
    #68bbe7,
    #68bbe7 16px,
    #449dd1 16px,
    #449dd1 32px
  );
  color:#ffffff;
  position:relative;
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.2);
}

.table-card.overall-active .row.rank-silver .rank-plate::before{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,#a8dcf033 0%,transparent 55%);
  pointer-events:none;
}

.table-card.overall-active .row.rank-silver .rank-num{
  position:relative;
  z-index:1;
  text-shadow:0 2px 4px rgba(0,0,0,0.3);
}

/* #3 bronze */
.table-card.overall-active .row.rank-bronze .rank-plate{
  background:repeating-linear-gradient(
    120deg,
    #e4a767,
    #e4a767 16px,
    #cc8a50 16px,
    #cc8a50 32px
  );
  color:#ffffff;
  position:relative;
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.2);
}

.table-card.overall-active .row.rank-bronze .rank-plate::before{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,#f5cfa033 0%,transparent 55%);
  pointer-events:none;
}

.table-card.overall-active .row.rank-bronze .rank-num{
  position:relative;
  z-index:1;
  text-shadow:0 2px 4px rgba(0,0,0,0.3);
}

/* Everyone else */
.table-card.overall-active .row.rank-default .rank-plate{
  background:repeating-linear-gradient(
    120deg,
    #25263b,
    #25263b 16px,
    #1f1f33 16px,
    #1f1f33 32px
  );
  color:#ffffff;
  position:relative;
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.1);
}

.table-card.overall-active .row.rank-default .rank-plate::before{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,#3a3b5833 0%,transparent 55%);
  pointer-events:none;
}

.table-card.overall-active .row.rank-default .rank-num{
  position:relative;
  z-index:1;
  text-shadow:0 2px 4px rgba(0,0,0,0.3);
}

@media(max-width:750px){
  .table-card.overall-active .row{
    grid-template-columns:
      90px
      minmax(150px,1fr)
      68px
      65px;
  }
  .table-card.overall-active .row .rank-plate{
    margin-left:0;
    width:100%;
    padding:0 8px;
    gap:6px;
  }
  .table-card.overall-active .row .rank-num{
    font-size:15px;
  }
  .table-card.overall-active .row .rank-plate .avatar{
    width:40px;
    height:40px;
  }
}

/* =========================================================
   TIER TOOLTIP
   ========================================================= */

.tt-floating{
  position:fixed;
  z-index:999;
  left:0;
  top:0;
  transform:translate(-50%,-100%) translateY(-5px);
  background:#171b23;
  border:1px solid var(--border);
  border-radius:10px;
  padding:9px 14px;
  min-width:110px;
  text-align:center;
  box-shadow:0 14px 34px rgba(0,0,0,.5);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .12s ease, transform .12s ease;
  font-family:Inter,system-ui,sans-serif;
  right:auto;
  bottom:auto;
  margin:0;
  overflow:visible;
  color:inherit;
  width:max-content;
  height:auto;
}

.tt-floating.show{
  opacity:1;
  visibility:visible;
  transform:translate(-50%,-100%) translateY(-11px);
}

.tt-floating strong{
  display:block;
  font-size:13px;
  font-weight:800;
  color:var(--text);
  white-space:nowrap;
}

.tt-floating span{
  display:block;
  margin-top:2px;
  font-size:11px;
  color:var(--muted);
  white-space:nowrap;
}

.tt-floating::after{
  content:"";
  position:absolute;
  top:100%;
  left:50%;
  transform:translateX(-50%);
  border:6px solid transparent;
  border-top-color:#171b23;
}

.overall-tier-item{
  position:relative;
  cursor:help;
  transition:transform .2s var(--ease-out-expo);
}
.overall-tier-item:hover{
  transform:translateY(-4px);
  z-index:2;
}
.profile-tier-item{
  cursor:help;
}