/* ============================================================
 * 小呆游戏库（xadai.cn / m5 模板）手机端滚动修复 v2
 * ------------------------------------------------------------
 * v1 的做法是把整页改成文档滚动，结果是「滑一个整个都滑」，
 * 菜单栏和商品列表一起跑；而且部分机型连整页都滑不动。
 *
 * v2：
 *   - 视口锁死，页面本身不滚动；
 *   - 左侧分类菜单 .m5-nav-scroll、右侧应用列表 .m5-list
 *     各自独立滚动，互不影响；
 *   - 修掉 body 上的 touch-action:manipulation（部分国产内核
 *     会把它当 none，导致全站手指划不动）。
 *
 * 配合 assets/js/app-mobile-scroll.js 使用（含高度锁定 + 手势兜底）。
 * 直接覆盖同名文件即可，模板里已引用这个路径。
 * ============================================================ */
@media (max-width: 1023.98px) {
  html,
  body.m5-body {
    height: 100% !important;
    overflow: hidden !important;
    overscroll-behavior: none !important;
  }

  body.m5-body {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    touch-action: auto !important;
  }

  .m5-page {
    position: relative !important;
    height: 100% !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
  }

  .m5-main {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: stretch !important;
  }

  .m5-nav {
    overflow: hidden !important;
    min-height: 0 !important;
  }

  /* ---- 左侧分类菜单：独立滚动 ---- */
  .m5-nav-scroll {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: 100% !important;
    max-height: 100% !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
    touch-action: pan-y !important;
  }

  .m5-content {
    min-height: 0 !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }

  /* ---- 右侧应用列表：独立滚动 ---- */
  .m5-list {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: 100% !important;
    max-height: 100% !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
    touch-action: pan-y !important;
    padding-bottom: 18px !important;
  }

  /* 详情页 / 404 页只有一个滚动区，保持内部滚动即可 */
  .m5-scroll {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
    touch-action: pan-y !important;
  }

  /* 弹层贴住视口，不随容器跑 */
  .m5-mask,
  .m5-panel {
    position: fixed !important;
  }

  /* ---- 底部 APP 下载条：钉在屏幕底部 ---- */
  #xdAppDlBar,
  #yunyougeAppDlBar {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 9990 !important;
    padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)) !important;
  }

  /* 有下载条时页面底部备案栏让位 */
  body[data-yunyouge-app-dl="1"] .m5-footer,
  .m5-page[data-yunyouge-app-dl="1"] .m5-footer {
    display: none !important;
  }
}

/* ---- 列表上方的说明条（推荐/上新 里没有内容时提示一句，避免看起来点了没反应） ---- */
.m5-listhint {
  flex: 0 0 auto;
  margin: 0 0 8px;
  padding: 7px 10px;
  border-radius: 8px;
  background: #fff7ed;
  border: 1px solid #ffe0bf;
  color: #b45309;
  font-size: 12px;
  line-height: 1.45;
}

/* ---- 下载信息里的「下载链接」行 ---- */
.m5-linkrow {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  margin-bottom: 10px;
  padding: 8px 10px;
  border-radius: 10px;
  background: #f7f8fb;
  font-size: 13px;
}

.m5-linkrow-k {
  flex: 0 0 auto;
  color: #8891a0;
  font-size: 12px;
}

.m5-linkrow-v {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: #333;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
}

.m5-linkrow .m5-mini {
  flex: 0 0 auto;
}

/* ---- 应用截图：用 padding 撑出 3:4，不再依赖 aspect-ratio ----
 * 原来的 .m5-shots img{height:100%;aspect-ratio:3/4} 在部分安卓 WebView 里
 * 会因为「百分比高度 + 网格自身高度」互相依赖，算出来的框只有一半高，
 * 再被 a{overflow:hidden} 一裁，截图就只显示一半。这里改成绝对定位铺满，
 * 所有内核算出来的都是同一个 3:4 框。 */
.m5-shots a {
  position: relative;
  display: block;
  height: auto;
  padding-top: 133.3333%;
  overflow: hidden;
}

.m5-shots img {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  object-fit: cover;
}