/* 龙驹发布网 · 手机专用 CSS
 * 加载顺序：style.css -> home-style.css(首页) -> mobile.css
 * 手机浏览器须设置 meta viewport；宽度大于 767px 不生效。
 */
@media screen and (max-width: 767px) {
  *, *::before, *::after { box-sizing: border-box; }
  html { overflow-x: hidden; -webkit-text-size-adjust: 100%; }
  body { width: 100%; min-width: 0; margin: 0; overflow-x: hidden; text-align: left; font: 14px/1.55 "Microsoft YaHei", Arial, sans-serif; }
  img { max-width: 100%; }
  #htmlBody, #topBody, #mainBody, #mainBody1, #bottomBody {
    width: 100% !important; max-width: 100% !important; min-width: 0 !important;
    margin-left: auto !important; margin-right: auto !important;
    padding-left: 0 !important; padding-right: 0 !important;
  }
  #htmlBody { padding: 0 8px !important; }
  #topBody { overflow: visible; }

  /* 顶部页头：手机按屏幕宽度排列，导航可左右滑动 */
  .lj-header { width: 100% !important; max-width: 100%; margin-bottom: 5px; }
  .lj-header .lj-topbar { height: auto; min-height: 29px; padding: 4px 6px; line-height: 20px; overflow: visible; }
  .lj-header .lj-topbar-left { float: none; width: 100%; height: auto; white-space: normal; }
  .lj-header .lj-topbar-time, .lj-header .lj-topbar-holiday { margin-right: 8px; vertical-align: middle; }
  .lj-header .lj-topbar-weather { float: none; max-width: 100%; margin: 2px 0 0; }
  #site-widgets { max-width: 100%; }
  .lj-header .lj-header-brand { display: flex; width: 100%; height: auto; min-height: 0; padding: 2px 0; }
  .lj-header .lj-header-logo { flex: 0 0 30%; width: 30%; height: auto; }
  .lj-header .lj-header-banner { flex: 1 1 70%; width: 70%; height: auto; min-width: 0; }
  .lj-header .lj-header-logo img, .lj-header .lj-header-banner img {
    display: block; width: 100% !important; height: auto !important; object-fit: contain;
  }
  .lj-header .lj-main-nav { height: auto; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; }
  .lj-header .lj-topnav { display: flex; width: max-content; min-width: 100%; height: 38px; overflow: visible; }
  .lj-header .lj-topnav li, .lj-header .lj-topnav li.lj-nav-service { float: none; flex: 0 0 auto; height: 38px; line-height: 38px; }
  .lj-header .lj-topnav li a { height: 38px; padding: 0 12px; line-height: 38px; font-size: 13px; }
  .lj-header .lj-topnav li.lj-nav-service { padding: 0 10px; }
  #topBody .topLogo, #topBody .mainMenu, #topBody .searchBox { width: 100% !important; max-width: 100%; }
  #topBody .topLogo .a { width: 30%; }
  #topBody .topLogo .b { width: 70%; }
  #topBody .topLogo img { max-width: 100%; height: auto; }
  #topBody .topMenu { height: auto; }
  #topBody .topMenu .a, #topBody .topMenu .b { max-width: 100%; }
  #topBody .mainMenu .topnav { width: 100%; overflow-x: auto; overflow-y: hidden; }
  #topBody .searchBox { height: auto; }
  #topBody .searchBox .a, #topBody .searchBox .b { max-width: 100%; }

  /* 通用栏目、详情及列表容器 */
  #htmlBody .fenlei, .home-page .fenlei, .game-detail-page .fenlei,
  .list_list, .left_list, .right_list {
    float: none !important; width: 100% !important; max-width: 100% !important;
    margin: 0 0 10px !important; padding: 0 !important;
  }
  #htmlBody .fenlei > dl, #htmlBody .fenlei dl { width: 100%; max-width: 100%; }
  #htmlBody .fenlei dt { display: flex; align-items: center; min-width: 0; overflow: hidden; }
  #htmlBody .fenlei dt tt { flex: 0 0 auto; width: auto !important; max-width: 42%; padding: 0 9px; text-indent: 0; font-size: 13px; white-space: nowrap; }
  #htmlBody .fenlei dt span { flex: 1; width: auto !important; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; }
  #htmlBody .fenlei dd, .home-page .fenlei dd, .game-detail-page .fenlei dd {
    float: none !important; width: 100% !important; max-width: 100% !important;
    min-width: 0; margin: 0; padding: 0; box-sizing: border-box !important;
  }
  .article-page .article-content, .template-detail-page .template-content { padding: 12px !important; overflow-wrap: anywhere; }
  .article-page .article-content img, .template-detail-page .template-content img { max-width: 100%; height: auto; }
  .article-page .article-detail-panel, .article-page .article-meta { width: 100%; max-width: 100%; }
  .article-page .article-detail-panel > tbody > tr > td { padding: 8px; }
  .article-page .article-meta td { padding: 5px 3px; font-size: 11px !important; overflow-wrap: anywhere; }
  .article-page .article-paging, .family-page .family-paging, .template-gallery-page .template-paging { float: none; text-align: center; line-height: 32px; }

  /* 非首页的大型数据表：保留表格信息，允许局部横向滚动 */
  .article-page .fenlei dd, .family-page .fenlei dd,
  .site-extra-page .fenlei dd, .template-gallery-page .fenlei dd { overflow-x: auto !important; -webkit-overflow-scrolling: touch; }
  .article-page .article-list-table { min-width: 650px; }
  .family-page .family_biaoge { min-width: 690px; }
  .game-detail-page .family_biaoge { width: 100% !important; min-width: 0; }
  .game-detail-page .family_biaoge tr td:first-child { width: 90px !important; white-space: normal; }
  .game-detail-page .family_biaoge td { padding: 7px !important; font-size: 13px !important; overflow-wrap: anywhere; }
  .game-detail-page .family_biaoge .family_show_content { padding: 8px; }
  .game-detail-page .family_biaoge img { max-width: 100%; height: auto; }
  .family_show_table { width: 100%; }
  .family_show_table .family_show_label { width: 92px !important; }
  .family_show_table td { padding: 7px 5px !important; overflow-wrap: anywhere; }
  .publish-form, .publish-form table { max-width: 100%; }
  .publish-form input[type="text"], .publish-form textarea, .publish-form select,
  .family-publish-page .family-publish-table input { max-width: 100%; }
  .publish-form .publish-time-table { display: block; max-width: 100%; overflow-x: auto; }
  .template-gallery-page .thumbItem { grid-template-columns: repeat(2,minmax(0,1fr)) !important; column-gap: 8px !important; row-gap: 10px !important; padding: 8px 4px !important; }
  .template-gallery-page .thumbItem > li { width: 100% !important; min-width: 0; }
  .template-gallery-page .thumbItem .thumbImgs { width: 100% !important; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }

  /* 首页开服列表：直接适配 home_gamelist.js 生成的五个栏位。
     第一行：名称 + 时间；第二行：完整介绍；第三行：QQ群 + 客服QQ。 */
  .home-page #ljBoard,
  .home-page #ljDateSections,
  .home-page #ljDateSections .lj-date-block,
  .home-page #ljDateSections .lj-group-rows {
    width:100% !important; min-width:0 !important; max-width:100% !important;
  }
  .home-page #ljDateSections { overflow-x:hidden !important; }
  .home-page #ljDateSections .lj-date-block {
    min-width:0 !important; overflow:visible !important;
  }
  .home-page #ljDateSections .lj-date-title {
    height:auto !important; min-height:38px;
    line-height:22px !important; padding:8px 6px !important;
    font-size:13px !important; white-space:normal;
  }
  .home-page #ljDateSections .lj-list-row {
    display:grid !important;
    grid-template-columns:minmax(0, 1fr) auto !important;
    grid-template-areas:
      "name time"
      "desc desc"
      "group qq" !important;
    column-gap:10px !important;
    row-gap:8px !important;
    align-items:center !important;
    width:100% !important; min-width:0 !important;
    min-height:0 !important;
    padding:11px 10px !important;
    box-sizing:border-box !important;
    border-bottom:1px solid #c6dddc;
  }
  .home-page #ljDateSections .lj-list-row .lj-cell {
    display:flex !important;
    align-items:center !important;
    min-width:0 !important;
    width:auto !important;
    height:auto !important;
    max-width:100% !important;
    flex:none !important;
    padding:0 !important;
    margin:0 !important;
    border:0 !important;
    font:13px/1.55 "Microsoft YaHei","微软雅黑",Arial,sans-serif !important;
    text-align:left !important;
    white-space:normal !important;
    overflow:visible !important;
    overflow-wrap:anywhere;
    word-break:normal;
  }
  .home-page #ljDateSections .lj-list-row .lj-cell-name {
    grid-area:name;
    gap:4px;
    font-weight:700 !important;
  }
  .home-page #ljDateSections .lj-list-row .lj-cell-name a {
    display:block !important; min-width:0;
    font-size:14px !important; font-weight:700 !important;
    white-space:normal !important; overflow-wrap:anywhere;
  }
  .home-page #ljDateSections .lj-list-row .lj-cell-time {
    grid-area:time;
    display:flex !important;
    flex-direction:column !important;
    align-items:flex-end !important;
    justify-content:center !important;
    gap:2px;
    text-align:right !important;
    font-size:12px !important;
    white-space:nowrap !important;
  }
  .home-page #ljDateSections .lj-list-row .lj-cell-time span { white-space:nowrap; }
  .home-page #ljDateSections .lj-list-row .lj-cell-desc {
    grid-area:desc;
    display:block !important;
    width:100% !important;
    padding:7px 9px !important;
    border-radius:4px;
    background:rgba(255,255,255,.55);
    line-height:1.6 !important;
    white-space:normal !important;
    overflow-wrap:anywhere !important;
    word-break:break-word;
  }
  .home-page #ljDateSections .lj-list-row .lj-cell-desc a,
  .home-page #ljDateSections .lj-list-row .lj-cell-desc .lj-desc-link {
    display:block !important;
    width:100% !important; min-width:0 !important;
    color:#34495e !important;
    font-size:13px !important;
    line-height:1.6 !important;
    white-space:normal !important;
    overflow-wrap:anywhere !important;
    word-break:break-word;
  }
  .home-page #ljDateSections .lj-list-row .lj-cell-group {
    grid-area:group;
    justify-content:flex-start !important;
  }
  .home-page #ljDateSections .lj-list-row .lj-cell-qq {
    grid-area:qq;
    justify-content:flex-end !important;
  }
  .home-page #ljDateSections .lj-list-row .lj-cell-group,
  .home-page #ljDateSections .lj-list-row .lj-cell-qq {
    padding:1px 0 !important; font-size:12px !important;
  }
  .home-page #ljDateSections .lj-list-row .lj-qq-action {
    display:inline-flex !important;
    align-items:center !important; gap:4px !important;
    width:auto !important; max-width:100% !important;
    min-width:0 !important;
    font-size:12px !important;
    white-space:normal !important;
    overflow-wrap:anywhere;
  }
  .home-page #ljDateSections .lj-list-row .lj-qq-icon {
    display:block !important;
    width:16px !important; height:16px !important;
    flex:0 0 16px !important;
  }
  .home-page .wenzhang, #topBody .wenzhang { float: none !important; width: 100% !important; margin: 8px 0 !important; padding: 0 !important; }
  .home-page .wenzhang dd, #topBody .wenzhang dd { width: 100% !important; min-width: 0; padding: 7px 9px; }
  .home-page .fenlei table.biaoge, .home-page .fenlei table.biaoge3 { min-width: 650px; }
  .home-page .fenlei dd:has(> table.biaoge), .home-page .fenlei dd:has(> table.biaoge3) { overflow-x: auto; }

  /* 顶部及内容区图片广告：跟随屏幕宽度，避免出现全局横向滚动 */
  .xad, .dad, .bottom_large, .top_banner, .lj-ads-dad-list { max-width: 100% !important; }
  .xad img, .dad img, .bottom_large img { max-width: 100% !important; height: auto !important; }
  .lj-ads-xad-grid { grid-template-columns: repeat(2,minmax(0,1fr)) !important; }
  .site-template-float, .ha-right { display: none !important; }
  .ha-bottom { max-width: 96vw !important; }
  .ha-bottom img { max-width: 96vw !important; height: auto; }
  .bottomLine { width: 100% !important; }
  .bottomMenu, .bottomCopyright { padding-left: 8px; padding-right: 8px; line-height: 1.6; }
}

