/* Mobile-first layout overrides for the shared header and library landing page. */
@media (max-width:760px) {
  html,body { max-width:100%; overflow-x:hidden; }
  .hg-topbar__inner { height:60px!important; min-width:0!important; padding:0 10px!important; gap:6px!important; }
  .hg-topbar__inner > * { min-width:0!important; }
  .hg-logo { flex:0 0 108px!important; min-width:108px!important; }
  .hg-logo img { width:108px!important; height:34px!important; }
  .hg-topbar .hg-nav { display:none!important; }
  .hg-search { flex:0 0 34px!important; width:34px!important; height:34px!important; padding:0 7px!important; }
  .hg-search button { font-size:17px!important; }
  .hg-topbar__inner > .hg-language-switch { flex:0 0 auto!important; margin-left:0!important; }
  .hg-language-switch__button { min-height:34px!important; max-width:64px!important; padding:0 6px!important; font-size:10px!important; }
  .hg-language-switch__button span { overflow:hidden!important; text-overflow:ellipsis!important; white-space:nowrap!important; }
  .hg-language-switch__button i { flex:none!important; font-size:10px!important; }
  .hg-reel-account { flex:0 0 auto!important; gap:5px!important; margin-left:0!important; }
  .hg-reel-account>a,.hg-reel-account>button { width:38px!important; min-width:38px!important; min-height:34px!important; height:34px!important; padding:0!important; border-radius:11px!important; }
  .hg-reel-account__recharge .hg-reel-account__points,.hg-reel-account__recharge b,.hg-reel-account__vip span:not(:first-child) { display:none!important; }
  .hg-reel-account__coin { width:17px!important; height:17px!important; font-size:13px!important; }
  .hg-reel-account__avatar { width:34px!important; min-width:34px!important; height:34px!important; }
  .hg-reel-account__avatar:after { display:none!important; }
  .hg-reel-account__menu { min-width:210px!important; }
  .hg-container { padding:16px 12px 40px!important; }
  .hg-home-hero { min-height:420px!important; margin-bottom:20px!important; border-radius:0 0 16px 16px!important; background-position:63% center!important; }
  .hg-home-hero__copy { padding:48px 20px 137px!important; }
  .hg-home-hero__kicker { font-size:11px!important; }
  .hg-home-hero__copy h1 { margin:11px 0 7px!important; font-size:30px!important; }
  .hg-home-hero__meta { display:none!important; }
  .hg-home-hero__desc { display:-webkit-box!important; overflow:hidden!important; margin-bottom:18px!important; font-size:12px!important; line-height:1.65!important; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
  .hg-home-hero__actions { gap:8px!important; }
  .hg-home-hero__primary,.hg-home-hero__secondary { min-height:39px!important; padding:0 14px!important; border-radius:9px!important; font-size:12px!important; }
  .hg-home-hero__poster-strip { right:16px!important; bottom:14px!important; left:16px!important; gap:8px!important; max-width:none!important; }
  .hg-home-hero__mini-card,.hg-home-hero__mini-card img { width:60px!important; }
  .hg-home-hero__mini-card img { height:86px!important; border-radius:8px!important; }
  .hg-home-hero__mini-card span { margin-top:5px!important; font-size:9px!important; }
  .hg-home-hero__fade { height:130px!important; }
  .hg-collection-row { display:flex!important; overflow-x:auto!important; gap:10px!important; margin-bottom:19px!important; padding:0 0 2px!important; }
  .hg-collection { flex:0 0 82%!important; padding:15px!important; }

  /* The library uses a compact mobile navigation capsule, rather than the
     desktop account toolbar squeezed into a single row. */
  .hg-app:not(.hg-app--reels) .hg-topbar__inner { padding:0 14px!important; gap:7px!important; }
  .hg-app:not(.hg-app--reels) .hg-logo { flex:0 0 102px!important; min-width:102px!important; }
  .hg-app:not(.hg-app--reels) .hg-logo img { width:102px!important; height:32px!important; }
  .hg-app:not(.hg-app--reels) .hg-nav { display:flex!important; min-width:0!important; flex:1 1 auto!important; gap:2px!important; overflow:hidden!important; padding:3px!important; border:1px solid rgba(255,255,255,.09)!important; border-radius:12px!important; background:#11151c!important; }
  .hg-app:not(.hg-app--reels) .hg-nav a { min-width:0!important; flex:1 1 0!important; padding:8px 5px!important; border-radius:8px!important; font-size:11px!important; line-height:16px!important; text-align:center!important; }
  .hg-app:not(.hg-app--reels) .hg-nav a:nth-child(n+4) { display:none!important; }
  .hg-app:not(.hg-app--reels) .hg-search,.hg-app:not(.hg-app--reels) .hg-language-switch { display:none!important; }
  .hg-app:not(.hg-app--reels) .hg-reel-account--guest { display:none!important; }
  .hg-app:not(.hg-app--reels) .hg-login { display:inline-flex!important; flex:0 0 auto!important; min-height:34px!important; padding:0 11px!important; border-radius:11px!important; font-size:11px!important; align-items:center!important; }
  .hg-app:not(.hg-app--reels) .hg-reel-account:not(.hg-reel-account--guest) .hg-reel-account__recharge,.hg-app:not(.hg-app--reels) .hg-reel-account:not(.hg-reel-account--guest) .hg-reel-account__vip { display:none!important; }

  /* The feed header used to spend its whole row on search, language and
     payment controls.  On phones the primary destinations must stay visible
     just like the reference app: browse, library, benefits, then account. */
  .hg-app--reels .hg-topbar__inner { padding:0 10px!important; gap:5px!important; }
  .hg-app--reels .hg-logo { flex:0 0 82px!important; min-width:82px!important; }
  .hg-app--reels .hg-logo img { width:82px!important; height:30px!important; }
  .hg-app--reels .hg-nav { display:flex!important; min-width:0!important; flex:1 1 auto!important; gap:1px!important; overflow:hidden!important; padding:3px!important; border:1px solid rgba(255,255,255,.1)!important; border-radius:12px!important; background:#11151c!important; }
  .hg-app--reels .hg-nav a { display:block!important; min-width:0!important; flex:1 1 0!important; padding:7px 3px!important; overflow:hidden!important; border-radius:8px!important; font-size:10px!important; line-height:16px!important; text-align:center!important; text-overflow:ellipsis!important; white-space:nowrap!important; }
  .hg-app--reels .hg-nav a:nth-child(4),.hg-app--reels .hg-nav a:nth-child(5) { display:none!important; }
  .hg-app--reels .hg-nav .hg-nav__mobile-more { display:block!important; flex:0 0 25px!important; padding:7px 0!important; color:#dfe5ed!important; font-size:17px!important; line-height:13px!important; }
  .hg-app--reels .hg-search { display:none!important; }
  .hg-app--reels .hg-language-switch { flex:0 0 36px!important; margin:0!important; }
  .hg-app--reels .hg-language-switch__button { width:36px!important; min-height:34px!important; padding:0!important; justify-content:center!important; }
  .hg-app--reels .hg-language-switch__button span { display:none!important; }
  .hg-app--reels .hg-language-switch__button:before { content:'文'; color:#d7dce2; font-size:12px; font-weight:800; }
  .hg-app--reels .hg-reel-account { flex:0 0 auto!important; margin:0!important; gap:0!important; }
  .hg-app--reels .hg-reel-account__recharge,.hg-app--reels .hg-reel-account__vip { display:none!important; }
  .hg-app--reels .hg-reel-account:not(.hg-reel-account--guest) .hg-reel-account__avatar { width:34px!important; height:34px!important; min-width:34px!important; }
  .hg-app--reels .hg-reel-account--guest { display:none!important; }
  .hg-app--reels .hg-login { display:inline-flex!important; flex:0 0 34px!important; width:34px!important; min-height:34px!important; align-items:center!important; justify-content:center!important; padding:0!important; border-radius:11px!important; font-size:0!important; }
  .hg-app--reels .hg-login:after { content:'登'; font-size:11px; font-weight:900; }

  /* Mobile library: a single, touch-friendly hero card and horizontal title rails. */
  .hg-app:not(.hg-app--reels) .hg-container { padding:18px 16px 48px!important; }
  .hg-app:not(.hg-app--reels) .hg-home-hero { min-height:448px!important; margin:0 0 25px!important; border:1px solid rgba(255,255,255,.09)!important; border-radius:20px!important; background-position:61% center!important; box-shadow:0 20px 42px rgba(0,0,0,.32)!important; }
  .hg-app:not(.hg-app--reels) .hg-home-hero:before { background:linear-gradient(90deg,rgba(5,7,10,.92) 0%,rgba(5,7,10,.56) 58%,rgba(5,7,10,.08) 100%),linear-gradient(0deg,rgba(5,7,10,.66),transparent 52%)!important; }
  .hg-app:not(.hg-app--reels) .hg-home-hero:after { position:absolute!important; z-index:3!important; right:22px!important; bottom:19px!important; left:auto!important; width:auto!important; height:auto!important; border:0!important; border-radius:0!important; box-shadow:none!important; background:none!important; color:#d7dce2!important; content:'●  ●  ●  ●'!important; font-size:9px!important; letter-spacing:2px!important; }
  .hg-app:not(.hg-app--reels) .hg-home-hero__copy { display:flex!important; min-height:448px!important; max-width:86%!important; flex-direction:column!important; justify-content:flex-end!important; padding:36px 23px 65px!important; }
  .hg-app:not(.hg-app--reels) .hg-home-hero__kicker { width:max-content!important; padding:5px 9px!important; border:1px solid rgba(66,209,156,.52)!important; border-radius:14px!important; background:rgba(6,22,18,.6)!important; color:#58ddaa!important; font-size:10px!important; }
  .hg-app:not(.hg-app--reels) .hg-home-hero__kicker:before { display:none!important; }
  .hg-app:not(.hg-app--reels) .hg-home-hero__copy h1 { margin:17px 0 8px!important; font-size:29px!important; line-height:1.14!important; letter-spacing:0!important; }
  .hg-app:not(.hg-app--reels) .hg-home-hero__desc { margin:0 0 19px!important; color:#c3cad2!important; font-size:12px!important; line-height:1.7!important; }
  .hg-app:not(.hg-app--reels) .hg-home-hero__actions { gap:10px!important; }
  .hg-app:not(.hg-app--reels) .hg-home-hero__primary,.hg-app:not(.hg-app--reels) .hg-home-hero__secondary { min-height:48px!important; padding:0 17px!important; border-radius:12px!important; font-size:14px!important; }
  .hg-app:not(.hg-app--reels) .hg-home-hero__poster-strip { display:none!important; }
  .hg-app:not(.hg-app--reels) .hg-home-hero__fade { height:180px!important; background:linear-gradient(transparent,rgba(5,7,10,.48))!important; }
  .hg-app:not(.hg-app--reels) .hg-filter-row { display:flex!important; flex-wrap:nowrap!important; margin:0 0 17px!important; gap:8px!important; overflow-x:auto!important; }
  .hg-app:not(.hg-app--reels) .hg-filter,.hg-app:not(.hg-app--reels) .hg-vip-filter-toggle { flex:0 0 auto!important; min-height:43px!important; padding:0 15px!important; border-radius:12px!important; }
  .hg-app:not(.hg-app--reels) .hg-collection-row { display:none!important; }
  .hg-app:not(.hg-app--reels) .hg-section { overflow:visible!important; border:0!important; border-radius:0!important; background:transparent!important; }
  .hg-app:not(.hg-app--reels) .hg-section__head { padding:13px 0!important; border:0!important; }
  .hg-app:not(.hg-app--reels) .hg-section__head h2 { font-size:21px!important; }
  .hg-app:not(.hg-app--reels) .hg-vip-grid { display:flex!important; overflow-x:auto!important; gap:11px!important; padding:0 0 8px!important; }
  .hg-app:not(.hg-app--reels) .hg-vip-grid .hg-library-card { flex:0 0 43%!important; }
  .hg-app:not(.hg-app--reels) .hg-library-grid { padding:0!important; }
  .hg-app:not(.hg-app--reels) .hg-library-card { border-radius:13px!important; }
  .hg-app:not(.hg-app--reels) .hg-library-card__info { padding:9px 3px 14px!important; }
  .hg-app:not(.hg-app--reels) .hg-library-card__info h3 { font-size:13px!important; }
  .hg-app:not(.hg-app--reels) .hg-library-card__info p { display:none!important; }

  /* Mobile feed: match the reference composition.  The portrait video is a
     self-contained 9:16 card; the rail floats over it from the lower edge,
     rather than shrinking the video into an artificial left-hand column. */
  .hg-app--reels .hg-reel-main { height:calc(100dvh - 60px)!important; }
  .hg-app--reels .hg-reel { display:flex!important; align-items:flex-start!important; padding:12px!important; }
  .hg-app--reels .hg-reel__stage { width:min(94vw,calc((100dvh - 84px) * .5625))!important; height:auto!important; min-height:0!important; align-self:flex-start!important; aspect-ratio:9 / 16!important; max-height:calc(100% - 24px)!important; margin:0 auto!important; border:1px solid rgba(255,255,255,.12)!important; border-radius:20px!important; box-shadow:0 16px 42px rgba(0,0,0,.48)!important; }
  .hg-app--reels .hg-reel__player-wrap { left:50%!important; top:0!important; width:100%!important; max-width:none!important; height:100%!important; aspect-ratio:auto!important; transform:translateX(-50%)!important; box-shadow:none!important; }
  .hg-app--reels .hg-reel__hint { display:none!important; }
  /* Keep the reaction rail clear of the title, description and footer actions.
     Six actions need more vertical clearance than the desktop rail provides. */
  .hg-app--reels .hg-reel__actions { right:10px!important; top:auto!important; bottom:220px!important; gap:9px!important; }
  .hg-app--reels .hg-reel__action { min-width:48px!important; gap:4px!important; font-size:9px!important; }
  .hg-app--reels .hg-reel__action b { width:39px!important; height:39px!important; font-size:18px!important; }
  .hg-app--reels .hg-reel__info { right:0!important; bottom:72px!important; max-width:none!important; padding:14px 18px 12px!important; border-radius:0!important; background:linear-gradient(0deg,rgba(8,9,10,.9),rgba(8,9,10,.76) 44%,transparent)!important; }
  .hg-app--reels .hg-reel__info .hg-reel__desc { display:-webkit-box!important; overflow:hidden!important; -webkit-line-clamp:2!important; -webkit-box-orient:vertical!important; }
  .hg-app--reels .hg-reel__bottom { bottom:20px!important; gap:8px!important; }
  .hg-app--reels .hg-reel__bottom-btn { min-height:39px!important; padding:0 13px!important; border-radius:11px!important; font-size:11px!important; }

  /* Account pages used to retain the legacy mobile footer and a desktop-sized
     welcome canvas.  Keep the same compact app shell as browse/library and
     make the account content a deliberate vertical workspace. */
  body.hg-account-page { min-height:100dvh!important; margin:0!important; padding:0!important; background:#080b10!important; }
  body.hg-account-page .hg-topbar { top:0!important; margin-top:0!important; }
  body.hg-account-page #bottomNav,body.hg-account-page .foot_nav,body.hg-account-page .extra.extra-fab { display:none!important; }
  body.hg-account-page .hg-account { max-width:640px!important; min-height:calc(100dvh - 60px)!important; padding:20px 16px calc(30px + env(safe-area-inset-bottom,0px))!important; }
  body.hg-account-page .hg-account__intro { display:block!important; margin:0 0 14px!important; }
  body.hg-account-page .hg-account__intro h1 { font-size:25px!important; }
  body.hg-account-page .hg-account__outline-button { display:inline-flex!important; margin-top:13px!important; }
  body.hg-account-page .hg-account__grid { grid-template-columns:1fr!important; gap:13px!important; }
  body.hg-account-page .hg-account__sidebar,body.hg-account-page .hg-account__main { grid-template-columns:1fr!important; gap:13px!important; }
  body.hg-account-page .hg-account-card { border-radius:18px!important; }
  body.hg-account-page .hg-account-profile,body.hg-account-page .hg-account-wallet,body.hg-account-page .hg-account-invite,body.hg-account-page .hg-account-vip,body.hg-account-page .hg-account-continue,body.hg-account-page .hg-account-checkin,body.hg-account-page .hg-account-library { padding:18px!important; }
  body.hg-account-page .hg-account-guest { max-width:none!important; min-height:0!important; margin:0!important; padding:34px 22px!important; border-radius:20px!important; background:linear-gradient(145deg,#151e2a,#10151e)!important; }
  body.hg-account-page .hg-account-guest h1 { max-width:11em!important; margin:0 auto!important; font-size:26px!important; line-height:1.25!important; }
  body.hg-account-page .hg-account-guest > p:not(.hg-account__eyebrow) { max-width:24em!important; margin:13px auto 0!important; line-height:1.65!important; }
  body.hg-account-page .hg-account-guest .hg-account__primary-button { min-height:46px!important; margin-top:20px!important; padding:0 22px!important; border-radius:13px!important; line-height:46px!important; }
}

.hg-nav__mobile-more { display:none; }

/* A 2x-DPR phone can report only ~348 x 550 CSS pixels even though its
   screenshot looks tall.  A six-item single-column rail cannot fit between
   the episode controls and the information layer at that height; use a
   deliberate compact two-column dock instead of clipping its first actions. */
@media (max-width:760px) and (max-height:650px) {
  .hg-app--reels .hg-reel__actions { right:8px!important; bottom:184px!important; display:grid!important; grid-template-columns:repeat(2,42px)!important; width:88px!important; column-gap:4px!important; row-gap:4px!important; }
  .hg-app--reels .hg-reel__action { min-width:42px!important; gap:2px!important; font-size:8px!important; }
  .hg-app--reels .hg-reel__action b { width:32px!important; height:32px!important; font-size:15px!important; }
  .hg-app--reels .hg-reel__info { bottom:70px!important; padding:10px 14px 8px!important; }
  .hg-app--reels .hg-reel__info h1 { margin-bottom:5px!important; font-size:18px!important; }
  .hg-app--reels .hg-reel__info-line { margin-bottom:4px!important; }
  .hg-app--reels .hg-reel__info .hg-reel__tags { margin-bottom:3px!important; font-size:10px!important; }
  .hg-app--reels .hg-reel__info .hg-reel__desc { font-size:10px!important; -webkit-line-clamp:1!important; }
  .hg-app--reels .hg-reel__bottom { bottom:15px!important; }
  .hg-app--reels .hg-reel__bottom-btn { min-height:35px!important; padding:0 10px!important; font-size:10px!important; }
}