/* 新版弹幕系统样式 */

/* 弹幕头部按钮 */
.danmaku-header-btn {
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 8px;
    padding: 4px 8px;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.3s;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    min-height: 32px;
}

.danmaku-header-btn:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: scale(1.05);
}

/* 弹幕设置面板 */
.danmaku-new-settings-panel {
    background: linear-gradient(135deg, rgba(255, 245, 250, 0.98) 0%, rgba(245, 240, 255, 0.96) 100%);
    border: 1px solid rgba(255, 182, 193, 0.5);
    border-radius: 16px;
    padding: 20px;
    margin-top: 15px;
    box-shadow: 0 4px 12px rgba(214, 93, 177, 0.15);
    backdrop-filter: blur(10px);
    /* 增加面板大小 */
    min-height: 300px;
    width: 100%;
    box-sizing: border-box;
}

.danmaku-new-settings-title {
    font-weight: bold;
    color: var(--theme-text-strong);
    margin-bottom: 15px;
    font-size: 16px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.danmaku-new-setting-group {
    margin-bottom: 12px;
}

.danmaku-new-setting-group .danmaku-bubble-selector,
.danmaku-new-setting-group .danmaku-font-selector,
.danmaku-new-setting-group .danmaku-size-selector,
.danmaku-new-setting-group .danmaku-effect-selector,
.danmaku-new-setting-group .danmaku-background-selector,
.danmaku-new-setting-group .danmaku-tail-selector {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.danmaku-new-setting-group label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--theme-text-main);
    margin-bottom: 6px;
}

.danmaku-new-setting-group select {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--theme-secondary);
    border-radius: 8px;
    font-size: 13px;
    background: rgba(255, 255, 255, 0.95);
    color: var(--theme-text-main);
    cursor: pointer;
    transition: all 0.2s;
}

.danmaku-search-input {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--theme-secondary);
    border-radius: 8px;
    font-size: 13px;
    background: rgba(255, 255, 255, 0.95);
    color: var(--theme-text-main);
    margin-bottom: 8px;
    box-sizing: border-box;
}

.danmaku-new-setting-group select:hover {
    border-color: var(--theme-primary);
    box-shadow: 0 2px 8px rgba(214, 93, 177, 0.2);
}

.danmaku-new-setting-group select:focus {
    outline: none;
    border-color: var(--theme-primary);
    box-shadow: 0 0 10px rgba(214, 93, 177, 0.35);
}

/* 弹幕预览 */
.danmaku-new-preview {
    margin-top: 15px;
    padding: 12px;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 10px;
    border: 1px dashed var(--theme-secondary);
}

.danmaku-new-preview-box {
    padding: 12px 16px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.95);
    color: var(--theme-text-main);
    text-align: center;
    word-break: break-all;
    min-height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

