/* Compact app navigation on narrow viewports. Desktop layout is unchanged. */
/* Simple icon controls rather than large text action links. */
.watch-share-links .watch-share-icon{
  display:inline-flex;align-items:center;justify-content:center;
  flex:0 0 auto;box-sizing:border-box;width:35px;height:35px;min-width:35px;
  padding:7px;margin:0;border-radius:8px;
  border:1px solid #775398;background:#20132f;color:#eedbff;
  line-height:1;text-decoration:none;cursor:pointer;
}
.watch-share-links .watch-share-icon svg{
  display:block;flex:none;width:19px;height:19px;
}
.watch-share-links .watch-share-icon:hover,
.watch-share-links .watch-share-icon:focus-visible{
  color:#fff;border-color:#cb8cf9;background:#503078;
  box-shadow:0 0 12px #994ff16b;
}
.watch-share-links .watch-share-facebook{color:#c4d8ff}
.watch-share-links .watch-share-x{color:#fff}
.watch-share-links .watch-share-copy{font-size:0}
.watch-share-links .watch-share-feedback.sr{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

@media(max-width:640px){
  /* Keep branding + account actions on top; move only main navigation below. */
  body{padding-bottom:calc(78px + env(safe-area-inset-bottom,0px));}
  .header{
    /* A backdrop-filter on an ancestor repositions fixed descendants.
       Disable it so the nav is anchored to the viewport, not the header. */
    backdrop-filter:none;-webkit-backdrop-filter:none;
    position:relative;z-index:20;
    flex-wrap:nowrap;align-items:center;justify-content:space-between;
    gap:8px;padding:12px 13px;
  }
  .header .brand-art{
    flex:0 1 auto;width:clamp(105px,29vw,148px);min-width:0;height:39px;
  }
  .header .header-member-actions{flex:0 0 auto;margin-left:auto;gap:6px}
  .header .header-member-link,.header .premium{
    min-height:32px;padding:6px 8px;font-size:11px;white-space:nowrap;
  }
  .header .realm-primary-nav{
    position:fixed;z-index:90;
    bottom:0;left:0;right:0;top:auto;
    display:flex;flex-direction:row;justify-content:space-around;align-items:stretch;
    gap:3px;width:100%;max-width:none;min-width:0;flex-wrap:nowrap;
    padding:7px max(10px,env(safe-area-inset-left,0px))
      calc(8px + env(safe-area-inset-bottom,0px))
      max(10px,env(safe-area-inset-right,0px));
    border-top:1px solid #8553af;
    background:linear-gradient(180deg,#19102af5,#090817fa);
    box-shadow:0 -7px 24px #0c061cb8,0 -1px 14px #a04af13b;
    backdrop-filter:blur(16px);
    -webkit-backdrop-filter:blur(16px);
  }
  .header .realm-primary-nav>a{
    display:flex;flex-direction:column;flex:1 1 0;min-width:0;min-height:45px;
    gap:3px;padding:6px 4px;line-height:1.2;font-size:11px;
    text-align:center;border-radius:9px;
  }
  .header .realm-primary-nav>a[aria-current="page"]{
    border-color:#9865c7;background:#35204f;
  }
  .header .realm-primary-nav>a[aria-current="page"]::after{bottom:1px}
  .header .realm-primary-nav>a.header-movie-count{
    flex:1 1 0;min-width:0;min-height:45px;
    margin:0;border-radius:9px;gap:2px;padding:6px 3px;
    box-shadow:inset 0 0 13px #ae65f43a;
  }
  .header .realm-primary-nav>a.header-movie-count strong{font-size:15px}
  .header .realm-primary-nav>a.header-movie-count .header-count-label{font-size:8px}
  .header .realm-primary-nav>a.header-movie-count .header-count-icon{display:none}
  /* Allow page content and anchors to sit above the persistent navigation. */
  main,footer{scroll-margin-bottom:calc(85px + env(safe-area-inset-bottom,0px))}
  .watch-share-links{gap:6px}
  .watch-share-links .watch-share-label{display:none}
  .watch-share-links .watch-share-icon{
    width:37px;height:37px;min-width:37px;padding:8px;
  }
  .watch-share-links .watch-share-icon svg{width:19px;height:19px}
}
@media(max-width:370px){
  .header .brand-art{width:104px}
  .header .header-member-link,.header .premium{font-size:10px;padding:5px 6px}
  .header .realm-primary-nav>a{font-size:10px}
}
@media(prefers-reduced-motion:reduce){
  .watch-share-links .watch-share-icon{transition:none}
}