@media screen and (max-width: 380px) {
  .template-gallery-page .thumbItem { grid-template-columns: 1fr !important; }
  .home-page #ljDateSections .lj-list-row {
    grid-template-columns:minmax(0,1fr) !important;
    grid-template-areas:"name" "time" "desc" "group" "qq" !important;
    row-gap:7px !important;
  }
  .home-page #ljDateSections .lj-list-row .lj-cell-time {
    align-items:flex-start !important; text-align:left !important;
  }
  .home-page #ljDateSections .lj-list-row .lj-cell-qq {
    justify-content:flex-start !important;
  }
  .lj-header .lj-topnav li a { padding: 0 10px; }
}


/* ===== 手机页头及页脚修正（优先于前面的移动端规则） ===== */
@media screen and (max-width: 767px) {
  /* 页头轮播图片被缩到手机宽度时，舞台也必须按图片比例缩小；原广告 JS 给舞台固定了 90px。 */
  .lj-header .lj-header-brand {
    display: flex !important;
    align-items: flex-start !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
  }
  .lj-header .lj-header-logo {
    flex: 0 0 30% !important;
    width: 30% !important;
    height: auto !important;
    min-width: 0 !important;
    overflow: hidden;
  }
  .lj-header .lj-header-banner {
    flex: 1 1 70% !important;
    width: 70% !important;
    min-width: 0 !important;
    height: auto !important;
    overflow: hidden;
  }
  .lj-header .lj-header-logo img,
  .lj-header .lj-header-banner img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
  }
  .lj-header .lj-header-banner .lj-top-banner-stage {
    height: auto !important;
    aspect-ratio: 728 / 90;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    overflow: hidden !important;
  }
  .lj-header .lj-header-banner .lj-top-banner-slide,
  .lj-header .lj-header-banner .lj-top-banner-slide img {
    width: 100% !important;
    height: 100% !important;
  }
  .lj-header .lj-header-banner .lj-top-banner-controls {
    right: 3px !important;
    bottom: 2px !important;
    gap: 2px !important;
  }
  .lj-header .lj-header-banner .lj-top-banner-number {
    min-width: 15px !important;
    width: 15px !important;
    height: 15px !important;
    padding: 0 !important;
    font: 10px/13px Arial, sans-serif !important;
  }
  .lj-header .lj-main-nav {
    margin-top: 2px !important;
    width: 100% !important;
    height: 36px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
  }
  .lj-header .lj-topnav,
  .lj-header .lj-topnav li,
  .lj-header .lj-topnav li a {
    height: 34px !important;
    line-height: 34px !important;
  }
  .lj-header .lj-topnav li a { font-size: 12px !important; }

  /* 页脚原 CSS 用 984px 固定宽度，导致手机文字整个偏到右边。 */
  .site-footer,
  #bottomBody,
  .site-footer .bottomMenu,
  .site-footer .bottomCopyright,
  .site-footer .bottomLine {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
  }
  .site-footer {
    clear: both !important;
    margin-top: 12px !important;
    padding: 0 8px 10px !important;
    text-align: center !important;
    overflow-wrap: anywhere;
  }
  .site-footer .bottomMenu,
  .site-footer .bottomCopyright {
    display: block !important;
    height: auto !important;
    padding: 8px 4px !important;
    text-align: center !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: break-word;
    line-height: 1.7 !important;
    font-size: 12px !important;
  }
  .site-footer .bottomMenu a,
  .site-footer .bottomCopyright a {
    display: inline-block;
    max-width: 100%;
    white-space: normal !important;
  }
  .site-footer .bottomLine { height: 4px !important; }
}


