/* 福利中心特殊样式 */

    .welfare-container {

        background: rgba(20, 20, 20, 0.95);

        border-radius: 8px;

        padding: 20px;

        margin-bottom: 20px;

        box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);

    }



    .welfare-container h3 {

        color: #ffd700;

        margin-bottom: 20px;

        font-size: 18px;

        display: flex;

        align-items: center;

        gap: 10px;

    }



    .welfare-container h3 i {

        font-size: 20px;

    }



    /* 状态栏样式 */

    .status-bar {

        display: flex;

        gap: 20px;

        margin-bottom: 30px;

    }



    .status-item {

        flex: 1;

        background: linear-gradient(135deg, rgba(40, 40, 40, 0.9), rgba(30, 30, 30, 0.9));

        border: 1px solid rgba(255, 215, 0, 0.1);

        border-radius: 6px;

        padding: 15px;

        text-align: center;

        position: relative;

        overflow: hidden;

        min-height: 90px;

    }

	

/* 金币背景图 */

.status-item:nth-child(1)::after {

    content: '';

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

    background-image: url('../images/gold_coin_bg.png');

    background-position: center;

    background-repeat: no-repeat;

    background-size: cover;

    opacity: 0.5;  /* 控制背景图透明度 */

    z-index: 0;

}

/* 标题文字样式 - 使用渐变色 */

