/* IWBP-SHELL-V11C-HOME-LISTS-V4C */


/* =========================================================
   MOBILE DRAWER CLEANUP
   ========================================================= */

@media(max-width:760px){

  .iwbp-mobile-drawer{
    background:#0d1218;
  }

  .iwbp-mobile-drawer-scroll{
    padding:18px 18px 22px!important;
  }

  .iwbp-mobile-drawer-label{
    padding:4px 2px 10px!important;
    color:#55616c!important;
    font-size:8px!important;
    letter-spacing:.16em!important;
  }

  .iwbp-mobile-drawer-nav{
    display:block!important;
  }

  .iwbp-mobile-drawer-item{
    position:relative!important;

    min-height:50px!important;

    margin:0!important;
    padding:0 35px 0 14px!important;

    display:flex!important;
    align-items:center!important;

    border:0!important;
    border-radius:8px!important;

    background:transparent!important;

    color:#828e98!important;

    font-size:13px!important;
    font-weight:560!important;
  }

  .iwbp-mobile-drawer-item + .iwbp-mobile-drawer-item{
    margin-top:2px!important;
  }

  .iwbp-mobile-drawer-item-icon,
  .iwbp-mobile-drawer-item-arrow{
    display:none!important;
  }

  .iwbp-mobile-drawer-item::before{
    content:"";

    position:absolute;

    left:0;
    top:50%;

    width:2px;
    height:18px;

    border-radius:2px;

    background:transparent;

    transform:translateY(-50%);
  }

  .iwbp-mobile-drawer-item::after{
    content:"";

    position:absolute;

    right:14px;
    top:50%;

    width:5px;
    height:5px;

    border-right:1.5px solid #48535d;
    border-bottom:1.5px solid #48535d;

    transform:
      translateY(-50%)
      rotate(-45deg);
  }

  .iwbp-mobile-drawer-item:active{
    background:rgba(255,255,255,.022)!important;
    color:#d7dee3!important;
  }

  .iwbp-mobile-drawer-item.active{
    background:rgba(255,255,255,.032)!important;
    color:#f2f5f7!important;
  }

  .iwbp-mobile-drawer-item.active::before{
    background:#a0abb4;
  }


  /* account */

  .iwbp-mobile-drawer-actions{
    display:block!important;
  }

  #iwbp-mobile-account-action{
    width:100%!important;
    min-height:48px!important;

    padding:0 14px!important;

    justify-content:flex-start!important;

    border:1px solid rgba(255,255,255,.07)!important;
    border-radius:9px!important;

    background:rgba(255,255,255,.018)!important;

    color:#aeb8c0!important;

    font-size:12px!important;
  }

  #iwbp-mobile-account-action > svg{
    display:none!important;
  }


  /* useless on phone */

  .iwbp-mobile-drawer-actions
  .iwbp-mobile-drawer-action.primary{
    display:none!important;
  }


  /* Discord + YouTube */

  .iwbp-mobile-drawer-socials{
    display:grid!important;

    grid-template-columns:
      repeat(2,minmax(0,1fr))!important;

    gap:8px!important;
  }

  .iwbp-mobile-drawer-socials
  .iwbp-mobile-drawer-action{
    min-height:46px!important;

    padding:0 12px!important;

    justify-content:center!important;

    border-radius:9px!important;

    background:rgba(255,255,255,.014)!important;

    color:#929da7!important;

    font-size:11px!important;
    font-weight:650!important;
  }

  .iwbp-mobile-drawer-socials
  .iwbp-mobile-drawer-action svg{
    display:none!important;
  }

  .iwbp-mobile-drawer-socials
  .iwbp-mobile-drawer-action::before{
    content:"";

    width:5px;
    height:5px;

    flex:0 0 5px;

    margin-right:7px;

    border-radius:50%;
  }

  .iwbp-mobile-drawer-socials
  a[href*="discord"]{
    border-color:rgba(88,101,242,.18)!important;
  }

  .iwbp-mobile-drawer-socials
  a[href*="discord"]::before{
    background:#5865f2;
  }

  .iwbp-mobile-drawer-socials
  a[href*="youtube"]{
    border-color:rgba(255,70,70,.16)!important;
  }

  .iwbp-mobile-drawer-socials
  a[href*="youtube"]::before{
    background:#ef4b4b;
  }
}


/* =========================================================
   HOME LISTS V4C
   ========================================================= */

#tab-home .panel:has(#home-latest-runs),
#tab-home .panel:has(#home-points-leaders){
  position:relative;

  overflow:hidden;

  border-color:rgba(255,255,255,.08)!important;

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.027),
      rgba(255,255,255,.009)
    )!important;
}

#tab-home .panel:has(#home-latest-runs)::before,
#tab-home .panel:has(#home-points-leaders)::before{
  content:"";

  position:absolute;

  top:0;
  left:0;
  right:0;

  height:100px;

  pointer-events:none;

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.018),
      transparent
    );
}

#tab-home .panel:has(#home-latest-runs) > *,
#tab-home .panel:has(#home-points-leaders) > *{
  position:relative;
  z-index:1;
}

#home-latest-runs,
#home-points-leaders{
  padding:7px 9px 9px!important;
}


/* =========================================================
   LATEST RUNS
   ========================================================= */

#tab-home .home-run-row-v3{
  --run-accent:#78848e;
  --run-soft:rgba(120,132,142,.065);

  position:relative;

  min-height:70px!important;

  margin:4px 0!important;

  padding:
    10px 12px
    10px 15px!important;

  overflow:hidden;

  border:
    1px solid rgba(255,255,255,.06)!important;

  border-radius:9px!important;

  background:
    linear-gradient(
      90deg,
      var(--run-soft),
      rgba(255,255,255,.015) 43%,
      rgba(255,255,255,.007)
    )!important;

  transition:
    background .15s ease,
    border-color .15s ease,
    transform .15s ease!important;
}

