/* HOME-V12-COMMUNITY-ACTIVITY */


/* =========================================================
   COMMUNITY CHAT — HEADER
   ========================================================= */

#tab-home .community-chat-v2{
  margin-top:22px!important;
  overflow:hidden!important;
}


#tab-home .community-chat-v2-head{
  position:relative!important;
  overflow:hidden!important;

  height:50px!important;

  padding:
    0 16px!important;

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

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.042),
      rgba(255,255,255,.014)
    ),
    linear-gradient(
      90deg,
      rgba(0,229,255,.028),
      transparent 43%,
      rgba(144,82,255,.024)
    )!important;
}


#tab-home .community-chat-v2-head::after{
  content:""!important;

  position:absolute!important;

  left:14px!important;
  bottom:0!important;

  width:92px!important;
  height:1px!important;

  background:
    linear-gradient(
      90deg,
      rgba(0,229,255,.95),
      rgba(64,178,255,.75) 45%,
      rgba(144,82,255,.52) 72%,
      transparent 100%
    )!important;

  box-shadow:
    0 0 9px rgba(0,229,255,.22)!important;

  opacity:.95!important;

  pointer-events:none!important;
}


#tab-home .community-chat-v2-title{
  color:#edf4f8!important;

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

  letter-spacing:.025em!important;

  text-shadow:
    0 0 14px rgba(0,229,255,.07)!important;
}


#tab-home .community-chat-v2-live{
  padding:
    4px 7px!important;

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

  border-radius:6px!important;

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

  color:#73818c!important;

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


/* =========================================================
   COMMUNITY CHAT — FEED
   ========================================================= */

#tab-home .community-chat-v2-list{
  height:320px!important;

  padding:
    6px 12px!important;

  background:
    rgba(0,0,0,.035)!important;
}


#tab-home .community-chat-v2-row{
  display:grid!important;

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

  gap:11px!important;

  min-height:58px!important;

  margin:0!important;

  padding:
    10px 8px!important;

  border-bottom:
    1px solid rgba(255,255,255,.045)!important;

  border-radius:7px!important;

  background:
    transparent!important;

  transform:none!important;

  transition:
    background .14s ease!important;
}


#tab-home .community-chat-v2-row:hover{
  background:
    rgba(255,255,255,.018)!important;

  transform:none!important;
}


#tab-home .community-chat-v2-row:last-child{
  border-bottom:0!important;
}


#tab-home .community-chat-v2-avatar{
  width:38px!important;
  height:38px!important;

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

  border-radius:9px!important;

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

  box-shadow:none!important;
}


#tab-home .community-chat-v2-avatar img{
  border-radius:8px!important;
}


#tab-home .community-chat-v2-content{
  min-width:0!important;
}


#tab-home .community-chat-v2-meta{
  min-height:17px!important;

  gap:7px!important;
}


#tab-home .community-chat-v2-name{
  min-width:0!important;
  max-width:100%!important;

  overflow:hidden!important;

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

  white-space:nowrap!important;
  text-overflow:ellipsis!important;
}


#tab-home .community-chat-v2-time{
  margin-left:auto!important;

  flex:0 0 auto!important;

  color:#5c6974!important;

  font-size:9px!important;

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


#tab-home .community-chat-v2-message{
  margin-top:5px!important;

  color:#abb6be!important;

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

  line-height:1.5!important;

  overflow-wrap:anywhere!important;
}


#tab-home .community-chat-v2-source-cs,
#tab-home .community-chat-v2-source-dc{
  flex:0 0 auto!important;

  padding:
    2px 5px!important;

  border-radius:5px!important;

  font-size:7px!important;
  font-weight:750!important;

  letter-spacing:.055em!important;
}


/* =========================================================
   CHAT COMPOSER
   ========================================================= */

#tab-home .community-chat-v2-compose{
  padding:
    12px 14px 13px!important;

  gap:9px!important;

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

  background:
    rgba(0,0,0,.07)!important;
}


#tab-home .community-chat-v2-input-wrap{
  min-width:0!important;

  border-radius:9px!important;

  background:
    rgba(255,255,255,.020)!important;
}


#tab-home .community-chat-v2-input{
  min-height:42px!important;

  color:#e4eaee!important;

  background:
    transparent!important;
}


#tab-home .community-chat-v2-input-wrap:focus-within{
  border-color:
    rgba(255,255,255,.14)!important;

  background:
    rgba(255,255,255,.030)!important;
}


