/*
 * EndCore 2.0.0
 * Mobile / PWA shell
 *
 * This layer is intentionally isolated from desktop WebCore
 * and Windows Next. JavaScript adds .endcore-pwa-mobile only
 * on phone-like browser/PWA environments.
 */


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

html.endcore-pwa-mobile {
  --endcore-mobile-topbar:
    62px;

  --endcore-mobile-nav:
    66px;

  --endcore-mobile-side:
    16px;
}


html.endcore-pwa-mobile,
html.endcore-pwa-mobile body {
  width:
    100%;

  max-width:
    100%;

  overflow-x:
    hidden;
}


/* =========================================================
   TOP APP BAR
   ========================================================= */

html.endcore-pwa-mobile
.topbar {
  position:
    fixed !important;

  inset:
    0 0 auto 0 !important;

  width:
    100% !important;

  height:
    calc(
      var(--endcore-mobile-topbar) +
      env(safe-area-inset-top)
    ) !important;

  min-height:
    0 !important;

  padding:
    env(safe-area-inset-top)
    14px
    0 !important;

  margin:
    0 !important;

  display:
    flex !important;

  align-items:
    center !important;

  justify-content:
    space-between !important;

  gap:
    12px !important;

  z-index:
    1050 !important;

  box-sizing:
    border-box !important;

  background:
    linear-gradient(
      180deg,
      rgba(4, 10, 18, 0.98),
      rgba(4, 10, 18, 0.88)
    ) !important;

  border-bottom:
    1px solid
    rgba(255, 255, 255, 0.07);

  backdrop-filter:
    blur(20px);

  -webkit-backdrop-filter:
    blur(20px);
}


html.endcore-pwa-mobile
.main-nav {
  display:
    none !important;
}


html.endcore-pwa-mobile
.sidebar-server-switcher {
  display:
    none !important;
}


html.endcore-pwa-mobile
.topbar-actions {
  margin-left:
    auto !important;

  gap:
    8px !important;

  display:
    flex !important;

  align-items:
    center !important;
}


html.endcore-pwa-mobile
.topbar-brand-image {
  max-height:
    30px !important;

  width:
    auto !important;
}


html.endcore-pwa-mobile
.topbar-subname {
  font-size:
    10px !important;

  letter-spacing:
    0.14em !important;
}


/* =========================================================
   CONTENT CANVAS
   ========================================================= */

html.endcore-pwa-mobile
.main-content {
  width:
    100% !important;

  max-width:
    none !important;

  min-width:
    0 !important;

  margin:
    0 !important;

  margin-left:
    0 !important;

  padding:
    calc(
      var(--endcore-mobile-topbar) +
      env(safe-area-inset-top)
    )
    0
    calc(
      var(--endcore-mobile-nav) +
      env(safe-area-inset-bottom) +
      24px
    )
    !important;

  box-sizing:
    border-box !important;
}


html.endcore-pwa-mobile
.view-root {
  width:
    100% !important;

  max-width:
    none !important;

  min-width:
    0 !important;

  margin:
    0 !important;

  padding:
    0 !important;
}


/* =========================================================
   HOME
   ========================================================= */

html.endcore-pwa-mobile
.home-view {
  width:
    100% !important;

  max-width:
    none !important;

  margin:
    0 !important;
}


/* =========================================================
   HERO
   ========================================================= */

html.endcore-pwa-mobile
.home-hero {
  position:
    relative !important;

  width:
    100% !important;

  max-width:
    none !important;

  height:
    clamp(
      430px,
      62svh,
      620px
    ) !important;

  min-height:
    430px !important;

  margin:
    0 0 22px !important;

  border-radius:
    0 !important;

  overflow:
    hidden !important;
}


html.endcore-pwa-mobile
.hero-backdrop {
  position:
    absolute !important;

  inset:
    0 !important;

  width:
    100% !important;

  height:
    100% !important;

  object-fit:
    cover !important;

  object-position:
    center center !important;
}


html.endcore-pwa-mobile
.hero-shade {
  position:
    absolute !important;

  inset:
    0 !important;

  background:
    linear-gradient(
      180deg,
      rgba(2, 7, 14, 0.06) 0%,
      rgba(2, 7, 14, 0.10) 28%,
      rgba(2, 7, 14, 0.58) 67%,
      rgba(2, 7, 14, 0.98) 100%
    ),
    linear-gradient(
      90deg,
      rgba(2, 7, 14, 0.78) 0%,
      rgba(2, 7, 14, 0.22) 70%,
      transparent 100%
    ) !important;
}


html.endcore-pwa-mobile
.hero-content {
  position:
    absolute !important;

  left:
    var(--endcore-mobile-side) !important;

  right:
    var(--endcore-mobile-side) !important;

  bottom:
    28px !important;

  width:
    auto !important;

  max-width:
    none !important;

  padding:
    0 !important;

  margin:
    0 !important;

  z-index:
    3 !important;
}


html.endcore-pwa-mobile
.home-hero h1 {
  max-width:
    95% !important;

  margin:
    0 0 10px !important;

  font-size:
    clamp(
      30px,
      8.5vw,
      42px
    ) !important;

  line-height:
    0.98 !important;

  letter-spacing:
    -0.035em !important;

  text-wrap:
    balance;
}


html.endcore-pwa-mobile
.hero-meta {
  display:
    flex !important;

  flex-wrap:
    wrap !important;

  gap:
    6px 10px !important;

  margin-bottom:
    14px !important;

  font-size:
    13px !important;

  line-height:
    1.35 !important;
}


html.endcore-pwa-mobile
.hero-actions {
  display:
    flex !important;

  flex-wrap:
    wrap !important;

  gap:
    10px !important;

  margin-top:
    15px !important;
}


html.endcore-pwa-mobile
.hero-play,
html.endcore-pwa-mobile
.hero-details {
  min-height:
    46px !important;

  padding:
    0 18px !important;

  border-radius:
    14px !important;

  font-size:
    15px !important;

  font-weight:
    700 !important;

  touch-action:
    manipulation;
}


/* =========================================================
   HOME SECTIONS
   ========================================================= */

html.endcore-pwa-mobile
.home-sections {
  width:
    100% !important;

  max-width:
    none !important;

  padding:
    0 0 10px !important;

  margin:
    0 !important;
}


html.endcore-pwa-mobile
.media-section {
  width:
    100% !important;

  max-width:
    none !important;

  margin:
    0 0 25px !important;

  padding:
    0 !important;
}


html.endcore-pwa-mobile
.media-section-heading {
  padding:
    0 var(--endcore-mobile-side) !important;

  margin-bottom:
    11px !important;
}


html.endcore-pwa-mobile
.media-section-heading h2 {
  margin:
    0 !important;

  font-size:
    19px !important;

  line-height:
    1.2 !important;

  letter-spacing:
    -0.015em !important;
}


/* =========================================================
   TOUCH CAROUSELS
   ========================================================= */

html.endcore-pwa-mobile
.media-row {
  display:
    flex !important;

  grid-template-columns:
    none !important;

  width:
    100% !important;

  max-width:
    none !important;

  gap:
    12px !important;

  overflow-x:
    auto !important;

  overflow-y:
    hidden !important;

  padding:
    0
    var(--endcore-mobile-side)
    8px !important;

  margin:
    0 !important;

  scroll-padding-inline:
    var(--endcore-mobile-side);

  scroll-snap-type:
    x proximity;

  overscroll-behavior-inline:
    contain;

  -webkit-overflow-scrolling:
    touch;

  scrollbar-width:
    none;
}


html.endcore-pwa-mobile
.media-row::-webkit-scrollbar {
  display:
    none;
}


