/**
 * 移动端触控与播放/评论体验（全模板族共享）。
 * 断点与 globals 对齐：767 / 640。
 */

.play-ep-truncated {
  display: none !important;
}

.play-ep-more {
  border-style: dashed !important;
  font-weight: 600;
  color: var(--brand, #1677ff) !important;
}

@media (max-width: 899px) {
  .cg-mobile-search {
    display: none !important;
  }

  .cg-tool-btn {
    width: 44px;
    height: 44px;
  }

  body.has-mobile-sticky-ad main.shell {
    padding-bottom: calc(72px + env(safe-area-inset-bottom));
  }

  body.layout-bottom-tabs.has-mobile-sticky-ad main.shell,
  body.family-header-bottom-tabs.has-mobile-sticky-ad main.shell {
    padding-bottom: calc(120px + env(safe-area-inset-bottom));
  }

  /* 页脚在 main 外：预留底栏广告 / 底栏 Tab / 系统手势区，避免版权被挡或裁切 */
  html {
    scroll-padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  }

  body {
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }

  .site-footer-shell {
    padding-bottom: calc(40px + env(safe-area-inset-bottom, 0px));
  }

  body.has-mobile-sticky-ad {
    padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px));
  }

  body.has-mobile-sticky-ad .site-footer-shell {
    padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  }

  /* 与 chrome.css 底栏 Tab 高度对齐（勿缩小到 44px，否则会盖住页脚最后一行） */
  body.layout-bottom-tabs .site-footer-shell,
  body.family-header-bottom-tabs .site-footer-shell {
    padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px));
  }

  body.layout-bottom-tabs.has-mobile-sticky-ad .site-footer-shell,
  body.family-header-bottom-tabs.has-mobile-sticky-ad .site-footer-shell {
    padding-bottom: calc(120px + env(safe-area-inset-bottom, 0px));
  }

  .site-footer.panel {
    padding: 18px 14px calc(28px + env(safe-area-inset-bottom, 0px));
  }

  .site-footer-copyright {
    margin: 0 0 10px;
  }

  .site-footer-preview-meta {
    margin: 8px 0 0;
    padding-bottom: 4px;
    font-size: 12px;
    line-height: 1.5;
  }

  .site-footer .footer-nav a {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    padding: 4px 0;
  }

  .ad-mobile-sticky {
    z-index: 30;
  }

  .artplayer-app {
    z-index: 35 !important;
  }

  /* 广告位：移动端全宽展示，不裁切、不隐藏（蜘蛛仍由 siteAds 清空） */
  .ad-slot-list,
  .channel-portal-lead .ad-channel-banner,
  .channel-portal-lead .ad-list-feed,
  .ad-channel-banner,
  .ad-list-feed,
  .ad-home-notice,
  .ad-jingang,
  .ad-home-banner,
  .ad-home-feed-card,
  .ad-detail-banner,
  .ad-detail-after-info,
  .ad-search-result,
  .ad-footer-banner,
  .ad-nav-text-link,
  .ad-player-above,
  .ad-player-below {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  .ad-jingang {
    grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
    gap: 8px;
  }

  .ad-jingang .ad-slot-link {
    min-height: 44px;
    justify-content: center;
  }

  .ad-home-banner .ad-slot-image,
  .ad-channel-banner .ad-slot-image,
  .ad-list-feed .ad-slot-image,
  .ad-player-above .ad-slot-image,
  .ad-player-below .ad-slot-image {
    width: 100%;
    max-height: min(28vw, 140px);
    object-fit: contain;
    border-radius: 8px;
  }

  .ad-slot-third-party,
  .ad-slot-frame {
    min-height: 0;
  }
}

.footer-discovery-mobile {
  display: none;
}