/* ===== 手机精简版：首页头部只保留七个栏目，页脚只保留网站名称 ===== */
@media screen and (max-width:767px) {
  /* 隐藏日期天气、站点 LOGO、页头轮播大图和旧式顶部工具栏。 */
  .lj-header .lj-topbar,
  .lj-header .lj-header-brand,
  #topBody > .topMenu,
  #topBody > .topLogo,
  #topBody > .searchBox,
  #site-widgets { display:none !important; }

  /* 手机不显示广告；开服数据和文章栏目保留。 */
  .home_ads, .xad, .dad, .bottom_large,
  .site-template-float, .top_banner,
  .ha-top, .ha-right, .ha-bottom { display:none !important; }
  .lj-header {
    display:block !important;
    width:100% !important;
    margin:0 auto 8px !important;
    padding:0 !important;
  }
  /* 七个导航按钮分成两行：第一行四个，第二行三个。 */
  .lj-header .lj-main-nav {
    display:block !important;
    width:100% !important;
    height:auto !important;
    margin:0 !important;
    padding:0 !important;
    overflow:visible !important;
    border:1px solid #075b9d !important;
    box-sizing:border-box !important;
  }
  .lj-header .lj-topnav {
    display:grid !important;
    grid-template-columns:repeat(12,minmax(0,1fr)) !important;
    width:100% !important;
    min-width:0 !important;
    height:auto !important;
    margin:0 !important;
    padding:0 !important;
    overflow:visible !important;
    list-style:none !important;
  }
  .lj-header .lj-topnav > li:not(.lj-nav-service) {
    display:block !important;
    float:none !important;
    grid-column:span 3;
    width:auto !important;
    min-width:0 !important;
    height:40px !important;
    line-height:40px !important;
    padding:0 !important;
    margin:0 !important;
    border-right:1px solid rgba(255,255,255,.3) !important;
    border-bottom:1px solid rgba(255,255,255,.23) !important;
    box-sizing:border-box !important;
  }
  .lj-header .lj-topnav > li:nth-child(n+5):not(.lj-nav-service) {
    grid-column:span 4;
  }
  .lj-header .lj-topnav > li.lj-nav-service { display:none !important; }
  .lj-header .lj-topnav > li > a,
  .lj-header .lj-topnav > li.lj-nav-template > a {
    display:flex !important;
    justify-content:center !important;
    align-items:center !important;
    width:100% !important;
    height:100% !important;
    margin:0 !important;
    padding:0 2px !important;
    color:#fff !important;
    text-align:center !important;
    font: bold 12px/1.2 "Microsoft YaHei","微软雅黑",Arial,sans-serif !important;
    white-space:nowrap !important;
  }
  .lj-header .lj-topnav .lj-nav-template img {
    max-width:100% !important;
    max-height:28px !important;
  }

  /* 简洁页脚：隐藏所有旧版权/客服/备案文字，只显示网站名。 */
  .site-footer, #bottomBody {
    display:block !important;
    float:none !important;
    clear:both !important;
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
    margin:12px auto 0 !important;
    padding:0 8px 15px !important;
    box-sizing:border-box !important;
    text-align:center !important;
    overflow:visible !important;
  }
  .site-footer > *, #bottomBody > * { display:none !important; }
  .site-footer::after {
    content:"龙驹发布网";
    display:block;
    border-top:3px solid #1688d4;
    padding:12px 0 4px;
    color:#526579;
    font:13px/1.6 "Microsoft YaHei","微软雅黑",Arial,sans-serif;
    text-align:center;
  }
  /* 若页面仅有 #bottomBody 而没有 .site-footer，仍显示网站名称。 */
  #bottomBody:not(.site-footer):not(.site-footer #bottomBody)::after {
    content:"龙驹发布网";
    display:block;
    border-top:3px solid #1688d4;
    padding:12px 0 4px;
    color:#526579;
    font:13px/1.6 "Microsoft YaHei","微软雅黑",Arial,sans-serif;
    text-align:center;
  }
}