/* UI-POLISH-V1.1 */


/* ======================================================
   LOGO
   No movement on hover.
   ====================================================== */

.topbar-logo-v1 img{
  transform:none !important;

  transition:
    opacity .18s ease,
    filter .18s ease !important;
}

.topbar-logo-v1:hover img{
  transform:none !important;

  opacity:1;

  filter:
    drop-shadow(
      0 0 11px rgba(0,229,255,.18)
    ) !important;
}


/* ======================================================
   PROFILE SOCIAL ICON OPTICAL ALIGNMENT
   Move only Discord glyph, never the circle.
   ====================================================== */

#tab-player .profile-social-row-v1
.profile-discord-brand svg{
  transform:translateY(.65px);
  transform-origin:center;
}


/* ======================================================
   PROFILE BREADCRUMB
   Stable left edge regardless of nickname length.
   ====================================================== */

#tab-player .profile-shell{
  width:100% !important;
}

#tab-player .profile-breadcrumb{
  width:100%;

  display:flex;
  align-items:center;
  justify-content:flex-start !important;

  margin-left:0 !important;
  margin-right:0 !important;
  padding-left:0 !important;

  text-align:left !important;

  min-width:0;
}

#tab-player .profile-breadcrumb > *{
  flex:0 0 auto;
}

#tab-player .profile-breadcrumb .current{
  min-width:0;
  max-width:min(420px,45vw);

  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}


/* ======================================================
   PREMIUM GLASS STICKY NAV
   ====================================================== */

.tabs{
  position:sticky !important;
  top:0;
  z-index:900;

  isolation:isolate;

  background:
    linear-gradient(
      180deg,
      rgba(13,18,23,.82) 0%,
      rgba(8,13,18,.76) 100%
    ) !important;

  border-top:
    1px solid rgba(255,255,255,.025);

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

  backdrop-filter:
    blur(22px)
    saturate(145%);

  -webkit-backdrop-filter:
    blur(22px)
    saturate(145%);

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


/* soft glass highlight */
.tabs::before{
  content:"";

  position:absolute;
  z-index:-1;

  left:40px;
  right:40px;
  top:0;

  height:1px;

  background:
    linear-gradient(
      90deg,
      transparent 0%,
      rgba(255,255,255,.035) 16%,
      rgba(0,229,255,.095) 50%,
      rgba(255,255,255,.035) 84%,
      transparent 100%
    );

  pointer-events:none;
}


/* faint cyan atmosphere under the glass */
.tabs::after{
  content:"";

  position:absolute;
  z-index:-2;

  left:15%;
  right:15%;
  bottom:-18px;

  height:26px;

  background:
    radial-gradient(
      ellipse at center,
      rgba(0,229,255,.035) 0%,
      rgba(0,229,255,0) 72%
    );

  filter:blur(8px);

  pointer-events:none;
}


.tabs > .tab{
  position:relative;

  margin-bottom:0 !important;

  border:0 !important;
  border-bottom:0 !important;

  color:#65737e;

  background:transparent;

  transition:
    color .16s ease,
    background .16s ease,
    text-shadow .16s ease;
}


.tabs > .tab:hover{
  color:#b7c3cb;

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.028),
      rgba(255,255,255,.008)
    );

  text-shadow:
    0 0 14px rgba(255,255,255,.04);
}


.tabs > .tab.active{
  color:#e0edf2 !important;

  background:
    linear-gradient(
      180deg,
      rgba(0,229,255,.055) 0%,
      rgba(0,229,255,.018) 70%,
      rgba(0,229,255,.005) 100%
    ) !important;

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


/* active underline */
.tabs > .tab.active::after{
  content:"";

  position:absolute;

  left:20px;
  right:20px;
  bottom:0;

  height:2px;

  border-radius:3px 3px 0 0;

  background:
    linear-gradient(
      90deg,
      rgba(0,229,255,.18),
      rgba(0,229,255,.92) 50%,
      rgba(0,229,255,.18)
    );

  box-shadow:
    0 0 7px rgba(0,229,255,.30),
    0 0 16px rgba(0,229,255,.10);
}


/* tiny separator between items on hover/active area */
.tabs > .tab + .tab::before{
  content:"";

  position:absolute;
  left:0;
  top:30%;
  bottom:30%;

  width:1px;

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

  pointer-events:none;
}


@media(max-width:800px){

  .tabs{
    scrollbar-width:none;
  }

  .tabs::-webkit-scrollbar{
    display:none;
  }

  .tabs::before{
    left:12px;
    right:12px;
  }

  .tabs > .tab.active::after{
    left:10px;
    right:10px;
  }

  #tab-player .profile-breadcrumb .current{
    max-width:42vw;
  }
}


@media(max-width:480px){

  .tabs::after{
    display:none;
  }

  #tab-player .profile-breadcrumb{
    gap:7px;
  }

  #tab-player .profile-breadcrumb .current{
    max-width:35vw;
  }
}