/* ============================================================
   帝王180 · 全站四端响应式适配
   适配四端：
     · 小程序 webview（≤413px，含 iOS 刘海 / 微信导航栏安全区）
     · 手机（414–640px）
     · 平板（641–1023px）
     · PC 宽屏（≥1024px，由下面 ≥1024 段恢复 style.css 自然值）
   移动优先：base 覆盖小程序/手机，向上逐级增强。
   本文件在 style.css 之后加载，仅覆盖需要响应式调整的类。
   ============================================================ */

/* ============ 通用 ============ */
img, video, iframe, .dw-container, .dw-panel { max-width: 100%; }

/* 微信小程序 webview 安全区（iOS 刘海 / 微信导航栏 / 底部手势区）
   非安全区设备 env() 返回 0，不影响桌面与安卓。 */
#navbar {
  padding-top: env(safe-area-inset-top, 0);
  padding-left: env(safe-area-inset-left, 0);
  padding-right: env(safe-area-inset-right, 0);
}
footer { padding-bottom: calc(2.5rem + env(safe-area-inset-bottom, 0)); }

/* ============ 基础（移动优先，覆盖小程序 ~320px 与手机 ≤640px）============ */
.dw-section { padding: 2rem 0.75rem; }

.page-header { padding: 2.5rem 0.75rem 1.4rem; }
.page-header h1 { font-size: 1.7rem; }
.page-header p { font-size: 0.9rem; }

.dw-panel {
  width: 100%;
  padding: 1.1rem;
  margin: 0 auto;
}

/* 登录卡片（会员中心 auth-area / 后台 login-card）在窄屏铺满 */
#auth-area,
.login-card {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
}

.login-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem 0.75rem;
}

/* 表单：输入框 / 文本域 / 下拉 —— 16px 防止 iOS 聚焦自动缩放；
   min-height 46px 保证手指可点中；padding 不拥挤 */
.dw-form .form-row { margin-bottom: 1rem; }
.dw-form label { font-size: 0.92rem; }
.dw-form input,
.dw-form textarea,
.dw-form select {
  width: 100%;
  font-size: 16px;
  padding: 0.8rem 0.9rem;
  min-height: 46px;
  line-height: 1.4;
}

/* 按钮：窄屏全部满宽、加高，便于单手操作 */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 48px;
  padding: 0.85rem 1rem;
  font-size: 1rem;
}
/* 表单内的提交按钮始终满宽 */
.dw-form .btn { width: 100%; }

/* 登录标签页：三选项等宽，文字不换行避免挤压 */
.auth-tabs {
  display: flex;
  gap: 0.4rem;
  margin-bottom: 1.1rem;
}
.auth-tabs button {
  flex: 1 1 0;
  white-space: nowrap;
  padding: 0.65rem 0.2rem;
  font-size: 0.85rem;
}

/* 提示 / 错误文本在小屏更紧凑 */
.hint-box { padding: 0.7rem; font-size: 0.8rem; margin-bottom: 0.9rem; }
.field-error { font-size: 0.82rem; min-height: 1.1rem; }
.field-hint { font-size: 0.78rem; }

/* 已登录：账号面板在小程序/手机下双列紧凑 */
.account-panel {
  grid-template-columns: 1fr 1fr;
  gap: 0.7rem;
}
.account-stat { padding: 0.8rem; }
.account-stat span { font-size: 1rem; }

/* 个人主页头标在小屏按比例缩放 */
#header-banner { height: 104px !important; }
.header-banner img { object-fit: cover; }

/* 等级/活跃度区在小屏适当收紧 */
.level-head { gap: 0.7rem; }
.level-badge { width: 54px; height: 54px; font-size: 0.95rem; }

/* ============ 全站内页：手机 + 小程序（≤640px） ============
   全站触控尺寸、按钮组堆叠、网格收敛、论坛专项、安全区 */
@media (max-width: 640px) {
  /* 通用可点击元素：最小高度 44px，字号 16px 防 iOS 聚焦缩放 */
  .nav-toggle,
  .forum-sort button,
  .forum-cats button,
  .like-btn,
  .fav-btn,
  .pagination button,
  .emoji-tile,
  .modal-actions .btn,
  .dw-form input,
  .dw-form textarea,
  .dw-form select {
    min-height: 44px;
    font-size: 16px;
  }

  /* hero / toolbar / 弹窗操作区：按钮组竖向铺满，单手好点 */
  .hero-actions { display: flex; flex-direction: column; gap: 0.6rem; }
  .hero-actions .btn { width: 100%; }
  .modal-actions { flex-direction: column; gap: 0.5rem; }
  .modal-actions .btn { width: 100%; }
  .forum-toolbar-right { flex-direction: column; gap: 0.5rem; }
  .forum-toolbar-right .btn { width: 100%; }

  /* 首页主要网格收敛（auto-fit 在极窄屏可能只剩 1 列且过宽，这里定档） */
  .equip-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.6rem; }
  .feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.8rem; }
  .traits-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.5rem; }
  .launcher-bar { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem; }
  .launcher-item { padding: 0.6rem; font-size: 0.8rem; }

  /* 论坛 */
  .forum-cats { flex-wrap: wrap; gap: 0.4rem; }
  .forum-cats button { padding: 0.4rem 0.7rem; font-size: 0.85rem; }
  .post-images { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .post-card { font-size: 0.92rem; }

  /* 弹窗底部避让小程序手势区 */
  .modal-box { padding-bottom: calc(1.4rem + env(safe-area-inset-bottom, 0)); }
}

