/* ============================================================
 *  盖亚 GAIA — UI/UX 视觉设计系统
 * ============================================================
 *
 *  设计理念：
 *  ─────────
 *  宋版书籍的克制排版，而非霓虹中国风。
 *  UI 是文字的容器，不应喧宾夺主。
 *  暗色调取自夜晚大地、洞穴岩壁、月下湖面。
 *  留白即呼吸，信息之间需要停顿。
 *
 *  排版参考：
 *  ─────────
 *  正叙层 → 宋体/思源宋体：稳重、可长时间阅读
 *  低语层 → 楷体/仿宋：手写感、轻柔、退后一层
 *  仪礼层 → 宋体加粗/黑体：庄严、碑刻感
 *
 *  色彩哲学：
 *  ─────────
 *  主色不是纯金——是烛火映在宣纸上的暖黄。
 *  背景不是纯黑——是夜晚泥土的深褐蓝。
 *  低语不是灰——是月光下远山的青灰。
 * ============================================================ */


/* ────────────────────────────────────────────────────────────
 *  A) 根变量定义
 * ──────────────────────────────────────────────────────────── */

:root {

  /* ── 色彩系统：背景（古籍宣纸）── */
  --bg-deep:        #e8dcc8;           /* 最深底色，旧宣纸 */
  --bg-primary:     #f0e6d2;           /* 主背景，宣纸 */
  --bg-surface:     #ebe0ca;           /* 卡片/面板背景 */
  --bg-sidebar:     #e5d9c2;           /* 侧边栏背景 */
  --bg-hover:       #ddd0b8;           /* 悬停态 */
  --bg-input:       #f4edd8;           /* 输入框背景 */
  --bg-narrative:   #f2ebd6;           /* 叙事流背景 */

  /* ── 色彩系统：文字（墨色系）── */
  --text-primary:   #2c2418;           /* 正叙主文字，浓墨 */
  --text-secondary: #5a4e3c;           /* 次要文字，淡墨 */
  --text-muted:     #8a7e6a;           /* 更淡的文字 */
  --text-whisper:   #6e7a70;           /* 低语层文字，竹青 */
  --text-dim:       #a09880;           /* 低语层更淡 */

  /* ── 色彩系统：强调色 ── */
  --accent-gold:    #8b5e2a;           /* 主强调色，栗壳棕 */
  --accent-gold-dim:#a07040;           /* 淡棕 */
  --accent-gold-glow: rgba(139, 94, 42, 0.1); /* 棕色光晕 */

  /* ── 色彩系统：仪礼专色 ── */
  --rite-juling:    #8b3a2a;           /* 聚灵/开元：朱砂——凝实是天地大事 */
  --rite-guixi:     #7a8878;           /* 归息：苔灰——烟散入暮色 */
  --rite-ruji:      #9a9488;           /* 入寂：枯灰——彻底的远去 */
  --rite-keming:    #6a5a40;           /* 刻铭：铜色——如青铜器铭文 */
  --rite-tiandong:  #7a4a3a;           /* 天动：赭红——大地震颤 */
  --rite-potu:      #4a6a3a;           /* 破土：苔绿——泥土翻开时的生机 */
  --rite-huasheng:  #6a5a7a;           /* 化生：暮紫——万物互化的神秘 */

  /* ── 色彩系统：功能色 ── */
  --fn-success:     #4a6a3a;           /* 成功/凝实 = 苔绿 */
  --fn-fade:        #9a9488;           /* 消逝 = 枯灰 */
  --fn-warning:     #8b3a2a;           /* 警告 = 朱砂 */
  --fn-discover:    #6a5a40;           /* 发现 = 铜棕 */
  --fn-info:        #5a6a78;           /* 信息 = 青蓝 */

  /* ── 色彩系统：边框与分隔 ── */
  --border-primary: #d0c4aa;           /* 主边框 */
  --border-subtle:  #ddd2ba;           /* 微弱边框 */
  --border-accent:  rgba(139, 58, 42, 0.2); /* 朱砂强调边框 */
  --divider:        #d0c4aa;           /* 分隔线 */
  --divider-rite:   rgba(139, 58, 42, 0.3);  /* 仪礼分隔线，朱砂 */

  /* ── 色彩系统：滚动条 ── */
  --scrollbar-track: #e5d9c2;
  --scrollbar-thumb: #c4b89a;
  --scrollbar-hover: #b0a488;

  /* ── 排版系统：字体栈 ── */
  /*
   * 正叙层：宋体系 —— 横平竖直，适合长文阅读，有书卷气
   * 优先 Noto Serif SC（Google 开源，覆盖全），
   * 回退到系统宋体，最后 serif。
   */
  --font-narrative:
    "Noto Serif SC",
    "Source Han Serif SC",
    "思源宋体",
    "宋体",
    "SimSun",
    serif;

  /*
   * 低语层：楷体系 —— 手写感，笔意流动，暗示非正式、非确定
   * 楷体比仿宋更有人味，适合"世界的低语"。
   */
  --font-whisper:
    "LXGW WenKai",                     /* 霞鹜文楷，开源楷体首选 */
    "楷体",
    "KaiTi",
    "STKaiti",
    "FangSong",
    "仿宋",
    serif;

  /*
   * 仪礼层：黑体系 —— 碑刻感、庄严、无衬线的力量
   * 仪礼文字少而重，用黑体制造"刻"的质感。
   */
  --font-rite:
    "Noto Sans SC",
    "Source Han Sans SC",
    "思源黑体",
    "PingFang SC",
    "Microsoft YaHei",
    "微软雅黑",
    sans-serif;

  /* UI 字体（按钮、标签等小元素） */
  --font-ui:
    "Noto Sans SC",
    "PingFang SC",
    "Microsoft YaHei",
    sans-serif;

  /* ── 排版系统：字号 ── */
  --fs-narrative:   1rem;              /* 正叙正文：16px 基准 */
  --fs-whisper:     0.875rem;          /* 低语：14px，略小一号 */
  --fs-rite:        1.0625rem;         /* 仪礼：17px，比正叙微大 */
  --fs-rite-major:  1.1875rem;         /* 重大仪礼（开元/劫至）：19px */
  --fs-meta:        0.8125rem;         /* 元信息：13px */
  --fs-sidebar:     0.875rem;          /* 侧边栏正文 */
  --fs-sidebar-h:   0.9375rem;         /* 侧边栏标题 */
  --fs-input:       0.9375rem;         /* 输入框 */
  --fs-label:       0.75rem;           /* 标签 */

  /* ── 排版系统：行高 ── */
  --lh-narrative:   1.9;               /* 正叙：宽松行距，中文阅读舒适区 */
  --lh-whisper:     1.7;               /* 低语：略紧，制造"轻"感 */
  --lh-rite:        2.2;               /* 仪礼：最宽，庄严留白 */
  --lh-sidebar:     1.6;               /* 侧边栏 */
  --lh-compact:     1.4;               /* 紧凑行距 */

  /* ── 排版系统：字间距 ── */
  --ls-narrative:   0.04em;            /* 正叙：微松，阅读感 */
  --ls-whisper:     0.06em;            /* 低语：再松一点，飘逸 */
  --ls-rite:        0.12em;            /* 仪礼：较宽字距，碑刻感 */
  --ls-rite-major:  0.18em;            /* 重大仪礼：更开 */

  /* ── 间距系统 ── */
  --space-xs:       4px;
  --space-sm:       8px;
  --space-md:       16px;
  --space-lg:       24px;
  --space-xl:       36px;
  --space-2xl:      48px;
  --space-3xl:      64px;

  /* 叙事条目间距 */
  --gap-narrative:  20px;              /* 正叙条目间距 */
  --gap-whisper:    12px;              /* 低语条目间距（更紧凑） */
  --gap-rite-above: 40px;              /* 仪礼上方呼吸 */
  --gap-rite-below: 36px;              /* 仪礼下方呼吸 */

  /* ── 圆角 ── */
  --radius-sm:      3px;
  --radius-md:      5px;
  --radius-lg:      8px;

  /* ── 动画时长 ── */
  --dur-fast:       200ms;
  --dur-normal:     400ms;
  --dur-slow:       800ms;
  --dur-rite:       1200ms;            /* 仪礼出现 */
  --dur-rite-major: 2000ms;            /* 重大仪礼 */

  --ease-out:       cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-in-out:    cubic-bezier(0.42, 0, 0.58, 1);
  --ease-rite:      cubic-bezier(0.16, 1, 0.3, 1);  /* 仪礼：先快后慢，有"落定"感 */
}


