/* ============================================================
   艺术商行 · 移动端自适应样式  v2
   ------------------------------------------------------------
   v2 相对 v1 的改动：
     1. 手机上整体放大字号（基准 15px），并把 12/13px 的密集小字
        提升到 13/14.5px —— 直接解决"页面能显示但字太小"的问题
     2. 表格改为「容器内横滑」而不是靠 body overflow-x:hidden 裁掉，
        避免右侧内容被无声切掉、无法访问
     3. 手机端隐去 PC 版网页表格（窄屏下必然挤压难读）
   断点：≤1200 收窄 · ≤992 平板 · ≤768 手机 · ≤420 小屏
   纯 CSS 覆盖，不改 JS / 后端 / 页面结构，可整体移除
   ============================================================ */

/* ============ 一、基础：禁止横向溢出 ============ */
html, body {
  max-width: 100%;
  -webkit-text-size-adjust: 100%;   /* 防止 iOS 横屏自动放大字体 */
}
*, *::before, *::after { box-sizing: border-box; }
img, video, canvas, svg { max-width: 100%; height: auto; }

/* ============ 二、PC 版固定宽度容器 → 满宽自适应 ============ */
.w1200 {
  width: 100% !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
}
[class*="container"], [class*="wrapper"], [class*="inner"] { max-width: 100%; }

/* ============ 三、栅格 → 允许换行 ============ */
.row, [class*="row-"], .el-row { flex-wrap: wrap !important; }

/* ============ 四、≤1200px ============ */
@media only screen and (max-width: 1200px) {
  .w1200 { padding-left: 12px !important; padding-right: 12px !important; }
  [class*="wrapper"], [class*="container"] { max-width: 100% !important; }
}