#tab-home .community-chat-v2-send{
  min-width:76px!important;
  min-height:42px!important;

  border-radius:9px!important;

  font-size:11px!important;
}


/* =========================================================
   ACTIVE PLAYERS — MAIN HEADER
   ========================================================= */

#tab-home
.panel
>
.panel-head:has(#home-active-status){
  position:relative!important;
  overflow:hidden!important;

  min-height:50px!important;
  height:50px!important;

  padding:
    0 16px!important;

  color:#edf4f8!important;

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

  letter-spacing:.02em!important;

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.042),
      rgba(255,255,255,.014)
    ),
    linear-gradient(
      90deg,
      rgba(0,229,255,.028),
      transparent 43%,
      rgba(144,82,255,.024)
    )!important;

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


#tab-home
.panel
>
.panel-head:has(#home-active-status)::after{
  content:""!important;

  position:absolute!important;

  left:14px!important;
  bottom:0!important;

  width:92px!important;
  height:1px!important;

  background:
    linear-gradient(
      90deg,
      rgba(0,229,255,.95),
      rgba(64,178,255,.75) 45%,
      rgba(144,82,255,.52) 72%,
      transparent 100%
    )!important;

  box-shadow:
    0 0 9px rgba(0,229,255,.22)!important;

  opacity:.95!important;

  pointer-events:none!important;
}


#tab-home #home-active-status{
  color:#74818c!important;

  font-size:8px!important;
  font-weight:650!important;

  letter-spacing:.055em!important;

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


/* =========================================================
   ACTIVE / RECENT CONTAINER
   ========================================================= */

#tab-home .home-activity-v2{
  display:grid!important;

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

  gap:0!important;

  padding:0!important;

  background:
    rgba(0,0,0,.025)!important;
}


#tab-home .home-activity-section-v2{
  min-width:0!important;

  padding:
    13px 14px 14px!important;
}


#tab-home
.home-activity-section-v2
+
.home-activity-section-v2{
  border-left:
    1px solid rgba(255,255,255,.055)!important;
}


#tab-home .home-activity-head-v2{
  min-height:32px!important;

  display:flex!important;

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

  gap:10px!important;

  margin-bottom:4px!important;

  padding:
    0 4px 9px!important;

  border-bottom:
    1px solid rgba(255,255,255,.05)!important;
}


#tab-home .home-activity-title-v2{
  color:#87939d!important;

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

  letter-spacing:.085em!important;

  text-transform:uppercase!important;
}


#tab-home .home-activity-count-v2{
  flex:0 0 auto!important;

  padding:
    3px 6px!important;

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

  border-radius:5px!important;

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

  color:#66737d!important;

  font-size:8px!important;
  font-weight:700!important;

  letter-spacing:.055em!important;
}


#tab-home #home-active-now-count{
  color:#6fba96!important;

  border-color:
    rgba(56,201,135,.10)!important;

  background:
    rgba(56,201,135,.025)!important;
}


/* =========================================================
   ACTIVE / RECENT ROW
   ========================================================= */

#tab-home .home-activity-list-v2{
  min-width:0!important;
}


#tab-home .home-player-v2{
  display:flex!important;

  align-items:center!important;

  gap:8px!important;

  min-width:0!important;
  min-height:49px!important;

  margin:
    2px 0!important;

  padding:
    7px 8px!important;

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

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

  box-shadow:none!important;

  transform:none!important;

  transition:
    background .14s ease!important;
}


#tab-home .home-player-v2:hover{
  background:
    rgba(255,255,255,.024)!important;

  transform:none!important;
}


/* live player accent without changing geometry */

#tab-home .home-player-v2.current{
  box-shadow:
    inset 2px 0 0 rgba(56,201,135,.52)!important;

  background:
    linear-gradient(
      90deg,
      rgba(56,201,135,.025),
      rgba(255,255,255,.010) 38%,
      rgba(255,255,255,.008)
    )!important;
}


#tab-home
#home-active-recent
.home-player-v2{
  background:
    rgba(255,255,255,.008)!important;
}


#tab-home
#home-active-recent
.home-player-v2:hover{
  background:
    rgba(255,255,255,.020)!important;
}


#tab-home .home-player-flag-v2{
  width:15px!important;
  height:10px!important;

  flex:0 0 auto!important;

  border-radius:1px!important;

  opacity:.86!important;
}


