/* ============================================================
   MG.AI · 手机显示清晰度 + 长截屏兼容补丁  mobile-shot.css
   ------------------------------------------------------------
   ① 配图/示意图不再被裁切压扁（原来是 cover + 固定高度 → 手机上模糊）
   ② 图片可点击全屏放大，双指/双击缩放，矢量图放大依然清晰
   ③ 长截屏模式（html.ms-shot）：收起全部 fixed / sticky 浮层、
      关闭视差与入场动画、展开折叠内容 —— 系统「滚动截屏」可完整拼接
   仅做增量覆盖，不改动原 style.css / motion.css 任何规则。
   ============================================================ */

/* ---------- ① 配图完整显示，不再裁切 ---------- */
.figure {
  min-height: 0 !important;
  height: auto !important;
  display: block !important;
  padding: 0 !important;
}
.figure img {
  position: relative !important;
  inset: auto !important;
  width: 100% !important;
  height: auto !important;
  max-height: none !important;
  object-fit: contain !important;
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
  border-radius: 10px;
  display: block;
}
.figure:hover img.loaded { transform: none !important; }
.figure .fig-label {
  position: relative !important;
  padding: 9px 12px !important;
  font-size: 13px !important;
  background: rgba(15, 23, 42, .6);
  color: #fff;
  border-radius: 0 0 10px 10px;
  text-shadow: 0 1px 4px rgba(0, 0, 0, .35);
}
/* 含真实图片的图框改用浅底，避免渐变色透出导致文字发糊 */
.figure:has(img) { background: #f8fafc !important; }

/* ---------- ② 图片渲染清晰度 ---------- */
img, svg { image-rendering: auto; -ms-interpolation-mode: bicubic; }
.ms-zoomable { cursor: zoom-in; }
.ms-has-zoom { position: relative; }
.ms-has-zoom > img.ms-zoomable ~ .ms-zoom-tip,
.ms-zoom-tip {
  position: absolute;
  right: 8px;
  bottom: 8px;
  z-index: 5;
  font-size: 11px;
  font-weight: 700;
  color: #0f172a;
  background: rgba(255, 255, 255, .92);
  border: 1px solid rgba(15, 23, 42, .18);
  border-radius: 999px;
  padding: 3px 10px;
  pointer-events: none;
  box-shadow: 0 2px 8px rgba(15, 23, 42, .12);
}

/* ---------- ③ 手机端默认：去掉最影响长截屏拼接的浮层与视差 ---------- */
@media (max-width: 820px) {
  /* 兜底：任何仍未被内部滚动吸收的横向溢出，都收在视口内，绝不撑破页面（手机长截屏不再被裁右侧） */
  html, body { overflow-x: hidden !important; }
  /* 视差光晕：滚动时位移 → 长截屏拼接错位，且手机上最耗性能 */
  .hero-aurora { display: none !important; }
  /* 顶部 3px 进度条 / 回到顶部按钮：fixed 元素会在每一段截图里重复出现 */
  .scroll-progress, .to-top { display: none !important; }
  /* 正文最小字号，避免手机上"看不清" */
  .txt, .fig-label { font-size: 15px !important; }
  /* 两端对齐在窄屏会产生大空隙，改左对齐更易读 */
  .txt { text-align: left !important; }
  /* 关键修复：宽表格不再把整页撑宽（页面被撑宽 = 内容右侧被裁掉），
     表格自身变为可横向滑动的块，行/列结构保持不变 */
  table {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  /* 有些表格（如 .earn-table）设了 min-width，会撑破页面；移动端取消，改为表内横向滑动 */
  table.earn-table, .earn-table { min-width: 0 !important; max-width: 100% !important; }
  table, table * { max-width: 100% !important; }
  /* 兜底：任何仍撑宽的块都改为表内横向滑动，绝不撑破视口 */
  main, .container, .wrap, section, article, .panel, .card { max-width: 100% !important; }
  /* 登录状态栏：手机上换行收拢，避免把整页撑宽导致右侧内容被裁 */
  .auth-bar {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px 10px !important;
    justify-content: flex-end !important;
    padding: 4px 12px !important;
    min-width: 0;
  }
  .auth-bar .auth-hello { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
  .site-nav .container { height: auto !important; min-height: 56px; flex-wrap: wrap; gap: 8px; padding-top: 8px; padding-bottom: 8px; }
}

/* ---------- ④ 全屏看图（Lightbox） ---------- */
#msLB {
  position: fixed;
  inset: 0;
  z-index: 100000;
  background: rgba(6, 10, 18, .96);
  display: none;
  flex-direction: column;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}
#msLB.ms-on { display: flex; }
#msLB .ms-lb-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 14px;
  color: #e2e8f0;
  font-size: 13px;
  border-bottom: 1px solid rgba(255, 255, 255, .12);
}
#msLB .ms-lb-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 700;
}
#msLB .ms-lb-stage { flex: 1; overflow: hidden; position: relative; }
#msLB .ms-lb-holder {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  transform-origin: center center;
  will-change: transform;
}
#msLB .ms-lb-holder > img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  background: #fff;
}
#msLB .ms-lb-holder > svg { width: 100%; height: 100%; background: #fff; }
#msLB .ms-lb-bottom {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 10px 14px 16px;
  color: #94a3b8;
  font-size: 12px;
}
#msLB .ms-btn {
  background: rgba(255, 255, 255, .14);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: 999px;
  padding: 7px 15px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
