/* 移动端深度打磨补丁
 * 适用 4 个页面: index.html / scroll.html / category.html / simulator.html
 * 改进点: 字号/间距/触摸区域/底部 tab/防误触/动效
 * 包含方式: 任何 HTML 头部加 <link rel="stylesheet" href="mobile-polish.css">
 */

/* === 1. 触摸区域标准化 === */
.btn, .option, .twin, .card, .nav-link, .tab {
  min-height: 44px;
  -webkit-tap-highlight-color: rgba(0,0,0,0.05);
  touch-action: manipulation;
}

/* === 2. 字体优化 (防 iOS 缩放) === */
input, textarea, select, button {
  font-size: 16px !important;
}

/* === 3. 移动端字号/间距 === */
@media (max-width: 768px) {
  body { font-size: 14px; line-height: 1.6; }
  h1 { font-size: 28px !important; }
  h2 { font-size: 22px !important; }
  h3 { font-size: 18px !important; }
  .container { padding: 12px !important; max-width: 100vw; }
  .card { padding: 16px !important; margin-bottom: 12px; }
  .section-title { font-size: 24px !important; margin: 24px 0 16px; }

  /* 4. 导航变简洁 */
  .nav-links { display: none; }
  .mobile-menu { display: flex !important; }

  /* 5. 单列布局 */
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr !important; gap: 12px !important; }

  /* 6. 卡片更紧凑 */
  .twin-row { flex-direction: column; gap: 8px; }
  .twin { padding: 12px; }
  .twin .name { font-size: 16px; }

  /* 7. 报告区滚动流畅 */
  .report { padding: 20px 16px !important; }
  .report-section { padding: 16px !important; margin-bottom: 16px; }

  /* 8. 顶部固定 + 底部 tab 留出空间 */
  body { padding-bottom: 60px; }
  .top-bar { position: sticky; top: 0; z-index: 100; backdrop-filter: blur(10px); }
}

/* === 9. 底部 tab bar (移动端) === */
.bottom-tab {
  display: none;
}
@media (max-width: 768px) {
  .bottom-tab {
    display: flex;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    background: #FFD500;
    border-top: 2px solid #0A0A0A;
    box-shadow: 0 -4px 12px rgba(0,0,0,0.15);
    z-index: 1000;
    padding: 6px 0 calc(6px + env(safe-area-inset-bottom, 0px));
  }
  .bottom-tab a {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 8px 4px;
    color: #0A0A0A;
    text-decoration: none;
    font-size: 11px;
    font-weight: 600;
  }
  .bottom-tab a.active { color: #D62828; }
  .bottom-tab a span.icon { font-size: 20px; margin-bottom: 2px; }
}

/* === 10. 沉浸式滚动 === */
html { scroll-behavior: smooth; overscroll-behavior: contain; }

/* === 11. 加载态优化 === */
.skeleton {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: 4px;
}
@keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }

/* === 12. 暗黑模式(自动跟随系统) === */
@media (prefers-color-scheme: dark) {
  :root {
    --paper-yellow: #1a1a1a;
    --ink: #FFD500;
    --cinnabar: #FF6B6B;
    --paper-cream: #2a2a2a;
    --text-primary: #FFD500;
    --text-secondary: #B8985A;
  }
  body { background: #0a0a0a; color: #FFD500; }
  .card, .report-section { background: #1a1a1a; border-color: #FFD500; }
}

/* === 13. iOS 橡皮筋滚动禁用 === */
@supports (-webkit-touch-callout: none) {
  body { -webkit-overflow-scrolling: touch; }
}

/* === 14. 大字号模式 (辅助功能) === */
@media (min-width: 768px) and (max-width: 1024px) {
  .container { max-width: 90vw; }
  .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr) !important; }
}

/* === 15. 超小屏 (iPhone SE 1st) === */
@media (max-width: 375px) {
  body { font-size: 13px; }
  h1 { font-size: 24px !important; }
  .bottom-tab a { font-size: 10px; }
}