/* --- 恋爱喜剧少女粉主题美化代码 --- */

/* :root 定义了整个主题的颜色变量，方便后续修改和维护 */
:root {
  --theme-bg-color: #fff8fa; /* 主背景色 - 淡淡的樱花粉 */
  --card-bg-color: #ffffff; /* 卡片背景色 - 纯白 */
  --card-border-color: #ffcce0; /* 卡片边框色 - 柔和的粉色 */
  --card-shadow-color: rgba(255, 105, 180, 0.15); /* 卡片阴影色 - 粉色调透明阴影 */
  
  --header-bg-gradient: linear-gradient(135deg, #fff0f5 0%, #ffe4ec 100%); /* 标题栏渐变 */
  --header-bg-gradient-hover: linear-gradient(135deg, #ffe4ec 0%, #ffdae5 100%); /* 标题栏悬停渐变 */
  
  --header-text-color: #e83d84; /* 标题文字颜色 - 醒目的桃红色 */
  --body-text-color: #6d5560; /* 正文文字颜色 - 深玫瑰色，易于阅读 */
  --accent-color: #ff69b4; /* 强调色 - 亮粉色 */
  
  --table-header-bg: #fff0f5; /* 表格头部背景 */
  --table-row-even-bg: #fff8fa; /* 表格偶数行背景 */
}

/* --- 全局基础样式 --- */
.markdown-body {
  background-color: var(--theme-bg-color);
  color: var(--body-text-color);
  font-family: 'Helvetica Neue', 'Arial', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
}

/* --- 卡片化 <details> 容器 --- */
/* 为每个可折叠区域设置卡片基础样式 */
.markdown-body details {
  background: var(--card-bg-color);
  border: 1px solid var(--card-border-color);
  border-radius: 12px; /* 更圆润的卡片角 */
  margin: 1.2em 0; /* 卡片间距 */
  box-shadow: 0 4px 15px var(--card-shadow-color);
  transition: all 0.3s ease-in-out;
  overflow: hidden; /* 防止内部元素溢出圆角 */
}

/* 展开状态下的卡片样式 */
.markdown-body details[open] {
  box-shadow: 0 8px 25px var(--card-shadow-color);
}

/* 卡片内容区域的内边距 */
.markdown-body details > *:not(summary) {
  padding: 0 1.5em 1.5em;
  border-top: 1px dashed var(--card-border-color); /* 标题与内容的分隔线 */
  margin-top: -1px; /* 修正边框带来的额外高度 */
}

/* --- 卡片标题 <summary> 美化 --- */
.markdown-body summary {
  position: relative;
  display: block; /* 确保可以设置padding等 */
  padding: 1em 1.5em;
  background: var(--header-bg-gradient);
  color: var(--header-text-color);
  font-weight: bold;
  font-size: 1.1em;
  cursor: pointer;
  transition: background 0.3s ease;
  outline: none; /* 移除点击时的焦点框 */
}

/* 鼠标悬停在标题上时的效果 */
.markdown-body summary:hover {
  background: var(--header-bg-gradient-hover);
  transform: scale(1.01); /* 轻微放大，增加交互感 */
}

/* 移除浏览器默认的三角箭头 */
.markdown-body summary::-webkit-details-marker,
.markdown-body summary::marker {
  display: none;
  content: "";
}

/* --- 标题装饰与展开/折叠图标 --- */

/* 标题前的装饰性小图标 - ✨闪亮爱心 */
.markdown-body summary::before {
  content: '💖';
  font-size: 1.2em;
  margin-right: 0.6em;
  vertical-align: middle;
  transition: transform 0.3s ease;
}

.markdown-body summary:hover::before {
  transform: rotate(20deg) scale(1.2); /* 悬停时图标旋转放大 */
}

/* 自定义展开/折叠的雪花图标 */
.markdown-body summary::after {
  content: '❄️'; /* 折叠状态是雪花 */
  position: absolute;
  right: 1.5em;
  top: 50%;
  transform: translateY(-50%) rotate(0deg);
  font-size: 1.2em;
  transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55); /* 果冻回弹效果 */
}

/* 展开状态下，雪花图标变为樱花 */
.markdown-body details[open] > summary::after {
  content: '🌸'; /* 展开状态是樱花 */
  transform: translateY(-50%) rotate(360deg);
}

/* --- 特定卡片内容美化 --- */

/* 状态栏中的分割线 */
.markdown-body details hr {
  border: none;
  border-top: 1px solid var(--card-border-color);
  margin: 1em 0;
}

/* 状态栏中的列表 */
.markdown-body details ul {
  list-style: none;
  padding-left: 0;
}
.markdown-body details ul li {
  padding: 0.3em 0;
}
.markdown-body details ul li strong {
  color: var(--header-text-color);
}

/* 记忆回廊 - 表格美化 */
.markdown-body details table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
}
.markdown-body details th, 
.markdown-body details td {
  padding: 0.8em 1em;
  text-align: left;
  border-bottom: 1px solid var(--card-border-color);
}
.markdown-body details th {
  background-color: var(--table-header-bg);
  font-weight: bold;
  color: var(--header-text-color);
}
.markdown-body details tr:nth-child(even) {
  background-color: var(--table-row-even-bg);
}

/* 剧情分支 - 选项列表美化 */
.markdown-body details ul[class*="分支"] li, /* 尝试匹配包含“分支”的列表 */
.markdown-body details summary:is(:contains("剧情分支")) + * li { /* 更通用的选择 */
  list-style-type: none;
  margin-left: 0;
  padding: 0.5em 0 0.5em 2em;
  position: relative;
  transition: background-color 0.2s ease;
  border-radius: 8px;
}
.markdown-body details ul[class*="分支"] li:hover,
.markdown-body details summary:is(:contains("剧情分支")) + * li:hover {
  background-color: var(--table-header-bg);
}

/* 剧情分支选项前的装饰图标 */
.markdown-body details ul[class*="分支"] li::before,
.markdown-body details summary:is(:contains("剧情分支")) + * li::before {
  content: '🔸';
  position: absolute;
  left: 0;
  top: 0.5em;
  color: var(--accent-color);
}

/* 排除思维链和记忆回廊的卡片标题装饰，使其更简洁 */
.markdown-body details summary:is(:contains("思维链"), :contains("记忆回廊"))::before {
  content: '💡'; /* 思维链图标 */
}
.markdown-body details summary:is(:contains("记忆回廊"))::before {
  content: '📜'; /* 记忆回廊图标 */
}