/**
 * 移动端完美适配样式 - mobile-perfect.css
 * 针对移动设备的全面优化
 */

/* ============================================
   移动端基础优化 (< 768px)
   ============================================ */
@media (max-width: 768px) {
  
  /* 1. 安全区域适配 */
  body {
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
  }
  
  .container {
    padding-left: max(12px, env(safe-area-inset-left));
    padding-right: max(12px, env(safe-area-inset-right));
  }
  
  /* 2. Header优化 */
  .site-header {
    padding-top: env(safe-area-inset-top);
  }
  
  .header-inner {
    height: 56px;
    gap: 10px;
  }
  
  .brand {
    font-size: 16px;
  }
  
  .brand::before {
    font-size: 18px;
  }
  
  .top-tabs {
    gap: 6px;
  }
  
  .tab {
    height: 34px;
    padding: 0 12px;
    font-size: 12px;
    min-width: 60px;
  }
  
  /* 3. Hero Cards移动端优化 */
  .hero-cards {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin: 12px 0;
  }
  
  .hero-cards > .cta {
    grid-column: 1 / -1;
  }
  
  .card {
    padding: 12px 10px;
    border-radius: 10px;
  }
  
  .card-title {
    font-size: 10px;
    margin-bottom: 4px;
  }
  
  .card-value {
    font-size: 16px;
    line-height: 1.2;
  }
  
  /* 公式卡片特殊处理 */
  #formula {
    font-size: 14px;
    word-spacing: 2px;
  }
  
  /* 形态卡片 */
  .chips {
    gap: 3px;
    justify-content: center;
  }
  
  .chip {
    padding: 2px 6px;
    font-size: 10px;
  }
  
  /* CTA按钮 */
  .cta {
    padding: 12px;
    font-size: 14px;
  }
  
  /* 4. 子导航优化 */
  .sub-tabs {
    gap: 6px;
    padding: 10px 0;
    margin-bottom: 12px;
  }
  
  .sub-tab {
    padding: 8px 12px;
    font-size: 12px;
  }
  
  /* 5. 表格容器优化 */
  .table-wrap {
    border-radius: 10px;
    margin-bottom: 16px;
  }
  
  .table-header {
    padding: 12px 14px;
    flex-wrap: wrap;
  }
  
  .table-title {
    font-size: 15px;
    width: 100%;
    margin-bottom: 8px;
  }
  
  .table-actions {
    width: 100%;
    justify-content: flex-start;
  }
  
  /* 6. 表格优化 - 确保对齐 */
  .table {
    font-size: 12px;
  }
  
  .table th {
    padding: 10px 8px !important;
    font-size: 11px;
    background: #f9fafb;
    position: sticky;
    top: 0;
    z-index: 5;
  }
  
  .table td {
    padding: 10px 8px !important;
    font-size: 12px;
  }
  
  /* 主页表格保持居中对齐 */
  #resultTable th,
  #resultTable td {
    text-align: center !important;
  }
  
  #resultTable th {
    width: 33.33% !important;
  }
  
  /* 徽章在移动端优化 */
  .badge {
    padding: 2px 6px;
    font-size: 10px;
    min-width: 40px;
  }
  
  /* 7. 工具栏移动端优化 */
  .toolbar {
    padding: 10px;
    gap: 8px;
  }
  
  .toolbar label {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 8px;
  }
  
  .toolbar label span {
    flex-shrink: 0;
    font-size: 13px;
    font-weight: 600;
  }
  
  .toolbar select {
    flex: 1;
  }
  
  .toolbar input,
  .toolbar select,
  .toolbar button {
    width: 100%;
    min-height: 44px;
    font-size: 16px;
    border-radius: 8px;
  }
  
  .toolbar .info {
    order: -1;
    padding-bottom: 8px;
    border-bottom: 1px solid #e5e7eb;
    font-size: 12px;
  }
  
  /* 8. 按钮组优化 */
  .button-group {
    width: 100%;
    gap: 6px;
  }
  
  .button-group .btn-secondary {
    flex: 1;
    padding: 8px 10px;
    font-size: 11px;
    min-height: 36px;
  }
  
  /* 9. 分页器优化 */
  #pager {
    padding: 12px;
    gap: 10px;
  }
  
  #pager button {
    flex: 1;
    min-height: 44px;
    font-size: 14px;
    border-radius: 8px;
  }
  
  #pageInfo {
    width: 100%;
    padding: 8px;
    background: white;
    border-radius: 6px;
    font-size: 13px;
  }
  
  /* 10. Toast通知移动端优化 */
  .toast {
    left: 10px;
    right: 10px;
    top: calc(56px + env(safe-area-inset-top) + 10px);
    width: auto;
    font-size: 13px;
    padding: 12px 16px;
  }
  
  /* 11. 页脚优化 */
  .site-footer {
    padding: 24px 12px;
    padding-bottom: calc(24px + env(safe-area-inset-bottom));
    font-size: 12px;
  }
  
  .site-footer p {
    margin: 6px 0;
  }
  
  .credits {
    font-size: 11px;
  }
}

