/* 德扑荟移动端触控优化 - 统一导入所有工具页 */
/* 嵌入为 <link rel="stylesheet" href="/dph-touch.css"> 或直接复制到 <style> 内 */

/* === 触控基础 === */
@media(max-width:768px){
  /* 按钮最小触控区域44px */
  .ctrl-btn, .mode-tab, .preset-btn, .pos-btn, .range-tool,
  .card-btn, .range-cell {
    min-width: 44px;
    min-height: 44px;
    touch-action: manipulation;
  }
  
  /* 禁用双击缩放 */
  .card-grid, .range-grid {
    touch-action: manipulation;
    -webkit-user-select: none;
    user-select: none;
  }
  
  /* 长按不出菜单 */
  .card-btn, .range-cell {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
  }
  
  /* 点击反馈 */
  .card-btn:active, .range-cell:active, .ctrl-btn:active {
    transform: scale(0.92);
    transition: transform 0.1s ease;
  }
  
  /* 横向滑动手牌选择器 */
  .card-grid-mobile {
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding: 4px;
    gap: 4px;
  }
  .card-grid-mobile .card-btn {
    flex-shrink: 0;
    scroll-snap-align: start;
  }
  
  /* 预设按钮两行展示 */
  .preset-row, .ctrl-btns {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
    gap: 4px;
  }
  
  /* 手牌矩阵适配 */
  .card-grid {
    gap: 2px;
  }
  .card-btn {
    font-size: 10px;
  }
  
  /* 底部CTA大按钮 */
  .bottom-cta a, .cta-btn {
    display: block;
    width: 100%;
    padding: 14px 20px;
    margin-bottom: 8px;
    text-align: center;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 700;
  }
  
  /* 结果区吸顶 */
  .results-sticky {
    position: sticky;
    top: 0;
    z-index: 10;
    background: #12121f;
    padding: 12px;
    border-bottom: 2px solid #1a1a30;
  }
  
  /* 横向提示 */
  .swipe-hint {
    display: block;
    font-size: 10px;
    color: #555;
    text-align: center;
    padding: 4px;
  }
  
  /* 双指缩放禁用（工具页不需要缩放） */
  .tool-container {
    touch-action: pan-x pan-y;
  }
}

/* === 触控手势 === */
/* 长按选择多个手牌 */
.card-btn.touch-active {
  border-color: #3ea6ff !important;
  background: #1a1a30 !important;
}

/* 滑动选择（配合JS使用） */
.card-grid.touch-dragging .card-btn {
  pointer-events: none;
}