html.endcore-pwa-mobile
.media-card {
  flex:
    0 0 clamp(
      138px,
      39vw,
      172px
    ) !important;

  width:
    clamp(
      138px,
      39vw,
      172px
    ) !important;

  max-width:
    none !important;

  min-width:
    0 !important;

  scroll-snap-align:
    start;

  border-radius:
    14px !important;

  touch-action:
    manipulation;
}


html.endcore-pwa-mobile
.media-poster {
  width:
    100% !important;

  overflow:
    hidden !important;

  border-radius:
    13px !important;
}


html.endcore-pwa-mobile
.media-poster img {
  width:
    100% !important;

  height:
    100% !important;

  object-fit:
    cover !important;
}


html.endcore-pwa-mobile
.media-card-copy {
  padding:
    9px 2px 0 !important;
}


html.endcore-pwa-mobile
.media-card-copy strong {
  font-size:
    14px !important;

  line-height:
    1.25 !important;
}


html.endcore-pwa-mobile
.media-card-copy span {
  margin-top:
    4px !important;

  font-size:
    12px !important;

  line-height:
    1.25 !important;
}


/* Continue Watching landscape cards */

html.endcore-pwa-mobile
.media-card-landscape {
  flex-basis:
    min(
      76vw,
      320px
    ) !important;

  width:
    min(
      76vw,
      320px
    ) !important;
}


html.endcore-pwa-mobile
.media-card-landscape
.media-poster {
  aspect-ratio:
    16 / 9 !important;
}


/* =========================================================
   BOTTOM NAVIGATION
   ========================================================= */

.endcore-mobile-nav {
  display:
    none;
}


html.endcore-pwa-mobile
.endcore-mobile-nav {
  position:
    fixed;

  left:
    0;

  right:
    0;

  bottom:
    0;

  z-index:
    1200;

  min-height:
    calc(
      var(--endcore-mobile-nav) +
      env(safe-area-inset-bottom)
    );

  padding:
    6px
    6px
    env(safe-area-inset-bottom);

  box-sizing:
    border-box;

  display:
    grid;

  grid-template-columns:
    repeat(5, minmax(0, 1fr));

  align-items:
    stretch;

  gap:
    1px;

  background:
    rgba(3, 9, 17, 0.93);

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

  box-shadow:
    0 -16px 42px
    rgba(0, 0, 0, 0.30);

  backdrop-filter:
    blur(24px);

  -webkit-backdrop-filter:
    blur(24px);
}


/* Only the validated admin receives a sixth, swipeable route. */
html.endcore-pwa-mobile
.endcore-mobile-nav.endcore-mobile-nav-has-admin {
  grid-template-columns: none;
  grid-auto-flow: column;
  grid-auto-columns: minmax(72px, 20%);
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x;
  scrollbar-width: none;
}

html.endcore-pwa-mobile
.endcore-mobile-nav.endcore-mobile-nav-has-admin::-webkit-scrollbar {
  display: none;
}

html.endcore-pwa-mobile
.endcore-mobile-nav[hidden] {
  display:
    none !important;
}


.endcore-mobile-nav-button {
  appearance:
    none;

  min-width:
    0;

  min-height:
    54px;

  padding:
    5px 2px;

  border:
    0;

  border-radius:
    13px;

  background:
    transparent;

  color:
    rgba(224, 235, 247, 0.58);

  display:
    flex;

  flex-direction:
    column;

  justify-content:
    center;

  align-items:
    center;

  gap:
    3px;

  font:
    inherit;

  font-size:
    10px;

  font-weight:
    650;

  line-height:
    1;

  cursor:
    pointer;

  touch-action:
    manipulation;
}


.endcore-mobile-nav-button svg {
  width:
    22px;

  height:
    22px;

  fill:
    none;

  stroke:
    currentColor;

  stroke-width:
    1.8;

  stroke-linecap:
    round;

  stroke-linejoin:
    round;
}


.endcore-mobile-nav-button.active {
  color:
    #f7fbff;

  background:
    rgba(55, 142, 255, 0.13);
}


/* =========================================================
   SERVERS MOBILE SHEET
   ========================================================= */

html.endcore-pwa-mobile
.sidebar-server-switcher.endcore-mobile-server-sheet-open {
  display:
    block !important;

  position:
    fixed !important;

  left:
    12px !important;

  right:
    12px !important;

  top:
    auto !important;

  bottom:
    calc(
      var(--endcore-mobile-nav) +
      env(safe-area-inset-bottom) +
      10px
    ) !important;

  width:
    auto !important;

  max-width:
    none !important;

  max-height:
    min(
      58svh,
      520px
    ) !important;

  margin:
    0 !important;

  padding:
    10px !important;

  overflow:
    auto !important;

  z-index:
    1190 !important;

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

  border-radius:
    18px !important;

  background:
    rgba(7, 15, 26, 0.98) !important;

  box-shadow:
    0 20px 60px
    rgba(0, 0, 0, 0.55) !important;

  backdrop-filter:
    blur(24px);

  -webkit-backdrop-filter:
    blur(24px);
}


html.endcore-pwa-mobile
.sidebar-server-switcher.endcore-mobile-server-sheet-open
#serversNavButton {
  display:
    none !important;
}


html.endcore-pwa-mobile
.sidebar-server-switcher.endcore-mobile-server-sheet-open
#serversNavList {
  position:
    static !important;

  inset:
    auto !important;

  width:
    100% !important;

  max-width:
    none !important;

  max-height:
    52svh !important;

  overflow-y:
    auto !important;
}


/* =========================================================
   USER / PROFILE MENU
   ========================================================= */

html.endcore-pwa-mobile
.user-menu,
html.endcore-pwa-mobile
#userMenu {
  position:
    fixed !important;

  left:
    12px !important;

  right:
    12px !important;

  top:
    auto !important;

  bottom:
    calc(
      var(--endcore-mobile-nav) +
      env(safe-area-inset-bottom) +
      10px
    ) !important;

  width:
    auto !important;

  max-width:
    none !important;

  max-height:
    68svh !important;

  overflow-y:
    auto !important;

  border-radius:
    18px !important;

  z-index:
    1210 !important;
}


/* =========================================================
   PHONE-SIZE DETAIL POLISH
   ========================================================= */

@media (max-width: 430px) {

  html.endcore-pwa-mobile
  .home-hero {
    height:
      58svh !important;

    min-height:
      410px !important;
  }


  html.endcore-pwa-mobile
  .media-card {
    flex-basis:
      41vw !important;

    width:
      41vw !important;
  }


  html.endcore-pwa-mobile
  .media-card-landscape {
    flex-basis:
      79vw !important;

    width:
      79vw !important;
  }
}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

  html.endcore-pwa-mobile
  .media-row {
    scroll-behavior:
      auto;
  }
}


/* =========================================================
   ENDCORE MOBILE SHELL V2
   visual polish
   ========================================================= */

html.endcore-pwa-mobile {
  --endcore-mobile-topbar:
    58px;

  --endcore-mobile-nav:
    64px;

  --endcore-mobile-side:
    14px;
}


/* ---------------------------------------------------------
   TOPBAR — tighter native-app proportions
   --------------------------------------------------------- */

html.endcore-pwa-mobile
.topbar {
  padding-left:
    16px !important;

  padding-right:
    14px !important;

  gap:
    10px !important;

  background:
    linear-gradient(
      180deg,
      rgba(3, 10, 19, 0.99),
      rgba(3, 10, 19, 0.94)
    ) !important;

  box-shadow:
    0 8px 30px
    rgba(0, 0, 0, 0.14);
}


html.endcore-pwa-mobile
.topbar-brand-image {
  max-height:
    28px !important;
}


