/*
 * Smaller-PC proportional compatibility.
 *
 * The desktop design canvases keep their 1920px-layout geometry and are
 * reduced as a whole between 861px and 1919px. This makes cards, media,
 * typography, gaps and controls shrink together. Full-width backgrounds stay
 * full width. The established H5 layout and >=1920px layout are untouched.
 */
@media (min-width: 861px) and (max-width: 1919px) {
  :root {
    --site-pc-scale-343: .9;
    --site-pc-scale-420: .9;
    --site-pc-scale-440: .9;
    --site-pc-scale-560: .9;
    --site-pc-scale-596: .9;
    --site-pc-scale-760: .9;
    --site-pc-scale-964: .9;
    --site-pc-scale-1160: .9;
    --site-pc-scale-1388: .9;
    --site-pc-scale-1440: .9;
    --site-pc-scale-1520: .9;
    --site-pc-scale-1552: .9;
    --site-pc-scale-1554: .9;
    --site-pc-scale-1920: .9;
    --site-pc-width-1552: 1396.8px;
    --site-pc-offset-1552: 32px;
    --site-pc-size-1520-90: 81px;
    --site-pc-size-1552-36: 32.4px;
    --site-pc-size-1552-710: 639px;
    --site-pc-size-1160-28: 25.2px;
    --site-pc-size-1160-34: 30.6px;
    --site-pc-size-1160-50: 45px;
    --site-pc-size-964-18: 16.2px;
    --site-pc-size-964-36: 32.4px;
    --site-pc-size-964-48: 43.2px;
  }

  html,
  body {
    overflow-x: clip;
  }

  /* Header/footer surfaces stay full width while their complete inner canvas scales. */
  html body .site-header--design {
    height: var(--site-pc-size-1520-90);
  }

  html body .site-header--design .header-inner {
    width: 1520px !important;
    max-width: none !important;
    height: 90px !important;
    margin-inline: auto;
    zoom: var(--site-pc-scale-1520);
  }

  html body .footer-outer {
    width: 1520px !important;
    max-width: none !important;
    margin-inline: auto;
    zoom: var(--site-pc-scale-1520);
  }

  /* Homepage hero background remains full bleed; its foreground uses the 1552px canvas. */
  html body.home-page .page-shell {
    gap: var(--site-pc-size-1552-36);
    padding-bottom: var(--site-pc-size-1552-36);
  }

  html body.home-page .hero-banner {
    height: var(--site-pc-size-1552-710) !important;
  }

  html body.home-page .hero-info {
    left: var(--site-pc-offset-1552) !important;
    bottom: 70px !important;
    width: 787px !important;
    max-width: none !important;
    gap: 16px !important;
    zoom: var(--site-pc-scale-1552);
  }

  html body.home-page .hero-controls {
    right: var(--site-pc-offset-1552) !important;
    bottom: 60px !important;
    max-width: none !important;
    gap: 14px !important;
    zoom: var(--site-pc-scale-1552);
  }

  html body.home-page .hero-title {
    font-size: 36px !important;
    line-height: 50px !important;
  }

  html body.home-page .hero-summary {
    font-size: 18px !important;
    line-height: 25px !important;
    -webkit-line-clamp: 3 !important;
  }

  html body.home-page .hero-thumbs {
    gap: 14px !important;
    min-height: 166px !important;
  }

  html body.home-page .hero-thumb {
    width: 100px !important;
    height: 140px !important;
  }

  html body.home-page .hero-thumb.is-active {
    width: 116px !important;
    height: 162px !important;
  }

  html body.home-page .page-shell > .content-section,
  html body.home-page .page-shell > .home-notice,
  html body.home-page .page-shell > .home-ads,
  html body.home-page .page-shell > .topic-banner-ads {
    width: 1552px !important;
    max-width: none !important;
    margin-inline: auto;
    zoom: var(--site-pc-scale-1552);
  }

  html body.home-page .card-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    gap: 20px !important;
  }

  /* Six-column catalog, search, rank, tag and personal-library canvases. */
  html body .topic-layout,
  html body .library-page {
    width: 1552px !important;
    max-width: none !important;
    margin-inline: auto;
    zoom: var(--site-pc-scale-1552);
  }

  html body .topic-layout .card-grid,
  html body .library-page .card-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    gap: 20px !important;
  }

  /* Legacy list pages use the original 1554px desktop shell. */
  html body .list-page {
    width: 1554px !important;
    max-width: none !important;
    margin-inline: auto;
    zoom: var(--site-pc-scale-1554);
  }

  /* Drama detail and playback retain the full desktop grid at smaller PC widths. */
  html body .detail-page,
  html body .play-page {
    width: 1388px !important;
    max-width: none !important;
    margin-inline: auto;
    zoom: var(--site-pc-scale-1388);
  }

  html body .detail-page,
  html body .play-layout {
    grid-template-columns: minmax(0, 1fr) 300px !important;
    column-gap: 36px !important;
  }

  html body .detail-page > .detail-related,
  html body .play-sidebar {
    padding-left: 32px !important;
  }

  html body .detail-title {
    font-size: 24px !important;
  }

  html body .detail-hero-main,
  html body .detail-hero-info {
    gap: 30px !important;
  }

  html body .detail-action-group {
    flex-basis: auto !important;
  }

  html body .detail-episode-list,
  html body .play-ep-grid {
    grid-template-columns: repeat(16, minmax(0, 1fr)) !important;
  }

  /* Standalone desktop pages. */
  html body .home-road {
    width: 1440px !important;
    max-width: none !important;
    margin-inline: auto;
    zoom: var(--site-pc-scale-1440);
  }

  html body .home-road .road-contacts {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }

  html body .feedback-page {
    width: 1520px !important;
    max-width: none !important;
    margin-inline: auto;
    zoom: var(--site-pc-scale-1520);
  }

  html body .application-page {
    width: 1160px !important;
    max-width: none !important;
    padding-inline: 0 !important;
    margin-inline: auto;
    zoom: var(--site-pc-scale-1160);
  }

  html body .application-page .app-card-grid {
    justify-content: flex-start !important;
    gap: 24px 28px !important;
  }

  html body .deposit-page,
  html body .user-center-page,
  html body .setting-page {
    width: 964px !important;
    max-width: none !important;
    margin-inline: auto;
    zoom: var(--site-pc-scale-964);
  }

  html body .user-center-profile {
    flex-wrap: nowrap !important;
  }

  html body .account-identity {
    flex-basis: auto !important;
  }

  html body .user-center-vip-card {
    flex: 0 0 220px !important;
  }

  html body .user-center-coin-card {
    flex: 0 0 180px !important;
  }

  html body .user-center-features {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }

  html body .edit-profile-page {
    width: 560px !important;
    max-width: none !important;
    margin-inline: auto;
    zoom: var(--site-pc-scale-560);
  }

  html body .edit-password-page {
    gap: var(--site-pc-size-964-18);
    padding-block: var(--site-pc-size-964-36) var(--site-pc-size-964-48);
  }

  html body .edit-password-pc,
  html body .edit-password-shell {
    width: 964px !important;
    max-width: none !important;
    margin-inline: auto;
    zoom: var(--site-pc-scale-964);
  }

  /* The legacy document page has two sibling 1160px canvases. */
  html body .content-page {
    gap: var(--site-pc-size-1160-28);
    padding-block: var(--site-pc-size-1160-34) var(--site-pc-size-1160-50);
  }

  html body .content-page > .content-pc,
  html body .content-page > .content-main {
    width: 1160px !important;
    max-width: none !important;
    margin-inline: auto;
    zoom: var(--site-pc-scale-1160);
  }

  /* Rich-text backgrounds stay full width; the complete 1920px document canvas scales. */
  html body .richtext-page {
    width: 1920px !important;
    max-width: none !important;
    margin-inline: auto;
    padding-inline: 200px !important;
    zoom: var(--site-pc-scale-1920);
  }

  html body .richtext-contact-icon {
    width: 120px !important;
    height: 120px !important;
  }

  html body .richtext-contact-icon img {
    width: 60px !important;
    height: 60px !important;
  }

  html body .richtext-contact {
    font-size: 24px !important;
  }

  html body .not-found-page {
    width: 596px !important;
    max-width: none !important;
    margin-inline: auto;
    zoom: var(--site-pc-scale-596);
  }

  html body .download-app-dialog,
  html body .download-app-dialog-card--pc,
  html body .search-discovery--popup {
    zoom: var(--site-pc-scale-760);
  }

  html body .app-dialog-card,
  html body .deposit-pay-dialog,
  html body .entry-dialog {
    zoom: var(--site-pc-scale-440);
  }

  html body .history-confirm-card {
    zoom: var(--site-pc-scale-420);
  }

  html body .search-dialog-card {
    zoom: var(--site-pc-scale-343);
  }

  /* Undo the old tablet-only header compaction; the whole header already scales here. */
  html body .site-header--design .header-inner {
    gap: 24px !important;
  }

  html body .site-header--design .brand-lockup {
    margin-right: 20px !important;
  }

  html body .site-header--design .header-nav {
    gap: 16px !important;
  }

  html body .site-header--design .header-nav a {
    padding: 6px 16px !important;
    font-size: 16px !important;
  }

  html body .site-header--design .account-label {
    display: block !important;
  }
}