/* ===== 新增：角色档案卡片美化CSS ===== */
.character-profile-scope {
    /* --- 基础样式 --- */
    background: rgba(0, 0, 0, 0.3); /* 半透明背景，更好地融入页面 */
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: var(--spacing-lg);
    margin-bottom: var(--spacing-md);
    box-shadow: var(--shadow-card);
    backdrop-filter: blur(5px); /* 毛玻璃效果 */
    transition: transform var(--transition-normal), box-shadow var(--transition-normal);
    --accessible-red: #FF5555; /* 无障碍优化：定义一个对比度足够的红色 */
}

/* 鼠标悬浮时轻微放大，增强交互感 */
@media (hover: hover) {
    .character-profile-scope:hover {
        transform: translateY(-5px);
        box-shadow: 0 0 20px rgba(255, 85, 85, 0.7);
    }
}

/* --- 数据列表核心布局 (桌面端) --- */
.character-profile-scope dl {
    display: grid;
    grid-template-columns: max-content 1fr; /* 标签列自适应宽度，内容列占满剩余空间 */
    gap: var(--spacing-md) var(--spacing-lg);
    align-items: center; /* 垂直居中对齐 */
}

/* 包裹每对 dt/dd，用于控制跨行 */
.character-profile-scope dl > div {
    display: contents; /* 让 div 表现得像是不存在，其子元素直接成为 grid 的一部分 */
}

/* --- 标签(dt)样式 --- */
.character-profile-scope dt {
    color: var(--text-secondary);
    font-weight: bold;
    text-align: right; /* 右对齐，形成优雅的对齐线 */
    font-size: 0.9em;
}
.character-profile-scope dt::after {
    content: '：'; /* 自动添加冒号 */
    margin-left: 4px;
}

/* --- 内容(dd)样式 --- */
.character-profile-scope dd {
    color: var(--text-primary);
    margin: 0; /* 重置默认的 dd margin */
    word-break: break-word; /* 防止长文本溢出 */
}

/* 对于多行内容，让标签顶部对齐 */
.character-profile-scope div:has(dd[style*="min-height"]) dt, /* 适用于手动设置了高度的 */
.character-profile-scope div:nth-child(4) dt, /* 硬编码针对“核心设定” */
.character-profile-scope div:nth-child(5) dt { /* 硬编码针对“序盘设定” */
    align-self: start;
    padding-top: 0.2em; /* 微调以获得更好的视觉对齐 */
}

/* --- 特殊内容高亮 --- */
.character-profile-scope .profile-name {
    color: var(--accessible-red); /* 使用无障碍红色 */
    font-size: 1.3em;
    font-weight: 600;
    letter-spacing: 1px;
    text-shadow: 0 0 8px rgba(255, 85, 85, 0.8);
}


/* --- 移动端适配 (小于768px) --- */
@media (max-width: 768px) {
    .character-profile-scope {
        padding: var(--spacing-md);
    }

    /* 切换为单列堆叠布局 */
    .character-profile-scope dl {
        grid-template-columns: 1fr;
        gap: var(--spacing-sm);
    }

    .character-profile-scope dt {
        text-align: left; /* 标签左对齐 */
        font-size: 0.85em;
        opacity: 0.8;
    }

    .character-profile-scope dt::after {
        content: ''; /* 移动端移除冒号 */
    }

    .character-profile-scope dd {
        margin-left: var(--spacing-sm); /* 内容缩进，与标签形成层次感 */
        padding-left: var(--spacing-sm);
        border-left: 2px solid var(--border-color);
    }

    .character-profile-scope .profile-name {
        font-size: 1.2em;
        margin-left: 0;
        padding-left: 0;
        border-left: none;
    }
}