/**
 * 用户名样式CSS
 * 个性化装饰系统 - 用户名样式
 */

/* ==================== 渐变文字样式 ==================== */

/* 彩虹渐变 */
.username-style-rainbow {
    background: linear-gradient(to right, #6666ff, #0099ff, #00ff00, #ff3399, #6666ff);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: username-rainbow 6s ease-in-out infinite;
    background-size: 400% 100%;
}

@keyframes username-rainbow {
    0%, 100% { background-position: 0 0; }
    50% { background-position: 100% 0; }
}

/* 金色渐变 */
.username-style-gold {
    background: linear-gradient(45deg, #ffd700, #ffed4e, #ffd700);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-weight: bold;
}

/* 火焰渐变 */
.username-style-fire {
    background: linear-gradient(45deg, #ff4500, #ff6347, #ffa500, #ff4500);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: username-fire 3s ease-in-out infinite;
    background-size: 200% 100%;
}

@keyframes username-fire {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

/* 冰霜渐变 */
.username-style-ice {
    background: linear-gradient(45deg, #00bfff, #87ceeb, #b0e0e6, #00bfff);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-weight: bold;
}

/* 紫罗兰渐变 */
.username-style-violet {
    background: linear-gradient(45deg, #8b5cf6, #a78bfa, #c4b5fd, #8b5cf6);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-weight: bold;
}

/* 霓虹渐变 */
.username-style-neon {
    background: linear-gradient(45deg, #00ff00, #00ffff, #ff00ff, #00ff00);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: username-neon 4s linear infinite;
    background-size: 300% 100%;
    text-shadow: 0 0 10px rgba(0, 255, 0, 0.5);
}

@keyframes username-neon {
    0% { background-position: 0% 50%; }
    100% { background-position: 300% 50%; }
}

/* 日落渐变 */
.username-style-sunset {
    background: linear-gradient(45deg, #ff6b6b, #feca57, #ff9ff3, #ff6b6b);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: username-sunset 5s ease-in-out infinite;
    background-size: 300% 100%;
}

@keyframes username-sunset {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

/* ==================== 闪烁效果 ==================== */

/* VIP金色闪烁 */
.username-style-vip {
    color: #ffd700;
    font-weight: bold;
    text-shadow: 0 0 5px rgba(255, 215, 0, 0.8);
    animation: username-vip-glow 2s ease-in-out infinite;
}

@keyframes username-vip-glow {
    0%, 100% { text-shadow: 0 0 5px rgba(255, 215, 0, 0.8), 0 0 10px rgba(255, 215, 0, 0.5); }
    50% { text-shadow: 0 0 15px rgba(255, 215, 0, 1), 0 0 25px rgba(255, 215, 0, 0.8); }
}

/* 红色警告 */
.username-style-warning {
    color: #ff0000;
    font-weight: bold;
    animation: username-blink 1s step-end infinite;
}

@keyframes username-blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

/* ==================== 下划线效果 ==================== */

/* 波浪下划线 */
.username-style-wave {
    text-decoration: underline;
    text-decoration-style: wavy;
    text-decoration-color: #ff6b6b;
    text-underline-offset: 4px;
}

/* 双线 */
.username-style-double {
    text-decoration: underline;
    text-decoration-style: double;
    text-decoration-color: #4ecdc4;
    text-underline-offset: 3px;
}

/* ==================== 阴影效果 ==================== */

/* 3D阴影 */
.username-style-3d {
    color: #333;
    text-shadow: 
        1px 1px 0 #ccc,
        2px 2px 0 #bbb,
        3px 3px 0 #aaa;
    font-weight: bold;
}

/* 发光效果 */
.username-style-glow {
    color: #fff;
    text-shadow: 
        0 0 5px #fff,
        0 0 10px #fff,
        0 0 20px #00ff00,
        0 0 30px #00ff00;
    font-weight: bold;
}

/* ==================== 字体效果 ==================== */

/* 斜体强调 */
.username-style-italic {
    font-style: italic;
    color: #666;
    font-weight: bold;
}

/* 等宽字体 */
.username-style-mono {
    font-family: 'Courier New', monospace;
    color: #2c3e50;
    font-weight: bold;
    letter-spacing: 1px;
}

/* ==================== 兼容性样式 ==================== */

/* 确保用户名样式在链接上也能正常显示 */
a.username-style-rainbow,
a.username-style-gold,
a.username-style-fire,
a.username-style-ice,
a.username-style-violet,
a.username-style-neon,
a.username-style-sunset {
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* 悬停效果 */
a.username-style-rainbow:hover,
a.username-style-gold:hover,
a.username-style-fire:hover,
a.username-style-ice:hover,
a.username-style-violet:hover,
a.username-style-neon:hover,
a.username-style-sunset:hover {
    opacity: 0.8;
}

/* ==================== 高优先级样式（用于<b>标签） ==================== */
/* 这些规则确保在<b>标签上的样式不会被其他CSS覆盖 */

b.username-style-rainbow,
.username-style-rainbow b {
    background: linear-gradient(to right, #6666ff, #0099ff, #00ff00, #ff3399, #6666ff) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    color: transparent !important;
    animation: username-rainbow 6s ease-in-out infinite !important;
    background-size: 400% 100% !important;
}

b.username-style-gold,
.username-style-gold b {
    background: linear-gradient(45deg, #ffd700, #ffed4e, #ffd700) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    color: transparent !important;
    font-weight: bold !important;
}

b.username-style-fire,
.username-style-fire b {
    background: linear-gradient(45deg, #ff4500, #ff6347, #ffa500, #ff4500) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    color: transparent !important;
    animation: username-fire 3s ease-in-out infinite !important;
    background-size: 200% 100% !important;
}

b.username-style-ice,
.username-style-ice b {
    background: linear-gradient(45deg, #00bfff, #87ceeb, #b0e0e6, #00bfff) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    color: transparent !important;
    font-weight: bold !important;
}

b.username-style-violet,
.username-style-violet b {
    background: linear-gradient(45deg, #8b5cf6, #a78bfa, #c4b5fd, #8b5cf6) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    color: transparent !important;
    font-weight: bold !important;
}

b.username-style-neon,
.username-style-neon b {
    background: linear-gradient(45deg, #00ff00, #00ffff, #ff00ff, #00ff00) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    color: transparent !important;
    animation: username-neon 4s linear infinite !important;
    background-size: 300% 100% !important;
    text-shadow: 0 0 10px rgba(0, 255, 0, 0.5) !important;
}

b.username-style-sunset,
.username-style-sunset b {
    background: linear-gradient(45deg, #ff6b6b, #feca57, #ff9ff3, #ff6b6b) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    color: transparent !important;
    animation: username-sunset 5s ease-in-out infinite !important;
    background-size: 300% 100% !important;
}

/* 针对链接内<b>标签的特殊处理 */
a b.username-style-rainbow,
a b.username-style-gold,
a b.username-style-fire,
a b.username-style-ice,
a b.username-style-violet,
a b.username-style-neon,
a b.username-style-sunset {
    -webkit-background-clip: text !important;
    background-clip: text !important;
    color: transparent !important;
}

/* ==================== 自定义样式类 ==================== */

/* 样式01 - 红色发光 */
.样式01 {
    color: #ff6b6b;
    font-weight: bold;
    text-shadow: 2px 2px 4px rgba(255, 107, 107, 0.4);
}

b.样式01,
.样式01 b {
    color: #ff6b6b !important;
    font-weight: bold !important;
    text-shadow: 2px 2px 4px rgba(255, 107, 107, 0.4) !important;
}

/* 样式02 - 蓝色发光 */
.样式02 {
    color: #4ecdc4;
    font-weight: bold;
    text-shadow: 2px 2px 4px rgba(78, 205, 196, 0.4);
}

b.样式02,
.样式02 b {
    color: #4ecdc4 !important;
    font-weight: bold !important;
    text-shadow: 2px 2px 4px rgba(78, 205, 196, 0.4) !important;
}

/* 样式03 - 黄色发光 */
.样式03 {
    color: #ffe66d;
    font-weight: bold;
    text-shadow: 2px 2px 4px rgba(255, 230, 109, 0.4);
}

b.样式03,
.样式03 b {
    color: #ffe66d !important;
    font-weight: bold !important;
    text-shadow: 2px 2px 4px rgba(255, 230, 109, 0.4) !important;
}