/* ============ 五、≤992px 平板 ============ */
@media only screen and (max-width: 992px) {
  .w1200 { padding-left: 10px !important; padding-right: 10px !important; }
  [class*="side"], [class*="aside"] { width: 100% !important; }
  [class*="card"], [class*="goods-item"], [class*="list-item"] {
    width: 100% !important; max-width: 100% !important;
  }
  /* 表格容器可横滑 */
  table { display: block; width: 100% !important; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* ============ 六、≤768px 手机（主要规则） ============ */
@media only screen and (max-width: 768px) {

  /* --- 1. 字号整体放大，解决"字太小" --- */
  html {
    font-size: 16px !important;
    -webkit-text-size-adjust: 100% !important;
  }
  body {
    font-size: 15px !important;
    line-height: 1.65 !important;
  }
  /* 把站点里最密集的 12/13px 小字提上来（PC 上可读，手机上太小） */
  [style*="font-size:12px"], [style*="font-size: 12px"] { font-size: 13.5px !important; }
  [style*="font-size:13px"], [style*="font-size: 13px"] { font-size: 14.5px !important; }
  /* Element Plus / 站点常用小字号类 */
  .el-table, .el-table__cell, .el-form-item, .el-tag, .tip, .sub, .lb, .desc {
    font-size: 14.5px !important;
  }

  /* --- 2. 容器与间距 --- */
  .w1200 { padding-left: 10px !important; padding-right: 10px !important; }

  /* --- 3. 内联固定宽度一律放开 --- */
  [style*="width:"][style*="px"] { max-width: 100% !important; }

  /* --- 4. 网页版表格：容器内横滑（不再被裁掉） --- */
  table {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  .el-table__body-wrapper, [class*="table-wrap"] {
    width: 100% !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch;
  }

  /* --- 5. 弹窗 / 抽屉 / 提示 --- */
  .el-dialog { width: 94% !important; max-width: 94% !important; margin: 8vh auto !important; }
  .el-drawer { width: 100% !important; max-width: 100% !important; }
  .el-message-box { width: 90% !important; max-width: 90% !important; }
  .el-notification { width: 92% !important; max-width: 92% !important; }

  /* --- 6. 下拉/日期面板不超出屏幕 --- */
  .el-select-dropdown, .el-cascader__dropdown, .el-picker-panel,
  .el-date-picker, .el-date-range-picker, .el-dropdown-menu {
    max-width: 96vw !important; left: 2vw !important;
  }
  .el-cascader-panel { max-width: 96vw; }

  /* --- 7. 表单铺满，点击区放大 --- */
  .el-input, .el-textarea, .el-select, .el-cascader { width: 100% !important; }
  .el-input__inner, .el-textarea__inner { min-height: 42px; font-size: 15px !important; }
  .el-form-item { margin-bottom: 14px !important; }
  .el-form-item__label {
    float: none !important; width: auto !important; text-align: left !important;
    padding: 0 0 6px !important; line-height: 1.45 !important; font-size: 15px !important;
  }
  .el-form-item__content { margin-left: 0 !important; }

  /* --- 8. 按钮：手指可点 --- */
  .el-button, button { min-height: 42px; font-size: 15px !important; }
  .el-button + .el-button { margin-left: 6px; }

  /* --- 9. 分页 --- */
  .el-pagination {
    flex-wrap: wrap !important; justify-content: center !important;
    row-gap: 6px; white-space: normal !important;
  }
  .el-pagination .el-pagination__sizes,
  .el-pagination .el-pagination__jump { display: none !important; }

  /* --- 10. 图片/横幅 --- */
  [class*="banner"] img, [class*="banner"] { max-width: 100% !important; }

  /* --- 11. 标签页横滑 --- */
  .el-tabs__nav-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .el-tabs__nav-wrap::after { display: none; }

  /* --- 12. 长文本换行 --- */
  [class*="title"], [class*="name"], [class*="desc"] {
    word-break: break-word; overflow-wrap: anywhere;
  }

  /* ============================================================
     13. 个人中心 / 个人资料等「侧栏 + 内容」页面
     ------------------------------------------------------------
     实测问题：.center-inner 是 display:flex 且不换行，
     .left-menu 又是 flex:0 0 auto（不肯收缩），于是
     侧栏 366px + 内容 366px = 732px，在 390px 手机上
     内容被挤出屏幕，右侧一片空白。
     处理：改为纵向堆叠，侧栏与内容各占整行。
     ============================================================ */
  .center-inner {
    display: block !important;
    flex-wrap: wrap !important;
    width: 100% !important;
  }
  .left-menu, .center-main, .page-panel, .my-center-container {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    flex: 0 0 auto !important;
    box-sizing: border-box !important;
  }
  /* 侧栏在手机上变成紧凑菜单，不再占据整屏高度 */
  .left-menu { padding: 10px 8px !important; margin-bottom: 12px !important; }
  .menu-group { width: 100% !important; }
  .menu-group .group-children { display: flex !important; flex-wrap: wrap !important; gap: 6px !important; }
  .menu-item, .single-menu {
    flex: 0 0 auto !important;
    min-height: 36px !important;
    display: inline-flex !important;
    align-items: center !important;
    padding: 6px 10px !important;
    margin: 0 !important;
    line-height: 1.3 !important;
  }

  /* 个人资料页自身：原来 padding:20px 60px + max-width:500px */
  .user-info-page { padding: 12px 10px !important; }
  .user-info-form { max-width: 100% !important; }
  .user-info-top { flex-wrap: wrap !important; gap: 12px !important; }
  .user-info-top .user-info-balance { width: 100% !important; }
  .user-info-top .user-info-title { font-size: 18px !important; }
  .change-btn { margin-left: 0 !important; }
  .avatar-uploader .avatar,
  .avatar-uploader .el-upload,
  .el-icon.avatar-uploader-icon { width: 64px !important; height: 64px !important; }

  /* 中间内容区与面板内边距收窄，避免挤压 */
  .center-main { padding: 0 !important; }
  .page-panel { padding: 12px 10px !important; }
  .user-summary { width: 100% !important; flex-wrap: wrap !important; }
  .balance-overview, .wallet-summary { flex-wrap: wrap !important; gap: 8px !important; }
  .wallet-item { min-width: 0 !important; }

  /* ============================================================
     14. 顶部站点导航（截图里「首页 卖账号 账号选购…」被拆成两行）
     ============================================================ */
  [class*="nav"] ul, [class*="nav"] .nav-list, .nav-box, .head-nav {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    gap: 2px !important;
  }
  [class*="nav"] li, [class*="nav"] .nav-item, [class*="nav"] a {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
  }
  /* 避免首页/登录注册等入口换行 */
  [class*="header"] { flex-wrap: wrap !important; row-gap: 6px; }
  [class*="header"] .login, [class*="header"] [class*="login"],
  [class*="header"] .register, [class*="header"] [class*="user"] {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
  }

  /* ============================================================
     15. 页脚 / 右侧悬浮侧栏 —— 实测把页面撑到 795px 的两个元凶
     ------------------------------------------------------------
     .footer-content 固定 1200px、.sidebar 固定 795px 且 position:fixed，
     在 390px 视口上直接把文档宽度撑爆（内容被挤到左边、右侧空白）。
     ============================================================ */
  .footer-content, .footer, [class*="footer"] {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    flex-wrap: wrap !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  .footer .links, .links {
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 8px 14px !important;
  }
  .warning, [class*="warning"] {
    width: 100% !important;
    max-width: 100% !important;
    white-space: normal !important;
    word-break: break-word !important;
    font-size: 13px !important;
    padding: 0 12px !important;
    text-align: center !important;
  }

  /* 右侧悬浮侧栏：手机上它会压住正文（实测浮在左菜单上方），
     且其中的入口（下载APP/企业合作/…/个人中心）在顶部导航与个人中心里都有，
     因此手机端直接隐藏，避免遮挡内容。 */
  .sidebar, [class*="sidebar"]:not(.sidebar-menu):not(.sidebar-item) {
    display: none !important;
  }

  /* ============================================================
     16. 顶部站点主导航（首页 / 卖账号 / 账号选购 / … / 个人中心）
     ------------------------------------------------------------
     实测：.menu-item 是 flex:0 0 auto 且不换行，
     横向排列后第 7 项「个人中心」跑到 x=441（视口只有 390），
     把文档宽度撑到 532px。手机上改为可横向滑动的单行导航。
     ============================================================ */
  [class*="nav"], [class*="menu-bar"], [class*="menu-list"],
  .menu, .menu-wrap, .menu-box, [class*="menu-container"] {
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  .menu-item, [class*="menu-item"], .menu-text, [class*="menu-text"] {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
    width: auto !important;
    min-width: 0 !important;
  }
  /* 承载导航的那一层允许横向滚动而不是撑破页面 */
  .menu, .menu-wrap, .menu-box, .menu-list,
  [class*="nav-wrap"], [class*="nav-box"] {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    gap: 2px !important;
  }

  /* ============================================================
     17. 个人中心的两个菜单压成横向滑动条
     ------------------------------------------------------------
     实测（390px）：
       .sidebar     纵向 6 项 = 444px 高
       .left-menu   7 个单菜单项各 36px ≈ 252px
     两者合计占掉约 700px 纵向空间，用户要滑很久才看到内容。
     改成横向可滑的图标条后，各自只需约 74px。
     ============================================================ */
  .sidebar, .sidebar-menu {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    align-items: center !important;
    height: auto !important;
    max-height: 84px !important;
    padding: 8px !important;
    margin: 6px 0 !important;      /* 与上下内容留出间距，避免压住相邻文字 */
    gap: 4px !important;
    box-sizing: border-box !important;
  }
  .sidebar-item {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 62px !important;
    max-width: none !important;
    height: auto !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 6px 8px !important;
    gap: 3px !important;
    white-space: nowrap !important;
  }
  .sidebar-item .item-icon,
  .sidebar-item img,
  .sidebar-item svg {
    width: 20px !important;
    height: 20px !important;
    margin: 0 !important;
    flex: 0 0 auto !important;
  }
  .sidebar-item .item-label,
  .sidebar-item span {
    font-size: 12px !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
  }

  /* 左侧菜单：分组标题 + 子项都变成横向可滑 */
  .left-menu {
    padding: 8px 6px !important;
    margin-bottom: 10px !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: flex-start !important;
    gap: 8px !important;
  }
  .menu-group {
    flex: 1 1 100% !important;
    margin-bottom: 10px !important;
    padding-bottom: 4px !important;
    border-bottom: 1px solid rgba(0, 0, 0, .04) !important;
  }
  .menu-group:last-child { border-bottom: 0 !important; margin-bottom: 0 !important; }
  .group-title {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 30px !important;
    height: auto !important;
    margin-bottom: 6px !important;
    padding: 2px 8px !important;
    font-size: 14px !important;
  }
  .group-children {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    gap: 6px !important;
    padding-bottom: 2px !important;
  }
  .menu-item {
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: none !important;
    min-height: 36px !important;
    height: auto !important;
    display: inline-flex !important;
    align-items: center !important;
    padding: 6px 12px !important;
    margin: 0 !important;
    font-size: 14px !important;
    white-space: nowrap !important;
  }
  /* 单菜单项（我的邀请 / 认证中心 / 操作中心 …）压成一行图标条 */
  .left-menu > .single-menu {
    display: inline-flex !important;
    align-items: center !important;
    width: auto !important;
    min-height: 36px !important;
    height: auto !important;
    padding: 6px 10px !important;
    margin: 0 4px 0 0 !important;
    font-size: 14px !important;
    white-space: nowrap !important;
  }
  /* ============================================================
     18. Element Plus 表格在内容区溢出
     ------------------------------------------------------------
     实测 /myCenter/balance：外层 .table-wrap 已有 overflow-x:auto，
     但 .el-table--fit 带 !important 的 width:100%，
     把 700px 的表格硬撑出容器（Element Plus 自带的宽表格）。
     必须用同等 !important 且更高优先级的选择器盖掉，
     同时只压制「最外层」表格，内部 header/body 表保留 700px 以便横向滚动。
     ============================================================ */
  .el-table,
  .el-table--fit,
  div.el-table.el-table--fit,
  .table-wrap > .el-table,
  [class*="table-wrap"] > [class*="el-table"] {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }
  .el-table__inner-wrapper,
  .el-table__header-wrapper,
  .el-table__body-wrapper,
  .el-table__footer-wrapper,
  .el-scrollbar,
  .el-scrollbar__wrap {
    max-width: 100% !important;
  }
  .el-table__body-wrapper,
  .el-scrollbar__wrap {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  /* 内部表格保持原宽度（700px），由外层横滑查看，不再被压缩变形 */
  .el-table .cell { padding: 0 6px !important; font-size: 13.5px !important; }
  .el-table th, .el-table td { padding: 6px 0 !important; }
  /* 内容区里自行实现了 overflow-x 的容器，确保真的能滑 */
  .table-wrap, [class*="table-wrap"] {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  /* ============================================================
     19. 个人中心内容区纵向收紧（原来上下留白偏大）
     ============================================================ */
  .my-center-container { padding: 10px 0 18px !important; }
  .center-main { padding: 0 !important; }
  .page-panel { padding: 12px 10px !important; margin-bottom: 10px !important; }
  .user-summary { padding: 10px !important; margin-bottom: 10px !important; }
  .overview-card, .balance-overview { padding: 10px !important; gap: 8px !important; }
  .el-form-item { margin-bottom: 12px !important; }
  .el-tabs__header { margin-bottom: 10px !important; }
  .el-card, .el-card__body { padding: 10px !important; }

  /* ============================================================
     20. 首页横幅区 .banner-box —— 挤压真凶
     ------------------------------------------------------------
     实测（390px）：.banner-box 是 flex 行 + nowrap，三个子元素
     （左菜单 .rmfw / 轮播 .banner / 用户卡 .user-card）被强行并排，
     导致：
        .rmfw      被压到 62px（需要约 200px）→ 中文逐字换行成一列
        .banner    被压到 48px（轮播图几乎不可见）
        .user-card 被压到 264px → 内部 收藏/历史/钱包/合同 也挤在一起
     处理：手机上改为纵向堆叠，三者各占整行。
     ============================================================ */
  .banner-box, .banner-box.fbt, .banner-box.flex {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: wrap !important;
    align-items: stretch !important;
    row-gap: 10px !important;
    height: auto !important;
  }
  .banner-box > .rmfw,
  .banner-box > .banner,
  .banner-box > .user-card {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    flex: 0 0 auto !important;
    box-sizing: border-box !important;
  }
  /* 注意：这些页面的样式来自 Vue 组件，随路由懒加载、在 mobile.css 之后注入，
     所以同特异度时它们会赢。这里加 `html ` 前缀把特异度提到 (0,2,1)，
     无论加载顺序如何都能盖过 .rmfw[data-v-xxx] 的 !important。
     （实测：不加前缀时全新加载会被 Vue 样式覆盖，加上后稳定生效） */
  html .rmfw[class],
  html .rmfw {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;        /* 原为固定 326px，手机上内容会溢出 */
    box-sizing: border-box !important;
  }
  html .all_left[class] {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    display: block !important;      /* 纵向卡片列表 */
  }
  html .one_re[class] {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    flex: 0 0 auto !important;
    box-sizing: border-box !important;
  }
  html .title_re[class] {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    white-space: normal !important;
    overflow-wrap: normal !important;   /* 关键：不要逐字断行 */
    word-break: keep-all !important;
  }
  html .title_re[class] > *,
  html .title_re[class] .game_re,
  html .game_re[class] {
    min-width: 0 !important;
    overflow-wrap: normal !important;
    word-break: keep-all !important;
  }
  html .title_re[class] .game_re { flex: 1 1 auto !important; width: auto !important; }
  .des_title { font-size: 12px !important; }
  html .name_re[class] { width: auto !important; max-width: 100% !important; }

  /* 用户卡同样被 Vue 作用域样式固定为 256px */
  html .user-card[class] {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    box-sizing: border-box !important;
  }

  /* 轮播图：手机上给足高度 */
  .banner, .banner .el-carousel, .banner .el-carousel__container {
    width: 100% !important;
    max-width: 100% !important;
    height: 150px !important;
    min-height: 150px !important;
  }

  /* 用户卡内部：四个快捷入口一行排开，不再互相挤压 */
  .user-card { padding: 12px !important; }
  .user-header { width: 100% !important; flex-direction: row !important; align-items: center !important; gap: 10px !important; }
  .quick-nav, .flex.flex-col {
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: space-between !important;
    gap: 6px !important;
  }
  .quick-nav > *, .flex.flex-col > * {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    text-align: center !important;
    white-space: nowrap !important;
  }
  .recommend-no { width: 100% !important; }

  /* ============================================================
     21. 首页「游戏推荐 / 热门游戏 / 网络游戏 / 手机游戏 / 全部游戏」
     ------------------------------------------------------------
     实测：这一行在手机上只有 329px 可用宽度，5 个标签共需约 489px，
     flex 把它们各自压到 59px，导致"游戏推荐"折成竖排。
     处理：允许该行横向滑动，标签保持单行、不再折字。
     ============================================================ */
  .game-type-tabs[class],
  .game-category-head[class] {
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .game-type-tabs[class]::-webkit-scrollbar,
  .game-category-head[class]::-webkit-scrollbar { display: none; }
  .game-type-tab[class] {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
    width: auto !important;
    min-width: 0 !important;
  }
}

/* ============ 七、≤420px 小屏 ============ */
@media only screen and (max-width: 420px) {
  .w1200 { padding-left: 8px !important; padding-right: 8px !important; }
  body { font-size: 15px !important; }
  .el-dialog { width: 96% !important; max-width: 96% !important; }
  .el-button, button { padding-left: 10px; padding-right: 10px; }
}