/* ────────────────────────────────────────────────────────────
 *  B) 全局基础
 * ──────────────────────────────────────────────────────────── */

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

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-narrative);
  background-color: var(--bg-primary);
  color: var(--text-primary);
  line-height: var(--lh-narrative);
  letter-spacing: var(--ls-narrative);
}

/*
 * 中文排版细节：
 * ── 避头尾处理 ──
 * line-break: strict 启用 CJK 严格换行规则，
 * 避免句号、逗号出现在行首，避免左引号出现在行尾。
 * word-break: break-all 允许中文长文本在任意字符处换行。
 * overflow-wrap 处理极端情况。
 *
 * ── 引号 ──
 * 使用直角引号「」『』，更有中文排版传统感。
 * 在 CSS 层面通过 quotes 属性定义，JS 层面需配合替换。
 */
body {
  line-break: strict;
  overflow-wrap: break-word;
  word-break: break-all;
  quotes: "\300C" "\300D" "\300E" "\300F";  /* 「」『』 */
}


/* ────────────────────────────────────────────────────────────
 *  C) 叙事流容器
 * ──────────────────────────────────────────────────────────── */

.narrative-log {
  background-color: var(--bg-narrative);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-lg) var(--space-xl);
  overflow-y: auto;
  max-height: 68vh;

  /* 叙事流内部使用 flex 纵向排列，方便控制间距 */
  display: flex;
  flex-direction: column;
}