/* ============================================
   小屏手机优化 (< 480px)
   ============================================ */
@media (max-width: 480px) {
  
  /* Hero Cards单列布局 */
  .hero-cards {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  
  .card {
    padding: 14px 12px;
  }
  
  .card-value {
    font-size: 18px;
  }
  
  #formula {
    font-size: 15px;
  }
  
  /* 表格更紧凑 */
  .table th {
    padding: 8px 6px !important;
    font-size: 10px;
  }
  
  .table td {
    padding: 8px 6px !important;
    font-size: 11px;
  }
  
  .badge {
    padding: 1px 5px;
    font-size: 9px;
    min-width: 36px;
  }
  
  /* 按钮组更紧凑 */
  .button-group .btn-secondary {
    padding: 6px 8px;
    font-size: 10px;
  }
  
  /* 导航标签 */
  .tab {
    padding: 0 10px;
    font-size: 11px;
    min-width: 54px;
  }
  
  .sub-tab {
    padding: 6px 10px;
    font-size: 11px;
  }
}

/* ============================================
   触摸设备优化
   ============================================ */
@media (hover: none) and (pointer: coarse) {
  
  /* 增大点击区域 */
  .btn-primary,
  .btn-secondary,
  .tab,
  .sub-tab {
    min-height: 44px;
  }
  
  /* 触摸反馈 */
  .btn-primary:active,
  .btn-secondary:active,
  .tab:active,
  .sub-tab:active,
  .card:active {
    transform: scale(0.98);
    opacity: 0.9;
  }
  
  /* 移除hover效果 */
  .card:hover,
  .tab:hover,
  .sub-tab:hover,
  .btn-secondary:hover {
    transform: none;
    box-shadow: inherit;
  }
  
  /* 表格行点击反馈 */
  .table tbody tr:active {
    background: rgba(99, 102, 241, 0.1) !important;
  }
}

/* ============================================
   横屏模式优化
   ============================================ */
@media (max-width: 768px) and (orientation: landscape) {
  
  .hero-cards {
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
  }
  
  .hero-cards > .cta {
    grid-column: 4;
    grid-row: 1 / 3;
  }
  
  .card {
    padding: 10px 8px;
  }
  
  .card-title {
    font-size: 9px;
  }
  
  .card-value {
    font-size: 14px;
  }
}

/* ============================================
   走势图移动端优化 - 显示6列
   ============================================ */
@media (max-width: 768px) {
  
  /* 统计项4列布局 */
  .absence-stats {
    justify-content: flex-start;
  }
  
  .stat-item {
    flex: 0 0 calc(25% - 6px);
  }
  
  /* 走势表格 - 6列完整显示 */
  #trendTable {
    width: 100% !important;
    table-layout: fixed !important;
  }
  
  /* 列宽设置 */
  #trendTable th:nth-child(1), #trendTable td:nth-child(1) { width: 20% !important; }
  #trendTable th:nth-child(2), #trendTable td:nth-child(2) { width: 14% !important; }
  #trendTable th:nth-child(3), #trendTable td:nth-child(3) { width: 13% !important; }
  #trendTable th:nth-child(4), #trendTable td:nth-child(4) { width: 13% !important; }
  #trendTable th:nth-child(5), #trendTable td:nth-child(5) { width: 13% !important; }
  #trendTable th:nth-child(6), #trendTable td:nth-child(6) { width: 13% !important; }
  
  /* 隐藏后4列 */
  #trendTable th:nth-child(n+7),
  #trendTable td:nth-child(n+7) {
    display: none !important;
  }
  
  #trendTable th,
  #trendTable td {
    padding: 8px 3px !important;
    font-size: 11px !important;
  }
  
  #trendTable .badge {
    font-size: 9px !important;
    padding: 2px 4px !important;
    min-width: auto !important;
  }
}

@media (max-width: 480px) {
  /* 统计项3列布局 */
  .stat-item {
    flex: 0 0 calc(33.33% - 6px);
  }
}

/* ============================================
   游戏页面移动端优化
   ============================================ */