html.endcore-pwa-mobile
.topbar-actions {
  gap:
    7px !important;
}


html.endcore-pwa-mobile
.topbar-actions > button,
html.endcore-pwa-mobile
#userButton {
  width:
    48px !important;

  height:
    48px !important;

  min-width:
    48px !important;

  min-height:
    48px !important;

  padding:
    0 !important;

  border-radius:
    50% !important;
}


/* ---------------------------------------------------------
   HERO — keep cinematic, improve visual transition
   --------------------------------------------------------- */

html.endcore-pwa-mobile
.home-hero {
  height:
    min(
      61svh,
      600px
    ) !important;

  min-height:
    425px !important;

  margin-bottom:
    27px !important;
}


html.endcore-pwa-mobile
.hero-shade {
  background:
    linear-gradient(
      180deg,
      rgba(2, 7, 14, 0.02) 0%,
      rgba(2, 7, 14, 0.06) 26%,
      rgba(2, 7, 14, 0.34) 54%,
      rgba(2, 7, 14, 0.88) 80%,
      #020812 100%
    ),
    linear-gradient(
      90deg,
      rgba(2, 7, 14, 0.61) 0%,
      rgba(2, 7, 14, 0.12) 76%,
      transparent 100%
    ) !important;
}


html.endcore-pwa-mobile
.hero-content {
  bottom:
    31px !important;
}


html.endcore-pwa-mobile
.home-hero h1 {
  font-size:
    clamp(
      31px,
      8.2vw,
      40px
    ) !important;

  line-height:
    1 !important;
}


html.endcore-pwa-mobile
.hero-meta {
  color:
    rgba(
      228,
      235,
      244,
      0.76
    ) !important;

  font-size:
    13px !important;
}


html.endcore-pwa-mobile
.hero-play,
html.endcore-pwa-mobile
.hero-details {
  min-height:
    48px !important;

  border-radius:
    15px !important;
}


html.endcore-pwa-mobile
.hero-play {
  padding-inline:
    21px !important;
}


html.endcore-pwa-mobile
.hero-details {
  padding-inline:
    19px !important;
}


/* ---------------------------------------------------------
   SECTIONS
   --------------------------------------------------------- */

html.endcore-pwa-mobile
.media-section {
  margin-bottom:
    30px !important;
}


html.endcore-pwa-mobile
.media-section-heading {
  margin-bottom:
    13px !important;
}


html.endcore-pwa-mobile
.media-section-heading h2 {
  font-size:
    20px !important;

  font-weight:
    750 !important;

  letter-spacing:
    -0.025em !important;
}


/* ---------------------------------------------------------
   CAROUSELS
   --------------------------------------------------------- */

html.endcore-pwa-mobile
.media-row {
  gap:
    13px !important;

  padding-bottom:
    10px !important;
}


html.endcore-pwa-mobile
.media-card {
  border-radius:
    15px !important;
}


html.endcore-pwa-mobile
.media-poster {
  border-radius:
    14px !important;

  background:
    rgba(
      255,
      255,
      255,
      0.035
    ) !important;
}


html.endcore-pwa-mobile
.media-card-copy {
  min-height:
    53px;

  padding:
    9px 2px 0 !important;
}


html.endcore-pwa-mobile
.media-card-copy strong {
  display:
    -webkit-box !important;

  overflow:
    hidden !important;

  -webkit-box-orient:
    vertical !important;

  -webkit-line-clamp:
    2 !important;

  font-size:
    14px !important;

  line-height:
    1.24 !important;
}


html.endcore-pwa-mobile
.media-card-copy span {
  display:
    block !important;

  overflow:
    hidden !important;

  text-overflow:
    ellipsis !important;

  white-space:
    nowrap !important;

  color:
    rgba(
      205,
      216,
      229,
      0.60
    ) !important;
}


/* ---------------------------------------------------------
   CONTINUE WATCHING
   --------------------------------------------------------- */

html.endcore-pwa-mobile
.media-card-landscape {
  flex-basis:
    min(
      79vw,
      330px
    ) !important;

  width:
    min(
      79vw,
      330px
    ) !important;
}


html.endcore-pwa-mobile
.media-card-landscape
.media-poster {
  border-radius:
    16px !important;
}


html.endcore-pwa-mobile
.media-card-landscape
.media-card-copy {
  min-height:
    48px !important;
}


/* ---------------------------------------------------------
   BOTTOM NAV — softer native treatment
   --------------------------------------------------------- */

html.endcore-pwa-mobile
.endcore-mobile-nav {
  padding-left:
    7px;

  padding-right:
    7px;

  gap:
    2px;

  background:
    rgba(
      2,
      8,
      16,
      0.965
    );

  box-shadow:
    0 -12px 42px
    rgba(
      0,
      0,
      0,
      0.34
    );
}


html.endcore-pwa-mobile
.endcore-mobile-nav-button {
  min-height:
    52px;

  border-radius:
    16px;

  font-size:
    10px;

  color:
    rgba(
      206,
      216,
      229,
      0.55
    );

  transition:
    background-color
      130ms ease,
    color
      130ms ease,
    transform
      130ms ease;
}


html.endcore-pwa-mobile
.endcore-mobile-nav-button svg {
  width:
    23px;

  height:
    23px;

  stroke-width:
    1.9;
}


html.endcore-pwa-mobile
.endcore-mobile-nav-button.active {
  color:
    #f5f9ff;

  background:
    linear-gradient(
      180deg,
      rgba(
        54,
        143,
        255,
        0.18
      ),
      rgba(
        54,
        143,
        255,
        0.10
      )
    );

  box-shadow:
    inset 0 0 0 1px
    rgba(
      90,
      165,
      255,
      0.06
    );
}


html.endcore-pwa-mobile
.endcore-mobile-nav-button:active {
  transform:
    scale(0.96);
}


/* ---------------------------------------------------------
   SAFE BOTTOM SCROLL
   --------------------------------------------------------- */

html.endcore-pwa-mobile
.main-content {
  padding-bottom:
    calc(
      var(--endcore-mobile-nav) +
      env(safe-area-inset-bottom) +
      38px
    ) !important;
}


/* ---------------------------------------------------------
   SMALL PHONES
   --------------------------------------------------------- */

@media (max-width: 390px) {

  html.endcore-pwa-mobile
  .home-hero {
    min-height:
      400px !important;
  }


  html.endcore-pwa-mobile
  .media-card {
    flex-basis:
      42vw !important;

    width:
      42vw !important;
  }


  html.endcore-pwa-mobile
  .media-card-landscape {
    flex-basis:
      82vw !important;

    width:
      82vw !important;
  }
}


/* =========================================================
   ENDCORE 2.0.0
   MOBILE DETAILS V1
   ========================================================= */


/* ---------------------------------------------------------
   DETAILS — REMOVE DESKTOP WIDTH CONSTRAINTS
   --------------------------------------------------------- */

html.endcore-pwa-mobile
.detail-view {
  width:
    100% !important;

  max-width:
    none !important;

  min-width:
    0 !important;

  margin:
    0 !important;

  padding:
    0 0 28px !important;

  overflow-x:
    hidden;
}


html.endcore-pwa-mobile
.detail-page-grid,
html.endcore-pwa-mobile
.detail-page-grid.has-community {
  display:
    flex !important;

  flex-direction:
    column !important;

  grid-template-columns:
    none !important;

  width:
    100% !important;

  max-width:
    none !important;

  min-width:
    0 !important;

  gap:
    0 !important;

  margin:
    0 !important;

  padding:
    0 !important;
}