/* ────────────────────────────────────────────────────────────
 *  D) 正叙层（默认叙事条目）
 * ──────────────────────────────────────────────────────────── */

/*
 * 正叙层是叙事的主体。
 * 视觉上最"正常"——不突出也不退后，是阅读的锚点。
 * 左侧无装饰线（与旧设计不同），靠纯文字的排版节奏传达。
 * 条目之间用纯空白分隔，不用分隔线——留白即呼吸。
 */

.narrative-entry {
  font-family: var(--font-narrative);
  font-size: var(--fs-narrative);
  line-height: var(--lh-narrative);
  letter-spacing: var(--ls-narrative);
  color: var(--text-primary);

  padding: var(--space-md) 0;
  margin-bottom: var(--gap-narrative);
  position: relative;

  /* 淡入动画 */
  animation: narrative-enter var(--dur-normal) var(--ease-out) both;
}

/* 条目之间的微妙分隔：不用线，用极淡的底部边框 */
.narrative-entry + .narrative-entry {
  border-top: 1px solid var(--border-subtle);
  padding-top: var(--gap-narrative);
}

/* ── 行为者标签 ── */

.narrative-actor {
  font-family: var(--font-ui);
  font-size: var(--fs-label);
  letter-spacing: 0.08em;
  margin-bottom: var(--space-sm);
  display: inline-block;
}

/* 玩家标签：烛金，你在这个世界的痕迹 */
.narrative-actor--player {
  color: var(--accent-gold);
}

/* 居者标签：各有其色，但都克制 */
.narrative-actor--resident {
  color: var(--text-secondary);
}

/* 世界/系统标签：最淡，世界不需要标榜自己 */
.narrative-actor--world {
  color: var(--text-muted);
}

/* 探风 */
.narrative-actor[data-actor="探风"] {
  color: #7a9a8a; /* 青翠——风过林梢 */
}

/* 守默 */
.narrative-actor[data-actor="守默"] {
  color: #6a7a8a; /* 青灰——沉默如石 */
}

/* 赐名 */
.narrative-actor[data-actor="赐名"] {
  color: #9a8a6a; /* 暖褐——墨迹未干 */
}

/* ── 叙事正文 ── */

.narrative-text {
  color: var(--text-primary);
  line-height: var(--lh-narrative);
}

/* ── 元信息 ── */

.narrative-meta {
  font-family: var(--font-ui);
  font-size: var(--fs-meta);
  color: var(--text-muted);
  margin-top: var(--space-sm);
  letter-spacing: 0;
}


/* ────────────────────────────────────────────────────────────
 *  E) 低语层（微澜、感应、环境）
 * ──────────────────────────────────────────────────────────── */

/*
 * 低语层在视觉上"退后一层"——
 * 字体换楷体（手写感、不确定感）
 * 字号缩小、颜色变为月下青灰
 * 行距更紧凑——低语是一掠而过的，不需要正叙的从容
 * 不加左边框——低语没有重量
 *
 * 和正叙穿插时的节奏：
 * 低语条目的上下间距比正叙小，视觉上"嵌"在正叙之间，
 * 像在主旋律中偶尔飘过的泛音。
 */

.narrative-entry--whisper {
  font-family: var(--font-whisper);
  font-size: var(--fs-whisper);
  line-height: var(--lh-whisper);
  letter-spacing: var(--ls-whisper);
  color: var(--text-whisper);

  padding: var(--space-sm) 0;
  margin-bottom: var(--gap-whisper);

  /* 低语不需要上方分隔线 */
  border-top: none !important;

  animation: whisper-enter var(--dur-slow) var(--ease-out) both;
}

/* 低语的前后如果是正叙，间距要缩减，制造"穿插"感 */
.narrative-entry + .narrative-entry--whisper {
  border-top: none;
  padding-top: var(--space-xs);
  margin-top: calc(var(--gap-narrative) * -0.3);
}

.narrative-entry--whisper + .narrative-entry {
  border-top: none;
  padding-top: var(--space-sm);
}

/* 低语中的微澜（一等天象）——最轻 */
.narrative-entry--whisper.whisper-weilan {
  color: var(--text-dim);
  font-size: calc(var(--fs-whisper) - 1px);
}

/* 低语中的感应——稍实 */
.narrative-entry--whisper.whisper-ganying {
  color: var(--text-whisper);
}