/* 100种气泡颜色样式 */
/* 红色系 (1-10级) */
.danmaku-bubble-red1 { background-color: #FF0000 !important; }
.danmaku-bubble-red2 { background-color: #FF3333 !important; }
.danmaku-bubble-red3 { background-color: #FF6666 !important; }
.danmaku-bubble-red4 { background-color: #FF9999 !important; }
.danmaku-bubble-red5 { background-color: #FFCCCC !important; }
.danmaku-bubble-red6 { background-color: #FF0066 !important; }
.danmaku-bubble-red7 { background-color: #FF3399 !important; }
.danmaku-bubble-red8 { background-color: #FF66CC !important; }
.danmaku-bubble-red9 { background-color: #FF99CC !important; }
.danmaku-bubble-red10 { background-color: #FFCCFF !important; }

/* 橙色系 (1-10级) */
.danmaku-bubble-orange1 { background-color: #FF6600 !important; }
.danmaku-bubble-orange2 { background-color: #FF9900 !important; }
.danmaku-bubble-orange3 { background-color: #FFCC00 !important; }
.danmaku-bubble-orange4 { background-color: #FFCC66 !important; }
.danmaku-bubble-orange5 { background-color: #FFCC99 !important; }
.danmaku-bubble-orange6 { background-color: #FF9933 !important; }
.danmaku-bubble-orange7 { background-color: #FF9966 !important; }
.danmaku-bubble-orange8 { background-color: #FF6633 !important; }
.danmaku-bubble-orange9 { background-color: #CC6633 !important; }
.danmaku-bubble-orange10 { background-color: #996633 !important; }

/* 黄色系 (1-10级) */
.danmaku-bubble-yellow1 { background-color: #FFFF00 !important; }
.danmaku-bubble-yellow2 { background-color: #FFFF33 !important; }
.danmaku-bubble-yellow3 { background-color: #FFFF66 !important; }
.danmaku-bubble-yellow4 { background-color: #FFFF99 !important; }
.danmaku-bubble-yellow5 { background-color: #FFFFCC !important; }
.danmaku-bubble-yellow6 { background-color: #FFCC00 !important; }
.danmaku-bubble-yellow7 { background-color: #FFCC33 !important; }
.danmaku-bubble-yellow8 { background-color: #FFCC66 !important; }
.danmaku-bubble-yellow9 { background-color: #FFCC99 !important; }
.danmaku-bubble-yellow10 { background-color: #FFCCCC !important; }

/* 绿色系 (10-20级) */
.danmaku-bubble-green1 { background-color: #00FF00 !important; }
.danmaku-bubble-green2 { background-color: #33FF33 !important; }
.danmaku-bubble-green3 { background-color: #66FF66 !important; }
.danmaku-bubble-green4 { background-color: #99FF99 !important; }
.danmaku-bubble-green5 { background-color: #CCFFCC !important; }
.danmaku-bubble-green6 { background-color: #00CC00 !important; }
.danmaku-bubble-green7 { background-color: #009900 !important; }
.danmaku-bubble-green8 { background-color: #006600 !important; }
.danmaku-bubble-green9 { background-color: #003300 !important; }
.danmaku-bubble-green10 { background-color: #00FF33 !important; }

/* 青色系 (10-20级) */
.danmaku-bubble-cyan1 { background-color: #00FFFF !important; }
.danmaku-bubble-cyan2 { background-color: #33FFFF !important; }
.danmaku-bubble-cyan3 { background-color: #66FFFF !important; }
.danmaku-bubble-cyan4 { background-color: #99FFFF !important; }
.danmaku-bubble-cyan5 { background-color: #CCFFFF !important; }
.danmaku-bubble-cyan6 { background-color: #00CCCC !important; }
.danmaku-bubble-cyan7 { background-color: #009999 !important; }
.danmaku-bubble-cyan8 { background-color: #006666 !important; }
.danmaku-bubble-cyan9 { background-color: #003333 !important; }
.danmaku-bubble-cyan10 { background-color: #33CCCC !important; }

/* 蓝色系 (20-30级) */
.danmaku-bubble-blue1 { background-color: #0000FF !important; }
.danmaku-bubble-blue2 { background-color: #3333FF !important; }
.danmaku-bubble-blue3 { background-color: #6666FF !important; }
.danmaku-bubble-blue4 { background-color: #9999FF !important; }
.danmaku-bubble-blue5 { background-color: #CCCCFF !important; }
.danmaku-bubble-blue6 { background-color: #0000CC !important; }
.danmaku-bubble-blue7 { background-color: #000099 !important; }
.danmaku-bubble-blue8 { background-color: #000066 !important; }
.danmaku-bubble-blue9 { background-color: #000033 !important; }
.danmaku-bubble-blue10 { background-color: #3333CC !important; }

/* 紫色系 (20-30级) */
.danmaku-bubble-purple1 { background-color: #FF00FF !important; }
.danmaku-bubble-purple2 { background-color: #FF33FF !important; }
.danmaku-bubble-purple3 { background-color: #FF66FF !important; }
.danmaku-bubble-purple4 { background-color: #FF99FF !important; }
.danmaku-bubble-purple5 { background-color: #FFCCFF !important; }
.danmaku-bubble-purple6 { background-color: #CC00CC !important; }
.danmaku-bubble-purple7 { background-color: #990099 !important; }
.danmaku-bubble-purple8 { background-color: #660066 !important; }
.danmaku-bubble-purple9 { background-color: #330033 !important; }
.danmaku-bubble-purple10 { background-color: #CC33CC !important; }

/* 粉色系 (30-40级) */
.danmaku-bubble-pink1 { background-color: #FFC0CB !important; }
.danmaku-bubble-pink2 { background-color: #FFB6C1 !important; }
.danmaku-bubble-pink3 { background-color: #FF69B4 !important; }
.danmaku-bubble-pink4 { background-color: #FF1493 !important; }
.danmaku-bubble-pink5 { background-color: #DB7093 !important; }
.danmaku-bubble-pink6 { background-color: #FFA07A !important; }
.danmaku-bubble-pink7 { background-color: #FFB6C1 !important; }
.danmaku-bubble-pink8 { background-color: #FFC0CB !important; }
.danmaku-bubble-pink9 { background-color: #FFDAB9 !important; }
.danmaku-bubble-pink10 { background-color: #FFE4E1 !important; }

/* 棕色系 (30-40级) */
.danmaku-bubble-brown1 { background-color: #8B4513 !important; }
.danmaku-bubble-brown2 { background-color: #A0522D !important; }
.danmaku-bubble-brown3 { background-color: #A52A2A !important; }
.danmaku-bubble-brown4 { background-color: #B22222 !important; }
.danmaku-bubble-brown5 { background-color: #BC8F8F !important; }
.danmaku-bubble-brown6 { background-color: #D2691E !important; }
.danmaku-bubble-brown7 { background-color: #D2B48C !important; }
.danmaku-bubble-brown8 { background-color: #DEB887 !important; }
.danmaku-bubble-brown9 { background-color: #F4A460 !important; }
.danmaku-bubble-brown10 { background-color: #F5DEB3 !important; }

/* 灰色系 (40-50级) */
.danmaku-bubble-gray1 { background-color: #2F4F4F !important; }
.danmaku-bubble-gray2 { background-color: #696969 !important; }
.danmaku-bubble-gray3 { background-color: #708090 !important; }
.danmaku-bubble-gray4 { background-color: #778899 !important; }
.danmaku-bubble-gray5 { background-color: #808080 !important; }
.danmaku-bubble-gray6 { background-color: #A9A9A9 !important; }
.danmaku-bubble-gray7 { background-color: #C0C0C0 !important; }
.danmaku-bubble-gray8 { background-color: #D3D3D3 !important; }
.danmaku-bubble-gray9 { background-color: #DCDCDC !important; }
.danmaku-bubble-gray10 { background-color: #F5F5F5 !important; }

/* 金色系 (40-50级) */
.danmaku-bubble-gold1 { background-color: #FFD700 !important; }
.danmaku-bubble-gold2 { background-color: #FFDF00 !important; }
.danmaku-bubble-gold3 { background-color: #FFEF00 !important; }
.danmaku-bubble-gold4 { background-color: #FFF000 !important; }
.danmaku-bubble-gold5 { background-color: #FFF100 !important; }
.danmaku-bubble-gold6 { background-color: #F0E68C !important; }
.danmaku-bubble-gold7 { background-color: #E6E6FA !important; }
.danmaku-bubble-gold8 { background-color: #D8BFD8 !important; }
.danmaku-bubble-gold9 { background-color: #DDA0DD !important; }
.danmaku-bubble-gold10 { background-color: #EE82EE !important; }

/* 渐变色系 (50-60级) */
.danmaku-bubble-gradient1 { background: linear-gradient(45deg, #FF0000, #FF7F00) !important; }
.danmaku-bubble-gradient2 { background: linear-gradient(45deg, #FF7F00, #FFFF00) !important; }
.danmaku-bubble-gradient3 { background: linear-gradient(45deg, #FFFF00, #00FF00) !important; }
.danmaku-bubble-gradient4 { background: linear-gradient(45deg, #00FF00, #00FFFF) !important; }
.danmaku-bubble-gradient5 { background: linear-gradient(45deg, #00FFFF, #0000FF) !important; }
.danmaku-bubble-gradient6 { background: linear-gradient(45deg, #0000FF, #8B00FF) !important; }
.danmaku-bubble-gradient7 { background: linear-gradient(45deg, #8B00FF, #FF0000) !important; }
.danmaku-bubble-gradient8 { background: linear-gradient(45deg, #FF0000, #FFFF00, #00FF00, #00FFFF, #0000FF, #8B00FF) !important; }
.danmaku-bubble-gradient9 { background: linear-gradient(45deg, #FF0000, #FF7F00, #FFFF00) !important; }
.danmaku-bubble-gradient10 { background: linear-gradient(45deg, #0000FF, #00FFFF, #00FF00) !important; }

/* 饱和色系 (50-60级) */
.danmaku-bubble-saturated1 { background-color: #FF0000 !important; }
.danmaku-bubble-saturated2 { background-color: #FF8000 !important; }
.danmaku-bubble-saturated3 { background-color: #FFFF00 !important; }
.danmaku-bubble-saturated4 { background-color: #00FF00 !important; }
.danmaku-bubble-saturated5 { background-color: #00FFFF !important; }
.danmaku-bubble-saturated6 { background-color: #0000FF !important; }
.danmaku-bubble-saturated7 { background-color: #8000FF !important; }
.danmaku-bubble-saturated8 { background-color: #FF00FF !important; }
.danmaku-bubble-saturated9 { background-color: #8B4513 !important; }
.danmaku-bubble-saturated10 { background-color: #FFD700 !important; }

/* 柔和色系 (60-70级) */
.danmaku-bubble-soft1 { background-color: #FFCCCC !important; }
.danmaku-bubble-soft2 { background-color: #FFE5CC !important; }
.danmaku-bubble-soft3 { background-color: #FFFFCC !important; }
.danmaku-bubble-soft4 { background-color: #CCFFCC !important; }
.danmaku-bubble-soft5 { background-color: #CCFFFF !important; }
.danmaku-bubble-soft6 { background-color: #CCCCFF !important; }
.danmaku-bubble-soft7 { background-color: #FFCCFF !important; }
.danmaku-bubble-soft8 { background-color: #FFC0CB !important; }
.danmaku-bubble-soft9 { background-color: #D2B48C !important; }
.danmaku-bubble-soft10 { background-color: #F0E68C !important; }

/* 深色系 (60-70级) */
.danmaku-bubble-dark1 { background-color: #8B0000 !important; }
.danmaku-bubble-dark2 { background-color: #FF8C00 !important; }
.danmaku-bubble-dark3 { background-color: #FFD700 !important; }
.danmaku-bubble-dark4 { background-color: #006400 !important; }
.danmaku-bubble-dark5 { background-color: #008B8B !important; }
.danmaku-bubble-dark6 { background-color: #00008B !important; }
.danmaku-bubble-dark7 { background-color: #4B0082 !important; }
.danmaku-bubble-dark8 { background-color: #FF1493 !important; }
.danmaku-bubble-dark9 { background-color: #654321 !important; }
.danmaku-bubble-dark10 { background-color: #B8860B !important; }

/* 亮色系 (70-80级) */
.danmaku-bubble-bright1 { background-color: #FF4500 !important; }
.danmaku-bubble-bright2 { background-color: #FFA500 !important; }
.danmaku-bubble-bright3 { background-color: #FFD700 !important; }
.danmaku-bubble-bright4 { background-color: #7CFC00 !important; }
.danmaku-bubble-bright5 { background-color: #00CED1 !important; }
.danmaku-bubble-bright6 { background-color: #1E90FF !important; }
.danmaku-bubble-bright7 { background-color: #9400D3 !important; }
.danmaku-bubble-bright8 { background-color: #FF69B4 !important; }
.danmaku-bubble-bright9 { background-color: #D2691E !important; }
.danmaku-bubble-bright10 { background-color: #FFD700 !important; }

/* 透明色系 (70-80级) */
.danmaku-bubble-trans1 { background-color: rgba(255, 0, 0, 0.7) !important; }
.danmaku-bubble-trans2 { background-color: rgba(255, 165, 0, 0.7) !important; }
.danmaku-bubble-trans3 { background-color: rgba(255, 255, 0, 0.7) !important; }
.danmaku-bubble-trans4 { background-color: rgba(0, 255, 0, 0.7) !important; }
.danmaku-bubble-trans5 { background-color: rgba(0, 255, 255, 0.7) !important; }
.danmaku-bubble-trans6 { background-color: rgba(0, 0, 255, 0.7) !important; }
.danmaku-bubble-trans7 { background-color: rgba(128, 0, 128, 0.7) !important; }
.danmaku-bubble-trans8 { background-color: rgba(255, 192, 203, 0.7) !important; }
.danmaku-bubble-trans9 { background-color: rgba(139, 69, 19, 0.7) !important; }
.danmaku-bubble-trans10 { background-color: rgba(255, 215, 0, 0.7) !important; }

/* 金属色系 (80-90级) */
.danmaku-bubble-metal1 { background-color: #B87333 !important; }
.danmaku-bubble-metal2 { background-color: #C0C0C0 !important; }
.danmaku-bubble-metal3 { background-color: #E5E4E2 !important; }
.danmaku-bubble-metal4 { background-color: #87CEEB !important; }
.danmaku-bubble-metal5 { background-color: #B76E79 !important; }
.danmaku-bubble-metal6 { background-color: #556B2F !important; }
.danmaku-bubble-metal7 { background-color: #708090 !important; }
.danmaku-bubble-metal8 { background-color: #F5F5F5 !important; }
.danmaku-bubble-metal9 { background-color: #4682B4 !important; }
.danmaku-bubble-metal10 { background-color: #F0F8FF !important; }

/* 宝石色系 (80-90级) */
.danmaku-bubble-gem1 { background-color: #E0115F !important; }
.danmaku-bubble-gem2 { background-color: #0F52BA !important; }
.danmaku-bubble-gem3 { background-color: #50C878 !important; }
.danmaku-bubble-gem4 { background-color: #FFD700 !important; }
.danmaku-bubble-gem5 { background-color: #9966CC !important; }
.danmaku-bubble-gem6 { background-color: #B9F2FF !important; }
.danmaku-bubble-gem7 { background-color: #464646 !important; }
.danmaku-bubble-gem8 { background-color: #00A86B !important; }
.danmaku-bubble-gem9 { background-color: #FF6F61 !important; }
.danmaku-bubble-gem10 { background-color: #F5F5F5 !important; }

/* 荧光色系 (90-100级) */
.danmaku-bubble-fluor1 { background-color: #FF3855 !important; }
.danmaku-bubble-fluor2 { background-color: #FF581A !important; }
.danmaku-bubble-fluor3 { background-color: #F5E011 !important; }
.danmaku-bubble-fluor4 { background-color: #55FF38 !important; }
.danmaku-bubble-fluor5 { background-color: #38FFF5 !important; }
.danmaku-bubble-fluor6 { background-color: #5538FF !important; }
.danmaku-bubble-fluor7 { background-color: #A038FF !important; }
.danmaku-bubble-fluor8 { background-color: #FF38D9 !important; }
.danmaku-bubble-fluor9 { background-color: #A67B5B !important; }
.danmaku-bubble-fluor10 { background-color: #FFD700 !important; }

/* 极光色系 (90-100级) */
.danmaku-bubble-aurora1 { background-color: #00FF7F !important; }
.danmaku-bubble-aurora2 { background-color: #00BFFF !important; }
.danmaku-bubble-aurora3 { background-color: #DA70D6 !important; }
.danmaku-bubble-aurora4 { background-color: #FF69B4 !important; }
.danmaku-bubble-aurora5 { background-color: #FFD700 !important; }
.danmaku-bubble-aurora6 { background-color: #FFA500 !important; }
.danmaku-bubble-aurora7 { background-color: #FF4500 !important; }
.danmaku-bubble-aurora8 { background-color: #00FFFF !important; }
.danmaku-bubble-aurora9 { background-color: #F0FFFF !important; }
.danmaku-bubble-aurora10 { background-color: #000000 !important; }

/* 神秘色系 (100级) */
.danmaku-bubble-mystic1 { background-color: #000000 !important; }
.danmaku-bubble-mystic2 { background-color: #000080 !important; }
.danmaku-bubble-mystic3 { background-color: #808080 !important; }
.danmaku-bubble-mystic4 { background-color: #800080 !important; }
.danmaku-bubble-mystic5 { background-color: #FFFFFF !important; }
.danmaku-bubble-mystic6 { background-color: #000000 !important; }
.danmaku-bubble-mystic7 { background-color: #FFD700 !important; }
.danmaku-bubble-mystic8 { background-color: #C0C0C0 !important; }
.danmaku-bubble-mystic9 { background-color: #FF0000 !important; }
.danmaku-bubble-mystic10 { background: linear-gradient(45deg, #FF0000, #00FF00, #0000FF) !important; }

/* 100种气泡样式 */
/* 基础样式 (1-10级) */
.danmaku-bubble-rounded1 {
    border-radius: 10px;
    position: relative;
}

.danmaku-bubble-rounded2 {
    border-radius: 20px;
    position: relative;
}

.danmaku-bubble-rounded3 {
    border-radius: 30px;
    position: relative;
}

.danmaku-bubble-speech1 {
    border-radius: 15px;
    position: relative;
}

.danmaku-bubble-speech1::after {
    content: '';
    position: absolute;
    left: 30px;
    bottom: -10px;
    width: 0;
    height: 0;
    border: 10px solid transparent;
    border-top-color: inherit;
    border-bottom: 0;
    margin-left: -10px;
}

.danmaku-bubble-speech2 {
    border-radius: 20px;
    position: relative;
}

.danmaku-bubble-speech2::after {
    content: '';
    position: absolute;
    left: 20px;
    bottom: -15px;
    width: 0;
    height: 0;
    border: 15px solid transparent;
    border-top-color: inherit;
    border-bottom: 0;
}

.danmaku-bubble-speech3 {
    border-radius: 25px;
    position: relative;
}

.danmaku-bubble-speech3::after {
    content: '';
    position: absolute;
    right: 30px;
    bottom: -12px;
    width: 0;
    height: 0;
    border: 12px solid transparent;
    border-top-color: inherit;
    border-bottom: 0;
}

.danmaku-bubble-cloud1 {
    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
    position: relative;
}

.danmaku-bubble-cloud2 {
    border-radius: 40% 60% 60% 40% / 40% 40% 60% 60%;
    position: relative;
}

.danmaku-bubble-cloud3 {
    border-radius: 50% 50% 50% 50% / 60% 40% 60% 40%;
    position: relative;
}

.danmaku-bubble-heart1 {
    position: relative;
    width: 100px;
    height: 90px;
    background: inherit;
    border-radius: 50%;
    transform: rotate(-45deg);
}

.danmaku-bubble-heart1::before,
.danmaku-bubble-heart1::after {
    content: '';
    position: absolute;
    width: 100px;
    height: 90px;
    background: inherit;
    border-radius: 50%;
}

.danmaku-bubble-heart1::before {
    left: -50px;
}

.danmaku-bubble-heart1::after {
    top: -45px;
}

.danmaku-bubble-heart2 {
    position: relative;
    width: 80px;
    height: 70px;
    background: inherit;
    border-radius: 50%;
    transform: rotate(-45deg);
}

.danmaku-bubble-heart2::before,
.danmaku-bubble-heart2::after {
    content: '';
    position: absolute;
    width: 80px;
    height: 70px;
    background: inherit;
    border-radius: 50%;
}

.danmaku-bubble-heart2::before {
    left: -40px;
}

.danmaku-bubble-heart2::after {
    top: -35px;
}

.danmaku-bubble-heart3 {
    position: relative;
    width: 120px;
    height: 110px;
    background: inherit;
    border-radius: 50%;
    transform: rotate(-45deg);
}

.danmaku-bubble-heart3::before,
.danmaku-bubble-heart3::after {
    content: '';
    position: absolute;
    width: 120px;
    height: 110px;
    background: inherit;
    border-radius: 50%;
}

.danmaku-bubble-heart3::before {
    left: -60px;
}

.danmaku-bubble-heart3::after {
    top: -55px;
}

/* 中级样式 (10-20级) */
.danmaku-bubble-star1 {
    position: relative;
    width: 100px;
    height: 100px;
    background: inherit;
    clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}

.danmaku-bubble-star2 {
    position: relative;
    width: 80px;
    height: 80px;
    background: inherit;
    clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}

.danmaku-bubble-star3 {
    position: relative;
    width: 120px;
    height: 120px;
    background: inherit;
    clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}

.danmaku-bubble-bubble1 {
    border-radius: 50%;
    position: relative;
    padding: 15px;
}

.danmaku-bubble-bubble1::before {
    content: '';
    position: absolute;
    width: 15px;
    height: 15px;
    background: inherit;
    border-radius: 50%;
    top: -7px;
    left: 20%;
}

.danmaku-bubble-bubble2 {
    border-radius: 50%;
    position: relative;
    padding: 20px;
}

.danmaku-bubble-bubble2::before {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    background: inherit;
    border-radius: 50%;
    top: -10px;
    left: 30%;
}

.danmaku-bubble-bubble3 {
    border-radius: 50%;
    position: relative;
    padding: 25px;
}

.danmaku-bubble-bubble3::before {
    content: '';
    position: absolute;
    width: 25px;
    height: 25px;
    background: inherit;
    border-radius: 50%;
    top: -12px;
    left: 40%;
}

.danmaku-bubble-ribbon1 {
    border-radius: 10px;
    position: relative;
}

.danmaku-bubble-ribbon1::before,
.danmaku-bubble-ribbon1::after {
    content: '';
    position: absolute;
    width: 15px;
    height: 15px;
    background: inherit;
    border-radius: 50%;
    top: -7px;
}

.danmaku-bubble-ribbon1::before {
    left: 15%;
}

.danmaku-bubble-ribbon1::after {
    right: 15%;
}

.danmaku-bubble-ribbon2 {
    border-radius: 15px;
    position: relative;
}

.danmaku-bubble-ribbon2::before,
.danmaku-bubble-ribbon2::after {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    background: inherit;
    border-radius: 50%;
    top: -10px;
}

.danmaku-bubble-ribbon2::before {
    left: 20%;
}

.danmaku-bubble-ribbon2::after {
    right: 20%;
}

.danmaku-bubble-ribbon3 {
    border-radius: 20px;
    position: relative;
}

.danmaku-bubble-ribbon3::before,
.danmaku-bubble-ribbon3::after {
    content: '';
    position: absolute;
    width: 25px;
    height: 25px;
    background: inherit;
    border-radius: 50%;
    top: -12px;
}

.danmaku-bubble-ribbon3::before {
    left: 25%;
}

.danmaku-bubble-ribbon3::after {
    right: 25%;
}

.danmaku-bubble-note1 {
    border-radius: 10px 10px 0 10px;
    position: relative;
}

.danmaku-bubble-note1::before {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    border: 8px solid transparent;
    border-top-color: inherit;
    border-bottom: 0;
    right: -16px;
    top: 15px;
}

.danmaku-bubble-note2 {
    border-radius: 15px 15px 0 15px;
    position: relative;
}

.danmaku-bubble-note2::before {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    border: 10px solid transparent;
    border-top-color: inherit;
    border-bottom: 0;
    right: -20px;
    top: 20px;
}

.danmaku-bubble-note3 {
    border-radius: 20px 20px 0 20px;
    position: relative;
}

.danmaku-bubble-note3::before {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    border: 12px solid transparent;
    border-top-color: inherit;
    border-bottom: 0;
    right: -24px;
    top: 25px;
}

.danmaku-bubble-flower1 {
    border-radius: 40% 60% 40% 60% / 60% 40% 60% 40%;
    position: relative;
}

.danmaku-bubble-flower1::before,
.danmaku-bubble-flower1::after {
    content: '';
    position: absolute;
    width: 15px;
    height: 15px;
    background: inherit;
    border-radius: 50%;
}

.danmaku-bubble-flower1::before {
    left: -7px;
    top: -7px;
}

.danmaku-bubble-flower1::after {
    right: -7px;
    top: -7px;
}

.danmaku-bubble-flower2 {
    border-radius: 50% 50% 50% 50% / 60% 40% 60% 40%;
    position: relative;
}

.danmaku-bubble-flower2::before,
.danmaku-bubble-flower2::after {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    background: inherit;
    border-radius: 50%;
}

.danmaku-bubble-flower2::before {
    left: -10px;
    top: -10px;
}

.danmaku-bubble-flower2::after {
    right: -10px;
    top: -10px;
}

.danmaku-bubble-flower3 {
    border-radius: 60% 40% 60% 40% / 40% 60% 40% 60%;
    position: relative;
}

.danmaku-bubble-flower3::before,
.danmaku-bubble-flower3::after {
    content: '';
    position: absolute;
    width: 25px;
    height: 25px;
    background: inherit;
    border-radius: 50%;
}

.danmaku-bubble-flower3::before {
    left: -12px;
    top: -12px;
}

.danmaku-bubble-flower3::after {
    right: -12px;
    top: -12px;
}

.danmaku-bubble-candy1 {
    border-radius: 20px;
    position: relative;
}

.danmaku-bubble-candy1::before {
    content: '';
    position: absolute;
    width: 12px;
    height: 12px;
    background: #ff6b6b;
    border-radius: 50%;
    top: -6px;
    left: 25%;
}

.danmaku-bubble-candy2 {
    border-radius: 25px;
    position: relative;
}

.danmaku-bubble-candy2::before {
    content: '';
    position: absolute;
    width: 15px;
    height: 15px;
    background: #ff6b6b;
    border-radius: 50%;
    top: -7px;
    left: 30%;
}

.danmaku-bubble-candy3 {
    border-radius: 30px;
    position: relative;
}

.danmaku-bubble-candy3::before {
    content: '';
    position: absolute;
    width: 18px;
    height: 18px;
    background: #ff6b6b;
    border-radius: 50%;
    top: -9px;
    left: 35%;
}

/* 高级样式 (20-30级) */
.danmaku-bubble-gem1 {
    position: relative;
    width: 90px;
    height: 100px;
    background: inherit;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}

.danmaku-bubble-gem2 {
    position: relative;
    width: 100px;
    height: 110px;
    background: inherit;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}

.danmaku-bubble-gem3 {
    position: relative;
    width: 110px;
    height: 120px;
    background: inherit;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}

.danmaku-bubble-leaf1 {
    position: relative;
    width: 90px;
    height: 70px;
    background: inherit;
    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
}

.danmaku-bubble-leaf2 {
    position: relative;
    width: 100px;
    height: 80px;
    background: inherit;
    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
}

.danmaku-bubble-leaf3 {
    position: relative;
    width: 110px;
    height: 90px;
    background: inherit;
    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
}

.danmaku-bubble-snow1 {
    border-radius: 50%;
    position: relative;
}

.danmaku-bubble-snow1::before,
.danmaku-bubble-snow1::after {
    content: '';
    position: absolute;
    width: 25px;
    height: 25px;
    background: inherit;
    border-radius: 50%;
}

.danmaku-bubble-snow1::before {
    left: -12px;
    top: 15px;
}

.danmaku-bubble-snow1::after {
    right: -12px;
    top: 15px;
}

.danmaku-bubble-snow2 {
    border-radius: 50%;
    position: relative;
}

.danmaku-bubble-snow2::before,
.danmaku-bubble-snow2::after {
    content: '';
    position: absolute;
    width: 30px;
    height: 30px;
    background: inherit;
    border-radius: 50%;
}

.danmaku-bubble-snow2::before {
    left: -15px;
    top: 20px;
}

.danmaku-bubble-snow2::after {
    right: -15px;
    top: 20px;
}

.danmaku-bubble-snow3 {
    border-radius: 50%;
    position: relative;
}

.danmaku-bubble-snow3::before,
.danmaku-bubble-snow3::after {
    content: '';
    position: absolute;
    width: 35px;
    height: 35px;
    background: inherit;
    border-radius: 50%;
}

.danmaku-bubble-snow3::before {
    left: -17px;
    top: 25px;
}

.danmaku-bubble-snow3::after {
    right: -17px;
    top: 25px;
}

.danmaku-bubble-fire1 {
    position: relative;
    border-radius: 10px 10px 50% 50%;
}

.danmaku-bubble-fire1::before,
.danmaku-bubble-fire1::after {
    content: '';
    position: absolute;
    width: 15px;
    height: 15px;
    background: #ff6b6b;
    border-radius: 50%;
    top: -7px;
}

.danmaku-bubble-fire1::before {
    left: 15%;
}

.danmaku-bubble-fire1::after {
    right: 15%;
}

.danmaku-bubble-fire2 {
    position: relative;
    border-radius: 15px 15px 50% 50%;
}

.danmaku-bubble-fire2::before,
.danmaku-bubble-fire2::after {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    background: #ff6b6b;
    border-radius: 50%;
    top: -10px;
}

.danmaku-bubble-fire2::before {
    left: 20%;
}

.danmaku-bubble-fire2::after {
    right: 20%;
}

.danmaku-bubble-fire3 {
    position: relative;
    border-radius: 20px 20px 50% 50%;
}

.danmaku-bubble-fire3::before,
.danmaku-bubble-fire3::after {
    content: '';
    position: absolute;
    width: 25px;
    height: 25px;
    background: #ff6b6b;
    border-radius: 50%;
    top: -12px;
}

.danmaku-bubble-fire3::before {
    left: 25%;
}

.danmaku-bubble-fire3::after {
    right: 25%;
}

.danmaku-bubble-water1 {
    border-radius: 50%;
    position: relative;
}

.danmaku-bubble-water1::before {
    content: '';
    position: absolute;
    width: 35px;
    height: 15px;
    background: inherit;
    border-radius: 50%;
    top: -7px;
    left: 15%;
}

.danmaku-bubble-water2 {
    border-radius: 50%;
    position: relative;
}

.danmaku-bubble-water2::before {
    content: '';
    position: absolute;
    width: 40px;
    height: 20px;
    background: inherit;
    border-radius: 50%;
    top: -10px;
    left: 20%;
}

.danmaku-bubble-water3 {
    border-radius: 50%;
    position: relative;
}

.danmaku-bubble-water3::before {
    content: '';
    position: absolute;
    width: 45px;
    height: 25px;
    background: inherit;
    border-radius: 50%;
    top: -12px;
    left: 25%;
}

.danmaku-bubble-lightning1 {
    position: relative;
    clip-path: polygon(50% 0%, 60% 40%, 100% 40%, 65% 60%, 75% 100%, 50% 70%, 25% 100%, 35% 60%, 0% 40%, 40% 40%);
}

.danmaku-bubble-lightning2 {
    position: relative;
    clip-path: polygon(50% 0%, 55% 35%, 95% 35%, 60% 55%, 70% 95%, 50% 65%, 30% 95%, 40% 55%, 5% 35%, 45% 35%);
}

.danmaku-bubble-lightning3 {
    position: relative;
    clip-path: polygon(50% 0%, 65% 45%, 100% 45%, 70% 65%, 80% 100%, 50% 75%, 20% 100%, 30% 65%, 0% 45%, 55% 45%);
}

.danmaku-bubble-moon1 {
    border-radius: 50%;
    position: relative;
}

.danmaku-bubble-moon1::before {
    content: '';
    position: absolute;
    width: 25px;
    height: 25px;
    background: #f0f0f0;
    border-radius: 50%;
    top: 8px;
    left: 12px;
}

.danmaku-bubble-moon2 {
    border-radius: 50%;
    position: relative;
}

.danmaku-bubble-moon2::before {
    content: '';
    position: absolute;
    width: 30px;
    height: 30px;
    background: #f0f0f0;
    border-radius: 50%;
    top: 10px;
    left: 15px;
}

.danmaku-bubble-moon3 {
    border-radius: 50%;
    position: relative;
}

.danmaku-bubble-moon3::before {
    content: '';
    position: absolute;
    width: 35px;
    height: 35px;
    background: #f0f0f0;
    border-radius: 50%;
    top: 12px;
    left: 18px;
}

.danmaku-bubble-sun1 {
    border-radius: 50%;
    position: relative;
}

.danmaku-bubble-sun1::before,
.danmaku-bubble-sun1::after {
    content: '';
    position: absolute;
    width: 4px;
    height: 12px;
    background: #ffd166;
}

.danmaku-bubble-sun1::before {
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
}

.danmaku-bubble-sun1::after {
    bottom: -15px;
    left: 50%;
    transform: translateX(-50%);
}

.danmaku-bubble-sun2 {
    border-radius: 50%;
    position: relative;
}

.danmaku-bubble-sun2::before,
.danmaku-bubble-sun2::after {
    content: '';
    position: absolute;
    width: 5px;
    height: 15px;
    background: #ffd166;
}

.danmaku-bubble-sun2::before {
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
}

.danmaku-bubble-sun2::after {
    bottom: -20px;
    left: 50%;
    transform: translateX(-50%);
}

.danmaku-bubble-sun3 {
    border-radius: 50%;
    position: relative;
}

.danmaku-bubble-sun3::before,
.danmaku-bubble-sun3::after {
    content: '';
    position: absolute;
    width: 6px;
    height: 18px;
    background: #ffd166;
}

.danmaku-bubble-sun3::before {
    top: -25px;
    left: 50%;
    transform: translateX(-50%);
}

.danmaku-bubble-sun3::after {
    bottom: -25px;
    left: 50%;
    transform: translateX(-50%);
}

.danmaku-bubble-rainbow1 {
    border-radius: 20px;
    position: relative;
    background: linear-gradient(90deg, #ff9a9e, #fad0c4, #fad0c4, #a1c4fd);
}

.danmaku-bubble-rainbow2 {
    border-radius: 25px;
    position: relative;
    background: linear-gradient(90deg, #a1c4fd, #c2e9fb, #c2e9fb, #ff9a9e);
}

.danmaku-bubble-rainbow3 {
    border-radius: 30px;
    position: relative;
    background: linear-gradient(90deg, #ff9a9e, #fad0c4, #a1c4fd, #c2e9fb);
}

.danmaku-bubble-crown1 {
    position: relative;
    border-radius: 10px 10px 0 0;
}

.danmaku-bubble-crown1::before,
.danmaku-bubble-crown1::after {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    border: 8px solid transparent;
    border-bottom-color: inherit;
    border-top: 0;
    top: -8px;
}

.danmaku-bubble-crown1::before {
    left: 15%;
}

.danmaku-bubble-crown1::after {
    right: 15%;
}

.danmaku-bubble-crown2 {
    position: relative;
    border-radius: 15px 15px 0 0;
}

.danmaku-bubble-crown2::before,
.danmaku-bubble-crown2::after {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    border: 10px solid transparent;
    border-bottom-color: inherit;
    border-top: 0;
    top: -10px;
}

.danmaku-bubble-crown2::before {
    left: 20%;
}

.danmaku-bubble-crown2::after {
    right: 20%;
}

.danmaku-bubble-crown3 {
    position: relative;
    border-radius: 20px 20px 0 0;
}

.danmaku-bubble-crown3::before,
.danmaku-bubble-crown3::after {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    border: 12px solid transparent;
    border-bottom-color: inherit;
    border-top: 0;
    top: -12px;
}

.danmaku-bubble-crown3::before {
    left: 25%;
}

.danmaku-bubble-crown3::after {
    right: 25%;
}

.danmaku-bubble-shield1 {
    position: relative;
    width: 90px;
    height: 110px;
    background: inherit;
    border-radius: 50% 50% 40% 40% / 60% 60% 40% 40%;
}

.danmaku-bubble-shield2 {
    position: relative;
    width: 100px;
    height: 120px;
    background: inherit;
    border-radius: 50% 50% 40% 40% / 60% 60% 40% 40%;
}

.danmaku-bubble-shield3 {
    position: relative;
    width: 110px;
    height: 130px;
    background: inherit;
    border-radius: 50% 50% 40% 40% / 60% 60% 40% 40%;
}

.danmaku-bubble-sword1 {
    position: relative;
    width: 90px;
    height: 15px;
    background: inherit;
    border-radius: 10px;
}

.danmaku-bubble-sword1::before {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    border: 8px solid transparent;
    border-bottom-color: inherit;
    border-top: 0;
    top: -16px;
    left: 50%;
    transform: translateX(-50%);
}

.danmaku-bubble-sword2 {
    position: relative;
    width: 100px;
    height: 20px;
    background: inherit;
    border-radius: 15px;
}

.danmaku-bubble-sword2::before {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    border: 10px solid transparent;
    border-bottom-color: inherit;
    border-top: 0;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
}

.danmaku-bubble-sword3 {
    position: relative;
    width: 110px;
    height: 25px;
    background: inherit;
    border-radius: 20px;
}

.danmaku-bubble-sword3::before {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    border: 12px solid transparent;
    border-bottom-color: inherit;
    border-top: 0;
    top: -24px;
    left: 50%;
    transform: translateX(-50%);
}

.danmaku-bubble-diamond1 {
    position: relative;
    width: 80px;
    height: 80px;
    background: inherit;
    transform: rotate(45deg);
}

.danmaku-bubble-diamond2 {
    position: relative;
    width: 90px;
    height: 90px;
    background: inherit;
    transform: rotate(45deg);
}

.danmaku-bubble-diamond3 {
    position: relative;
    width: 100px;
    height: 100px;
    background: inherit;
    transform: rotate(45deg);
}

.danmaku-bubble-crystal1 {
    position: relative;
    width: 90px;
    height: 100px;
    background: inherit;
    clip-path: polygon(50% 0%, 80% 10%, 100% 35%, 100% 70%, 80% 90%, 50% 100%, 20% 90%, 0% 70%, 0% 35%, 20% 10%);
}

.danmaku-bubble-crystal2 {
    position: relative;
    width: 100px;
    height: 110px;
    background: inherit;
    clip-path: polygon(50% 0%, 80% 10%, 100% 35%, 100% 70%, 80% 90%, 50% 100%, 20% 90%, 0% 70%, 0% 35%, 20% 10%);
}

.danmaku-bubble-crystal3 {
    position: relative;
    width: 110px;
    height: 120px;
    background: inherit;
    clip-path: polygon(50% 0%, 80% 10%, 100% 35%, 100% 70%, 80% 90%, 50% 100%, 20% 90%, 0% 70%, 0% 35%, 20% 10%);
}

.danmaku-bubble-galaxy1 {
    position: relative;
    border-radius: 50%;
    background: radial-gradient(circle, #4a00e0, #8e2de2);
}

.danmaku-bubble-galaxy2 {
    position: relative;
    border-radius: 50%;
    background: radial-gradient(circle, #00c9ff, #92fe9d);
}

.danmaku-bubble-galaxy3 {
    position: relative;
    border-radius: 50%;
    background: radial-gradient(circle, #f85032, #e73827);
}

.danmaku-bubble-nebula1 {
    position: relative;
    border-radius: 40% 60% 40% 60% / 60% 40% 60% 40%;
    background: linear-gradient(45deg, #ff9a9e, #fad0c4, #a1c4fd);
}

.danmaku-bubble-nebula2 {
    position: relative;
    border-radius: 50% 50% 50% 50% / 60% 40% 60% 40%;
    background: linear-gradient(45deg, #a1c4fd, #c2e9fb, #ff9a9e);
}

.danmaku-bubble-nebula3 {
    position: relative;
    border-radius: 60% 40% 60% 40% / 40% 60% 40% 60%;
    background: linear-gradient(45deg, #ff9a9e, #fad0c4, #a1c4fd, #c2e9fb);
}

.danmaku-bubble-comet1 {
    position: relative;
    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
}

.danmaku-bubble-comet1::before {
    content: '';
    position: absolute;
    width: 40px;
    height: 10px;
    background: inherit;
    border-radius: 50%;
    top: -5px;
    left: 20%;
    transform: rotate(30deg);
}

.danmaku-bubble-comet2 {
    position: relative;
    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
}

.danmaku-bubble-comet2::before {
    content: '';
    position: absolute;
    width: 50px;
    height: 15px;
    background: inherit;
    border-radius: 50%;
    top: -7px;
    left: 25%;
    transform: rotate(30deg);
}

.danmaku-bubble-comet3 {
    position: relative;
    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
}

.danmaku-bubble-comet3::before {
    content: '';
    position: absolute;
    width: 60px;
    height: 20px;
    background: inherit;
    border-radius: 50%;
    top: -10px;
    left: 30%;
    transform: rotate(30deg);
}

.danmaku-bubble-hourglass1 {
    position: relative;
    width: 80px;
    height: 100px;
    background: inherit;
    clip-path: polygon(0% 0%, 100% 0%, 70% 50%, 100% 100%, 0% 100%, 30% 50%);
}

.danmaku-bubble-hourglass2 {
    position: relative;
    width: 90px;
    height: 110px;
    background: inherit;
    clip-path: polygon(0% 0%, 100% 0%, 70% 50%, 100% 100%, 0% 100%, 30% 50%);
}

.danmaku-bubble-hourglass3 {
    position: relative;
    width: 100px;
    height: 120px;
    background: inherit;
    clip-path: polygon(0% 0%, 100% 0%, 70% 50%, 100% 100%, 0% 100%, 30% 50%);
}

.danmaku-bubble-clock1 {
    position: relative;
    border-radius: 50%;
}

.danmaku-bubble-clock1::before,
.danmaku-bubble-clock1::after {
    content: '';
    position: absolute;
    background: #333;
    top: 50%;
    left: 50%;
    transform-origin: left center;
}

.danmaku-bubble-clock1::before {
    width: 20px;
    height: 2px;
    transform: translate(-50%, -50%) rotate(90deg);
}

.danmaku-bubble-clock1::after {
    width: 15px;
    height: 2px;
    transform: translate(-50%, -50%) rotate(180deg);
}

.danmaku-bubble-clock2 {
    position: relative;
    border-radius: 50%;
}

.danmaku-bubble-clock2::before,
.danmaku-bubble-clock2::after {
    content: '';
    position: absolute;
    background: #333;
    top: 50%;
    left: 50%;
    transform-origin: left center;
}

.danmaku-bubble-clock2::before {
    width: 25px;
    height: 3px;
    transform: translate(-50%, -50%) rotate(90deg);
}

.danmaku-bubble-clock2::after {
    width: 20px;
    height: 3px;
    transform: translate(-50%, -50%) rotate(180deg);
}

.danmaku-bubble-clock3 {
    position: relative;
    border-radius: 50%;
}

.danmaku-bubble-clock3::before,
.danmaku-bubble-clock3::after {
    content: '';
    position: absolute;
    background: #333;
    top: 50%;
    left: 50%;
    transform-origin: left center;
}

.danmaku-bubble-clock3::before {
    width: 30px;
    height: 4px;
    transform: translate(-50%, -50%) rotate(90deg);
}

.danmaku-bubble-clock3::after {
    width: 25px;
    height: 4px;
    transform: translate(-50%, -50%) rotate(180deg);
}

.danmaku-bubble-infinity1 {
    position: relative;
    width: 100px;
    height: 50px;
    background: inherit;
    clip-path: path("M50,25 C60,10 90,10 100,25 C90,40 60,40 50,25 C40,10 10,10 0,25 C10,40 40,40 50,25 Z");
}

.danmaku-bubble-infinity2 {
    position: relative;
    width: 110px;
    height: 55px;
    background: inherit;
    clip-path: path("M55,27.5 C66,11 99,11 110,27.5 C99,44 66,44 55,27.5 C44,11 11,11 0,27.5 C11,44 44,44 55,27.5 Z");
}

.danmaku-bubble-infinity3 {
    position: relative;
    width: 120px;
    height: 60px;
    background: inherit;
    clip-path: path("M60,30 C72,12 108,12 120,30 C108,48 72,48 60,30 C48,12 12,12 0,30 C12,48 48,48 60,30 Z");
}

.danmaku-bubble-mystic1 {
    position: relative;
    border-radius: 40% 60% 40% 60% / 60% 40% 60% 40%;
    background: linear-gradient(45deg, #8e2de2, #4a00e0);
}

.danmaku-bubble-mystic2 {
    position: relative;
    border-radius: 50% 50% 50% 50% / 60% 40% 60% 40%;
    background: linear-gradient(45deg, #00c9ff, #92fe9d);
}

.danmaku-bubble-mystic3 {
    position: relative;
    border-radius: 60% 40% 60% 40% / 40% 60% 40% 60%;
    background: linear-gradient(45deg, #f85032, #e73827);
}

.danmaku-bubble-legendary1 {
    position: relative;
    border-radius: 30px;
    background: linear-gradient(45deg, #ffd89b, #19547b);
}

.danmaku-bubble-legendary2 {
    position: relative;
    border-radius: 35px;
    background: linear-gradient(45deg, #ff7e5f, #feb47b);
}

.danmaku-bubble-legendary3 {
    position: relative;
    border-radius: 40px;
    background: linear-gradient(45deg, #654ea3, #da98b4);
}

.danmaku-bubble-divine1 {
    position: relative;
    border-radius: 50%;
    background: radial-gradient(circle, #ffd89b, #19547b);
}

.danmaku-bubble-divine2 {
    position: relative;
    border-radius: 50%;
    background: radial-gradient(circle, #ff7e5f, #feb47b);
}

.danmaku-bubble-divine3 {
    position: relative;
    border-radius: 50%;
    background: radial-gradient(circle, #654ea3, #da98b4);
}

.danmaku-bubble-ultimate {
    position: relative;
    border-radius: 40px;
    background: linear-gradient(45deg, #8e2de2, #4a00e0, #00c9ff, #92fe9d);
    animation: ultimateGlow 3s ease-in-out infinite alternate;
}

@keyframes ultimateGlow {
    0% { box-shadow: 0 0 10px #8e2de2; }
    25% { box-shadow: 0 0 15px #4a00e0; }
    50% { box-shadow: 0 0 20px #00c9ff; }
    75% { box-shadow: 0 0 25px #92fe9d; }
    100% { box-shadow: 0 0 30px #8e2de2; }
}

/* 弹幕输入区域 */
.danmaku-input-container-right {
    display: flex;
    gap: 10px;
    margin-top: 15px;
    align-items: center;
    padding: 8px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.1);
    flex-direction: column;
}

.danmaku-input-row {
    display: flex;
    width: 100%;
    gap: 10px;
    align-items: center;
}

.danmaku-bubble-wrapper {
    flex-grow: 1;
    position: relative;
    width: 100%;
}

.danmaku-bubble-input {
    flex-grow: 1;
    padding: 12px 16px;
    border: 2px solid var(--theme-danmaku-input-border);
    border-radius: 25px;
    font-size: 14px;
    background: rgba(255, 255, 255, 0.9);
    color: var(--theme-text-main);
    transition: all 0.3s;
    width: 100%;
    box-sizing: border-box;
}

.danmaku-bubble-input:focus {
    outline: none;
    border-color: var(--theme-primary);
    box-shadow: 0 0 12px rgba(214, 93, 177, 0.3);
}

.danmaku-send-btn {
    padding: 12px 20px;
    background: linear-gradient(135deg, var(--theme-primary), var(--theme-secondary));
    color: white;
    border: none;
    border-radius: 25px;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s;
    box-shadow: 0 4px 12px rgba(214, 93, 177, 0.2);
    margin: 0;
    display: block;
    width: auto;
    flex-shrink: 0;
}

.danmaku-send-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(214, 93, 177, 0.3);
}

.danmaku-send-btn:active {
    transform: translateY(0);
}

/* 图片/emoji按钮 */
.danmaku-media-buttons {
    display: flex;
    gap: 8px;
    margin-top: 10px;
    justify-content: center;
}

.danmaku-media-btn {
    padding: 8px 16px;
    background: rgba(255, 255, 255, 0.8);
    border: 1px solid var(--theme-secondary);
    border-radius: 20px;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 5px;
}

.danmaku-media-btn:hover {
    background: var(--theme-secondary);
    border-color: var(--theme-primary);
    transform: scale(1.05);
}

/* Emoji面板 */
.emoji-panel {
    position: absolute;
    bottom: 100%;
    left: 0;
    background: white;
    border: 1px solid var(--theme-secondary);
    border-radius: 12px;
    padding: 15px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    z-index: 100;
    width: 300px;
    max-height: 200px;
    overflow-y: auto;
    display: none;
    margin-bottom: 10px;
}

.emoji-panel.visible {
    display: block;
}

.emoji-categories {
    display: flex;
    gap: 10px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}

.emoji-category-btn {
    padding: 5px 10px;
    background: #f0f0f0;
    border: none;
    border-radius: 15px;
    font-size: 12px;
    cursor: pointer;
}

.emoji-category-btn.active {
    background: var(--theme-primary);
    color: white;
}

.emoji-grid {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 8px;
}

.emoji-item {
    font-size: 20px;
    text-align: center;
    cursor: pointer;
    padding: 5px;
    border-radius: 8px;
    transition: all 0.2s;
}

.emoji-item:hover {
    background: #f0f0f0;
    transform: scale(1.2);
}

/* 图片上传面板 */
.image-upload-panel {
    position: absolute;
    bottom: 100%;
    left: 0;
    background: white;
    border: 1px solid var(--theme-secondary);
    border-radius: 12px;
    padding: 15px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    z-index: 100;
    width: 300px;
    display: none;
    margin-bottom: 10px;
}

.image-upload-panel.visible {
    display: block;
}

.image-upload-area {
    border: 2px dashed var(--theme-secondary);
    border-radius: 10px;
    padding: 20px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s;
    margin-bottom: 15px;
}

.image-upload-area:hover {
    border-color: var(--theme-primary);
    background: rgba(214, 93, 177, 0.05);
}

.image-preview {
    max-width: 100%;
    max-height: 150px;
    border-radius: 8px;
    display: none;
}

.image-preview.show {
    display: block;
}

/* 弹幕列表项 */
.danmaku-new-item {
    display: flex;
    gap: 12px;
    padding: 12px;
    margin: 8px 0;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(255, 182, 193, 0.4);
    list-style: none !important;
    transition: all 0.3s;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    position: relative;
}

.danmaku-new-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(214, 93, 177, 0.15);
}

.danmaku-new-item:hover .danmaku-new-sender::after {
    content: attr(data-full-info);
    position: absolute;
    top: -25px;
    left: 0;
    background: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 100;
}

.danmaku-new-content {
    flex-grow: 1;
    padding: 12px 16px;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    position: relative;
}

.danmaku-new-sender {
    font-weight: 600;
    color: var(--theme-primary);
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.danmaku-new-text {
    word-break: break-all;
    line-height: 1.5;
    font-size: 14px;
}

.danmaku-new-image {
    max-width: 200px;
    max-height: 200px;
    border-radius: 8px;
    cursor: pointer;
    transition: transform 0.3s;
}

.danmaku-new-image:hover {
    transform: scale(1.05);
}

.danmaku-new-time {
    font-size: 12px;
    color: #999;
    text-align: right;
    margin-top: 5px;
}

/* 弹幕时间分组 */
.danmaku-new-time-group {
    list-style: none !important;
    text-align: center;
    padding: 5px 0;
    margin: 0;
}

.time-new-separator {
    display: inline-block;
    background: rgba(214, 93, 177, 0.15);
    color: var(--theme-text-main);
    padding: 6px 16px;
    border-radius: 16px;
    font-size: 13px;
    font-weight: 500;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

/* 弹幕动作按钮 */
.danmaku-new-actions {
    display: flex;
    gap: 6px;
    align-items: center;
    flex-direction: column;
}

.danmaku-new-like-btn,
.danmaku-new-dislike-btn,
.danmaku-new-retract-btn {
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid var(--theme-secondary);
    border-radius: 8px;
    padding: 6px 10px;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s;
    color: var(--theme-text-main);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 3px;
}

.danmaku-new-like-btn:hover,
.danmaku-new-dislike-btn:hover,
.danmaku-new-retract-btn:hover {
    background: var(--theme-secondary);
    border-color: var(--theme-primary);
    transform: scale(1.05);
    box-shadow: 0 2px 6px rgba(214, 93, 177, 0.2);
}

.danmaku-new-retract-btn:hover {
    background: rgba(255, 107, 157, 0.2);
    border-color: #ff1493;
}

/* 弹幕特效 */
.danmaku-new-effect-float {
    animation: float 3s ease-in-out infinite;
}

@keyframes float {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-5px); }
}

.danmaku-new-effect-pulse {
    animation: pulse 1s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.8; transform: scale(1.02); }
}

.danmaku-new-effect-shake {
    animation: shake 0.5s ease-in-out infinite;
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-3px); }
    75% { transform: translateX(3px); }
}

.danmaku-new-effect-fade-in {
    animation: fadeInEffect 1s ease-in;
}

@keyframes fadeInEffect {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.danmaku-new-effect-glow {
    animation: glow 2s ease-in-out infinite;
}

@keyframes glow {
    0%, 100% { box-shadow: 0 0 8px rgba(255, 182, 193, 0.6); }
    50% { box-shadow: 0 0 20px rgba(255, 107, 157, 0.9); }
}

.danmaku-new-effect-bounce {
    animation: bounce 0.6s ease-in-out;
}

@keyframes bounce {
    0% { transform: translateY(0); }
    50% { transform: translateY(-15px); }
    100% { transform: translateY(0); }
}

.danmaku-new-effect-spin {
    animation: spin 2s linear infinite;
}

@keyframes spin {
    from { transform: rotateZ(0deg); }
    to { transform: rotateZ(360deg); }
}

.danmaku-new-effect-flip {
    animation: flip 0.6s ease-in-out;
}

@keyframes flip {
    0% { transform: scaleX(1); }
    50% { transform: scaleX(-1); }
    100% { transform: scaleX(1); }
}

.danmaku-new-effect-wave {
    animation: wave 1s ease-in-out infinite;
}

@keyframes wave {
    0%, 100% { transform: skewY(0deg); }
    50% { transform: skewY(3deg); }
}

/* 新增特效 */
.danmaku-new-effect-rainbow {
    animation: rainbow 3s linear infinite;
}

@keyframes rainbow {
    0% { filter: hue-rotate(0deg); }
    100% { filter: hue-rotate(360deg); }
}

.danmaku-new-effect-sparkle {
    animation: sparkle 1s ease-in-out infinite;
}

@keyframes sparkle {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; filter: brightness(1.5); }
}

.danmaku-new-effect-zoom {
    animation: zoom 2s ease-in-out infinite;
}

@keyframes zoom {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

.danmaku-new-effect-swing {
    animation: swing 1s ease-in-out infinite;
}

@keyframes swing {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(5deg); }
    75% { transform: rotate(-5deg); }
}

.danmaku-new-effect-flash {
    animation: flash 0.5s ease-in-out infinite;
}

@keyframes flash {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

.danmaku-new-effect-blur {
    animation: blur 2s ease-in-out infinite;
}

@keyframes blur {
    0%, 100% { filter: blur(0px); }
    50% { filter: blur(2px); }
}

.danmaku-new-effect-rotate {
    animation: rotate 3s linear infinite;
}

@keyframes rotate {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.danmaku-new-effect-slide {
    animation: slide 2s ease-in-out infinite;
}

@keyframes slide {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(10px); }
}

/* 新增特效 */
.danmaku-new-effect-fire {
    animation: fire 1s ease-in-out infinite;
}

@keyframes fire {
    0%, 100% { text-shadow: 0 0 5px #ff0000; }
    50% { text-shadow: 0 0 20px #ff9900, 0 0 30px #ff0000; }
}

.danmaku-new-effect-water {
    animation: water 2s ease-in-out infinite;
}

@keyframes water {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(5px); }
}

.danmaku-new-effect-wind {
    animation: wind 1.5s ease-in-out infinite;
}

@keyframes wind {
    0%, 100% { transform: translateX(0px); }
    25% { transform: translateX(5px); }
    75% { transform: translateX(-5px); }
}

.danmaku-new-effect-thunder {
    animation: thunder 0.5s ease-in-out infinite;
}

@keyframes thunder {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; text-shadow: 0 0 10px #ffff00; }
}

.danmaku-new-effect-snow {
    animation: snow 3s linear infinite;
}

@keyframes snow {
    0% { transform: translateY(0) rotate(0deg); }
    100% { transform: translateY(100px) rotate(360deg); }
}

/* 画板背景色选择器 */
.color-picker-container {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}

.color-option {
    width: 25px;
    height: 25px;
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid transparent;
    transition: all 0.2s;
}

.color-option:hover {
    transform: scale(1.2);
}

.color-option.selected {
    border-color: #333;
    transform: scale(1.2);
}

/* 响应式设计 */
@media (max-width: 768px) {
    .danmaku-new-settings-panel {
        padding: 12px;
        border-radius: 12px;
    }
    
    .danmaku-new-input-container {
        gap: 8px;
    }
    
    .danmaku-new-input {
        padding: 10px 14px;
        font-size: 13px;
    }
    
    .danmaku-new-send-btn {
        padding: 10px 16px;
        font-size: 13px;
    }
    
    .emoji-panel,
    .image-upload-panel {
        width: 280px;
    }
    
    .emoji-grid {
        grid-template-columns: repeat(6, 1fr);
    }
}

/* 多文件上传预览样式 */
.image-preview-container, .pdf-preview-container {
    margin-top: 10px;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
    background-color: #f9f9f9;
}

.image-preview-list, .pdf-preview-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 10px;
}

.preview-item {
    position: relative;
    width: 100px;
    height: 100px;
    border: 1px solid #ccc;
    border-radius: 5px;
    overflow: hidden;
}

.preview-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.preview-item .pdf-placeholder {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    background-color: #f0f0f0;
    font-size: 12px;
    text-align: center;
}

.preview-item .pdf-icon {
    font-size: 24px;
    margin-bottom: 5px;
}

.preview-item .remove-btn {
    position: absolute;
    top: 2px;
    right: 2px;
    background-color: rgba(255, 0, 0, 0.7);
    color: white;
    border: none;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    font-size: 12px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
}

.clear-all-btn {
    background-color: #ff4444;
    color: white;
    border: none;
    padding: 5px 10px;
    border-radius: 3px;
    cursor: pointer;
    font-size: 12px;
}

.clear-all-btn:hover {
    background-color: #cc3333;
}

/* 在线状态样式 */
.status-online {
    color: #28a745 !important;
    font-weight: bold;
}

.status-offline {
    color: #6c757d !important;
}