/* ============================================================
   z0597-home 响应式适配层（不修改原站样式，仅覆盖）
   断点：≤1440 自适应宽度 / ≤1000 平板隐藏左栏 / ≤767 手机
   ============================================================ */

html,
body {
  overflow-x: hidden;
}

body {
  -webkit-text-size-adjust: 100%;
  /* 原站 PC 版写死 body{min-width:1550px}，会阻止所有小屏适配 */
  min-width: 0 !important;
}

img {
  max-width: 100%;
}

/* 语言切换按钮：桌面端避开左侧 60px 工具栏 */
#langSwitch {
  left: 12px !important;
}

@media (min-width: 1001px) {
  #langSwitch {
    left: 76px !important;
  }
}

/* 让 flex 主区域允许收缩，避免内部横向网格把整页撑宽 */
.el-container > .el-main,
.el-container > .el-container {
  min-width: 0 !important;
}

.shallBox,
.shallBox .partBox,
.part4 .scroll-wrapper,
.part4 .scroll-content,
.globalList {
  min-width: 0;
}

.shallBox {
  overflow-x: hidden;
}

/* 横向滚动的游戏行 / 厂商卡：自身滚动，不撑破页面 */
.part4 .scroll-wrapper,
.part4 .scroll-content,
.part4 .tagDetails {
  overflow-x: auto !important;
  max-width: 100%;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.part4 .scroll-wrapper::-webkit-scrollbar,
.part4 .scroll-content::-webkit-scrollbar,
.part4 .tagDetails::-webkit-scrollbar {
  display: none;
}

/* ---------- 小屏笔记本 / 平板横屏：内容宽度自适应 ---------- */
@media (max-width: 1439px) {
  .shallBox .partBox {
    width: 100% !important;
    max-width: 1300px;
    padding: 0 16px;
    box-sizing: border-box;
  }

  .useHeader .content {
    width: 100% !important;
    max-width: 1300px;
    padding: 0 16px;
    box-sizing: border-box;
  }
}

/* ---------- 平板：隐藏左侧工具栏，轮播与视频上下排列 ---------- */
@media (max-width: 1000px) {
  .el-aside,
  .useLeftTools {
    display: none !important;
  }

  .part2 {
    flex-direction: column !important;
    gap: 12px;
  }

  .part2 > div {
    width: 100% !important;
    margin-left: 0 !important;
  }

  .part4 .scroll-wrapper,
  .part4 .scroll-content {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  .part4 .tagDetails {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }
}

/* ---------- 手机 ---------- */
@media (max-width: 767px) {
  .el-header {
    padding: 0 !important;
  }

  .useHeader {
    height: 56px !important;
    padding: 0 10px !important;
  }

  .useHeader .content {
    padding: 0 !important;
  }

  .useHeader .content .headerLogo {
    width: 96px !important;
  }

  .useHeader .content .loginBtn,
  .useHeader .content .registerBtn {
    width: 60px !important;
    height: 26px !important;
    font-size: 12px !important;
  }

  .useHeader .content .font14,
  .useHeader .content .font15 {
    font-size: 12px !important;
  }

  .el-main {
    padding: 8px !important;
  }

  .shallBox .partBox {
    padding: 0 2px !important;
  }

  /* 轮播 + 视频 */
  .part2 .el-carousel__container {
    height: 150px !important;
  }

  .el-carousel__item div[data-v-8bf9ab92] {
    height: 150px !important;
  }

  .part2 video {
    height: 150px !important;
    width: 100% !important;
    object-fit: contain;
    background: #000;
  }

  .el-carousel__arrow {
    display: none !important;
  }

  /* 滚动公告条 */
  .part3 {
    font-size: 12px !important;
  }

  /* 分类 tab */
  .part4 .navTag {
    gap: 8px !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    padding-bottom: 6px;
    -webkit-overflow-scrolling: touch;
  }

  .part4 .navTag button {
    width: auto !important;
    min-width: 84px;
    height: 34px !important;
    padding: 0 12px !important;
    font-size: 13px !important;
    flex: 0 0 auto;
  }

  .part4 .navTag button img {
    width: 20px !important;
    height: 20px !important;
  }

  /* 厂商宣传卡 */
  .part4 .tagDetails {
    display: flex !important;
    padding-top: 14px !important;
    gap: 10px;
  }

  .part4 .tagDetails .tagItem {
    flex: 0 0 auto;
    width: 300px !important;
    height: 150px !important;
    margin-right: 0 !important;
  }

  .part4 .tagDetails .tagItem .tagItemIcon {
    height: 34px !important;
  }

  .part4 .tagDetails .tagItem .tagItemTitle {
    left: 14px !important;
  }

  .part4 .tagDetails .tagItem .tagItemTitle .font24 {
    font-size: 16px !important;
  }

  .part4 .tagDetails .tagItem .tagItemTitle .font20 {
    font-size: 13px !important;
  }

  /* 区块标题 */
  .recommend .recommendTitle {
    font-size: 22px !important;
  }

  .recommend .allGames img {
    height: 13px !important;
  }

  .recommend .allGames .font20 {
    font-size: 13px !important;
  }

  /* 游戏网格 */
  .globalList.grid {
    grid-auto-columns: 108px !important;
  }

  .globalList .gameItem {
    width: 108px !important;
    height: 133px !important;
  }

  .globalList .gameItem .gameItemIcon {
    width: 88px !important;
  }

  .globalList .gameItem .gameItemHot {
    width: 24px !important;
  }

  .hotGame {
    padding: 0 12px !important;
  }

  .hotGame .font26 {
    font-size: 17px !important;
  }

  .hotGame .font16 {
    font-size: 12px !important;
  }

  /* 页脚 */
  .useFooterBox {
    padding-top: 14px !important;
  }

  .useFooterBox .listBox {
    width: 100% !important;
    flex-wrap: wrap;
    gap: 6px 12px;
    padding: 0 8px;
    box-sizing: border-box;
  }

  .useFooterBox .listBox > div {
    flex: 0 0 45%;
    margin-right: 0 !important;
  }

  .useFooterBox .listBox > div:not(:last-child) {
    margin-right: 0 !important;
  }

  .useFooterBox .listBox .font18 {
    font-size: 15px !important;
  }

  .useFooterBox .listBox a,
  .useFooterBox .listBox p {
    font-size: 13px !important;
  }

  /* 右下客服浮标 */
  .float-service {
    width: 74px !important;
    right: 8px !important;
    bottom: 10px !important;
  }

  .float-service img {
    width: 38px !important;
  }

  .float-service .service-p {
    font-size: 10px !important;
    height: 20px;
    line-height: 20px;
    border-width: 2px !important;
  }

  /* 弹窗 */
  .el-message-box,
  .el-dialog {
    width: 92vw !important;
  }
}

/* ---------- 横屏手机 ---------- */
@media (max-width: 900px) and (orientation: landscape) {
  .part2 {
    flex-direction: row !important;
  }

  .part2 .el-carousel__container {
    height: 180px !important;
  }

  .el-carousel__item div[data-v-8bf9ab92] {
    height: 180px !important;
  }

  .part2 video {
    height: 180px !important;
    width: 100% !important;
    object-fit: contain;
    background: #000;
  }
}