/* ========================================================= */
/* ===== 1. 折叠栏整体 ===== */
/* ========================================================= */
details {
  display: block;
  background: #0f0f16;
  border-radius: 0;
  padding: 0;
  margin-bottom: 12px;
  max-width: 100%;
  width: 100%;
  box-sizing: border-box;
  border: 1px solid #1a1a2e;
  border-left: 4px solid #1a1a5e;
  box-shadow: 0 2px 10px rgba(0,0,0,0.40);
  transition: box-shadow .2s ease, border-color .2s ease;
  overflow: hidden;
}
details[open] {
  box-shadow: 0 4px 18px rgba(61,90,254,0.15);
  border-color: #2a2a4e;
}
details:hover {
  border-left-color: #3d5afe;
}

/* 折叠标题 · 黑底霓虹菜单风 */
details summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  list-style: none;
  cursor: pointer;
  position: relative;
  background: #0a0a0f;
  border-radius: 0;
  padding: 14px 22px;
  font-weight: 800;
  letter-spacing: 1px;
  color: #c9c9ff;
  font-style: italic;
  font-size: 1.15em;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  border-left: 4px solid #1a1a5e;
  text-align: left;
  user-select: none;
  transition: all .18s ease;
  overflow: hidden;
}

/* 左侧竖线装饰 */
details summary::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: #1a1a5e;
  transition: background .18s ease;
}

/* 右侧蓝色菱形点缀 */
details summary::after {
  content: "◆";
  font-size: 0.7em;
  color: #3d5afe;
  text-shadow: 0 0 6px rgba(61,90,254,0.6);
  transition: all .18s ease;
  margin-left: auto;
}

/* 悬停高亮效果 */
details summary:hover {
  background: #f0ff00;
  color: #0a0a0f;
  border-left-color: #0a0a0f;
  padding-right: 34px;
}

details summary:hover::before {
  background: #0a0a0f;
}

details summary:hover::after {
  content: "▶";
  color: #0a0a0f;
  text-shadow: none;
  transform: translateX(4px);
}

details[open] summary::after {
  transform: rotate(180deg);
}
details summary::-webkit-details-marker { display: none; }
details summary::marker { display: none; content: ""; }

/* 叙事正文段落 */
.narrative-p {
  text-indent: 2em;
  line-height: 1.9;
  margin: 0.8em 0;
}

/* ========================================================= */
/* ===== 2. 折叠内容区 · 黑底适配 ===== */
/* ========================================================= */
.details-body {
  background: #14141f;
  color: #d8d8e8;
  padding: 16px 22px;
  font-size: 0.95em;
  line-height: 1.7;
  border-top: 1px solid #1e1e32;
}

/* 保证内容区里的元素也是暗色文字 */
.details-body p,
.details-body span,
.details-body div,
.details-body li {
  color: #d8d8e8;
}

/* 链接颜色 */
.details-body a {
  color: #7aa2ff;
  text-decoration: none;
}
.details-body a:hover {
  color: #a8c3ff;
  text-decoration: underline;
}

/* ========================================================= */
/* ===== 3. 对话气泡 · 强制角色色 ===== */
/* ========================================================= */
.dialogue-box,
.dialogue-box[data-role] {
    position: relative;
    display: block;
    border-radius: 4px 16px 16px 16px !important;
    padding: 12px 18px 12px 16px !important;
    margin: 14px 0 14px 8px !important;
    text-indent: 0 !important;
    border-left-width: 4px !important;
    border-left-style: solid !important;
}

.dialogue-box .speaker,
.dialogue-box[data-role] .speaker {
    display: block;
    font-size: 0.82em;
    font-weight: 700;
    margin-bottom: 4px;
    letter-spacing: 0.5px;
}

.dialogue-box .dialogue-text,
.dialogue-box[data-role] .dialogue-text {
    display: block;
    font-size: 1.04em;
    line-height: 1.7;
}

