/* =========================================================
   OVERALL RANKINGS
   ========================================================= */

.table-card.overall-active{
  width:100%;
  overflow:visible;
  border-radius:0;
}

.table-card.overall-active .row{
  min-height:74px;
  padding:0 18px;
  position:relative;
}

.overall-tier-cell{
  min-width:0;
  width:100%;
  overflow:visible;
  padding:0 4px;
  position:relative;
  z-index:10;
}

.overall-tiers{
  width:100%;
  display:grid;
  grid-template-columns:repeat(12,minmax(27px,1fr));
  gap:5px;
  align-items:start;
}

.overall-tier-item{
  width:100%;
  min-width:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  gap:4px;
}

.overall-kit-icon{
  width:30px;
  height:30px;
  display:grid;
  place-items:center;
  border:1px solid var(--border);
  border-radius:7px;
  background:#0e1117;
  overflow:hidden;
}

.overall-kit-icon .kit-icon-img{
  width:22px;
  height:22px;
}

.kit-icon-img-placeholder{
  display:block;
  width:22px;
  height:22px;
}

.overall-tier-item .tier{
  width:32px;
  height:20px;
  border-radius:5px;
  font-size:9px;
}

.overall-unranked{
  display:inline-flex;
  width:32px;
  height:20px;
  align-items:center;
  justify-content:center;
  border-radius:5px;
  background:#202530;
  color:#8992a0;
  font-size:11px;
  font-weight:800;
}

.table-card.overall-active .points{
  padding-left:10px;
}

/* =========================================================
   GAMEMODE TIER BOARD
   ========================================================= */

.mode-board-wrap{
  padding:18px 10px 10px;
  background:transparent;
}

.mode-board-topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin:0 0 14px;
  padding:0 6px 8px;
}

.mode-board-heading{
  display:flex;
  align-items:center;
  gap:10px;
}

.mode-board-heading .mode-board-icon{
  width:36px;
  height:36px;
  display:grid;
  place-items:center;
  border:1px solid var(--border);
  border-radius:10px;
  background:#171b23;
}

.mode-board-heading .kit-icon-img{
  width:23px;
  height:23px;
}

.mode-board-heading strong{
  display:block;
  font-size:16px;
}

.mode-board-heading span:not(.mode-board-icon){
  display:block;
  color:var(--muted);
  font-size:11px;
  margin-top:2px;
}

.mode-board{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:8px;
  align-items:start;
}

.mode-tier-column{
  border:1px solid var(--border);
  border-radius:10px;
  overflow:hidden;
  background:#11141b;
  min-width:0;
}

.mode-tier-header{
  min-height:46px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 12px;
  border-bottom:1px solid var(--border);
}

.mode-tier-header>div{
  display:flex;
  align-items:baseline;
  gap:6px;
}

.mode-tier-header strong{
  font-size:16px;
  line-height:1;
}

.mode-tier-count{
  min-width:22px;
  height:20px;
  padding:0 7px;
  border-radius:7px;
  background:#202530;
  color:#aeb6c2;
  display:grid;
  place-items:center;
  font-size:10px;
  font-weight:800;
}

.mode-tier-players{
  display:grid;
}

.mode-board-player{
  display:grid;
  grid-template-columns:24px 30px minmax(0,1fr) 24px;
  align-items:center;
  gap:7px;
  min-height:38px;
  padding:4px 12px;
  cursor:pointer;
  transition:.15s;
  min-width:0;
}

.mode-board-position{
  font-size:9px;
  color:#667080;
  font-weight:800;
  text-align:center;
}

.mode-board-avatar{
  width:30px;
  height:30px;
  border-radius:4px;
  object-fit:cover;
  background:#202530;
}

.mode-board-info{
  min-width:0;
}

.mode-tier-empty{
  min-height:70px;
  display:grid;
  place-items:center;
  padding:10px 5px;
  text-align:center;
  color:#667080;
  font-size:10px;
}

/* =========================================================
   TIER BOARD COLOURS
   ========================================================= */

.tier-column-1 .mode-tier-header{
  background:linear-gradient(180deg,#4b3b1d,#30291f);
  color:#f4c95f;
}

.tier-column-2 .mode-tier-header{
  background:linear-gradient(180deg,#343944,#292e38);
  color:#c6ccd7;
}

.tier-column-3 .mode-tier-header{
  background:linear-gradient(180deg,#3a2b24,#30251f);
  color:#d28a4b;
}

.tier-column-4 .mode-tier-header,
.tier-column-5 .mode-tier-header{
  background:#18202d;
  color:#b9c8dc;
}

/* =========================================================
   MODE BOARD PLAYER ROWS
   ========================================================= */

.table-card:not(.overall-active) .mode-board-player.mode-board-high,
.table-card:not(.overall-active) .mode-board-player.mode-board-high:hover{
  background:#273144;
  border-top:1px solid #131822;
}

.table-card:not(.overall-active) .mode-board-player.mode-board-low,
.table-card:not(.overall-active) .mode-board-player.mode-board-low:hover{
  background:#171e29;
  border-top:1px solid #131822;
}

.table-card:not(.overall-active) .mode-board-info{
  min-width:0;
}

.mode-board-arrows{
  grid-column:4;
  justify-self:end;
  width:28px;
  margin:0;
  padding:0;
  text-align:right;
  font-size:14px;
  line-height:1;
  font-weight:900;
  letter-spacing:.5px;
  transform:translateY(-1px);
  text-shadow:0 0 1px rgba(63,81,111,.35);
}

.mode-board-arrows.high{
  letter-spacing:.5px;
}

.mode-board-arrows.low{
  letter-spacing:.5px;
}

/* =========================================================
   HIDE STANDARD TABLE HEADER ON MODE BOARDS
   ========================================================= */

.table-card:not(.overall-active){
  padding:0;
}