:root {
    --lyrics-color-normal: rgba(255, 255, 255, 0.7);
    --lyrics-color-active: #ffffff;
    --lyrics-color-hover: var(--nav-text-hover, #fd3233);
    --lyrics-font-family: var(--font-family, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);
    --lyrics-line-height: 1.6;
    --lyrics-letter-spacing: 0.1em;
    --lyrics-transition: all 0.4s ease-in-out;
    --lyrics-text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
    --lyrics-glow-shadow: 0 0 15px var(--interactive-glow, rgba(253, 50, 51, 0.6)), 0 0 30px var(--interactive-glow-strong, rgba(253, 50, 51, 0.9));
}

.lyrics-renderer {
    /* 定位到左下角：向左移动至 12px，向下移动至 1vh */
    position: fixed;
    left: max(12px, 1vw);
    bottom: max(6px, 1vh);
    height: 60vh; /* 限制最大高度在左下角，避免充满整个屏幕 */
    z-index: 9999;
    pointer-events: none; /* 让歌词层不捕获鼠标事�?*/
    
    /* 顶层阻断所有全局字体继承 */
    font-family: var(--lyrics-font-family) !important;
    font-weight: 500 !important;
    font-style: normal !important;
    font-variant: normal !important;
    text-transform: none !important;
    text-decoration: none !important;
    letter-spacing: var(--lyrics-letter-spacing) !important;
    
    /* 采用 Flexbox 实现自上而下的流式布局 */
    display: flex;
    flex-direction: column;
    justify-content: flex-end; /* 靠下对齐 */
    align-items: flex-start;
    
    writing-mode: vertical-rl;
    text-orientation: upright;
    
    overflow: visible;
}

.lyrics-renderer__line {
    /* 彻底隔离全局字体样式，确保独立渲�?*/
    font-family: var(--lyrics-font-family) !important;
    font-weight: 500 !important;
    font-style: normal !important;
    font-variant: normal !important;
    text-transform: none !important;
    text-decoration: none !important;
    
    color: var(--lyrics-color-normal);
    line-height: var(--lyrics-line-height) !important;
    letter-spacing: var(--lyrics-letter-spacing) !important;
    text-shadow: var(--lyrics-text-shadow);
    
    /* 添加 will-change 以开�?GPU 硬件加速，提升渲染性能 */
    will-change: opacity, filter, font-size;
    /* transition 中明确指出属性，防止过渡污染 (如干扰JS字号计算引起的跳�? */
    transition: opacity 0.4s ease-in-out, filter 0.4s ease-in-out, visibility 0.4s;
    
    /* 自动换行 */
    word-break: break-all;
    white-space: normal;
    max-height: 100%;
    
    /* 溶解过渡动画初始状态：opacity 渐变 + 模糊 */
    opacity: 0;
    filter: blur(8px);
    -webkit-filter: blur(8px); /* Vendor Prefix */
    transform-origin: center center;
    visibility: hidden;
    position: absolute;
    bottom: 0; /* 锚定底部 */
}

.lyrics-renderer__line--active {
    opacity: 1;
    filter: blur(0px);
    -webkit-filter: blur(0px);
    visibility: visible;
    color: var(--lyrics-color-active);
    position: absolute;
    bottom: 0;
}

/* 逐字鼠标交互容器 */
.lyrics-renderer__span {
    /* 强行继承独立字体设定，无视全局 span 样式污染 */
    font-family: inherit !important;
    font-weight: inherit !important;
    font-style: inherit !important;
    
    /* 使用 inline-block 代替 inline，确�?transform 能够完美生效且不干扰 writing-mode 基础排版 */
    display: inline-block;
    transition: all var(--duration-normal, 0.3s) var(--ease-standard, cubic-bezier(0.4, 0, 0.2, 1));
    transform-origin: center center;
    will-change: transform, color, filter;
}

/* ===== 新增：基�?CSS 变量的像素级消散特效 ===== */
.lyrics-renderer__span--dissolved {
    /* 消散状态：根据 JS 计算的随机值进行平移、旋转、缩�?*/
    transform: translate(var(--tx, 0), var(--ty, 0)) rotate(var(--r, 0)) scale(var(--s, 1)) !important;
    opacity: 0 !important;
    /* 径向模糊效果 */
    filter: blur(12px) drop-shadow(0 0 10px rgba(255,255,255,0.8)) !important;
    -webkit-filter: blur(12px) drop-shadow(0 0 10px rgba(255,255,255,0.8)) !important;
    
    /* 延长过渡时间，体�?1-2 秒的高级感缓慢消�?*/
    transition: transform 1.5s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 1.2s ease-out, filter 1.5s ease-out !important;
}

/* 距离衰减交互：根�?JS 计算�?--hover-intensity 平滑插�?(0~1) */
.lyrics-renderer__span--proximity {
    /* 纯色文字：平滑混合基础色与纯白高亮�?*/
    color: color-mix(in srgb, var(--lyrics-color-normal) calc((1 - var(--hover-intensity)) * 100%), var(--global-text-color, #fff)) !important;
    
    /* 动态纯色投影亮度，使用统一的发光色�?*/
    filter: drop-shadow(0 0 calc(10px * var(--hover-intensity)) var(--interactive-glow)) 
            drop-shadow(0 0 calc(20px * var(--hover-intensity)) var(--interactive-glow)) !important;
    -webkit-filter: drop-shadow(0 0 calc(10px * var(--hover-intensity)) var(--interactive-glow)) 
                    drop-shadow(0 0 calc(20px * var(--hover-intensity)) var(--interactive-glow)) !important;
    
    /* 动态缩�?*/
    transform: scale(calc(1 + 0.3 * var(--hover-intensity))) !important;
    
    /* 强制�?JS �?requestAnimationFrame 接管插值，避免�?CSS 默认 transition 冲突卡顿 */
    transition: none !important;
    z-index: 1;
    position: relative;
}

/* 单个字符悬停发光特效 */
.lyrics-renderer__span--hover {
    /* 移除复杂的渐变动画，仅保留高亮层级，保持纯色发光 */
    z-index: 2;
}