/* =========================================
   星月市地下酒馆风格 - 对话框UI定制
========================================= */

/* 1. 基础木质底板风格容器 */
.ui-frame {
    background-color: #1a110b; /* 深邃的地下室底色 */
    background-image: 
        radial-gradient(circle at top right, rgba(44,30,22,0.8), transparent 60%),
        linear-gradient(to bottom, #1a110b, #0f0905);
    color: #e0cda9; /* 羊皮纸/旧书页文字色 */
    font-family: "Microsoft YaHei", "PingFang SC", sans-serif;
    padding: 20px;
    border-radius: 8px;
    border: 2px solid #3d2a1d;
    box-shadow: inset 0 0 30px rgba(0,0,0,0.8), 0 5px 15px rgba(0,0,0,0.5);
    line-height: 1.8;
    font-size: 15px;
    margin-bottom: 20px;
}

/* 2. 正文与文字排版优化 */
.ui-frame p {
    margin: 10px 0 15px 0;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.8);
    letter-spacing: 0.5px;
}

/* 系统提示特殊高亮 */
.ui-frame p[style*="text-align:center"] {
    background: linear-gradient(90deg, transparent, rgba(184, 134, 11, 0.2), transparent);
    padding: 5px 0;
    border-top: 1px solid rgba(184, 134, 11, 0.4);
    border-bottom: 1px solid rgba(184, 134, 11, 0.4);
    text-shadow: 0 0 8px rgba(184, 134, 11, 0.6);
    font-weight: bold;
}

/* 3. 面板主体 (Details) 优化 */
.ui-frame details {
    background: rgba(0, 0, 0, 0.4); /* 面板展开后的底色，形成内陷感 */
    border: 1px solid #3d2a1d;
    border-radius: 6px;
    margin-bottom: 12px;
    overflow: hidden;
    transition: all 0.3s ease;
}

/* 防止嵌套面板（如持有物品）看起来混乱，单独做弱化处理 */
.ui-frame details details {
    margin: 10px;
    border: 1px dashed #b8860b;
    background: rgba(20, 10, 5, 0.5);
}

/* 4. 将栏位升级为整行按钮 (Summary) */
.ui-frame details summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 12px 18px;
    box-sizing: border-box;
    /* 木纹质感渐变按钮 */
    background: linear-gradient(180deg, #4a3322 0%, #2c1e16 100%);
    border-bottom: 1px solid #110a06;
    color: #b8860b; /* 黄铜字色 */
    font-weight: bold;
    font-size: 1.1em;
    cursor: pointer;
    list-style: none; /* 移除默认小三角 */
    text-shadow: 1px 1px 2px #000;
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.05);
    transition: all 0.2s ease;
}

.ui-frame details summary::-webkit-details-marker {
    display: none;
}

/* 按钮右侧添加自定义向下箭头 */
.ui-frame details summary::after {
    content: '▼';
    font-size: 0.9em;
    color: #b8860b;
    transition: transform 0.3s ease;
}

/* 鼠标悬停时的按钮反馈 */
.ui-frame details summary:hover {
    background: linear-gradient(180deg, #5c3f29 0%, #3a271d 100%);
    color: #ffd700;
}

/* 面板打开时按钮的变化：箭头倒转，底边警戒红线 */
.ui-frame details[open] > summary {
    border-bottom: 2px solid #8b0000;
    background: linear-gradient(180deg, #3a271d 0%, #1a110b 100%);
    margin-bottom: 10px;
}
.ui-frame details[open] > summary::after {
    transform: rotate(180deg);
    color: #ff3333;
}

/* 面板内部排版，增加间距让属性列表整洁 */
.ui-frame details > :not(summary) {
    padding: 0 18px 15px 18px;
}

/* 5. 进度条 (HP与精力) 美化 */
.ui-frame progress {
    -webkit-appearance: none;
    appearance: none;
    width: 140px;
    height: 14px;
    border-radius: 7px;
    /* 进度条底层轨道：暗深坑效果 */
    background-color: #0f0905;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.8);
    border: 1px solid #3d2a1d;
    vertical-align: middle;
    margin-left: 8px;
    overflow: hidden;
}

/* 第一个进度条：HP 血条 (红色水晶质感) */
.ui-frame progress:nth-of-type(1)::-webkit-progress-value {
    background: linear-gradient(90deg, #660000, #ff1a1a);
    box-shadow: inset 0 2px 2px rgba(255, 255, 255, 0.3), inset 0 -2px 2px rgba(0, 0, 0, 0.4);
    border-radius: 6px;
    transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1); /* 数值变化时的动画 */
}

/* 第二个进度条：精力条 (蓝色水晶质感) */
.ui-frame progress:nth-of-type(2)::-webkit-progress-value {
    background: linear-gradient(90deg, #002266, #1a8cff);
    box-shadow: inset 0 2px 2px rgba(255, 255, 255, 0.3), inset 0 -2px 2px rgba(0, 0, 0, 0.4);
    border-radius: 6px;
    transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 兼容 Firefox 的进度条样式 */
.ui-frame progress:nth-of-type(1)::-moz-progress-bar {
    background: linear-gradient(90deg, #660000, #ff1a1a);
    border-radius: 6px;
}
.ui-frame progress:nth-of-type(2)::-moz-progress-bar {
    background: linear-gradient(90deg, #002266, #1a8cff);
    border-radius: 6px;
}

/* 6. 悬浮名词 (abbr) 美化 */
.ui-frame abbr {
    text-decoration: underline dashed #b8860b;
    color: #ffcc66;
    cursor: help;
    transition: color 0.2s;
}
.ui-frame abbr:hover {
    color: #ff3333;
}