#msLB .ms-btn:active { background: rgba(255, 255, 255, .28); }
/* 关闭键放大加亮：一眼可见、一点就回页面，绝不把用户困在放大层 */
#msLB .ms-lb-top .ms-btn {
  background: #fbbf24;
  color: #0f172a;
  border: 2px solid #fbbf24;
  font-size: 15px;
  font-weight: 900;
  padding: 10px 26px;
  min-width: 118px;
  text-align: center;
  box-shadow: 0 6px 18px rgba(251, 191, 36, .45);
}
#msLB .ms-lb-top .ms-btn:active { background: #f59e0b; }

/* ---------- ⑤ 长截屏模式 ---------- */
html.ms-shot .mq-box,
html.ms-shot .scroll-progress,
html.ms-shot .to-top,
html.ms-shot .cta-bar,
html.ms-shot #wa-dock,
html.ms-shot #wa-btn,
html.ms-shot #tkf-btn,
html.ms-shot #tkf-panel,
html.ms-shot #ars-btn,
html.ms-shot #ars-panel,
html.ms-shot .ggab-float,
html.ms-shot .ggab-badge,
html.ms-shot .wa-mini,
html.ms-shot .ars-btn,
html.ms-shot .tkf-btn { display: none !important; }

html.ms-shot .site-nav { position: static !important; }
html.ms-shot * { animation: none !important; transition: none !important; }
html.ms-shot .hero-aurora { display: none !important; }
html.ms-shot .hero-img { opacity: 1 !important; transform: none !important; animation: none !important; }
html.ms-shot .reveal,
html.ms-shot [data-reveal] { opacity: 1 !important; transform: none !important; }
html.ms-shot .q-drawer-body { max-height: none !important; }
html.ms-shot body { padding-bottom: 0 !important; }
html.ms-shot, html.ms-shot body { height: auto !important; }
html.ms-shot body { overflow: visible !important; }

/* ---------- ⑥ 长截屏模式开关条（随页面滚动，非 fixed，不干扰截图） ---------- */
#msShotBar {
  position: relative;
  z-index: 9500;
  background: #0f172a;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 8px 12px;
  font-size: 13px;
  line-height: 1.5;
}
#msShotBar .ms-bar-btn {
  background: linear-gradient(135deg, #f59e0b, #fbbf24);
  color: #0f172a;
  font-weight: 800;
  border: 0;
  border-radius: 999px;
  padding: 8px 16px;
  font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
}
#msShotBar .ms-bar-tip { color: #cbd5e1; flex: 1; min-width: 130px; }
html.ms-shot #msShotBar { background: #065f46; }
html.ms-shot #msShotBar .ms-bar-btn { background: linear-gradient(135deg, #34d399, #10b981); }
@media (min-width: 821px) { #msShotBar { display: none; } }