/* 玄清宗 · 天选之人 极简古风美化（兼容版） */
/* 适用于内容容器，假设你的剧情区有类名 .story-container 或 .game-main 或 .scroll-area */
/* 如果还不知道类名，直接用通配 * 内部限制（但效率低，不推荐） */

/* 给整个故事区域加上深色底（假设最大的父级是 #app 或 .story-wrap，这里用模糊匹配） */
[class*="story"], [class*="content"], [class*="main"], .story-scroll, .scroll-container {
    background-color: #2a241e !important;
    color: #f2e0bc !important;
    font-family: 'Noto Serif SC', '华文楷书', '宋体', serif !important;
    padding: 1.2rem !important;
    border-radius: 24px !important;
}

/* 标题样式 */
h1, h2, .section-title, [class*="title"] {
    color: #e5bf7e !important;
    border-left: 4px solid #b87c3a !important;
    padding-left: 12px !important;
    margin: 1rem 0 0.8rem 0 !important;
    font-weight: 500 !important;
}

/* 按钮 / 选项 */
button, .option, .choice, [role="button"], [class*="btn"] {
    background-color: #3e3025 !important;
    border: 1px solid #b87c3a !important;
    color: #fceccc !important;
    border-radius: 30px !important;
    padding: 8px 18px !important;
    margin: 6px 6px !important;
    font-family: inherit !important;
    cursor: pointer !important;
    transition: none !important; /* 避免动画不支持 */
}
button:hover, .option:hover, .choice:hover, [class*="btn"]:hover {
    background-color: #6b4e33 !important;
    border-color: #e2a86b !important;
    color: #ffffff !important;
}

/* 文本区域（剧情显示） */
.text-box, .story-text, [class*="dialog"], [class*="textbox"] {
    background-color: #1f1a14 !important;
    color: #eedbba !important;
    border: 1px solid #8d6b44 !important;
    border-radius: 20px !important;
    padding: 12px 18px !important;
    line-height: 1.6 !important;
}

/* 人物卡片（如果有） */
.char-card, [class*="card"] {
    background-color: #2f2720 !important;
    border: 1px solid #9c784c !important;
    border-radius: 20px !important;
    padding: 8px !important;
    text-align: center !important;
}
.char-card:hover, [class*="card"]:hover {
    background-color: #4f3a2a !important;
}

/* 人物名字 */
.char-name, [class*="name"] {
    color: #ecc58a !important;
    margin-top: 6px !important;
}

/* 进度条（如果存在） */
.progress-bar, [class*="bar"] {
    background-color: #3e2c1e !important;
    border-radius: 15px !important;
    height: 10px !important;
}
.progress-fill, [class*="fill"] {
    background-color: #e2a14f !important;
    border-radius: 15px !important;
}

/* 分割线 */
hr, .divider {
    border-top: 1px solid #b27d45 !important;
    margin: 16px 0 !important;
}

/* --- 状态栏基础容器样式 --- */
top-status, bottom-status {
    display: block; /* 确保它们作为块级元素占据独立空间 */
    background: linear-gradient(135deg, #2a2a3a 0%, #1a1a2a 100%); /* 深邃的渐变背景 */
    color: #e0e0e0; /* 柔和的浅色文字 */
    padding: 12px 15px; /* 内部边距 */
    margin-bottom: 15px; /* 底部外边距，与内容区隔开 */
    border-radius: 8px; /* 轻微圆角 */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4); /* 阴影增加层次感 */
    font-family: 'FangSong', 'SimSun', serif; /* 仿宋或宋体，古典韵味 */
    font-size: 14px;
    line-height: 1.6;
    border: 1px solid rgba(70, 70, 90, 0.6); /* 细微边框 */
}

/* --- 顶部状态栏特定样式 --- */
top-status {
    font-size: 15px;
    font-weight: bold;
    text-align: center;
    border-bottom: 2px solid rgba(80, 80, 100, 0.8); /* 底部加粗边框 */
    margin-bottom: 20px; /* 顶部状态栏下方留更多空间 */
}

/* --- 可折叠详情（details）样式 --- */
bottom-status details {
    background-color: rgba(35, 35, 50, 0.7); /* 略深一点的背景 */
    border: 1px solid rgba(60, 60, 75, 0.5); /* 边框 */
    border-radius: 6px;
    margin-bottom: 10px; /* 每个详情块之间的间距 */
    transition: all 0.3s ease-in-out; /* 平滑过渡效果 */
}

/* 展开时的背景变化 */
bottom-status details[open] {
    background-color: rgba(45, 45, 65, 0.9); /* 展开时背景更明显 */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

/* --- 摘要（summary，即标题）样式 --- */
bottom-status summary {
    color: #ffd700; /* 金色标题，尊贵感 */
    font-weight: bold;
    padding: 10px 15px;
    cursor: pointer;
    outline: none; /* 移除点击时的轮廓 */
    position: relative;
    list-style: none; /* 隐藏默认的三角箭头 */
    font-size: 16px;
    text-shadow: 0 0 5px rgba(255, 215, 0, 0.4); /* 标题发光效果 */
}

/* 自定义展开/折叠图标 */
bottom-status summary::-webkit-details-marker {
    display: none; /* 隐藏 Chrome 默认箭头 */
}
bottom-status summary::before {
    content: '▶'; /* 替换为右箭头 */
    position: absolute;
    left: 15px; /* 调整位置 */
    color: #ffd700;
    transition: transform 0.3s ease-in-out;
}
bottom-status details[open] summary::before {
    transform: rotate(90deg); /* 展开时旋转箭头 */
}

/* 鼠标悬停在标题上的效果 */
bottom-status summary:hover {
    background-color: rgba(60, 60, 75, 0.4); /* 悬停时背景变色 */
    color: #ffe066; /* 标题颜色变亮 */
}

/* --- 详情内容（p标签）样式 --- */
bottom-status details p {
    color: #c0c0c0; /* 柔和的浅灰色文本 */
    padding: 5px 20px; /* 内部填充，略微缩进 */
    margin: 0; /* 移除默认段落外边距 */
    border-top: 1px dashed rgba(80, 80, 100, 0.3); /* 虚线分隔 */
}

/* 第一个p标签不需要顶部虚线 */
bottom-status details p:first-of-type {
    border-top: none;
}

/* 粗体文本（strong）样式 */
bottom-status details strong {
    color: #aaddff; /* 突出显示，使用淡蓝色调 */
    font-weight: bold;
}