html.endcore-pwa-mobile
.detail-page-main {
  display:
    flex !important;

  flex-direction:
    column !important;

  width:
    100% !important;

  max-width:
    none !important;

  min-width:
    0 !important;

  margin:
    0 !important;

  padding:
    0 !important;
}


html.endcore-pwa-mobile
.detail-content,
html.endcore-pwa-mobile
.detail-extra,
html.endcore-pwa-mobile
.detail-extra-main,
html.endcore-pwa-mobile
.detail-extra-layout,
html.endcore-pwa-mobile
.detail-extra-layout.has-community {
  width:
    100% !important;

  max-width:
    none !important;

  min-width:
    0 !important;

  box-sizing:
    border-box !important;
}


/* ---------------------------------------------------------
   BACKDROP
   --------------------------------------------------------- */

html.endcore-pwa-mobile
.detail-backdrop {
  width:
    100% !important;

  min-height:
    245px !important;

  max-height:
    42svh !important;
}


html.endcore-pwa-mobile
.detail-backdrop::after {
  background:
    linear-gradient(
      180deg,
      rgba(2, 7, 14, 0.03) 0%,
      rgba(2, 7, 14, 0.20) 48%,
      #020812 100%
    ) !important;
}


/* ---------------------------------------------------------
   MAIN METADATA
   --------------------------------------------------------- */

html.endcore-pwa-mobile
.detail-content {
  padding:
    18px
    var(--endcore-mobile-side)
    8px !important;
}


html.endcore-pwa-mobile
.detail-layout,
html.endcore-pwa-mobile
.detail-layout.has-community {
  display:
    flex !important;

  flex-direction:
    column !important;

  align-items:
    flex-start !important;

  grid-template-columns:
    none !important;

  width:
    100% !important;

  max-width:
    none !important;

  min-width:
    0 !important;

  gap:
    14px !important;
}


html.endcore-pwa-mobile
.detail-poster {
  width:
    126px !important;

  min-width:
    126px !important;

  max-width:
    126px !important;

  margin:
    0 0 4px !important;

  border-radius:
    14px !important;
}


html.endcore-pwa-mobile
.detail-logo {
  max-width:
    min(
      72vw,
      310px
    ) !important;

  max-height:
    90px !important;
}


html.endcore-pwa-mobile
.detail-title {
  width:
    100% !important;

  max-width:
    none !important;

  margin:
    3px 0 7px !important;

  font-size:
    clamp(
      30px,
      8vw,
      40px
    ) !important;

  line-height:
    1.02 !important;

  letter-spacing:
    -0.035em !important;
}


html.endcore-pwa-mobile
.detail-meta {
  display:
    flex !important;

  flex-wrap:
    wrap !important;

  width:
    100% !important;

  gap:
    6px 9px !important;

  margin:
    0 0 13px !important;

  font-size:
    13px !important;

  line-height:
    1.35 !important;
}


/* ---------------------------------------------------------
   ACTIONS
   --------------------------------------------------------- */

html.endcore-pwa-mobile
.detail-actions {
  display:
    flex !important;

  flex-wrap:
    wrap !important;

  width:
    100% !important;

  gap:
    9px !important;

  margin:
    4px 0 20px !important;
}


html.endcore-pwa-mobile
.detail-actions
.detail-action {
  min-height:
    46px !important;

  min-width:
    46px !important;

  padding:
    0 16px !important;

  border-radius:
    14px !important;

  font-size:
    14px !important;

  touch-action:
    manipulation;
}


/* ---------------------------------------------------------
   SYNOPSIS — FULL READING WIDTH
   --------------------------------------------------------- */

html.endcore-pwa-mobile
.detail-overview {
  width:
    100% !important;

  max-width:
    none !important;

  margin:
    8px 0 8px !important;

  font-size:
    15.5px !important;

  line-height:
    1.58 !important;

  color:
    rgba(
      230,
      237,
      246,
      0.82
    ) !important;
}


/* ---------------------------------------------------------
   GENERIC DETAILS SECTIONS
   --------------------------------------------------------- */

html.endcore-pwa-mobile
.detail-section {
  width:
    100% !important;

  max-width:
    none !important;

  min-width:
    0 !important;

  box-sizing:
    border-box !important;
}


html.endcore-pwa-mobile
.detail-section h2 {
  font-size:
    21px !important;

  line-height:
    1.15 !important;

  letter-spacing:
    -0.025em !important;
}


/* =========================================================
   CAST & CREW
   ========================================================= */

html.endcore-pwa-mobile
.detail-cast-fullwidth {
  order:
    20;

  width:
    100% !important;

  max-width:
    none !important;

  min-width:
    0 !important;

  margin:
    17px 0 8px !important;

  padding:
    0 !important;

  box-sizing:
    border-box !important;
}


html.endcore-pwa-mobile
.detail-cast-fullwidth
.detail-section,
html.endcore-pwa-mobile
.credits-section {
  width:
    100% !important;

  max-width:
    none !important;

  padding:
    0 !important;

  margin:
    0 !important;
}


html.endcore-pwa-mobile
.credits-section
> .section-kicker,
html.endcore-pwa-mobile
.credits-section
> h2,
html.endcore-pwa-mobile
.credits-subtitle,
html.endcore-pwa-mobile
.credits-crew-title {
  margin-left:
    var(--endcore-mobile-side) !important;

  margin-right:
    var(--endcore-mobile-side) !important;
}


html.endcore-pwa-mobile
.credits-section
> h2 {
  margin-bottom:
    13px !important;

  font-size:
    22px !important;
}


/*
 * Cast must be ONE horizontal touch rail.
 * Never wrap people into two microscopic rows.
 */
html.endcore-pwa-mobile
.credits-row {
  display:
    flex !important;

  flex-wrap:
    nowrap !important;

  grid-template-columns:
    none !important;

  width:
    100% !important;

  max-width:
    none !important;

  min-width:
    0 !important;

  gap:
    13px !important;

  overflow-x:
    auto !important;

  overflow-y:
    hidden !important;

  padding:
    0
    var(--endcore-mobile-side)
    12px !important;

  margin:
    0 !important;

  scroll-padding-inline:
    var(--endcore-mobile-side);

  scroll-snap-type:
    x proximity;

  overscroll-behavior-inline:
    contain;

  -webkit-overflow-scrolling:
    touch;

  scrollbar-width:
    none;
}


html.endcore-pwa-mobile
.credits-row::-webkit-scrollbar {
  display:
    none;
}


html.endcore-pwa-mobile
.credits-row
> * {
  flex:
    0 0 116px !important;

  width:
    116px !important;

  min-width:
    116px !important;

  max-width:
    116px !important;

  scroll-snap-align:
    start;
}


html.endcore-pwa-mobile
.credit-person-photo {
  width:
    116px !important;

  height:
    148px !important;

  min-height:
    148px !important;

  overflow:
    hidden !important;

  border-radius:
    15px !important;
}


html.endcore-pwa-mobile
.credit-person-photo
img {
  width:
    100% !important;

  height:
    100% !important;

  object-fit:
    cover !important;
}


html.endcore-pwa-mobile
.credit-person-copy {
  width:
    100% !important;

  min-width:
    0 !important;

  padding-top:
    8px !important;

  font-size:
    13px !important;

  line-height:
    1.25 !important;
}


html.endcore-pwa-mobile
.credits-next {
  display:
    none !important;
}


/* =========================================================
   COMMUNITY — AFTER CAST, FULL WIDTH
   ========================================================= */

html.endcore-pwa-mobile
.detail-community-hero {
  order:
    30;

  position:
    static !important;

  inset:
    auto !important;

  width:
    auto !important;

  max-width:
    none !important;

  min-width:
    0 !important;

  margin:
    24px
    var(--endcore-mobile-side)
    22px !important;

  padding:
    0 !important;

  transform:
    none !important;
}