.status-item:nth-child(1) h4 {

    background: linear-gradient(to right, #ffd700, #ff8c00);

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

    font-size: 14px;

    font-weight: 500;

    margin-bottom: 10px;

    position: relative;

    z-index: 1;

    opacity: 0.8;

    text-transform: uppercase;

    letter-spacing: 1px;

}



/* 龙影币背景图 */

.status-item:nth-child(2)::after {

    content: '';

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

    background-image: url('../images/dragon_bg.png');

    background-position: center;

    background-repeat: no-repeat;

    background-size: cover;

    opacity: 0.5;  /* 控制背景图透明度 */

    z-index: 0;

}

/* 标题文字样式 - 使用渐变色 */

.status-item:nth-child(2) h4 {

   background: linear-gradient(to right, #98ffed, #5ffbf1);

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

    font-size: 14px;

    font-weight: 500;

    margin-bottom: 10px;

    position: relative;

    z-index: 1;

    opacity: 0.9;

    text-transform: uppercase;

    letter-spacing: 1px;

}

/* 标题文字样式 - 使用渐变色 */

.status-item:nth-child(3) h4 {

   background: linear-gradient(to right, #fff, #5ffbf1);

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

    font-size: 14px;

    font-weight: 500;

    margin-bottom: 10px;

    position: relative;

    z-index: 1;

    opacity: 0.9;

    text-transform: uppercase;

    letter-spacing: 1px;

}



    /* 只给金币和龙影币添加闪光效果 */

    .status-item:not(.season-status)::before {

        content: '';

        position: absolute;

        top: 0;

        left: -150%;

        width: 150%;

        height: 100%;

        background: linear-gradient(

            90deg,

            transparent,

            rgba(255, 255, 255, 0.1),

            transparent

        );

        transform: skewX(-20deg);

        animation: shine 3s infinite;

    }



    @keyframes shine {

        0% {

            left: -150%;

        }

        50% {

            left: 150%;

        }

        100% {

            left: 150%;

        }

    }



    .status-item h4 {

        color: #000;  /* 调暗标题文字 */

    font-size: 13px;

    margin-bottom: 10px;

    position: relative;

    z-index: 1;

    opacity: 0.7;

    }



    /* 金币数值样式 */

.status-item:nth-child(1) .value {

    color: #ffd700;

    font-size: 26px;

    font-weight: bold;

    text-shadow: 

        0 0 10px rgba(255, 215, 0, 0.4),

        0 0 20px rgba(255, 215, 0, 0.2);

    position: relative;

    z-index: 1;

    letter-spacing: 1px;

}



/* 龙影币数值样式 */

.status-item:nth-child(2) .value {

    color: #7fffd4;

    font-size: 26px;

    font-weight: bold;

    text-shadow: 

        0 0 10px rgba(127, 255, 212, 0.4),

        0 0 20px rgba(127, 255, 212, 0.2);

    position: relative;

    z-index: 1;

    letter-spacing: 1px;

}

	

/* 悬停效果 */

.status-item:hover h4 {

    opacity: 1;

}



.status-item:nth-child(1):hover .value {

    text-shadow: 

        0 0 15px rgba(255, 215, 0, 0.6),

        0 0 25px rgba(255, 215, 0, 0.3);

}



.status-item:nth-child(2):hover .value {

    text-shadow: 

        0 0 15px rgba(127, 255, 212, 0.6),

        0 0 25px rgba(127, 255, 212, 0.3);

}



    /* 赛季进度条样式 */

    .season-status {

        padding: 10px;

        overflow: visible;

    }



    .season-track {

    padding: 30px 20px;

    margin: 20px 0;

    position: relative;

}



.season-progress {

    height: 6px;

    background: rgba(255, 255, 255, 0.1);

    border-radius: 3px;

    position: relative;

}



.progress-fill {

    height: 100%;

    background: linear-gradient(90deg, #ffd700, #ff8c00);

    border-radius: 3px;

    transition: width 0.3s ease;

}



.progress-milestone {

    position: absolute;

    transform: translateX(-50%);

    top: 0;  /* 确保从进度条顶部开始定位 */

}



.milestone-point {

    width: 12px;

    height: 12px;

    background: #1a1a1a;

    border: 2px solid #333;

    border-radius: 50%;

    position: absolute;

    left: 50%;

    top: -3px;  /* 调整点的垂直位置，使其居中于线条 */

    transform: translateX(-50%);

    transition: all 0.3s ease;

}



.milestone-value {

    position: absolute;

    left: 50%;

    transform: translateX(-50%);

    color: #aaa;

    font-size: 12px;

    white-space: nowrap;

}



/* 交错显示文字 */

.milestone-top {

    bottom: 20px;  /* 调整文字位置，避免与点重叠 */

}



.milestone-bottom {

    top: 20px;  /* 调整文字位置，避免与点重叠 */

}



.milestone-reached .milestone-point {

    background: #ffd700;

    border-color: #ff8c00;

    box-shadow: 0 0 10px rgba(255, 215, 0, 0.5);

}



.milestone-reached .milestone-value {

    color: #ffd700;

}



    /* 福利项目样式 */

    .welfare-item {

        background: rgba(40, 40, 40, 0.6);

        border: 1px solid rgba(255, 255, 255, 0.05);

        border-radius: 6px;

        padding: 15px;

        margin-bottom: 15px;

        display: flex;

        justify-content: space-between;

        align-items: center;

        transition: all 0.3s ease;

    }



    .welfare-item:hover {

        background: rgba(40, 40, 40, 0.8);

        transform: translateY(-2px);

    }



    .welfare-info {

        display: flex;

        align-items: center;

        gap: 15px;

    }



    .welfare-icon {

        width: 40px;

        height: 40px;

        background: rgba(0, 0, 0, 0.3);

        border-radius: 8px;

        display: flex;

        align-items: center;

        justify-content: center;

        color: #ffd700;

    }



    .welfare-text h4 {

        color: #fff;

        margin: 0;

        font-size: 16px;

    }



    .welfare-text p {

        color: #888;

        margin: 5px 0 0;

        font-size: 12px;

    }



    .welfare-status {

        display: flex;

        align-items: center;

        gap: 10px;

    }



    .claim-button {

        background: linear-gradient(135deg, #ffd700, #ff8c00);

        border: none;

        border-radius: 4px;

        padding: 8px 15px;

        color: #fff;

        font-weight: bold;

        cursor: pointer;

        transition: all 0.3s ease;

    }



    .claim-button:hover {

        transform: translateY(-2px);

        box-shadow: 0 4px 15px rgba(255, 215, 0, 0.3);

    }



    .status-icon {

        font-size: 20px;

    }



    .status-completed {

        color: #00ff00;

        text-shadow: 0 0 5px rgba(0, 255, 0, 0.3);

    }



    .status-locked {

        color: #ff4d4d;

        text-shadow: 0 0 5px rgba(255, 77, 77, 0.3);

    }



    /* 兑换模态框样式 */

    .modal-content {

        background: rgba(30, 30, 30, 0.95);

        border: 1px solid rgba(255, 215, 0, 0.1);

		box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);

    }



    .modal-header {

        border-bottom: 1px solid rgba(255, 255, 255, 0.1);

    }

	

	.modal-title {

    color: #ffd700;

    font-size: 18px;

    text-shadow: 0 0 5px rgba(255, 215, 0, 0.3);

    }



    .modal-footer {

        border-top: 1px solid rgba(255, 255, 255, 0.1);

    }



    .exchange-input {

        background: rgba(255, 255, 255, 0.05);

        border: 1px solid rgba(255, 255, 255, 0.1);

        color: #fff;

        padding: 10px;

        border-radius: 4px;

        width: 100%;

    }



    /* 动画效果 */

    @keyframes fadeInUp {

        from {

            opacity: 0;

            transform: translateY(20px);

        }

        to {

            opacity: 1;

            transform: translateY(0);

        }

    }



    .welfare-container {

        animation: fadeInUp 0.5s ease-out;

    }



    .welfare-item {

        animation: fadeInUp 0.5s ease-out;

        animation-fill-mode: both;

    }



    .welfare-item:nth-child(2) { animation-delay: 0.1s; }

    .welfare-item:nth-child(3) { animation-delay: 0.2s; }

    .welfare-item:nth-child(4) { animation-delay: 0.3s; }

    .welfare-item:nth-child(5) { animation-delay: 0.4s; }

	/* 提示信息容器样式 */

.notice-container {

    background: rgba(0, 0, 0, 0.3);

    border: 1px solid rgba(255, 215, 0, 0.1);

    border-radius: 4px;

    padding: 0 15px;

    margin: 0 0 20px;

    height: 36px;

    line-height: 36px;

    overflow: hidden;

    position: relative;

}



.notice-slider {

    animation: slideUp 9s cubic-bezier(0.4, 0, 0.2, 1) infinite;

}



.notice-item {

    height: 36px;

    line-height: 36px;

    text-align: center;

    color: #aaa;

    font-size: 15px;

}



.notice-item .highlight {

    color: #ffd700;

    font-weight: bold;

    margin: 0 3px;

    font-size: 16px;

}



@keyframes slideUp {

    0%, 32% {

        transform: translateY(0);

    }

    33%, 65% {

        transform: translateY(-36px);

    }

    66%, 100% {

        transform: translateY(-72px);

    }

}

/* 用户欢迎区样式 */

.user-welcome {

    background: rgba(20, 20, 20, 0.95);

    border-radius: 8px;

    padding: 15px;

    margin-bottom: 20px;

    display: flex;

    justify-content: space-between;

    align-items: center;

    position: relative;

}



/* 彩虹流光边框效果 */

.user-welcome::before {

    content: '';

    position: absolute;

    top: -2px;

    left: -2px;

    right: -2px;

    bottom: -2px;

    background: linear-gradient(

        45deg,

        #ff0000,

        #ff7300,

        #fffb00,

        #48ff00,

        #00ffd5,

        #002bff,

        #7a00ff,

        #ff00c8,

        #ff0000

    );

    border-radius: 10px;

    z-index: -1;

    animation: rainbow 20s linear infinite;

    background-size: 400%;

}



.user-welcome::after {

    content: '';

    position: absolute;

    top: -1px;

    left: -1px;

    right: -1px;

    bottom: -1px;

    background: rgba(20, 20, 20, 0.95);

    border-radius: 9px;

    z-index: -1;

}



@keyframes rainbow {

    0% {

        background-position: 0% 50%;

    }

    50% {

        background-position: 100% 50%;

    }

    100% {

        background-position: 0% 50%;

    }

}



.welcome-info {

    display: flex;

    align-items: center;

    gap: 15px;

}



.welcome-info i {

    font-size: 40px;

    color: #ffd700;

    text-shadow: 0 0 10px rgba(255, 215, 0, 0.3);

}



.welcome-text h4 {

    color: #fff;

    margin: 0;

    font-size: 16px;

}



.welcome-text p {

    color: #888;

    margin: 5px 0 0;

    font-size: 12px;

}



.user-stats {

    display: flex;

    gap: 20px;

}



.stat-item {

    text-align: center;

    padding: 0 15px;

    border-left: 1px solid rgba(255, 255, 255, 0.1);

}



.stat-item:first-child {

    border-left: none;

}



.stat-label {

    display: block;

    color: #888;

    font-size: 12px;

    margin-bottom: 5px;

}



.stat-value {

    display: block;

    color: #ffd700;

    font-size: 16px;

    font-weight: bold;

    text-shadow: 0 0 5px rgba(255, 215, 0, 0.3);

}



/* 金币动画相关样式 */

.coin-animation-container {

    position: fixed;

    pointer-events: none;

    z-index: 9999;

    width: 100%;

    height: 100%;

    top: 0;

    left: 0;

}



/* 金币样式 */

.coin {

    position: absolute;

    width: 30px;

    height: 30px;

    background: url('../images/coin.png') no-repeat center/contain;

    opacity: 0;

    filter: drop-shadow(0 0 8px rgba(255, 215, 0, 0.6));

}



/* 金币掉落动画 */

@keyframes coinDrop {

    0% {

        transform: translateY(0) rotate(0deg) scale(0);

        opacity: 0;

    }

    10% {

        transform: translateY(50px) rotate(180deg) scale(1);

        opacity: 1;

    }

    100% {

        transform: translateY(50vh) rotate(360deg) scale(1);

        opacity: 1;

    }

}



/* 金币汇聚动画 */

@keyframes coinCollect {

    0% {

        transform: translateY(50vh) rotate(360deg);

        opacity: 1;

    }

    100% {

        transform: translate(var(--targetX), calc(50vh + var(--targetY))) scale(0.2) rotate(720deg);

        opacity: 0;

    }

}



/* 数字飘出动画 */

@keyframes numberFloat {

    0% {

        transform: translate(-50%, -50%) scale(0.5);

        opacity: 0;

    }

    20% {

        transform: translate(-50%, -50%) scale(1.2);

        opacity: 1;

    }

    80% {

        transform: translate(-50%, -100%) scale(1);

        opacity: 1;

    }

    100% {

        transform: translate(-50%, -120%) scale(0.8);

        opacity: 0;

    }

}

/* Toast样式优化 */

    .toastify {

        background: linear-gradient(135deg, #2c3e50, #3498db);

        border-radius: 8px;

        font-family: "Microsoft YaHei", sans-serif;

    }

    

    .toastify.success {

        background: linear-gradient(135deg, #2ecc71, #27ae60);

    }

    

    .toastify.error {

        background: linear-gradient(135deg, #e74c3c, #c0392b);

    }

    

    .toastify.warning {

        background: linear-gradient(135deg, #f1c40f, #f39c12);

    }



/* 移动端适配 */

@media (max-width: 768px) {

    .status-bar {

        flex-direction: column;

        gap: 15px;

    }

    

    .status-item {

        width: 100%;

    }

    

    .status-item.season-status {

        margin-top: 5px;

    }

}