/* 低语中的环境变化——有一点暖意 */
.narrative-entry--whisper.whisper-huanjing {
  color: #7a7a6a;
}


/* ────────────────────────────────────────────────────────────
 *  F) 仪礼层（聚灵、归息、天动……）
 * ──────────────────────────────────────────────────────────── */

/*
 * 仪礼是世界最庄严的时刻。
 * 居中排列，上下大量留白——制造"停顿"，让读者感到世界屏息。
 *
 * 分隔线设计：
 * 不用西式 ——— 长横线。
 * 用三个中文间隔号 · · · 或极细的居中短线 ─── 配合淡色，
 * 暗示"此处有界"但不喧宾夺主。
 * 灵感来自宋版书籍卷首的简素装饰——一条细线，足矣。
 */

.narrative-entry--rite {
  font-family: var(--font-rite);
  font-size: var(--fs-rite);
  line-height: var(--lh-rite);
  letter-spacing: var(--ls-rite);

  text-align: center;

  margin-top: var(--gap-rite-above);
  margin-bottom: var(--gap-rite-below);
  padding: var(--space-xl) var(--space-lg);

  /* 不要背景色——仪礼靠留白和文字本身传达庄严 */
  background: transparent;
  border: none;
  position: relative;

  animation: rite-enter var(--dur-rite) var(--ease-rite) both;
}

/* ── 仪礼分隔线（上下） ── */

.narrative-entry--rite::before,
.narrative-entry--rite::after {
  content: "";
  display: block;
  width: 60px;
  height: 1px;
  margin: 0 auto;
  background: var(--divider-rite);
}

.narrative-entry--rite::before {
  margin-bottom: var(--space-lg);
}

.narrative-entry--rite::after {
  margin-top: var(--space-lg);
}

/* 也可选用文字式分隔（备选方案，通过 data 属性切换）：
 * ·  ·  · 三点间隔，更有手工感
 */
.narrative-entry--rite[data-divider="dots"]::before {
  content: "·    ·    ·";
  background: none;
  width: auto;
  height: auto;
  font-size: var(--fs-meta);
  color: var(--text-muted);
  letter-spacing: 0.3em;
}

.narrative-entry--rite[data-divider="dots"]::after {
  content: "·    ·    ·";
  background: none;
  width: auto;
  height: auto;
  font-size: var(--fs-meta);
  color: var(--text-muted);
  letter-spacing: 0.3em;
}


/* ── 各仪礼专色 ── */

/* 聚灵 / 开元：烛金——世界因凝实而亮了一下 */
.narrative-entry--rite.rite-juling,
.narrative-entry--rite.rite-kaiyuan {
  color: var(--rite-juling);
}
.narrative-entry--rite.rite-juling::before,
.narrative-entry--rite.rite-juling::after,
.narrative-entry--rite.rite-kaiyuan::before,
.narrative-entry--rite.rite-kaiyuan::after {
  background: rgba(201, 168, 76, 0.3);
}

/* 开元（世界首个凝实）特殊处理——更大字号，更宽字距 */
.narrative-entry--rite.rite-kaiyuan {
  font-size: var(--fs-rite-major);
  letter-spacing: var(--ls-rite-major);
}
.narrative-entry--rite.rite-kaiyuan::before,
.narrative-entry--rite.rite-kaiyuan::after {
  width: 80px;
  background: rgba(201, 168, 76, 0.4);
}

/* 归息：青灰——如烟散入暮色 */
.narrative-entry--rite.rite-guixi {
  color: var(--rite-guixi);
}
.narrative-entry--rite.rite-guixi::before,
.narrative-entry--rite.rite-guixi::after {
  background: rgba(107, 127, 142, 0.25);
}

/* 入寂：冷灰——彻底的远去。字号略小，呼应"消失" */
.narrative-entry--rite.rite-ruji {
  color: var(--rite-ruji);
  font-size: calc(var(--fs-rite) - 1px);
  letter-spacing: 0.2em; /* 更散——文字在离开 */
}
.narrative-entry--rite.rite-ruji::before,
.narrative-entry--rite.rite-ruji::after {
  background: rgba(74, 80, 88, 0.2);
  width: 40px; /* 更短——存在的痕迹在缩小 */
}

/* 刻铭：铜色——法则如青铜器铭文 */
.narrative-entry--rite.rite-keming {
  color: var(--rite-keming);
}
.narrative-entry--rite.rite-keming::before,
.narrative-entry--rite.rite-keming::after {
  background: rgba(160, 133, 96, 0.3);
}

/* 天动：暗赭——大地震颤。分隔线更粗一点 */
.narrative-entry--rite.rite-tiandong {
  color: var(--rite-tiandong);
  font-size: var(--fs-rite-major);
}
.narrative-entry--rite.rite-tiandong::before,
.narrative-entry--rite.rite-tiandong::after {
  background: rgba(139, 94, 94, 0.35);
  height: 2px;
  width: 90px;
}

