/* 青云问道 · 红尘房间展示（v12.0）：立像行 + 地上拾取区
 *
 * 契约：docs/红尘NPC与道具展示设计-v12.0.md §4.3 / §4.4
 *
 * ⚠️ 配色**只用既有变量**，不新增第三套颜色（02d 决策三十）：
 *    --paper / --paper-dim 正文    --gold / --gold-bright / --gold-dim 强调
 *    --cinnabar 警示               --jade 线索 / 青玉
 *    --mute / --mute-2 次要标签     --ui-raise / --ui-deep 表面（不透明）
 *    --font-serif / --ease
 *    唯一"新色"是和既有的「本体」紫 #a98cd6 —— 它已经在 style.css 的
 *    .dg-role.self 里用过，不是新引入的色相。
 *
 * ⚠️ 表面必须**不透明**（v11.29 的教训）：插画透进来会让小字糊掉。
 *    这里所有卡片一律 `background: var(--ui-raise)` 起底。
 *
 * ⚠️ 立像行**不做叠层、不做交叉淡化**（03h 二）。每张卡是平铺的一行元素，
 *    换表情只改 <img src>；元素个数恒定，不存在"谁在最上面"。
 */

/* ═══════════ 一、房间里的人（#dg-cast）═══════════
   ⚠️ v12.1：原「立像行」改成**文字卡片**（用户要求删掉立像）。
   卡片里只剩：名字 + 身份（一行，可点换台词）→ 台词 → 动作按钮。 */

.dg-cast { margin: 0 0 18px; }
.dg-cast[hidden] { display: none; }

.dg-cast-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 14px;
}

/* 卡宽策略：右栏一人一行，吃满整栏（台词行宽足够，不会被挤成竖条）。
   台词区自带 max-height，再长的台词也不会把整页撑高。 */
.dg-cast-card {
  position: relative;
  flex: 1 1 100%;
  min-width: 0;
  max-width: none;
  padding: 12px 14px 12px;
  border: 1px solid var(--ui-line);
  border-radius: 2px;
  background: var(--ui-raise);
  transition: border-color .4s var(--ease), background .4s var(--ease);
}
.dg-cast-card:hover { border-color: var(--gold-dim); }

/* ── 名字 + 身份（v12.3：不再是按钮，台词改由「对话」按钮驱动）── */
.dg-cast-head-only {
  display: block;
  padding: 0 0 8px;
  margin: 0;
  border-bottom: 1px solid rgba(255, 255, 255, .05);
}
/* 情绪：不换色相，只微调明度/色（配色体系不变） */
.dg-cast-card[data-mood="scared"] .dg-cast-name,
.dg-cast-card[data-mood="hurt"] .dg-cast-name { opacity: .82; }
.dg-cast-card[data-mood="angry"] .dg-cast-name { color: var(--cinnabar); }
.dg-cast-card[data-mood="awake"] .dg-cast-name { color: var(--jade-bright); }
.dg-cast-card[data-mood="knowing"] .dg-cast-name { color: var(--gold); }

.dg-cast-name-row {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 10px;
}
.dg-cast-name {
  font-family: var(--font-serif);
  font-size: 15px;
  letter-spacing: .14em;
  color: var(--gold-bright);
  line-height: 1.5;
}
.dg-cast-title {
  font-size: 11px;
  letter-spacing: .08em;
  color: var(--mute);
}

/* ── 外貌描述（v12.3：卡面常显的主角）─────────────────────────────
   台词不再霸占卡面，改由「对话」按钮点出来；常驻的是这段观察到的样子。
   用 --paper-dim 而不是 --paper：它是"看"到的，不是"说"出来的，
   比台词轻一档，避免抢走探查出结果时的注意力。 */
.dg-cast-desc {
  margin: 9px 0 0;
  font-size: 12px;
  line-height: 1.85;
  letter-spacing: .03em;
  color: var(--paper-dim);
  white-space: pre-wrap;
}
.dg-cast-desc[hidden] { display: none; }

/* ── 三个固定交互按钮（v12.3）──
   探查 / 对话 / 攻击横排。攻击用朱砂描边区分——它是有后果的那个。 */
.dg-interact.is-fight {
  border-color: rgba(196, 90, 74, .55);
  color: #e0b0a8;
}
.dg-interact.is-fight:hover:not(:disabled) {
  border-color: var(--cinnabar);
  background: rgba(196, 90, 74, .12);
}

