/* HOME-V11D-HEADER-SYSTEM-V1 */


/* =========================================================
   HOME SECTION HEADER SYSTEM V1
   Canonical header style for Home surfaces
   ========================================================= */

#tab-home .panel > .panel-head,
#tab-home .community-chat-v2-head{
  position:relative;

  min-height:60px!important;

  padding:
    0 16px!important;

  display:flex;
  align-items:center;
  justify-content:space-between;

  gap:14px;

  overflow:hidden;

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

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.026),
      rgba(255,255,255,.008)
    )!important;

  color:#8c98a2!important;

  font-family:
    'Inter',
    system-ui,
    sans-serif!important;

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

  letter-spacing:.105em!important;

  text-transform:uppercase;
}


/*
 * Small restrained accent.
 * Gives every section a common identity without glow.
 */

#tab-home .panel > .panel-head::after,
#tab-home .community-chat-v2-head::after{
  content:"";

  position:absolute;

  left:16px;
  bottom:-1px;

  width:52px;
  height:1px;

  pointer-events:none;

  background:
    linear-gradient(
      90deg,
      rgba(0,229,255,.72),
      rgba(0,229,255,0)
    );

  opacity:.68;
}


#tab-home .panel > .panel-head > span:first-child,
#tab-home .community-chat-v2-head > span:first-child{
  color:#dce3e8!important;

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

  letter-spacing:.10em!important;
}


/* =========================================================
   LEADER HEADER ACTIONS
   ========================================================= */

#tab-home .home-leader-actions-v1{
  min-width:0;

  display:flex;
  align-items:center;

  gap:8px;
}


#tab-home #home-leader-status{
  margin-right:2px;

  color:#64727d!important;

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

  letter-spacing:.08em!important;
}


#tab-home .home-leader-switch-v1{
  display:inline-flex;

  align-items:center;

  padding:2px;

  gap:2px;

  border:
    1px solid rgba(255,255,255,.07);

  border-radius:8px;

  background:
    rgba(0,0,0,.16);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.018);
}


#tab-home .home-leader-btn{
  min-width:56px!important;
  min-height:28px!important;

  padding:
    0 10px!important;

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

  background:
    transparent!important;

  color:#606d78!important;

  font-family:
    'Inter',
    system-ui,
    sans-serif!important;

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

  letter-spacing:.065em!important;

  cursor:pointer;

  box-shadow:none!important;

  transition:
    color .14s ease,
    background .14s ease!important;
}


#tab-home .home-leader-btn:hover{
  color:#aeb8c0!important;

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


#tab-home .home-leader-btn.active{
  color:#edf2f5!important;

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

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.035)!important;
}


/* =========================================================
   RESTORE PLAYER IDENTITY COLORS
   ========================================================= */

/*
 * getPlayerNameStyled() already returns the canonical role/VIP
 * color inline. V3B forced every nested span to inherit neutral
 * text with !important, which erased that identity.
 */

#tab-home .home-player-link-v3{
  color:inherit;

  text-shadow:none;

  transition:
    opacity .14s ease!important;
}


#tab-home .home-player-link-v3 > span{
  color:inherit;

  /*
   * Deliberately no !important here:
   * inline role/VIP color from getPlayerNameStyled wins.
   */
}


#tab-home .home-player-link-v3:hover{
  opacity:.88;
}


/* =========================================================
   LATEST RUNS — CLEAN FEED
   ========================================================= */

#tab-home .home-run-row-v3{
  border:0!important;

  box-shadow:none!important;

  transform:none!important;

  /*
   * The category still carries identity through the left accent
   * and the restrained tinted surface.
   */

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


#tab-home .home-run-row-v3:hover{
  border:0!important;

  box-shadow:none!important;

  transform:none!important;

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


#tab-home .home-run-row-v3::before{
  width:2px!important;

  top:9px!important;
  bottom:9px!important;

  opacity:.88!important;
}


/* Time remains a useful compact endpoint, but lighter */

#tab-home
.home-run-row-v3
>
div:last-child{
  border:
    1px solid rgba(255,255,255,.055)!important;

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

  box-shadow:none!important;
}


/* =========================================================
   LEADERS — CLEAN FEED
   ========================================================= */

#tab-home .home-leader-row-v3{
  border:0!important;

  box-shadow:none!important;

  transform:none!important;

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


#tab-home .home-leader-row-v3:hover{
  border:0!important;

  box-shadow:none!important;

  transform:none!important;

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


/*
 * Top position gets a restrained warm surface,
 * but still no enclosing outline.
 */

#tab-home
.home-leader-row-v3[data-home-rank="1"]{
  border:0!important;

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


/*
 * Rank token may keep its own tiny boundary.
 * User requested removing the outline of the whole row,
 * not removing all visual hierarchy.
 */

#tab-home
.home-leader-row-v3
>
div:first-child{
  box-shadow:none!important;
}


/* =========================================================
   ELO METRIC
   ========================================================= */

#tab-home .home-elo-metric-v1{
  min-width:70px;

  padding:
    7px 9px;

  display:inline-flex;
  align-items:baseline;
  justify-content:flex-end;

  gap:5px;

  border-radius:6px;

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

  color:#dde5ea;

  font-size:11px;
  font-weight:680;

  font-variant-numeric:
    tabular-nums;
}


#tab-home .home-elo-metric-v1 span{
  color:#687680;

  font-size:7px;
  font-weight:720;

  letter-spacing:.08em;
}


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

@media(max-width:760px){

  #tab-home .panel > .panel-head,
  #tab-home .community-chat-v2-head{
    min-height:56px!important;

    padding:
      0 12px!important;

    gap:8px;
  }


  #tab-home .panel > .panel-head::after,
  #tab-home .community-chat-v2-head::after{
    left:12px;

    width:42px;
  }


  #tab-home .home-leader-actions-v1{
    gap:5px;
  }


  #tab-home #home-leader-status{
    display:none!important;
  }


  #tab-home .home-leader-switch-v1{
    gap:1px;

    padding:2px;

    border-radius:7px;
  }


  #tab-home .home-leader-btn{
    min-width:47px!important;
    min-height:27px!important;

    padding:
      0 7px!important;

    font-size:7px!important;

    border-radius:5px!important;
  }


  #tab-home .home-elo-metric-v1{
    min-width:58px;

    padding:
      6px 7px;

    font-size:10px;
  }


  #tab-home .home-elo-metric-v1 span{
    font-size:6px;
  }

}