/* ════════════════════════════════════════════════════════════════
   B 层 · 用户锁定 10 方向（叠加层，绝不改动 arch.js 核心）
   设计原则：所有节点由 b-layer.js 动态注入；只读写 arch 生成的 DOM，
   单点失败不影响 A 层（四层架构 9 项）。
   ════════════════════════════════════════════════════════════════ */

:root{
  --bl-tone: #c9a14a;          /* 洞天主色，由地理锚定切换 */
  --bl-scent: transparent;      /* 嗅觉暗示色，由 zone hover 切换 */
}

/* —— 通用·古朴控件条（地理锚定 / 平行道统） —— */
.bl-bar{
  position: fixed;
  display: flex; gap: 6px; flex-wrap: wrap;
  padding: 6px 8px;
  background: rgba(28,22,16,.72);
  border: 1px solid rgba(201,161,74,.45);
  border-radius: 10px;
  backdrop-filter: blur(4px);
  z-index: 9999; pointer-events: auto;
  font: 12px/1.4 "Songti SC","STSong",serif;
  color: #e9dcc0;
  box-shadow: 0 4px 18px rgba(0,0,0,.35);
}
.bl-bar.bl-dongtian-bar{ position:fixed !important; left:14px; bottom:14px; width:52px; min-height:34px; display:block; overflow:visible; z-index:10000 !important; }
.bl-ditu-toggle{ display:block; width:100%; cursor:pointer; background:none; border:0; color:#e9dcc0; padding:5px 2px; font:inherit; }
.bl-ditu-panel{ display:none; position:absolute; left:0; bottom:46px; width:min(430px,82vw); max-height:62vh; overflow:auto; padding:14px; background:rgba(28,22,16,.96); border:1px solid rgba(201,161,74,.55); border-radius:10px; box-shadow:0 8px 30px rgba(0,0,0,.55); }
.bl-ditu-open .bl-ditu-panel{ display:block; }
.bl-ditu-title{ color:#e8c979; font:16px/1.5 "STKaiti","KaiTi",serif; text-align:center; margin-bottom:10px; }
.bl-ditu-group{ margin:8px 0 12px; }
.bl-ditu-group-title{ color:#9e8b67; font-size:12px; margin-bottom:6px; border-bottom:1px solid rgba(201,161,74,.25); padding-bottom:4px; }
.bl-ditu-group .bl-chip{ display:inline-block; margin:3px; }
.bl-ditu-bar .bl-chip{ background:rgba(201,161,74,.08); }
.bl-dongtian-bar>.bl-chip{ display:block; margin:5px 0; }

#bl-mountain-backdrop {
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background-color:#202018; background-size:cover; background-position:center;
  background-repeat:no-repeat; transition:background-image .4s ease;
}

/* 所选山水直接覆盖首页长卷，关闭原绿色氛围画布 */
body.bl-mountain-active .arch-scroll-content,
body.bl-mountain-active #arch-scroll-layer,
body.bl-mountain-active .arch-handscroll {
  background-image:var(--bl-mountain-bg) !important;
  background-size:cover !important;
  background-position:center center !important;
  background-repeat:no-repeat !important;
}
body.bl-mountain-active #jing-ambient,
body.bl-mountain-active #jing-flow,
body.bl-mountain-active #jing-yy { opacity:0 !important; visibility:hidden !important; }
body.bl-mountain-active .arch-scroll-content { background-color:transparent !important; }
body.bl-mountain-active .arch-root { background:transparent !important; }
body.bl-mountain-active #arch-gen { background-image:var(--bl-mountain-bg) !important; background-size:cover !important; background-position:center center !important; background-repeat:no-repeat !important; }
body.bl-mountain-active #bl-mountain-backdrop { z-index:0 !important; }
.bl-bar .bl-bar-label{ align-self:center; opacity:.7; margin-right:2px; }
.bl-chip{
  cursor: pointer; user-select: none;
  padding: 3px 9px; border-radius: 999px;
  border: 1px solid rgba(201,161,74,.4);
  background: rgba(201,161,74,.08);
  color: #e9dcc0; transition: all .2s;
  white-space: nowrap;
}
.bl-chip:hover{ background: rgba(201,161,74,.22); }
.bl-chip.bl-on{
  background: var(--bl-tone); color: #1c1610; border-color: var(--bl-tone);
  font-weight: 600;
}

/* —— 共卷·匿名印迹 —— */
.bl-seal{
  position: absolute; z-index: 6;
  width: 22px; height: 22px; line-height: 22px; text-align: center;
  font: 11px/22px "Songti SC",serif; color: #b23a2e;
  border: 1.5px solid rgba(178,58,46,.85); border-radius: 4px;
  background: rgba(178,58,46,.10);
  transform: rotate(-8deg); pointer-events: auto;
  cursor: help; opacity: .82; transition: opacity .2s, transform .2s;
}
.bl-seal:hover{ opacity: 1; transform: rotate(-8deg) scale(1.12); }
.bl-seal::after{ content:"印"; }

/* —— 因果气象·云气层 —— */
.bl-qiyun{
  position: absolute; left: 0; right: 0; top: 0; height: 38%;
  z-index: 4; pointer-events: none;
  background: linear-gradient(to bottom, var(--bl-qiyun-c, rgba(210,200,180,.0)), rgba(210,200,180,0));
  transition: background .8s, filter .8s, opacity .8s;
}
.bl-qiyun.bl-haze{ filter: blur(2px) grayscale(.4); }

/* —— 倒读回溯 / 古来同卦·生成层面板 —— */
.bl-gua-panel{
  margin: 14px auto 0; max-width: 560px;
  padding: 12px 16px;
  background: rgba(28,22,16,.55);
  border: 1px solid rgba(201,161,74,.4);
  border-radius: 12px; color: #e9dcc0;
  font: 13px/1.7 "Songti SC","STSong",serif;
  text-align: left;
}
.bl-gua-panel .bl-gua-name{ font-size: 17px; color: var(--bl-tone); font-weight: 700; }
.bl-gua-panel .bl-gua-sec{ margin-top: 8px; opacity:.92; }
.bl-gua-panel .bl-gua-sec b{ color: #d8b96a; font-weight: 600; }
.bl-gua-panel .bl-gua-cause{ display:none; margin-top:6px; padding-top:6px; border-top:1px dashed rgba(201,161,74,.3); }
.bl-gua-panel.bl-open .bl-gua-cause{ display:block; }
.bl-gua-btn{
  margin-top: 10px; cursor: pointer; user-select:none;
  display:inline-block; padding: 4px 14px; border-radius: 999px;
  border:1px solid rgba(201,161,74,.5); background: rgba(201,161,74,.1); color:#e9dcc0;
}
.bl-gua-btn:hover{ background: rgba(201,161,74,.24); }

/* —— 平行道统·zone 专属标签（B 层自建，不动 arch 原 sub） —— */
.bl-zone-tag{
  position: absolute; top: 8px; right: 8px; z-index: 6;
  font: 11px/1.4 "Songti SC",serif; color:#1c1610;
  background: var(--bl-tone); padding: 2px 7px; border-radius: 6px;
  opacity: .9; pointer-events: none;
}

/* —— 嗅觉通感·全站色调暗示（色雾） —— */
#arch-scroll-layer::after,
body.bl-scent-on #arch-gen::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background: var(--bl-scent); opacity:.16; transition: background .5s, opacity .5s;
  z-index: 3;
}
body.bl-scent-on #arch-gen::after{ border-radius: 14px; }

/* —— 材质触感·手泽擦痕 canvas —— */
.bl-caizhi{
  position: absolute; inset: 0; z-index: 5; pointer-events: none;
}

/* —— 物候实时·角落小签 —— */
.bl-wuhou{
  position: fixed; right: 14px; top: 64px; z-index: 50;
  padding: 5px 10px; border-radius: 8px;
  background: rgba(28,22,16,.66); border:1px solid rgba(201,161,74,.4);
  color:#e9dcc0; font: 12px/1.5 "Songti SC",serif;
  box-shadow: 0 3px 12px rgba(0,0,0,.3);
}

/* —— 梦境催眠·整屏融化 + 梦谕 —— */
.bl-dream-overlay{
  position: fixed; inset: 0; z-index: 80; pointer-events: none;
  background: radial-gradient(circle at 50% 45%, rgba(20,16,12,.0), rgba(20,16,12,.55));
  opacity: 0; transition: opacity .6s;
}
body.bl-dream .bl-dream-overlay{ opacity: 1; }
body.bl-dream #arch-scroll-layer{
  animation: bl-melt 1.4s ease both;
  filter: blur(6px) saturate(1.2);
}
@keyframes bl-melt{
  0%{ transform: scale(1.04) translateY(8px); filter: blur(10px); opacity:.4; }
  45%{ transform: scale(.985) translateY(-4px); filter: blur(2px); opacity:.85; }
  100%{ transform: scale(1) translateY(0); filter: blur(0); opacity:1; }
}
.bl-mengyu{
  position: fixed; left: 50%; bottom: 16%; transform: translateX(-50%);
  z-index: 70; max-width: 80vw; text-align:center;
  color: #f3e6c8; font: 18px/1.8 "Songti SC","STSong",serif;
  text-shadow: 0 2px 14px rgba(0,0,0,.7);
  opacity: 0; transition: opacity 1s; pointer-events:none;
}
.bl-mengyu.bl-show{ opacity: 1; }

@media (prefers-reduced-motion: reduce){
  body.bl-dream #arch-scroll-layer{ animation:none; filter:none; }
  .bl-dream-overlay{ display:none; }
}

/* ════════════════════════════════════════════════════════════
   窄屏适配（≤760px）
   身临面板改为贴底抽屉，触控目标放大到 36px 以上
   ════════════════════════════════════════════════════════════ */
@media (max-width: 760px) {
  .bl-bar.bl-dongtian-bar {
    left: 10px; bottom: 10px;
    width: 62px; min-height: 40px;
  }
  .bl-ditu-toggle { font-size: 15px; padding: 8px 2px; }

  .bl-ditu-panel {
    width: min(360px, calc(100vw - 28px));
    max-height: 52vh;
    padding: 12px 12px 18px;
    bottom: 46px;
  }
  .bl-ditu-title { font-size: 15px; margin-bottom: 8px; }

  .bl-ditu-group .bl-chip,
  .bl-ditu-bar .bl-chip {
    /* 手指点击目标不小于 36px */
    padding: .48rem .8rem;
    font-size: .9rem;
    margin: 3px 4px;
  }
}

/* 极小屏（≤400px）：面板再收窄，避免贴边 */
@media (max-width: 400px) {
  .bl-ditu-panel {
    width: calc(100vw - 20px);
    max-height: 48vh;
    padding: 10px 10px 16px;
  }
}