/* ============================================
   Background Layers
   多层背景：上一张图 + 网格 + 文本碎片 + 噪点
   ============================================ */

body {
  background: var(--bg-deepest);
}

/* ---------- 残留背景容器（图残影多张叠加） ---------- */
.bg-layer {
  position: fixed;
  inset: 0;
  z-index: var(--z-bg);
  background-color: transparent;
  pointer-events: none;
  overflow: hidden;
  /* v36.39 · 不再设自己的大背景图（避免覆盖 .bg-residue-image 子元素） */
  /* 大背景图模式由 updateBackground() 通过 background-image 设置（兼容老逻辑） */
}

.bg-layer.is-active {
  /* 兼容老 is-active 状态：如有 background-image 仍然显示 */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  filter: blur(24px) saturate(0.9) brightness(1.05);
  opacity: 0.55;
  transform: scale(1.12);
  transition: opacity 600ms var(--ease-out),
    background-image 600ms var(--ease-out);
}

/* ---------- 网格线（纸感数据感） ---------- */
.bg-grid {
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-bg) + 2);
  background-image:
    linear-gradient(to right, rgba(40, 30, 10, 0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(40, 30, 10, 0.05) 1px, transparent 1px);
  background-size: 64px 64px;
  background-position: -1px -1px;
  pointer-events: none;
  opacity: 0.5;
}

/* ---------- 文本碎片（散落的关键词） ---------- */
.bg-fragments {
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-bg) + 3);
  pointer-events: none;
  overflow: hidden;
}

.bg-fragment {
  position: absolute;
  font-family: var(--font-cn);
  font-size: 14px;
  color: var(--text-tertiary);
  white-space: nowrap;
  opacity: 0.45;
  user-select: none;
  text-shadow: 0 0 4px rgba(255, 255, 255, 0.6);
}

.bg-fragment.is-keyword {
  font-family: var(--font-mono);
  color: var(--accent);
  font-size: 11px;
  letter-spacing: 0.1em;
  opacity: 0.5;
}

.bg-fragment.is-faded {
  opacity: 0.08;
}

@keyframes drift {
  0% { transform: translate(0, 0) rotate(var(--rot, 0deg)); }
  50% { transform: translate(2px, -3px) rotate(calc(var(--rot, 0deg) + 1deg)); }
  100% { transform: translate(0, 0) rotate(var(--rot, 0deg)); }
}

.bg-fragment {
  animation: drift 8s ease-in-out infinite;
}

/* ---------- 噪点纹理 ---------- */
.bg-noise {
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-bg) + 4);
  pointer-events: none;
  opacity: 0.06;
  background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-size: 200px 200px;
  mix-blend-mode: overlay;
}

/* ============================================
   v36.39 · 残留堆积 · 玩家上传原图残影
   - 每个 .bg-residue-image 是上传原图的缩略图
   - 模糊 10px（保留主体轮廓，可识别）
   - 透明度 0.16-0.20（多个叠加形成沉积感）
   - 随机位置 + 随机旋转
   - 由 residue-bg.js 动态追加
   ============================================ */
.bg-residue-image {
  position: absolute;
  filter: blur(3px);
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.4);
  pointer-events: none;
  transition: opacity 800ms var(--ease-out);
  /* opacity 由 JS 设置（0.16-0.20） */
  /* transform 由 JS 设置（随机旋转 ±8°） */
}

/* v36.40 · 残影渐隐（超过上限时，最老的开始淡出，800ms 后由 JS 从 DOM 删除） */
.bg-residue-image.is-fading {
  opacity: 0 !important;
}

/* ============================================
   v36.39 · 残留堆积 · 用户原文本残影
   - 每个 .bg-residue-text 是用户输入框的完整原文本
   - 字号 13-14px（比预定义标签大，可读）
   - 模糊 0.4-0.6px（轻微虚化不影响阅读）
   - 颜色 rgba(0,0,0,0.2-0.24)（深灰"打字痕迹"）
   - 极轻白底（让文字更聚拢）
   - 由 residue-bg.js 动态追加
   ============================================ */
.bg-residue-text {
  position: absolute;
  font-family: var(--font-mono, 'Courier New', monospace);
  font-size: 13px;
  color: rgba(0, 0, 0, 0.22);
  background: rgba(255, 255, 255, 0.18);
  padding: 12px 14px;
  border-radius: 4px;
  letter-spacing: 0.05em;
  line-height: 1.7;
  white-space: pre-wrap;
  word-break: break-word;
  filter: blur(0.5px);
  transform: rotate(var(--rot, 0deg));
  pointer-events: none;
  user-select: none;
  /* 漂浮动效：8-14s 慢漂 */
  animation: drift 14s ease-in-out infinite;
}

/* 文字残影的层级：比固定标签高（更新鲜） */
.bg-fragments .bg-residue-text {
  z-index: 2;
  text-shadow: 0 0 2px rgba(255, 255, 255, 0.5);
}