/* ============ 小程序 / 超小屏（≤413px） ============
   更紧间距、2 列网格、论坛分类横向滚动 */
@media (max-width: 413px) {
  .dw-section { padding: 1.8rem 0.55rem; }
  .dw-panel { padding: 0.9rem; }
  .section-title { font-size: 1.35rem; }
  .page-header { padding: 2rem 0.6rem 1.2rem; }
  .page-header h1 { font-size: 1.45rem; }
  .hero h1 { font-size: 1.6rem; }
  .hero .desc { font-size: 0.85rem; }

  .equip-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; }
  .feature-grid { grid-template-columns: 1fr; gap: 0.7rem; }
  .traits-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.45rem; }
  .launcher-bar { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* 小程序里分类横向滑动，避免换行拥挤 */
  .forum-cats {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 0.3rem;
  }
  .forum-cats button { white-space: nowrap; }
  .post-images { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .hero-actions .btn { padding: 0.8rem 1rem; }
}

/* 横屏手机：收紧 hero */
@media (max-width: 640px) and (orientation: landscape) {
  .hero { padding: 2rem 0.75rem; }
  .hero-logo { height: 90px; }
}

/* ============ 平板（641–1023px）：间距居中 ============ */
@media (min-width: 641px) and (max-width: 1023px) {
  .dw-container { max-width: 92%; }
  .dw-section { padding: 3rem 1rem; }
  .dw-panel { padding: 1.6rem; }
  .page-header { padding: 3rem 1rem 1.8rem; }
}

/* ============ 手机横屏 / 大屏手机（≥480px）============ */
@media (min-width: 480px) {
  .dw-panel { padding: 1.4rem; }
  #auth-area,
  .login-card { max-width: 440px; }
  .login-wrap { padding: 1.2rem 1rem; }
  .account-panel { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
  .auth-tabs button { font-size: 0.92rem; padding: 0.65rem 0.4rem; }
}

/* ============ 平板（≥768px）============ */
@media (min-width: 768px) {
  .dw-section { padding: 3rem 1rem; }
  .page-header { padding: 3.5rem 1rem 2rem; }
  .page-header h1 { font-size: 2.2rem; }
  .page-header p { font-size: 1rem; }
  .dw-panel { padding: 1.8rem; }
  #auth-area,
  .login-card { max-width: 520px; }
  .login-wrap { padding: 1.5rem 1rem; }
  .dw-form .form-row { margin-bottom: 1.2rem; }
  .dw-form input,
  .dw-form textarea,
  .dw-form select { padding: 0.75rem 0.95rem; }
  .auth-tabs button { padding: 0.7rem 0.6rem; font-size: 1rem; }
  .btn { font-size: 1rem; }
}

/* ============ PC 宽屏（≥1024px）：恢复桌面自然值 ============ */
@media (min-width: 1024px) {
  .dw-section { padding: 4rem 1rem; }
  .dw-panel { padding: 2.2rem; }
  .page-header { padding: 4rem 1rem 2.4rem; }
  .page-header h1 { font-size: 2.4rem; }
  #auth-area,
  .login-card { max-width: 560px; }
  .login-wrap { padding: 2rem 1rem; }
  /* PC 上非表单按钮不必满宽，更精致；表单提交按钮仍满宽 */
  .btn { width: auto; min-width: 150px; }
  .dw-form .btn { width: 100%; }
  .dw-form input,
  .dw-form textarea,
  .dw-form select { font-size: 1rem; }
  .account-panel { gap: 1rem; }
  .account-stat { padding: 1rem; }
  .account-stat span { font-size: 1.1rem; }
  /* 桌面网格恢复 style.css 的自然 auto-fit 响应 */
  .equip-grid,
  .feature-grid,
  .traits-grid,
  .launcher-bar { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
}

/* 超宽屏（≥1440px）：面板不要无限放大，保持阅读舒适 */
@media (min-width: 1440px) {
  #auth-area,
  .login-card { max-width: 600px; }
}

/* 减少动态效果时，关闭面板内轻微动画，保证低端机/小程序流畅 */
@media (prefers-reduced-motion: reduce) {
  .dw-panel, .btn, .auth-tabs button { transition: none; }
}