/* 李书雅 · 网球白绿 */
.dialogue-box[data-role="shuya"],
.dialogue-box[data-role="李书雅"] {
    background: linear-gradient(135deg, #f0f7ee 0%, #e2f0dd 100%) !important;
    border-left-color: #5a9e5a !important;
    box-shadow: 0 2px 10px rgba(90,158,90,0.14) !important;
}
.dialogue-box[data-role="shuya"] .speaker,
.dialogue-box[data-role="李书雅"] .speaker { color: #3c7a3c !important; }
.dialogue-box[data-role="shuya"] .dialogue-text,
.dialogue-box[data-role="李书雅"] .dialogue-text { color: #2f6b2f !important; }

/* 蔡静研 · 茶灰蓝 */
.dialogue-box[data-role="jingyan"],
.dialogue-box[data-role="蔡静研"] {
    background: linear-gradient(135deg, #eef2f5 0%, #e0e8ef 100%) !important;
    border-left-color: #7a93a8 !important;
    box-shadow: 0 2px 10px rgba(122,147,168,0.14) !important;
}
.dialogue-box[data-role="jingyan"] .speaker,
.dialogue-box[data-role="蔡静研"] .speaker { color: #4f6b7f !important; }
.dialogue-box[data-role="jingyan"] .dialogue-text,
.dialogue-box[data-role="蔡静研"] .dialogue-text { color: #41607a !important; }

/* 高慧兰 · 墨金 */
.dialogue-box[data-role="huilan"],
.dialogue-box[data-role="高慧兰"] {
    background: linear-gradient(135deg, #f6f1e3 0%, #efe7d0 100%) !important;
    border-left-color: #b08d2f !important;
    box-shadow: 0 2px 10px rgba(176,141,47,0.12) !important;
}
.dialogue-box[data-role="huilan"] .speaker,
.dialogue-box[data-role="高慧兰"] .speaker { color: #7c611c !important; }
.dialogue-box[data-role="huilan"] .dialogue-text,
.dialogue-box[data-role="高慧兰"] .dialogue-text { color: #6b541a !important; }

/* 玩家 · 深紫 */
.dialogue-box[data-role="user"],
.dialogue-box[data-role="玩家"] {
    background: linear-gradient(135deg, #f3ecfb 0%, #ece0fa 100%) !important;
    border-left-color: #7a4fbf !important;
    box-shadow: 0 2px 10px rgba(122,79,191,0.12) !important;
}
.dialogue-box[data-role="user"] .speaker,
.dialogue-box[data-role="玩家"] .speaker { color: #5a2f9f !important; }
.dialogue-box[data-role="user"] .dialogue-text,
.dialogue-box[data-role="玩家"] .dialogue-text { color: #7a4fbf !important; }

/* ========================================================= */
/* ===== 4. 数值进度条 ===== */
/* ========================================================= */
.stat-bar { margin: 14px 0; }
.stat-bar .stat-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 700;
  font-size: 0.92em;
  color: #1a1a2e;
  margin-bottom: 6px;
}
.stat-bar .stat-label span {
  font-weight: 500;
  font-size: 0.88em;
  color: #555;
}
.stat-bar .bar-track {
  width: 100%;
  height: 14px;
  background: #e2e6ee;
  border-radius: 999px;
  overflow: hidden;
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.12);
}
.stat-bar .bar-fill {
  height: 100%;
  border-radius: 999px;
  transition: width .6s ease;
  box-shadow: 0 0 8px rgba(0,0,0,0.15) inset;
}
.stat-bar.trust .bar-fill {
  background: linear-gradient(90deg, #3d7bd4 0%, #4fc3c0 100%);
}
.stat-bar.lust .bar-fill {
  background: linear-gradient(90deg, #ff9ac4 0%, #e8455f 100%);
}
.stat-bar.risk .bar-fill {
  background: linear-gradient(90deg, #ffd166 0%, #ef476f 100%);
}
.stat-bar.intimacy .bar-fill {
  background: linear-gradient(90deg, #a06bff 0%, #6b3fd4 100%);
}
.stat-detail-label {
  display: inline-block;
  font-size: 0.85em;
  font-weight: 600;
  color: #2957a2;
  margin-top: 8px;
  margin-right: 4px;
}

/* ========================================================= */
/* ===== 5. 档案标签栏（精简常驻版） ===== */
/* ========================================================= */
.profile-tags {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 10px 0;
}
.tag-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.tag-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 26px;
  background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
  border: 1px solid #90caf9;
  border-radius: 6px;
  font-size: 0.82em;
  font-weight: 700;
  color: #1565c0;
  flex-shrink: 0;
}
.tag-content {
  font-size: 0.92em;
  color: #333;
  line-height: 1.5;
}

/* ========================================================= */
/* ===== 6. 立绘 ===== */
/* ========================================================= */
.profile-portrait {
  width: 100%;
  max-width: 280px;
  margin: 0 auto 14px auto;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(30,58,47,0.18);
  border: 2px solid #c9a85c;
  background: #f5f3ec;
}
.profile-portrait img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

/* ========================================================= */
/* ===== 7. 详细档案折叠区（纵向列表） ===== */
/* ========================================================= */
.profile-detail {
  margin-top: 14px;
  background: linear-gradient(135deg, #faf7f2 0%, #f5f0e8 100%);
  border: 1px solid #e8e0d4;
  border-radius: 12px;
  padding: 12px 16px;
}
.profile-detail > summary {
  background: none !important;
  box-shadow: none !important;
  color: #8d6e63 !important;
  padding: 4px 0 !important;
  font-weight: 600;
  font-size: 0.9em;
  cursor: pointer;
  list-style: none;
}
.profile-detail > summary::after {
  content: "▾";
  margin-left: 6px;
  font-size: 0.8em;
  color: #bcaaa4;
  transition: transform .3s ease;
}
.profile-detail[open] > summary::after {
  transform: rotate(180deg);
}
.detail-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 10px 0 14px 0;
}
.detail-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 6px 0;
  border-bottom: 1px dashed #d7ccc8;
}
.detail-item:last-child {
  border-bottom: none;
}
.detail-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 26px;
  padding: 0 10px;
  background: linear-gradient(135deg, #efebe9 0%, #d7ccc8 100%);
  border: 1px solid #bcaaa4;
  border-radius: 8px;
  font-size: 0.82em;
  font-weight: 600;
  color: #5d4037;
  flex-shrink: 0;
  margin-top: 1px;
}
.detail-text {
  font-size: 0.88em;
  color: #4e342e;
  line-height: 1.6;
  flex: 1;
}

/* ===== 人设/能力/关系/独白 分隔区 ===== */
.profile-meta {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid #e8e0d4;
}
.profile-meta p {
  font-size: 0.88em;
  color: #5d4037;
  margin: 5px 0;
  line-height: 1.5;
}
.profile-meta b { color: #3e2723; font-weight: 600; }
.profile-meta i { color: #8d6e63; }


/* ========================================================= */
/* ===== 8. 外层容器 · 整体背景 ===== */
/* ========================================================= */
.khorra-output {
  max-width: 100%;
  width: 100%;
  box-sizing: border-box;
}

/* ========================================================= */
/* ===== 9. 时钟日期锚点 ===== */
/* ========================================================= */
.time-header {
  background: linear-gradient(135deg, #2c3e50 0%, #34495e 40%, #2c3e50 100%);
  border-radius: 14px;
  padding: 18px 22px;
  margin-bottom: 20px;
  color: #ecf0f1;
  box-shadow: 0 4px 20px rgba(30, 40, 50, 0.25);
  border: 1px solid rgba(255,255,255,0.08);
  position: relative;
  overflow: hidden;
}
.time-header::before {
  content: "";
  position: absolute;
  top: -50%;
  right: -20%;
  width: 200px;
  height: 200px;
  background: radial-gradient(circle, rgba(255,255,255,0.04) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}

/* 主行：天数 + 时段 */
.time-row-main {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 10px;
}
.time-icon {
  font-size: 1.6em;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,0.3));
}
.time-day {
  font-size: 1.5em;
  font-weight: 700;
  letter-spacing: 1px;
  color: #ffffff;
}
.time-sep {
  font-size: 1.3em;
  color: #7f8c8d;
  margin: 0 2px;
}
.time-period {
  font-size: 1.2em;
  font-weight: 600;
  color: #e8d5a3;
}
.time-clock {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: linear-gradient(135deg, #f7efe0 0%, #efe5d0 100%);
  color: #5a4a3a;
  font-family: 'Georgia', serif;
  font-size: 0.92em;
  font-weight: 600;
  letter-spacing: 0.5px;
  padding: 4px 12px;
  border-radius: 20px;
  border: 1px solid #d8c9ac;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.6);
  margin-left: 4px;
}
.time-remain {
  margin-left: auto;
  font-size: 0.85em;
  color: #95a5a6;
  background: rgba(255,255,255,0.08);
  padding: 3px 12px;
  border-radius: 20px;
}

/* 位置行 */
.time-row-loc {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
  font-size: 0.9em;
}
.time-loc-icon {
  font-size: 1em;
}
.time-loc-text {
  color: #bdc3c7;
  letter-spacing: 0.5px;
}

/* 天气行 */
.time-row-weather {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85em;
}
.time-weather-icon {
  font-size: 1em;
}
.time-weather-text {
  color: #95a5a6;
}

/* 环境音/周围行 */
.time-row-surroundings {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  font-size: 0.85em;
}
.time-surroundings-icon {
  font-size: 1em;
}
.time-surroundings-text {
  color: #95a5a6;
  letter-spacing: 0.5px;
  font-style: italic;
}

/* 分隔线 */
.time-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.15) 20%, rgba(255,255,255,0.15) 80%, transparent 100%);
  margin: 14px 0 12px 0;
}

/* 预算行 */
.time-row-budget {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.85em;
  flex-wrap: wrap;
}
.budget-icon {
  font-size: 1em;
}
.budget-label {
  color: #95a5a6;
  margin-right: 6px;
}
.budget-item {
  font-weight: 600;
  letter-spacing: 0.3px;
  padding: 2px 10px;
  border-radius: 12px;
  font-size: 0.9em;
}
.budget-item.shuya {
  color: #a0d2a0;
  background: rgba(90,158,90,0.15);
}
.budget-item.jingyan {
  color: #a8bfcf;
  background: rgba(122,147,168,0.15);
}
.budget-item.huilan {
  color: #d4b85c;
  background: rgba(176,141,47,0.15);
}
.budget-sep {
  color: #5a6a7a;
  font-weight: 300;
}

/* ========================================================= */
/* ===== 10. 正文叙事包裹 · 暖色卡片 ===== */
/* ========================================================= */
.narrative-wrapper {
  background: linear-gradient(180deg, #fffdf9 0%, #fefaf4 30%, #fdf7ee 100%);
  border-radius: 12px;
  padding: 22px 24px;
  margin-bottom: 18px;
  border: 1px solid #e8ddd0;
  box-shadow:
    0 2px 8px rgba(140, 110, 70, 0.06),
    inset 0 0 0 1px rgba(255,255,255,0.8);
  line-height: 1.85;
  color: #3d3226;
}

/* ========================================================= */
/* ===== 11. 内心独白样式 ===== */
/* ========================================================= */
.inner-monologue {
  font-style: italic;
  color: #7a6a5c;
  background: linear-gradient(135deg, #fefaf4 0%, #fdf6ed 100%);
  border-left: 3px solid #c9a85c;
  padding: 12px 18px;
  margin: 16px 0;
  border-radius: 0 10px 10px 0;
  font-size: 0.95em;
  line-height: 1.7;
  text-indent: 0;
}

/* ========================================================= */
/* ===== 12. 数值面板 · 预算迷你条 ===== */
/* ========================================================= */
.budget-mini {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 8px 0 14px 0;
  padding: 8px 14px;
  background: linear-gradient(135deg, #f0f4f8 0%, #e8edf3 100%);
  border-radius: 10px;
  border: 1px solid #dce0e8;
}
.budget-mini-label {
  font-size: 0.82em;
  font-weight: 700;
  color: #3d5a80;
  white-space: nowrap;
}
.budget-mini-bar {
  flex: 1;
  height: 8px;
  background: #dce0e8;
  border-radius: 999px;
  overflow: hidden;
}
.budget-mini-fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #f0a050 0%, #e07040 100%);
  transition: width .5s ease;
}
.budget-mini-num {
  font-size: 0.82em;
  font-weight: 700;
  color: #e07040;
  white-space: nowrap;
}

/* ========================================================= */
/* ===== 13. 副数值进度条颜色（补缺） ===== */
/* ========================================================= */
.stat-bar.desire .bar-fill {
  background: linear-gradient(90deg, #f9a8d4 0%, #e8457a 100%);
}

/* ========================================================= */
/* ===== 14. 响应式微调 ===== */
/* ========================================================= */
@media (max-width: 600px) {
  .time-row-main {
    flex-wrap: wrap;
    gap: 4px;
  }
  .time-remain {
    margin-left: 0;
  }
  .time-row-budget {
    gap: 6px;
    flex-wrap: wrap;
  }
  .budget-item {
    font-size: 0.85em;
    padding: 2px 8px;
  }
  .narrative-wrapper {
    padding: 14px 16px;
  }
  .khorra-output {
    padding: 12px 14px;
  }
  .stat-label {
    flex-wrap: wrap;
    gap: 4px;
  }
  .dialogue-box,
  .dialogue-box[data-role] {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

/* ========================================================= */
/* ===== 15. 亲密场景插图 ===== */
/* ========================================================= */
.scene-illustration {
  width: 100%;
  max-width: 420px;
  margin: 18px auto;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(30, 20, 10, 0.18);
  border: 2px solid #d4c5a9;
  background: #faf7f2;
  text-align: center;
}
.scene-illustration img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}
.scene-caption {
  display: block;
  padding: 8px 14px;
  font-size: 0.82em;
  font-weight: 600;
  color: #8d6e63;
  background: linear-gradient(180deg, #fdf8f3 0%, #f5efe4 100%);
  letter-spacing: 0.5px;
  border-top: 1px solid #e8ddd0;
}

/* ========================================================= */
/* ===== 16. 阶段解锁提醒 ===== */
/* ========================================================= */
.unlock-notice {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 14px 0 18px 0;
  padding: 12px 20px;
  background: linear-gradient(135deg, #fdf6e8 0%, #f9edd0 100%);
  border: 1px solid #d4b85c;
  border-radius: 10px;
  font-size: 0.92em;
  color: #5d4037;
  box-shadow: 0 2px 10px rgba(176,141,47,0.12);
}
.unlock-icon {
  font-size: 1.3em;
}
.unlock-text strong {
  color: #8b6f2e;
  font-weight: 700;
}

/* ========================================================= */
/* ===== 17. 数值/状态区 · 强制换行约束 ===== */
/* ========================================================= */
details,
details > * {
  word-wrap: break-word;
  overflow-wrap: anywhere;
  word-break: break-word;
  white-space: normal;
  max-width: 100%;
}
.stat-panel,
.stat-block,
.stat-row {
  max-width: 100%;
  word-wrap: break-word;
  overflow-wrap: anywhere;
}
.stat-label,
.stat-label span,
.stat-detail-label {
  word-wrap: break-word;
  overflow-wrap: anywhere;
  white-space: normal;
  max-width: 100%;
}
.stat-bar,
.bar-track,
.bar-fill {
  min-width: 0;
  max-width: 100%;
}
.budget-mini {
  flex-wrap: wrap;
}
.unlock-notice {
  flex-wrap: wrap;
  text-align: center;
}

/* ========================================================= */
/* ===== 18. 黑底折叠内容区 · 组件深色覆盖 ===== */
/* ========================================================= */

/* 档案标签栏：神态/着装等 */
.details-body .tag-label {
  background: linear-gradient(135deg, #1a1a3e 0%, #252550 100%) !important;
  border-color: #3d5afe !important;
  color: #7aa2ff !important;
  box-shadow: 0 0 8px rgba(61,90,254,0.15);
}
.details-body .tag-content {
  color: #e8e8f5 !important;
}

/* 详细档案卡片 */
.details-body .profile-detail {
  background: linear-gradient(135deg, #161625 0%, #1c1c2e 100%) !important;
  border-color: #2a2a45 !important;
}
.details-body .profile-detail > summary {
  color: #a0a0d0 !important;
  font-style: normal !important;
  background: transparent !important;
  border-left: none !important;
  padding: 4px 0 !important;
  font-weight: 600 !important;
  font-size: 0.9em !important;
}
.details-body .profile-detail > summary::before {
  display: none !important;
}
.details-body .profile-detail > summary::after {
  content: "▾" !important;
  color: #7a7aaa !important;
  text-shadow: none !important;
  transform: none !important;
  margin-left: 8px !important;
}
.details-body .profile-detail[open] > summary::after {
  transform: rotate(180deg) !important;
}
.details-body .profile-detail > summary:hover {
  color: #f0ff00 !important;
  background: transparent !important;
}
.details-body .detail-item {
  border-bottom-color: #2a2a45 !important;
}
.details-body .detail-tag {
  background: linear-gradient(135deg, #1f1f35 0%, #2a2a45 100%) !important;
  border-color: #4a4a6a !important;
  color: #c9c9ff !important;
}
.details-body .detail-text {
  color: #d8d8e8 !important;
}
.details-body .profile-meta {
  border-top-color: #2a2a45 !important;
}
.details-body .profile-meta p {
  color: #b8b8d8 !important;
}
.details-body .profile-meta b {
  color: #f0ff00 !important;
}
.details-body .profile-meta i {
  color: #a0a0d0 !important;
}

/* 数值状态面板 */
.details-body .stat-bar .stat-label {
  color: #f0f0ff !important;
}
.details-body .stat-bar .stat-label span {
  color: #a0a0d0 !important;
}
.details-body .bar-track {
  background: #2a2a45 !important;
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.4) !important;
}
.details-body .stat-detail-label {
  color: #7aa2ff !important;
}

/* 本日消耗预算迷你条 */
.details-body .budget-mini {
  background: linear-gradient(135deg, #161625 0%, #1c1c2e 100%) !important;
  border-color: #2a2a45 !important;
}
.details-body .budget-mini-label {
  color: #a0a0d0 !important;
}
.details-body .budget-mini-bar {
  background: #2a2a45 !important;
}
.details-body .budget-mini-num {
  color: #ffb347 !important;
}

/* 立绘容器 */
.details-body .profile-portrait {
  background: #0f0f16 !important;
  border-color: #3d5afe !important;
  box-shadow: 0 4px 16px rgba(61,90,254,0.12) !important;
}

/* 阶段解锁提醒（如果在折叠内） */
.details-body .unlock-notice {
  background: linear-gradient(135deg, #1a1a25 0%, #252038 100%) !important;
  border-color: #d4b85c !important;
  color: #e8d8b8 !important;
}
.details-body .unlock-text strong {
  color: #f0ff00 !important;
}
/* ========================================================= */
/* ===== 19. 信息行强制换行 ===== */
/* ========================================================= */
.info-line {
  display: block;
  width: 100%;
  margin: 6px 0;
  line-height: 1.6;
}
.info-line .stat-detail-label {
  display: inline;
  margin-right: 4px;
}
.info-line.note {
  color: #8888aa;
  font-size: 0.9em;
  font-style: italic;
}
/* ===== 20. 分支剧情选项 ===== */
.choice-panel {
  margin-top: 18px;
  background: #0a0a0f;
  border: 1px solid #c8ff00;
  border-left: 4px solid #c8ff00;
  box-shadow: 0 0 16px rgba(200, 255, 0, 0.12), inset 0 0 0 1px rgba(200, 255, 0, 0.08);
  padding: 18px 22px;
  position: relative;
  overflow: hidden;
  transform: skewX(-3deg);
}
.choice-panel > * {
  transform: skewX(3deg);
}
.choice-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
.choice-icon {
  font-size: 1.3em;
  color: #c8ff00;
  text-shadow: 0 0 8px rgba(200, 255, 0, 0.4);
}
.choice-title {
  font-size: 1.15em;
  font-weight: 800;
  font-style: italic;
  letter-spacing: 1px;
  color: #c8ff00;
  text-transform: uppercase;
  text-shadow: 0 0 6px rgba(200, 255, 0, 0.25);
}
.choice-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.choice-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 18px;
  background: rgba(200, 255, 0, 0.04);
  border: 1px solid rgba(200, 255, 0, 0.25);
  cursor: pointer;
  transition: all .18s ease;
  position: relative;
}
.choice-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: #c8ff00;
  opacity: 0.6;
  transition: opacity .18s ease;
}
.choice-card:hover {
  background: #c8ff00;
  border-color: #c8ff00;
  box-shadow: 0 0 20px rgba(200, 255, 0, 0.25);
}
.choice-card:hover::before {
  opacity: 1;
  background: #0a0a0f;
}
.choice-left {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}
.choice-label {
  display: inline-block;
  width: fit-content;
  font-size: 0.72em;
  font-weight: 800;
  letter-spacing: 1.5px;
  color: #0a0a0f;
  background: #c8ff00;
  padding: 2px 8px;
  text-transform: uppercase;
}
.choice-text {
  font-size: 0.95em;
  color: #d8d8e8;
  line-height: 1.5;
}
.choice-card:hover .choice-text {
  color: #0a0a0f;
}
.choice-arrow {
  font-size: 1em;
  color: #c8ff00;
  transition: transform .18s ease;
}
.choice-card:hover .choice-arrow {
  color: #0a0a0f;
  transform: translateX(4px);
}
.choice-note {
  margin-top: 12px;
  font-size: 0.82em;
  color: #6a6a8a;
  font-style: italic;
  text-align: right;
}