#tab-home .home-run-row-v3::before{
  content:"";

  position:absolute;

  left:0;
  top:10px;
  bottom:10px;

  width:2px;

  border-radius:2px;

  background:var(--run-accent);

  opacity:.85;
}

#tab-home .home-run-row-v3:hover{
  border-color:rgba(255,255,255,.105)!important;

  background:
    linear-gradient(
      90deg,
      var(--run-soft),
      rgba(255,255,255,.029) 43%,
      rgba(255,255,255,.012)
    )!important;

  transform:translateY(-1px);
}


/* category identity */

#tab-home .home-run-row-v3[data-home-category="0"]{
  --run-accent:#4f86b4;
  --run-soft:rgba(79,134,180,.085);
}

#tab-home .home-run-row-v3[data-home-category="1"]{
  --run-accent:#d0a12d;
  --run-soft:rgba(208,161,45,.085);
}

#tab-home .home-run-row-v3[data-home-category="2"]{
  --run-accent:#a94c3e;
  --run-soft:rgba(169,76,62,.08);
}

#tab-home .home-run-row-v3[data-home-category="3"]{
  --run-accent:#4fa066;
  --run-soft:rgba(79,160,102,.08);
}

#tab-home .home-run-row-v3[data-home-category="4"]{
  --run-accent:#8661c2;
  --run-soft:rgba(134,97,194,.08);
}


/* map thumb */

#tab-home
.home-run-row-v3
img[title]{
  width:68px!important;
  height:40px!important;

  border:
    1px solid rgba(255,255,255,.09)!important;

  border-radius:7px!important;

  box-shadow:
    0 6px 17px rgba(0,0,0,.24)!important;

  opacity:.98!important;
}


/* player */

#tab-home
.home-run-row-v3
.home-player-link-v3{
  font-size:13px!important;
  font-weight:630!important;
}


/* run time */

#tab-home
.home-run-row-v3
>
div:last-child{
  min-width:78px!important;

  padding:8px 10px!important;

  border:
    1px solid rgba(255,255,255,.067)!important;

  border-radius:7px!important;

  background:
    rgba(0,0,0,.23)!important;

  color:#edf2f5!important;

  font-size:12px!important;
  font-weight:690!important;

  text-align:center!important;

  font-variant-numeric:
    tabular-nums!important;
}


/* =========================================================
   LEADERS
   ========================================================= */

#tab-home .home-leader-row-v3{
  position:relative;

  min-height:62px!important;

  margin:4px 0!important;

  padding:9px 11px!important;

  border:
    1px solid rgba(255,255,255,.055)!important;

  border-radius:9px!important;

  background:
    rgba(255,255,255,.012)!important;

  transition:
    background .15s ease,
    border-color .15s ease,
    transform .15s ease!important;
}

#tab-home .home-leader-row-v3:hover{
  border-color:rgba(255,255,255,.10)!important;

  background:
    rgba(255,255,255,.029)!important;

  transform:translateY(-1px);
}

#tab-home
.home-leader-row-v3
>
div:first-child{
  width:29px!important;
  height:29px!important;

  display:flex!important;

  align-items:center!important;
  justify-content:center!important;

  border:
    1px solid rgba(255,255,255,.067)!important;

  border-radius:7px!important;

  background:
    rgba(255,255,255,.022)!important;

  color:#77838d!important;

  font-size:9px!important;
  font-weight:720!important;

  font-variant-numeric:
    tabular-nums!important;
}


/* podium */

#tab-home .home-leader-row-v3[data-home-rank="1"]{
  border-color:rgba(205,168,76,.15)!important;

  background:
    linear-gradient(
      90deg,
      rgba(205,168,76,.078),
      rgba(255,255,255,.014) 48%,
      rgba(255,255,255,.006)
    )!important;
}

#tab-home
.home-leader-row-v3[data-home-rank="1"]
>
div:first-child{
  color:#d4b15c!important;

  border-color:
    rgba(205,168,76,.23)!important;

  background:
    rgba(205,168,76,.075)!important;
}

#tab-home
.home-leader-row-v3[data-home-rank="2"]
>
div:first-child{
  color:#b2bbc2!important;

  border-color:
    rgba(178,187,194,.18)!important;
}

#tab-home
.home-leader-row-v3[data-home-rank="3"]
>
div:first-child{
  color:#ad7955!important;

  border-color:
    rgba(173,121,85,.18)!important;
}


/* =========================================================
   MOBILE FEED
   ========================================================= */

@media(max-width:760px){

  #home-latest-runs,
  #home-points-leaders{
    padding:6px 7px 8px!important;
  }

  #tab-home .home-run-row-v3{
    min-height:66px!important;

    padding:
      9px 9px
      9px 12px!important;

    border-radius:8px!important;
  }

  #tab-home
  .home-run-row-v3
  img[title]{
    width:54px!important;
    height:34px!important;

    border-radius:6px!important;
  }

  #tab-home
  .home-run-row-v3
  >
  div:last-child{
    min-width:64px!important;

    padding:7px!important;

    border-radius:6px!important;

    font-size:11px!important;
  }

  #tab-home .home-leader-row-v3{
    min-height:58px!important;

    padding:8px!important;

    grid-template-columns:
      30px minmax(0,1fr) auto!important;

    border-radius:8px!important;
  }

  #tab-home
  .home-leader-row-v3
  >
  div:first-child{
    width:27px!important;
    height:27px!important;

    border-radius:6px!important;
  }
}