@media (max-width: 768px) {
  
  .game-container {
    padding: 0 10px;
  }
  
  .countdown-box {
    padding: 16px;
    margin-bottom: 16px;
  }
  
  .countdown-label {
    font-size: 12px;
  }
  
  .countdown-time {
    font-size: 32px;
  }
  
  .mode-tabs {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  
  .mode-tab {
    padding: 12px;
    font-size: 13px;
  }
  
  .mode-tab:last-child {
    grid-column: 1 / -1;
  }
  
  /* 刮刮卡区域 */
  .scratch-container {
    padding: 20px 12px;
    min-height: 280px;
  }
  
  .num-ball {
    width: 56px;
    height: 56px;
    font-size: 28px;
    border: 2px solid #6366f1;
  }
  
  .sum-ball {
    width: 70px;
    height: 70px;
    font-size: 34px;
  }
  
  .operator-symbol {
    font-size: 20px;
  }
  
  .result-display {
    gap: 8px;
  }
  
  /* 翻牌区域 */
  .flip-grid {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding: 16px;
  }
  
  .flip-icon {
    font-size: 48px;
  }
  
  .flip-value {
    font-size: 48px;
  }
  
  .flip-label {
    font-size: 12px;
  }
  
  .game-info {
    padding: 14px;
  }
  
  .game-period {
    font-size: 16px;
  }
  
  .game-time {
    font-size: 12px;
  }
  
  .action-btn {
    padding: 14px;
    font-size: 15px;
  }
}

@media (max-width: 480px) {
  
  /* 刮刮卡更紧凑 */
  .num-ball {
    width: 50px;
    height: 50px;
    font-size: 24px;
  }
  
  .sum-ball {
    width: 60px;
    height: 60px;
    font-size: 30px;
  }
  
  .operator-symbol {
    font-size: 18px;
  }
  
  .scratch-container {
    min-height: 240px;
  }
  
  /* 翻牌卡片 */
  .flip-icon {
    font-size: 40px;
  }
  
  .flip-value {
    font-size: 40px;
  }
}

/* ============================================
   和值统计页移动端优化
   ============================================ */
@media (max-width: 768px) {
  
  #sumGrid {
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    padding: 12px;
  }
  
  .sum-card .value {
    font-size: 20px;
  }
  
  .sum-card .count {
    font-size: 13px;
  }
  
  .legend {
    padding: 12px;
    gap: 10px;
  }
  
  .legend-item {
    font-size: 11px;
  }
  
  .legend-box {
    width: 18px;
    height: 18px;
  }
}

@media (max-width: 480px) {
  
  #sumGrid {
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
  }
  
  .sum-card .value {
    font-size: 18px;
  }
  
  .sum-card .count {
    font-size: 12px;
  }
}

/* ============================================
   预测页面移动端优化
   ============================================ */
@media (max-width: 768px) {
  
  .predict-stats {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding: 12px;
  }
  
  .predict-stat-card {
    padding: 12px;
  }
  
  .predict-stat-label {
    font-size: 11px;
  }
  
  .predict-stat-value {
    font-size: 20px;
  }
}

/* ============================================
   优化滚动体验
   ============================================ */
@media (max-width: 768px) {
  
  /* 平滑滚动 */
  html {
    scroll-behavior: smooth;
  }
  
  /* 表格容器滚动优化 */
  #tableContainer,
  .table-wrap > div[style*="overflow-x"] {
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
  }
  
  /* 导航栏滚动优化 */
  .top-tabs,
  .sub-tabs {
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
  }
  
  .tab,
  .sub-tab {
    scroll-snap-align: start;
  }
}

/* ============================================
   字体大小优化
   ============================================ */
@media (max-width: 768px) {
  
  /* 防止iOS自动缩放 */
  input,
  select,
  textarea {
    font-size: 16px !important;
  }
  
  /* 其他文字适当缩小 */
  body {
    font-size: 13px;
  }
  
  /* 保持数字清晰 */
  .card-value,
  .table td.digit,
  .stat-value {
    font-variant-numeric: tabular-nums;
  }
}

/* ============================================
   性能优化
   ============================================ */
@media (max-width: 768px) {
  
  /* GPU加速 */
  .card,
  .tab,
  .sub-tab,
  .btn-primary,
  .btn-secondary {
    transform: translateZ(0);
    will-change: transform;
  }
  
  /* 简化动画 */
  @media (prefers-reduced-motion: reduce) {
    * {
      animation-duration: 0.01ms !important;
      transition-duration: 0.01ms !important;
    }
  }
}

/* ============================================
   表单输入优化
   ============================================ */
@media (max-width: 768px) {
  
  input[type="date"],
  input[type="search"],
  input[type="text"],
  select {
    -webkit-appearance: none;
    appearance: none;
    background-color: white;
    border-radius: 8px;
  }
  
  /* 日期选择器优化 */
  input[type="date"]::-webkit-calendar-picker-indicator {
    font-size: 18px;
    cursor: pointer;
  }
}

/* ============================================
   避免内容溢出
   ============================================ */
@media (max-width: 768px) {
  
  /* 防止水平溢出 */
  body {
    overflow-x: hidden;
  }
  
  /* 文字自动换行 */
  .card-value {
    word-break: keep-all;
    overflow-wrap: anywhere;
  }
  
  /* 表格数据不溢出 */
  .table td {
    max-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  
  /* 期号和时间不省略 */
  #resultTable td:nth-child(1),
  #resultTable td:nth-child(3) {
    max-width: none;
    overflow: visible;
  }
}