html.endcore-pwa-mobile
.community-side-card {
  position:
    static !important;

  width:
    100% !important;

  max-width:
    none !important;

  min-width:
    0 !important;

  margin:
    0 !important;

  padding:
    18px !important;

  box-sizing:
    border-box !important;

  border-radius:
    18px !important;
}


html.endcore-pwa-mobile
.community-side-header {
  margin-bottom:
    14px !important;
}


html.endcore-pwa-mobile
.community-side-header h2 {
  font-size:
    21px !important;

  line-height:
    1.15 !important;
}


html.endcore-pwa-mobile
.community-side-hero {
  display:
    flex !important;

  flex-wrap:
    wrap !important;

  align-items:
    center !important;

  gap:
    13px !important;
}


html.endcore-pwa-mobile
.community-side-score-shell {
  min-width:
    0 !important;
}


html.endcore-pwa-mobile
.community-review-list {
  max-height:
    none !important;

  overflow:
    visible !important;
}


html.endcore-pwa-mobile
.community-review-item {
  grid-template-columns:
    38px
    minmax(0, 1fr) !important;

  gap:
    10px !important;

  padding:
    13px 0 !important;
}


html.endcore-pwa-mobile
.community-review-avatar {
  width:
    38px !important;

  height:
    38px !important;
}


html.endcore-pwa-mobile
.community-review-copy,
html.endcore-pwa-mobile
.community-review-topline,
html.endcore-pwa-mobile
.community-review-identity {
  min-width:
    0 !important;
}


/* =========================================================
   SERIES — SEASONS
   ========================================================= */

html.endcore-pwa-mobile
.series-season-grid {
  display:
    flex !important;

  flex-wrap:
    nowrap !important;

  grid-template-columns:
    none !important;

  width:
    100% !important;

  gap:
    12px !important;

  overflow-x:
    auto !important;

  overflow-y:
    hidden !important;

  padding:
    0
    var(--endcore-mobile-side)
    12px !important;

  scroll-snap-type:
    x proximity;

  -webkit-overflow-scrolling:
    touch;

  scrollbar-width:
    none;
}


html.endcore-pwa-mobile
.series-season-grid::-webkit-scrollbar {
  display:
    none;
}


html.endcore-pwa-mobile
.series-season-card {
  flex:
    0 0 min(
      42vw,
      170px
    ) !important;

  width:
    min(
      42vw,
      170px
    ) !important;

  min-width:
    0 !important;

  scroll-snap-align:
    start;
}


/* =========================================================
   SERIES — EPISODES
   ========================================================= */

html.endcore-pwa-mobile
.season-episode-list {
  display:
    flex !important;

  flex-direction:
    column !important;

  width:
    100% !important;

  gap:
    16px !important;

  padding:
    0
    var(--endcore-mobile-side)
    16px !important;
}


html.endcore-pwa-mobile
.season-episode-item,
html.endcore-pwa-mobile
.season-episode-item:first-child {
  display:
    block !important;

  width:
    100% !important;

  max-width:
    none !important;

  margin:
    0 !important;

  padding:
    0 !important;

  overflow:
    hidden !important;

  border-radius:
    16px !important;
}


html.endcore-pwa-mobile
.season-episode-preview {
  width:
    100% !important;

  max-width:
    none !important;

  aspect-ratio:
    16 / 9 !important;

  border-radius:
    0 !important;
}


html.endcore-pwa-mobile
.season-episode-preview
img {
  width:
    100% !important;

  height:
    100% !important;

  object-fit:
    cover !important;
}


html.endcore-pwa-mobile
.season-episode-copy {
  width:
    100% !important;

  max-width:
    none !important;

  padding:
    13px 14px 15px !important;

  box-sizing:
    border-box !important;
}


html.endcore-pwa-mobile
.season-episode-copy h3 {
  font-size:
    17px !important;

  line-height:
    1.25 !important;
}


html.endcore-pwa-mobile
.season-episode-copy p {
  display:
    -webkit-box !important;

  overflow:
    hidden !important;

  -webkit-box-orient:
    vertical !important;

  -webkit-line-clamp:
    3 !important;

  font-size:
    13.5px !important;

  line-height:
    1.45 !important;
}


/* =========================================================
   REVIEW DIALOG MOBILE
   ========================================================= */

html.endcore-pwa-mobile
.review-dialog-overlay {
  padding:
    12px !important;

  align-items:
    flex-end !important;
}


html.endcore-pwa-mobile
.review-dialog {
  width:
    100% !important;

  max-width:
    none !important;

  max-height:
    min(
      82svh,
      720px
    ) !important;

  margin:
    0 !important;

  border-radius:
    22px 22px 12px 12px !important;
}


html.endcore-pwa-mobile
.review-dialog-actions
button {
  min-height:
    46px !important;
}


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

@media (max-width: 390px) {

  html.endcore-pwa-mobile
  .detail-content {
    padding-left:
      13px !important;

    padding-right:
      13px !important;
  }


  html.endcore-pwa-mobile
  .detail-poster {
    width:
      112px !important;

    min-width:
      112px !important;

    max-width:
      112px !important;
  }


  html.endcore-pwa-mobile
  .credits-row
  > * {
    flex-basis:
      108px !important;

    width:
      108px !important;

    min-width:
      108px !important;

    max-width:
      108px !important;
  }


  html.endcore-pwa-mobile
  .credit-person-photo {
    width:
      108px !important;

    height:
      140px !important;
  }
}


/* =========================================================
   ENDCORE MOBILE DETAILS V2
   ========================================================= */


/* ---------------------------------------------------------
   PLAYBACK ACTIONS
   --------------------------------------------------------- */

html.endcore-pwa-mobile
.detail-actions {
  display:
    flex !important;

  flex-wrap:
    nowrap !important;

  width:
    calc(
      100% +
      var(--endcore-mobile-side)
    ) !important;

  max-width:
    none !important;

  gap:
    9px !important;

  overflow-x:
    auto !important;

  overflow-y:
    hidden !important;

  padding:
    2px
    var(--endcore-mobile-side)
    8px
    0 !important;

  margin:
    5px 0 17px !important;

  scroll-snap-type:
    x proximity;

  -webkit-overflow-scrolling:
    touch;

  scrollbar-width:
    none;
}


html.endcore-pwa-mobile
.detail-actions::-webkit-scrollbar {
  display:
    none;
}


html.endcore-pwa-mobile
.detail-actions
.detail-action {
  flex:
    0 0 auto !important;

  min-height:
    46px !important;

  padding-inline:
    15px !important;

  white-space:
    nowrap !important;

  scroll-snap-align:
    start;
}


/*
 * Primary playback action should visually own the row.
 */
html.endcore-pwa-mobile
.detail-actions
.detail-action.primary {
  min-width:
    118px !important;

  font-size:
    15px !important;

  font-weight:
    750 !important;
}


/* ---------------------------------------------------------
   TRACK CONTROLS
   --------------------------------------------------------- */

html.endcore-pwa-mobile
.detail-track-controls {
  display:
    grid !important;

  grid-template-columns:
    1fr !important;

  width:
    100% !important;

  gap:
    9px !important;

  margin:
    13px 0 5px !important;
}


html.endcore-pwa-mobile
.detail-track-picker {
  width:
    100% !important;

  max-width:
    none !important;
}


html.endcore-pwa-mobile
.detail-track-picker
select {
  width:
    100% !important;

  min-height:
    44px !important;

  border-radius:
    12px !important;
}


