/*
  将选择器从宽泛的 .points-info
  改为 .user-greeting-info .points-info
  这样可以确保此样式只应用于 index.php 页面的顶部栏，
  而不会影响 character_selection_page.php 中的同名元素。
*/
.user-greeting-info .points-info {
    /* 基础布局，与VIP标签保持一致 */
    font-weight: bold;
    padding: 2px 6px;
    border-radius: 4px;
    margin-left: 5px;
    display: inline-block; /* 确保背景和边框正确应用 */

    /* 自定义金属紫色主题 */
    border: 1px solid #a777e3; /* 边框使用渐变的起始颜色 */
    background-color: #f5f0fa; /* 淡雅的紫色背景，突出文字 */

    /* 关键：文字颜色使用背景渐变实现 */
    background-image: linear-gradient(45deg, #8A2BE2, #4a00e0);

    /* 将背景裁剪为文字的形状 */
    -webkit-background-clip: text; /* 兼容 Webkit 浏览器 (Chrome, Safari) */
    background-clip: text;

    /* 将文字颜色设为透明，从而显示背景的渐变 */
    color: transparent;

    /* 防止用户选择文本时，背景渐变消失 (在某些浏览器上) */
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}