/* =========================================================
   MEDIUM SCREENS
   ========================================================= */

@media(max-width:1050px){

  .table-card.overall-active{
    overflow-x:auto;
  }

  .table-card.overall-active .row{
    min-width:980px;
  }

  .mode-board-wrap{
    overflow-x:auto;
    padding-left:10px;
    padding-right:10px;
  }

  .mode-board{
    min-width:940px;
    overflow:visible;
  }

  #profileDialog{
    width:min(700px,calc(100% - 24px));
    max-width:700px;
  }

  #profile{
    padding:26px 30px 28px;
  }

  .profile-tier-strip{
    grid-template-columns:repeat(6,minmax(48px,1fr));
    gap:7px 3px;
  }
}

/* =========================================================
   TABLET / MOBILE
   ========================================================= */

@media(max-width:750px){

  nav{
    display:none;
  }

  .mobile-menu{
    display:block;
    margin-left:auto;
  }

  .topbar{
    gap:10px;
  }

  main{
    width:min(100% - 24px,1180px);
    padding-top:35px;
  }

  h1{
    font-size:34px;
  }

  .toolbar{
    flex-wrap:wrap;
  }

  .search-wrap{
    flex-basis:100%;
  }

  select{
    height:44px;
    flex:1;
  }

  footer{
    flex-direction:column;
  }

  .footer-links{
    order:2;
  }

  .row{
    grid-template-columns:
      45px
      minmax(180px,1fr)
      72px
      70px
      80px;
    padding:0 12px;
  }

  .avatar{
    width:34px;
    height:34px;
  }

  .player{
    gap:8px;
  }

  .sub{
    display:none;
  }

  .points{
    font-size:13px;
  }

  .mode-board-wrap{
    padding:12px;
  }

  .mode-board-topbar{
    padding:0 2px;
  }

  .mode-board{
    min-width:940px;
  }
}

/* =========================================================
   PROFILE - MOBILE
   ========================================================= */

@media(max-width:600px){

  #profileDialog{
    width:calc(100% - 20px);
    max-width:none;
  }

  #profile{
    padding:22px 15px 24px;
  }

  .profile-avatar{
    width:90px;
    height:90px;
  }

  .profile-hero h2{
    font-size:25px;
  }

  .profile-big-label{
    font-size:20px;
  }

  .profile-position-card{
    height:43px;
  }

  .profile-position-card b{
    font-size:16px;
  }

  .profile-position-card span:last-child{
    font-size:13px;
  }

  .profile-tier-strip{
    grid-template-columns:repeat(6,minmax(38px,1fr));
    grid-template-rows:repeat(2,auto);
    min-height:135px;
    padding:10px 6px;
    gap:7px 2px;
  }

  .profile-tier-item{
    min-width:38px;
  }

  .profile-tier-icon{
    width:31px;
    height:31px;
  }

  .profile-tier-icon .kit-icon-img{
    width:19px;
    height:19px;
  }

  .profile-tier-item .tier,
  .profile-unranked-dot{
    width:31px;
    height:19px;
  }
}

/* =========================================================
   VERY SMALL PHONES
   ========================================================= */

@media(max-width:420px){

  #profile{
    padding:20px 11px 22px;
  }

  .profile-tier-strip{
    grid-template-columns:repeat(6,minmax(34px,1fr));
    gap:5px 1px;
    padding:9px 3px;
    min-height:125px;
  }

  .profile-tier-item{
    min-width:34px;
  }

  .profile-tier-icon{
    width:28px;
    height:28px;
  }

  .profile-tier-icon .kit-icon-img{
    width:18px;
    height:18px;
  }

  .profile-tier-item .tier,
  .profile-unranked-dot{
    width:28px;
    height:18px;
    font-size:8px;
  }

  .profile-position-card{
    padding:0 8px;
    gap:5px;
  }

  .profile-position-card strong{
    min-width:43px;
    font-size:21px;
  }

  .profile-position-card b{
    font-size:14px;
  }

  .profile-position-card span:last-child{
    font-size:11px;
  }
}

/* =========================================================
   SITE INFO MOBILE
   ========================================================= */

@media(max-width:600px){

  .site-info-hero{
    padding:24px 22px 20px;
  }

  .site-info-content{
    padding:22px;
  }

  .info-grid,
  .points-list{
    grid-template-columns:1fr;
  }
}