/* 破土：苔绿——大地深处的生机 */
.narrative-entry--rite.rite-potu {
  color: var(--rite-potu);
}
.narrative-entry--rite.rite-potu::before,
.narrative-entry--rite.rite-potu::after {
  background: rgba(122, 138, 96, 0.25);
}

/* 化生：暮紫——万物互化，神秘色调 */
.narrative-entry--rite.rite-huasheng {
  color: var(--rite-huasheng);
}
.narrative-entry--rite.rite-huasheng::before,
.narrative-entry--rite.rite-huasheng::after {
  background: rgba(138, 122, 154, 0.25);
}

/* 劫至 / 劫后——最高等级仪礼 */
.narrative-entry--rite.rite-jiezhi {
  color: var(--rite-tiandong);
  font-size: var(--fs-rite-major);
  letter-spacing: var(--ls-rite-major);
  margin-top: var(--space-3xl);
  margin-bottom: var(--space-3xl);
}
.narrative-entry--rite.rite-jiezhi::before,
.narrative-entry--rite.rite-jiezhi::after {
  width: 120px;
  height: 2px;
  background: rgba(139, 94, 94, 0.4);
}

.narrative-entry--rite.rite-jiehou {
  font-family: var(--font-whisper); /* 劫后用口述体——楷体 */
  color: var(--text-whisper);
  font-size: var(--fs-rite);
  letter-spacing: var(--ls-whisper);
}


/* ────────────────────────────────────────────────────────────
 *  G) 侧边栏
 * ──────────────────────────────────────────────────────────── */

.side-panel {
  width: 320px;
  background-color: var(--bg-sidebar);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-lg);
  padding: var(--space-lg) var(--space-md);
  max-height: 80vh;
  overflow-y: auto;
  font-family: var(--font-ui);
  font-size: var(--fs-sidebar);
  line-height: var(--lh-sidebar);
}

/* ── 区块通用 ── */

.panel-section {
  margin-bottom: var(--space-xl);
}

.panel-section:last-child {
  margin-bottom: 0;
}

.panel-section-title {
  font-family: var(--font-ui);
  font-size: var(--fs-sidebar-h);
  color: var(--text-secondary);
  letter-spacing: 0.1em;
  margin-bottom: var(--space-md);
  padding-bottom: var(--space-sm);
  border-bottom: 1px solid var(--border-subtle);
}

/* ── 1. "你"区块 ── */

/*
 * 气力展示：用意象化文字 + 微型进度条。
 * 不显示具体数字（保持"感觉"而非"计算"），
 * 但在 title 属性中放数字供鼠标悬停查看。
 *
 * 进度条造型：极细，像一根香燃烧的程度。
 */

.player-qi-bar {
  width: 100%;
  height: 3px;
  background-color: var(--border-primary);
  border-radius: 2px;
  margin-top: var(--space-sm);
  overflow: hidden;
}

.player-qi-bar__fill {
  height: 100%;
  background: linear-gradient(
    90deg,
    var(--accent-gold-dim) 0%,
    var(--accent-gold) 100%
  );
  border-radius: 2px;
  transition: width var(--dur-slow) var(--ease-out);
}

.player-qi-label {
  font-size: var(--fs-meta);
  color: var(--text-secondary);
  margin-top: var(--space-xs);
}

/* 气力文字描述（意象化） */
.player-qi-label--empty   { color: var(--text-muted); }   /* "气息微弱" */
.player-qi-label--low     { color: var(--text-secondary); } /* "有气在动" */
.player-qi-label--mid     { color: var(--text-primary); }   /* "气力充沛" */
.player-qi-label--full    { color: var(--accent-gold); }    /* "气盈如潮" */

/* ── 2. "天地气象"区块 ── */

/*
 * 世界温度用四种状态，各有视觉风格。
 * 文字本身就是状态——不需要图标。
 */

.world-temp {
  font-family: var(--font-whisper);
  font-size: var(--fs-sidebar);
  letter-spacing: 0.08em;
  padding: var(--space-sm) 0;
  transition: color var(--dur-slow) var(--ease-in-out);
}

.world-temp--ji {     /* 寂："万籁俱静" */
  color: var(--text-dim);
}

.world-temp--dong {   /* 动："有风在动" */
  color: var(--text-whisper);
}

.world-temp--re {     /* 热："天地在呼吸" */
  color: var(--text-primary);
}

.world-temp--fei {    /* 沸："大地不安" */
  color: var(--rite-tiandong);
  animation: pulse-subtle 3s var(--ease-in-out) infinite;
}

/* ── 3. "凝实之物"区块 ── */