/* ── 台词气泡（元素恒在；没有台词时 hidden）── */
.dg-say {
  position: relative;
  margin: 9px 0 0;
  padding: 8px 10px;
  border: 1px solid var(--ui-line);
  border-radius: 2px;
  background: var(--ui-deep);
  font-size: 11.5px;
  line-height: 1.75;
  color: var(--paper);
  letter-spacing: .02em;
  min-height: 2.6em;
  /* ⭐ 关键：台词长短差别很大（一句「今年的雨，比往年多。」到一段四十字）。
     不给上限时最长那句会把整张卡（乃至整页）撑得很高。
     这里封顶 6 行、超出内滚；同时断开超长无空格串，避免溢出。 */
  max-height: 8.5em;
  overflow-y: auto;
  overflow-wrap: anywhere;
  scrollbar-width: thin;
}
.dg-say[hidden] { display: none; }
/* 气泡向上的小尖：一个旋转的方块，压在卡片底色上 —— 不另起一层。
   ⚠️ v12.1：名字改成左对齐后，小尖也从居中改为**靠左**，
   否则它会指向一片空白（原来它指向居中的立像）。 */
.dg-say::before {
  content: '';
  position: absolute;
  top: -5px;
  left: 18px;
  width: 8px;
  height: 8px;
  margin-left: -4px;
  background: var(--ui-deep);
  border-left: 1px solid var(--ui-line);
  border-top: 1px solid var(--ui-line);
  transform: rotate(45deg);
}
.dg-say-text { display: block; }
/* 说新一句时轻轻抬一下 —— 只改 transform/opacity，不动结构 */
.dg-say.pop { animation: dg-say-pop .42s var(--ease); }
@keyframes dg-say-pop {
  0%   { opacity: .25; transform: translateY(3px); }
  100% { opacity: 1;   transform: translateY(0); }
}

/* ── 立像卡里的动作按钮：常驻。卡片变宽后改为横排换行 ── */
.dg-cast-acts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}
.dg-cast-acts[hidden] { display: none; }
.dg-cast-acts .dg-act {
  text-align: left;
  padding: 7px 10px;
  font-size: 11.5px;
  line-height: 1.5;
  letter-spacing: .06em;
}

/* ── 全部动作都被隐藏时的一条提示（v12.2）──
   选项隐藏后不能连"为什么做不了"一起藏掉：玩家会以为这里没事可做，
   而真相是还缺一步。这条提示取服务端 fail_text（方向性提示），
   用次要色 + 左侧一道细线，视觉上是"说明"而不是"可点项"。 */
.dg-act-hint,
.dg-options-hint {
  font-size: 11.5px;
  line-height: 1.75;
  letter-spacing: .02em;
  color: var(--mute);
  padding: 6px 0 6px 10px;
  border-left: 2px solid rgba(255, 255, 255, .10);
}
.dg-options-hint { margin: 0; }

/* ═══════════ 二、动作按钮（对象 / 地上之物共用）═══════════ */

.dg-room-act {
  border: 1px solid rgba(201, 168, 106, .22);
  background: rgba(201, 168, 106, .05);
  color: var(--paper);
  font-family: var(--font-serif);
  letter-spacing: .08em;
  border-radius: 2px;
  transition: border-color .4s var(--ease), background .4s var(--ease), color .4s var(--ease);
}
.dg-room-act:hover:not(:disabled) {
  border-color: var(--gold);
  background: rgba(201, 168, 106, .16);
}
.dg-room-act:disabled { cursor: default; opacity: .55; }
.dg-room-act.done { border-style: dashed; opacity: .5; }
.dg-room-act.off { border-color: var(--ui-line); background: transparent; }

.dg-act-label { display: block; }
.dg-act.done .dg-act-label {
  text-decoration: line-through;
  text-decoration-color: var(--mute-2);
}
.dg-act-tag {
  display: inline-block;
  font-style: normal;
  font-size: 9.5px;
  letter-spacing: .1em;
  color: var(--mute);
  border: 1px solid var(--ui-line);
  border-radius: 2px;
  padding: 0 4px;
  margin-left: 6px;
  vertical-align: middle;
}
/* require 不满足时把原因跟在按钮里（与 app.js 原来的「文字 + 原因」同口径） */
.dg-act-reason {
  display: block;
  margin-top: 3px;
  font-family: var(--font-sans);
  font-size: 10.5px;
  line-height: 1.6;
  letter-spacing: 0;
  color: var(--cinnabar);
  opacity: .9;
}
.dg-act:disabled .dg-act-reason { opacity: .75; }

/* ═══════════ 三、地上拾取区（#dg-floor）═══════════ */

.dg-floor { margin: 0 0 16px; }
.dg-floor[hidden] { display: none; }

