/* ==========================================================================
   mobile.css — 强制「手机版」布局
   不再做桌面/网页版适配：以下规则在所有屏幕宽度下都生效。
   目标：每个页面的选项都统一为「每行两个（两列）」。
   叠加在 styles_dark 之后，不改动框架原文件，可整体回滚。
   ========================================================================== */

/* 1) 原本就是网格的页面：style 的 3 列、soul「语音」的 4 列 → 统一两列 */
.bi__content .h__grid {
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 10px !important;
}

/* 2) 横向轮播（种族 / 身材 / 胸 / 臀 / 发型 / 关系 / summary 回顾）
      → 拆成两列网格平铺，所有选项一次可见，无需滑动 */
.bi__carousel {
  width: 100% !important;
  max-width: 640px !important;
  margin: 0 auto !important;
  overflow: visible !important;
}
.bi__carousel .bj {
  display: block !important;
  height: auto !important;
}
.bi__carousel .bj__content {
  position: static !important;
  width: 100% !important;
  height: auto !important;
  padding: 0 !important;
}
.bi__carousel .bj__slider {
  position: static !important;
  left: auto !important;
  transform: none !important;          /* 覆盖内联 translateX(...) */
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 10px !important;
  width: 100% !important;
  height: auto !important;
}
/* 卡片原本是固定宽 flex:0 0 202px，改成铺满网格单元格 */
.bi__carousel .bi__checkbox-block-wrapper {
  flex: initial !important;
  width: 100% !important;
}

/* 3) 标题字号自适应，替代写死的 40px */
.bi__content .h__header .align-center {
  font-size: clamp(26px, 7vw, 40px) !important;
  line-height: 1.15;
}

/* 4) 年龄滑块防溢出：内联 width:634px 在 JS 生效前不撑破页面 */
.i {
  max-width: 100%;
  overflow: hidden;
}
.i__track,
.i__track--active {
  max-width: 100% !important;
}

/* 5) 顶部步骤导航：图标过多时可横向滚动，避免挤压 */
.bk__content {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.bk__content::-webkit-scrollbar {
  display: none;
}
.bk__item {
  flex: 0 0 auto;
}

/* 6) 底部固定按钮适配全面屏底部安全区 */
.bi__footer {
  padding-bottom: calc(12px + env(safe-area-inset-bottom));
}