@media (max-width: 640px) {
  .footer-discovery-desktop {
    display: none !important;
  }

  .footer-discovery-mobile {
    display: block;
  }

  .footer-discovery-mobile .footer-discovery-extra {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 12px;
    margin-top: 8px;
  }

  .footer-discovery-more summary {
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    color: var(--brand, #1677ff);
    padding: 6px 0;
    list-style: none;
  }

  .footer-discovery-more summary::-webkit-details-marker {
    display: none;
  }
}

@media (max-width: 767px) {
  .site-main-play.shell,
  .site-main-detail.shell {
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 12px;
  }

  /* —— 播放页：贴边沉浸 —— */
  .site-main-play.shell {
    padding-left: 0;
    padding-right: 0;
  }

  .play-page-stage.panel {
    display: flex;
    flex-direction: column;
    border-left: none;
    border-right: none;
    border-radius: 0;
    padding-bottom: 12px;
  }

  /* 标题信息 → 广告(若有) → 播放器 → 选集(在 play-island 内) → 底栏操作 */
  .play-page-stage .play-page-info {
    order: 0;
  }

  .play-page-stage .ad-player-above {
    order: 1;
  }

  .play-page-stage .play-island {
    order: 2;
  }

  .play-page-stage .ad-player-below {
    order: 3;
  }

  .play-page-stage .play-page-handles {
    order: 4;
  }

  .play-page-info {
    padding: 12px 14px 10px;
    border-bottom: 1px solid var(--line, rgba(255, 255, 255, 0.08));
  }

  .play-page-extra-open .play-page-extra-body {
    margin-top: 4px;
  }

  .play-page-extra-open .play-page-synopsis p {
    margin: 6px 0 0;
    line-height: 1.55;
  }

  .play-page-crumb {
    display: none;
  }

  .play-page-heading {
    margin-bottom: 6px;
  }

  .play-page-title-text {
    font-size: 1.125rem;
  }

  .play-page-synopsis {
    font-size: 13px;
    color: var(--muted, #667085);
  }

  .play-page-synopsis p {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 4px 0 0;
  }

  .play-page-handles {
    width: 100%;
    justify-content: stretch;
    gap: 8px;
    padding: 10px 14px 14px;
    margin: 0;
    border-top: 1px solid var(--line, rgba(255, 255, 255, 0.08));
    background: var(--panel-bg, transparent);
    box-sizing: border-box;
  }

  .play-handle-btn {
    flex: 1 1 0;
    min-height: 44px;
    padding: 10px 8px;
    font-size: 14px;
  }

  .play-island .player-stage {
    max-height: min(56vw, 72vh);
    min-height: 200px;
    aspect-ratio: 16 / 9;
    border-radius: 0;
    width: 100%;
  }

  .play-island .artplayer-app {
    width: 100% !important;
    height: 100% !important;
  }

  .play-page-stage .play-island-online-head {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding-top: 14px;
    margin-top: 2px;
    border-top: 1px solid var(--line, rgba(255, 255, 255, 0.06));
  }

  .play-page-stage .detail-online-title {
    margin: 0;
  }

  .play-page .play-island-online-head {
    padding: 10px 14px 0;
  }

  .play-page .detail-online-title {
    font-size: 1rem;
    margin: 0 0 8px;
  }

  .play-island-online-head .play-line-tabs,
  .detail-online-head .play-line-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 8px;
    padding-bottom: 4px;
    margin: 0 -2px;
  }

  .play-island-online-head .play-line-tabs::-webkit-scrollbar,
  .detail-online-head .play-line-tabs::-webkit-scrollbar {
    display: none;
  }

  .play-island-online-head .play-tab,
  .play-island-online-head a.play-tab,
  .play-island-online-head button.play-tab,
  .play-island-online-head span.play-tab {
    flex: 0 0 auto;
    min-height: 40px;
    padding: 8px 14px;
    border: 1px solid var(--line, #e5e7eb);
    border-radius: 999px;
    box-shadow: none !important;
  }

  .play-island-online-head .play-tab.active,
  .play-island-online-head span.play-tab.active {
    border-color: var(--brand, #1677ff);
    box-shadow: none !important;
  }

  .play-page-extra {
    margin: 0 0 8px;
  }

  .play-page-extra-summary {
    list-style: none;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    color: var(--brand, #1677ff);
    padding: 4px 0;
  }

  .play-page-extra-summary::-webkit-details-marker {
    display: none;
  }

  .play-page-extra-body {
    margin-top: 8px;
  }

  .play-island-compact .play-island-online-head,
  .play-island-compact .play-episode-panel {
    display: none;
  }

  .play-island-single-ep .play-episode-panel {
    display: none;
  }

  .site-main-list.shell,
  .site-main-channel.shell,
  .site-main-home.shell,
  .site-main-search.shell {
    padding-left: 10px;
    padding-right: 10px;
  }

  .site-main-home .ad-jingang,
  .site-main-home .ad-home-banner,
  .site-main-home .ad-home-feed-card {
    margin-left: 0;
    margin-right: 0;
  }

  .site-main-channel .grid,
  .site-main-list .grid {
    --grid-cols: 2;
  }

  .site-main-channel .channel-portal-title {
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 4px;
  }

  .site-main-channel .channel-portal-title h1 {
    font-size: 1.25rem;
    margin: 0;
  }

  .site-main-channel .filter-chip-channel-hero {
    padding: 14px 12px;
    margin-bottom: 8px;
  }

  .site-main-channel .filter-chip-channel-hero h1 {
    font-size: 1.35rem;
  }

  .site-main-channel .breadcrumbs {
    font-size: 13px;
    margin-bottom: 6px;
  }

  .channel-portal-filter-row {
    display: grid;
    grid-template-columns: 2.75rem minmax(0, 1fr);
    column-gap: 8px;
    row-gap: 6px;
    align-items: center;
    flex-wrap: nowrap;
  }

  .channel-portal-filter-label {
    line-height: 36px;
    padding-top: 0;
  }

  .channel-portal-filter-chips {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 4px;
  }

  .channel-portal-filter-chips::-webkit-scrollbar {
    display: none;
  }

  .channel-portal-filter-chips a {
    flex: 0 0 auto;
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    font-size: 13px;
  }

  .channel-portal-filters {
    padding: 8px 0 4px;
    gap: 6px;
  }

  .site-main-channel .grid.chrome-grid-poster,
  .site-main-channel .chrome-grid-poster.grid {
    --grid-cols: 2;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px;
  }

  .site-main-channel .channel-portal-section {
    margin: 16px 0 20px;
  }

  /* —— 列表 / 筛选片库：区块纵向呼吸感（八族共用 site-main-list）—— */
  .site-main-list .filter-chip-breadcrumbs {
    margin-bottom: 10px;
  }

  /* —— 站内搜索：移动端单列，非 PC 横条 —— */
  .site-main-search {
    padding-top: 12px;
  }

  .site-main-search .search-page-head {
    margin-bottom: 14px;
    padding: 14px 12px 16px;
  }

  .site-main-search .search-page-head h1 {
    font-size: 1.25rem;
    line-height: 1.35;
  }

  .site-main-search .search-page-head .muted {
    font-size: 13px;
    line-height: 1.5;
  }

  .site-main-search .search-page-form {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    margin-top: 12px;
  }

  .site-main-search .search-page-input {
    width: 100%;
    min-height: 48px;
    font-size: 16px;
    padding: 12px 14px;
    border-radius: 10px;
    border: 1px solid color-mix(in srgb, var(--line, #2a3140) 90%, transparent);
    background: color-mix(in srgb, var(--bg, #0f1115) 40%, var(--panel-bg, #171b22));
  }

  .site-main-search .search-page-btn {
    width: 100%;
    min-height: 48px;
    font-size: 16px;
    font-weight: 600;
    border-radius: 10px;
    padding: 12px 16px;
    background: var(--brand, #1677ff);
    color: #fff;
  }

  .site-main-search .search-notice,
  .site-main-search .search-suggestions,
  .site-main-search .search-empty-recommend {
    margin-bottom: 14px;
    padding: 12px 14px;
  }

  .site-main-search .search-suggestions ul {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }

  .site-main-search .search-suggestions li a {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 10px 14px;
    border-radius: 10px;
  }

  .site-main-search .search-results-wrap {
    margin-top: 4px;
  }

  .site-main-search .search-results-wrap .ad-search-result {
    margin-bottom: 14px;
  }

  .site-main-search .search-results-wrap .pagination.panel {
    margin-top: 18px;
    margin-bottom: 16px;
  }

  .site-main-list .channel-list-tabs,
  .site-main-list .filter-chip-channel-tabs {
    margin: 0 0 12px;
  }

  .site-main-list .channel-filter-bar {
    margin-bottom: 14px;
    padding: 12px 12px 14px;
    overflow: hidden;
  }

  .site-main-list .active-filter-chips {
    margin: 0 0 16px;
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid color-mix(in srgb, var(--line, #2a3140) 85%, transparent);
    background: color-mix(in srgb, var(--panel-bg, #171b22) 96%, transparent);
  }

  .site-main-list .ad-channel-banner,
  .site-main-list .ad-list-feed {
    margin: 0 0 16px;
  }

  .site-main-list .filter-chip-category-grid,
  .site-main-list .kids-soft-category-grid {
    margin-top: 4px;
  }

  .site-main-list .filter-chip-category-grid > .grid,
  .site-main-list .kids-soft-category-grid > .grid {
    margin-top: 0;
  }

  .site-main-list .pagination.panel {
    margin-top: 20px;
    margin-bottom: 12px;
  }

  .site-main-channel .channel-portal-lead {
    margin-bottom: 16px;
  }

  .site-main-channel .channel-portal-filters {
    margin-bottom: 14px;
    padding: 8px 0 6px;
  }

  .site-main-channel .channel-filter-bar {
    margin-bottom: 14px;
    padding: 12px 12px 14px;
    overflow: hidden;
  }

  .site-main-home .channel-list-tabs {
    margin-bottom: 12px;
  }

  .site-main-detail .ad-detail-banner,
  .site-main-detail .ad-detail-after-info,
  .site-main-play .ad-player-above,
  .site-main-play .ad-player-below {
    margin: 12px 0;
  }

  .channel-filter-row {
    flex-wrap: nowrap;
    align-items: center;
  }

  .channel-filter-options {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 4px;
  }

  .channel-filter-options::-webkit-scrollbar {
    display: none;
  }

  .channel-filter-options a {
    flex: 0 0 auto;
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
  }

  .channel-list-tabs,
  .filter-chip-channel-tabs {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 8px;
    padding-bottom: 4px;
  }

  .channel-list-tabs::-webkit-scrollbar,
  .filter-chip-channel-tabs::-webkit-scrollbar {
    display: none;
  }

  .channel-list-tabs a,
  .filter-chip-channel-tabs a {
    flex: 0 0 auto;
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    padding: 8px 14px;
  }

  /* 播放页用 ArtPlayer 自带控件，不叠「点击播放」大按钮 */
  .site-main-play .player-unmute {
    display: none !important;
  }

  .play-island .play-episode-grid span.play-ep,
  .detail-online .play-episode-grid span.play-ep {
    flex: 0 0 auto;
    min-width: 3.25rem;
    min-height: 44px;
    padding: 10px 14px;
    font-size: 14px;
  }

  .player-stage-touch .artplayer-app .art-bottom .art-controls {
    height: 48px;
  }

  .player-stage-touch .artplayer-app .art-control {
    min-width: 36px;
  }

  .meta-chip-more {
    display: inline;
  }

  .meta-chip-more summary {
    display: inline-block;
    cursor: pointer;
    font-size: 13px;
    color: var(--brand, #1677ff);
    font-weight: 600;
    margin-left: 4px;
  }

  .meta-chip-more summary::-webkit-details-marker {
    display: none;
  }

  .meta-chip-more-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
  }

  .play-page .play-episode-panel,
  .play-island .play-episode-panel {
    margin: 0 14px 8px;
    padding: 0;
    background: transparent;
    border: none;
  }

  .play-page .play-episode-grid,
  .play-island .play-episode-grid,
  .detail-online .play-episode-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: stretch;
  }

  .play-page .play-episode-grid a.play-ep,
  .play-page .play-episode-grid button.play-ep,
  .play-page .play-episode-grid span.play-ep,
  .play-island .play-episode-grid a.play-ep,
  .play-island .play-episode-grid button.play-ep,
  .detail-online .play-episode-grid a.play-ep {
    flex: 0 0 auto;
    min-width: 3.25rem;
    min-height: 44px;
    padding: 10px 14px;
    font-size: 14px;
  }

  .play-page .detail-watch-related,
  .play-page .comment-section.panel {
    margin-left: 10px;
    margin-right: 10px;
  }

  .play-page .comment-section.panel {
    border-radius: 10px;
  }

  /* —— 详情：选集同样紧凑 —— */
  .detail-online.panel {
    padding: 12px 14px;
  }

  .detail-main.panel {
    padding: 12px 14px;
  }

  .detail-main-cta .detail-play-cta,
  .btn-important {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}

@media (max-width: 640px) {
  .comment-section.panel {
    padding: 14px 12px;
  }

  .comment-form {
    padding: 14px 12px 16px;
    gap: 14px;
  }

  .comment-form .form-row {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }

  .comment-form .form-label {
    width: auto;
    font-size: 13px;
    font-weight: 600;
    opacity: 0.85;
  }

  .comment-form .text-input,
  .comment-form .text-area {
    font-size: 16px;
    min-height: 44px;
    padding: 10px 12px;
    border-radius: 8px;
  }

  .comment-form .text-area {
    min-height: 96px;
    resize: none;
  }

  .comment-form .form-row.form-row-captcha {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    flex-direction: unset;
  }

  .comment-form .form-row.form-row-captcha .form-label {
    grid-column: 1 / -1;
  }

  .comment-form .captcha-input {
    max-width: none;
    min-width: 0;
  }

  .comment-form .captcha-img {
    width: 112px;
    height: 44px;
    border-radius: 8px;
  }

  .comment-form .star-row {
    flex-wrap: wrap;
    gap: 4px 6px;
  }

  .comment-form .star-btn {
    font-size: 28px;
    padding: 6px 8px;
    min-width: 44px;
    min-height: 44px;
  }

  .comment-form .form-row-actions {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  .comment-form .dead-check {
    min-height: 44px;
    align-items: flex-start;
    line-height: 1.45;
  }

  .comment-form .submit-btn {
    width: 100%;
    min-height: 48px;
    font-size: 16px;
    border-radius: 10px;
  }

  .site-footer-shell .footer-discovery {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 12px;
    font-size: 13px;
  }
}