/* ============================================================================
 * 无聊网 · 响应式增强样式（移动端可读性 + 桌面端体验）
 * 用法：在各页 <head> 内联 <style> 之后用 <link> 引入本文件，
 *      媒体查询规则按源码顺序自然覆盖内联同名选择器。
 * 覆盖点：动态页头部 site-header / 静态页导航 .nav / 卡片 / 商品 / 英雄区 / 按钮。
 * ========================================================================== */

/* ---------- 全局基线（所有屏幕） ---------- */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
img, canvas { max-width: 100%; height: auto; }
body { word-break: break-word; -webkit-font-smoothing: antialiased; }

/* ===========================================================================
 * 移动端 / 平板（≤ 768px）
 * =========================================================================== */
@media (max-width: 768px) {

  /* 动态页头部：logo 与导航分行，导航改为横向滚动，避免 5 个链接溢出挤成一团 */
  .site-header {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding: 12px 16px;
  }
  .site-header .logo { font-size: 18px; }
  .site-header .logo .sub { font-size: 12px; margin-left: 6px; }

  .nav-links {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    width: 100%;
    padding-bottom: 4px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .nav-links::-webkit-scrollbar { display: none; }
  .nav-links a { margin-left: 0; margin-right: 16px; white-space: nowrap; font-size: 14px; }
  #wl-user-slot { margin-left: 0; flex: none; }

  /* 正文基线放大，提升小屏可读性 */
  body { font-size: 16px; line-height: 1.75; }

  /* 静态页头部 banner：缩边距、保持居中 */
  header { padding: 22px 16px; }

  /* 静态页导航文字行：可换行、居中、更紧凑 */
  .nav { padding: 12px 12px 0; font-size: 13px; line-height: 2; }
  .nav a { margin: 0 6px; }

  /* 内容区：收紧左右边距，加大卡片间距 */
  main { padding: 16px 14px 36px; gap: 14px; }
  .card { padding: 16px 14px; border-radius: 14px; }
  .card h2 { font-size: 16px; }

  /* 原本 12px 的说明文字放大，避免看不清 */
  .note, .ph { font-size: 13.5px; line-height: 1.75; }

  /* 商品 / 特性：移动端两列 */
  .goods { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .good { padding: 12px; }
  .good .name { font-size: 13px; min-height: 38px; }
  .good .price { font-size: 14px; }

  .feat { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .feat .d { font-size: 12px; }

  /* 双栏区在窄屏堆叠为单栏 */
  .two { grid-template-columns: 1fr; }

  /* 按钮行：更紧凑、更易点 */
  .row { gap: 8px; }
  .act, .ghost, a.act, button.act, button.ghost {
    font-size: 15px; padding: 11px 18px;
  }
}

/* ===========================================================================
 * 小屏手机（≤ 480px）
 * =========================================================================== */
@media (max-width: 480px) {

  .site-header { padding: 10px 12px; }
  .site-header .logo { font-size: 17px; }
  .nav-links a { font-size: 14px; }

  main { padding: 12px 10px 30px; gap: 12px; }
  .card { padding: 14px 12px; border-radius: 12px; }
  .card h2 { font-size: 15.5px; }

  /* 英雄区（木鱼）缩放，保证一屏看清 */
  .hero { padding: 22px 12px 18px; }
  .muyu-btn { font-size: 86px; }
  .counter { font-size: 16px; }
  .counter b { font-size: 26px; }
  .quote { font-size: 15px; line-height: 1.6; }
  .hint { font-size: 12.5px; }
  .mine { font-size: 13.5px; }
  .t1 { font-size: 13px; }

  /* CTA 在小屏占满整行，点击区域更大 */
  .row { flex-direction: column; }
  .row .act, .row .ghost, .row a.act, .row button.act, .row button.ghost {
    width: 100%; box-sizing: border-box; text-align: center;
  }

  /* 统计块 */
  .stat { gap: 8px; }
  .stat .box { min-width: 0; padding: 12px 10px; }
  .stat .num { font-size: 22px; }

  /* 无聊按钮页大按钮 */
  .btn { font-size: 20px; padding: 22px 34px; }

  /* 404 */
  .big { font-size: 76px; }
  h1 { font-size: 21px; }
  p { font-size: 14px; }

  /* 联系表单输入框：16px 防止 iOS 聚焦缩放 */
  input, textarea { font-size: 16px; padding: 12px; }
  button.act { font-size: 15px; padding: 12px 22px; }
}

/* ===========================================================================
 * 大屏（≥ 1100px）桌面端体验增强
 * =========================================================================== */
@media (min-width: 1100px) {
  body { font-size: 16px; }
  main { max-width: 920px; }
  .muyu-btn { font-size: 104px; }
  .hero { padding: 38px 24px 32px; }
  .goods { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
  .card { padding: 24px; }
  .card h2 { font-size: 18px; }
  .feat { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
}