/* ========================================
   移动端适配 - 真机优化版本
   目标：iPhone/Android/Samsung 真机可用
   原则：简洁、标准、依赖浏览器原生能力
   PC端(>=1024px)完全不受影响
   ======================================== */

/* ========================================
   全局触摸优化
   ======================================== */
* {
  /* 移除点击高亮 */
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  /* 禁用长按弹出菜单（保护用户体验） */
  -webkit-touch-callout: none;
}

/* 表单元素保留文本选择 */
input, 
textarea, 
[contenteditable] {
  -webkit-user-select: text;
  user-select: text;
}

/* ========================================
   移动端核心适配 - 仅<1024px生效
   ======================================== */
@media (max-width: 1023px) {
  
  /* 1. 确保body和html支持原生缩放 */
  html {
    width: 100%;
    height: 100%;
    overflow: visible;
    /* 平滑滚动 */
    scroll-behavior: smooth;
    /* iOS滚动优化 */
    -webkit-overflow-scrolling: touch;
  }
  
  body {
    width: 100%;
    min-height: 100vh;
    overflow: visible;
    /* 允许页面自然缩放 */
    touch-action: manipulation;
    -webkit-overflow-scrolling: touch;
  }
  
  /* 2. 主容器自适应 */
  #homeContent {
    width: 100%;
    min-height: 100vh;
    position: relative;
    overflow: visible;
  }
  
  /* 3. 内容层自适应缩放 */
  #homeContent > div[data-layer] {
    /* 设计稿尺寸 */
    width: 1920px;
    height: 1080px;
    
    /* 相对定位，允许溢出 */
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    transform-origin: top center;
    
    /* 初始缩放适配屏幕 */
    /* JavaScript会根据viewport计算实际scale */
  }
  
  /* 4. Loading页面保持固定 */
  #loadingScreen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 10000;
  }
  
  /* 5. 确保交互元素可点击 */
  button,
  a,
  [onclick],
  [data-layer*="hotspot"],
  [data-layer*="close"],
  [data-layer*="page"],
  .prev-btn, .next-btn, /* 显式添加翻页按钮 */
  .page-btn {
    /* 启用快速点击 */
    touch-action: manipulation;
    /* 保留指针事件 */
    pointer-events: auto;
    /* 提高触摸目标大小 */
    min-width: 44px;
    min-height: 44px;
    /* 如果原尺寸小于44px，通过padding扩展点击区域 */
    cursor: pointer;
    /* 相对定位确保可见 */
    position: relative;
    z-index: 10;
  }
  
  /* 6. 安全区域适配（iPhone X及以上） */
  body {
    /* 使用安全区域内边距 */
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
  }
  
  /* 固定定位元素也需要考虑安全区域 */
  #loadingScreen,
  .overlay-mask {
    top: env(safe-area-inset-top, 0);
    bottom: env(safe-area-inset-bottom, 0);
    left: env(safe-area-inset-left, 0);
    right: env(safe-area-inset-right, 0);
  }
}

/* ========================================
   小屏幕优化 (<768px，大部分手机)
   ======================================== */
@media (max-width: 767px) {
  
  /* 减小字体避免过大 */
  body {
    font-size: 14px;
  }
}

/* ========================================
   超小屏幕优化 (<480px，小屏手机)
   ======================================== */
@media (max-width: 479px) {
  
  body {
    font-size: 12px;
  }
  
  /* 交互元素保持可点击大小 */
  button,
  a,
  [onclick] {
    min-width: 48px;
    min-height: 48px;
    padding: 8px;
  }
}

/* ========================================
   横屏优化
   ======================================== */
@media (max-width: 1023px) and (orientation: landscape) {
  
  /* 减少上下安全区域 */
  body {
    padding-top: max(env(safe-area-inset-top), 10px);
    padding-bottom: max(env(safe-area-inset-bottom), 10px);
  }
}

/* ========================================
   PC端保护 - 确保>=1024px完全不受影响
   ======================================== */
@media (min-width: 1024px) {
  
  /* 重置所有移动端修改 */
  html,
  body {
    overflow: auto;
    scroll-behavior: auto;
    -webkit-overflow-scrolling: auto;
  }
  
  body {
    padding: 0;
    touch-action: auto;
  }
  
  #homeContent,
  #homeContent > div[data-layer] {
    /* 保持原有PC端样式 */
    position: static;
    transform: none;
    width: auto;
    height: auto;
  }
  
  button,
  a,
  [onclick] {
    min-width: auto;
    min-height: auto;
    padding: 0;
  }
}

/* ========================================
   高分辨率屏幕优化（Retina等）
   ======================================== */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  /* 优化图片和文字渲染 */
  body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
}

/* ========================================
   触摸设备专用优化
   ======================================== */
@media (hover: none) and (pointer: coarse) {
  
  /* 增大触摸目标 */
  a,
  button,
  [onclick] {
    min-width: 44px;
    min-height: 44px;
  }
  
  /* 优化滚动性能 */
  * {
    -webkit-overflow-scrolling: touch;
  }
}

/* ========================================
   防止内容被裁切
   ======================================== */
@media (max-width: 1023px) {
  
  /* 确保内容容器不被裁切 */
  #homeContent {
    overflow-x: hidden;
    overflow-y: visible;
  }
  
  /* 允许水平滚动查看完整内容（如果需要） */
  #homeContent > div[data-layer] {
    max-width: none;
  }
}