/* ========================================
   移动端Overlay适配 - 真机优化版本
   目标：Overlay内容在iPhone/Android/Samsung可用
   策略：依赖浏览器原生缩放，不强制transform
   PC端(>=1024px)完全不受影响
   ======================================== */

/* ========================================
   移动端Overlay核心适配 - 仅<1024px生效
   ======================================== */
@media (max-width: 1023px) {
  
  /* 1. Overlay遮罩层 - 全屏覆盖 */
  .overlay-mask {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background: rgba(0, 0, 0, 0.8) !important;
    z-index: 9999 !important;
    overflow: hidden !important;
    display: none !important;
    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    /* 安全区适配 */
    padding-top: env(safe-area-inset-top) !important;
    padding-bottom: env(safe-area-inset-bottom) !important;
    padding-left: env(safe-area-inset-left) !important;
    padding-right: env(safe-area-inset-right) !important;
  }
  .overlay-mask.active {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    opacity: 1 !important;
  }

  /* 2. Overlay容器 - 允许绝对定位子元素居中 */
  .overlay-container {
    width: 100vw !important;
    height: 100vh !important; /* Fallback */
    height: 100dvh !important; /* Modern mobile browsers */
    max-width: 100vw !important;
    max-height: 100vh !important;
    max-height: 100dvh !important;
    display: block !important; 
    position: relative !important;
    top: 0 !important;
    left: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important; /* 允许溢出显示，防止被裁剪 */
    opacity: 0 !important;
    visibility: hidden !important;
    transition: opacity 0.3s ease, visibility 0.3s !important;
    pointer-events: auto !important;
    z-index: 10000 !important;
  }
  .overlay-container.active {
    opacity: 1 !important;
    visibility: visible !important;
  }

  /* 3. Overlay内容元素 - 绝对定位居中策略 */
  .overlay-container > div[data-layer] {
    /* 强制固定尺寸 1440x900 */
    width: 1440px !important;
    height: 900px !important;
    /* 绝对定位居中 */
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    margin-top: -450px !important; /* Height/2 */
    margin-left: -720px !important; /* Width/2 */
    
    background: transparent !important;
    border-radius: 0 !important;
    overflow: visible !important;
    
    /* 重置定位属性，防止被覆盖 */
    right: auto !important;
    bottom: auto !important;
    transform-origin: center center !important;
    display: block !important;
    flex-shrink: 0 !important;
    
    /* 确保在最上层 */
    z-index: 10001 !important;
  }
  
  /* 4. 确保overlay内容的所有子元素可见 */
  .overlay-container > div[data-layer] > * {
    position: relative !important;
    max-width: 100% !important;
    max-height: 100% !important;
    /* 确保子元素从左上角开始布局，不继承外部偏移 */
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    margin: 0 !important;
  }
  
  /* 5. 特殊处理绝对定位的关闭按钮 */
  .overlay-container > div[data-layer] [data-layer*="close"],
  .overlay-container > div[data-layer] .close-btn {
    position: absolute !important;
  }
  
  /* 6. 关闭按钮 - 确保可见可点击 */
  [data-layer*="close"],
  .close-btn {
    /* 固定在overlay右上角 */
    position: fixed !important;
    top: calc(env(safe-area-inset-top) + 10px) !important;
    right: calc(env(safe-area-inset-right) + 10px) !important;
    z-index: 10001 !important;
    
    /* 增大触摸目标 */
    min-width: 48px !important;
    min-height: 48px !important;
    padding: 12px !important;
    
    /* 确保可点击 */
    touch-action: manipulation !important;
    pointer-events: auto !important;
    cursor: pointer !important;
    
    /* 高亮效果 */
    -webkit-tap-highlight-color: rgba(255, 255, 255, 0.3) !important;
    
    /* 背景确保可见 */
    background: rgba(0, 0, 0, 0.6) !important;
    border-radius: 50% !important;
  }
  
  [data-layer*="close"] svg,
  [data-layer*="close"] path,
  .close-btn svg,
  .close-btn path {
    pointer-events: none; /* SVG不拦截点击 */
  }
  
  /* 7. 翻页按钮（Book等） - 确保可点击 */
  .page-btn,
  [data-layer*="prev"],
  [data-layer*="next"],
  [data-layer*="page"] {
    /* 增大触摸目标 */
    min-width: 48px !important;
    min-height: 48px !important;
    padding: 12px !important;
    
    /* 确保可点击 */
    touch-action: manipulation !important;
    pointer-events: auto !important;
    cursor: pointer !important;
    position: relative !important;
    z-index: 100 !important;
    
    /* 高亮效果 */
    -webkit-tap-highlight-color: rgba(255, 255, 255, 0.2) !important;
  }
  
  /* 8. Book专项优化 - 增大初始显示 */
  .overlay-container:has([data-layer*="book"]) > div[data-layer] {
    /* Book内容使用更大尺寸 */
    width: 1440px !important;
    height: 900px !important;
  }
  
  /* 9. 视频和音频元素 */
  video,
  audio {
    /* 最大宽度适配容器 */
    max-width: 100% !important;
    height: auto !important;
    
    /* 允许控制条交互 */
    touch-action: manipulation !important;
    pointer-events: auto !important;
  }
}

/* ========================================
   小屏幕Overlay优化 (<768px)
   ======================================== */
@media (max-width: 767px) {
  
  /* 关闭按钮位置调整 */
  [data-layer*="close"],
  .close-btn {
    top: 5px !important;
    right: 5px !important;
  }
}

/* ========================================
   超小屏幕Overlay优化 (<480px)
   ======================================== */
@media (max-width: 479px) {
  /* 内容尺寸统一由基础规则1440x900控制，JS动态计算scale */
}

/* ========================================
   横屏Overlay优化
   ======================================== */
@media (max-width: 1023px) and (orientation: landscape) {
  /* 内容尺寸统一由基础规则1440x900控制，JS动态计算scale */
}

/* ========================================
   PC端保护 - 确保>=1024px完全不受影响
   ======================================== */
@media (min-width: 1024px) {
  
  /* 恢复所有PC端原有样式 */
  .overlay-mask {
    position: fixed;
    overflow: hidden;
    padding: 0;
  }
  
  .overlay-container {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: auto;
    height: auto;
    margin: 0;
  }
  
  [data-layer*="close"],
  .close-btn,
  .page-btn,
  [data-layer*="prev"],
  [data-layer*="next"] {
    /* 恢复PC端按钮样式 */
    min-width: auto;
    min-height: auto;
    padding: 0;
  }
}

/* ========================================
   触摸设备Overlay优化
   ======================================== */
@media (hover: none) and (pointer: coarse) {
  
  /* 所有交互元素增大 */
  .overlay-container button,
  .overlay-container a,
  .overlay-container [onclick] {
    min-width: 48px;
    min-height: 48px;
    padding: 12px;
  }
  
  /* 优化滚动 */
  .overlay-mask {
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
  }
}