.entity-item--solid {
  padding: var(--space-sm) var(--space-md);
  margin-bottom: var(--space-sm);
  border-radius: var(--radius-sm);
  background-color: rgba(201, 168, 76, 0.04);
  border-left: 2px solid var(--accent-gold-dim);
  transition: background-color var(--dur-fast) var(--ease-out);
}

.entity-item--solid:hover {
  background-color: rgba(201, 168, 76, 0.08);
}

.entity-item__name {
  font-family: var(--font-narrative);
  font-size: var(--fs-sidebar);
  color: var(--accent-gold);
  margin-bottom: 2px;
}

.entity-item__desc {
  font-size: var(--fs-meta);
  color: var(--text-secondary);
  line-height: var(--lh-compact);
}

/* ── 4. "传说"区块 ── */

.entity-item--lore {
  padding: var(--space-sm) var(--space-md);
  margin-bottom: var(--space-sm);
  border-radius: var(--radius-sm);
  border-left: 2px solid var(--border-subtle);
  opacity: 0.75;
  transition: opacity var(--dur-fast) var(--ease-out);
}

.entity-item--lore:hover {
  opacity: 0.9;
}

.entity-item--lore .entity-item__name {
  font-family: var(--font-whisper);
  color: var(--text-secondary);
}

/* 将凝未凝的特殊标记 —— 名字旁有微弱的金色脉动 */
.entity-item--lore.near-solid {
  border-left-color: var(--accent-gold-dim);
  opacity: 0.85;
}

.entity-item--lore.near-solid .entity-item__name {
  color: var(--accent-gold-dim);
}

.entity-item--lore.near-solid .entity-item__name::after {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--accent-gold);
  margin-left: var(--space-sm);
  vertical-align: middle;
  animation: near-solid-pulse 2.5s var(--ease-in-out) infinite;
}

/* ── 5. "天则"区块 ── */

.law-item {
  padding: var(--space-sm) var(--space-md);
  margin-bottom: var(--space-sm);
  border-radius: var(--radius-sm);
  border-left: 2px solid var(--rite-keming);
  background-color: rgba(160, 133, 96, 0.04);
}

.law-item__text {
  font-family: var(--font-narrative);
  font-size: var(--fs-sidebar);
  color: var(--text-primary);
}

.law-item__count {
  font-family: var(--font-ui);
  font-size: var(--fs-label);
  color: var(--text-muted);
  margin-top: 2px;
}

/* ── 6. "在场者"区块 ── */

.resident-item {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-xs) 0;
  margin-bottom: var(--space-xs);
}

/* 居者名字复用叙事流中的角色色 */
.resident-item__name {
  font-family: var(--font-narrative);
  font-size: var(--fs-sidebar);
}

