/* ============================================
   谁是大诗豪 — 移动端响应式适配
   5个断点: xs(<360) / sm(360-480) / md(480-768) / lg(768-1024) / xl(>1024)
   ============================================ */

/* ===== XS: 小手机 (<360px) ===== */
@media (max-width: 359px) {
  html { font-size: 14px; }

  .top-bar { padding: var(--space-2) var(--space-3); }
  .page { padding: var(--space-3); }

  .poet-card { padding: var(--space-3); gap: var(--space-3); }
  .poet-card__avatar { width: 44px; height: 44px; font-size: var(--text-lg); }

  .modal { padding: var(--space-4); margin: var(--space-2); }
}

/* ===== SM: 主流手机 (360-480px) — 默认样式 ===== */
@media (min-width: 360px) and (max-width: 479px) {
  /* 所有默认样式适配此范围 */
}

/* ===== MD: 大屏手机 (480-768px) ===== */
@media (min-width: 480px) {
  html { font-size: 17px; }

  .poet-card__avatar { width: 64px; height: 64px; font-size: var(--text-2xl); }
  .page { padding: var(--space-4) var(--space-6); }
}

/* ===== LG: 平板 (768-1024px) ===== */
@media (min-width: 768px) {
  :root {
    --max-width: 680px;
  }

  html { font-size: 18px; }

  .page { padding: var(--space-6) var(--space-8); }

  /* 诗人卡片两列布局 */
  .poets-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
  }

  .poets-grid .poet-card {
    margin-bottom: 0;
  }

  /* 答题区域更宽 */
  .game-content {
    max-width: 600px;
    margin: 0 auto;
  }
}

/* ===== XL: 桌面 (1024px+) ===== */
@media (min-width: 1024px) {
  :root {
    --max-width: 780px;
  }

  html { font-size: 18px; }

  .bottom-nav {
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  }

  .poets-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ===== 触摸优化 ===== */
@media (hover: none) and (pointer: coarse) {
  .poet-card:hover {
    border-color: var(--paper-dark);
    box-shadow: var(--shadow-sm);
  }
}

/* ===== 安全区域 (iPhone X+) ===== */
@supports (padding: env(safe-area-inset-bottom)) {
  .bottom-nav {
    padding-bottom: env(safe-area-inset-bottom);
  }

  .page {
    padding-bottom: calc(var(--nav-height) + var(--space-4) + env(safe-area-inset-bottom));
  }

  .modal {
    padding-bottom: calc(var(--space-6) + env(safe-area-inset-bottom));
  }
}

/* ===== 横屏优化 ===== */
@media (orientation: landscape) and (max-height: 500px) {
  .top-bar { height: 44px; padding: var(--space-2) var(--space-4); }
  .bottom-nav { height: 44px; }
  .page { padding-bottom: calc(44px + var(--space-2)); }

  .poets-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ===== 减少动画 ===== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ===== 打印 ===== */
@media print {
  .bottom-nav, .top-bar, .global-loader { display: none; }
  body { background: white; }
  .app-container { max-width: none; }
}