@charset "UTF-8";

/* Tangxin Theater H5 release v87.
 * Final mobile cascade loaded after the hero guard. Public pages stay dark by
 * default; member pages retain their own theme switch and VI layers.
 */

:root {
  --tx-h5-v87-cream: #fff3d9;
  --tx-h5-v87-rose: #ee4668;
  --tx-h5-v87-wine: #580005;
  --tx-h5-v87-tea: #6b3628;
}

body.home-index-body .head_a_tools > .tx-theme-switch,
body.home-index-body .tx-theme-mobile-item,
body.tx-vod-cinema-page .head_a_tools > .tx-theme-switch,
body.tx-vod-cinema-page .tx-theme-mobile-item,
body.auth-ui-page .head_a_tools > .tx-theme-switch,
body.auth-ui-page .tx-theme-mobile-item {
  display: none !important;
}

body.home-index-body[data-tx-h5-release="h5-v87"] {
  background: #16080d;
  color: var(--tx-h5-v87-cream);
}

body.home-index-body[data-tx-h5-release="h5-v87"] .tx-cinema-hero__slide.is-active,
body.home-index-body[data-tx-h5-release="h5-v87"] .tx-cinema-hero__slide.is-active .tx-cinema-hero__copy,
body.home-index-body[data-tx-h5-release="h5-v87"] .tx-cinema-stage > .tx-trend-deck {
  opacity: 1 !important;
  visibility: visible !important;
}

