/* ========================================
   响应式设计 - 移动端适配
   ======================================== */

/* 平板端 */
@media (max-width: 992px) {
  .container { max-width:100%; }
  .header .container { flex-wrap:wrap; gap:15px; }
  .main-nav { order:3; width:100%; overflow-x:auto; }
  .main-nav ul { gap:0; }
  .main-nav a { padding:6px 12px; font-size:13px; white-space:nowrap; }
  .header-search { margin-left:auto; }
  .header-search input { width:160px; }
  
  .hero-banner .container { flex-direction:column; gap:30px; }
  .hero-content h2 { font-size:32px; }
  .hero-side { width:100%; }
  .hero-stats { gap:25px; }
  .stat-item strong { font-size:28px; }
  
  .version-grid { grid-template-columns:repeat(3,1fr); }
  
  .guide-layout { flex-direction:column; }
  .guide-side { width:100%; }
  .guide-featured { flex-direction:column; }
  .gf-img { width:100%; height:160px; }
  
  .ranking-grid { grid-template-columns:1fr; }
  
  .newbie-steps { flex-direction:column; }
  .step-arrow { transform:rotate(90deg); }
  
  .footer-top { grid-template-columns:repeat(2,1fr); }
  
  .news-layout { flex-direction:column; }
  .news-side { width:100%; }
  .news-article-item { flex-direction:column; }
  .na-img { width:100%; height:160px; }
  
  .article-layout { flex-direction:column; }
  .article-side { width:100%; }
  
  .sitemap-grid { grid-template-columns:repeat(2,1fr); }
  
  .server-table { font-size:12px; }
  .server-table th, .server-table td { padding:8px 10px; }
  .col-feature { display:none; }
}

/* 手机端 */
@media (max-width: 768px) {
  .top-bar { font-size:11px; }
  .top-date { display:none; }
  
  .logo h1 { font-size:18px; }
  .logo-icon { font-size:22px; }
  .logo-desc { display:none; }
  .header-search input { width:120px; padding:6px 10px; font-size:12px; }
  .header-search button { padding:6px 10px; }
  
  .hero-banner { padding:30px 0; }
  .hero-content h2 { font-size:24px; }
  .hero-content > p { font-size:14px; }
  .hero-stats { gap:15px; }
  .stat-item strong { font-size:22px; }
  .stat-item span { font-size:11px; }
  .hero-btn { padding:10px 25px; font-size:14px; }
  
  .version-nav { padding:30px 0; }
  .section-title h3 { font-size:18px; }
  .version-grid { grid-template-columns:repeat(2,1fr); gap:10px; }
  .version-item { padding:15px 10px; }
  .ver-icon { font-size:28px; }
  .version-item h4 { font-size:13px; }
  
  .server-list-section { padding:20px 0; }
  .server-filter { gap:6px; }
  .filter-tag { padding:4px 10px; font-size:11px; }
  
  /* 手机端表格转卡片 */
  .server-table thead { display:none; }
  .server-table, .server-table tbody, .server-table tr, .server-table td { display:block; width:100%; }
  .server-table tr { padding:12px; border-bottom:1px solid var(--border); }
  .server-table td { padding:4px 0; border:none; }
  .col-rank { width:auto; text-align:left; margin-bottom:5px; }
  .col-action { margin-top:8px; }
  
  .guide-section { padding:30px 0; }
  .gf-content h4 { font-size:16px; }
  .gf-content p { font-size:13px; }
  .guide-item { padding:12px; }
  .gi-icon { width:40px; height:40px; font-size:20px; }
  .gi-content h5 { font-size:14px; }
  
  .ranking-section { padding:30px 0; }
  
  .newbie-section { padding:30px 0; }
  .step-item { padding:20px 15px; }
  .step-icon { font-size:30px; }
  
  .footer-top { grid-template-columns:1fr; gap:20px; }
  
  .page-header { padding:25px 0; }
  .ph-content h2 { font-size:22px; }
  
  .filter-row { gap:6px; }
  .filter-btn, .filter-btn2, .sort-btn { padding:5px 10px; font-size:12px; }
  
  .server-card { flex-wrap:wrap; padding:12px; gap:10px; }
  .sc-rank { width:30px; }
  .sc-online { min-width:60px; }
  .sc-online strong { font-size:16px; }
  
  .news-cat-nav { gap:6px; }
  .news-cat-btn { padding:6px 12px; font-size:12px; }
  
  .article-main { padding:15px; }
  .article-title { font-size:20px; }
  .article-body { font-size:14px; }
  .article-body h3 { font-size:17px; }
  
  .comment-item { padding:10px; }
  .c-avatar { width:32px; height:32px; font-size:14px; }
  
  .sitemap-grid { grid-template-columns:1fr; }
  
  .submit-links { flex-direction:column; align-items:center; }
  .submit-btn { width:200px; text-align:center; }
  
  .back-top { bottom:15px; right:15px; width:38px; height:38px; font-size:16px; }
}

/* 小屏手机 */
@media (max-width: 480px) {
  .hero-content h2 { font-size:20px; }
  .hero-stats { flex-wrap:wrap; }
  .stat-item { flex:1; min-width:80px; }
  
  .version-grid { grid-template-columns:1fr; }
  
  .section-title { flex-direction:column; align-items:flex-start; gap:5px; }
  .more-link { margin-left:0; }
  
  .header .container { gap:8px; }
  .main-nav a { padding:5px 8px; font-size:12px; }
}