@charset "UTF-8";

/* Tangxin Theater H5 depth layer.
 * Loaded last so mobile ergonomics remain consistent across home, VOD and user pages.
 */

@media screen and (max-width: 820px) {
  :root {
    --tx-h5-safe-bottom: env(safe-area-inset-bottom, 0px);
    --tx-h5-line: rgba(255, 247, 232, .14);
    --tx-h5-surface: #111015;
    --tx-h5-ink: #fff7e8;
    --tx-h5-muted: #c7bdc1;
    --tx-h5-accent: #ee4668;
  }

  html.mac-theme-light {
    --tx-h5-line: rgba(79, 55, 64, .14);
    --tx-h5-surface: var(--tx-day-surface, #fffdf9);
    --tx-h5-ink: var(--tx-day-ink, #2a1f24);
    --tx-h5-muted: #786a70;
    --tx-h5-accent: var(--tx-day-accent, #d94b67);
  }

  html,
  body {
    max-width: 100%;
    overflow-x: clip !important;
  }

  body:not(.ai-chat-page):not(.page-art-read):not(.vod-search-hub-body) {
    padding-bottom: calc(88px + var(--tx-h5-safe-bottom)) !important;
  }

  img {
    max-width: 100%;
  }

  a,
  button,
  input,
  select,
  textarea {
    -webkit-tap-highlight-color: transparent;
  }

  button,
  [role="button"] {
    touch-action: manipulation;
  }

  /* Header: two readable rows, full touch targets, no translucent labels. */
  #topnav,
  #topnav .mobile-head,
  #topnav .mobile-head .header,
  #topnav .mobile-head .head_a,
  #topnav .mobile-head .head_b {
    box-sizing: border-box;
    max-width: 100%;
  }

  #topnav .mobile-head > .header:first-child {
    min-height: 56px;
    padding: 4px 8px;
  }

  #topnav .mobile-head .head_a {
    align-items: center;
    display: flex;
    gap: 4px;
    justify-content: space-between;
    min-height: 48px;
  }

  #topnav .mobile-head .head_logo {
    flex: 1 1 auto;
    min-width: 86px;
    overflow: hidden;
  }

  #topnav .mobile-head .head_logo a,
  #topnav .mobile-head .head_logo .tx-brand-wordmark {
    align-items: center;
    display: flex;
    min-height: 44px;
    max-width: 100%;
  }

  #topnav .mobile-head .head_user {
    flex: 0 0 auto;
    min-width: 0;
  }

  #topnav .mobile-head .head_user ul {
    align-items: center;
    display: flex;
    gap: 0;
    margin: 0;
  }

  #topnav .mobile-head .head_user li.top_ico {
    align-items: center;
    display: flex;
    flex: 0 0 44px;
    height: 44px;
    justify-content: center;
    margin: 0 !important;
    width: 44px !important;
  }

  #topnav .mobile-head .head_user li.top_ico > a.top_link,
  #topnav .mobile-head .head_user li.top_ico > .notify-bell-trigger {
    align-items: center;
    box-sizing: border-box;
    display: inline-flex;
    height: 44px;
    justify-content: center;
    min-height: 44px;
    min-width: 44px;
    opacity: 1 !important;
    padding: 8px;
    width: 44px;
  }

  #topnav .mobile-head .head-nav-icon,
  #topnav .mobile-head .head-latest-url-flip {
    height: 24px !important;
    width: 24px !important;
  }

  #topnav .mobile-head .mac_user .head-nav-icon {
    height: 28px !important;
    width: 28px !important;
  }

  #topnav .mobile-head .head_user li.top_ico.tx-theme-mobile-item {
    flex: 0 0 96px !important;
    width: 96px !important;
  }

  #topnav .mobile-head .tx-theme-mobile-item .tx-theme-switch {
    box-sizing: border-box;
    gap: 2px;
    height: 48px;
    padding: 2px;
    width: 96px;
  }

  #topnav .mobile-head .tx-theme-mobile-item .tx-theme-switch__option {
    box-sizing: border-box;
    height: 44px;
    min-height: 44px;
    min-width: 44px;
    opacity: 1 !important;
    padding: 0;
  }

  #topnav .mobile-head .tx-theme-mobile-item .tx-theme-switch__option svg {
    height: 16px;
    width: 16px;
  }

  #topnav .mobile-head > .header.box {
    min-height: 52px;
    padding: 4px 8px 5px;
  }

  #topnav .mobile-head .head_search_mobile_capsule,
  #topnav .mobile-head .head_search_capsule_host,
  #topnav .mobile-head .head_search_inner,
  #topnav .mobile-head .head_search_capsule_field {
    box-sizing: border-box;
    min-height: 44px;
  }

  #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 .bk_btn,
  .head_inner_mobile_toolbar .se_btn,
  .head_inner_mobile_toolbar .share_btn,
  .head_inner_mobile_toolbar a {
    min-height: 44px !important;
    min-width: 44px !important;
  }

  #topnav .mobile-head .head_search_capsule_host input {
    font-size: 16px;
  }

  #topnav .mobile-head .all_menu.menu_block {
    max-height: calc(100dvh - 108px - var(--tx-h5-safe-bottom));
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-bottom: calc(18px + var(--tx-h5-safe-bottom));
  }

  body.tx-h5-menu-open #bottomNav {
    opacity: 0 !important;
    pointer-events: none !important;
    visibility: hidden !important;
  }

  /* Bottom navigation: theme-aware, high contrast and safe-area correct. */
  #bottomNav.hidden_mb,
  .foot.foot_nav #bottomNav.hidden_mb,
  body.home-index-body .foot.foot_nav #bottomNav.hidden_mb,
  body.tx-vod-cinema-page .foot.foot_nav #bottomNav.hidden_mb {
    align-items: flex-start;
    background: rgba(12, 11, 16, .985) !important;
    border-top: 1px solid rgba(255, 247, 232, .18) !important;
    box-shadow: 0 -12px 32px rgba(0, 0, 0, .3) !important;
    box-sizing: border-box;
    color: #fff7e8 !important;
    display: flex !important;
    height: calc(68px + var(--tx-h5-safe-bottom)) !important;
    inset: auto 0 0;
    overflow: hidden;
    padding: 5px max(4px, env(safe-area-inset-right, 0px)) var(--tx-h5-safe-bottom) max(4px, env(safe-area-inset-left, 0px));
    position: fixed;
    transform: none !important;
    width: 100%;
    z-index: 1000;
  }

  html.mac-theme-light #bottomNav.hidden_mb,
  html.mac-theme-light .foot.foot_nav #bottomNav.hidden_mb,
  html.mac-theme-light body.home-index-body .foot.foot_nav #bottomNav.hidden_mb,
  html.mac-theme-light body.tx-vod-cinema-page .foot.foot_nav #bottomNav.hidden_mb {
    background: rgba(255, 253, 249, .985) !important;
    border-top-color: rgba(79, 55, 64, .18) !important;
    box-shadow: 0 -12px 32px rgba(73, 48, 57, .11) !important;
    color: var(--tx-day-ink, #2a1f24) !important;
  }

  #bottomNav .bottom-nav-item {
    align-items: center;
    border-radius: 12px;
    box-sizing: border-box;
    color: #d7ccd0 !important;
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    font-size: 11px;
    font-weight: 700;
    gap: 2px;
    height: 58px;
    justify-content: center;
    line-height: 1.2;
    min-height: 58px;
    min-width: 44px;
    opacity: 1 !important;
    padding: 4px 2px;
    text-align: center;
  }

  html.mac-theme-light #bottomNav .bottom-nav-item {
    color: #62545b !important;
  }

  #bottomNav .bottom-nav-item.active {
    background: rgba(238, 70, 104, .13);
    color: #ff8ba3 !important;
  }

  html.mac-theme-light #bottomNav .bottom-nav-item.active {
    background: rgba(217, 75, 103, .1);
    color: var(--tx-day-accent, #d94b67) !important;
  }

  #bottomNav .bottom-nav-icon {
    height: 24px !important;
    max-height: 24px;
    object-fit: contain;
    opacity: 1 !important;
    width: 24px !important;
  }

  #bottomNav .bottom-nav-text {
    color: inherit !important;
    display: block;
    font-size: 11px !important;
    font-weight: 700;
    line-height: 14px;
    max-width: 100%;
    opacity: 1 !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Image loading feedback without altering content or source URLs. */
  .tx-image-shell {
    background: linear-gradient(110deg, rgba(255, 255, 255, .04) 28%, rgba(238, 70, 104, .12) 42%, rgba(255, 255, 255, .04) 58%) 0 0 / 220% 100%;
    overflow: hidden;
    position: relative;
  }

  html.mac-theme-light .tx-image-shell {
    background: linear-gradient(110deg, #eee6df 28%, #fffaf4 42%, #eee6df 58%) 0 0 / 220% 100%;
  }

  .tx-image-shell:not(.is-image-loaded):not(.is-image-error) {
    animation: tx-h5-image-shimmer 1.15s linear infinite;
  }

  .tx-image-shell > img {
    opacity: 0;
    transition: opacity .22s ease;
  }

  .tx-image-shell.is-image-loaded > img,
  .tx-image-shell.is-image-error > img {
    opacity: 1;
  }

  .tx-image-shell.is-image-error::after {
    color: var(--tx-h5-muted);
    content: "图片加载中";
    font-size: 11px;
    inset: 50% auto auto 50%;
    position: absolute;
    transform: translate(-50%, -50%);
    white-space: nowrap;
  }

  @keyframes tx-h5-image-shimmer {
    to { background-position: -220% 0; }
  }

  /* Home hero: visible immediately, balanced crop, 44px actions. */
  body.home-index-body .tx-brand-intro,
  html.tx-h5-mobile body.home-index-body .tx-brand-intro {
    display: none !important;
    pointer-events: none !important;
  }

  html.tx-h5-mobile.tx-brand-intro-pending body.home-index-body {
    overflow: auto !important;
  }

  html.tx-h5-mobile.tx-brand-intro-pending body.home-index-body > :not(.tx-brand-intro) {
    opacity: 1 !important;
    visibility: visible !important;
  }

  body.home-index-body .tx-cinema-hero {
    min-height: clamp(650px, calc(100svh - 38px), 710px) !important;
  }

  body.home-index-body .tx-cinema-hero__art,
  body.home-index-body .tx-cinema-hero__slide.art-mode-banner .tx-cinema-hero__art {
    height: 55% !important;
  }

  body.home-index-body .tx-cinema-hero__art img {
    height: 100%;
    object-fit: cover;
    object-position: center 32%;
    width: 100%;
  }

  body.home-index-body .tx-cinema-hero__slide.art-mode-poster .tx-cinema-hero__art {
    height: 52% !important;
    right: 0 !important;
    width: 74% !important;
  }

  body.home-index-body .tx-cinema-hero__copy {
    bottom: 142px;
    left: 16px !important;
    right: 16px !important;
    top: auto !important;
  }

  body.home-index-body .tx-cinema-hero__copy h1,
  body.home-index-body .tx-cinema-hero__copy h2 {
    font-size: clamp(38px, 12vw, 56px) !important;
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  body.home-index-body .tx-cinema-hero__summary {
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    display: -webkit-box;
    overflow: hidden;
  }

  body.home-index-body .tx-cinema-action,
  body.home-index-body .tx-cinema-hero__nav-item,
  body.home-index-body .tx-trend-tab {
    box-sizing: border-box;
    min-height: 44px !important;
  }

  body.home-index-body .tx-cinema-hero__nav {
    bottom: 102px !important;
    gap: 7px !important;
    left: 16px !important;
  }

  body.home-index-body .tx-cinema-hero__nav-item {
    min-width: 44px;
    width: 44px !important;
  }

  body.home-index-body .tx-cinema-hero__nav-item.is-active {
    width: 60px !important;
  }

  body.home-index-body .tx-cinema-stage > .tx-trend-deck {
    border: 1px solid var(--tx-h5-line) !important;
    margin-top: -94px !important;
    opacity: 1 !important;
    transform: none !important;
    visibility: visible !important;
    width: calc(100% - 20px) !important;
  }

  body.home-index-body .tx-trend-tabs,
  body.home-index-body .tx-trend-grid,
  body.home-index-body .tx-poster-rail__track,
  body.home-index-body .list_scroll {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
  }

  .tx-h5-rail.is-scrollable {
    padding-right: 24px !important;
    position: relative;
  }

  .tx-h5-rail.is-scrollable::after {
    align-items: center;
    background: var(--tx-h5-surface);
    border: 1px solid var(--tx-h5-line);
    border-radius: 999px;
    color: var(--tx-h5-ink);
    content: "滑动";
    display: flex;
    font-size: 9px;
    font-weight: 800;
    height: 24px;
    justify-content: center;
    opacity: .94;
    padding: 0 8px;
    pointer-events: none;
    position: sticky;
    right: 4px;
    z-index: 3;
  }

  body.home-index-body .tx-trend-card,
  body.home-index-body .tx-poster-card,
  body.home-index-body .vodlist_item,
  body.home-index-body .rank_waterfall > li,
  body.home-index-body .latest-tab-box {
    border-width: 1px !important;
    box-sizing: border-box;
  }

  body.home-index-body .tx-trend-card,
  body.home-index-body .tx-poster-card {
    border: 1px solid var(--tx-h5-line) !important;
    border-radius: 16px !important;
    overflow: hidden;
  }

  body.home-index-body .tx-trend-card__media img,
  body.home-index-body .tx-poster-card img,
  body.home-index-body .vodlist_thumb img {
    height: 100%;
    object-fit: cover;
    width: 100%;
  }

  /* Detail page: the eyebrow no longer crushes the title. */
  body.tx-vod-detail-page .detail-mobile-head {
    align-items: flex-start !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    min-width: 0;
  }

  body.tx-vod-detail-page .detail-mobile-head .tx-vod-eyebrow {
    flex: none !important;
    margin: 0 !important;
    max-width: 100%;
    white-space: normal;
  }

  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-box-orient: vertical;
    -webkit-line-clamp: 2;
    display: -webkit-box !important;
    flex: none !important;
    font-size: clamp(24px, 7.4vw, 30px) !important;
    line-height: 1.12 !important;
    max-width: 100%;
    overflow: hidden !important;
    overflow-wrap: anywhere;
    text-overflow: clip !important;
    white-space: normal !important;
    width: 100% !important;
  }

  body.tx-vod-detail-page .content_box.vod-detail-hero-box {
    gap: 14px !important;
    grid-template-columns: 108px minmax(0, 1fr) !important;
    padding: 12px !important;
  }

  body.tx-vod-detail-page .vod-detail-hero__thumb,
  body.tx-vod-detail-page .vod-detail-hero__thumb .vodlist_thumb {
    height: 162px !important;
    min-height: 162px !important;
    width: 108px !important;
  }

  body.tx-vod-detail-page .content_btn .btn,
  body.tx-vod-detail-page .content_btn a,
  body.tx-vod-detail-page .show_btn,
  body.tx-vod-detail-page .show_btn span,
  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 {
    align-items: center;
    box-sizing: border-box;
    display: inline-flex;
    justify-content: center;
    min-height: 44px !important;
  }

  body.tx-vod-detail-page .tx-story-panel .tabs > .content > section {
    padding: 20px 16px 22px !important;
  }

  body.tx-vod-detail-page .tx-story-panel__head {
    margin-bottom: 16px !important;
  }

  body.tx-vod-detail-page .tx-story-panel__head h2 {
    font-size: 24px !important;
  }

  body.tx-vod-detail-page .tx-story-panel__copy {
    line-height: 1.78 !important;
    padding-top: 15px !important;
  }

  body.tx-vod-cinema-page .pannel,
  body.tx-vod-cinema-page .tx-comment-panel,
  body.tx-vod-cinema-page .pannel--vod-related,
  body.tx-vod-cinema-page .tx-vod-picker-panel {
    border-width: 1px !important;
  }

  body.tx-vod-cinema-page .pannel--vod-related .vodlist_thumb {
    aspect-ratio: 2 / 3;
    height: auto !important;
    min-height: 0 !important;
  }

  body.tx-vod-cinema-page .pannel--vod-related .vodlist_thumb img {
    height: 100%;
    object-fit: cover;
    width: 100%;
  }

  body.tx-vod-cinema-page .mac-vod-grouped-prev,
  body.tx-vod-cinema-page .mac-vod-grouped-next,
  body.tx-vod-cinema-page .slick-arrow {
    align-items: center;
    box-sizing: border-box;
    display: inline-flex !important;
    height: 44px !important;
    justify-content: center;
    min-height: 44px !important;
    min-width: 44px !important;
    width: 44px !important;
  }

  /* Player remains black; only the surrounding controls follow the theme. */
  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 .embed-responsive-item,
  body.tx-vod-play-page #playleft {
    background: #000 !important;
  }

  body.tx-vod-play-page .head_inner_mobile_toolbar {
    min-height: 52px;
  }

  body.tx-vod-play-page .play-but-item > a,
  body.tx-vod-play-page .play_but a,
  body.tx-vod-play-page .play_but button,
  body.tx-vod-play-page .danmaku-send-trigger,
  body.tx-vod-play-page .danmaku-sheet-open {
    align-items: center;
    box-sizing: border-box;
    display: inline-flex;
    justify-content: center;
    min-height: 44px !important;
    min-width: 44px !important;
    padding: 8px 10px !important;
  }

  body.tx-vod-play-page .play_but {
    min-height: 52px;
  }

  body.tx-vod-play-page .play_boxbg {
    padding-top: 0 !important;
  }

  /* Comments and forms: readable text and reliable touch areas. */
  body.tx-vod-cinema-page #pinglun input,
  body.tx-vod-cinema-page #pinglun textarea,
  body.tx-vod-cinema-page #pinglun button,
  body.tx-vod-cinema-page #pinglun .smt a,
  body.tx-vod-cinema-page #pinglun .comment_submit,
  body.auth-ui-page .reg-control,
  body.auth-ui-page button,
  body.auth-ui-page input[type="button"],
  body.auth-ui-page input[type="submit"],
  body.auth-ui-page .auth-pwd-eye,
  body.auth-ui-page .m-nav .btn-left {
    box-sizing: border-box;
    font-size: 16px;
    min-height: 44px !important;
  }

  body.tx-vod-cinema-page #pinglun button,
  body.tx-vod-cinema-page #pinglun .smt a,
  body.tx-vod-cinema-page #pinglun .comment_submit,
  body.auth-ui-page .auth-pwd-eye,
  body.auth-ui-page .m-nav .btn-left {
    align-items: center;
    display: inline-flex;
    justify-content: center;
    min-width: 44px !important;
  }

  body.auth-ui-page .reg-control,
  body.auth-ui-page .auth-page-btn {
    min-height: 48px !important;
  }

  body.auth-ui-page .auth-forgot-link,
  body.auth-ui-page .auth-register-link a,
  body.auth-ui-page .auth-remember-option {
    align-items: center;
    display: inline-flex;
    min-height: 44px;
  }

  /* Member centre: links are touchable and floating tools clear the nav. */
  body.tx-member-page #member a,
  body.tx-member-page #member button,
  body.tx-member-page #member [role="button"] {
    touch-action: manipulation;
  }

  body.tx-member-page #member .tx-member-wallet > a,
  body.tx-member-page #member .tx-member-profile-card__edit,
  body.tx-member-page #member .tx-member-next-list a,
  body.tx-member-page #member .tx-member-benefit-card > a,
  body.tx-member-page #member .tx-member-account-strip > a,
  body.tx-member-page #member .member-avatar-upload__button,
  body.tx-member-page #member .member-genre-chip span,
  body.tx-member-page #member .member-viewing-options span {
    align-items: center;
    box-sizing: border-box;
    display: flex;
    min-height: 44px;
  }

  body.tx-member-page #member .tx-member-stat {
    min-height: 88px;
  }

  body.tx-member-page .extra,
  body.tx-member-page .side-float,
  body.tx-member-page .fixed-right,
  body.tx-member-page [class*="float-menu"] {
    bottom: calc(82px + var(--tx-h5-safe-bottom)) !important;
    z-index: 920 !important;
  }

  body.tx-member-page .extra.extra-fab {
    background: rgba(18, 16, 22, .96) !important;
    border: 1px solid rgba(255, 247, 232, .2) !important;
    border-radius: 50% !important;
    box-shadow: 0 10px 26px rgba(0, 0, 0, .28) !important;
    box-sizing: border-box;
    height: 48px !important;
    width: 48px !important;
  }

  html.mac-theme-light body.tx-member-page .extra.extra-fab {
    background: rgba(255, 253, 249, .98) !important;
    border-color: rgba(79, 55, 64, .18) !important;
    box-shadow: 0 10px 26px rgba(73, 48, 57, .16) !important;
  }
}

