/* =========================================
   角色扮演对话框与男女主台词专属美化 CSS
   ========================================= */

/* 1. 整体面板美化：提供沉浸式暗色背景与柔和排版 */
.urban-panel {
    font-family: 'PingFang SC', 'Helvetica Neue', 'Microsoft YaHei', sans-serif;
    line-height: 1.8;
    color: #dcdde1;
    background: linear-gradient(145deg, #1e1e24 0%, #15151a 100%);
    padding: 24px;
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), inset 0 1px 2px rgba(255, 255, 255, 0.05);
    letter-spacing: 0.5px;
}

/* 2. 旁白与环境描写段落 */
.urban-panel p {
    margin-bottom: 14px;
    text-indent: 2em;
    color: #b2bec3;
    transition: color 0.3s ease;
}

/* 3. 男方对话专属样式 (类名: aus) */
span.aus {
    color: #4bacff; /* 沉稳清爽的蓝 */
    font-weight: bold;
    text-indent: 0;
    display: inline-block;
    padding: 4px 10px;
    margin: 4px 0;
    background: rgba(75, 172, 255, 0.08);
    border-left: 3px solid #4bacff;
    border-radius: 0 8px 8px 0;
    text-shadow: 0 0 8px rgba(75, 172, 255, 0.2);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

span.aus:hover {
    background: rgba(75, 172, 255, 0.15);
    text-shadow: 0 0 12px rgba(75, 172, 255, 0.5);
    transform: translateX(3px);
}

/* 4. 女方对话专属样式 (类名: aes) */
span.aes {
    color: #ff6b81; /* 暧昧诱惑的粉红 */
    font-weight: bold;
    text-indent: 0;
    display: inline-block;
    padding: 4px 10px;
    margin: 4px 0;
    background: rgba(255, 107, 129, 0.08);
    border-right: 3px solid #ff6b81;
    border-radius: 8px 0 0 8px;
    text-shadow: 0 0 8px rgba(255, 107, 129, 0.2);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

span.aes:hover {
    background: rgba(255, 107, 129, 0.15);
    text-shadow: 0 0 12px rgba(255, 107, 129, 0.5);
    transform: translateX(-3px);
}

/* 5. 分割线美化，用于切分场景与数值区 */
.urban-panel hr {
    border: none;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    margin: 24px 0;
}

/* 6. 折叠面板(状态栏)美化 */
.urban-panel details {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    padding: 10px 14px;
    margin-bottom: 12px;
}

.urban-panel details summary {
    color: #dcdde1;
    font-weight: bold;
    cursor: pointer;
    user-select: none;
    outline: none;
    display: flex;
    align-items: center;
}

.urban-panel details summary:hover {
    color: #ff758c;
}

/* 7. 互动选项美化 */
.urban-panel q {
    display: block;
    text-decoration: none;
    font-style: normal;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #a4b0be;
    padding: 10px 15px;
    margin-bottom: 8px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.urban-panel q:hover {
    background: rgba(255, 107, 129, 0.1);
    border-color: #ff6b81;
    color: #fff;
    padding-left: 20px;
}