/* ---------------------------------------------------------
   WATCH PROGRESS
   --------------------------------------------------------- */

html.endcore-pwa-mobile
.detail-resume-progress {
  width:
    100% !important;

  max-width:
    none !important;

  margin:
    14px 0 4px !important;
}


/* ---------------------------------------------------------
   CAST / CREW SPACING
   --------------------------------------------------------- */

html.endcore-pwa-mobile
.detail-cast-fullwidth {
  margin-top:
    22px !important;

  margin-bottom:
    0 !important;
}


html.endcore-pwa-mobile
.credits-subtitle,
html.endcore-pwa-mobile
.credits-crew-title {
  margin-top:
    18px !important;

  margin-bottom:
    10px !important;

  font-size:
    11px !important;

  letter-spacing:
    0.16em !important;

  text-transform:
    uppercase;
}


html.endcore-pwa-mobile
.credit-person-copy {
  min-height:
    47px !important;
}


html.endcore-pwa-mobile
.credit-person-copy
strong {
  display:
    -webkit-box !important;

  overflow:
    hidden !important;

  -webkit-box-orient:
    vertical !important;

  -webkit-line-clamp:
    2 !important;

  font-size:
    13px !important;

  line-height:
    1.22 !important;
}


html.endcore-pwa-mobile
.credit-person-copy
span {
  display:
    block !important;

  overflow:
    hidden !important;

  margin-top:
    3px !important;

  color:
    rgba(
      199,
      211,
      226,
      0.60
    ) !important;

  font-size:
    11.5px !important;

  line-height:
    1.25 !important;

  text-overflow:
    ellipsis !important;

  white-space:
    nowrap !important;
}


/* ---------------------------------------------------------
   COMMUNITY — LESS VERTICAL WEIGHT
   --------------------------------------------------------- */

html.endcore-pwa-mobile
.detail-community-hero {
  margin-top:
    8px !important;

  margin-bottom:
    16px !important;
}


html.endcore-pwa-mobile
.community-side-card {
  padding:
    16px !important;

  border-radius:
    17px !important;
}


html.endcore-pwa-mobile
.community-side-copy {
  margin:
    10px 0 !important;

  font-size:
    12.5px !important;

  line-height:
    1.45 !important;
}


html.endcore-pwa-mobile
.community-side-actions {
  margin:
    12px 0 !important;
}


html.endcore-pwa-mobile
.community-review-action {
  min-height:
    44px !important;

  border-radius:
    12px !important;
}


/*
 * Keep the first review visible on the mobile card.
 * Additional reviews remain available through EndCore's
 * existing expand-comments flow.
 */
html.endcore-pwa-mobile
.detail-community-hero
.community-review-list:not(
  .is-expanded
)
.community-review-item:nth-child(n + 2) {
  display:
    none !important;
}


html.endcore-pwa-mobile
.community-review-item {
  padding:
    11px 0 !important;
}


html.endcore-pwa-mobile
.community-review-comment {
  display:
    -webkit-box !important;

  overflow:
    hidden !important;

  -webkit-box-orient:
    vertical !important;

  -webkit-line-clamp:
    4 !important;

  margin-top:
    7px !important;

  line-height:
    1.42 !important;
}


/* ---------------------------------------------------------
   SEASONS
   --------------------------------------------------------- */

html.endcore-pwa-mobile
.series-season-grid {
  gap:
    11px !important;
}


html.endcore-pwa-mobile
.series-season-card {
  border-radius:
    14px !important;
}


/* ---------------------------------------------------------
   DETAILS BOTTOM SAFE AREA
   --------------------------------------------------------- */

html.endcore-pwa-mobile
.detail-view {
  padding-bottom:
    calc(
      var(--endcore-mobile-nav) +
      env(safe-area-inset-bottom) +
      26px
    ) !important;
}


/* =========================================================
   ENDCORE MOBILE NAV V3
   ========================================================= */


/* ---------------------------------------------------------
   COMMUNITY COMMENTS
   Never split ordinary words vertically.
   --------------------------------------------------------- */

html.endcore-pwa-mobile
.community-review-copy {
  width:
    100% !important;

  max-width:
    none !important;

  min-width:
    0 !important;
}


html.endcore-pwa-mobile
.community-review-comment,
html.endcore-pwa-mobile
.community-review-copy p {
  display:
    block !important;

  width:
    100% !important;

  max-width:
    none !important;

  min-width:
    0 !important;

  white-space:
    normal !important;

  word-break:
    normal !important;

  overflow-wrap:
    break-word !important;

  hyphens:
    none !important;

  line-break:
    auto !important;

  font-size:
    13px !important;

  line-height:
    1.48 !important;
}


/*
 * Keep comments compact without destroying word layout.
 */
html.endcore-pwa-mobile
.community-review-comment {
  display:
    -webkit-box !important;

  -webkit-box-orient:
    vertical !important;

  -webkit-line-clamp:
    4 !important;

  overflow:
    hidden !important;
}


/* ---------------------------------------------------------
   MOBILE SERVERS SHEET
   --------------------------------------------------------- */

html.endcore-pwa-mobile
.sidebar-server-switcher.endcore-mobile-server-sheet-open {
  display:
    block !important;

  position:
    fixed !important;

  left:
    12px !important;

  right:
    12px !important;

  bottom:
    calc(
      var(--endcore-mobile-nav) +
      env(safe-area-inset-bottom) +
      10px
    ) !important;

  top:
    auto !important;

  width:
    auto !important;

  max-width:
    none !important;

  max-height:
    min(
      68svh,
      600px
    ) !important;

  overflow-y:
    auto !important;

  padding:
    12px !important;

  margin:
    0 !important;

  box-sizing:
    border-box !important;

  border-radius:
    20px !important;

  z-index:
    1300 !important;

  background:
    rgba(
      4,
      12,
      22,
      0.985
    ) !important;

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

  box-shadow:
    0 22px 70px
    rgba(
      0,
      0,
      0,
      0.62
    ) !important;

  backdrop-filter:
    blur(24px);

  -webkit-backdrop-filter:
    blur(24px);
}


/*
 * Keep the original EndCore Servers control accessible.
 * Previous V1 hid it and assumed an internal list id.
 */
html.endcore-pwa-mobile
.sidebar-server-switcher.endcore-mobile-server-sheet-open
#serversNavButton {
  display:
    flex !important;

  width:
    100% !important;

  min-height:
    46px !important;

  margin:
    0 0 8px !important;
}


html.endcore-pwa-mobile
.sidebar-server-switcher.endcore-mobile-server-sheet-open
* {
  max-width:
    100%;
}


/* ---------------------------------------------------------
   FAVORITES ACTIVE STATE
   --------------------------------------------------------- */

html.endcore-pwa-mobile
.endcore-mobile-nav-button[
  data-mobile-route="favorites"
]
svg {
  fill:
    none;
}


html.endcore-pwa-mobile
.endcore-mobile-nav-button[
  data-mobile-route="favorites"
].active
svg {
  fill:
    currentColor;
}


/* =========================================================
   MOBILE V4 — COMMUNITY GRID FIX
   ========================================================= */

/*
 * community-review-item contains:
 *
 *   avatar | identity/rating
 *          | comment
 *
 * The comment is the third DOM child. Without explicit
 * placement CSS Grid put it into column 1 (38px), which
 * caused words such as ENRREDADA to break vertically.
 */

html.endcore-pwa-mobile
.community-review-item {
  display:
    grid !important;

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

  grid-template-rows:
    auto auto !important;

  column-gap:
    10px !important;

  row-gap:
    7px !important;

  width:
    100% !important;

  max-width:
    none !important;
}