#tab-home
.home-player-v2
.home-player-link-v3{
  min-width:0!important;

  flex:
    0 1 auto!important;

  overflow:hidden!important;

  white-space:nowrap!important;
  text-overflow:ellipsis!important;

  font-size:12px!important;

  cursor:default;
}


#tab-home
.home-player-v2
.home-player-link-v3[data-home-player]:not([data-home-player="0"]),

#tab-home
.home-player-v2
.home-player-link-v3[data-home-steamid]:not([data-home-steamid=""]),

#tab-home
.community-chat-v2-name[data-home-player]:not([data-home-player="0"]),

#tab-home
.community-chat-v2-name[data-home-steamid]:not([data-home-steamid=""]),

#tab-home
.home-leader-name-v11f1
.home-player-link-v3,

#tab-home
.home-run-player-v11f
.home-player-link-v3,

#tab-home
.home-jump-player-v11f
.home-player-link-v3{
  cursor:pointer!important;
}


#tab-home .home-player-source-v2{
  margin-left:auto!important;

  flex:0 0 auto!important;

  padding:
    3px 6px!important;

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

  border-radius:5px!important;

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

  color:#68757f!important;

  font-size:7.5px!important;
  font-weight:680!important;

  letter-spacing:.055em!important;
}


#tab-home .home-player-time-v2{
  min-width:46px!important;

  flex:0 0 auto!important;

  color:#5f6b75!important;

  font-size:9px!important;

  text-align:right!important;

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


/* =========================================================
   PROFILE LINKS — FOCUS / HOVER
   ========================================================= */

#tab-home .home-player-link-v3{
  transition:
    opacity .14s ease!important;
}


#tab-home .home-player-link-v3:hover{
  opacity:.82!important;

  transform:none!important;
}


#tab-home .home-player-link-v3:focus-visible{
  outline:
    1px solid rgba(0,229,255,.38)!important;

  outline-offset:3px!important;

  border-radius:3px!important;
}


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

@media(max-width:760px){

  #tab-home .community-chat-v2-head,
  #tab-home
  .panel
  >
  .panel-head:has(#home-active-status){
    height:48px!important;
    min-height:48px!important;

    padding:
      0 12px!important;
  }


  #tab-home .community-chat-v2-head::after,
  #tab-home
  .panel
  >
  .panel-head:has(#home-active-status)::after{
    left:12px!important;

    width:74px!important;
  }


  #tab-home .community-chat-v2-list{
    height:300px!important;

    padding:
      5px 8px!important;
  }


  #tab-home .community-chat-v2-row{
    grid-template-columns:
      34px minmax(0,1fr)!important;

    gap:9px!important;

    min-height:54px!important;

    padding:
      9px 5px!important;
  }


  #tab-home .community-chat-v2-avatar{
    width:34px!important;
    height:34px!important;

    border-radius:8px!important;
  }


  #tab-home .community-chat-v2-avatar img{
    border-radius:7px!important;
  }


  #tab-home .community-chat-v2-name{
    font-size:11.5px!important;
  }


  #tab-home .community-chat-v2-message{
    font-size:11.5px!important;
    line-height:1.45!important;
  }


  #tab-home .community-chat-v2-time{
    font-size:8px!important;
  }


  #tab-home .community-chat-v2-live{
    padding:
      3px 5px!important;

    font-size:7.5px!important;
  }


  #tab-home .community-chat-v2-compose{
    padding:
      10px!important;
  }


  #tab-home .community-chat-v2-send{
    min-width:68px!important;
  }


  /* activity = real mobile feed */

  #tab-home .home-activity-v2{
    grid-template-columns:
      1fr!important;
  }


  #tab-home .home-activity-section-v2{
    padding:
      11px 10px 12px!important;
  }


  #tab-home
  .home-activity-section-v2
  +
  .home-activity-section-v2{
    border-left:0!important;

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


  #tab-home .home-player-v2{
    min-height:46px!important;

    padding:
      6px 7px!important;

    gap:7px!important;
  }


  #tab-home
  .home-player-v2
  .home-player-link-v3{
    font-size:11.5px!important;
  }


  /*
   * Source is useful on desktop, but stealing width from
   * nickname + "x h ago" on mobile is not.
   */

  #tab-home .home-player-source-v2{
    display:none!important;
  }


  #tab-home .home-player-time-v2{
    min-width:42px!important;

    margin-left:auto!important;

    font-size:8px!important;
  }


  #tab-home .home-activity-head-v2{
    min-height:30px!important;

    padding:
      0 3px 8px!important;
  }

}