@media screen and (max-width: 430px) {
  #topnav .mobile-head .head_user li.top_ico:has(.js-save-site-url) {
    display: none !important;
  }

  #topnav .mobile-head .head_user:has(.mac-notify-bell:not([hidden])) li.top_ico:has(a[href*="label/rank"]) {
    display: none !important;
  }
}

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

  #topnav .mobile-head .head_user:has(.mac-notify-bell:not([hidden])) li.top_ico:has(.mac_head_plays) {
    display: none !important;
  }

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

  body.home-index-body .tx-cinema-hero__copy {
    left: 14px !important;
    right: 14px !important;
  }

  body.home-index-body .tx-cinema-hero__copy h1,
  body.home-index-body .tx-cinema-hero__copy h2 {
    font-size: clamp(36px, 11.5vw, 48px) !important;
  }

  body.tx-vod-detail-page .content_box.vod-detail-hero-box {
    gap: 12px !important;
    grid-template-columns: 96px minmax(0, 1fr) !important;
  }

  body.tx-vod-detail-page .vod-detail-hero__thumb,
  body.tx-vod-detail-page .vod-detail-hero__thumb .vodlist_thumb {
    height: 144px !important;
    min-height: 144px !important;
    width: 96px !important;
  }
}

@media screen and (max-width: 330px) {
  #bottomNav .bottom-nav-item {
    font-size: 10px;
    min-width: 42px;
  }

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

@media screen and (max-width: 820px) and (max-height: 700px) {
  body.home-index-body .tx-cinema-hero {
    min-height: 610px !important;
  }

  body.home-index-body .tx-cinema-hero__art,
  body.home-index-body .tx-cinema-hero__slide.art-mode-banner .tx-cinema-hero__art {
    height: 48% !important;
  }

  body.home-index-body .tx-cinema-hero__copy {
    bottom: 126px;
  }

  body.home-index-body .tx-cinema-hero__nav {
    bottom: 82px !important;
  }

  body.home-index-body .tx-cinema-stage > .tx-trend-deck {
    margin-top: -76px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto !important;
  }

  .tx-image-shell,
  .tx-image-shell::before,
  .tx-image-shell::after,
  .tx-image-shell > img,
  .tx-h5-rail::after {
    animation: none !important;
    transition: none !important;
  }
}