/**
 * 1 底图：固定铺满手机屏（可拉变形）— 只用 #bgFull
 * 2 top.png：966×1600 原尺寸，scene 正中
 * 3 文字：叠在 top.png 盒子里，z-index 最高
 */
 :root {
  /*
   * 页面「逻辑画布」宽高（单位：px）
   * 整页按这个尺寸排版，再整体缩放适配不同手机屏幕；一般不用改 1080×1920
   */
  --design-w: 1080;
  --design-h: 1920;
  /* 由 app.js 根据窗口大小自动计算，不要手改 */
  --scale: 1;

  /*
   * 第 2 层 uploads/top.png 的显示尺寸（必须和源图一致）
   * 固定 966×1600：不放大、不缩小，只在画布正中摆放
   */
  --top-w: 1080px;
  --top-h: 1700px;

  /*
   * 【第 1 层 背景图 img/ 随机】整屏拉伸，位置在这里调
   * --bg-pos-x / --bg-pos-y：显示哪一块（center | top | bottom | 20% | 30px 等）
   * 例：顶栏要对齐云朵 → bg-pos-y: top 或 15%
   * 例：人物居中 → bg-pos-x: center; bg-pos-y: center
   */
  --bg-pos-x: center;
  --bg-pos-y: center;
  /* 一般保持 100% 100% 满屏；若只想裁切不拉变形可改成 cover（需改 .bg-full 里 background-size） */
  --bg-size-x: 100%;
  --bg-size-y: 100%;

  /*
   * 【第 2 层 顶图 uploads/top.png】相对屏幕正中的偏移
   * 0 = 严格居中；正数 = 向右/向下；负数 = 向左/向上
   * 例：顶图整体往上贴 → --top-offset-y: -80px
   * 例：顶图略向右 → --top-offset-x: 20px
   */
  --top-offset-x: 0px;
  --top-offset-y: -80px;

  /*
   * 文字字号（单位 px，按上面 1080 宽设计稿）
   * 手机上看会随整页 scale 一起缩放；改大改小只影响对应那一块文字
   */
  /* 用户蓝气泡（已隐藏不用，保留变量以防以后开启） */
  --font-user-bubble: 50px;
  /* 白卡片大标题：「男人一年翻身完整实操方案…」 */
  --font-card-title: 52px;
  /* 下面 1～10 条列表正文字号 */
  --font-tips-list: 52px;
  /* 第 7 条红虚线框里的字（如「云道管家」），通常与列表一致或略调 */
  --font-hl-box: 52px;

  /*
   * 【大标题 与 第1条列表（slot1）之间的间距】
   * 改大 → 标题和「1.不沉迷于女色。」离得更远
   * 改小 → 更贴在一起（单位 px，会随整页一起缩放）
   */
  --title-list-gap: 8px;

  /*
   * 【每条列表行与行之间的间距】如 1 和 2、2 和 3…
   * 对应 slot1～slot10 每条之间的空隙
   */
  --tips-line-gap: 5px;

  /*
   * 文字层在 uploads/top.png（966×1600）盒子里的位置
   * 单位用 % 表示相对 top 图宽高的比例，改大/改小会整体挪动文字区
   */
  /* 文字区域距离 top 图顶边的距离。越大越往下（蓝气泡+标题+列表整体下移） */
  --text-pad-top: 25.5%;
  /* 文字区域距离 top 图左边的距离。越大内容越靠右 */
  --text-pad-left: 5%;
  /* 文字区域距离 top 图右边的距离。越大内容越靠左、可用宽度变窄 */
  --text-pad-right: 5%;
  /* 文字区域距离 top 图底边的距离。越大列表底部留白越多、中间区域变矮 */
  --text-pad-bottom: 6%;
  /*
   * 【右边空一大块就是改这里】
   * 标题+列表区域右侧内边距（占文字区宽度的百分比）
   * 数值越大 → 文字越窄、右边空白越多（以前 36% 会空很多）
   * 数值越小 → 文字更靠右、空白变少（建议 12%～22%，不压剪影即可）
   */
  --text-right-inset: 1%;
  /* 蓝色用户气泡与下方标题/列表之间的间距（固定像素） */
  --bubble-margin-bottom: 12px;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #000;
  font-family: -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
}

/* 第 1 层：整手机屏拉伸底图 */
.bg-full {
  position: fixed;
  inset: 0;
  z-index: 0;
  background-color: #333;
  background-size: var(--bg-size-x) var(--bg-size-y);
  background-position: var(--bg-pos-x) var(--bg-pos-y);
  background-repeat: no-repeat;
}

.fit-root {
  position: fixed;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  pointer-events: none;
}

.scene {
  position: relative;
  width: calc(var(--design-w) * 1px);
  height: calc(var(--design-h) * 1px);
  transform: scale(var(--scale));
  transform-origin: center center;
}

/* 第 2 层：top 居中 + 可调偏移 */
.layer-mid {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--top-w);
  height: var(--top-h);
  margin-left: calc(var(--top-w) / -2 + var(--top-offset-x));
  margin-top: calc(var(--top-h) / -2 + var(--top-offset-y));
  z-index: 10;
}

.layer-mid-img {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--top-w);
  height: var(--top-h);
  display: block;
  object-fit: fill;
  z-index: 1;
}

/* 第 3 层：文字压在 top.png 上 */
.text-layer {
  position: absolute;
  z-index: 20;
  left: var(--text-pad-left);
  right: var(--text-pad-right);
  top: var(--text-pad-top);
  bottom: var(--text-pad-bottom);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  pointer-events: none;
}

/* 已不用：用户问题蓝气泡（top 图自带） */
.user-bubble {
  display: none !important;
  flex-shrink: 0;
  align-self: flex-end;
  max-width: 88%;
  margin-bottom: var(--bubble-margin-bottom);
  padding: 12px 20px;
  background: #2f7cf6;
  color: #fff;
  font-size: var(--font-user-bubble);
  line-height: 1.45;
  border-radius: 16px 16px 4px 16px;
}

.card-text {
  flex: 1;
  min-height: 0;
  padding-right: var(--text-right-inset);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.card-title {
  font-size: var(--font-card-title);
  font-weight: 700;
  color: #111;
  line-height: 1.35;
  margin-bottom: var(--title-list-gap);
  flex-shrink: 0;
}

.tips-list {
  list-style: none;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.tips-list li {
  font-size: var(--font-tips-list);
  line-height: 1.4;
  color: #1a1a1a;
  margin-bottom: var(--tips-line-gap);
  word-break: break-word;
}

.tips-list li .hl-box {
  font-size: var(--font-hl-box);
  display: inline-block;
  border: 2px dashed #e53935;
  border-radius: 4px;
  padding: 0 6px;
  color: #c62828;
  font-weight: 600;
}

@media (min-width: 520px) {
  .scene {
    border-radius: 12px;
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.45);
  }
}