html.endcore-pwa-mobile
.community-review-avatar {
  grid-column:
    1 !important;

  grid-row:
    1 !important;
}


html.endcore-pwa-mobile
.community-review-copy {
  grid-column:
    2 !important;

  grid-row:
    1 !important;

  width:
    100% !important;

  min-width:
    0 !important;
}


html.endcore-pwa-mobile
.community-review-comment {
  grid-column:
    2 / -1 !important;

  grid-row:
    2 !important;

  width:
    100% !important;

  max-width:
    none !important;

  min-width:
    0 !important;

  margin:
    0 !important;

  padding:
    0 !important;

  white-space:
    normal !important;

  word-break:
    normal !important;

  overflow-wrap:
    break-word !important;

  hyphens:
    none !important;

  font-size:
    13px !important;

  line-height:
    1.48 !important;
}


/* =========================================================
   MOBILE V4 — REAL SERVER SHEET
   ========================================================= */

html.endcore-pwa-mobile
body
> .sidebar-server-switcher {
  display:
    none !important;
}


html.endcore-pwa-mobile
body
> .sidebar-server-switcher
.endcore-mobile-server-sheet-open {
  display:
    block !important;
}


/*
 * More specific selector because this node is now a direct
 * child of body rather than a descendant of .main-nav.
 */
html.endcore-pwa-mobile
body
> .sidebar-server-switcher.endcore-mobile-server-sheet-open {
  position:
    fixed !important;

  display:
    block !important;

  left:
    12px !important;

  right:
    12px !important;

  top:
    auto !important;

  bottom:
    calc(
      var(--endcore-mobile-nav) +
      env(safe-area-inset-bottom) +
      10px
    ) !important;

  width:
    auto !important;

  max-width:
    none !important;

  max-height:
    min(
      68svh,
      600px
    ) !important;

  overflow:
    hidden !important;

  margin:
    0 !important;

  padding:
    10px !important;

  box-sizing:
    border-box !important;

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

  border-radius:
    20px !important;

  background:
    rgba(
      4,
      12,
      22,
      0.985
    ) !important;

  box-shadow:
    0 24px 76px
    rgba(
      0,
      0,
      0,
      0.68
    ) !important;

  z-index:
    1350 !important;

  backdrop-filter:
    blur(26px);

  -webkit-backdrop-filter:
    blur(26px);
}


html.endcore-pwa-mobile
body
> .sidebar-server-switcher.endcore-mobile-server-sheet-open
#serversNavButton {
  display:
    flex !important;

  width:
    100% !important;

  min-height:
    46px !important;

  margin:
    0 0 7px !important;

  border-radius:
    13px !important;
}


html.endcore-pwa-mobile
body
> .sidebar-server-switcher.endcore-mobile-server-sheet-open
#serversNavList {
  display:
    block !important;

  position:
    static !important;

  inset:
    auto !important;

  width:
    100% !important;

  max-width:
    none !important;

  max-height:
    min(
      54svh,
      470px
    ) !important;

  overflow-x:
    hidden !important;

  overflow-y:
    auto !important;

  margin:
    0 !important;

  padding:
    4px 0 !important;
}


/*
 * hidden remains authoritative before EndCore opens
 * the native list.
 */
html.endcore-pwa-mobile
body
> .sidebar-server-switcher
#serversNavList[hidden] {
  display:
    none !important;
}


/* =========================================================
   ENDCORE MOBILE SERVERS V6
   Dedicated mobile presentation
   ========================================================= */


/*
 * Desktop navigation stays completely hidden on mobile.
 * No zero-width hosts, no overflow ghosts.
 */
html.endcore-pwa-mobile
.main-nav {
  display:
    none !important;
}


/*
 * Native switcher is a controller only.
 */
html.endcore-pwa-mobile
.sidebar-server-switcher {
  display:
    none !important;
}


/* ---------------------------------------------------------
   DIALOG
   --------------------------------------------------------- */

.endcore-mobile-server-dialog {
  display:
    none;
}


html.endcore-pwa-mobile
.endcore-mobile-server-dialog:not([hidden]) {
  position:
    fixed;

  inset:
    0;

  display:
    flex;

  align-items:
    flex-end;

  justify-content:
    center;

  z-index:
    2000;

  padding:
    0
    10px
    calc(
      var(--endcore-mobile-nav) +
      env(safe-area-inset-bottom) +
      8px
    );

  box-sizing:
    border-box;
}


.endcore-mobile-server-backdrop {
  position:
    absolute;

  inset:
    0;

  background:
    rgba(
      0,
      4,
      10,
      0.62
    );

  backdrop-filter:
    blur(4px);

  -webkit-backdrop-filter:
    blur(4px);
}


.endcore-mobile-server-panel {
  position:
    relative;

  width:
    100%;

  max-width:
    520px;

  max-height:
    min(
      67svh,
      620px
    );

  overflow:
    hidden;

  border:
    1px solid
    rgba(
      255,
      255,
      255,
      0.11
    );

  border-radius:
    24px;

  background:
    linear-gradient(
      180deg,
      rgba(
        8,
        22,
        39,
        0.995
      ),
      rgba(
        3,
        11,
        21,
        0.995
      )
    );

  box-shadow:
    0 28px 90px
    rgba(
      0,
      0,
      0,
      0.72
    );

  z-index:
    1;
}


/* ---------------------------------------------------------
   HEADER
   --------------------------------------------------------- */

.endcore-mobile-server-header {
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    16px;

  padding:
    18px
    18px
    13px;

  border-bottom:
    1px solid
    rgba(
      255,
      255,
      255,
      0.07
    );
}


.endcore-mobile-server-kicker {
  display:
    block;

  margin-bottom:
    3px;

  color:
    #6eb5ff;

  font-size:
    9px;

  font-weight:
    800;

  letter-spacing:
    0.18em;
}


.endcore-mobile-server-header
h2 {
  margin:
    0;

  color:
    #f4f8ff;

  font-size:
    23px;

  line-height:
    1.1;

  letter-spacing:
    -0.025em;
}


.endcore-mobile-server-close {
  appearance:
    none;

  width:
    42px;

  height:
    42px;

  flex:
    0 0 42px;

  border:
    1px solid
    rgba(
      255,
      255,
      255,
      0.10
    );

  border-radius:
    50%;

  background:
    rgba(
      255,
      255,
      255,
      0.04
    );

  color:
    rgba(
      235,
      242,
      251,
      0.82
    );

  font-size:
    27px;

  line-height:
    1;

  cursor:
    pointer;
}


/* ---------------------------------------------------------
   SERVER LIST
   --------------------------------------------------------- */

.endcore-mobile-server-list {
  display:
    flex;

  flex-direction:
    column;

  gap:
    8px;

  max-height:
    min(
      52svh,
      480px
    );

  overflow-y:
    auto;

  padding:
    12px;

  -webkit-overflow-scrolling:
    touch;

  scrollbar-width:
    none;
}


.endcore-mobile-server-list::-webkit-scrollbar {
  display:
    none;
}


.endcore-mobile-server-list
.server-nav-item {
  appearance:
    none;

  width:
    100% !important;

  min-height:
    64px !important;

  display:
    grid !important;

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

  align-items:
    center !important;

  gap:
    11px !important;

  padding:
    11px
    13px !important;

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

  border-radius:
    16px !important;

  background:
    rgba(
      255,
      255,
      255,
      0.035
    ) !important;

  color:
    #e9f0f9 !important;

  text-align:
    left !important;

  touch-action:
    manipulation;
}