@media screen and (max-width: 820px) {
  html,
  body {
    width: 100%;
    max-width: 100%;
    overflow-x: clip !important;
  }

  body.home-index-body[data-tx-h5-release="h5-v87"] .tx-brand-intro {
    display: none !important;
  }

  /* Header: keep the identity, menu and search usable without crowding. */
  #topnav .mobile-head > .header:first-child {
    min-height: 56px !important;
    padding: 4px max(8px, env(safe-area-inset-left, 0px)) !important;
  }

  #topnav .mobile-head .head_a {
    gap: 2px !important;
    min-height: 48px !important;
  }

  #topnav .mobile-head .head_logo {
    flex: 1 1 auto !important;
    min-width: 112px !important;
  }

  #topnav .mobile-head .head_logo a,
  #topnav .mobile-head .head_logo .tx-brand-wordmark {
    min-height: 44px !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  #topnav .mobile-head .head_user li.top_ico,
  #topnav .mobile-head .head_user li.top_ico > a.top_link,
  #topnav .mobile-head .head_user li.top_ico > .notify-bell-trigger {
    flex-basis: 44px !important;
    width: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
  }

  #topnav .mobile-head > .header.box {
    min-height: 56px !important;
    padding: 5px 10px 7px !important;
  }

  #topnav .mobile-head .head_b {
    display: grid !important;
    grid-template-columns: 44px minmax(0, 1fr) !important;
    gap: 10px !important;
    width: 100% !important;
  }

  #topnav .mobile-head .head_menu_b,
  #topnav .mobile-head .head_search_mobile_capsule,
  #topnav .mobile-head .head_search_capsule_host {
    min-width: 0 !important;
    width: 100% !important;
  }

  #topnav .mobile-head .head_menu_b > a.menu,
  #topnav .mobile-head .head_search_capsule_host button,
  #topnav .mobile-head .head_search_capsule_host input,
  .head_inner_mobile_toolbar a,
  .head_inner_mobile_toolbar button {
    min-width: 44px !important;
    min-height: 44px !important;
  }

  #topnav .mobile-head .head_search_capsule_host input {
    min-width: 0 !important;
    font-size: 16px !important;
    opacity: 1 !important;
  }

  #topnav .mobile-head .all_menu .close_menu,
  #topnav .mobile-head .all_menu .all-menu-tag {
    box-sizing: border-box;
    min-height: 44px !important;
  }

  #topnav .mobile-head .all_menu .close_menu {
    min-width: 44px !important;
  }

  /* Hero: a readable, final first frame. Artwork remains the first layer. */
  body.home-index-body[data-tx-h5-release="h5-v87"] .tx-cinema-hero {
    height: auto !important;
    min-height: clamp(620px, calc(100svh - 194px), 650px) !important;
    border-radius: 0 0 24px 24px !important;
    contain: layout paint;
    overflow: hidden !important;
    touch-action: pan-y;
  }

  body.home-index-body[data-tx-h5-release="h5-v87"] .tx-cinema-hero__slides,
  body.home-index-body[data-tx-h5-release="h5-v87"] .tx-cinema-hero__slide {
    height: 100% !important;
    min-height: inherit !important;
  }

  body.home-index-body[data-tx-h5-release="h5-v87"] .tx-cinema-hero__art,
  body.home-index-body[data-tx-h5-release="h5-v87"] .tx-cinema-hero__slide.art-mode-poster .tx-cinema-hero__art,
  body.home-index-body[data-tx-h5-release="h5-v87"] .tx-cinema-hero__slide.art-mode-banner .tx-cinema-hero__art,
  body.home-index-body[data-tx-h5-release="h5-v87"] .tx-cinema-hero__slide.art-mode-backdrop .tx-cinema-hero__art {
    inset: 0 0 auto !important;
    width: 100% !important;
    height: clamp(352px, 52svh, 420px) !important;
    min-height: 352px;
    max-height: 420px;
    overflow: hidden !important;
    opacity: 1 !important;
  }

  body.home-index-body[data-tx-h5-release="h5-v87"] .tx-cinema-hero__art img,
  body.home-index-body[data-tx-h5-release="h5-v87"] .tx-cinema-hero__slide.art-mode-poster .tx-cinema-hero__art img,
  body.home-index-body[data-tx-h5-release="h5-v87"] .tx-cinema-hero__slide.art-mode-banner .tx-cinema-hero__art img,
  body.home-index-body[data-tx-h5-release="h5-v87"] .tx-cinema-hero__slide.art-mode-backdrop .tx-cinema-hero__art img {
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: cover !important;
    object-position: var(--tx-hero-position, center center) !important;
    opacity: 1 !important;
  }

  body.home-index-body[data-tx-h5-release="h5-v87"] .tx-cinema-hero__slide::after,
  body.home-index-body[data-tx-h5-release="h5-v87"] .tx-cinema-hero__slide.art-mode-poster::after {
    background:
      linear-gradient(180deg, rgba(13, 4, 7, 0) 0%, rgba(13, 4, 7, .08) 34%, rgba(13, 4, 7, .78) 64%, #16080d 83%),
      linear-gradient(90deg, rgba(13, 4, 7, .14), transparent 60%) !important;
  }

  body.home-index-body[data-tx-h5-release="h5-v87"] .tx-cinema-hero__copy,
  body.home-index-body[data-tx-h5-release="h5-v87"] .tx-cinema-hero__slide.art-mode-poster .tx-cinema-hero__copy {
    inset: auto 14px 94px 14px !important;
    width: auto !important;
    max-width: none !important;
    max-height: calc(100% - 112px);
    box-sizing: border-box;
    padding: 17px 18px 18px !important;
    border-radius: 18px !important;
    background: linear-gradient(135deg, rgba(48, 18, 27, .72), rgba(18, 7, 11, .57)) !important;
    -webkit-backdrop-filter: blur(12px) saturate(1.16);
    backdrop-filter: blur(12px) saturate(1.16);
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  body.home-index-body[data-tx-h5-release="h5-v87"] .tx-cinema-hero__copy > * {
    opacity: 1 !important;
    visibility: visible !important;
  }

  body.home-index-body[data-tx-h5-release="h5-v87"] .tx-cinema-hero__eyebrow {
    gap: 8px !important;
    font-size: 11px !important;
    line-height: 1.2 !important;
  }

  body.home-index-body[data-tx-h5-release="h5-v87"] .tx-cinema-hero__eyebrow span {
    padding: 7px 10px !important;
  }

  body.home-index-body[data-tx-h5-release="h5-v87"] .tx-cinema-hero__copy h2 {
    display: block !important;
    max-width: 100% !important;
    margin: 10px 0 9px !important;
    font-size: clamp(35px, 10.6vw, 46px) !important;
    line-height: 1.04 !important;
    letter-spacing: -.045em !important;
    overflow: visible !important;
    overflow-wrap: anywhere;
    text-wrap: balance;
    white-space: normal !important;
  }

  body.home-index-body[data-tx-h5-release="h5-v87"] .tx-cinema-hero__meta {
    display: flex !important;
    max-width: 100%;
    gap: 4px 7px !important;
    flex-wrap: wrap !important;
    font-size: 13px !important;
    line-height: 1.35 !important;
  }

  body.home-index-body[data-tx-h5-release="h5-v87"] .tx-cinema-hero__summary {
    -webkit-line-clamp: 2 !important;
    margin-top: 8px !important;
    font-size: 14px !important;
    line-height: 1.55 !important;
  }

  body.home-index-body[data-tx-h5-release="h5-v87"] .tx-cinema-hero__actions {
    display: flex !important;
    gap: 8px !important;
    margin-top: 12px !important;
  }

  body.home-index-body[data-tx-h5-release="h5-v87"] .tx-cinema-action {
    min-width: 0 !important;
    min-height: 44px !important;
    padding: 0 16px !important;
    font-size: 14px !important;
    line-height: 44px !important;
    touch-action: manipulation;
  }

  /* The rail is a swipeable control; the selected slice stays easy to see. */
  body.home-index-body[data-tx-h5-release="h5-v87"] .tx-cinema-hero__nav {
    display: flex !important;
    inset: auto 14px 34px 14px !important;
    width: auto !important;
    gap: 8px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding: 2px 36px 2px 0 !important;
    scroll-padding-inline: 14px;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    touch-action: pan-x;
  }

  body.home-index-body[data-tx-h5-release="h5-v87"] .tx-cinema-hero__nav::-webkit-scrollbar {
    display: none;
  }

  body.home-index-body[data-tx-h5-release="h5-v87"] .tx-cinema-hero__nav-item,
  body.home-index-body[data-tx-h5-release="h5-v87"] .tx-cinema-hero__nav-item.is-active {
    flex: 0 0 52px !important;
    width: 52px !important;
    min-width: 52px !important;
    min-height: 44px !important;
    scroll-snap-align: start;
  }

  body.home-index-body[data-tx-h5-release="h5-v87"] .tx-cinema-hero__nav-item.is-active {
    flex-basis: 66px !important;
    width: 66px !important;
  }

  body.home-index-body[data-tx-h5-release="h5-v87"] .tx-cinema-hero__nav-copy {
    display: none !important;
  }

  /* Hero-to-content bridge and horizontal content cues. */
  body.home-index-body[data-tx-h5-release="h5-v87"] .tx-cinema-stage > .tx-trend-deck,
  body.home-index-body[data-tx-h5-release="h5-v87"] .tx-trend-deck {
    width: calc(100% - 20px) !important;
    margin: -24px 10px 18px !important;
    padding: 25px 16px 22px !important;
    border-width: 1px !important;
    border-radius: 24px !important;
    transform: none !important;
  }

  body.home-index-body[data-tx-h5-release="h5-v87"] .tx-trend-deck__head {
    gap: 14px !important;
  }

  body.home-index-body[data-tx-h5-release="h5-v87"] .tx-trend-deck__heading h2 {
    font-size: clamp(24px, 7vw, 30px) !important;
    line-height: 1.12 !important;
  }

  body.home-index-body[data-tx-h5-release="h5-v87"] .tx-trend-tabs,
  body.home-index-body[data-tx-h5-release="h5-v87"] .tx-trend-grid,
  body.home-index-body[data-tx-h5-release="h5-v87"] .tx-poster-rail__track,
  body.home-index-body[data-tx-h5-release="h5-v87"] .list_scroll {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
  }

  body.home-index-body[data-tx-h5-release="h5-v87"] .tx-trend-tab,
  body.home-index-body[data-tx-h5-release="h5-v87"] .tx-trend-card a,
  body.home-index-body[data-tx-h5-release="h5-v87"] .tx-poster-card a {
    min-height: 44px !important;
  }

  .tx-image-shell.is-image-error::after {
    content: "图片暂未加载" !important;
  }

  /* Detail and play typography: readable panels with reliable touch targets. */
  body.tx-vod-detail-page .content_top .pannel_head.detail-mobile-head h1.title,
  body.tx-vod-detail-page .detail-mobile-head h1.title {
    -webkit-line-clamp: 2 !important;
    font-size: clamp(25px, 7.3vw, 32px) !important;
    line-height: 1.14 !important;
  }

  body.tx-vod-detail-page .tx-story-panel__copy {
    font-size: 16px !important;
    line-height: 1.82 !important;
  }

  body.tx-vod-cinema-page .content_playlist li > a,
  body.tx-vod-cinema-page .play_source_tab a,
  body.tx-vod-cinema-page .vod-playlist-expand,
  body.tx-vod-cinema-page .sort_btn,
  body.tx-vod-cinema-page .tx-comment-panel button,
  body.tx-vod-cinema-page .tx-comment-panel input,
  body.tx-vod-cinema-page .tx-comment-panel textarea {
    min-height: 44px !important;
  }

  body.tx-vod-cinema-page .content_playlist {
    gap: 8px !important;
  }

  body.tx-vod-cinema-page .content_playlist li > a {
    font-size: 14px !important;
    line-height: 1.25 !important;
  }

  body.tx-vod-play-page .player_video,
  body.tx-vod-play-page .player_video iframe,
  body.tx-vod-play-page .player_video video,
  body.tx-vod-play-page .player_video .MacPlayer,
  body.tx-vod-play-page #playleft {
    background: #000 !important;
  }

  body.tx-vod-play-page.tx-vod-portrait-stage .player_video {
    width: min(100%, 430px) !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: calc(100svh - 270px) !important;
    aspect-ratio: 9 / 16 !important;
  }

  body.tx-vod-play-page .play_pan .video_title h1.title {
    font-size: clamp(20px, 5.8vw, 24px) !important;
    line-height: 1.3 !important;
    overflow-wrap: anywhere;
  }

  #bottomNav.hidden_mb,
  .foot.foot_nav #bottomNav.hidden_mb {
    background: rgba(12, 7, 11, .99) !important;
    border-top-color: rgba(255, 243, 217, .24) !important;
    color: var(--tx-h5-v87-cream) !important;
  }

  #bottomNav .bottom-nav-item {
    color: #eadbd4 !important;
  }

  #bottomNav .bottom-nav-item.active {
    color: #ff91a7 !important;
  }

  #bottomNav .bottom-nav-text {
    font-size: 12px !important;
    opacity: 1 !important;
  }

  a:focus-visible,
  button:focus-visible,
  input:focus-visible,
  textarea:focus-visible,
  select:focus-visible,
  [role="button"]:focus-visible,
  [role="tab"]:focus-visible {
    outline: 3px solid var(--tx-h5-v87-rose) !important;
    outline-offset: 2px !important;
  }
}