.dg-floor-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.dg-floor-card {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  flex: 0 1 246px;
  min-width: 200px;
  padding: 10px 12px;
  border: 1px solid var(--ui-line);
  border-radius: 2px;
  background: var(--ui-raise);
  transition: border-color .4s var(--ease);
}
.dg-floor-card:hover { border-color: var(--gold-dim); }
/* require 不满足：灰着显示，不给"这里有宝贝"的暗示 */
.dg-floor-card.unseen { opacity: .55; }
.dg-floor-card.unseen:hover { border-color: var(--ui-line); }
/* 拿走过了：整体压下去，名字划掉 */
.dg-floor-card.done { opacity: .5; }

/* 小图标 */
.dg-floor-main { min-width: 0; flex: 1 1 auto; }
.dg-floor-head { display: flex; align-items: baseline; gap: 6px; }
.dg-floor-name {
  font-family: var(--font-serif);
  font-size: 13px;
  letter-spacing: .1em;
  color: var(--gold-bright);
  line-height: 1.5;
}
.dg-floor-card.done .dg-floor-name {
  text-decoration: line-through;
  text-decoration-color: var(--mute-2);
  color: var(--mute);
}
.dg-floor-card.unseen .dg-floor-name { color: var(--mute); }
.dg-floor-tag {
  font-style: normal;
  flex: 0 0 auto;
  font-size: 9.5px;
  letter-spacing: .1em;
  color: var(--mute);
  border: 1px solid var(--ui-line);
  border-radius: 2px;
  padding: 0 4px;
}
.dg-floor-desc {
  font-size: 11px;
  line-height: 1.75;
  color: var(--mute);
  margin-top: 3px;
}
.dg-floor-acts { margin-top: 8px; }
.dg-floor-act {
  padding: 6px 12px;
  font-size: 11.5px;
}
.dg-floor-reason {
  display: block;
  margin-top: 5px;
  font-size: 10.5px;
  line-height: 1.6;
  color: var(--cinnabar);
  opacity: .9;
}

/* 线索类物件给一抹青玉色的左边线（--jade 已在配色体系里） */
.dg-floor-card[data-type="clue"] { border-left: 2px solid rgba(147, 197, 185, .45); }
.dg-floor-card[data-type="key"] { border-left: 2px solid rgba(217, 187, 128, .45); }
/* "只看不动"的物品（look）：不划一道"已取"的线 */
.dg-floor-card.look.done .dg-floor-name { text-decoration-color: var(--mute-2); }

/* ═══════════ 四、单张对象卡（renderObject）═══════════ */
/* 器物 / 机关用这套；npc 走立像行，但 renderObject 也能渲同一套外壳。 */

.dg-room-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--ui-line);
  border-radius: 2px;
  background: var(--ui-raise);
  margin-bottom: 10px;
}
.dg-room-card.done { opacity: .6; }
.dg-card-main { min-width: 0; flex: 1 1 auto; }
.dg-card-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; }
.dg-card-name {
  font-family: var(--font-serif);
  font-size: 14.5px;
  letter-spacing: .14em;
  color: var(--gold-bright);
}
.dg-card-title {
  font-size: 10.5px;
  letter-spacing: .08em;
  color: var(--mute);
}
.dg-card-title[hidden] { display: none; }
.dg-card-say {
  margin-top: 8px;
  padding: 8px 11px;
  border-left: 1px solid var(--gold-dim);
  background: var(--ui-deep);
  font-size: 12px;
  line-height: 1.8;
  color: var(--paper);
}
.dg-card-say[hidden] { display: none; }
.dg-card-desc {
  font-size: 12px;
  line-height: 1.8;
  color: var(--mute);
  margin-top: 6px;
}
.dg-card-desc[hidden] { display: none; }
.dg-card-acts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}
.dg-card-acts[hidden] { display: none; }
.dg-card-acts .dg-act { padding: 7px 14px; font-size: 12px; }

/* ═══════════ 五、窄屏（手机）═══════════ */
/* 卡片在窄屏下堆成一列（v12.1：立像删掉后卡片变矮，不再需要横向滚动条）。 */
@media (max-width: 640px) {
  .dg-cast-row { flex-direction: column; }
  .dg-cast-card { flex: 1 1 auto; min-width: 0; }
  .dg-floor-row { flex-direction: column; }
  .dg-floor-card { flex: 1 1 auto; min-width: 0; }
}

/* ═══════════ 六、无障碍 / 减少动效 ═══════════ */
@media (prefers-reduced-motion: reduce) {
  .dg-cast-card, .dg-cast-head, .dg-say, .dg-room-act { transition: none; }
  .dg-say.pop { animation: none; }
}