/* =========================================================
   LEADERBOARD PERFORMANCE
   ========================================================= */
.overall-chunk{
  display:grid;
  gap:5px;
  margin:-16px -32px -36px;
  padding:16px 32px 36px;
  content-visibility:auto;
  contain-intrinsic-width:none;
  min-width:0;
  pointer-events:none;
}
.overall-chunk>.row{pointer-events:auto}
.overall-chunk:hover{z-index:1}
.overall-sentinel{height:1px;margin-top:-6px}
#rankings.is-scrolling .row,
#rankings.is-scrolling .mode-board-player{pointer-events:none}

/* =========================================================
   GAMEMODE TAB BAR
   ========================================================= */
.kit-tabs-shell{
  --tab-accent:var(--accent);
  --tab-glow:color-mix(in srgb,var(--tab-accent) 55%,transparent);
  --tab-bg:#0f1722;
  --tab-border:#1b2736;
  --tab-pill:#151e2b;
  --tab-pill-border:#263447;
  --tab-hover:#131b27;
  position:relative;
  margin-bottom:0;
}
.rankings-page .kit-tabs-shell + .info-strip{
  margin-top:0;
  border-top:0;
  border-top-left-radius:0;
  border-top-right-radius:0;
}
.kit-tabs{
  position:relative;
  display:flex;
  align-items:stretch;
  gap:4px;
  padding:5px;
  margin:0;
  background:var(--tab-bg);
  border:1px solid var(--tab-border);
  border-bottom:0;
  border-radius:14px 14px 0 0;
  overflow-x:auto;
  overflow-y:hidden;
  scrollbar-width:none;
  overscroll-behavior-x:contain;
}
.kit-tabs::-webkit-scrollbar{display:none}

.kit-tabs button{
  position:relative;
  flex:1 1 0;
  min-width:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:12px 10px 15px;
  margin:0;
  border:1px solid transparent;
  border-radius:10px;
  background:transparent;
  color:var(--muted);
  font:inherit;
  font-size:13px;
  font-weight:600;
  line-height:1.2;
  white-space:nowrap;
  cursor:pointer;
  overflow:hidden;
  transition:color .2s ease,background-color .2s ease,border-color .2s ease;
  animation:kit-tab-enter .36s ease-out backwards;
  animation-delay:calc(var(--i,0) * 35ms);
}
.kit-tabs button:hover{background:var(--tab-hover);color:var(--text)}
.kit-tabs button.active{
  color:var(--text);
  background:var(--tab-pill);
  border-color:var(--tab-pill-border);
}
.kit-tabs button:focus-visible{outline:2px solid var(--tab-accent);outline-offset:-3px}
.kit-tabs button > span{position:relative;z-index:1}

.kit-tabs button.active::before{
  content:"";
  position:absolute;
  left:0;right:0;bottom:0;
  height:100%;
  background:linear-gradient(to top,color-mix(in srgb,var(--tab-accent) 13%,transparent),transparent 75%);
  pointer-events:none;
  z-index:0;
  animation:kit-tab-fill-up .3s ease-out;
}

.kit-tab-icon{
  display:grid;
  place-items:center;
  width:22px;
  height:22px;
  opacity:.55;
  transition:opacity .2s ease,transform .25s cubic-bezier(.34,1.56,.64,1);
}
.kit-tabs button:hover .kit-tab-icon{opacity:.85}
.kit-tabs button.active .kit-tab-icon{opacity:1;transform:translateY(-1px) scale(1.08)}
.kit-tab-icon img,
.kit-tab-icon .kit-icon-img{width:22px;height:22px;object-fit:contain}
.kit-tab-icon .kit-icon-img-placeholder{font-size:16px}

/* Glowing bar under the active tab */
.kit-tabs-indicator{
  position:absolute;
  left:0;
  bottom:9px;
  height:3px;
  width:0;
  border-radius:999px;
  background:var(--tab-accent);
  box-shadow:0 0 10px var(--tab-glow);
  pointer-events:none;
  z-index:2;
  opacity:0;
}
.kit-tabs-indicator.is-placed{
  opacity:1;
  animation:kit-tab-indicator-in .32s cubic-bezier(.16,1,.3,1) both;
}
.kit-tabs-indicator.is-animated{
  transition:transform .45s cubic-bezier(.25,.1,.25,1),width .45s cubic-bezier(.25,.1,.25,1);
}

.kit-tabs-fade{
  position:absolute;
  top:1px;
  bottom:0;
  width:40px;
  z-index:3;
  pointer-events:none;
  opacity:0;
  transition:opacity .2s ease;
}
.kit-tabs-fade-left{left:1px;border-radius:13px 0 0 0;background:linear-gradient(to right,var(--tab-bg),transparent)}
.kit-tabs-fade-right{right:1px;border-radius:0 13px 0 0;background:linear-gradient(to left,var(--tab-bg),transparent)}
.kit-tabs-shell.fade-left .kit-tabs-fade-left,
.kit-tabs-shell.fade-right .kit-tabs-fade-right{opacity:1}

@media(max-width:1100px){
  .kit-tabs button{font-size:12px;padding:11px 6px 14px}
  .kit-tab-icon,.kit-tab-icon img,.kit-tab-icon .kit-icon-img{width:20px;height:20px}
}
@media(max-width:750px){
  .kit-tabs button{flex:0 0 auto;min-width:84px;padding:10px 10px 14px;gap:5px;font-size:12px}
  .kit-tab-icon,.kit-tab-icon img,.kit-tab-icon .kit-icon-img{width:22px;height:22px}
}

@keyframes kit-tab-enter{from{opacity:0}to{opacity:1}}
@keyframes kit-tab-fill-up{from{height:0}to{height:100%}}
@keyframes kit-tab-indicator-in{from{opacity:0;scale:.3 1}to{opacity:1;scale:1 1}}

@media(prefers-reduced-motion:reduce){
  .kit-tabs button,
  .kit-tabs button.active::before,
  .kit-tabs-indicator.is-placed{animation:none}
  .kit-tabs-indicator.is-animated,
  .kit-tab-icon{transition:none}
}

/* Overall leaderboard */
.rankings-page .table-card.overall-active{
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
}
.rankings-page .table-card.overall-active .overall-ranking-list{
  padding:0;
}

@media(max-width:750px){
  .overall-chunk{margin-left:-8px;margin-right:-8px;padding-left:8px;padding-right:8px}
}