.endcore-mobile-server-list
.server-nav-item.is-active {
  border-color:
    rgba(
      67,
      153,
      255,
      0.38
    ) !important;

  background:
    linear-gradient(
      135deg,
      rgba(
        37,
        119,
        232,
        0.20
      ),
      rgba(
        26,
        70,
        125,
        0.11
      )
    ) !important;
}


.endcore-mobile-server-list
.server-nav-name {
  overflow:
    hidden;

  color:
    #f3f7fc;

  font-size:
    15px;

  font-weight:
    700;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


.endcore-mobile-server-list
.server-nav-current {
  color:
    rgba(
      182,
      199,
      218,
      0.67
    );

  font-size:
    9px;

  font-weight:
    700;

  letter-spacing:
    0.04em;

  text-align:
    right;
}


.endcore-mobile-server-list
.server-nav-status {
  width:
    9px;

  height:
    9px;

  border-radius:
    50%;
}


.endcore-mobile-server-empty {
  padding:
    30px 16px;

  color:
    rgba(
      211,
      221,
      233,
      0.60
    );

  font-size:
    14px;

  text-align:
    center;
}


/* Avoid background scrolling while sheet is open. */
html.endcore-pwa-mobile
body.endcore-mobile-server-dialog-open {
  overflow:
    hidden !important;
}


/* =========================================================
   ENDCORE_LIBRARY_ORGANIZE_MOBILE_V2
   ========================================================= */

html.endcore-pwa-mobile
.library-organize {
  gap:
    12px !important;

  padding:
    16px !important;

  border-radius:
    18px !important;
}


html.endcore-pwa-mobile
.library-organize-actions {
  display:
    grid !important;

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

  gap:
    8px !important;
}


html.endcore-pwa-mobile
.library-organize-button {
  width:
    100% !important;

  min-width:
    0 !important;

  min-height:
    44px !important;

  padding:
    0 12px !important;

  font-size:
    13.5px !important;
}


/*
 * With five options, let the final one breathe instead of
 * leaving a visually broken half-row.
 */
html.endcore-pwa-mobile
.library-organize-button:last-child {
  grid-column:
    1 / -1 !important;
}


/* =========================================================
   ENDCORE_LIBRARY_SORT_COMPACT_MOBILE_V3
   ========================================================= */

html.endcore-pwa-mobile
.library-organize {
  display:
    flex !important;

  flex-direction:
    row !important;

  align-items:
    center !important;

  justify-content:
    space-between !important;

  min-height:
    62px !important;

  padding:
    10px 11px 10px 14px !important;

  gap:
    8px !important;

  border-radius:
    16px !important;
}


/*
 * Override previous mobile grid implementation.
 */
html.endcore-pwa-mobile
.library-organize-actions {
  display:
    none !important;
}


html.endcore-pwa-mobile
.library-organize-label {
  display:
    grid !important;

  flex:
    1 1 auto !important;

  min-width:
    0 !important;
}


html.endcore-pwa-mobile
.library-organize-label
span {
  font-size:
    9px !important;

  letter-spacing:
    0.13em !important;
}


html.endcore-pwa-mobile
.library-organize-label
small {
  display:
    none !important;
}


html.endcore-pwa-mobile
.library-sort-compact {
  flex:
    0 0 auto !important;

  display:
    flex !important;

  gap:
    6px !important;
}


html.endcore-pwa-mobile
.library-sort-select-shell {
  width:
    min(
      42vw,
      158px
    ) !important;

  min-width:
    128px !important;

  height:
    42px !important;

  border-radius:
    12px !important;
}


html.endcore-pwa-mobile
.library-sort-select {
  padding-left:
    31px !important;

  padding-right:
    28px !important;

  font-size:
    12.5px !important;
}


html.endcore-pwa-mobile
.library-sort-select-icon {
  left:
    10px !important;
}


html.endcore-pwa-mobile
.library-sort-select-chevron {
  right:
    9px !important;
}


html.endcore-pwa-mobile
.library-sort-direction {
  width:
    42px !important;

  height:
    42px !important;

  flex-basis:
    42px !important;

  border-radius:
    12px !important;
}


/* ---------------------------------------------------------
   PLAYER — FULL TOUCH CONTROL SURFACE
   --------------------------------------------------------- */

html.endcore-pwa-mobile
.player-shell {
  width:
    100vw !important;

  height:
    100dvh !important;

  max-height:
    none !important;

  overflow:
    hidden !important;
}


html.endcore-pwa-mobile
.player-topbar {
  z-index:
    20 !important;

  opacity:
    1 !important;

  transform:
    none !important;

  pointer-events:
    auto !important;

  padding:
    max(14px, env(safe-area-inset-top))
    14px
    14px
    16px !important;
}


html.endcore-pwa-mobile
.player-close {
  position:
    absolute !important;

  top:
    max(
      86px,
      calc(
        env(safe-area-inset-top) + 72px
      )
    ) !important;

  right:
    14px !important;

  z-index:
    30 !important;

  width:
    46px !important;

  height:
    46px !important;

  min-width:
    46px !important;

  flex:
    0 0 46px !important;

  display:
    grid !important;

  place-items:
    center !important;

  pointer-events:
    auto !important;

  visibility:
    visible !important;

  opacity:
    1 !important;

  transform:
    none !important;

  color:
    #fff !important;

  background:
    rgba(5, 15, 28, .82) !important;

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

  font-size:
    24px !important;
}


html.endcore-pwa-mobile
.player-controls {
  z-index:
    20 !important;

  opacity:
    1 !important;

  transform:
    none !important;

  pointer-events:
    auto !important;

  padding:
    52px
    12px
    max(14px, env(safe-area-inset-bottom))
    12px !important;
}


html.endcore-pwa-mobile
.player-shell.controls-hidden
.player-controls,
html.endcore-pwa-mobile
.player-shell.controls-hidden
.player-topbar {
  opacity:
    1 !important;

  transform:
    none !important;

  pointer-events:
    auto !important;
}


html.endcore-pwa-mobile
.player-control-row {
  display:
    grid !important;

  grid-template-columns:
    1fr !important;

  gap:
    9px !important;

  width:
    100% !important;

  min-height:
    0 !important;
}


html.endcore-pwa-mobile
.player-control-row
> .player-control-group:first-child {
  justify-content:
    center !important;

  width:
    100% !important;
}


html.endcore-pwa-mobile
.player-volume {
  display:
    flex !important;

  width:
    100% !important;

  max-width:
    none !important;

  flex:
    none !important;

  justify-content:
    center !important;
}


html.endcore-pwa-mobile
.player-volume input {
  width:
    min(220px, 58vw) !important;

  max-width:
    none !important;

  min-height:
    28px !important;
}


html.endcore-pwa-mobile
.player-track-group {
  display:
    grid !important;

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

  width:
    100% !important;

  margin:
    0 !important;

  gap:
    8px !important;

  justify-content:
    stretch !important;
}


html.endcore-pwa-mobile
.player-track-picker {
  display:
    flex !important;

  min-width:
    0 !important;

  width:
    100% !important;

  max-width:
    none !important;

  flex:
    none !important;

  padding:
    0 8px !important;
}


html.endcore-pwa-mobile
.player-track-picker select {
  min-width:
    0 !important;

  width:
    100% !important;

  max-width:
    none !important;

  min-height:
    44px !important;

  overflow:
    hidden !important;

  text-overflow:
    ellipsis !important;
}


html.endcore-pwa-mobile
.player-track-group
.player-control-button {
  min-width:
    46px !important;

  min-height:
    46px !important;
}


html.endcore-pwa-mobile
.player-stage {
  z-index:
    1 !important;
}

html.endcore-pwa-mobile
.player-topbar,
html.endcore-pwa-mobile
.player-controls {
  -webkit-touch-callout:
    none;
}