@media screen and (max-width: 430px) {
  body.home-index-body #topnav .mobile-head .head_user li.top_ico:has(a[href*="label/rank"]) {
    display: none !important;
  }
}

@media screen and (max-width: 360px) {
  #topnav .mobile-head .head_logo {
    min-width: 102px !important;
  }

  #topnav .mobile-head .head_logo .tx-brand-wordmark {
    font-size: 16px !important;
  }

  body.home-index-body[data-tx-h5-release="h5-v87"] .tx-cinema-hero__copy {
    inset-inline: 12px !important;
    padding-inline: 15px !important;
  }

  body.home-index-body[data-tx-h5-release="h5-v87"] .tx-cinema-hero__copy h2 {
    font-size: clamp(33px, 10.2vw, 40px) !important;
  }
}

@media screen and (max-width: 820px) and (max-height: 700px) {
  body.home-index-body[data-tx-h5-release="h5-v87"] .tx-cinema-hero {
    min-height: 600px !important;
  }

  body.home-index-body[data-tx-h5-release="h5-v87"] .tx-cinema-hero__art {
    height: clamp(316px, 48svh, 360px) !important;
    min-height: 316px;
  }

  body.home-index-body[data-tx-h5-release="h5-v87"] .tx-cinema-hero__copy {
    bottom: 88px !important;
  }

  body.home-index-body[data-tx-h5-release="h5-v87"] .tx-cinema-hero__nav {
    bottom: 28px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.home-index-body[data-tx-h5-release="h5-v87"] *,
  body.home-index-body[data-tx-h5-release="h5-v87"] *::before,
  body.home-index-body[data-tx-h5-release="h5-v87"] *::after,
  body.tx-vod-cinema-page *,
  body.tx-vod-cinema-page *::before,
  body.tx-vod-cinema-page *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }

  body.home-index-body[data-tx-h5-release="h5-v87"] .tx-cinema-hero__copy,
  body.home-index-body[data-tx-h5-release="h5-v87"] .tx-cinema-hero__copy > *,
  body.home-index-body[data-tx-h5-release="h5-v87"] .tx-cinema-stage > .tx-trend-deck {
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
}