.resident-item__name[data-actor="探风"] { color: #7a9a8a; }
.resident-item__name[data-actor="守默"] { color: #6a7a8a; }
.resident-item__name[data-actor="赐名"] { color: #9a8a6a; }

/* 状态指示：极简，一个小圆点 */
.resident-item__status {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  flex-shrink: 0;
}

.resident-item__status--active {
  background-color: var(--text-secondary);
}

.resident-item__status--idle {
  background-color: var(--text-muted);
}

.resident-item__status--speaking {
  background-color: var(--accent-gold-dim);
  animation: pulse-dot 1.5s var(--ease-in-out) infinite;
}

/* 居者状态描述（一句话） */
.resident-item__mood {
  font-family: var(--font-whisper);
  font-size: var(--fs-label);
  color: var(--text-dim);
}


/* ────────────────────────────────────────────────────────────
 *  H) 输入区
 * ──────────────────────────────────────────────────────────── */

.input-area {
  display: flex;
  gap: var(--space-sm);
  align-items: stretch;
  margin-top: var(--space-md);
}

/* 环境提示行 —— 输入框上方 */
.input-context {
  font-family: var(--font-whisper);
  font-size: var(--fs-meta);
  color: var(--text-dim);
  letter-spacing: var(--ls-whisper);
  padding: var(--space-xs) var(--space-sm);
  margin-bottom: var(--space-sm);
  min-height: 1.4em;
  transition: color var(--dur-slow) var(--ease-out);
}

/* 输入框 */
#player-input,
.player-input {
  flex: 1;
  padding: var(--space-md);
  background-color: var(--bg-input);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  font-family: var(--font-narrative);
  font-size: var(--fs-input);
  line-height: var(--lh-compact);
  letter-spacing: var(--ls-narrative);
  transition: border-color var(--dur-fast) var(--ease-out);
  outline: none;
}

#player-input:focus,
.player-input:focus {
  border-color: var(--accent-gold-dim);
}

/* Placeholder 样式 —— 低语气质 */
#player-input::placeholder,
.player-input::placeholder {
  font-family: var(--font-whisper);
  color: var(--text-muted);
  letter-spacing: var(--ls-whisper);
  font-size: var(--fs-meta);
  opacity: 1; /* 覆盖浏览器默认降低透明度 */
}

/* 发送按钮 —— 克制，不喧宾夺主 */
#send-btn,
.send-btn {
  padding: var(--space-md) var(--space-lg);
  background-color: transparent;
  color: var(--accent-gold-dim);
  border: 1px solid var(--accent-gold-dim);
  border-radius: var(--radius-md);
  cursor: pointer;
  font-family: var(--font-ui);
  font-size: var(--fs-input);
  letter-spacing: 0.1em;
  transition:
    color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out),
    background-color var(--dur-fast) var(--ease-out);
}

#send-btn:hover,
.send-btn:hover {
  color: var(--accent-gold);
  border-color: var(--accent-gold);
  background-color: rgba(201, 168, 76, 0.06);
}

#send-btn:active,
.send-btn:active {
  color: var(--accent-gold);
  background-color: rgba(201, 168, 76, 0.12);
}

/* 禁用态 */
#send-btn:disabled,
.send-btn:disabled {
  color: var(--text-muted);
  border-color: var(--border-subtle);
  cursor: default;
}


/* ────────────────────────────────────────────────────────────
 *  I) 动画定义
 * ──────────────────────────────────────────────────────────── */

/* ── 正叙条目入场：从下方微移 + 淡入 ── */
@keyframes narrative-enter {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ── 低语条目入场：纯淡入，更慢，像雾气浮现 ── */
@keyframes whisper-enter {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* ── 仪礼入场：从完全透明缓缓浮现，有"凝"的感觉 ── */
@keyframes rite-enter {
  0% {
    opacity: 0;
    letter-spacing: 0.3em; /* 字距从很散开始 */
  }
  60% {
    opacity: 0.7;
  }
  100% {
    opacity: 1;
    letter-spacing: var(--ls-rite); /* 收拢到最终字距 */
  }
}

/* 重大仪礼入场——更慢，字距变化更大 */
@keyframes rite-enter-major {
  0% {
    opacity: 0;
    letter-spacing: 0.5em;
  }
  40% {
    opacity: 0.3;
  }
  100% {
    opacity: 1;
    letter-spacing: var(--ls-rite-major);
  }
}

.narrative-entry--rite.rite-kaiyuan,
.narrative-entry--rite.rite-tiandong,
.narrative-entry--rite.rite-jiezhi {
  animation: rite-enter-major var(--dur-rite-major) var(--ease-rite) both;
}

/* ── 侧边栏数据更新动画 ── */

/* 数值变化时的微闪 */
@keyframes value-update {
  0%   { color: var(--accent-gold); }
  100% { color: inherit; }
}

.value-updated {
  animation: value-update var(--dur-slow) var(--ease-out);
}

/* 新条目出现在侧边栏 */
@keyframes sidebar-item-enter {
  from {
    opacity: 0;
    transform: translateX(-4px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.sidebar-item-new {
  animation: sidebar-item-enter var(--dur-normal) var(--ease-out);
}

/* ── 世界温度过渡 ── */
/* 温度变化已通过 transition 属性处理（见 .world-temp 定义）。
 * 如果需要更显式的"变化时刻"提示，可加此动画： */

@keyframes temp-shift {
  0%   { opacity: 0.6; }
  50%  { opacity: 1; }
  100% { opacity: 1; }
}

.world-temp-changed {
  animation: temp-shift var(--dur-slow) var(--ease-out);
}

/* ── 辅助脉动动画 ── */

/* "大地不安"（沸）状态微脉动 */
@keyframes pulse-subtle {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.75; }
}

/* 居者"正在说话"脉动 */
@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.5; transform: scale(0.7); }
}

/* 将凝未凝圆点脉动 */
@keyframes near-solid-pulse {
  0%, 100% {
    opacity: 0.4;
    box-shadow: 0 0 0 0 rgba(201, 168, 76, 0);
  }
  50% {
    opacity: 1;
    box-shadow: 0 0 6px 2px rgba(201, 168, 76, 0.2);
  }
}


/* ────────────────────────────────────────────────────────────
 *  J) 标点与排版微调
 * ──────────────────────────────────────────────────────────── */

/*
 * 中文标点处理说明：
 *
 * 1. 避头尾：已由 body 的 line-break: strict 处理。
 *    禁止行首出现：。，、；：！？》）」』
 *    禁止行尾出现：《（「『
 *
 * 2. 引号：使用直角引号「」『』。
 *    这需要在 JS 层面将内容中的 "" '' 替换为 「」『』。
 *    CSS quotes 属性已设置，<q> 元素会自动使用。
 *
 * 3. 标点挤压：
 *    相邻标点（如 。「 或 ，」）在视觉上会产生过宽间距。
 *    font-feature-settings 中的 halt（半宽标点替代）可处理。
 *    但并非所有字体都支持。
 */

.narrative-text,
.narrative-entry--whisper,
.narrative-entry--rite {
  font-feature-settings: "halt" 1; /* 半宽标点替代（如字体支持） */
  hanging-punctuation: allow-end;  /* 行尾标点悬挂（Safari 支持） */
}

/* <q> 元素样式 —— 直角引号 */
q {
  quotes: "\300C" "\300D" "\300E" "\300F";
}

q::before { content: open-quote; }
q::after  { content: close-quote; }


/* ────────────────────────────────────────────────────────────
 *  K) 滚动条
 * ──────────────────────────────────────────────────────────── */

/* Webkit */
::-webkit-scrollbar {
  width: 5px;
}

::-webkit-scrollbar-track {
  background: var(--scrollbar-track);
}

::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-hover);
}

/* Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}


/* ────────────────────────────────────────────────────────────
 *  L) 连接状态指示（重定义）
 * ──────────────────────────────────────────────────────────── */

.connection-status {
  position: fixed;
  bottom: var(--space-md);
  left: var(--space-md);
  padding: var(--space-xs) var(--space-md);
  border-radius: var(--radius-sm);
  font-family: var(--font-ui);
  font-size: var(--fs-label);
  letter-spacing: 0.05em;
  z-index: 1000;
  transition: all var(--dur-fast) var(--ease-out);
}

.connection-status.connected {
  background-color: rgba(90, 120, 90, 0.15);
  border: 1px solid rgba(90, 120, 90, 0.3);
  color: #7a9a7a;
}

.connection-status.disconnected {
  background-color: rgba(139, 74, 74, 0.15);
  border: 1px solid rgba(139, 74, 74, 0.3);
  color: #9a6a6a;
}

.connection-status.connecting {
  background-color: rgba(201, 168, 76, 0.1);
  border: 1px solid rgba(201, 168, 76, 0.2);
  color: var(--accent-gold-dim);
}


/* ────────────────────────────────────────────────────────────
 *  M) 布局骨架
 * ──────────────────────────────────────────────────────────── */

.container {
  max-width: 1400px;
  margin: 0 auto;
  padding: var(--space-lg);
}

/* 页头——极简 */
header {
  text-align: center;
  margin-bottom: var(--space-xl);
  padding: var(--space-lg) 0;
  border-bottom: 1px solid var(--border-subtle);
}

header h1 {
  font-family: var(--font-rite);
  font-size: 1.5rem;
  font-weight: 400;
  color: var(--text-secondary);
  letter-spacing: 0.15em;
}

.subtitle {
  font-family: var(--font-whisper);
  font-size: var(--fs-meta);
  color: var(--text-muted);
  margin-top: var(--space-xs);
  letter-spacing: 0.1em;
}

.main-layout {
  display: flex;
  gap: var(--space-xl);
  position: relative;
}

.narrative-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 70vh;
}

/* ── 空状态 ── */
.empty-state {
  color: var(--text-muted);
  font-family: var(--font-whisper);
  font-size: var(--fs-meta);
  text-align: center;
  padding: var(--space-lg);
  letter-spacing: var(--ls-whisper);
}


/* ────────────────────────────────────────────────────────────
 *  N) 移动端适配
 * ──────────────────────────────────────────────────────────── */

@media (max-width: 768px) {
  :root {
    --fs-narrative: 0.9375rem;
    --fs-whisper:   0.8125rem;
    --fs-rite:      1rem;
    --gap-rite-above: 28px;
    --gap-rite-below: 24px;
  }

  .main-layout {
    flex-direction: column;
  }

  .side-panel {
    position: fixed;
    top: 0;
    right: -100%;
    width: 85%;
    max-width: 320px;
    height: 100vh;
    max-height: 100vh;
    z-index: 999;
    transition: right 0.3s var(--ease-out);
    border-radius: 0;
  }

  .side-panel.open {
    right: 0;
  }

  .narrative-log {
    padding: var(--space-md);
  }

  .narrative-container {
    min-height: 60vh;
  }

  header h1 {
    font-size: 1.25rem;
  }
}

/* ── 超宽屏幕 ── */
@media (min-width: 1600px) {
  :root {
    --fs-narrative: 1.0625rem;
    --lh-narrative: 2;
  }
}


/* ────────────────────────────────────────────────────────────
 *  O) 无障碍与用户偏好
 * ──────────────────────────────────────────────────────────── */

/* 尊重用户的动画偏好 */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* 高对比度模式（若需要，可扩展） */
@media (prefers-contrast: high) {
  :root {
    --text-primary:   #e8e4da;
    --text-whisper:   #9aa5b0;
    --border-primary: #3a3a4a;
  }
}