/* 打字删除效果样式 - 流光彩色字体 */
.text-capitalize {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Microsoft YaHei', Roboto, Arial, sans-serif;
    font-size: clamp(1.5rem, 3vw, 2.5rem);
    font-weight: 700;
    line-height: 1.4;
    margin: 0.2rem 0;
    min-height: 4rem;
    position: relative !important;
    display: block !important;
    z-index: 1;
    transform: translateZ(0);
    backface-visibility: hidden;
}

/* element - 流光彩色打字文字 */
.element {
    position: relative !important;
    display: inline-block !important;
    min-height: 2.5rem;
    z-index: 10 !important;
    transform: translateZ(0);
    backface-visibility: hidden;
    /* 大号流光彩色字体 */
    font-size: clamp(1.5rem, 3vw, 2.5rem) !important;
    font-weight: 700 !important;
    background: linear-gradient(90deg, 
        #ff6b6b, #ff9e76, #ffd93d, #6bcf7f, 
        #4d96ff, #9d4edd, #ff6b6b);
    background-size: 300% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent !important;
    animation: shimmer 4s linear infinite;
}

/* 打字机文本容器 */
.typewriter-text {
    display: inline-block !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    vertical-align: bottom !important;
    position: relative !important;
    z-index: 10 !important;
    transform: translateZ(0);
    /* 继承流光彩色 */
    background: linear-gradient(90deg, 
        #ff6b6b, #ff9e76, #ffd93d, #6bcf7f, 
        #4d96ff, #9d4edd, #ff6b6b);
    background-size: 300% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent !important;
    animation: shimmer 4s linear infinite;
}

/* 当前显示行 */
.current-line {
    display: inline-block !important;
    position: relative !important;
    z-index: 10 !important;
    transform: translateZ(0);
    /* 继承流光彩色 */
    background: linear-gradient(90deg, 
        #ff6b6b, #ff9e76, #ffd93d, #6bcf7f, 
        #4d96ff, #9d4edd, #ff6b6b);
    background-size: 300% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent !important;
    animation: shimmer 4s linear infinite;
}

/* 光标样式 - 彩色光标 */
.element::after {
    content: '|';
    position: absolute !important;
    right: -10px !important;
    top: 0 !important;
    z-index: 20 !important;
    transform: translateZ(0);
    /* 彩色光标 */
    font-size: clamp(1.5rem, 3vw, 2.5rem) !important;
    font-weight: 400 !important;
    background: linear-gradient(90deg, #ff6b6b, #4d96ff, #6bcf7f);
    background-size: 300% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent !important;
    animation: blink 1s infinite, shimmer 2s linear infinite;
}

/* 打字动画时的光标 */
.element.typing::after {
    animation: blink 0.8s infinite, shimmer 1.5s linear infinite;
}

/* 删除动画时的光标 */
.element.deleting::after {
    animation: blink 0.5s infinite, shimmer 1s linear infinite;
}

/* 暂停时的光标 */
.element.paused::after {
    animation: none !important;
    opacity: 1;
    background: #6bcf7f;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent !important;
}

/* 流光彩色动画 */
@keyframes shimmer {
    0% { background-position: 0% 50%; }
    100% { background-position: 300% 50%; }
}

/* 光标闪烁动画 */
@keyframes blink {
    0%, 100% { 
        opacity: 1; 
    }
    50% { 
        opacity: 0.2; 
    }
}

/* ===== 防止打字机被其他元素干扰 ===== */

/* 卡片内打字机 */
.script-card .text-capitalize,
.script-card .element {
    z-index: 10 !important;
    position: relative !important;
}

/* 抽奖系统内打字机 */
.lottery-system .text-capitalize,
.lottery-system .element {
    z-index: 100 !important;
    position: relative !important;
    isolation: isolate;
}

/* 激活码系统内打字机 */
.activation-code-system .text-capitalize,
.activation-code-system .element {
    z-index: 10 !important;
    position: relative !important;
}

/* 防止父级伪元素影响打字机 */
.activation-code-system::before,
.lottery-system::before {
    z-index: 0 !important;
}

.activation-code-system .text-capitalize,
.lottery-system .text-capitalize {
    z-index: 5 !important;
    position: relative !important;
}

/* 确保打字机不被其他动画影响 */
.text-capitalize *,
.element *,
.typewriter-text *,
.current-line * {
    animation: inherit !important;
    position: relative !important;
    z-index: 10 !important;
}

/* 防止溢出 */
.element {
    overflow: visible !important;
}

.text-capitalize {
    overflow: visible !important;
}

/* ===== 响应式设计 ===== */
@media (max-width: 768px) {
    .text-capitalize {
        font-size: clamp(1.2rem, 2.5vw, 1.8rem) !important;
        min-height: 3rem;
        line-height: 1.6;
    }
    
    .element {
        font-size: clamp(1.2rem, 2.5vw, 1.8rem) !important;
        min-height: 2rem;
        display: inline-block !important;
    }
    
    .element::after {
        right: -6px !important;
        font-size: clamp(1.2rem, 2.5vw, 1.8rem) !important;
        top: 0 !important;
    }
    
    .typewriter-text {
        white-space: normal !important;
        word-break: break-word;
    }
}

/* ===== 深色模式 ===== */
@media (prefers-color-scheme: dark) {
    .element {
        background: linear-gradient(90deg, 
            #ff6b6b, #ff9e76, #ffd93d, #6bcf7f, 
            #4d96ff, #9d4edd, #ff6b6b);
        background-size: 300% 100%;
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent !important;
        animation: shimmer 4s linear infinite;
    }
    
    .element::after {
        background: linear-gradient(90deg, #ff6b6b, #4d96ff, #6bcf7f);
        background-size: 300% 100%;
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent !important;
    }
}

/* ===== 减少动画 ===== */
@media (prefers-reduced-motion: reduce) {
    .element::after {
        animation: none !important;
        opacity: 0.7;
        background: #4d96ff;
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent !important;
    }
    
    .element {
        animation: none !important;
        background: linear-gradient(90deg, #4d96ff, #6bcf7f);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent !important;
    }
    
    .typewriter-text,
    .current-line {
        animation: none !important;
    }
}

/* ===== 小屏手机 ===== */
@media (max-width: 480px) {
    .text-capitalize {
        font-size: clamp(1rem, 2vw, 1.4rem) !important;
        min-height: 2.5rem;
    }
    
    .element {
        font-size: clamp(1rem, 2vw, 1.4rem) !important;
        display: inline !important;
    }
    
    .text-capitalize .element::after {
        font-size: clamp(1rem, 2vw, 1.4rem) !important;
        display: inline-block !important;
    }
    
    .typewriter-text {
        white-space: normal !important;
        word-break: break-word;
        overflow: visible !important;
    }
    
    .current-line {
        display: inline !important;
    }
}