* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Arial', sans-serif;
    background-color: #0a0e17;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    margin: 0;
    padding: 0;
    background-image: 
        radial-gradient(circle at 20% 50%, rgba(0, 255, 255, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(0, 128, 255, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 40% 80%, rgba(255, 0, 255, 0.1) 0%, transparent 50%);
}

/* 石炭星原始森林风格背景 */
body.carboniferous-background {
    background-color: #1a2d1a;
    background-image: 
        radial-gradient(circle at 20% 50%, rgba(50, 150, 50, 0.3) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(30, 100, 30, 0.2) 0%, transparent 50%),
        radial-gradient(circle at 40% 80%, rgba(20, 80, 20, 0.25) 0%, transparent 50%);
}

/* 石炭星原始森林风格游戏容器 */
#game-container.carboniferous-container {
    background-color: rgba(26, 45, 26, 0.9);
    border: 3px solid #2a8b2a;
    box-shadow: 
        0 0 30px rgba(42, 139, 42, 0.3),
        inset 0 0 30px rgba(42, 139, 42, 0.1);
    background-image: linear-gradient(135deg, rgba(26, 45, 26, 0.9) 0%, rgba(44, 68, 44, 0.95) 100%);
}

/* 石炭星风格的游戏容器装饰 */
#game-container.carboniferous-container::before {
    background: linear-gradient(45deg, #2a8b2a, #32cd32, #006400, #2a8b2a);
    opacity: 0.4;
}

/* 增强原始森林风格的背景效果 */
body.carboniferous-background::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
        url('?prompt=dense%20primeval%20forest%20background%20with%20tall%20trees%20and%20lush%20green%20foliage%20in%20a%20distant%20mystical%20landscape%2C%20dark%20and%20enchanting%20atmosphere%2C%20subtle%20sunlight%20filtering%20through%20canopy%2C%204K%20resolution&image_size=landscape_16_9');
    background-size: cover;
    background-position: center;
    opacity: 0.2;
    z-index: -1;
    pointer-events: none;
}

/* 石炭星诡异雾气特效 */
body.carboniferous-background::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: 
        radial-gradient(circle at 20% 30%, rgba(40, 80, 40, 0.3) 0%, transparent 50%),
        radial-gradient(circle at 80% 70%, rgba(30, 60, 30, 0.2) 0%, transparent 50%),
        radial-gradient(circle at 40% 80%, rgba(20, 50, 20, 0.25) 0%, transparent 50%),
        radial-gradient(circle at 60% 20%, rgba(35, 70, 35, 0.15) 0%, transparent 50%);
    animation: fogDrift 20s ease-in-out infinite;
    z-index: -1;
    pointer-events: none;
}

/* 雾气漂移动画 */
@keyframes fogDrift {
    0%, 100% {
        transform: translate(0, 0) scale(1);
        opacity: 0.3;
    }
    25% {
        transform: translate(5%, 3%) scale(1.02);
        opacity: 0.4;
    }
    50% {
        transform: translate(0, 5%) scale(1);
        opacity: 0.35;
    }
    75% {
        transform: translate(-5%, 2%) scale(0.98);
        opacity: 0.25;
    }
}

/* 石炭星游戏区域雾气特效 */
body.carboniferous-background #game-area {
    position: relative;
}

body.carboniferous-background #game-area::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: 
        linear-gradient(to bottom, transparent 0%, rgba(20, 40, 20, 0.2) 50%, transparent 100%),
        linear-gradient(to right, transparent 0%, rgba(25, 50, 25, 0.25) 50%, transparent 100%),
        radial-gradient(circle at 50% 50%, rgba(42, 139, 42, 0.15) 0%, transparent 70%);
    animation: subtleMist 15s ease-in-out infinite;
    pointer-events: none;
    z-index: 100;
}

/* 微妙雾气动画 */
@keyframes subtleMist {
    0%, 100% {
        opacity: 0.2;
        transform: translateY(0);
    }
    50% {
        opacity: 0.3;
        transform: translateY(-5px);
    }
}

/* 石炭星游戏画布边缘装饰 */
body.carboniferous-background #game-canvas {
    position: relative;
    border: 2px solid rgba(42, 139, 42, 0.5);
    box-shadow: 
        0 0 20px rgba(42, 139, 42, 0.3),
        inset 0 0 10px rgba(42, 139, 42, 0.1);
    background: 
        url('?prompt=dense%20primeval%20forest%20background%20with%20tall%20trees%20and%20lush%20green%20foliage%20in%20a%20distant%20mystical%20landscape%2C%20dark%20and%20enchanting%20atmosphere%2C%20subtle%20sunlight%20filtering%20through%20canopy%2C%204K%20resolution&image_size=landscape_16_9'),
        rgba(10, 14, 23, 0.8);
    background-size: cover;
    background-position: center;
    background-blend-mode: overlay;
}

/* 石炭星游戏画布边缘雾气效果 */
body.carboniferous-background #game-canvas::before {
    content: '';
    position: absolute;
    top: -10px;
    left: -10px;
    right: -10px;
    bottom: -10px;
    background: radial-gradient(circle, rgba(42, 139, 42, 0.1) 0%, transparent 70%);
    border-radius: 5px;
    pointer-events: none;
    z-index: -1;
    animation: edgeFog 10s ease-in-out infinite;
}

/* 石炭星游戏区域样式 */
body.carboniferous-background #game-area {
    position: relative;
    background: 
        url('?prompt=dense%20primeval%20forest%20background%20with%20tall%20trees%20and%20lush%20green%20foliage%20in%20a%20distant%20mystical%20landscape%2C%20dark%20and%20enchanting%20atmosphere%2C%20subtle%20sunlight%20filtering%20through%20canopy%2C%204K%20resolution&image_size=landscape_16_9'),
        rgba(31, 38, 53, 0.8);
    background-size: cover;
    background-position: center;
    background-blend-mode: overlay;
    border: 2px solid rgba(42, 139, 42, 0.5);
    box-shadow: 
        0 0 30px rgba(42, 139, 42, 0.2),
        inset 0 0 20px rgba(42, 139, 42, 0.1);
}

/* 边缘雾气动画 */
@keyframes edgeFog {
    0%, 100% {
        opacity: 0.2;
        transform: scale(1);
    }
    50% {
        opacity: 0.3;
        transform: scale(1.05);
    }
}

/* 高级粒子动画 */
@keyframes particleFloat {
    0%, 100% {
        transform: translateY(0) translateX(0) rotate(0deg);
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    100% {
        transform: translateY(-100vh) translateX(50px) rotate(360deg);
        opacity: 0;
    }
}

/* 能量波纹动画 */
@keyframes energyWave {
    0% {
        transform: scale(0.8);
        opacity: 0.8;
    }
    50% {
        transform: scale(1.2);
        opacity: 0.4;
    }
    100% {
        transform: scale(1.5);
        opacity: 0;
    }
}

/* 霓虹闪烁动画 */
@keyframes neonFlicker {
    0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% {
        opacity: 1;
        text-shadow: 
            0 0 10px #00d4ff,
            0 0 20px #00d4ff,
            0 0 40px #00d4ff,
            0 0 80px #00d4ff;
    }
    20%, 24%, 55% {
        opacity: 0.5;
        text-shadow: none;
    }
}

/* 全息扫描动画 */
@keyframes hologramScan {
    0% {
        transform: translateY(-100%);
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        transform: translateY(100%);
        opacity: 0;
    }
}

/* 数据流动画 */
@keyframes dataStream {
    0% {
        transform: translateY(-100%);
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    100% {
        transform: translateY(100%);
        opacity: 0;
    }
}

/* 3D旋转动画 */
@keyframes rotate3D {
    0% {
        transform: perspective(1000px) rotateY(0deg) rotateX(0deg);
    }
    25% {
        transform: perspective(1000px) rotateY(90deg) rotateX(0deg);
    }
    50% {
        transform: perspective(1000px) rotateY(180deg) rotateX(0deg);
    }
    75% {
        transform: perspective(1000px) rotateY(270deg) rotateX(0deg);
    }
    100% {
        transform: perspective(1000px) rotateY(360deg) rotateX(0deg);
    }
}

/* 矩阵雨效果 */
@keyframes matrixRain {
    0% {
        transform: translateY(-100%);
        opacity: 1;
    }
    100% {
        transform: translateY(100vh);
        opacity: 0;
    }
}

/* 能量脉冲 */
@keyframes energyPulse {
    0%, 100% {
        transform: scale(1);
        opacity: 0.8;
    }
    50% {
        transform: scale(1.5);
        opacity: 0.3;
    }
}

/* 故障效果 */
@keyframes glitch {
    0%, 90%, 100% {
        transform: translate(0);
        filter: none;
    }
    91% {
        transform: translate(-2px, 1px);
        filter: hue-rotate(90deg);
    }
    92% {
        transform: translate(2px, -1px);
        filter: hue-rotate(-90deg);
    }
    93% {
        transform: translate(-1px, 2px);
        filter: hue-rotate(180deg);
    }
}

/* 磁场效果 */
@keyframes magneticField {
    0% {
        transform: rotate(0deg) scale(1);
        opacity: 0.3;
    }
    50% {
        transform: rotate(180deg) scale(1.2);
        opacity: 0.6;
    }
    100% {
        transform: rotate(360deg) scale(1);
        opacity: 0.3;
    }
}

/* 星空闪烁 */
@keyframes starTwinkle {
    0%, 100% {
        opacity: 0.3;
        transform: scale(1);
    }
    50% {
        opacity: 1;
        transform: scale(1.5);
    }
}

/* 能量环 */
@keyframes energyRing {
    0% {
        transform: scale(0.5);
        opacity: 1;
        border-width: 3px;
    }
    100% {
        transform: scale(2);
        opacity: 0;
        border-width: 0px;
    }
}

/* 六边形旋转 */
@keyframes hexRotate {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(60deg);
    }
}

/* 脉冲波 */
@keyframes pulseWave {
    0% {
        transform: scale(0.8);
        opacity: 0.8;
    }
    100% {
        transform: scale(3);
        opacity: 0;
    }
}

/* 全息投影 */
@keyframes hologramProject {
    0%, 100% {
        opacity: 0.1;
        filter: blur(3px) brightness(0.8);
    }
    50% {
        opacity: 0.3;
        filter: blur(1px) brightness(1.2);
    }
}

/* 能量场 */
@keyframes energyField {
    0%, 100% {
        transform: translateY(0) rotate(0deg);
        opacity: 0.2;
    }
    25% {
        transform: translateY(-10px) rotate(5deg);
        opacity: 0.4;
    }
    50% {
        transform: translateY(0) rotate(0deg);
        opacity: 0.6;
    }
    75% {
        transform: translateY(10px) rotate(-5deg);
        opacity: 0.4;
    }
}

/* 数字雨 */
@keyframes digitalRain {
    0% {
        transform: translateY(-100%);
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    100% {
        transform: translateY(100vh);
        opacity: 0;
    }
}

/* 能量核心 */
@keyframes energyCore {
    0%, 100% {
        transform: scale(1) rotate(0deg);
        box-shadow: 
            0 0 20px rgba(0, 212, 255, 0.8),
            0 0 40px rgba(0, 212, 255, 0.6),
            0 0 60px rgba(0, 212, 255, 0.4);
    }
    50% {
        transform: scale(1.2) rotate(180deg);
        box-shadow: 
            0 0 30px rgba(0, 212, 255, 1),
            0 0 60px rgba(0, 212, 255, 0.8),
            0 0 90px rgba(0, 212, 255, 0.6);
    }
}

/* 从上往下滑动动画 */
@keyframes slideDown {
    0% {
        transform: translateY(-100%);
        opacity: 0;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

/* 从下往上滑动动画 */
@keyframes slideUp {
    0% {
        transform: translateY(100%);
        opacity: 0;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

/* 从左往右滑动动画 */
@keyframes slideRight {
    0% {
        transform: translateX(-100%);
        opacity: 0;
    }
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

/* 从右往左滑动动画 */
@keyframes slideLeft {
    0% {
        transform: translateX(100%);
        opacity: 0;
    }
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

/* 淡入动画 */
@keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

/* 缩放淡入动画 */
@keyframes scaleIn {
    0% {
        transform: scale(0.5);
        opacity: 0;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* 开始界面背景动画 */
@keyframes backgroundPulse {
    0% {
        background-position: 0% 50%;
        opacity: 0.7;
    }
    50% {
        background-position: 100% 50%;
        opacity: 1;
    }
    100% {
        background-position: 0% 50%;
        opacity: 0.7;
    }
}

@keyframes gridMove {
    0% {
        transform: translate(0, 0);
    }
    100% {
        transform: translate(20px, 20px);
    }
}

@keyframes glowPulse {
    0% {
        box-shadow: 
            0 0 30px rgba(0, 255, 255, 0.6),
            0 0 60px rgba(0, 255, 255, 0.3),
            inset 0 0 30px rgba(0, 255, 255, 0.2);
    }
    50% {
        box-shadow: 
            0 0 50px rgba(0, 255, 255, 0.8),
            0 0 100px rgba(0, 255, 255, 0.5),
            inset 0 0 50px rgba(0, 255, 255, 0.3);
    }
    100% {
        box-shadow: 
            0 0 30px rgba(0, 255, 255, 0.6),
            0 0 60px rgba(0, 255, 255, 0.3),
            inset 0 0 30px rgba(0, 255, 255, 0.2);
    }
}

@keyframes titleGlow {
    0%, 100% {
        text-shadow: 
            0 0 20px rgba(0, 255, 255, 0.8),
            0 0 40px rgba(0, 255, 255, 0.6),
            0 0 60px rgba(0, 255, 255, 0.4),
            0 0 80px rgba(0, 255, 255, 0.2);
    }
    50% {
        text-shadow: 
            0 0 30px rgba(0, 255, 255, 1),
            0 0 60px rgba(0, 255, 255, 0.8),
            0 0 90px rgba(0, 255, 255, 0.6),
            0 0 120px rgba(0, 255, 255, 0.4);
    }
}

@keyframes buttonHover {
    0% {
        transform: translateY(0) scale(1);
        box-shadow: 
            0 0 20px rgba(0, 255, 255, 0.5),
            0 5px 15px rgba(0, 0, 0, 0.3),
            inset 0 0 20px rgba(0, 255, 255, 0.2);
    }
    50% {
        transform: translateY(-5px) scale(1.05);
        box-shadow: 
            0 0 40px rgba(0, 255, 255, 0.8),
            0 10px 30px rgba(0, 0, 0, 0.5),
            inset 0 0 30px rgba(0, 255, 255, 0.3);
    }
    100% {
        transform: translateY(0) scale(1);
        box-shadow: 
            0 0 20px rgba(0, 255, 255, 0.5),
            0 5px 15px rgba(0, 0, 0, 0.3),
            inset 0 0 20px rgba(0, 255, 255, 0.2);
    }
}

@keyframes infoPulse {
    0% {
        box-shadow: 
            0 0 20px rgba(0, 255, 255, 0.3),
            inset 0 0 20px rgba(0, 255, 255, 0.1);
    }
    50% {
        box-shadow: 
            0 0 30px rgba(0, 255, 255, 0.5),
            inset 0 0 30px rgba(0, 255, 255, 0.2);
    }
    100% {
        box-shadow: 
            0 0 20px rgba(0, 255, 255, 0.3),
            inset 0 0 20px rgba(0, 255, 255, 0.1);
    }
}

@keyframes listItemGlow {
    0% {
        text-shadow: 0 0 5px rgba(0, 255, 255, 0.3);
        transform: translateX(0);
    }
    100% {
        text-shadow: 0 0 15px rgba(0, 255, 255, 0.8);
        transform: translateX(10px);
    }
}

#start-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    text-align: center;
    color: #00d4ff;
    padding: 0;
    background: 
        radial-gradient(circle at 20% 30%, rgba(0, 212, 255, 0.2) 0%, transparent 50%),
        radial-gradient(circle at 80% 70%, rgba(138, 43, 226, 0.2) 0%, transparent 50%),
        linear-gradient(135deg, rgba(10, 15, 25, 0.98) 0%, rgba(25, 30, 50, 0.98) 50%, rgba(10, 15, 25, 0.98) 100%);
    border-radius: 0;
    border: none;
    box-shadow: none;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 9998;
    overflow: hidden;
    animation: glowPulse 3s ease-in-out infinite;
}

#start-screen::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background-image: 
        linear-gradient(0deg, transparent 24%, rgba(0, 212, 255, 0.05) 25%, rgba(0, 212, 255, 0.05) 26%, transparent 27%, transparent 74%, rgba(0, 212, 255, 0.05) 75%, rgba(0, 212, 255, 0.05) 76%, transparent 77%, transparent),
        linear-gradient(90deg, transparent 24%, rgba(0, 212, 255, 0.05) 25%, rgba(0, 212, 255, 0.05) 26%, transparent 27%, transparent 74%, rgba(0, 212, 255, 0.05) 75%, rgba(0, 212, 255, 0.05) 76%, transparent 77%, transparent);
    background-size: 50px 50px;
    animation: gridMove 20s linear infinite;
    opacity: 0.3;
    pointer-events: none;
    z-index: 0;
}

#start-screen::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: 
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 2px,
            rgba(0, 212, 255, 0.02) 2px,
            rgba(0, 212, 255, 0.02) 4px
        );
    animation: hologramScan 10s linear infinite;
    pointer-events: none;
    z-index: 0;
}

.start-stars {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: hidden;
    z-index: 0;
}

.start-stars .star {
    position: absolute;
    width: 2px;
    height: 2px;
    background: #00d4ff;
    border-radius: 50%;
    box-shadow: 0 0 10px #00d4ff;
    animation: starTwinkle 3s ease-in-out infinite;
}

.start-stars .star:nth-child(1) { top: 5%; left: 10%; animation-delay: 0s; }
.start-stars .star:nth-child(2) { top: 15%; left: 20%; animation-delay: 0.5s; }
.start-stars .star:nth-child(3) { top: 25%; left: 30%; animation-delay: 1s; }
.start-stars .star:nth-child(4) { top: 35%; left: 40%; animation-delay: 1.5s; }
.start-stars .star:nth-child(5) { top: 45%; left: 50%; animation-delay: 2s; }
.start-stars .star:nth-child(6) { top: 55%; left: 60%; animation-delay: 2.5s; }
.start-stars .star:nth-child(7) { top: 65%; left: 70%; animation-delay: 3s; }
.start-stars .star:nth-child(8) { top: 75%; left: 80%; animation-delay: 3.5s; }
.start-stars .star:nth-child(9) { top: 85%; left: 90%; animation-delay: 4s; }
.start-stars .star:nth-child(10) { top: 95%; left: 5%; animation-delay: 4.5s; }

.start-energy-field {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 300px;
    height: 300px;
    pointer-events: none;
    z-index: 0;
}

.start-energy-field .field {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 200px;
    height: 200px;
    border: 1px solid rgba(0, 212, 255, 0.2);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    animation: energyField 4s ease-in-out infinite;
}

.start-energy-field .field:nth-child(1) { animation-delay: 0s; }
.start-energy-field .field:nth-child(2) { animation-delay: 1s; }
.start-energy-field .field:nth-child(3) { animation-delay: 2s; }

#start-screen * {
    position: relative;
    z-index: 1;
}

#start-screen h1 {
    position: fixed;
    top: 120px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 80px;
    margin-bottom: 30px;
    margin-top: 0;
    color: #00d4ff;
    font-family: 'Orbitron', 'Arial', sans-serif;
    letter-spacing: 8px;
    font-weight: 900;
    text-transform: uppercase;
    animation: 
        titleGlow 2s ease-in-out infinite,
        backgroundPulse 3s linear infinite,
        neonFlicker 6s ease-in-out infinite;
    background: linear-gradient(45deg, #00d4ff, #00ffff, #00d4ff);
    background-size: 200% auto;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 
        0 0 30px rgba(0, 212, 255, 0.8),
        0 0 60px rgba(0, 212, 255, 0.5),
        0 0 90px rgba(0, 212, 255, 0.3);
    z-index: 10;
}

#start-screen h1::before {
    content: '墨宇塔防';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(45deg, #00d4ff, #00ffff, #00d4ff);
    background-size: 200% auto;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: hologramScan 4s linear infinite;
    opacity: 0.3;
    filter: blur(2px);
}

#start-screen p {
    position: fixed;
    top: 270px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 28px;
    margin-bottom: 50px;
    margin-top: 0;
    color: #00d4ff;
    font-family: 'Orbitron', 'Arial', sans-serif;
    text-shadow: 
        0 0 20px rgba(0, 212, 255, 0.8),
        0 0 40px rgba(0, 212, 255, 0.5);
    letter-spacing: 3px;
    opacity: 0.95;
    font-weight: bold;
    z-index: 10;
}

.user-info {
    position: relative;
    text-align: center;
    margin-bottom: 30px;
    z-index: 100;
    margin-top: -1000px;
}

.user-avatar {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(0, 212, 255, 0.2) 0%, rgba(0, 255, 255, 0.1) 100%);
    border: 3px solid #00d4ff;
    margin: 0 auto 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 
        0 0 30px rgba(0, 212, 255, 0.6),
        inset 0 0 20px rgba(0, 212, 255, 0.2);
    animation: energyCore 3s ease-in-out infinite;
    background-size: cover;
    background-position: center;
}

.user-name {
    font-size: 24px;
    color: #00d4ff;
    font-family: 'Orbitron', 'Arial', sans-serif;
    text-shadow: 
        0 0 20px rgba(0, 212, 255, 0.8),
        0 0 40px rgba(0, 212, 255, 0.5);
    letter-spacing: 2px;
    font-weight: bold;
    animation: titleGlow 2s ease-in-out infinite;
}

/* 用户信息编辑界面样式 */
#user-edit-panel {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    animation: fadeIn 0.3s ease;
}

.user-edit-content {
    background: linear-gradient(135deg, rgba(44, 52, 72, 0.95) 0%, rgba(58, 67, 88, 0.95) 100%);
    border: 2px solid #00d4ff;
    border-radius: 15px;
    padding: 30px;
    max-width: 500px;
    width: 90%;
    box-shadow: 
        0 0 50px rgba(0, 212, 255, 0.5),
        inset 0 0 30px rgba(0, 212, 255, 0.1);
    animation: scaleIn 0.3s ease;
}

.user-edit-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
    padding-bottom: 15px;
    border-bottom: 1px solid rgba(0, 212, 255, 0.3);
}

.user-edit-header h3 {
    color: #00d4ff;
    font-size: 24px;
    margin: 0;
    text-shadow: 0 0 15px rgba(0, 212, 255, 0.8);
}

.close-btn {
    background: none;
    border: none;
    color: #ffffff;
    font-size: 28px;
    cursor: pointer;
    padding: 0;
    width: 30px;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    transition: all 0.3s ease;
}

.close-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #00d4ff;
    transform: scale(1.1);
}

.avatar-section {
    text-align: center;
    margin-bottom: 30px;
}

.avatar-preview {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(0, 212, 255, 0.2) 0%, rgba(0, 255, 255, 0.1) 100%);
    border: 3px solid #00d4ff;
    margin: 0 auto 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 
        0 0 30px rgba(0, 212, 255, 0.6),
        inset 0 0 20px rgba(0, 212, 255, 0.2);
    animation: energyCore 3s ease-in-out infinite;
    background-size: cover;
    background-position: center;
}

.avatar-actions {
    display: flex;
    gap: 15px;
    justify-content: center;
    margin-top: 15px;
}

.name-section {
    margin-bottom: 30px;
}

.name-section label {
    display: block;
    color: #00d4ff;
    font-size: 16px;
    margin-bottom: 10px;
    font-weight: bold;
}

.name-section input {
    width: 100%;
    padding: 12px 15px;
    border: 2px solid #00d4ff;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.3);
    color: #ffffff;
    font-size: 16px;
    transition: all 0.3s ease;
}

.name-section input:focus {
    outline: none;
    box-shadow: 0 0 20px rgba(0, 212, 255, 0.5);
    border-color: #ffffff;
}

.user-edit-buttons {
    display: flex;
    gap: 15px;
    justify-content: center;
    margin-top: 30px;
}

.primary-btn, .secondary-btn {
    padding: 12px 24px;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
    min-width: 120px;
}

.primary-btn {
    background: linear-gradient(135deg, #00d4ff 0%, #0099cc 100%);
    color: #000000;
    box-shadow: 0 0 20px rgba(0, 212, 255, 0.5);
}

.primary-btn:hover {
    background: linear-gradient(135deg, #00ffff 0%, #00b3e6 100%);
    box-shadow: 0 0 30px rgba(0, 212, 255, 0.8);
    transform: translateY(-2px);
}

.secondary-btn {
    background: rgba(255, 255, 255, 0.1);
    color: #00d4ff;
    border: 1px solid #00d4ff;
}

.secondary-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    box-shadow: 0 0 20px rgba(0, 212, 255, 0.5);
    transform: translateY(-2px);
}

/* 动画 */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes scaleIn {
    from { transform: scale(0.8); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

#start-game-btn {
    background: linear-gradient(135deg, rgba(44, 52, 72, 0.9) 0%, rgba(58, 67, 88, 0.9) 100%);
    color: #00d4ff;
    border: 3px solid #00d4ff;
    padding: 20px 60px;
    font-size: 32px;
    font-weight: bold;
    border-radius: 15px;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-bottom: 50px;
    margin-top: 0;
    font-family: 'Orbitron', 'Arial', sans-serif;
    letter-spacing: 3px;
    text-transform: uppercase;
    box-shadow: 
        0 0 20px rgba(0, 212, 255, 0.5),
        0 5px 15px rgba(0, 0, 0, 0.3),
        inset 0 0 20px rgba(0, 212, 255, 0.2);
    text-shadow: 0 0 15px rgba(0, 212, 255, 0.8);
    position: relative;
    overflow: hidden;
    animation: glowPulse 2s ease-in-out infinite;
    z-index: 1;
}

#start-game-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(0, 212, 255, 0.3), transparent);
    transition: left 0.5s;
}

#start-game-btn::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: 
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 2px,
            rgba(0, 212, 255, 0.03) 2px,
            rgba(0, 212, 255, 0.03) 4px
        );
    animation: hologramScan 3s linear infinite;
    pointer-events: none;
}

#start-game-btn:hover {
    animation: buttonHover 0.6s ease-in-out, glitch 0.3s ease-in-out infinite;
    border-color: #00d4ff;
    box-shadow: 
        0 0 40px rgba(0, 212, 255, 0.8),
        0 10px 30px rgba(0, 0, 0, 0.5),
        inset 0 0 30px rgba(0, 212, 255, 0.3);
}

#start-game-btn:active {
    transform: scale(0.98);
    box-shadow: 
        0 0 15px rgba(0, 212, 255, 0.4),
        0 3px 10px rgba(0, 0, 0, 0.2),
        inset 0 0 15px rgba(0, 212, 255, 0.15);
}

#start-game-btn:hover::before {
    left: 100%;
}

#start-game-btn:active {
    transform: scale(0.98);
    box-shadow: 
        0 0 15px rgba(0, 255, 255, 0.4),
        0 3px 10px rgba(0, 0, 0, 0.2),
        inset 0 0 15px rgba(0, 255, 255, 0.15);
}

#login-btn {
    position: fixed;
    top: 20px;
    right: 20px;
    transform: none;
    background: linear-gradient(135deg, rgba(44, 52, 72, 0.9) 0%, rgba(58, 67, 88, 0.9) 100%);
    color: #00d4ff;
    border: 3px solid #00d4ff;
    padding: 15px 40px;
    font-size: 24px;
    font-weight: bold;
    border-radius: 15px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: 'Orbitron', 'Arial', sans-serif;
    letter-spacing: 2px;
    text-transform: uppercase;
    box-shadow: 
        0 0 20px rgba(0, 212, 255, 0.5),
        0 5px 15px rgba(0, 0, 0, 0.3),
        inset 0 0 20px rgba(0, 212, 255, 0.2);
    text-shadow: 0 0 15px rgba(0, 212, 255, 0.8);
    z-index: 1000;
    animation: fadeInUp 1s ease-out;
}

#login-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(0, 212, 255, 0.3), transparent);
    transition: left 0.5s;
}

#login-btn::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: 
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 2px,
            rgba(0, 212, 255, 0.03) 2px,
            rgba(0, 212, 255, 0.03) 4px
        );
    animation: hologramScan 3s linear infinite;
    pointer-events: none;
}

#login-btn:hover {
    animation: buttonHover 0.6s ease-in-out, glitch 0.3s ease-in-out infinite;
    border-color: #00d4ff;
    box-shadow: 
        0 0 40px rgba(0, 212, 255, 0.8),
        0 10px 30px rgba(0, 0, 0, 0.5),
        inset 0 0 30px rgba(0, 212, 255, 0.3);
}

#login-btn:active {
    transform: scale(0.98);
    box-shadow: 
        0 0 15px rgba(0, 212, 255, 0.4),
        0 3px 10px rgba(0, 0, 0, 0.2),
        inset 0 0 15px rgba(0, 212, 255, 0.15);
}

#login-btn:hover::before {
    left: 100%;
}

#login-btn:active {
    transform: scale(0.98);
    box-shadow: 
        0 0 15px rgba(0, 255, 255, 0.4),
        0 3px 10px rgba(0, 0, 0, 0.2),
        inset 0 0 15px rgba(0, 255, 255, 0.15);
}

#game-info {
    background: linear-gradient(135deg, rgba(20, 25, 35, 0.95) 0%, rgba(30, 35, 50, 0.95) 100%);
    padding: 30px;
    border-radius: 15px;
    text-align: left;
    max-width: 600px;
    margin: 0 auto;
    border: 2px solid #00d4ff;
    box-shadow: 
        0 0 30px rgba(0, 212, 255, 0.3),
        inset 0 0 30px rgba(0, 212, 255, 0.05);
    animation: infoPulse 2.5s ease-in-out infinite;
    position: relative;
    overflow: hidden;
}

#game-info::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, #00d4ff, #1a1a2e, #00d4ff);
    animation: backgroundPulse 2s linear infinite;
}

#game-info::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: 
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 2px,
            rgba(0, 212, 255, 0.02) 2px,
            rgba(0, 212, 255, 0.02) 4px
        );
    animation: hologramScan 5s linear infinite;
    pointer-events: none;
}

#game-info h3 {
    color: #00d4ff;
    margin-bottom: 20px;
    font-size: 24px;
    font-family: 'Orbitron', 'Arial', sans-serif;
    text-shadow: 
        0 0 15px rgba(0, 212, 255, 0.8),
        0 0 30px rgba(0, 212, 255, 0.4);
    letter-spacing: 2px;
    text-transform: uppercase;
}

#game-info ul {
    color: #00d4ff;
    font-size: 18px;
    line-height: 1.8;
    list-style: none;
    padding: 0;
}

#game-info li {
    margin-bottom: 15px;
    text-shadow: 0 0 10px rgba(0, 255, 255, 0.5);
    padding-left: 25px;
    position: relative;
    transition: all 0.3s ease;
}

#game-info li::before {
    content: '▶';
    position: absolute;
    left: 0;
    color: #00ffff;
    text-shadow: 0 0 10px rgba(0, 255, 255, 0.8);
    font-weight: bold;
    animation: listItemGlow 1.5s ease-in-out infinite;
}

#game-info li:hover {
    transform: translateX(10px);
    text-shadow: 0 0 15px rgba(0, 255, 255, 1);
    color: #00ffcc;
}

#game-info li:hover::before {
    animation: none;
    color: #00ffcc;
    text-shadow: 0 0 15px rgba(0, 255, 255, 1);
}

#game-container {
    background-color: #1a1f2e;
    border: 3px solid #00ffff;
    border-radius: 10px;
    padding: 20px;
    box-shadow: 
        0 0 30px rgba(0, 255, 255, 0.3),
        inset 0 0 30px rgba(0, 255, 255, 0.1);
    background-image: linear-gradient(135deg, #1a1f2e 0%, #2c3448 100%);
}

/* 游戏头部 - 包含资源显示栏和波数显示栏 */
#game-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding: 10px;
    background-color: transparent;
    border-radius: 5px;
    border: none;
    box-shadow: none;
    position: relative;
}

/* 游戏名称样式 */
.game-title {
    position: absolute;
    left: 50%;
    top: 30px;
    transform: translateX(-50%);
    font-size: 36px;
    font-weight: bold;
    color: #00ffff;
    text-shadow: 
        0 0 20px rgba(0, 255, 255, 0.8),
        0 0 40px rgba(0, 255, 255, 0.6),
        0 0 60px rgba(0, 255, 255, 0.4),
        0 0 80px rgba(0, 255, 255, 0.2);
    animation: titleGlow 2s ease-in-out infinite;
    white-space: nowrap;
    z-index: 10;
}

/* 游戏名称样式 - 赛博朋克风格 */
.game-title.cyberpunk-style {
    font-size: 42px;
    font-weight: 900;
    color: #ff00ff;
    left: 42%;
    text-shadow: 
        0 0 20px rgba(255, 0, 255, 0.9),
        0 0 40px rgba(0, 255, 255, 0.7),
        0 0 60px rgba(128, 0, 255, 0.5),
        0 0 80px rgba(255, 0, 255, 0.3);
    animation: cyberpunkTitleGlow 2s ease-in-out infinite;
    background: linear-gradient(45deg, #ff00ff, #00ffff, #ff00ff);
    background-size: 200% auto;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-family: 'Orbitron', 'Arial', sans-serif;
    letter-spacing: 4px;
    text-transform: uppercase;
}

/* 赛博朋克标题发光动画 */
@keyframes cyberpunkTitleGlow {
    0%, 100% {
        text-shadow: 
            0 0 20px rgba(255, 0, 255, 0.9),
            0 0 40px rgba(0, 255, 255, 0.7),
            0 0 60px rgba(128, 0, 255, 0.5),
            0 0 80px rgba(255, 0, 255, 0.3);
    }
    50% {
        text-shadow: 
            0 0 30px rgba(255, 0, 255, 1),
            0 0 60px rgba(0, 255, 255, 0.9),
            0 0 90px rgba(128, 0, 255, 0.7),
            0 0 120px rgba(255, 0, 255, 0.5);
    }
}

/* 虚拟试验塔副本暂停按钮样式 - 赛博朋克风格 */
#pause-btn.cyberpunk-style {
    background-color: rgba(35, 10, 50, 0.9); /* 深紫色背景 */
    border: 3px solid #ff00ff; /* 霓虹粉色边框 */
    box-shadow: 
        0 0 20px rgba(255, 0, 255, 0.4),
        0 0 40px rgba(0, 255, 255, 0.3),
        inset 0 0 20px rgba(128, 0, 255, 0.2);
}

#pause-btn.cyberpunk-style:hover {
    background-color: rgba(50, 15, 70, 0.95);
    border-color: #00ffff; /* 霓虹青色边框 */
    transform: scale(1.1) rotate(5deg);
    box-shadow: 
        0 0 30px rgba(0, 255, 255, 0.6),
        0 0 50px rgba(255, 0, 255, 0.4),
        inset 0 0 30px rgba(0, 255, 255, 0.3);
}

#pause-btn.cyberpunk-style:active {
    box-shadow: 
        0 0 15px rgba(255, 0, 255, 0.8),
        0 0 25px rgba(0, 255, 255, 0.6),
        inset 0 0 15px rgba(128, 0, 255, 0.4);
}

#pause-btn.cyberpunk-style img {
    filter: drop-shadow(0 0 15px rgba(0, 255, 255, 0.9)) hue-rotate(45deg);
}

/* 虚拟试验塔副本重置按钮样式 - 赛博朋克风格 */
#reset-btn.cyberpunk-style {
    background-color: rgba(35, 10, 50, 0.9); /* 深紫色背景 */
    border: 3px solid #ff00ff; /* 霓虹粉色边框 */
    box-shadow: 
        0 0 20px rgba(255, 0, 255, 0.4),
        0 0 40px rgba(0, 255, 255, 0.3),
        inset 0 0 20px rgba(128, 0, 255, 0.2);
}

#reset-btn.cyberpunk-style:hover {
    background-color: rgba(50, 15, 70, 0.95);
    border-color: #00ffff; /* 霓虹青色边框 */
    transform: scale(1.1) rotate(-5deg);
    box-shadow: 
        0 0 30px rgba(0, 255, 255, 0.6),
        0 0 50px rgba(255, 0, 255, 0.4),
        inset 0 0 30px rgba(0, 255, 255, 0.3);
}

#reset-btn.cyberpunk-style:active {
    box-shadow: 
        0 0 15px rgba(255, 0, 255, 0.8),
        0 0 25px rgba(0, 255, 255, 0.6),
        inset 0 0 15px rgba(128, 0, 255, 0.4);
}

#reset-btn.cyberpunk-style img {
    filter: drop-shadow(0 0 15px rgba(0, 255, 255, 0.9)) hue-rotate(45deg);
}

/* 虚拟试验塔副本资源显示栏样式 - 赛博朋克风格 */
.resource-display.cyberpunk-style {
    background-color: rgba(20, 10, 40, 0.95);
    border: 3px solid #ff00ff;
    box-shadow: 
        0 0 25px rgba(255, 0, 255, 0.4),
        0 0 50px rgba(0, 255, 255, 0.3),
        inset 0 0 25px rgba(128, 0, 255, 0.2);
    background-image: 
        linear-gradient(135deg, rgba(20, 10, 40, 0.95) 0%, rgba(40, 20, 80, 0.95) 100%),
        radial-gradient(circle at 50% 50%, rgba(255, 0, 255, 0.1) 0%, transparent 100%);
    animation: cyberpunkPulse 3s ease-in-out infinite;
}

.resource-display.cyberpunk-style #sun-count img, .resource-display.cyberpunk-style #coin-count img {
    filter: drop-shadow(0 0 10px rgba(0, 255, 255, 0.8)) hue-rotate(30deg);
}

/* 虚拟试验塔副本波数显示栏样式 - 赛博朋克风格 */
.wave-display.cyberpunk-style {
    background-color: rgba(20, 10, 40, 0.95);
    border: 3px solid #ff00ff;
    box-shadow: 
        0 0 25px rgba(255, 0, 255, 0.4),
        0 0 50px rgba(0, 255, 255, 0.3),
        inset 0 0 25px rgba(128, 0, 255, 0.2);
    background-image: 
        linear-gradient(135deg, rgba(20, 10, 40, 0.95) 0%, rgba(40, 20, 80, 0.95) 100%),
        radial-gradient(circle at 50% 50%, rgba(255, 0, 255, 0.1) 0%, transparent 100%);
    animation: cyberpunkPulse 3s ease-in-out infinite reverse;
}

.wave-display.cyberpunk-style #wave-info, .wave-display.cyberpunk-style #highest-wave-info {
    color: #00ffff;
    text-shadow: 
        0 0 15px rgba(0, 255, 255, 0.9),
        0 0 30px rgba(255, 0, 255, 0.7),
        0 0 45px rgba(128, 0, 255, 0.5);
    font-family: 'Orbitron', 'Arial', sans-serif;
    letter-spacing: 2px;
    font-weight: bold;
}

/* 虚拟试验塔副本系统按钮栏样式 - 赛博朋克风格 */
.system-buttons-bar.cyberpunk-style {
    background-color: rgba(20, 10, 40, 0.95);
    border: 3px solid #ff00ff;
    box-shadow: 
        0 0 25px rgba(255, 0, 255, 0.4),
        0 0 50px rgba(0, 255, 255, 0.3),
        inset 0 0 25px rgba(128, 0, 255, 0.2);
}

.system-buttons-bar.cyberpunk-style button {
    background-color: rgba(40, 20, 80, 0.95);
    border-color: #ff00ff;
    color: #00ffff;
    text-shadow: 
        0 0 15px rgba(0, 255, 255, 0.9),
        0 0 30px rgba(255, 0, 255, 0.7);
    box-shadow: 
        0 0 20px rgba(255, 0, 255, 0.4),
        inset 0 0 20px rgba(128, 0, 255, 0.2);
    font-family: 'Orbitron', 'Arial', sans-serif;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.system-buttons-bar.cyberpunk-style button:hover {
    background-color: rgba(60, 30, 100, 0.95);
    border-color: #00ffff;
    transform: translateY(-3px);
    box-shadow: 
        0 0 30px rgba(0, 255, 255, 0.6),
        0 0 50px rgba(255, 0, 255, 0.4),
        inset 0 0 30px rgba(0, 255, 255, 0.3);
}

/* 虚拟试验塔副本功能按钮样式 - 赛博朋克风格 */
#dungeon-select-btn.cyberpunk-style, #inventory-btn.cyberpunk-style, #draw-card-btn.cyberpunk-style, #game-guide-btn.cyberpunk-style {
    background-color: rgba(20, 10, 40, 0.95);
    border: 3px solid #ff00ff;
    box-shadow: 
        0 0 25px rgba(255, 0, 255, 0.4),
        0 0 50px rgba(0, 255, 255, 0.3),
        inset 0 0 25px rgba(128, 0, 255, 0.2);
    background-image: 
        linear-gradient(135deg, rgba(20, 10, 40, 0.95) 0%, rgba(40, 20, 80, 0.95) 100%);
}

#dungeon-select-btn.cyberpunk-style:hover, #inventory-btn.cyberpunk-style:hover, #draw-card-btn.cyberpunk-style:hover, #game-guide-btn.cyberpunk-style:hover {
    background-color: rgba(50, 15, 70, 0.95);
    border-color: #00ffff;
    transform: scale(1.1) rotate(5deg);
    box-shadow: 
        0 0 30px rgba(0, 255, 255, 0.6),
        0 0 50px rgba(255, 0, 255, 0.4),
        inset 0 0 30px rgba(0, 255, 255, 0.3);
}

#dungeon-select-btn.cyberpunk-style img, #inventory-btn.cyberpunk-style img, #draw-card-btn.cyberpunk-style img, #game-guide-btn.cyberpunk-style img {
    filter: drop-shadow(0 0 15px rgba(0, 255, 255, 0.9)) hue-rotate(45deg);
}

#dungeon-select-btn.cyberpunk-style span, #inventory-btn.cyberpunk-style span, #draw-card-btn.cyberpunk-style span, #game-guide-btn.cyberpunk-style span {
    color: #00ffff;
    text-shadow: 
        0 0 15px rgba(0, 255, 255, 0.9),
        0 0 30px rgba(255, 0, 255, 0.7);
    font-family: 'Orbitron', 'Arial', sans-serif;
    letter-spacing: 1px;
}

/* 虚拟试验塔副本卡牌面板样式 - 赛博朋克风格 */
.card-panel.cyberpunk-style, #plant-selector.cyberpunk-style, #explosion-plant-selector.cyberpunk-style {
    background-color: rgba(20, 10, 40, 0.95);
    border: 3px solid #ff00ff;
    box-shadow: 
        0 0 25px rgba(255, 0, 255, 0.4),
        0 0 50px rgba(0, 255, 255, 0.3),
        inset 0 0 25px rgba(128, 0, 255, 0.2);
    background-image: 
        linear-gradient(135deg, rgba(20, 10, 40, 0.95) 0%, rgba(40, 20, 80, 0.95) 100%),
        radial-gradient(circle at 50% 50%, rgba(255, 0, 255, 0.1) 0%, transparent 100%);
    animation: cyberpunkPulse 4s ease-in-out infinite;
}

.card-panel.cyberpunk-style .inventory-slot, #plant-selector.cyberpunk-style .plant-item, #explosion-plant-selector.cyberpunk-style .plant-item {
    background-color: rgba(40, 20, 80, 0.95);
    border-color: #ff00ff;
    box-shadow: 
        0 0 20px rgba(255, 0, 255, 0.4),
        inset 0 0 20px rgba(128, 0, 255, 0.2);
    background-image: linear-gradient(135deg, rgba(40, 20, 80, 0.95) 0%, rgba(60, 30, 120, 0.95) 100%);
    transition: all 0.3s ease;
}

.card-panel.cyberpunk-style .inventory-slot:hover, #plant-selector.cyberpunk-style .plant-item:hover, #explosion-plant-selector.cyberpunk-style .plant-item:hover {
    background-color: rgba(60, 30, 120, 0.95);
    border-color: #00ffff;
    transform: translateY(-5px) scale(1.05);
    box-shadow: 
        0 0 30px rgba(0, 255, 255, 0.6),
        0 0 50px rgba(255, 0, 255, 0.4),
        inset 0 0 30px rgba(0, 255, 255, 0.3);
}

.card-panel.cyberpunk-style .plant-name, .card-panel.cyberpunk-style .plant-cost, #plant-selector.cyberpunk-style .plant-name, #plant-selector.cyberpunk-style .plant-cost, #explosion-plant-selector.cyberpunk-style .plant-name, #explosion-plant-selector.cyberpunk-style .plant-cost {
    color: #00ffff;
    text-shadow: 
        0 0 15px rgba(0, 255, 255, 0.9),
        0 0 30px rgba(255, 0, 255, 0.7);
    font-family: 'Orbitron', 'Arial', sans-serif;
    letter-spacing: 1px;
}

.card-panel.cyberpunk-style .plant-icon, #plant-selector.cyberpunk-style .plant-icon, #explosion-plant-selector.cyberpunk-style .plant-icon {
    box-shadow: 
        0 0 20px rgba(255, 0, 255, 0.6),
        inset 0 0 20px rgba(0, 255, 255, 0.4);
    border: 2px solid #00ffff;
}

/* 虚拟试验塔副本开始游戏按钮样式 - 赛博朋克风格 */
#start-btn.cyberpunk-style {
    background: 
        linear-gradient(135deg, rgba(40, 20, 80, 0.95) 0%, rgba(60, 30, 120, 0.95) 100%),
        radial-gradient(circle at 50% 50%, rgba(255, 0, 255, 0.2) 0%, transparent 100%);
    border: 3px solid #ff00ff;
    color: #00ffff;
    text-shadow: 
        0 0 20px rgba(0, 255, 255, 0.9),
        0 0 40px rgba(255, 0, 255, 0.7),
        0 0 60px rgba(128, 0, 255, 0.5);
    box-shadow: 
        0 0 30px rgba(255, 0, 255, 0.6),
        0 0 60px rgba(0, 255, 255, 0.4),
        inset 0 0 30px rgba(128, 0, 255, 0.3);
    animation: cyberpunkStartButtonPulse 2s ease-in-out infinite;
    font-family: 'Orbitron', 'Arial', sans-serif;
    letter-spacing: 3px;
    text-transform: uppercase;
    font-size: 24px;
    font-weight: bold;
}

#start-btn.cyberpunk-style:hover {
    background: 
        linear-gradient(135deg, rgba(60, 30, 120, 0.95) 0%, rgba(80, 40, 160, 0.95) 100%),
        radial-gradient(circle at 50% 50%, rgba(0, 255, 255, 0.3) 0%, transparent 100%);
    border-color: #00ffff;
    transform: translateY(-5px) scale(1.05);
    box-shadow: 
        0 0 50px rgba(0, 255, 255, 0.8),
        0 0 80px rgba(255, 0, 255, 0.6),
        inset 0 0 40px rgba(0, 255, 255, 0.4);
}

/* 虚拟试验塔副本游戏结束界面样式 - 赛博朋克风格 */
#game-over.cyberpunk-style {
    background-color: rgba(20, 10, 40, 0.98);
    border: 3px solid #ff00ff;
    box-shadow: 
        0 0 40px rgba(255, 0, 255, 0.6),
        0 0 80px rgba(0, 255, 255, 0.4),
        inset 0 0 40px rgba(128, 0, 255, 0.3);
    background-image: 
        linear-gradient(135deg, rgba(20, 10, 40, 0.98) 0%, rgba(40, 20, 80, 0.98) 100%),
        radial-gradient(circle at 50% 50%, rgba(255, 0, 255, 0.1) 0%, transparent 100%);
    animation: cyberpunkPulse 3s ease-in-out infinite;
}

#game-over.cyberpunk-style h2 {
    color: #ff00ff;
    text-shadow: 
        0 0 20px rgba(255, 0, 255, 0.9),
        0 0 40px rgba(0, 255, 255, 0.7),
        0 0 60px rgba(128, 0, 255, 0.5);
    font-family: 'Orbitron', 'Arial', sans-serif;
    letter-spacing: 4px;
    text-transform: uppercase;
    font-size: 48px;
}

#game-over.cyberpunk-style p {
    color: #00ffff;
    text-shadow: 
        0 0 15px rgba(0, 255, 255, 0.9),
        0 0 30px rgba(255, 0, 255, 0.7);
    font-family: 'Orbitron', 'Arial', sans-serif;
    letter-spacing: 2px;
}

#game-over.cyberpunk-style button {
    background-color: rgba(40, 20, 80, 0.95);
    border: 3px solid #ff00ff;
    color: #00ffff;
    text-shadow: 
        0 0 15px rgba(0, 255, 255, 0.9),
        0 0 30px rgba(255, 0, 255, 0.7);
    box-shadow: 
        0 0 20px rgba(255, 0, 255, 0.4),
        inset 0 0 20px rgba(128, 0, 255, 0.2);
    font-family: 'Orbitron', 'Arial', sans-serif;
    letter-spacing: 2px;
    text-transform: uppercase;
}

#game-over.cyberpunk-style button:hover {
    background-color: rgba(60, 30, 120, 0.95);
    border-color: #00ffff;
    box-shadow: 
        0 0 30px rgba(0, 255, 255, 0.6),
        0 0 50px rgba(255, 0, 255, 0.4),
        inset 0 0 30px rgba(0, 255, 255, 0.3);
}

/* 赛博朋克动画效果 */
@keyframes cyberpunkTitleGlow {
    0%, 100% {
        text-shadow: 
            0 0 20px rgba(255, 0, 255, 0.9),
            0 0 40px rgba(0, 255, 255, 0.7),
            0 0 60px rgba(128, 0, 255, 0.5),
            0 0 80px rgba(255, 0, 255, 0.3);
        background-position: 0% 50%;
    }
    50% {
        text-shadow: 
            0 0 30px rgba(0, 255, 255, 1),
            0 0 60px rgba(255, 0, 255, 0.9),
            0 0 90px rgba(0, 255, 255, 0.7),
            0 0 120px rgba(255, 0, 255, 0.5);
        background-position: 100% 50%;
    }
}

@keyframes cyberpunkPulse {
    0%, 100% {
        box-shadow: 
            0 0 25px rgba(255, 0, 255, 0.4),
            0 0 50px rgba(0, 255, 255, 0.3),
            inset 0 0 25px rgba(128, 0, 255, 0.2);
    }
    50% {
        box-shadow: 
            0 0 40px rgba(0, 255, 255, 0.6),
            0 0 70px rgba(255, 0, 255, 0.4),
            inset 0 0 40px rgba(0, 255, 255, 0.3);
    }
}

@keyframes cyberpunkStartButtonPulse {
    0%, 100% {
        box-shadow: 
            0 0 30px rgba(255, 0, 255, 0.6),
            0 0 60px rgba(0, 255, 255, 0.4),
            inset 0 0 30px rgba(128, 0, 255, 0.3);
        transform: scale(1) rotate(0deg);
    }
    50% {
        box-shadow: 
            0 0 50px rgba(0, 255, 255, 0.8),
            0 0 90px rgba(255, 0, 255, 0.6),
            inset 0 0 50px rgba(0, 255, 255, 0.4);
        transform: scale(1.05) rotate(2deg);
    }
}

/* 石炭星原始大森林风格游戏标题 */
.game-title.forest-style {
    font-size: 48px;
    font-weight: 900;
    color: #ffffff;
    left: 50%;
    top: 30px;
    text-shadow: 
        0 0 15px rgba(255, 255, 255, 1.2),
        0 0 40px rgba(0, 255, 0, 1),
        0 0 60px rgba(0, 200, 0, 0.8),
        0 0 80px rgba(139, 69, 19, 0.6),
        0 3px 6px rgba(0, 0, 0, 1);
    animation: forestTitleGlow 2.5s ease-in-out infinite;
    background: none;
    -webkit-background-clip: none;
    -webkit-text-fill-color: #ffffff;
    background-clip: none;
    -webkit-font-smoothing: antialiased;
    -webkit-text-stroke: 1px rgba(0, 100, 0, 0.8);
    stroke: 1px rgba(0, 100, 0, 0.8);
    -moz-osx-font-smoothing: grayscale;
}

/* 森林风格标题发光动画 */
@keyframes forestTitleGlow {
    0%, 100% {
        text-shadow: 
            0 0 20px rgba(0, 255, 0, 0.8),
            0 0 40px rgba(139, 69, 19, 0.6),
            0 0 60px rgba(0, 200, 0, 0.4),
            0 0 80px rgba(139, 69, 19, 0.2);
    }
    50% {
        text-shadow: 
            0 0 30px rgba(0, 255, 0, 1),
            0 0 60px rgba(139, 69, 19, 0.8),
            0 0 90px rgba(0, 200, 0, 0.6),
            0 0 120px rgba(139, 69, 19, 0.4);
    }
}

/* 暂停按钮容器 */
.pause-container {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    left: 56%;
    transform: translateX(-50%);
    height: 100%;
    gap: 20px;
    margin-left: -150px;
}

.pause-container .user-info {
    position: relative;
    text-align: center;
    margin-bottom: 0;
    z-index: 100;
    margin-top: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}

.pause-container .user-avatar {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(0, 212, 255, 0.2) 0%, rgba(0, 255, 255, 0.1) 100%);
    border: 2px solid #00d4ff;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 
        0 0 20px rgba(0, 212, 255, 0.6),
        inset 0 0 15px rgba(0, 212, 255, 0.2);
    animation: energyCore 3s ease-in-out infinite;
    background-size: cover;
    background-position: center;
}

.pause-container .user-name {
    font-size: 24px;
    color: #00d4ff;
    font-family: 'Orbitron', 'Arial', sans-serif;
    text-shadow: 
        0 0 20px rgba(0, 212, 255, 0.8),
        0 0 40px rgba(0, 212, 255, 0.5);
    letter-spacing: 2px;
    font-weight: bold;
    animation: titleGlow 2s ease-in-out infinite;
}

/* 暂停按钮样式 */
#pause-btn {
    background-color: rgba(35, 43, 61, 0.9);
    border: 3px solid #00ffff;
    border-radius: 50%;
    padding: 10px;
    cursor: pointer;
    width: 80px;
    height: 80px;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.3s ease;
    box-shadow: 0 0 20px rgba(0, 255, 255, 0.3);
    backdrop-filter: blur(5px);
}

#pause-btn:hover {
    background-color: rgba(44, 52, 72, 0.95);
    border-color: #ff69b4;
    transform: scale(1.1);
    box-shadow: 0 0 30px rgba(255, 105, 180, 0.5);
}

#pause-btn:active {
    transform: scale(0.95);
    box-shadow: 0 0 15px rgba(0, 255, 255, 0.7);
}

#pause-btn img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.8));
}

/* 石炭星副本暂停按钮样式 */
#pause-btn.forest-style {
    background-color: rgba(30, 60, 30, 0.9); /* 深绿色背景 */
    border: 3px solid #00ff88; /* 亮绿色边框 */
    box-shadow: 0 0 20px rgba(0, 255, 136, 0.3), /* 绿色外发光 */
                0 0 40px rgba(139, 69, 19, 0.2); /* 棕色光晕 */
}

#pause-btn.forest-style:hover {
    background-color: rgba(40, 80, 40, 0.95);
    border-color: #8aff4d; /* 亮黄绿色边框 */
    box-shadow: 0 0 30px rgba(0, 255, 136, 0.5),
                0 0 50px rgba(139, 69, 19, 0.3);
}

#pause-btn.forest-style:active {
    box-shadow: 0 0 15px rgba(0, 255, 136, 0.7),
                0 0 25px rgba(139, 69, 19, 0.4);
}

#pause-btn.forest-style img {
    filter: drop-shadow(0 0 10px rgba(0, 255, 136, 0.8)); /* 绿色阴影效果 */
}

/* 重置按钮样式 */
#reset-btn {
    background-color: rgba(35, 43, 61, 0.9);
    border: 3px solid #00ffff;
    border-radius: 50%;
    padding: 10px;
    cursor: pointer;
    width: 80px;
    height: 80px;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.3s ease;
    box-shadow: 0 0 20px rgba(0, 255, 255, 0.3);
    backdrop-filter: blur(5px);
}

#reset-btn:hover {
    background-color: rgba(44, 52, 72, 0.95);
    border-color: #ff69b4;
    transform: scale(1.1);
    box-shadow: 0 0 30px rgba(255, 105, 180, 0.5);
}

#reset-btn:active {
    transform: scale(0.95);
    box-shadow: 0 0 15px rgba(0, 255, 255, 0.7);
}

#reset-btn img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.8));
}

/* 石炭星副本重置按钮样式 */
#reset-btn.forest-style {
    background-color: rgba(30, 60, 30, 0.9); /* 深绿色背景 */
    border: 3px solid #00ff88; /* 亮绿色边框 */
    box-shadow: 0 0 20px rgba(0, 255, 136, 0.3), /* 绿色外发光 */
                0 0 40px rgba(139, 69, 19, 0.2); /* 棕色光晕 */
}

#reset-btn.forest-style:hover {
    background-color: rgba(40, 80, 40, 0.95);
    border-color: #8aff4d; /* 亮黄绿色边框 */
    box-shadow: 0 0 30px rgba(0, 255, 136, 0.5),
                0 0 50px rgba(139, 69, 19, 0.3);
}

#reset-btn.forest-style:active {
    box-shadow: 0 0 15px rgba(0, 255, 136, 0.7),
                0 0 25px rgba(139, 69, 19, 0.4);
}

#reset-btn.forest-style img {
    filter: drop-shadow(0 0 10px rgba(0, 255, 136, 0.8)); /* 绿色阴影效果 */
}

/* 副本进入提示样式 */
.dungeon-enter-hint {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 48px;
    font-weight: bold;
    text-align: center;
    padding: 20px 40px;
    border-radius: 10px;
    z-index: 1000;
    opacity: 0;
    animation: fadeInOut 3s ease-in-out;
}

/* 石炭星进入提示样式 - 绿色荧光 */
.dungeon-enter-hint.carboniferous {
    color: #00ff88;
    text-shadow: 0 0 20px rgba(0, 255, 136, 0.8),
                 0 0 40px rgba(0, 255, 136, 0.5),
                 0 0 60px rgba(0, 255, 136, 0.3);
    background-color: rgba(30, 60, 30, 0.7);
    box-shadow: 0 0 30px rgba(0, 255, 136, 0.5),
                0 0 60px rgba(0, 255, 136, 0.2);
}

/* 虚拟试验塔进入提示样式 - 蓝色荧光 */
.dungeon-enter-hint.virtual-tower {
    color: #00ffff;
    text-shadow: 0 0 20px rgba(0, 255, 255, 0.8),
                 0 0 40px rgba(0, 255, 255, 0.5),
                 0 0 60px rgba(0, 255, 255, 0.3);
    background-color: rgba(35, 43, 61, 0.7);
    box-shadow: 0 0 30px rgba(0, 255, 255, 0.5),
                0 0 60px rgba(0, 255, 255, 0.2);
}

/* 淡入淡出动画 */
@keyframes fadeInOut {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.8);
    }
    30% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.1);
    }
    70% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.9);
    }
}

/* 加载界面样式 */
#loading-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: 
        radial-gradient(circle at 20% 30%, rgba(0, 212, 255, 0.15) 0%, transparent 50%),
        radial-gradient(circle at 80% 70%, rgba(138, 43, 226, 0.15) 0%, transparent 50%),
        radial-gradient(circle at 50% 50%, rgba(0, 100, 255, 0.1) 0%, transparent 70%),
        linear-gradient(135deg, #0a0e17 0%, #0f1525 50%, #0a0e17 100%);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    overflow: hidden;
}

#loading-screen::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: 
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 2px,
            rgba(0, 212, 255, 0.03) 2px,
            rgba(0, 212, 255, 0.03) 4px
        );
    animation: hologramScan 8s linear infinite;
    pointer-events: none;
}

#loading-screen::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at 50% 50%, transparent 0%, rgba(0, 0, 0, 0.5) 100%);
    pointer-events: none;
}

.loading-stars {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: hidden;
}

.loading-stars .star {
    position: absolute;
    width: 2px;
    height: 2px;
    background: #00d4ff;
    border-radius: 50%;
    box-shadow: 0 0 10px #00d4ff;
    animation: starTwinkle 2s ease-in-out infinite;
}

.loading-stars .star:nth-child(1) { top: 10%; left: 15%; animation-delay: 0s; }
.loading-stars .star:nth-child(2) { top: 20%; left: 25%; animation-delay: 0.5s; }
.loading-stars .star:nth-child(3) { top: 30%; left: 35%; animation-delay: 1s; }
.loading-stars .star:nth-child(4) { top: 40%; left: 45%; animation-delay: 1.5s; }
.loading-stars .star:nth-child(5) { top: 50%; left: 55%; animation-delay: 2s; }
.loading-stars .star:nth-child(6) { top: 60%; left: 65%; animation-delay: 2.5s; }
.loading-stars .star:nth-child(7) { top: 70%; left: 75%; animation-delay: 3s; }
.loading-stars .star:nth-child(8) { top: 80%; left: 85%; animation-delay: 3.5s; }
.loading-stars .star:nth-child(9) { top: 90%; left: 5%; animation-delay: 4s; }
.loading-stars .star:nth-child(10) { top: 5%; left: 95%; animation-delay: 4.5s; }

.loading-hexagons {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: hidden;
}

.loading-hexagons .hexagon {
    position: absolute;
    width: 60px;
    height: 60px;
    border: 2px solid rgba(0, 212, 255, 0.1);
    transform: rotate(30deg);
    animation: hexRotate 10s linear infinite;
}

.loading-hexagons .hexagon:nth-child(1) { top: 10%; left: 10%; animation-delay: 0s; }
.loading-hexagons .hexagon:nth-child(2) { top: 30%; left: 30%; animation-delay: 2s; }
.loading-hexagons .hexagon:nth-child(3) { top: 50%; left: 50%; animation-delay: 4s; }
.loading-hexagons .hexagon:nth-child(4) { top: 70%; left: 70%; animation-delay: 6s; }
.loading-hexagons .hexagon:nth-child(5) { top: 90%; left: 90%; animation-delay: 8s; }

#loading-screen h1 {
    font-size: 80px;
    margin-bottom: 50px;
    color: #00d4ff;
    font-family: 'Orbitron', 'Arial', sans-serif;
    letter-spacing: 8px;
    font-weight: 900;
    text-transform: uppercase;
    animation: 
        titleGlow 2s ease-in-out infinite,
        backgroundPulse 3s linear infinite,
        neonFlicker 5s ease-in-out infinite;
    background: linear-gradient(45deg, #00d4ff, #00ffff, #00d4ff);
    background-size: 200% auto;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 
        0 0 30px rgba(0, 212, 255, 0.8),
        0 0 60px rgba(0, 212, 255, 0.5),
        0 0 90px rgba(0, 212, 255, 0.3);
    position: relative;
}

#loading-screen h1::before {
    content: '墨宇塔防';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(45deg, #00d4ff, #00ffff, #00d4ff);
    background-size: 200% auto;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: hologramScan 3s linear infinite;
    opacity: 0.3;
    filter: blur(2px);
}

#loading-spinner {
    width: 100px;
    height: 100px;
    border: 5px solid rgba(0, 212, 255, 0.2);
    border-top: 5px solid #00d4ff;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-bottom: 40px;
    box-shadow: 
        0 0 30px rgba(0, 212, 255, 0.6),
        0 0 60px rgba(0, 212, 255, 0.3),
        inset 0 0 20px rgba(0, 212, 255, 0.1);
    position: relative;
}

#loading-spinner::before {
    content: '';
    position: absolute;
    top: -10px;
    left: -10px;
    width: calc(100% + 20px);
    height: calc(100% + 20px);
    border: 2px solid rgba(0, 212, 255, 0.3);
    border-radius: 50%;
    animation: spin 1.5s linear infinite reverse;
}

#loading-spinner::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 40px;
    height: 40px;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle, rgba(0, 212, 255, 0.8) 0%, transparent 70%);
    border-radius: 50%;
    animation: energyCore 2s ease-in-out infinite;
}

.loading-energy-rings {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100px;
    height: 100px;
    pointer-events: none;
}

.loading-energy-rings .ring {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100px;
    height: 100px;
    border: 2px solid rgba(0, 212, 255, 0.5);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    animation: energyRing 2s ease-out infinite;
}

.loading-energy-rings .ring:nth-child(1) { animation-delay: 0s; }
.loading-energy-rings .ring:nth-child(2) { animation-delay: 0.5s; }
.loading-energy-rings .ring:nth-child(3) { animation-delay: 1s; }
.loading-energy-rings .ring:nth-child(4) { animation-delay: 1.5s; }

.loading-pulse-waves {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100px;
    height: 100px;
    pointer-events: none;
}

.loading-pulse-waves .wave {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100px;
    height: 100px;
    border: 1px solid rgba(0, 212, 255, 0.3);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    animation: pulseWave 3s ease-out infinite;
}

.loading-pulse-waves .wave:nth-child(1) { animation-delay: 0s; }
.loading-pulse-waves .wave:nth-child(2) { animation-delay: 1s; }
.loading-pulse-waves .wave:nth-child(3) { animation-delay: 2s; }

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

#loading-text {
    font-size: 28px;
    margin-bottom: 30px;
    color: #00d4ff;
    font-family: 'Orbitron', 'Arial', sans-serif;
    text-shadow: 
        0 0 20px rgba(0, 212, 255, 0.8),
        0 0 40px rgba(0, 212, 255, 0.5);
    letter-spacing: 3px;
    opacity: 0.95;
    font-weight: bold;
}

#loading-progress-container {
    width: 600px;
    height: 25px;
    background-color: rgba(20, 30, 50, 0.9);
    border-radius: 15px;
    overflow: hidden;
    margin-bottom: 20px;
    border: 3px solid rgba(0, 212, 255, 0.5);
    box-shadow: 
        0 0 30px rgba(0, 212, 255, 0.4),
        0 0 60px rgba(0, 212, 255, 0.2),
        inset 0 0 25px rgba(0, 212, 255, 0.15);
    position: relative;
}

#loading-progress-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, 
        transparent 0%, 
        rgba(0, 212, 255, 0.1) 50%, 
        transparent 100%);
    animation: dataStream 2s linear infinite;
    pointer-events: none;
}

#loading-progress-container::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, transparent, #00d4ff, transparent);
    animation: hologramScan 1.5s linear infinite;
    pointer-events: none;
}

#loading-progress-bar {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #00d4ff, #00ffff, #00d4ff);
    background-size: 200% auto;
    animation: backgroundPulse 2s linear infinite;
    box-shadow: 
        0 0 25px rgba(0, 212, 255, 0.8),
        0 0 50px rgba(0, 212, 255, 0.4);
    transition: width 0.3s ease;
}

#loading-percentage {
    font-size: 24px;
    color: #00d4ff;
    font-family: 'Orbitron', 'Arial', sans-serif;
    text-shadow: 
        0 0 20px rgba(0, 212, 255, 0.8),
        0 0 40px rgba(0, 212, 255, 0.5);
    letter-spacing: 3px;
    font-weight: bold;
    opacity: 0.9;
}

.loading-particles {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: hidden;
}

.loading-particles::before,
.loading-particles::after {
    content: '';
    position: absolute;
    width: 4px;
    height: 4px;
    background: #00d4ff;
    border-radius: 50%;
    box-shadow: 
        0 0 10px #00d4ff,
        0 0 20px #00d4ff,
        0 0 30px #00d4ff;
    animation: particleFloat 8s linear infinite;
}

.loading-particles::before {
    left: 10%;
    animation-delay: 0s;
}

.loading-particles::after {
    left: 20%;
    animation-delay: 2s;
}

.loading-particles .particle {
    position: absolute;
    width: 3px;
    height: 3px;
    background: #00d4ff;
    border-radius: 50%;
    box-shadow: 
        0 0 8px #00d4ff,
        0 0 16px #00d4ff,
        0 0 24px #00d4ff;
    animation: particleFloat 6s linear infinite;
}

.loading-particles .particle:nth-child(1) {
    left: 30%;
    animation-delay: 1s;
}

.loading-particles .particle:nth-child(2) {
    left: 40%;
    animation-delay: 3s;
}

.loading-particles .particle:nth-child(3) {
    left: 50%;
    animation-delay: 0.5s;
}

.loading-particles .particle:nth-child(4) {
    left: 60%;
    animation-delay: 2.5s;
}

.loading-particles .particle:nth-child(5) {
    left: 70%;
    animation-delay: 4s;
}

.loading-particles .particle:nth-child(6) {
    left: 80%;
    animation-delay: 1.5s;
}

.loading-particles .particle:nth-child(7) {
    left: 90%;
    animation-delay: 3.5s;
}

.loading-digital-rain {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: hidden;
}

.loading-digital-rain .digit {
    position: absolute;
    top: -20px;
    font-size: 14px;
    color: rgba(0, 212, 255, 0.5);
    font-family: 'Orbitron', monospace;
    animation: digitalRain 5s linear infinite;
}

.loading-digital-rain .digit:nth-child(1) { left: 5%; animation-delay: 0s; }
.loading-digital-rain .digit:nth-child(2) { left: 10%; animation-delay: 1s; }
.loading-digital-rain .digit:nth-child(3) { left: 15%; animation-delay: 2s; }
.loading-digital-rain .digit:nth-child(4) { left: 20%; animation-delay: 0.5s; }
.loading-digital-rain .digit:nth-child(5) { left: 25%; animation-delay: 1.5s; }
.loading-digital-rain .digit:nth-child(6) { left: 30%; animation-delay: 2.5s; }
.loading-digital-rain .digit:nth-child(7) { left: 35%; animation-delay: 3s; }
.loading-digital-rain .digit:nth-child(8) { left: 40%; animation-delay: 0.8s; }
.loading-digital-rain .digit:nth-child(9) { left: 45%; animation-delay: 1.8s; }
.loading-digital-rain .digit:nth-child(10) { left: 50%; animation-delay: 2.8s; }
.loading-digital-rain .digit:nth-child(11) { left: 55%; animation-delay: 3.8s; }
.loading-digital-rain .digit:nth-child(12) { left: 60%; animation-delay: 0.3s; }
.loading-digital-rain .digit:nth-child(13) { left: 65%; animation-delay: 1.3s; }
.loading-digital-rain .digit:nth-child(14) { left: 70%; animation-delay: 2.3s; }
.loading-digital-rain .digit:nth-child(15) { left: 75%; animation-delay: 3.3s; }
.loading-digital-rain .digit:nth-child(16) { left: 80%; animation-delay: 0.6s; }
.loading-digital-rain .digit:nth-child(17) { left: 85%; animation-delay: 1.6s; }
.loading-digital-rain .digit:nth-child(18) { left: 90%; animation-delay: 2.6s; }
.loading-digital-rain .digit:nth-child(19) { left: 95%; animation-delay: 3.6s; }

/* 隐藏类 */
.hidden {
    display: none !important;
}

/* 游戏主界面滑动显示 */
#game-main.slide-down {
    animation: slideDown 1.5s ease-out forwards;
}

#game-main.slide-up {
    animation: slideUp 1.5s ease-out forwards;
}

#game-main.fade-in {
    animation: fadeIn 1s ease-out forwards;
}

#game-main.scale-in {
    animation: scaleIn 1s ease-out forwards;
}

/* 开始界面滑动隐藏 */
#start-screen.slide-up-exit {
    animation: slideUpExit 1s ease-out forwards;
}

@keyframes slideUpExit {
    0% {
        transform: translateY(0);
        opacity: 1;
    }
    100% {
        transform: translateY(-100%);
        opacity: 0;
    }
}

/* 响应式设计 */
@media (max-width: 768px) {
    #loading-screen h1 {
        font-size: 48px;
    }
    
    #loading-spinner {
        width: 60px;
        height: 60px;
    }
    
    #loading-text {
        font-size: 18px;
    }
    
    #loading-progress-container {
        width: 300px;
    }
    
    #loading-percentage {
        font-size: 16px;
    }
}

/* 石炭星副本通用UI元素样式 */
.resource-display.forest-style {
    background-color: rgba(30, 60, 30, 0.9);
    border: 3px solid #00ff88;
    box-shadow: 0 0 20px rgba(0, 255, 136, 0.3),
                0 0 40px rgba(139, 69, 19, 0.2);
}

.resource-display.forest-style #sun-count, .resource-display.forest-style #coin-count {
    color: #ffffff;
    text-shadow: 0 0 10px rgba(0, 255, 136, 0.8);
}

.wave-display.forest-style {
    background-color: rgba(30, 60, 30, 0.9);
    border: 3px solid #00ff88;
    box-shadow: 0 0 20px rgba(0, 255, 136, 0.3),
                0 0 40px rgba(139, 69, 19, 0.2);
}

.wave-display.forest-style #wave-info, .wave-display.forest-style #highest-wave-info {
    color: #ffffff;
    text-shadow: 0 0 10px rgba(0, 255, 136, 0.8);
}

.system-buttons-bar.forest-style {
    background-color: rgba(30, 60, 30, 0.9);
    border: 3px solid #00ff88;
    box-shadow: 0 0 20px rgba(0, 255, 136, 0.3),
                0 0 40px rgba(139, 69, 19, 0.2);
}

.system-buttons-bar.forest-style button {
    background-color: rgba(40, 80, 40, 0.95);
    border-color: #00ff88;
    color: #ffffff;
    text-shadow: 0 0 10px rgba(0, 255, 136, 0.8);
    box-shadow: 0 0 15px rgba(0, 255, 136, 0.3);
}

.system-buttons-bar.forest-style button:hover {
    background-color: rgba(50, 100, 50, 0.95);
    border-color: #8aff4d;
    box-shadow: 0 0 20px rgba(0, 255, 136, 0.5);
}

#dungeon-select-btn.forest-style, #inventory-btn.forest-style, #draw-card-btn.forest-style, #game-guide-btn.forest-style {
    background-color: rgba(30, 60, 30, 0.9);
    border: 3px solid #00ff88;
    box-shadow: 0 0 20px rgba(0, 255, 136, 0.3),
                0 0 40px rgba(139, 69, 19, 0.2);
}

#dungeon-select-btn.forest-style:hover, #inventory-btn.forest-style:hover, #draw-card-btn.forest-style:hover, #game-guide-btn.forest-style:hover {
    background-color: rgba(40, 80, 40, 0.95);
    border-color: #8aff4d;
    box-shadow: 0 0 30px rgba(0, 255, 136, 0.5),
                0 0 50px rgba(139, 69, 19, 0.3);
}

.card-panel.forest-style, #plant-selector.forest-style, #explosion-plant-selector.forest-style {
    background-color: rgba(30, 60, 30, 0.9);
    border: 3px solid #00ff88;
    box-shadow: 0 0 20px rgba(0, 255, 136, 0.3),
                0 0 40px rgba(139, 69, 19, 0.2);
}

.card-panel.forest-style .inventory-slot, #plant-selector.forest-style .plant-item, #explosion-plant-selector.forest-style .plant-item {
    background-color: rgba(40, 80, 40, 0.95);
    border-color: #00ff88;
    box-shadow: 0 0 15px rgba(0, 255, 136, 0.3);
}

.card-panel.forest-style .inventory-slot:hover, #plant-selector.forest-style .plant-item:hover, #explosion-plant-selector.forest-style .plant-item:hover {
    background-color: rgba(50, 100, 50, 0.95);
    border-color: #8aff4d;
    box-shadow: 0 0 20px rgba(0, 255, 136, 0.5);
}

.card-panel.forest-style .plant-name, .card-panel.forest-style .plant-cost, #plant-selector.forest-style .plant-name, #plant-selector.forest-style .plant-cost, #explosion-plant-selector.forest-style .plant-name, #explosion-plant-selector.forest-style .plant-cost {
    color: #ffffff;
    text-shadow: 0 0 10px rgba(0, 255, 136, 0.8);
}

/* 石炭星副本开始游戏按钮样式 */
#start-btn.forest-style {
    background: linear-gradient(135deg, rgba(40, 80, 40, 0.95) 0%, rgba(30, 60, 30, 0.95) 100%);
    border: 3px solid #00ff88;
    color: #ffffff;
    text-shadow: 0 0 15px rgba(0, 255, 136, 0.8), 0 0 30px rgba(0, 200, 0, 0.5);
    box-shadow: 
        0 0 30px rgba(0, 255, 136, 0.6),
        0 0 40px rgba(139, 69, 19, 0.2),
        inset 0 0 30px rgba(0, 255, 136, 0.1);
    animation: startButtonPulseForest 2s ease-in-out infinite;
}

#start-btn.forest-style:hover {
    background: linear-gradient(135deg, rgba(50, 100, 50, 0.95) 0%, rgba(40, 80, 40, 0.95) 100%);
    border-color: #8aff4d;
    box-shadow: 
        0 0 50px rgba(0, 255, 136, 0.8),
        0 0 60px rgba(139, 69, 19, 0.3),
        inset 0 0 40px rgba(0, 255, 136, 0.2);
}

/* 石炭星副本开始按钮脉冲动画 */
@keyframes startButtonPulseForest {
    0% {
        box-shadow: 
            0 0 30px rgba(0, 255, 136, 0.6),
            0 0 40px rgba(139, 69, 19, 0.2),
            inset 0 0 30px rgba(0, 255, 136, 0.1);
    }
    50% {
        box-shadow: 
            0 0 50px rgba(0, 255, 136, 0.8),
            0 0 60px rgba(139, 69, 19, 0.3),
            inset 0 0 30px rgba(0, 255, 136, 0.1);
    }
    100% {
        box-shadow: 
            0 0 30px rgba(0, 255, 136, 0.6),
            0 0 40px rgba(139, 69, 19, 0.2),
            inset 0 0 30px rgba(0, 255, 136, 0.1);
    }
}

/* 石炭星副本游戏结束界面样式 */
#game-over.forest-style {
    background-color: rgba(30, 60, 30, 0.95);
    border: 3px solid #00ff88;
    box-shadow: 0 0 30px rgba(0, 255, 136, 0.5),
                0 0 40px rgba(139, 69, 19, 0.2);
}

#game-over.forest-style h2, #game-over.forest-style p {
    color: #ffffff;
    text-shadow: 0 0 10px rgba(0, 255, 136, 0.8);
}

#restart-btn.forest-style {
    background-color: rgba(40, 80, 40, 0.95);
    color: #ffffff;
    border: 2px solid #00ff88;
    text-shadow: 0 0 10px rgba(0, 255, 136, 0.8);
    box-shadow: 0 0 15px rgba(0, 255, 136, 0.3),
                0 0 20px rgba(139, 69, 19, 0.1);
}

#restart-btn.forest-style:hover {
    background-color: rgba(50, 100, 50, 0.95);
    border-color: #8aff4d;
    box-shadow: 0 0 25px rgba(0, 255, 136, 0.5),
                0 0 30px rgba(139, 69, 19, 0.2);
}

/* 石炭星副本背包面板样式 */
#inventory-panel.forest-style {
    background-color: rgba(30, 60, 30, 0.95);
    border: 3px solid #00ff88;
    box-shadow: 0 0 30px rgba(0, 255, 136, 0.5),
                0 0 40px rgba(139, 69, 19, 0.2);
}

#inventory-panel.forest-style h2, #inventory-panel.forest-style #inventory-coin-display {
    color: #ffffff;
    text-shadow: 0 0 10px rgba(0, 255, 136, 0.8);
}

#inventory-panel.forest-style button {
    background-color: rgba(40, 80, 40, 0.95);
    border-color: #00ff88;
    color: #ffffff;
    text-shadow: 0 0 10px rgba(0, 255, 136, 0.8);
    box-shadow: 0 0 15px rgba(0, 255, 136, 0.3);
}

#inventory-panel.forest-style button:hover {
    background-color: rgba(50, 100, 50, 0.95);
    border-color: #8aff4d;
    box-shadow: 0 0 20px rgba(0, 255, 136, 0.5);
}

/* 石炭星副本抽卡面板样式 */
#draw-card-panel.forest-style {
    background-color: rgba(30, 60, 30, 0.95);
    border: 3px solid #00ff88;
    box-shadow: 0 0 30px rgba(0, 255, 136, 0.5),
                0 0 40px rgba(139, 69, 19, 0.2);
}

#draw-card-panel.forest-style h2, #draw-card-panel.forest-style #draw-card-coin-display {
    color: #ffffff;
    text-shadow: 0 0 10px rgba(0, 255, 136, 0.8);
}

#draw-card-panel.forest-style button {
    background-color: rgba(40, 80, 40, 0.95);
    border-color: #00ff88;
    box-shadow: 0 0 15px rgba(0, 255, 136, 0.3),
                0 0 20px rgba(139, 69, 19, 0.1);
}

#draw-card-panel.forest-style button:hover {
    background-color: rgba(50, 100, 50, 0.95);
    border-color: #8aff4d;
    box-shadow: 0 0 25px rgba(0, 255, 136, 0.5),
                0 0 30px rgba(139, 69, 19, 0.2);
}

/* 资源显示栏 - 左侧水平 */
.resource-display {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin: 0;
    padding: 12.5px 25px;
    background: 
        linear-gradient(135deg, rgba(15, 20, 35, 0.98) 0%, rgba(25, 30, 55, 0.98) 50%, rgba(15, 20, 35, 0.98) 100%),
        radial-gradient(circle at 50% 50%, rgba(255, 215, 0, 0.08) 0%, transparent 100%);
    border-radius: 10px;
    border: 2px solid #ffd700;
    box-shadow: 
        0 0 25px rgba(255, 215, 0, 0.4),
        0 0 50px rgba(255, 215, 0, 0.2),
        0 0 75px rgba(255, 215, 0, 0.1),
        inset 0 0 25px rgba(255, 215, 0, 0.15);
    min-height: 40px;
    position: relative;
    overflow: hidden;
}

/* 加载界面样式 */
#loading-screen {
    text-align: center;
    color: #00ffff;
    padding: 80px 60px;
    background-color: rgba(10, 15, 25, 0.98);
    border-radius: 20px;
    border: 2px solid #00ffff;
    box-shadow: 
        0 0 60px rgba(0, 255, 255, 0.5),
        0 0 120px rgba(0, 255, 255, 0.2),
        inset 0 0 60px rgba(0, 255, 255, 0.1);
    background-image: 
        radial-gradient(circle at 20% 30%, rgba(0, 255, 255, 0.2) 0%, transparent 50%),
        radial-gradient(circle at 80% 70%, rgba(128, 0, 255, 0.2) 0%, transparent 50%),
        linear-gradient(135deg, rgba(10, 15, 25, 0.98) 0%, rgba(25, 30, 50, 0.98) 50%, rgba(10, 15, 25, 0.98) 100%);
    position: relative;
    overflow: hidden;
    animation: glowPulse 3s ease-in-out infinite;
    min-width: 400px;
}

#loading-screen::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background-image: 
        linear-gradient(0deg, transparent 24%, rgba(0, 255, 255, 0.05) 25%, rgba(0, 255, 255, 0.05) 26%, transparent 27%, transparent 74%, rgba(0, 255, 255, 0.05) 75%, rgba(0, 255, 255, 0.05) 76%, transparent 77%, transparent),
        linear-gradient(90deg, transparent 24%, rgba(0, 255, 255, 0.05) 25%, rgba(0, 255, 255, 0.05) 26%, transparent 27%, transparent 74%, rgba(0, 255, 255, 0.05) 75%, rgba(0, 255, 255, 0.05) 76%, transparent 77%, transparent);
    background-size: 50px 50px;
    animation: gridMove 20s linear infinite;
    opacity: 0.3;
    pointer-events: none;
    z-index: 0;
}

#loading-screen * {
    position: relative;
    z-index: 1;
}

#loading-screen h1 {
    font-size: 64px;
    margin-bottom: 40px;
    color: #00ffff;
    font-family: 'Orbitron', 'Arial', sans-serif;
    letter-spacing: 5px;
    font-weight: 900;
    text-transform: uppercase;
    animation: titleGlow 2s ease-in-out infinite;
    background: linear-gradient(45deg, #00ffff, #00cccc, #00ffff);
    background-size: 200% auto;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: 
        titleGlow 2s ease-in-out infinite,
        backgroundPulse 3s linear infinite;
}

/* 加载动画 */
#loading-spinner {
    width: 80px;
    height: 80px;
    border: 4px solid rgba(0, 255, 255, 0.3);
    border-top: 4px solid #00ffff;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 40px auto;
    box-shadow: 0 0 30px rgba(0, 255, 255, 0.5);
}

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

#loading-text {
    font-size: 24px;
    margin-bottom: 30px;
    color: #00ffff;
    font-family: 'Arial', sans-serif;
    text-shadow: 
        0 0 15px rgba(0, 255, 255, 0.7),
        0 0 30px rgba(0, 255, 255, 0.4);
    letter-spacing: 2px;
    opacity: 0.9;
}

/* 进度条容器 */
#loading-progress-container {
    width: 100%;
    height: 20px;
    background-color: rgba(35, 43, 61, 0.8);
    border-radius: 10px;
    border: 2px solid #00ffff;
    overflow: hidden;
    margin-bottom: 20px;
    box-shadow: 
        0 0 20px rgba(0, 255, 255, 0.3),
        inset 0 0 20px rgba(0, 255, 255, 0.1);
}

/* 进度条 */
#loading-progress-bar {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #00ffff, #00cccc, #00ffff);
    background-size: 200% auto;
    animation: backgroundPulse 2s linear infinite;
    border-radius: 8px;
    transition: width 0.3s ease;
    box-shadow: 0 0 20px rgba(0, 255, 255, 0.6);
}

#loading-percentage {
    font-size: 20px;
    color: #00ffff;
    font-family: 'Orbitron', 'Arial', sans-serif;
    text-shadow: 
        0 0 15px rgba(0, 255, 255, 0.7),
        0 0 30px rgba(0, 255, 255, 0.4);
    letter-spacing: 2px;
    font-weight: bold;
}

/* 隐藏类 */
.hidden {
    display: none !important;
}

/* 波数显示栏 - 右上角 */
.wave-display {
    display: flex;
    gap: 30px;
    padding: 20px 40px;
    background: 
        linear-gradient(135deg, rgba(10, 15, 30, 0.95) 0%, rgba(20, 25, 50, 0.95) 50%, rgba(10, 15, 30, 0.95) 100%),
        radial-gradient(circle at 50% 50%, rgba(0, 255, 255, 0.1) 0%, transparent 100%);
    border-radius: 15px;
    border: 3px solid #00ffff;
    box-shadow: 
        0 0 30px rgba(0, 255, 255, 0.4),
        0 0 60px rgba(0, 255, 255, 0.2),
        0 0 90px rgba(0, 255, 255, 0.1),
        inset 0 0 30px rgba(0, 255, 255, 0.1);
    position: relative;
    overflow: hidden;
    margin-left: 35px;
}

#sun-count, #coin-count {
    font-size: 24px;
    font-weight: 900;
    font-family: 'Orbitron', 'Arial', sans-serif;
    color: #00ffff;
    text-shadow: 
        0 0 12.5px rgba(0, 255, 255, 0.9),
        0 0 25px rgba(0, 255, 255, 0.7),
        0 0 37.5px rgba(0, 255, 255, 0.5),
        0 0 50px rgba(0, 255, 255, 0.3);
    margin-right: 0;
    padding: 7.5px 15px;
    background: 
        linear-gradient(135deg, rgba(0, 255, 255, 0.15) 0%, rgba(0, 255, 255, 0.05) 100%),
        radial-gradient(circle at 50% 50%, rgba(0, 255, 255, 0.1) 0%, transparent 100%);
    border-radius: 7.5px;
    border: 1.5px solid rgba(0, 255, 255, 0.6);
    box-shadow: 
        0 0 15px rgba(0, 255, 255, 0.4),
        0 0 30px rgba(0, 255, 255, 0.2),
        inset 0 0 15px rgba(0, 255, 255, 0.1);
    position: relative;
    overflow: hidden;
    animation: sunCountPulse 2.5s ease-in-out infinite;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 7.5px;
}

#sun-count::before, #coin-count::before {
    display: none;
}

#sun-count::after, #coin-count::after {
    display: none;
}

#sun-count img, #coin-count img {
    width: 25px !important;
    height: 25px !important;
    vertical-align: middle;
    margin-right: 7.5px;
    filter: drop-shadow(0 0 7.5px rgba(0, 255, 255, 0.8));
}

#sun-count span, #coin-count span {
    color: #00ffff;
    font-weight: 900;
    text-shadow: 
        0 0 30px rgba(0, 255, 255, 1),
        0 0 60px rgba(0, 255, 255, 0.8),
        0 0 90px rgba(0, 255, 255, 0.6);
}

#coin-count {
    color: #ffd700;
    background: 
        linear-gradient(135deg, rgba(255, 215, 0, 0.15) 0%, rgba(255, 215, 0, 0.05) 100%),
        radial-gradient(circle at 50% 50%, rgba(255, 215, 0, 0.1) 0%, transparent 100%);
    border-color: rgba(255, 215, 0, 0.6);
    box-shadow: 
        0 0 30px rgba(255, 215, 0, 0.4),
        0 0 60px rgba(255, 215, 0, 0.2),
        inset 0 0 30px rgba(255, 215, 0, 0.1);
    text-shadow: 
        0 0 25px rgba(255, 215, 0, 0.9),
        0 0 50px rgba(255, 215, 0, 0.7),
        0 0 75px rgba(255, 215, 0, 0.5),
        0 0 100px rgba(255, 215, 0, 0.3);
}

#coin-count::before {
    display: none;
}

#coin-count::after {
    display: none;
}

#coin-count img {
    filter: drop-shadow(0 0 15px rgba(255, 215, 0, 0.8));
}

#coin-count span {
    color: #ffd700;
    text-shadow: 
        0 0 30px rgba(255, 215, 0, 1),
        0 0 60px rgba(255, 215, 0, 0.8),
        0 0 90px rgba(255, 215, 0, 0.6);
}

#game-controls button {
    background-color: #2c3448;
    color: #00ffff;
    border: 1px solid #00ffff;
    padding: 8px 16px;
    margin: 0 5px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 14px;
    font-weight: bold;
    transition: all 0.3s ease;
    box-shadow: 0 0 10px rgba(0, 255, 255, 0.2);
    text-shadow: 0 0 5px rgba(0, 255, 255, 0.5);
    background-image: linear-gradient(135deg, #1a1f2e 0%, #2c3448 100%);
}

#game-controls button:hover {
    background-color: #3a4358;
    box-shadow: 0 0 15px rgba(0, 255, 255, 0.4);
    transform: translateY(-1px);
}

/* 高级背包按钮样式 */
#inventory-btn {
    background: linear-gradient(135deg, 
        rgba(128, 0, 255, 0.3) 0%, 
        rgba(0, 0, 255, 0.2) 30%, 
        rgba(255, 0, 255, 0.2) 70%, 
        rgba(128, 0, 255, 0.3) 100%);
    border: 2px solid #8000ff;
    color: #ffffff;
    text-shadow: 
        0 0 15px rgba(128, 0, 255, 1),
        0 0 30px rgba(128, 0, 255, 0.8),
        0 0 45px rgba(128, 0, 255, 0.6);
    position: relative;
    overflow: hidden;
    box-shadow: 
        0 8px 32px rgba(128, 0, 255, 0.6),
        inset 0 1px 0 rgba(255, 255, 255, 0.2),
        inset 0 -1px 0 rgba(128, 0, 255, 0.3),
        0 0 60px rgba(128, 0, 255, 0.4),
        0 0 100px rgba(128, 0, 255, 0.2);
    animation: 
        inventoryPulse 2s ease-in-out infinite,
        inventoryFloat 1.5s ease-in-out infinite,
        inventoryBorderGlow 3s ease-in-out infinite alternate;
    font-weight: bold;
    letter-spacing: 1px;
    transform-style: preserve-3d;
    perspective: 1000px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 10;
}

#inventory-btn:hover {
    background: linear-gradient(135deg, 
        rgba(148, 0, 255, 0.5) 0%, 
        rgba(0, 0, 255, 0.4) 30%, 
        rgba(255, 0, 255, 0.4) 70%, 
        rgba(148, 0, 255, 0.5) 100%);
    box-shadow: 
        0 16px 48px rgba(148, 0, 255, 0.8),
        inset 0 2px 0 rgba(255, 255, 255, 0.3),
        inset 0 -2px 0 rgba(148, 0, 255, 0.4),
        0 0 100px rgba(148, 0, 255, 0.6),
        0 0 160px rgba(148, 0, 255, 0.4),
        0 0 220px rgba(148, 0, 255, 0.2);
    transform: 
        translateY(-10px) 
        scale(1.15) 
        rotateX(10deg) 
        rotateY(10deg);
    border-width: 3px;
    border-color: #ff40ff;
    letter-spacing: 2px;
    text-shadow: 
        0 0 20px rgba(148, 0, 255, 1),
        0 0 40px rgba(148, 0, 255, 0.9),
        0 0 60px rgba(148, 0, 255, 0.8);
    animation: 
        inventoryPulse 1s ease-in-out infinite,
        inventoryFloat 1s ease-in-out infinite,
        inventoryBorderGlow 2s ease-in-out infinite alternate,
        inventoryHoverGlow 0.5s ease-out forwards;
    z-index: 20;
}

/* 背包按钮脉动动画 */
@keyframes inventoryPulse {
    0%, 100% {
        box-shadow: 
            0 0 20px rgba(128, 0, 255, 0.6),
            inset 0 0 20px rgba(128, 0, 255, 0.2),
            0 0 40px rgba(128, 0, 255, 0.3);
    }
    50% {
        box-shadow: 
            0 0 30px rgba(128, 0, 255, 0.9),
            inset 0 0 25px rgba(128, 0, 255, 0.3),
            0 0 60px rgba(128, 0, 255, 0.5);
    }
}

/* 背包按钮悬浮动画 */
@keyframes inventoryFloat {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-2px);
    }
}

/* 背包按钮边框发光动画 */
@keyframes inventoryBorderGlow {
    0% {
        border-color: #8000ff;
        box-shadow: 
            0 8px 32px rgba(128, 0, 255, 0.6),
            inset 0 1px 0 rgba(255, 255, 255, 0.2),
            inset 0 -1px 0 rgba(128, 0, 255, 0.3),
            0 0 60px rgba(128, 0, 255, 0.4),
            0 0 100px rgba(128, 0, 255, 0.2);
    }
    50% {
        border-color: #a040ff;
        box-shadow: 
            0 8px 32px rgba(160, 64, 255, 0.7),
            inset 0 1px 0 rgba(255, 255, 255, 0.2),
            inset 0 -1px 0 rgba(160, 64, 255, 0.4),
            0 0 80px rgba(160, 64, 255, 0.6),
            0 0 140px rgba(160, 64, 255, 0.3);
    }
    100% {
        border-color: #ff40ff;
        box-shadow: 
            0 8px 32px rgba(255, 64, 255, 0.8),
            inset 0 1px 0 rgba(255, 255, 255, 0.3),
            inset 0 -1px 0 rgba(255, 64, 255, 0.5),
            0 0 100px rgba(255, 64, 255, 0.7),
            0 0 180px rgba(255, 64, 255, 0.4);
    }
}

/* 背包按钮悬停发光动画 */
@keyframes inventoryHoverGlow {
    0% {
        filter: brightness(1) contrast(1);
    }
    100% {
        filter: brightness(1.3) contrast(1.2);
        box-shadow: 
            0 16px 48px rgba(148, 0, 255, 0.8),
            inset 0 2px 0 rgba(255, 255, 255, 0.3),
            inset 0 -2px 0 rgba(148, 0, 255, 0.4),
            0 0 100px rgba(148, 0, 255, 0.6),
            0 0 160px rgba(148, 0, 255, 0.4),
            0 0 220px rgba(148, 0, 255, 0.2),
            0 0 280px rgba(148, 0, 255, 0.1);
    }
}

/* 抽卡覆盖层颜色变化动画 */
@keyframes overlayColorShift {
    0% {
        background: radial-gradient(circle at center, 
            rgba(128, 0, 255, 0.3) 0%, 
            rgba(0, 255, 255, 0.2) 20%, 
            rgba(0, 0, 255, 0.2) 40%, 
            rgba(0, 0, 0, 0.95) 70%, 
            rgba(0, 0, 0, 0.98) 100%);
    }
    50% {
        background: radial-gradient(circle at center, 
            rgba(0, 255, 255, 0.3) 0%, 
            rgba(128, 0, 255, 0.2) 20%, 
            rgba(255, 0, 255, 0.2) 40%, 
            rgba(0, 0, 0, 0.95) 70%, 
            rgba(0, 0, 0, 0.98) 100%);
    }
    100% {
        background: radial-gradient(circle at center, 
            rgba(255, 0, 255, 0.3) 0%, 
            rgba(0, 0, 255, 0.2) 20%, 
            rgba(128, 0, 255, 0.2) 40%, 
            rgba(0, 0, 0, 0.95) 70%, 
            rgba(0, 0, 0, 0.98) 100%);
    }
}

/* 粒子轨道运动动画 */
@keyframes particleOrbit {
    0% {
        transform: translate(0, 0) rotate(0deg);
        opacity: 0;
    }
    10% {
        opacity: 0.8;
    }
    90% {
        opacity: 0.8;
    }
    100% {
        transform: translate(100px, -100px) rotate(360deg);
        opacity: 0;
    }
}

/* 粒子漂移动画 */
@keyframes particleDrift {
    0% {
        transform: translate(0, 0);
        opacity: 0;
    }
    10% {
        opacity: 0.6;
    }
    50% {
        transform: translate(50px, -50px);
    }
    90% {
        opacity: 0.6;
    }
    100% {
        transform: translate(100px, 100px);
        opacity: 0;
    }
}

/* 发光球体浮动动画 */
@keyframes orbFloat {
    0% {
        transform: translate(-50%, -50%) scale(1) rotate(0deg);
    }
    50% {
        transform: translate(-50%, -50%) scale(1.2) rotate(180deg);
    }
    100% {
        transform: translate(-50%, -50%) scale(1) rotate(360deg);
    }
}

/* 卡片出现动画 */
@keyframes cardAppear {
    0% {
        opacity: 0;
        transform: translateY(50px) rotateY(90deg) scale(0.8);
        box-shadow: 0 0 20px rgba(128, 0, 255, 0.2);
    }
    70% {
        opacity: 0.8;
        transform: translateY(-10px) rotateY(0deg) scale(1.05);
    }
    100% {
        opacity: 1;
        transform: translateY(0) rotateY(0deg) scale(1);
        box-shadow: 0 20px 60px rgba(128, 0, 255, 0.4);
    }
}

/* 卡片星形粒子爆发动画 */
@keyframes cardStarBurst {
    0% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(0);
    }
    30% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.2);
    }
    100% {
        opacity: 0;
        transform: translate(calc(-50% + var(--x)), calc(-50% + var(--y))) scale(0.5);
    }
}

/* 卡片爆炸效果优化 */
@keyframes cardEffectExplode {
    0% {
        transform: translate(-50%, -50%) scale(0);
        opacity: 1;
    }
    70% {
        opacity: 0.7;
    }
    100% {
        transform: translate(-50%, -50%) scale(2);
        opacity: 0;
    }
}

/* 超级升星卡星云效果 */
@keyframes superLevelUpNebula {
    0% {
        transform: translate(-50%, -50%) scale(0);
        opacity: 0;
    }
    30% {
        opacity: 0.8;
    }
    100% {
        transform: translate(calc(-50% + var(--x)), calc(-50% + var(--y))) scale(1.5);
        opacity: 0;
    }
}

/* 超级升星卡文字提示动画 */
@keyframes superLevelUpText {
    0% {
        opacity: 0;
        transform: translateX(-50%) translateY(-20px) scale(0.5);
        text-shadow: 0 0 10px rgba(255, 64, 255, 1);
    }
    50% {
        opacity: 1;
        transform: translateX(-50%) translateY(0) scale(1.1);
        text-shadow: 0 0 40px rgba(255, 64, 255, 1), 0 0 80px rgba(255, 64, 255, 0.7);
    }
    100% {
        opacity: 0.8;
        transform: translateX(-50%) translateY(0) scale(1);
        text-shadow: 0 0 30px rgba(255, 64, 255, 1), 0 0 60px rgba(255, 64, 255, 0.7);
    }
}

/* 升星卡闪电效果 */
@keyframes levelUpLightning {
    0% {
        opacity: 1;
        transform: translate(-50%, -50%) scaleY(0);
    }
    20% {
        transform: translate(-50%, -50%) scaleY(1);
    }
    100% {
        opacity: 0;
        transform: translate(calc(-50% + var(--x)), calc(-50% + var(--y))) scaleY(0.5);
    }
}

/* 覆盖层淡出动画 */
@keyframes overlayFadeOut {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

/* 卡片缩小淡出动画 */
@keyframes cardShrink {
    0% {
        opacity: 1;
        transform: scale(1);
        filter: brightness(1);
    }
    50% {
        opacity: 0.8;
        transform: scale(1.05);
        filter: brightness(1.2);
    }
    100% {
        opacity: 0;
        transform: scale(0.8) rotateY(90deg);
        filter: brightness(0.5);
    }
}

/* 背包按钮光晕效果 */
#inventory-btn::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(45deg, 
        transparent 0%, 
        rgba(128, 0, 255, 0.3) 30%, 
        rgba(255, 255, 255, 0.5) 50%, 
        rgba(128, 0, 255, 0.3) 70%, 
        transparent 100%);
    transform: rotate(45deg);
    animation: inventoryShimmer 3s infinite linear;
    opacity: 0;
    transition: opacity 0.5s ease;
}

#inventory-btn:hover::before {
    opacity: 1;
    animation: inventoryShimmer 1s infinite linear;
}

@keyframes inventoryShimmer {
    0% {
        transform: translateX(-100%) translateY(-100%) rotate(45deg);
    }
    100% {
        transform: translateX(100%) translateY(100%) rotate(45deg);
    }
}

/* 背包按钮边框发光动画 */
#inventory-btn::after {
    content: '';
    position: absolute;
    top: -3px;
    left: -3px;
    right: -3px;
    bottom: -3px;
    border: 3px solid transparent;
    background: linear-gradient(45deg, 
        #8000ff, 
        #00ffff, 
        #8000ff, 
        #00ffff) border-box;
    -webkit-mask: linear-gradient(to right, #fff 0%, #fff 100%) padding-box, linear-gradient(to right, #fff 0%, #fff 100%);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    border-radius: 5px;
    opacity: 0;
    transition: opacity 0.5s ease;
}

#inventory-btn:hover::after {
    opacity: 1;
    animation: inventoryBorderRotate 2s linear infinite;
}

@keyframes inventoryBorderRotate {
    0% {
        background-position: 0% 50%;
    }
    100% {
        background-position: 200% 50%;
    }
}

/* 金币抽卡按钮高级动画 */
#coin-draw-btn {
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.1) 0%, rgba(255, 140, 0, 0.1) 100%);
    border: 2px solid #ffd700;
    color: #ffd700;
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.8);
    position: relative;
    overflow: hidden;
    box-shadow: 
        0 0 15px rgba(255, 215, 0, 0.5),
        inset 0 0 15px rgba(255, 215, 0, 0.1);
    animation: coinDrawPulse 2s ease-in-out infinite;
}

#coin-draw-btn:hover {
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.2) 0%, rgba(255, 140, 0, 0.2) 100%);
    box-shadow: 
        0 0 25px rgba(255, 215, 0, 0.7),
        0 0 40px rgba(255, 140, 0, 0.5),
        inset 0 0 20px rgba(255, 215, 0, 0.2);
    transform: translateY(-2px);
}

#coin-draw-btn::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(
        45deg,
        transparent 0%,
        rgba(255, 215, 0, 0.3) 50%,
        transparent 100%
    );
    transform: rotate(30deg);
    animation: coinDrawShine 3s linear infinite;
}

#coin-draw-btn:active {
    animation: coinDrawClick 0.3s ease-in-out;
}

/* 金币抽卡按钮脉冲动画 */
@keyframes coinDrawPulse {
    0% {
        box-shadow: 
            0 0 15px rgba(255, 215, 0, 0.5),
            inset 0 0 15px rgba(255, 215, 0, 0.1);
    }
    50% {
        box-shadow: 
            0 0 25px rgba(255, 215, 0, 0.7),
            0 0 40px rgba(255, 140, 0, 0.3),
            inset 0 0 15px rgba(255, 215, 0, 0.1);
    }
    100% {
        box-shadow: 
            0 0 15px rgba(255, 215, 0, 0.5),
            inset 0 0 15px rgba(255, 215, 0, 0.1);
    }
}

/* 金币抽卡按钮内部流动光效 */
@keyframes coinDrawShine {
    0% {
        transform: translateX(-100%) translateY(-100%) rotate(30deg);
    }
    100% {
        transform: translateX(100%) translateY(100%) rotate(30deg);
    }
}

/* 金币抽卡按钮点击动画 */
@keyframes coinDrawClick {
    0% {
        transform: scale(1);
        box-shadow: 
            0 0 25px rgba(255, 215, 0, 0.7),
            0 0 40px rgba(255, 140, 0, 0.5),
            inset 0 0 20px rgba(255, 215, 0, 0.2);
    }
    50% {
        transform: scale(0.95);
        box-shadow: 
            0 0 40px rgba(255, 215, 0, 0.9),
            0 0 60px rgba(255, 140, 0, 0.7),
            inset 0 0 30px rgba(255, 215, 0, 0.3);
    }
    100% {
        transform: scale(1);
        box-shadow: 
            0 0 25px rgba(255, 215, 0, 0.7),
            0 0 40px rgba(255, 140, 0, 0.5),
            inset 0 0 20px rgba(255, 215, 0, 0.2);
    }
}

/* 带文字的图片按钮样式 */
.image-btn-with-text {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 5px;
    border: none;
    background: none;
    cursor: pointer;
    transition: all 0.3s ease;
}

.image-btn-with-text img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.image-btn-with-text span {
    display: block;
    margin-top: 3px;
    font-size: 14px;
    font-weight: bold;
    text-shadow: 0 0 5px rgba(0, 255, 255, 0.7);
    color: #00ffff;
    white-space: nowrap;
}

/* 石炭星副本中的带文字图片按钮样式 */
body.carboniferous-background .image-btn-with-text span {
    color: #ffffff;
    text-shadow: 0 0 5px rgba(0, 255, 136, 0.7);
}

/* 抽卡界面的按钮文字样式 */
#draw-card-panel .image-btn-with-text span {
    font-size: 16px;
    margin-top: 5px;
    color: #ffd700;
    text-shadow: 0 0 5px rgba(255, 215, 0, 0.7);
}

/* 金币10连抽按钮高级动画 */
#coin-draw-ten-btn {
    background: linear-gradient(135deg, rgba(255, 0, 0, 0.1) 0%, rgba(255, 69, 0, 0.1) 100%);
    border: 2px solid #ff4500;
    color: #ff4500;
    text-shadow: 0 0 10px rgba(255, 69, 0, 0.8);
    position: relative;
    overflow: hidden;
    box-shadow: 
        0 0 15px rgba(255, 69, 0, 0.5),
        inset 0 0 15px rgba(255, 69, 0, 0.1);
    animation: coinDrawTenPulse 2.5s ease-in-out infinite;
}

#coin-draw-ten-btn:hover {
    background: linear-gradient(135deg, rgba(255, 0, 0, 0.2) 0%, rgba(255, 69, 0, 0.2) 100%);
    box-shadow: 
        0 0 25px rgba(255, 69, 0, 0.7),
        0 0 40px rgba(255, 0, 0, 0.5),
        inset 0 0 20px rgba(255, 69, 0, 0.2);
    transform: translateY(-2px);
}

/* 副本选择按钮样式 */
#dungeon-select-btn {
    position: fixed;
    bottom: 110px;
    left: 5px;
    background-color: rgba(50, 100, 150, 0.95);
    border: 3px solid #4682b4;
    padding: 12px;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.4s ease;
    z-index: 1000;
    box-shadow: 
        0 0 30px rgba(70, 130, 180, 0.5),
        0 0 60px rgba(70, 130, 180, 0.3),
        inset 0 0 20px rgba(70, 130, 180, 0.15);
    background-image: linear-gradient(135deg, rgba(50, 100, 150, 0.95) 0%, rgba(70, 130, 180, 0.95) 100%);
    animation: dungeonPulse 2s ease-in-out infinite;
    backdrop-filter: blur(5px);
    width: 70px;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
}

#dungeon-select-btn img {
    display: block;
    margin: 0 auto;
    width: 40px;
    height: 40px;
}

#dungeon-select-btn:hover {
    transform: translateY(-5px);
    box-shadow: 
        0 0 50px rgba(70, 130, 180, 0.8),
        0 0 100px rgba(50, 100, 150, 0.5),
        0 0 150px rgba(0, 255, 255, 0.3),
        inset 0 0 30px rgba(70, 130, 180, 0.25);
    border-color: #00ffff;
    background-image: linear-gradient(135deg, rgba(50, 100, 150, 0.95) 0%, rgba(0, 255, 255, 0.8) 100%);
}

/* 副本按钮脉动动画 */
@keyframes dungeonPulse {
    0% {
        box-shadow: 
            0 0 30px rgba(70, 130, 180, 0.5),
            0 0 60px rgba(50, 100, 150, 0.3),
            inset 0 0 20px rgba(70, 130, 180, 0.15);
    }
    50% {
        box-shadow: 
            0 0 45px rgba(70, 130, 180, 0.7),
            0 0 90px rgba(50, 100, 150, 0.5),
            inset 0 0 30px rgba(70, 130, 180, 0.25);
    }
    100% {
        box-shadow: 
            0 0 30px rgba(70, 130, 180, 0.5),
            0 0 60px rgba(50, 100, 150, 0.3),
            inset 0 0 20px rgba(70, 130, 180, 0.15);
    }
}

#game-guide-btn {
    position: fixed;
    bottom: 190px;
    left: 5px;
    background-color: rgba(138, 43, 226, 0.95);
    border: 3px solid #8a2be2;
    padding: 12px;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.4s ease;
    z-index: 1000;
    box-shadow: 
        0 0 30px rgba(138, 43, 226, 0.5),
        0 0 60px rgba(138, 43, 226, 0.3),
        inset 0 0 20px rgba(138, 43, 226, 0.15);
    background-image: linear-gradient(135deg, rgba(138, 43, 226, 0.95) 0%, rgba(186, 85, 211, 0.95) 100%);
    animation: guidePulse 2s ease-in-out infinite;
    backdrop-filter: blur(5px);
    width: 70px;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
}

#game-guide-btn img {
    display: block;
    margin: 0 auto;
    width: 40px;
    height: 40px;
}

#game-guide-btn:hover {
    transform: translateY(-5px);
    box-shadow: 
        0 0 50px rgba(138, 43, 226, 0.8),
        0 0 100px rgba(138, 43, 226, 0.5),
        0 0 150px rgba(0, 212, 255, 0.3),
        inset 0 0 30px rgba(138, 43, 226, 0.25);
    border-color: #00ffff;
    background-image: linear-gradient(135deg, rgba(138, 43, 226, 0.95) 0%, rgba(0, 212, 255, 0.8) 100%);
}

/* 游戏详解按钮脉动动画 */
@keyframes guidePulse {
    0% {
        box-shadow: 
            0 0 30px rgba(138, 43, 226, 0.5),
            0 0 60px rgba(138, 43, 226, 0.3),
            inset 0 0 20px rgba(138, 43, 226, 0.15);
    }
    50% {
        box-shadow: 
            0 0 45px rgba(138, 43, 226, 0.7),
            0 0 90px rgba(138, 43, 226, 0.5),
            inset 0 0 30px rgba(138, 43, 226, 0.25);
    }
    100% {
        box-shadow: 
            0 0 30px rgba(138, 43, 226, 0.5),
            0 0 60px rgba(138, 43, 226, 0.3),
            inset 0 0 20px rgba(138, 43, 226, 0.15);
    }
}

/* 副本选择面板样式 */
.dungeon-panel {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: 
        linear-gradient(135deg, rgba(10, 15, 25, 0.98) 0%, rgba(20, 25, 50, 0.98) 50%, rgba(10, 15, 25, 0.98) 100%),
        radial-gradient(circle at 50% 50%, rgba(0, 255, 255, 0.05) 0%, transparent 100%);
    border: none;
    border-radius: 0;
    padding: 0;
    box-shadow: 
        0 0 50px rgba(0, 255, 255, 0.3),
        0 0 100px rgba(0, 255, 255, 0.2),
        inset 0 0 100px rgba(0, 255, 255, 0.05);
    z-index: 10000;
    animation: none;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.dungeon-panel::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(circle at 20% 30%, rgba(0, 255, 255, 0.03) 0%, transparent 50%),
        radial-gradient(circle at 80% 70%, rgba(0, 255, 255, 0.03) 0%, transparent 50%);
    pointer-events: none;
    animation: panelBackgroundShift 8s ease-in-out infinite;
}

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

.dungeon-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 25px 30px;
    border-bottom: 3px solid #00ffff;
    background: 
        linear-gradient(135deg, rgba(0, 255, 255, 0.1) 0%, rgba(0, 128, 255, 0.05) 100%);
    position: relative;
    box-shadow: 
        0 0 30px rgba(0, 255, 255, 0.3),
        0 5px 20px rgba(0, 0, 0, 0.3);
}

.dungeon-panel-header::before {
    content: '';
    position: absolute;
    bottom: -3px;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, #00ffff, transparent);
    animation: headerBorderGlow 2s ease-in-out infinite;
}

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

.dungeon-panel-current {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    color: #00ffff;
    font-size: 20px;
    text-shadow: 0 0 10px rgba(0, 255, 255, 0.8);
    font-weight: bold;
    white-space: nowrap;
}

/* 石炭星原始森林风格的所在副本显示 */
.dungeon-panel-current.forest-style {
    color: #ffffff; /* 白色文字 */
    text-shadow: 
        0 0 12px rgba(255, 255, 255, 1.0), /* 白色内发光 */
        0 0 20px rgba(0, 255, 136, 0.8), /* 绿色外发光 */
        0 0 30px rgba(139, 69, 19, 0.5); /* 棕色光晕 */
}

/* 调整标题和关闭按钮的位置，为居中的当前副本显示腾出空间 */
.dungeon-panel-header h3 {
    margin-right: 100px;
}

.dungeon-panel-header .close-btn {
    margin-left: 100px;
}

.dungeon-panel h3 {
    color: #00ffff;
    text-align: center;
    margin: 0;
    font-size: 32px;
    text-shadow: 0 0 20px rgba(0, 255, 255, 0.8);
    animation: glowPulse 3s ease-in-out infinite;
}

.dungeon-panel-content {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 60px;
    padding: 30px;
    position: relative;
}

.dungeon-panel-content::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    height: 80%;
    background: 
        radial-gradient(circle at 50% 50%, rgba(0, 255, 255, 0.02) 0%, transparent 70%);
    pointer-events: none;
    animation: contentGlow 4s ease-in-out infinite;
}

@keyframes contentGlow {
    0%, 100% {
        opacity: 0.3;
        transform: translate(-50%, -50%) scale(1);
    }
    50% {
        opacity: 0.7;
        transform: translate(-50%, -50%) scale(1.1);
    }
}

.dungeon-panel-footer {
    display: flex;
    justify-content: center;
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid rgba(0, 255, 255, 0.2);
}

.dungeon-panel-footer .primary-btn {
    padding: 12px 30px;
    font-size: 16px;
    font-weight: bold;
    letter-spacing: 2px;
    text-transform: uppercase;
    background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 100%);
    color: #00ffff;
    border: 2px solid #00ffff;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 
        0 0 5px rgba(0, 255, 255, 0.3),
        0 0 10px rgba(0, 255, 255, 0.2),
        inset 0 0 20px rgba(0, 255, 255, 0.05);
    text-shadow: 
        0 0 5px rgba(0, 255, 255, 0.8),
        0 0 10px rgba(0, 255, 255, 0.5),
        0 0 20px rgba(0, 255, 255, 0.3);
    position: relative;
    overflow: hidden;
}

.dungeon-panel-footer .primary-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(0, 255, 255, 0.2),
        transparent
    );
    transition: left 0.5s ease;
}

.dungeon-panel-footer .primary-btn:hover::before {
    left: 100%;
}

.dungeon-panel-footer .primary-btn:hover {
    background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%);
    border-color: #ff00ff;
    color: #ff00ff;
    box-shadow: 
        0 0 10px rgba(255, 0, 255, 0.5),
        0 0 20px rgba(255, 0, 255, 0.3),
        0 0 40px rgba(255, 0, 255, 0.2),
        inset 0 0 30px rgba(255, 0, 255, 0.1);
    text-shadow: 
        0 0 5px rgba(255, 0, 255, 0.8),
        0 0 10px rgba(255, 0, 255, 0.5),
        0 0 20px rgba(255, 0, 255, 0.3);
    transform: translateY(-2px);
}

.dungeon-panel-footer .primary-btn:active {
    transform: translateY(0);
    box-shadow: 
        0 0 5px rgba(255, 0, 255, 0.3),
        inset 0 0 10px rgba(255, 0, 255, 0.2);
}

.close-btn {
    background: 
        linear-gradient(135deg, rgba(0, 255, 255, 0.1) 0%, rgba(0, 128, 255, 0.05) 100%);
    border: 2px solid #00ffff;
    color: #00ffff;
    font-size: 32px;
    width: 55px;
    height: 55px;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    text-shadow: 0 0 15px rgba(0, 255, 255, 1);
    box-shadow: 
        0 0 20px rgba(0, 255, 255, 0.6),
        0 0 40px rgba(0, 255, 255, 0.3),
        inset 0 0 15px rgba(0, 255, 255, 0.1);
    position: relative;
    overflow: hidden;
}

.close-btn::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(
        45deg,
        transparent 30%,
        rgba(0, 255, 255, 0.1) 50%,
        transparent 70%
    );
    animation: closeBtnScan 3s linear infinite;
}

@keyframes closeBtnScan {
    0% {
        transform: translateX(-50%) translateY(-50%) rotate(0deg);
    }
    100% {
        transform: translateX(-50%) translateY(-50%) rotate(360deg);
    }
}

.close-btn:hover {
    background: 
        linear-gradient(135deg, rgba(0, 255, 255, 0.25) 0%, rgba(0, 128, 255, 0.15) 100%);
    box-shadow: 
        0 0 30px rgba(0, 255, 255, 1),
        0 0 60px rgba(0, 255, 255, 0.6),
        inset 0 0 25px rgba(0, 255, 255, 0.2);
    transform: scale(1.15) rotate(90deg);
    border-color: #ffffff;
    color: #ffffff;
    text-shadow: 0 0 20px rgba(255, 255, 255, 1);
}

.dungeon-option {
    padding: 12px;
    margin-bottom: 10px;
    background: 
        linear-gradient(135deg, rgba(0, 255, 255, 0.08) 0%, rgba(0, 128, 255, 0.03) 100%),
        radial-gradient(circle at 50% 50%, rgba(0, 255, 255, 0.05) 0%, transparent 100%);
    border: 2px solid rgba(0, 255, 255, 0.4);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    text-align: center;
    overflow: hidden;
    width: 240px;
    position: relative;
    max-width: 240px;
    box-shadow: 
        0 0 20px rgba(0, 255, 255, 0.2),
        0 5px 15px rgba(0, 0, 0, 0.3),
        inset 0 0 20px rgba(0, 255, 255, 0.05);
}

.dungeon-option::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(
        45deg,
        transparent 30%,
        rgba(0, 255, 255, 0.05) 50%,
        transparent 70%
    );
    animation: optionScan 4s linear infinite;
    pointer-events: none;
}

@keyframes optionScan {
    0% {
        transform: translateX(-50%) translateY(-50%) rotate(0deg);
    }
    100% {
        transform: translateX(-50%) translateY(-50%) rotate(360deg);
    }
}

.dungeon-option img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 8px;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: 
        0 0 15px rgba(0, 255, 255, 0.3),
        0 3px 10px rgba(0, 0, 0, 0.3);
    border: 2px solid rgba(0, 255, 255, 0.2);
}

.dungeon-option-text {
    margin-top: 8px;
    color: #00ffff;
    font-size: 14px;
    font-weight: bold;
    text-shadow: 
        0 0 10px rgba(0, 255, 255, 0.8),
        0 0 20px rgba(0, 255, 255, 0.5);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    letter-spacing: 1px;
}

.dungeon-highest-wave {
    margin-top: 5px;
    color: #00ff88;
    font-size: 12px;
    font-weight: bold;
    text-shadow: 
        0 0 10px rgba(0, 255, 136, 0.8),
        0 0 20px rgba(0, 255, 136, 0.5);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    text-align: center;
    letter-spacing: 0.5px;
}

.dungeon-option:hover {
    background: 
        linear-gradient(135deg, rgba(0, 255, 255, 0.2) 0%, rgba(0, 128, 255, 0.1) 100%),
        radial-gradient(circle at 50% 50%, rgba(0, 255, 255, 0.1) 0%, transparent 100%);
    border-color: #00ffff;
    box-shadow: 
        0 0 40px rgba(0, 255, 255, 0.6),
        0 0 80px rgba(0, 255, 255, 0.4),
        0 10px 30px rgba(0, 0, 0, 0.5),
        inset 0 0 30px rgba(0, 255, 255, 0.1);
    transform: translateY(-5px) scale(1.05);
}

.dungeon-option:hover img {
    transform: scale(1.08);
    box-shadow: 
        0 0 25px rgba(0, 255, 255, 0.5),
        0 5px 20px rgba(0, 0, 0, 0.5);
    border-color: rgba(0, 255, 255, 0.4);
}

.dungeon-option:hover .dungeon-option-text {
    color: #ffffff;
    text-shadow: 
        0 0 15px rgba(255, 255, 255, 1),
        0 0 30px rgba(0, 255, 255, 0.8);
    transform: translateY(-2px);
}

.dungeon-option:hover .dungeon-highest-wave {
    color: #00ffaa;
    text-shadow: 
        0 0 15px rgba(0, 255, 170, 1),
        0 0 30px rgba(0, 255, 136, 0.8);
    transform: translateY(-2px);
}

/* 石炭星副本锁定覆盖层 */
.lock-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path d="M50 20c-12 0-22 10-22 22v15h44v-15c0-12-10-22-22-22zm-12 37v20c0 6.6 5.4 12 12 12s12-5.4 12-12v-20h-24z" fill="none" stroke="%23888888" stroke-width="6" stroke-linecap="round" stroke-linejoin="round"/></svg>');
    background-size: 60% 60%;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 5px;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 10;
    pointer-events: none;
}

.dungeon-option.locked .lock-overlay {
    opacity: 1;
}

.dungeon-option.locked {
    cursor: not-allowed;
}

/* 解锁条件提示 - 原始森林风格 */
.unlock-condition {
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    background: 
        linear-gradient(135deg, rgba(30, 60, 30, 0.98) 0%, rgba(20, 40, 20, 0.98) 100%);
    color: #ffffff;
    font-size: 10px;
    font-weight: bold;
    padding: 8px 12px;
    border: 2px solid #00ff88;
    border-radius: 8px;
    box-shadow: 
        0 0 20px rgba(0, 255, 136, 0.6),
        0 0 40px rgba(0, 255, 136, 0.3),
        0 3px 10px rgba(0, 0, 0, 0.5),
        inset 0 0 15px rgba(0, 255, 136, 0.1);
    text-shadow: 
        0 0 10px rgba(0, 255, 136, 1),
        0 0 20px rgba(0, 255, 136, 0.8);
    opacity: 0;
    transition: opacity 0.3s ease, transform 0.3s ease;
    z-index: 20;
    pointer-events: none;
    white-space: nowrap;
    text-align: center;
    letter-spacing: 0.5px;
}

.dungeon-option.locked .unlock-condition {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.dungeon-option.locked:hover .unlock-condition {
    transform: translateX(-50%) translateY(-2px);
    box-shadow: 0 0 20px rgba(0, 255, 136, 0.7),
                0 0 30px rgba(139, 69, 19, 0.4);
}

/* 隐藏类 */
.hidden {
    display: none;
}

#coin-draw-ten-btn::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(
        45deg,
        transparent 0%,
        rgba(255, 69, 0, 0.3) 50%,
        transparent 100%
    );
    transform: rotate(-30deg);
    animation: coinDrawTenShine 2.5s linear infinite;
}

#coin-draw-ten-btn:active {
    animation: coinDrawTenClick 0.3s ease-in-out;
}

/* 金币10连抽按钮脉冲动画 */
@keyframes coinDrawTenPulse {
    0% {
        box-shadow: 
            0 0 15px rgba(255, 69, 0, 0.5),
            inset 0 0 15px rgba(255, 69, 0, 0.1);
    }
    50% {
        box-shadow: 
            0 0 25px rgba(255, 69, 0, 0.7),
            0 0 40px rgba(255, 0, 0, 0.3),
            inset 0 0 15px rgba(255, 69, 0, 0.1);
    }
    100% {
        box-shadow: 
            0 0 15px rgba(255, 69, 0, 0.5),
            inset 0 0 15px rgba(255, 69, 0, 0.1);
    }
}

/* 金币10连抽按钮内部流动光效 */
@keyframes coinDrawTenShine {
    0% {
        transform: translateX(-100%) translateY(-100%) rotate(-30deg);
    }
    100% {
        transform: translateX(100%) translateY(100%) rotate(-30deg);
    }
}

/* 金币10连抽按钮点击动画 */
@keyframes coinDrawTenClick {
    0% {
        transform: scale(1);
        box-shadow: 
            0 0 25px rgba(255, 69, 0, 0.7),
            0 0 40px rgba(255, 0, 0, 0.5),
            inset 0 0 20px rgba(255, 69, 0, 0.2);
    }
    50% {
        transform: scale(0.95);
        box-shadow: 
            0 0 40px rgba(255, 69, 0, 0.9),
            0 0 60px rgba(255, 0, 0, 0.7),
            inset 0 0 30px rgba(255, 69, 0, 0.3);
    }
    100% {
        transform: scale(1);
        box-shadow: 
            0 0 25px rgba(255, 69, 0, 0.7),
            0 0 40px rgba(255, 0, 0, 0.5),
            inset 0 0 20px rgba(255, 69, 0, 0.2);
    }
}

/* 清除所有数据按钮样式 */
#clear-data-btn {
    background: linear-gradient(135deg, rgba(255, 0, 0, 0.1) 0%, rgba(139, 0, 0, 0.1) 100%) !important;
    border: 2px solid #ff0000 !important;
    color: #ff0000 !important;
    text-shadow: 0 0 10px rgba(255, 0, 0, 0.8) !important;
    position: relative;
    overflow: hidden;
    box-shadow: 
        0 0 15px rgba(255, 0, 0, 0.5),
        inset 0 0 15px rgba(255, 0, 0, 0.1) !important;
    animation: clearDataWarning 1.5s ease-in-out infinite;
    /* 确保覆盖所有继承的属性 */
    background-color: transparent !important;
    text-shadow: 0 0 10px rgba(255, 0, 0, 0.8), 0 0 20px rgba(255, 0, 0, 0.6), 0 0 30px rgba(255, 0, 0, 0.4) !important;
}

#clear-data-btn:hover {
    background: linear-gradient(135deg, rgba(255, 0, 0, 0.2) 0%, rgba(139, 0, 0, 0.2) 100%) !important;
    box-shadow: 
        0 0 25px rgba(255, 0, 0, 0.7),
        0 0 40px rgba(139, 0, 0, 0.5),
        inset 0 0 20px rgba(255, 0, 0, 0.2) !important;
    transform: translateY(-2px);
}

#clear-data-btn::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(
        45deg,
        transparent 0%,
        rgba(255, 0, 0, 0.3) 50%,
        transparent 100%
    );
    transform: rotate(45deg);
    animation: clearDataShine 2s linear infinite;
}

#clear-data-btn:active {
    animation: clearDataClick 0.3s ease-in-out;
}

/* 清除数据按钮警告动画 */
@keyframes clearDataWarning {
    0% {
        box-shadow: 
            0 0 15px rgba(255, 0, 0, 0.5),
            inset 0 0 15px rgba(255, 0, 0, 0.1);
    }
    50% {
        box-shadow: 
            0 0 25px rgba(255, 0, 0, 0.7),
            0 0 40px rgba(139, 0, 0, 0.3),
            inset 0 0 15px rgba(255, 0, 0, 0.1);
    }
    100% {
        box-shadow: 
            0 0 15px rgba(255, 0, 0, 0.5),
            inset 0 0 15px rgba(255, 0, 0, 0.1);
    }
}

/* 清除数据按钮内部流动光效 */
@keyframes clearDataShine {
    0% {
        transform: translateX(-100%) translateY(-100%) rotate(45deg);
    }
    100% {
        transform: translateX(100%) translateY(100%) rotate(45deg);
    }
}

/* 清除数据按钮点击动画 */
@keyframes clearDataClick {
    0% {
        transform: scale(1);
        box-shadow: 
            0 0 25px rgba(255, 0, 0, 0.7),
            0 0 40px rgba(139, 0, 0, 0.5),
            inset 0 0 20px rgba(255, 0, 0, 0.2);
    }
    50% {
        transform: scale(0.95);
        box-shadow: 
            0 0 40px rgba(255, 0, 0, 0.9),
            0 0 60px rgba(139, 0, 0, 0.7),
            inset 0 0 30px rgba(255, 0, 0, 0.3);
    }
    100% {
        transform: scale(1);
        box-shadow: 
            0 0 25px rgba(255, 0, 0, 0.7),
            0 0 40px rgba(139, 0, 0, 0.5),
            inset 0 0 20px rgba(255, 0, 0, 0.2);
    }
}

/* 抽卡时的全屏动画效果 */
@keyframes cardDrawFlash {
    0% {
        opacity: 0;
    }
    50% {
        opacity: 0.3;
    }
    100% {
        opacity: 0;
    }
}

.card-draw-flash {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at center, rgba(255, 215, 0, 0.8) 0%, transparent 70%);
    pointer-events: none;
    z-index: 10000;
    animation: cardDrawFlash 0.6s ease-out;
}

/* 10连抽时的全屏动画效果 */
@keyframes cardDrawTenFlash {
    0% {
        opacity: 0;
        transform: scale(0.8);
        background: radial-gradient(circle at center, rgba(255, 69, 0, 0) 0%, transparent 0%);
        box-shadow: 0 0 0 rgba(255, 69, 0, 0);
    }
    20% {
        opacity: 0.8;
        transform: scale(1.1);
        background: radial-gradient(circle at center, rgba(255, 69, 0, 0.8) 0%, rgba(255, 140, 0, 0.6) 30%, transparent 70%);
        box-shadow: 0 0 60px rgba(255, 69, 0, 0.8), 0 0 120px rgba(255, 140, 0, 0.6);
    }
    40% {
        opacity: 0.6;
        transform: scale(1.05);
        background: radial-gradient(circle at center, rgba(255, 140, 0, 0.7) 0%, rgba(255, 215, 0, 0.5) 30%, transparent 70%);
        box-shadow: 0 0 80px rgba(255, 140, 0, 0.7), 0 0 160px rgba(255, 215, 0, 0.5);
    }
    60% {
        opacity: 0.4;
        transform: scale(1);
        background: radial-gradient(circle at center, rgba(255, 215, 0, 0.6) 0%, rgba(255, 140, 0, 0.4) 30%, transparent 70%);
        box-shadow: 0 0 60px rgba(255, 215, 0, 0.6), 0 0 120px rgba(255, 140, 0, 0.4);
    }
    80% {
        opacity: 0.2;
        transform: scale(0.95);
        background: radial-gradient(circle at center, rgba(255, 69, 0, 0.5) 0%, rgba(255, 69, 0, 0.3) 30%, transparent 70%);
        box-shadow: 0 0 40px rgba(255, 69, 0, 0.5), 0 0 80px rgba(255, 69, 0, 0.3);
    }
    100% {
        opacity: 0;
        transform: scale(0.9);
        background: radial-gradient(circle at center, rgba(255, 69, 0, 0) 0%, transparent 0%);
        box-shadow: 0 0 0 rgba(255, 69, 0, 0);
    }
}

.card-draw-ten-flash {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 10000;
    animation: cardDrawTenFlash 0.6s ease-out forwards;
    overflow: hidden;
}

/* 10连抽动画的中心闪光效果 */
.card-draw-ten-flash::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0) 70%);
    border-radius: 50%;
    transform: translate(-50%, -50%) scale(0);
    animation: tenFlashPulse 0.6s ease-out forwards;
}

@keyframes tenFlashPulse {
    0% {
        transform: translate(-50%, -50%) scale(0);
        opacity: 1;
    }
    50% {
        transform: translate(-50%, -50%) scale(3);
        opacity: 0.6;
    }
    100% {
        transform: translate(-50%, -50%) scale(6);
        opacity: 0;
    }
}

/* 10连抽动画的光线效果 */
.card-draw-ten-flash::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 400px;
    height: 400px;
    background: conic-gradient(from 0deg, transparent 0deg, rgba(255, 215, 0, 0.3) 45deg, transparent 90deg, rgba(255, 140, 0, 0.3) 135deg, transparent 180deg, rgba(255, 69, 0, 0.3) 225deg, transparent 270deg, rgba(255, 140, 0, 0.3) 315deg, transparent 360deg);
    border-radius: 50%;
    transform: translate(-50%, -50%) scale(0) rotate(0deg);
    animation: tenFlashRays 0.6s ease-out forwards;
}

@keyframes tenFlashRays {
    0% {
        transform: translate(-50%, -50%) scale(0) rotate(0deg);
        opacity: 1;
    }
    50% {
        transform: translate(-50%, -50%) scale(1.5) rotate(180deg);
        opacity: 0.6;
    }
    100% {
        transform: translate(-50%, -50%) scale(2) rotate(360deg);
        opacity: 0;
    }
}

/* 10连抽动画的粒子效果 */
.card-draw-ten-flash .particle {
    position: absolute;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.8) 0%, rgba(255, 215, 0, 0.6) 50%, transparent 100%);
    border-radius: 50%;
    pointer-events: none;
    animation: tenFlashParticle 0.6s ease-out forwards;
}

@keyframes tenFlashParticle {
    0% {
        opacity: 1;
        transform: scale(0);
    }
    50% {
        opacity: 0.8;
        transform: scale(1);
    }
    100% {
        opacity: 0;
        transform: scale(0.5);
    }
}

/* 高级抽卡过场动画 */
.card-draw-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: 
        radial-gradient(circle at center, 
            rgba(0, 255, 255, 0.15) 0%, 
            rgba(147, 112, 219, 0.2) 20%, 
            rgba(255, 105, 180, 0.15) 40%, 
            rgba(0, 0, 0, 0.9) 70%, 
            rgba(0, 0, 0, 0.95) 100%),
        repeating-linear-gradient(
            45deg,
            transparent, 
            transparent 20px,
            rgba(147, 112, 219, 0.05) 20px,
            rgba(147, 112, 219, 0.05) 40px
        );
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 11000;
    backdrop-filter: blur(10px);
    animation: drawOverlayGlow 4s ease-in-out infinite;
}

/* 单抽卡片容器 */
.card-container {
    perspective: 1000px;
    position: relative;
    animation: cardFloat 3s ease-in-out;
}

/* 10连抽卡片网格 */
.card-grid-container {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 46px;
    padding: 92px;
    background: 
        radial-gradient(circle at center, 
            rgba(147, 112, 219, 0.25) 0%, 
            rgba(0, 0, 0, 0.6) 100%),
        linear-gradient(135deg, 
            rgba(147, 112, 219, 0.15) 0%, 
            rgba(255, 105, 180, 0.15) 50%, 
            rgba(0, 255, 255, 0.15) 100%),
        repeating-linear-gradient(
            45deg,
            transparent, 
            transparent 30px,
            rgba(147, 112, 219, 0.08) 30px,
            rgba(147, 112, 219, 0.08) 60px
        );
    border-radius: 50px;
    border: 5px solid #9370db;
    box-shadow: 
        0 0 80px rgba(147, 112, 219, 0.7),
        0 0 160px rgba(255, 105, 180, 0.5),
        0 0 200px rgba(0, 255, 255, 0.3),
        inset 0 0 80px rgba(147, 112, 219, 0.25);
    animation: cardGridAppear 1.5s ease-out, cardGridPulse 3s ease-in-out infinite;
    backdrop-filter: blur(20px);
    transform: translateZ(0); /* 启用硬件加速 */
    will-change: transform, box-shadow; /* 提示浏览器优化渲染 */
    perspective: 1000px; /* 为子元素提供透视效果 */
}

/* 抽卡卡片 */
/* .card class is now defined later with perspective property */

/* 卡片正反面 */
.card-front, .card-back {
    width: 100%;
    height: 100%;
    position: absolute;
    backface-visibility: hidden;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 35px;
    box-shadow: 
        0 0 40px rgba(0, 255, 255, 0.4),
        0 20px 80px rgba(0, 0, 0, 0.7),
        inset 0 0 40px rgba(0, 255, 255, 0.15),
        inset 0 0 100px rgba(147, 112, 219, 0.08);
    border: 4px solid transparent;
    border-image: linear-gradient(45deg, #00ffff, #8000ff, #ff00ff, #00ffff, #8000ff) 1;
    background-image: 
        radial-gradient(circle at 20% 50%, rgba(0, 255, 255, 0.2) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(128, 0, 255, 0.2) 0%, transparent 50%),
        radial-gradient(circle at 40% 80%, rgba(255, 0, 255, 0.2) 0%, transparent 50%),
        linear-gradient(135deg, #1a1f2e 0%, #2c3448 50%, #3a4358 100%),
        repeating-linear-gradient(
            45deg,
            transparent, 
            transparent 10px,
            rgba(147, 112, 219, 0.05) 10px,
            rgba(147, 112, 219, 0.05) 20px
        );
    position: relative;
    overflow: hidden;
    transform-style: preserve-3d;
    transition: all 0.3s ease;
    animation: cardBorderGlow 2.5s ease-in-out infinite;
    transform: translateZ(0); /* 启用硬件加速 */
    will-change: transform, opacity; /* 提示浏览器优化渲染 */
}

/* 卡牌背景动态光效 */
.card-front::before, .card-back::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(
        45deg, 
        transparent 0%, 
        rgba(0, 255, 255, 0.1) 25%, 
        transparent 50%, 
        rgba(128, 0, 255, 0.1) 75%, 
        transparent 100%
    );
    animation: cardBackgroundShine 3s ease-in-out infinite;
    pointer-events: none;
    z-index: 0;
}

/* 卡牌背景装饰网格 */
.card-front::after, .card-back::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
        linear-gradient(rgba(0, 255, 255, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 255, 255, 0.05) 1px, transparent 1px);
    background-size: 20px 20px;
    pointer-events: none;
    z-index: 1;
}

/* 卡牌内部内容容器，确保在光效之上 */
.card-front > *, .card-back > * {
    position: relative;
    z-index: 2;
}

/* 卡片图标 */
.card-front .plant-icon, .card-back .plant-icon {
    width: 300px;
    height: 250px;
    margin: 5px auto;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    animation: cardIconGlow 2s ease-in-out infinite;
}

/* 卡片名称 */
.card-front .plant-name, .card-back .plant-name {
    font-size: 28px;
    font-weight: bold;
    color: #00ffff;
    margin-bottom: 12px;
    text-shadow: 
        0 0 10px rgba(0, 255, 255, 0.8),
        0 0 20px rgba(0, 255, 255, 0.5),
        0 0 30px rgba(0, 255, 255, 0.3);
    animation: textGlow 2s ease-in-out infinite;
    letter-spacing: 1px;
    font-family: 'Arial Black', sans-serif;
}

/* 卡片数量显示 - 右下角 */
.card-front .card-count {
    position: absolute;
    bottom: 12px;
    right: 12px;
    font-size: 32px;
    font-weight: bold;
    color: #ffffff;
    text-shadow: 
        0 0 10px rgba(255, 255, 255, 0.8),
        0 0 20px rgba(255, 255, 255, 0.5);
    background-color: rgba(0, 0, 0, 0.7);
    padding: 5px 12px;
    border-radius: 8px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.3);
    z-index: 10;
}

/* 卡片阶数显示 - 左下角 */
.card-front .card-tier {
    position: absolute;
    bottom: 5px;
    left: 5px;
    font-size: 14px;
    font-weight: bold;
    color: #ffd700;
    text-shadow: 0 0 5px rgba(255, 215, 0, 0.8);
    background-color: rgba(0, 0, 0, 0.5);
    padding: 2px 5px;
    border-radius: 3px;
    z-index: 10;
}

/* 卡片背面 */
.card-back {
    transform: rotateY(0deg);
    backface-visibility: hidden;
    position: absolute;
    width: 100%;
    height: 100%;
    animation: cardBackFlip 1.5s ease-in-out forwards;
    z-index: 1;
    background-image: 
        radial-gradient(circle at center, rgba(128, 0, 255, 0.3) 0%, transparent 70%),
        linear-gradient(45deg, #1a0033 0%, #2a004d 30%, #1a0033 60%, #0d001a 100%),
        repeating-linear-gradient(
            45deg, 
            transparent, 
            transparent 10px, 
            rgba(0, 255, 255, 0.1) 10px, 
            rgba(0, 255, 255, 0.1) 20px
        );
    border-image: linear-gradient(45deg, #8000ff, #00ffff, #8000ff) 1;
    box-shadow: 
        0 0 30px rgba(128, 0, 255, 0.4),
        0 15px 50px rgba(0, 0, 0, 0.6),
        inset 0 0 30px rgba(128, 0, 255, 0.15);
}

/* 卡片背面装饰元素 */
.card-back::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 80%;
    height: 80%;
    transform: translate(-50%, -50%);
    background: 
        radial-gradient(circle at 50% 50%, rgba(0, 255, 255, 0.2) 0%, transparent 50%),
        repeating-radial-gradient(
            circle at 50% 50%,
            transparent,
            transparent 20px,
            rgba(0, 255, 255, 0.05) 20px,
            rgba(0, 255, 255, 0.05) 40px
        );
    border-radius: 50%;
    animation: cardBackPulse 3s ease-in-out infinite;
    z-index: 0;
}

/* 卡片背面脉冲动画 */
@keyframes cardBackPulse {
    0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.5; }
    50% { transform: translate(-50%, -50%) scale(1.1); opacity: 0.8; }
}

/* 卡片正面 */
.card-front {
    transform: rotateY(180deg);
    backface-visibility: hidden;
    position: absolute;
    width: 100%;
    height: 100%;
    animation: cardFrontFlip 1.5s ease-in-out forwards;
    opacity: 0;
    z-index: 2;
    transition: all 0.3s ease;
}

/* 超级升星卡特效 */
.card-front.card-superLevelUp {
    background-image: 
        radial-gradient(circle at center, rgba(128, 0, 255, 0.4) 0%, transparent 70%),
        linear-gradient(135deg, #330066 0%, #4d0099 30%, #330066 60%, #1a0033 100%);
    border-image: linear-gradient(45deg, #ff00ff, #8000ff, #ff00ff) 1;
    box-shadow: 
        0 0 40px rgba(128, 0, 255, 0.6),
        0 20px 60px rgba(0, 0, 0, 0.7),
        inset 0 0 40px rgba(128, 0, 255, 0.2);
}

.card-front.card-superLevelUp::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle at center, rgba(255, 0, 255, 0.3) 0%, transparent 50%);
    animation: superLevelUpGlow 2s ease-in-out infinite alternate;
}

@keyframes superLevelUpGlow {
    0% { opacity: 0.5; transform: translate(-50%, -50%) scale(1); }
    100% { opacity: 0.8; transform: translate(-50%, -50%) scale(1.1); }
}

/* 升星卡特效 */
.card-front.card-levelUp {
    background-image: 
        radial-gradient(circle at center, rgba(0, 128, 255, 0.4) 0%, transparent 70%),
        linear-gradient(135deg, #003366 0%, #004d99 30%, #003366 60%, #001a33 100%);
    border-image: linear-gradient(45deg, #00ffff, #0080ff, #00ffff) 1;
    box-shadow: 
        0 0 40px rgba(0, 128, 255, 0.6),
        0 20px 60px rgba(0, 0, 0, 0.7),
        inset 0 0 40px rgba(0, 128, 255, 0.2);
}

/* 不同类型卡牌的高级背景 */
.card-front.card-energy100, 
.card-front.card-healSingle {
    background-image: 
        radial-gradient(circle at 20% 80%, rgba(255, 255, 255, 0.3) 0%, transparent 50%),
        linear-gradient(135deg, #f0f0f0 0%, #e0e0e0 30%, #d0d0d0 60%, #c0c0c0 100%);
    border-image: linear-gradient(45deg, #ffffff, #00ffff, #ffffff) 1;
}

.card-front.card-energy300, 
.card-front.card-healAll, 
.card-front.card-timeStop {
    background-image: 
        radial-gradient(circle at 80% 20%, rgba(0, 255, 0, 0.3) 0%, transparent 50%),
        linear-gradient(135deg, #003300 0%, #004d00 30%, #003300 60%, #001a00 100%);
    border-image: linear-gradient(45deg, #00ff00, #008000, #00ff00) 1;
}

.card-front.card-chiYanDaoshou, .card-front.card-cherryBomb, .card-front.card-jalapeno {
    background-image: 
        radial-gradient(circle at center, rgba(255, 69, 0, 0.4) 0%, transparent 70%),
        linear-gradient(135deg, #330000 0%, #4d0000 30%, #330000 60%, #1a0000 100%);
    border-image: linear-gradient(45deg, #ff4500, #ff0000, #ff4500) 1;
    box-shadow: 
        0 0 40px rgba(255, 69, 0, 0.6),
        0 20px 60px rgba(0, 0, 0, 0.7),
        inset 0 0 40px rgba(255, 69, 0, 0.2);
}

/* 增强卡片翻转效果，确保正面完全可见 */
.card {
    transform-style: preserve-3d;
    width: 230px;
    height: 276px;
    perspective: 2300px; /* 等比例放大透视效果 */
    position: relative;
    transform: translateZ(0); /* 启用硬件加速 */
    will-change: transform; /* 提示浏览器优化渲染 */
    backface-visibility: hidden; /* 减少渲染开销 */
}

/* 卡片容器动画 - 单抽卡片 */
.card-container .card {
    animation: cardFlip 1.5s ease-in-out forwards;
}

/* 卡片容器动画 - 10连抽卡片 */
.card-grid-container .card {
    animation: cardFlip 1.5s ease-in-out forwards;
}

/* 为10连抽卡片添加不同的动画延迟 */
/* 所有卡片使用相同的动画延迟，确保翻牌动作一致 */
.card-grid-container .card {
}

/* 所有卡片的正反面使用相同的动画延迟 */
.card-grid-container .card .card-back, 
.card-grid-container .card .card-front { animation-delay: 0.0s; }

/* 确保抽卡动画中的卡片样式与背包中的一致 */
.card-front .plant-name,
.card-back .plant-name {
    font-size: 12px;
    font-weight: bold;
    color: #00ffff;
    margin-bottom: 5px;
    text-shadow: 0 0 5px rgba(0, 255, 255, 0.5);
    line-height: 1.2;
}

.card-front .plant-cost {
    font-size: 30px;
    color: #00ffff;
    font-weight: bold;
    text-shadow: 
        0 0 15px rgba(0, 255, 255, 0.8),
        0 0 30px rgba(0, 255, 255, 0.5);
    margin-bottom: 12px;
    animation: textGlow 2s ease-in-out infinite;
    background-color: rgba(0, 255, 255, 0.1);
    padding: 5px 15px;
    border-radius: 10px;
    border: 2px solid rgba(0, 255, 255, 0.3);
    box-shadow: 0 0 20px rgba(0, 255, 255, 0.3);
}

/* 点击关闭提示动画 */
@keyframes pulse {
    0% { opacity: 0.7; }
    50% { opacity: 1; }
    100% { opacity: 0.7; }
}

/* 卡牌背景动态光效动画 */
@keyframes cardBackgroundShine {
    0% { transform: rotate(0deg) translate(0, 0); }
    25% { transform: rotate(90deg) translate(-10%, -10%); }
    50% { transform: rotate(180deg) translate(-20%, 0); }
    75% { transform: rotate(270deg) translate(-10%, 10%); }
    100% { transform: rotate(360deg) translate(0, 0); }
}

/* 10连抽卡片图标 */
.card-grid-container .card-front .plant-icon, .card-grid-container .card-back .plant-icon {
    width: 138px;
    height: 115px;
    margin: 12px auto;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    animation: cardIconGlow 2s ease-in-out infinite;
    box-shadow: 0 0 30px rgba(0, 255, 255, 0.5);
    border-radius: 10px;
    background-color: rgba(0, 255, 255, 0.1);
    border: 2px solid rgba(0, 255, 255, 0.3);
}

/* 单抽卡片图标 - 放大5倍 */
.card-container .card-front .plant-icon, .card-container .card-back .plant-icon {
    width: 300px;
    height: 250px;
    margin: 5px auto;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    animation: cardIconGlow 2s ease-in-out infinite;
}

/* 卡片名称 */
.card-front .plant-name, .card-back .plant-name {
    font-size: 12px;
    font-weight: bold;
    color: #00ffff;
    margin-bottom: 5px;
    text-shadow: 0 0 5px rgba(0, 255, 255, 0.5);
}

/* 不同类型卡牌的背景颜色（复用背包卡牌样式） - 提高优先级确保正确显示 */
.card-front.card-energy100, 
.card-front.card-healSingle {
    background-color: rgba(255, 255, 255, 0.9) !important;
    background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(220, 220, 220, 0.9) 100%) !important;
    color: #333 !important;
}

.card-front.card-energy300, 
.card-front.card-healAll, 
.card-front.card-timeStop {
    background-color: rgba(0, 255, 0, 0.9) !important;
    background-image: linear-gradient(135deg, rgba(0, 255, 0, 0.9) 0%, rgba(0, 200, 0, 0.9) 100%) !important;
    color: #fff !important;
}

.card-front.card-peashooter, 
.card-front.card-sunflower, 
.card-front.card-wallnut {
    background-color: rgba(0, 0, 255, 0.9) !important;
    background-image: linear-gradient(135deg, rgba(0, 0, 255, 0.9) 0%, rgba(0, 0, 200, 0.9) 100%) !important;
    color: #fff !important;
}

.card-front.card-chiYanDaoshou, .card-front.card-cherryBomb, .card-front.card-jalapeno {
    background-color: rgba(165, 42, 42, 0.9) !important;
    background-image: 
        radial-gradient(circle at center, rgba(255, 69, 0, 0.4) 0%, transparent 70%),
        linear-gradient(135deg, #330000 0%, #4d0000 30%, #330000 60%, #1a0000 100%) !important;
    color: #fff !important;
}

.card-front.card-xushiJi, .card-front.card-chiying, .card-front.card-jinYuHe, .card-front.card-shiJianDaoKe {
    background-color: rgba(255, 215, 0, 0.9) !important;
    background-image: 
        radial-gradient(circle at 20% 20%, rgba(245, 158, 11, 0.5) 0%, transparent 20%),
        radial-gradient(circle at 80% 80%, rgba(245, 158, 11, 0.5) 0%, transparent 20%),
        radial-gradient(circle at 50% 50%, rgba(245, 158, 11, 0.3) 0%, transparent 50%),
        repeating-conic-gradient(from 0deg at center, transparent 0deg 15deg, rgba(245, 158, 11, 0.1) 15deg 30deg),
        linear-gradient(135deg, rgba(255, 215, 0, 0.9) 0%, rgba(200, 170, 0, 0.9) 100%) !important;
    border: 5px solid #f59e0b !important;
    color: #333 !important;
    box-shadow: 
        0 0 80px rgba(245, 158, 11, 0.8), 
        inset 0 0 40px rgba(0, 0, 0, 0.3),
        0 10px 30px rgba(0, 0, 0, 0.5),
        0 0 0 10px rgba(245, 158, 11, 0.4) !important;
}

/* 为不同颜色背景的卡牌调整文字颜色 */
.card-front.card-energy100 .plant-name,
.card-front.card-energy100 .plant-cost,
.card-front.card-healSingle .plant-name,
.card-front.card-healSingle .plant-cost,
.card-front.card-xushiJi .plant-name,
.card-front.card-xushiJi .plant-cost,
.card-front.card-chiying .plant-name,
.card-front.card-chiying .plant-cost,
.card-front.card-jinYuHe .plant-name,
.card-front.card-jinYuHe .plant-cost,
.card-front.card-shiJianDaoKe .plant-name,
.card-front.card-shiJianDaoKe .plant-cost {
    color: #333 !important;
    text-shadow: 0 0 5px rgba(0, 0, 0, 0.5) !important;
}

.card-front.card-energy300 .plant-name,
.card-front.card-energy300 .plant-cost,
.card-front.card-healAll .plant-name,
.card-front.card-healAll .plant-cost,
.card-front.card-timeStop .plant-name,
.card-front.card-timeStop .plant-cost,
.card-front.card-peashooter .plant-name,
.card-front.card-peashooter .plant-cost,
.card-front.card-sunflower .plant-name,
.card-front.card-sunflower .plant-cost,
.card-front.card-wallnut .plant-name,
.card-front.card-wallnut .plant-cost,
.card-front.card-chiYanDaoshou .plant-name,
.card-front.card-chiYanDaoshou .plant-cost,
.card-front.card-cherryBomb .plant-name,
.card-front.card-cherryBomb .plant-cost,
.card-front.card-jalapeno .plant-name,
.card-front.card-jalapeno .plant-cost {
    color: #fff !important;
    text-shadow: 0 0 5px rgba(0, 0, 0, 0.8) !important;
}

/* 10连抽卡片显示动画 */
@keyframes cardGridAppear {
    0% {
        opacity: 0;
        transform: scale(0.8);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/* 抽卡覆盖层发光动画 */
@keyframes drawOverlayGlow {
    0%, 100% {
        background: 
            radial-gradient(circle at center, 
                rgba(0, 255, 255, 0.15) 0%, 
                rgba(147, 112, 219, 0.2) 20%, 
                rgba(255, 105, 180, 0.15) 40%, 
                rgba(0, 0, 0, 0.9) 70%, 
                rgba(0, 0, 0, 0.95) 100%),
            repeating-linear-gradient(
                45deg,
                transparent, 
                transparent 20px,
                rgba(147, 112, 219, 0.05) 20px,
                rgba(147, 112, 219, 0.05) 40px
            );
        box-shadow: none;
    }
    50% {
        background: 
            radial-gradient(circle at center, 
                rgba(0, 255, 255, 0.2) 0%, 
                rgba(147, 112, 219, 0.3) 20%, 
                rgba(255, 105, 180, 0.25) 40%, 
                rgba(0, 0, 0, 0.85) 70%, 
                rgba(0, 0, 0, 0.9) 100%),
            repeating-linear-gradient(
                45deg,
                transparent, 
                transparent 20px,
                rgba(147, 112, 219, 0.1) 20px,
                rgba(147, 112, 219, 0.1) 40px
            );
        box-shadow: inset 0 0 100px rgba(147, 112, 219, 0.1);
    }
}

/* 卡片网格脉冲动画 */
@keyframes cardGridPulse {
    0%, 100% {
        box-shadow: 
            0 0 80px rgba(147, 112, 219, 0.7),
            0 0 160px rgba(255, 105, 180, 0.5),
            0 0 200px rgba(0, 255, 255, 0.3),
            inset 0 0 80px rgba(147, 112, 219, 0.25);
        transform: scale(1);
    }
    50% {
        box-shadow: 
            0 0 120px rgba(147, 112, 219, 0.9),
            0 0 240px rgba(255, 105, 180, 0.7),
            0 0 300px rgba(0, 255, 255, 0.4),
            inset 0 0 120px rgba(147, 112, 219, 0.35);
        transform: scale(1.02);
    }
}

/* 卡片边框发光动画 */
@keyframes cardBorderGlow {
    0%, 100% {
        border-image: linear-gradient(45deg, #00ffff, #8000ff, #ff00ff, #00ffff, #8000ff) 1;
        box-shadow: 
            0 0 40px rgba(0, 255, 255, 0.4),
            0 20px 80px rgba(0, 0, 0, 0.7),
            inset 0 0 40px rgba(0, 255, 255, 0.15),
            inset 0 0 100px rgba(147, 112, 219, 0.08);
    }
    50% {
        border-image: linear-gradient(45deg, #8000ff, #ff00ff, #00ffff, #8000ff, #ff00ff) 1;
        box-shadow: 
            0 0 60px rgba(0, 255, 255, 0.6),
            0 30px 120px rgba(0, 0, 0, 0.9),
            inset 0 0 60px rgba(0, 255, 255, 0.25),
            inset 0 0 150px rgba(147, 112, 219, 0.12);
    }
}

/* 文字发光动画 */
@keyframes textGlow {
    0%, 100% {
        text-shadow: 
            0 0 10px rgba(0, 255, 255, 0.8),
            0 0 20px rgba(0, 255, 255, 0.5),
            0 0 30px rgba(0, 255, 255, 0.3);
    }
    50% {
        text-shadow: 
            0 0 20px rgba(0, 255, 255, 1),
            0 0 40px rgba(0, 255, 255, 0.7),
            0 0 60px rgba(0, 255, 255, 0.5);
    }
}

/* 卡片翻转动画 - 缩放效果 */
@keyframes cardFlip {
    0% {
        transform: scale(0.5);
        opacity: 0;
    }
    50% {
        transform: scale(1.1);
        opacity: 1;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* 卡片背面翻转动画 - 优化版 */
@keyframes cardBackFlip {
    0% {
        transform: rotateY(0deg) scale(1);
        opacity: 1;
        z-index: 2;
        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.7);
    }
    25% {
        transform: rotateY(45deg) scale(1.05);
        opacity: 1;
        z-index: 2;
        box-shadow: 0 20px 80px rgba(0, 0, 0, 0.8);
    }
    49% {
        transform: rotateY(90deg) scale(0.9);
        opacity: 0.8;
        z-index: 2;
        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
    }
    50% {
        transform: rotateY(90deg) scale(0.9);
        opacity: 0;
        z-index: 0;
        box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
    }
    75% {
        transform: rotateY(135deg) scale(0.85);
        opacity: 0;
        z-index: 0;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    }
    100% {
        transform: rotateY(180deg) scale(0.8);
        opacity: 0;
        z-index: 0;
        box-shadow: 0 0 0 rgba(0, 0, 0, 0);
    }
}

/* 卡片正面翻转动画 - 优化版 */
@keyframes cardFrontFlip {
    0% {
        transform: rotateY(180deg) scale(0.8);
        opacity: 0;
        z-index: 1;
        box-shadow: 0 0 0 rgba(0, 0, 0, 0);
    }
    25% {
        transform: rotateY(135deg) scale(0.85);
        opacity: 0;
        z-index: 1;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    }
    49% {
        transform: rotateY(90deg) scale(0.9);
        opacity: 0;
        z-index: 1;
        box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
    }
    50% {
        transform: rotateY(90deg) scale(0.9);
        opacity: 0.8;
        z-index: 3;
        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
    }
    75% {
        transform: rotateY(45deg) scale(1.05);
        opacity: 1;
        z-index: 3;
        box-shadow: 0 20px 80px rgba(0, 0, 0, 0.8);
    }
    100% {
        transform: rotateY(0deg) scale(1);
        opacity: 1;
        z-index: 3;
        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.7);
    }
}

/* 卡片内容显示动画 */
@keyframes cardReveal {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

/* 卡片浮动动画 */
@keyframes cardFloat {
    0% {
        transform: translateY(-50px) scale(0.5);
        opacity: 0;
    }
    50% {
        transform: translateY(10px) scale(1.05);
        opacity: 1;
    }
    100% {
        transform: translateY(0) scale(1);
        opacity: 1;
    }
}

/* 卡片图标发光动画 */
@keyframes cardIconGlow {
    0% {
        box-shadow: 0 0 20px rgba(0, 255, 255, 0.5);
    }
    50% {
        box-shadow: 0 0 40px rgba(0, 255, 255, 0.8),
                    0 0 60px rgba(0, 255, 255, 0.5);
    }
    100% {
        box-shadow: 0 0 20px rgba(0, 255, 255, 0.5);
    }
}

/* 获得卡片脉冲动画 */
@keyframes cardObtainedPulse {
    0% {
        transform: scale(0.5);
        opacity: 0;
    }
    50% {
        transform: scale(1.2);
        opacity: 1;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* 抽卡背景光效 */
.card-draw-overlay::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(
        45deg,
        transparent 0%,
        rgba(0, 255, 255, 0.1) 50%,
        transparent 100%
    );
    transform: rotate(0deg);
    animation: cardBackgroundShine 4s linear infinite;
}

/* 背景光效动画 */
@keyframes cardBackgroundShine {
    0% {
        transform: translateX(-100%) translateY(-100%) rotate(0deg);
    }
    100% {
        transform: translateX(100%) translateY(100%) rotate(360deg);
    }
}

#wave-info {
    font-size: 28px;
    font-weight: 900;
    color: #ff0044;
    font-family: 'Orbitron', 'Arial', sans-serif;
    text-shadow: 
        0 0 20px rgba(255, 0, 68, 0.9),
        0 0 40px rgba(255, 0, 68, 0.7),
        0 0 60px rgba(255, 0, 68, 0.5),
        0 0 80px rgba(255, 0, 68, 0.3);
    padding: 15px 25px;
    background: 
        linear-gradient(135deg, rgba(255, 0, 68, 0.15) 0%, rgba(255, 0, 68, 0.05) 100%),
        radial-gradient(circle at 50% 50%, rgba(255, 0, 68, 0.1) 0%, transparent 100%);
    border-radius: 10px;
    border: 3px solid rgba(255, 0, 68, 0.7);
    margin: 5px 0;
    box-shadow: 
        0 0 30px rgba(255, 0, 68, 0.4),
        0 0 60px rgba(255, 0, 68, 0.2),
        inset 0 0 30px rgba(255, 0, 68, 0.1);
    letter-spacing: 2px;
    text-transform: uppercase;
}

#wave-info::before {
    display: none;
}

#wave-info::after {
    display: none;
}

#wave-info span {
    color: #ff0066;
    font-weight: 900;
    text-shadow: 
        0 0 25px rgba(255, 0, 102, 1),
        0 0 50px rgba(255, 0, 102, 0.8),
        0 0 75px rgba(255, 0, 102, 0.6);
}

#highest-wave-info {
    font-size: 30px;
    font-weight: 900;
    color: #00ff88;
    font-family: 'Orbitron', 'Arial', sans-serif;
    text-shadow: 
        0 0 25px rgba(0, 255, 136, 0.9),
        0 0 50px rgba(0, 255, 136, 0.7),
        0 0 75px rgba(0, 255, 136, 0.5),
        0 0 100px rgba(0, 255, 136, 0.3);
    padding: 15px 25px;
    background: 
        linear-gradient(135deg, rgba(0, 255, 136, 0.15) 0%, rgba(0, 255, 136, 0.05) 100%),
        radial-gradient(circle at 50% 50%, rgba(0, 255, 136, 0.1) 0%, transparent 100%);
    border-radius: 10px;
    border: 3px solid rgba(0, 255, 136, 0.7);
    box-shadow: 
        0 0 35px rgba(0, 255, 136, 0.4),
        0 0 70px rgba(0, 255, 136, 0.2),
        inset 0 0 35px rgba(0, 255, 136, 0.1);
    margin: 5px 0;
    letter-spacing: 2px;
    text-transform: uppercase;
}

#highest-wave-info::before {
    display: none;
}

#highest-wave-info::after {
    display: none;
}

#highest-wave-info span {
    color: #00ffaa;
    font-weight: 900;
    text-shadow: 
        0 0 30px rgba(0, 255, 170, 1),
        0 0 60px rgba(0, 255, 170, 0.8),
        0 0 90px rgba(0, 255, 170, 0.6);
}

#game-content {
    display: flex;
    gap: 20px;
}

/* 系统按钮栏样式 */
.system-buttons-bar {
    background-color: #3c3c3c;
    border-radius: 5px;
    padding: 15px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100px;
    border: 1px solid #555555;
    box-shadow: 
        0 0 15px rgba(0, 0, 0, 0.3),
        inset 0 0 10px rgba(0, 0, 0, 0.2);
    background-image: linear-gradient(135deg, #3c3c3c 0%, #4a4a4a 100%);
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
    position: relative;
}

/* 收缩状态 - 更隐蔽 */
.system-buttons-bar.collapsed {
    width: 30px;
    padding: 5px;
    background-color: transparent;
    border: 1px solid transparent;
    box-shadow: none;
    background-image: none;
}

/* 切换按钮样式 */
.toggle-bar-btn {
    background-color: #555555;
    color: #ffffff;
    border: 1px solid #777777;
    padding: 8px;
    border-radius: 3px;
    cursor: pointer;
    font-size: 14px;
    font-weight: bold;
    transition: all 0.3s ease;
    width: 100%;
    text-align: center;
}

.toggle-bar-btn:hover {
    background-color: #666666;
    border-color: #999999;
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.2);
}

/* 收缩时的切换按钮样式 - 更隐蔽 */
.system-buttons-bar.collapsed .toggle-bar-btn {
    background-color: rgba(85, 85, 85, 0.5);
    border: 1px solid rgba(119, 119, 119, 0.5);
    padding: 3px;
    font-size: 12px;
}

/* 游戏控制按钮容器 */
#game-controls {
    display: flex;
    flex-direction: column;
    gap: 8px;
    opacity: 1;
    transform: translateY(0);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    transition-delay: 0.05s;
}

/* 收缩时隐藏游戏控制按钮 */
.system-buttons-bar.collapsed #game-controls {
    opacity: 0;
    transform: translateY(-10px);
    pointer-events: none;
}

/* 排名界面样式 */
#ranking-panel {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 10000;
}

#ranking-panel.hidden {
    display: none !important;
}

#ranking-panel:not(.hidden) {
    display: flex !important;
}

.ranking-content {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    border: 2px solid rgba(0, 212, 255, 0.3);
    border-radius: 12px;
    padding: 20px;
    width: 90%;
    max-width: 800px;
    max-height: 80vh;
    overflow-y: auto;
    box-shadow: 0 0 30px rgba(0, 212, 255, 0.3);
}

.ranking-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(0, 212, 255, 0.2);
}

.ranking-header h3 {
    color: #00d4ff;
    margin: 0;
    font-size: 24px;
    text-shadow: 0 0 10px rgba(0, 212, 255, 0.5);
}

.refresh-btn {
    background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 100%);
    color: #00ffff;
    border: 2px solid #00ffff;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    font-size: 20px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 
        0 0 5px rgba(0, 255, 255, 0.3),
        0 0 10px rgba(0, 255, 255, 0.2);
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 15px;
}

.refresh-btn:hover {
    background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%);
    border-color: #ff00ff;
    color: #ff00ff;
    box-shadow: 
        0 0 10px rgba(255, 0, 255, 0.5),
        0 0 20px rgba(255, 0, 255, 0.3);
    transform: rotate(180deg);
}

.refresh-btn:active {
    transform: rotate(180deg) scale(0.95);
}

.ranking-tabs {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 8px;
    padding: 5px;
}

.ranking-tab {
    flex: 1;
    padding: 10px 20px;
    background: transparent;
    border: none;
    border-radius: 6px;
    color: #ccc;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 16px;
}

.ranking-tab:hover {
    background: rgba(0, 212, 255, 0.1);
    color: #00d4ff;
}

.ranking-tab.active {
    background: rgba(0, 212, 255, 0.3);
    color: #00d4ff;
    box-shadow: 0 0 10px rgba(0, 212, 255, 0.3);
}

.ranking-body {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    padding: 10px;
}

.ranking-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 100px;
}

.ranking-list.hidden {
    display: none !important;
}

.ranking-item {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 15px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    border-left: 4px solid rgba(0, 212, 255, 0.5);
    transition: all 0.3s ease;
}

.ranking-item:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: translateX(5px);
    box-shadow: 0 0 15px rgba(0, 212, 255, 0.2);
}

.ranking-number {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, #00d4ff 0%, #00ffff 100%);
    color: #1a1a2e;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    font-size: 16px;
    box-shadow: 0 0 10px rgba(0, 212, 255, 0.5);
}

.ranking-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(0, 212, 255, 0.2) 0%, rgba(0, 255, 255, 0.1) 100%);
    background-size: cover;
    background-position: center;
    border: 2px solid rgba(0, 212, 255, 0.3);
    box-shadow: 0 0 10px rgba(0, 212, 255, 0.3);
}

.ranking-username {
    flex: 1;
    color: #fff;
    font-size: 16px;
    font-weight: 500;
}

.ranking-wave {
    color: #00d4ff;
    font-size: 18px;
    font-weight: bold;
    min-width: 100px;
    text-align: center;
}

.ranking-time {
    color: #888;
    font-size: 14px;
    min-width: 120px;
    text-align: right;
}

.ranking-empty {
    text-align: center;
    color: #666;
    padding: 40px;
    font-size: 16px;
}

/* 切换图标 */
.toggle-icon {
    font-size: 16px;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 收缩时旋转图标 */
.system-buttons-bar.collapsed .toggle-icon {
    transform: rotate(90deg);
    opacity: 0.7;
}

.system-buttons-bar button {
    background-color: #555555;
    color: #ffffff;
    border: 1px solid #777777;
    padding: 8px 12px;
    margin: 0;
    border-radius: 3px;
    cursor: pointer;
    font-size: 12px;
    font-weight: bold;
    transition: all 0.3s ease;
    width: 100%;
    text-align: center;
}

.system-buttons-bar button:hover {
    background-color: #666666;
    border-color: #999999;
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.2);
}

.system-buttons-bar #card-draw-controls {
    margin-top: 15px;
    padding-top: 10px;
    border-top: 1px solid #555555;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.system-buttons-bar #coin-draw-btn {
    background-color: #6b5b3a;
    border-color: #ffd700;
    color: #ffd700;
}

.system-buttons-bar #coin-draw-btn:hover {
    background-color: #8a7341;
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.4);
}

.system-buttons-bar #coin-draw-ten-btn {
    background-color: #7a5c3a;
    border-color: #ff4500;
    color: #ff4500;
}

.system-buttons-bar #coin-draw-ten-btn:hover {
    background-color: #9a6e41;
    box-shadow: 0 0 10px rgba(255, 69, 0, 0.4);
}

/* 背包按钮 - 屏幕左下角 */
#inventory-btn {
    position: fixed;
    bottom: 30px;
    left: 5px;
    background-color: rgba(74, 58, 110, 0.95);
    border: 3px solid #9370db;
    padding: 12px;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.4s ease;
    z-index: 1000;
    box-shadow: 
        0 0 30px rgba(147, 112, 219, 0.5),
        0 0 60px rgba(147, 112, 219, 0.3),
        inset 0 0 20px rgba(147, 112, 219, 0.15);
    background-image: linear-gradient(135deg, rgba(74, 58, 110, 0.95) 0%, rgba(90, 74, 126, 0.95) 100%);
    animation: inventoryPulse 2s ease-in-out infinite;
    backdrop-filter: blur(5px);
    width: 70px;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 抽卡按钮 - 背包按钮右侧 */
#draw-card-btn {
    position: fixed;
    bottom: 30px;
    left: 90px;
    background-color: rgba(147, 112, 219, 0.95);
    border: 3px solid #ff69b4;
    padding: 12px;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.4s ease;
    z-index: 1000;
    box-shadow: 
        0 0 30px rgba(255, 105, 180, 0.5),
        0 0 60px rgba(147, 112, 219, 0.3),
        inset 0 0 20px rgba(255, 105, 180, 0.15);
    background-image: linear-gradient(135deg, rgba(147, 112, 219, 0.95) 0%, rgba(255, 105, 180, 0.8) 100%);
    animation: drawCardPulse 2s ease-in-out infinite;
    backdrop-filter: blur(5px);
    width: 70px;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
}

#draw-card-btn:hover {
    transform: translateY(-5px);
    box-shadow: 
        0 0 50px rgba(255, 105, 180, 0.8),
        0 0 100px rgba(147, 112, 219, 0.5),
        0 0 150px rgba(0, 255, 255, 0.3),
        inset 0 0 30px rgba(255, 105, 180, 0.25);
    border-color: #00ffff;
    background-image: linear-gradient(135deg, rgba(147, 112, 219, 0.95) 0%, rgba(0, 255, 255, 0.8) 100%);
}

#draw-card-btn:active {
    transform: translateY(0);
    box-shadow: 
        0 0 20px rgba(255, 105, 180, 0.5),
        0 0 40px rgba(147, 112, 219, 0.3),
        inset 0 0 20px rgba(255, 105, 180, 0.15);
}

/* 抽卡按钮脉动动画 */
@keyframes drawCardPulse {
    0% {
        box-shadow: 
            0 0 30px rgba(255, 105, 180, 0.5),
            0 0 60px rgba(147, 112, 219, 0.3),
            inset 0 0 20px rgba(255, 105, 180, 0.15);
    }
    50% {
        box-shadow: 
            0 0 45px rgba(255, 105, 180, 0.7),
            0 0 90px rgba(147, 112, 219, 0.5),
            inset 0 0 30px rgba(255, 105, 180, 0.25);
    }
    100% {
        box-shadow: 
            0 0 30px rgba(255, 105, 180, 0.5),
            0 0 60px rgba(147, 112, 219, 0.3),
            inset 0 0 20px rgba(255, 105, 180, 0.15);
    }
}

/* 背包按钮脉动动画 */
@keyframes inventoryPulse {
    0% {
        box-shadow: 
            0 0 30px rgba(147, 112, 219, 0.5),
            0 0 60px rgba(147, 112, 219, 0.3),
            inset 0 0 20px rgba(147, 112, 219, 0.15);
    }
    50% {
        box-shadow: 
            0 0 40px rgba(147, 112, 219, 0.7),
            0 0 80px rgba(147, 112, 219, 0.5),
            inset 0 0 20px rgba(147, 112, 219, 0.25);
    }
    100% {
        box-shadow: 
            0 0 30px rgba(147, 112, 219, 0.5),
            0 0 60px rgba(147, 112, 219, 0.3),
            inset 0 0 20px rgba(147, 112, 219, 0.15);
    }
}

/* 背包按钮悬停效果 */
#inventory-btn:hover {
    background-color: rgba(90, 74, 126, 0.98);
    border-color: #ba55d3;
    box-shadow: 
        0 0 50px rgba(186, 85, 211, 0.7),
        0 0 100px rgba(186, 85, 211, 0.5),
        inset 0 0 30px rgba(186, 85, 211, 0.3);
    transform: translateY(-8px) scale(1.15);
    animation: inventoryHoverGlow 0.6s ease-in-out;
}

/* 背包按钮悬停发光动画 */
@keyframes inventoryHoverGlow {
    0% {
        filter: brightness(1) hue-rotate(0deg);
    }
    50% {
        filter: brightness(1.3) hue-rotate(15deg);
    }
    100% {
        filter: brightness(1) hue-rotate(0deg);
    }
}

/* 背包按钮点击效果 */
#inventory-btn:active {
    transform: translateY(-4px) scale(1.08);
    box-shadow: 
        0 0 30px rgba(147, 112, 219, 0.6),
        0 0 60px rgba(147, 112, 219, 0.4),
        inset 0 0 25px rgba(147, 112, 219, 0.4);
    border-color: #9370db;
}

/* 背包按钮图标增强 */
#inventory-btn img {
    filter: drop-shadow(0 0 10px rgba(186, 85, 211, 0.8));
    transition: all 0.3s ease;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

#inventory-btn:hover img {
    filter: drop-shadow(0 0 25px rgba(186, 85, 211, 1));
    transform: scale(1.2) rotate(8deg);
}

/* 卡牌选项栏样式 */
.card-panel {
    background-color: #2d233d;
    border-radius: 5px;
    padding: 15px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 120px;
    border: 1px solid #ff00ff;
    box-shadow: 
        0 0 20px rgba(255, 0, 255, 0.2),
        inset 0 0 20px rgba(255, 0, 255, 0.1);
    background-image: linear-gradient(135deg, #2d233d 0%, #3a2c48 100%);
}

/* 左侧卡牌栏特定样式 - 绿色线条 */
#left-card-panel {
    border: 1px solid #00ff00;
    box-shadow: 
        0 0 20px rgba(0, 255, 0, 0.2),
        inset 0 0 20px rgba(0, 255, 0, 0.1);
}

#left-card-panel h3 {
    color: #00ff00;
    text-shadow: 0 0 10px rgba(0, 255, 0, 0.5);
    border-bottom: 1px solid rgba(0, 255, 0, 0.3);
}

.card-panel h3 {
    color: #ff00ff;
    font-size: 16px;
    margin: 0 0 10px 0;
    text-align: center;
    text-shadow: 0 0 10px rgba(255, 0, 255, 0.5);
    border-bottom: 1px solid rgba(255, 0, 255, 0.3);
    padding-bottom: 5px;
}

/* 卡牌选项栏中的inventory-slot样式 */
.card-panel .inventory-slot {
    width: 100%;
    height: auto;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

/* 卡牌数量为零时的样式 */
.card-panel .inventory-slot.card-empty {
    filter: grayscale(100%);
    opacity: 0.7;
    cursor: not-allowed;
}

/* 卡牌数量为零时的图标样式 */
.card-panel .inventory-slot.card-empty .plant-icon {
    filter: grayscale(100%);
    animation: none;
}

/* 卡牌数量为零时的名称和价格样式 */
.card-panel .inventory-slot.card-empty .plant-name,
.card-panel .inventory-slot.card-empty .plant-cost {
    filter: grayscale(100%);
    text-shadow: none !important;
}

/* 卡牌数量为零时的卡牌数量样式 */
.card-panel .inventory-slot.card-empty .card-count {
    filter: grayscale(100%);
}

/* 移除所有卡牌类型在数量为零时的特效 */
.card-panel .inventory-slot.card-empty.card-energy100,
.card-panel .inventory-slot.card-empty.card-energy300,
.card-panel .inventory-slot.card-empty.card-healSingle,
.card-panel .inventory-slot.card-empty.card-healAll,
.card-panel .inventory-slot.card-empty.card-timeStop,
.card-panel .inventory-slot.card-empty.card-levelUp,
.card-panel .inventory-slot.card-empty.card-superLevelUp {
    box-shadow: none !important;
    background: rgba(0, 0, 0, 0.7) !important;
    border-color: #555 !important;
    animation: none !important;
}

/* 卡牌选项栏中的植物图标样式 */
.card-panel .inventory-slot .plant-icon {
    width: 50px;
    height: 50px;
    margin: 5px auto;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    animation: cardIconGlow 2s ease-in-out infinite;
}

/* 卡牌选项栏中的植物名称样式 */
.card-panel .inventory-slot .plant-name {
    font-size: 12px;
    font-weight: bold;
    color: #00ffff;
    margin-bottom: 3px;
    text-shadow: 0 0 5px rgba(0, 255, 255, 0.5);
}

/* 卡牌选项栏中的植物成本样式 */
.card-panel .inventory-slot .plant-cost {
    font-size: 10px;
    color: #ffffff;
    margin-bottom: 3px;
}

/* 卡牌选项栏中的卡片数量样式 */
.card-panel .inventory-slot .card-count {
    position: absolute;
    bottom: 3px;
    right: 3px;
    font-size: 12px;
    font-weight: bold;
    color: #ffffff;
    text-shadow: 0 0 5px rgba(255, 255, 255, 0.8);
}

#plant-selector {
    background-color: #232b3d;
    border-radius: 5px;
    padding: 15px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 120px;
    border: 1px solid #00ffff;
    box-shadow: 
        0 0 20px rgba(0, 255, 255, 0.2),
        inset 0 0 20px rgba(0, 255, 255, 0.1);
    background-image: linear-gradient(135deg, #232b3d 0%, #2c3448 100%);
}

/* 爆炸植物选择器 */
#explosion-plant-selector {
    background-color: #330000;
    border-radius: 5px;
    padding: 15px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 120px;
    border: 1px solid #ff4500;
    box-shadow: 
        0 0 20px rgba(255, 69, 0, 0.3),
        inset 0 0 20px rgba(255, 69, 0, 0.1);
    background-image: 
        radial-gradient(circle at center, rgba(255, 69, 0, 0.2) 0%, transparent 50%),
        linear-gradient(135deg, #330000 0%, #4d0000 100%);
}

/* 爆炸植物选择器中的植物项目样式（与赤炎刀手相同） */
#explosion-plant-selector .plant-item {
    background-color: #330000;
    background-image: 
        radial-gradient(circle at center, rgba(255, 69, 0, 0.2) 0%, transparent 50%),
        linear-gradient(135deg, #330000 0%, #4d0000 100%);
    border: 1px solid #ff4500;
    box-shadow: 
        0 0 10px rgba(255, 69, 0, 0.3),
        inset 0 0 10px rgba(255, 69, 0, 0.1);
}

/* 爆炸植物选择器中的金御核和时间刀客保持金色背景 */
#explosion-plant-selector .plant-item[data-plant="jinYuHe"],
#explosion-plant-selector .plant-item[data-plant="shiJianDaoKe"] {
    background-color: rgba(255, 215, 0, 0.9);
    background-image: linear-gradient(135deg, rgba(255, 215, 0, 0.9) 0%, rgba(200, 170, 0, 0.9) 100%);
    border: 1px solid #ffd700;
    box-shadow: 
        0 0 10px rgba(255, 215, 0, 0.3),
        inset 0 0 10px rgba(255, 215, 0, 0.1);
    color: #333;
}

/* 时间刀客保持金色背景 */
.plant-item[data-plant="shiJianDaoKe"] {
    background-color: rgba(255, 215, 0, 0.9);
    background-image: linear-gradient(135deg, rgba(255, 215, 0, 0.9) 0%, rgba(200, 170, 0, 0.9) 100%);
    border: 1px solid #ffd700;
    box-shadow: 
        0 0 10px rgba(255, 215, 0, 0.3),
        inset 0 0 10px rgba(255, 215, 0, 0.1);
    color: #333;
}

.plant-item {
    background-color: #1a1f2e;
    border: 2px solid #00ffff;
    border-radius: 5px;
    padding: 10px;
    cursor: pointer;
    text-align: center;
    transition: all 0.3s ease;
    box-shadow: 0 0 10px rgba(0, 255, 255, 0.2);
    background-image: linear-gradient(135deg, #1a1f2e 0%, #2c3448 100%);
}

.plant-item:hover {
    transform: scale(1.05);
    box-shadow: 0 0 20px rgba(0, 255, 255, 0.5);
    border-color: #00ffff;
}

.plant-item.selected {
    border-color: #00ffff;
    box-shadow: 0 0 20px rgba(0, 255, 255, 0.7);
    background-color: #2c3448;
}

/* 未解锁植物的封印图案 */
.plant-item.locked::after {
    content: '封';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    height: 90%;
    display: flex;
    justify-content: center;
    align-items: center;
    /* 改进的径向渐变背景，黄色与黑色的混合 */
    background: radial-gradient(circle at center, rgba(255, 215, 0, 0.6) 0%, rgba(0, 0, 0, 0.6) 100%);
    /* 双层边框效果 */
    border: 3px solid rgba(255, 215, 0, 0.6);
    box-shadow: 
        0 0 20px rgba(255, 215, 0, 0.6),
        0 0 40px rgba(0, 0, 0, 0.4),
        inset 0 0 20px rgba(0, 0, 0, 0.5);
    border-radius: 12px;
    /* 改进的文字样式 */
    color: rgba(0, 0, 0, 0.8);
    font-size: 32px;
    font-weight: 900;
    text-shadow: 
        0 0 10px rgba(255, 215, 0, 0.8),
        0 0 20px rgba(255, 215, 0, 0.6),
        0 0 30px rgba(255, 215, 0, 0.4),
        0 2px 2px rgba(0, 0, 0, 0.9);
    /* 添加纹理效果 */
    background-image: 
        radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.1) 0%, transparent 20%),
        radial-gradient(circle at 80% 80%, rgba(255, 255, 255, 0.1) 0%, transparent 20%);
    /* 增强的3D效果 */
    transform: translate(-50%, -50%) perspective(500px) rotateX(5deg);
    /* 动画效果 */
    animation: sealGlow 3s ease-in-out infinite;
    z-index: 10;
    pointer-events: none;
}

/* 封印图案的发光动画 */
@keyframes sealGlow {
    0% {
        box-shadow: 
            0 0 20px rgba(255, 215, 0, 0.6),
            0 0 40px rgba(0, 0, 0, 0.4),
            inset 0 0 20px rgba(0, 0, 0, 0.5);
        text-shadow: 
            0 0 10px rgba(255, 215, 0, 0.8),
            0 0 20px rgba(255, 215, 0, 0.6),
            0 0 30px rgba(255, 215, 0, 0.4),
            0 2px 2px rgba(0, 0, 0, 0.9);
    }
    50% {
        box-shadow: 
            0 0 30px rgba(255, 215, 0, 0.8),
            0 0 60px rgba(0, 0, 0, 0.5),
            inset 0 0 30px rgba(0, 0, 0, 0.7);
        text-shadow: 
            0 0 15px rgba(255, 215, 0, 1),
            0 0 30px rgba(255, 215, 0, 0.8),
            0 0 45px rgba(255, 215, 0, 0.6),
            0 3px 3px rgba(0, 0, 0, 0.9);
    }
    100% {
        box-shadow: 
            0 0 20px rgba(255, 215, 0, 0.6),
            0 0 40px rgba(0, 0, 0, 0.4),
            inset 0 0 20px rgba(0, 0, 0, 0.5);
        text-shadow: 
            0 0 10px rgba(255, 215, 0, 0.8),
            0 0 20px rgba(255, 215, 0, 0.6),
            0 0 30px rgba(255, 215, 0, 0.4),
            0 2px 2px rgba(0, 0, 0, 0.9);
    }
}

.plant-icon {
    width: 50px;
    height: 50px;
    margin: 0 auto 5px;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

.plant-name {
    font-size: 12px;
    font-weight: bold;
    color: #00ffff;
    margin-bottom: 5px;
    text-shadow: 0 0 5px rgba(0, 255, 255, 0.5);
}

.plant-cost {
    font-size: 14px;
    color: #00ffff;
    font-weight: bold;
    text-shadow: 0 0 10px rgba(0, 255, 255, 0.5);
}

/* 植物选择器中阶数显示样式 */
.plant-item .plant-tier {
    position: absolute;
    top: 5px;
    left: 5px;
    font-size: 14px;
    font-weight: bold;
    color: #FFD700;
    text-shadow: 0 0 5px rgba(255, 215, 0, 0.8);
    background-color: rgba(0, 0, 0, 0.5);
    padding: 2px 5px;
    border-radius: 3px;
    z-index: 10;
}

/* 确保植物项是相对定位，以便阶数显示可以绝对定位 */
.plant-item {
    position: relative;
}

#game-area {
    background-color: #1f2635;
    border-radius: 5px;
    padding: 5px;
    border: 2px solid #00ffff;
    box-shadow: inset 0 0 20px rgba(0, 255, 255, 0.1);
    position: relative;
}

/* 游戏区域中央的开始游戏按钮样式 */
#start-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: linear-gradient(135deg, rgba(0, 255, 255, 0.2) 0%, rgba(0, 128, 255, 0.2) 100%);
    border: 3px solid #00ffff;
    color: #00ffff;
    font-size: 36px;
    font-weight: bold;
    padding: 20px 60px;
    border-radius: 15px;
    cursor: pointer;
    text-shadow: 0 0 15px rgba(0, 255, 255, 0.8), 0 0 30px rgba(0, 255, 255, 0.5);
    box-shadow: 
        0 0 30px rgba(0, 255, 255, 0.6),
        inset 0 0 30px rgba(0, 255, 255, 0.1);
    transition: all 0.3s ease;
    z-index: 10;
    animation: startButtonPulse 2s ease-in-out infinite;
}

#start-btn:hover {
    background: linear-gradient(135deg, rgba(0, 255, 255, 0.3) 0%, rgba(0, 128, 255, 0.3) 100%);
    box-shadow: 
        0 0 50px rgba(0, 255, 255, 0.8),
        0 0 80px rgba(0, 128, 255, 0.6),
        inset 0 0 40px rgba(0, 255, 255, 0.2);
    transform: translate(-50%, -50%) scale(1.1);
}

#start-btn:active {
    transform: translate(-50%, -50%) scale(0.95);
}

/* 开始按钮脉冲动画 */
@keyframes startButtonPulse {
    0% {
        box-shadow: 
            0 0 30px rgba(0, 255, 255, 0.6),
            inset 0 0 30px rgba(0, 255, 255, 0.1);
    }
    50% {
        box-shadow: 
            0 0 50px rgba(0, 255, 255, 0.8),
            0 0 80px rgba(0, 128, 255, 0.6),
            inset 0 0 30px rgba(0, 255, 255, 0.1);
    }
    100% {
        box-shadow: 
            0 0 30px rgba(0, 255, 255, 0.6),
            inset 0 0 30px rgba(0, 255, 255, 0.1);
    }
}

/* 暂停三角形样式 */
#pause-triangle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(90deg);
    width: 0;
    height: 0;
    border-left: 60px solid transparent;
    border-right: 60px solid transparent;
    border-bottom: 104px solid rgba(0, 255, 255, 0.8);
    z-index: 20;
    box-shadow: 
        0 0 40px rgba(0, 255, 255, 0.8),
        0 0 80px rgba(0, 128, 255, 0.6),
        inset 0 0 20px rgba(0, 255, 255, 0.3);
    animation: pauseTrianglePulse 2s ease-in-out infinite;
    cursor: pointer;
}

/* 石炭星副本暂停三角形样式 */
#pause-triangle.forest-style {
    border-bottom: 104px solid rgba(0, 255, 136, 0.8);
    box-shadow: 
        0 0 40px rgba(0, 255, 136, 0.8),
        0 0 80px rgba(139, 69, 19, 0.3),
        inset 0 0 20px rgba(0, 255, 136, 0.3);
    animation: pauseTrianglePulseForest 2s ease-in-out infinite;
}

/* 暂停三角形脉冲动画 */
@keyframes pauseTrianglePulse {
    0% {
        box-shadow: 
            0 0 40px rgba(0, 255, 255, 0.8),
            0 0 80px rgba(0, 128, 255, 0.6),
            inset 0 0 20px rgba(0, 255, 255, 0.3);
        transform: translate(-50%, -50%) rotate(90deg) scale(1);
    }
    50% {
        box-shadow: 
            0 0 60px rgba(0, 255, 255, 1),
            0 0 120px rgba(0, 128, 255, 0.8),
            inset 0 0 30px rgba(0, 255, 255, 0.5);
        transform: translate(-50%, -50%) rotate(90deg) scale(1.1);
    }
    100% {
        box-shadow: 
            0 0 40px rgba(0, 255, 255, 0.8),
            0 0 80px rgba(0, 128, 255, 0.6),
            inset 0 0 20px rgba(0, 255, 255, 0.3);
        transform: translate(-50%, -50%) rotate(90deg) scale(1);
    }
}

/* 石炭星副本暂停三角形脉冲动画 */
@keyframes pauseTrianglePulseForest {
    0% {
        box-shadow: 
            0 0 40px rgba(0, 255, 136, 0.8),
            0 0 80px rgba(139, 69, 19, 0.3),
            inset 0 0 20px rgba(0, 255, 136, 0.3);
        transform: translate(-50%, -50%) rotate(90deg) scale(1);
    }
    50% {
        box-shadow: 
            0 0 60px rgba(0, 255, 136, 1),
            0 0 120px rgba(139, 69, 19, 0.5),
            inset 0 0 30px rgba(0, 255, 136, 0.5);
        transform: translate(-50%, -50%) rotate(90deg) scale(1.1);
    }
    100% {
        box-shadow: 
            0 0 40px rgba(0, 255, 136, 0.8),
            0 0 80px rgba(139, 69, 19, 0.3),
            inset 0 0 20px rgba(0, 255, 136, 0.3);
        transform: translate(-50%, -50%) rotate(90deg) scale(1);
    }
}

#game-canvas {
    border: 2px solid #00ffff;
    background-color: #0a0e17;
    cursor: crosshair;
    box-shadow: 0 0 20px rgba(0, 255, 255, 0.2);
}

#game-over {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: rgba(26, 31, 46, 0.95);
    color: #00ffff;
    padding: 30px;
    border-radius: 10px;
    text-align: center;
    z-index: 1000;
    border: 2px solid #00ffff;
    box-shadow: 
        0 0 40px rgba(0, 255, 255, 0.5),
        inset 0 0 40px rgba(0, 255, 255, 0.1);
    background-image: linear-gradient(135deg, rgba(26, 31, 46, 0.95) 0%, rgba(44, 52, 72, 0.95) 100%);
}

#game-over h2 {
    font-size: 36px;
    margin-bottom: 20px;
    color: #00ffff;
    text-shadow: 
        0 0 20px rgba(0, 255, 255, 0.7),
        0 0 40px rgba(0, 255, 255, 0.5);
}

#game-over p {
    font-size: 24px;
    margin-bottom: 30px;
    text-shadow: 0 0 10px rgba(0, 255, 255, 0.5);
}

#restart-btn {
    background-color: #2c3448;
    color: #00ffff;
    border: 2px solid #00ffff;
    padding: 12px 24px;
    font-size: 18px;
    font-weight: bold;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 0 15px rgba(0, 255, 255, 0.3);
    text-shadow: 0 0 10px rgba(0, 255, 255, 0.5);
}

#restart-btn:hover {
    background-color: #3a4358;
    box-shadow: 0 0 25px rgba(0, 255, 255, 0.5);
    transform: scale(1.05);
}

.hidden {
    display: none;
}

/* 响应式设计 */
@media (max-width: 1024px) {
    #game-container {
        padding: 10px;
    }
    
    #game-content {
        flex-direction: column;
        align-items: center;
    }
    
    #plant-selector {
        flex-direction: row;
        width: auto;
        flex-wrap: wrap;
        justify-content: center;
    }
}

/* 添加科技感装饰元素 */
#game-container::before {
    content: '';
    position: absolute;
    top: -10px;
    left: -10px;
    right: -10px;
    bottom: -10px;
    background: linear-gradient(45deg, #00ffff, #0080ff, #ff00ff, #00ffff);
    background-size: 400% 400%;
    border-radius: 15px;
    z-index: -1;
    opacity: 0.3;
    animation: gradientShift 3s ease infinite;
}

@keyframes gradientShift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* 按钮发光动画 */
button:hover {
    animation: pulse 1.5s ease-in-out infinite;
}

@keyframes pulse {
    0% { box-shadow: 0 0 20px rgba(0, 255, 255, 0.5); }
    50% { box-shadow: 0 0 40px rgba(0, 255, 255, 0.8); }
    100% { box-shadow: 0 0 20px rgba(0, 255, 255, 0.5); }
}

/* 背包面板样式 */
#inventory-panel {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(26, 31, 46, 0.95);
    border: none;
    border-radius: 0;
    box-shadow: 
        0 0 50px rgba(0, 255, 255, 0.5),
        inset 0 0 50px rgba(0, 255, 255, 0.1);
    z-index: 1000;
    background-image: linear-gradient(135deg, rgba(26, 31, 46, 0.95) 0%, rgba(44, 52, 72, 0.95) 100%);
}

.inventory-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 25px;
    border-bottom: 3px solid #9370db;
    background-color: rgba(0, 0, 0, 0.5);
    position: relative;
    z-index: 10;
    box-shadow: 
        0 5px 30px rgba(147, 112, 219, 0.4),
        0 0 50px rgba(65, 105, 225, 0.2),
        inset 0 0 20px rgba(147, 112, 219, 0.2);
    background-image: linear-gradient(135deg, rgba(0, 0, 0, 0.5) 0%, rgba(20, 15, 40, 0.7) 100%);
    animation: inventoryHeaderGlow 3s ease-in-out infinite;
    backdrop-filter: blur(10px);
    border-top: 1px solid rgba(147, 112, 219, 0.3);
}

/* 一键出售按钮样式 */
#sell-all-btn {
    background-color: rgba(0, 0, 0, 0.6);
    color: #9370db;
    border: 2px solid #9370db;
    padding: 12px 20px;
    border-radius: 25px;
    cursor: pointer;
    font-size: 14px;
    font-weight: bold;
    transition: all 0.3s ease;
    box-shadow: 
        0 0 20px rgba(147, 112, 219, 0.6),
        0 0 40px rgba(65, 105, 225, 0.4),
        inset 0 0 15px rgba(147, 112, 219, 0.2);
    text-shadow: 0 0 10px rgba(147, 112, 219, 0.9), 0 0 20px rgba(65, 105, 225, 0.7);
    background-image: linear-gradient(135deg, rgba(0, 0, 0, 0.6) 0%, rgba(60, 30, 120, 0.5) 100%);
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(10px);
    letter-spacing: 1px;
    text-transform: uppercase;
}

#sell-all-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: 2px solid transparent;
    border-radius: 25px;
    background: linear-gradient(45deg, #9370db, #4169e1, #9370db) border-box;
    -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: destination-out;
    mask-composite: exclude;
    animation: borderRotate 2s linear infinite;
    z-index: 0;
}

#sell-all-btn::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(
        45deg,
        transparent 0%,
        rgba(147, 112, 219, 0.4) 30%,
        rgba(65, 105, 225, 0.5) 50%,
        rgba(147, 112, 219, 0.4) 70%,
        transparent 100%
    );
    transform: rotate(30deg);
    animation: closeBtnShine 3s linear infinite;
    z-index: 0;
}

#sell-all-btn img.sell-btn-image {
    position: relative;
    z-index: 1;
    width: 100%;
    height: auto;
    max-width: 200px;
    max-height: 40px;
    filter: drop-shadow(0 0 5px rgba(147, 112, 219, 0.8));
    transition: all 0.3s ease;
}

#sell-all-btn:hover img.sell-btn-image {
    filter: drop-shadow(0 0 10px rgba(65, 105, 225, 1));
    transform: scale(1.05);
}

#sell-all-btn:active img.sell-btn-image {
    transform: scale(0.95);
}

#sell-all-btn:hover {
    background-color: rgba(0, 0, 0, 0.7);
    border-color: #4169e1;
    box-shadow: 
        0 0 30px rgba(147, 112, 219, 0.8),
        0 0 60px rgba(65, 105, 225, 0.6),
        inset 0 0 20px rgba(147, 112, 219, 0.3);
    transform: translateY(-2px) scale(1.05);
    color: #4169e1;
    text-shadow: 0 0 15px rgba(147, 112, 219, 1), 0 0 30px rgba(65, 105, 225, 0.9);
}

#sell-all-btn:active {
    transform: translateY(1px) scale(0.98);
    box-shadow: 
        0 0 15px rgba(147, 112, 219, 0.7),
        0 0 30px rgba(65, 105, 225, 0.4),
        inset 0 0 10px rgba(147, 112, 219, 0.5);
}

/* 抽卡页面样式 */
#draw-card-panel {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.9);
    border: none;
    border-radius: 0;
    overflow: hidden;
    z-index: 2000;
    animation: drawCardPanelAppear 0.5s ease-out;
}

/* 抽卡页面出现动画 */
@keyframes drawCardPanelAppear {
    from {
        opacity: 0;
        transform: scale(0.8);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* 抽卡页面顶部栏 */
.draw-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 25px;
    border-bottom: 3px solid #ff69b4;
    background-color: rgba(0, 0, 0, 0.7);
    background-image: linear-gradient(135deg, rgba(0, 0, 0, 0.7) 0%, rgba(60, 30, 120, 0.8) 100%);
    position: relative;
    z-index: 10;
    box-shadow: 
        0 5px 30px rgba(255, 105, 180, 0.4),
        0 0 50px rgba(147, 112, 219, 0.2),
        inset 0 0 20px rgba(255, 105, 180, 0.2);
    animation: drawCardHeaderGlow 3s ease-in-out infinite;
    backdrop-filter: blur(10px);
    border-top: 1px solid rgba(255, 105, 180, 0.3);
}

.draw-card-resource-display {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 20px;
    color: #fff;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
    font-weight: bold;
}

#draw-coin-count {
    display: flex;
    align-items: center;
}

#draw-coin-count span {
    font-size: 24px;
    color: #ffd700;
    text-shadow: 0 0 15px rgba(255, 215, 0, 0.8);
}

/* 抽卡页面顶栏发光动画 */
@keyframes drawCardHeaderGlow {
    0%, 100% {
        box-shadow: 
            0 5px 30px rgba(255, 105, 180, 0.4),
            0 0 50px rgba(147, 112, 219, 0.2),
            inset 0 0 20px rgba(255, 105, 180, 0.2);
    }
    50% {
        box-shadow: 
            0 8px 40px rgba(255, 105, 180, 0.6),
            0 0 80px rgba(147, 112, 219, 0.4),
            inset 0 0 30px rgba(255, 105, 180, 0.3);
    }
}

/* 10连抽点击关闭提示样式 */
.card-draw-close-hint {
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    color: #00ffff;
    font-size: 37px;
    font-weight: bold;
    text-shadow: 
        0 0 15px rgba(0, 255, 255, 0.8),
        0 0 30px rgba(0, 255, 255, 0.5),
        0 0 45px rgba(0, 255, 255, 0.3);
    animation: pulse 2s infinite;
    letter-spacing: 2px;
    font-family: 'Arial Black', sans-serif;
    background-color: rgba(0, 0, 0, 0.5);
    padding: 10px 25px;
    border-radius: 20px;
    border: 2px solid rgba(0, 255, 255, 0.5);
    box-shadow: 0 0 30px rgba(0, 255, 255, 0.3);
}

/* 抽卡页面关闭按钮 */
#close-draw-card-btn {
    background-color: rgba(0, 0, 0, 0.4);
    color: #ff69b4;
    border: 2px solid #ff69b4;
    padding: 12px 16px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 24px;
    font-weight: bold;
    transition: all 0.3s ease;
    box-shadow: 
        0 0 20px rgba(255, 105, 180, 0.5),
        0 0 40px rgba(147, 112, 219, 0.3),
        inset 0 0 15px rgba(255, 105, 180, 0.2);
    text-shadow: 0 0 10px rgba(255, 105, 180, 0.9), 0 0 20px rgba(147, 112, 219, 0.7);
    background-image: radial-gradient(circle at center, rgba(255, 105, 180, 0.15) 0%, rgba(0, 0, 0, 0.4) 100%);
    position: relative;
    overflow: hidden;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    backdrop-filter: blur(10px);
}

#close-draw-card-btn:hover {
    background-color: rgba(0, 0, 0, 0.5);
    border-color: #00ffff;
    box-shadow: 
        0 0 30px rgba(255, 105, 180, 0.7),
        0 0 60px rgba(147, 112, 219, 0.5),
        inset 0 0 20px rgba(255, 105, 180, 0.3);
    transform: translateY(-2px) scale(1.1);
    color: #00ffff;
    text-shadow: 0 0 15px rgba(255, 105, 180, 1), 0 0 30px rgba(147, 112, 219, 0.9);
}

/* 抽卡页面内容区域 */
#draw-card-content {
    padding: 40px;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: calc(100vh - 100px);
    margin-top: -40px;
}

#draw-card-content h2 {
    color: #ff69b4;
    font-size: 32px;
    margin-bottom: 40px;
    text-shadow: 
        0 0 10px rgba(255, 105, 180, 0.9),
        0 0 20px rgba(147, 112, 219, 0.7),
        0 0 30px rgba(0, 255, 255, 0.5);
    letter-spacing: 2px;
    text-transform: uppercase;
}

/* 抽卡控制区域 */
#card-draw-controls {
    display: flex;
    flex-direction: row;
    gap: 20px;
    align-items: center;
    justify-content: center;
}

/* 抽卡按钮样式 */
#coin-draw-btn, #coin-draw-ten-btn, #normal-draw-btn, #normal-draw-ten-btn {
    cursor: pointer;
    transition: transform 0.2s ease;
    position: relative;
    display: inline-block;
    width: 300px;
    max-width: 80vw;
    padding: 15px;
    border-radius: 15px;
    text-align: center;
}

#coin-draw-btn img, #coin-draw-ten-btn img, #normal-draw-btn img, #normal-draw-ten-btn img {
    width: 100%;
    height: auto;
    display: block;
}

/* 单抽按钮紫黑色背景特效 */
#coin-draw-btn {
    background-color: rgba(30, 10, 60, 0.9);
    border: 3px solid #9370db;
    box-shadow: 
        0 0 20px rgba(147, 112, 219, 0.6),
        0 0 40px rgba(74, 58, 110, 0.4),
        inset 0 0 20px rgba(30, 10, 60, 0.5);
}

/* 10抽按钮金色背景特效 */
#coin-draw-ten-btn {
    background-color: rgba(100, 80, 20, 0.9);
    border: 3px solid #ffd700;
    box-shadow: 
        0 0 20px rgba(255, 215, 0, 0.6),
        0 0 40px rgba(100, 80, 20, 0.4),
        inset 0 0 20px rgba(100, 80, 20, 0.5);
}

/* 普通单抽按钮灰色背景特效 */
#normal-draw-btn {
    background-color: rgba(50, 50, 50, 0.9);
    border: 3px solid #808080;
    box-shadow: 
        0 0 20px rgba(128, 128, 128, 0.6),
        0 0 40px rgba(60, 60, 60, 0.4),
        inset 0 0 20px rgba(50, 50, 50, 0.5);
}

/* 普通10抽按钮深灰色背景特效 */
#normal-draw-ten-btn {
    background-color: rgba(30, 30, 30, 0.9);
    border: 3px solid #606060;
    box-shadow: 
        0 0 20px rgba(96, 96, 96, 0.6),
        0 0 40px rgba(40, 40, 40, 0.4),
        inset 0 0 20px rgba(30, 30, 30, 0.5);
}

#coin-draw-btn:hover, #coin-draw-ten-btn:hover, #normal-draw-btn:hover, #normal-draw-ten-btn:hover {
    transform: scale(1.05);
}

#coin-draw-btn:active, #coin-draw-ten-btn:active, #normal-draw-btn:active, #normal-draw-ten-btn:active {
    transform: scale(0.95);
}

/* 背包顶栏发光动画 */
@keyframes inventoryHeaderGlow {
    0% {
        box-shadow: 
            0 5px 30px rgba(147, 112, 219, 0.4),
            0 0 50px rgba(65, 105, 225, 0.2),
            inset 0 0 20px rgba(147, 112, 219, 0.2);
        border-bottom-color: rgba(147, 112, 219, 0.7);
    }
    50% {
        box-shadow: 
            0 5px 40px rgba(147, 112, 219, 0.6),
            0 0 70px rgba(65, 105, 225, 0.3),
            inset 0 0 20px rgba(147, 112, 219, 0.3);
        border-bottom-color: rgba(147, 112, 219, 1);
    }
    100% {
        box-shadow: 
            0 5px 30px rgba(147, 112, 219, 0.4),
            0 0 50px rgba(65, 105, 225, 0.2),
            inset 0 0 20px rgba(147, 112, 219, 0.2);
        border-bottom-color: rgba(147, 112, 219, 0.7);
    }
}

#close-inventory-btn {
    background-color: rgba(0, 0, 0, 0.4);
    color: #9370db;
    border: 2px solid #9370db;
    padding: 12px 16px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 24px;
    font-weight: bold;
    transition: all 0.3s ease;
    box-shadow: 
        0 0 20px rgba(147, 112, 219, 0.5),
        0 0 40px rgba(65, 105, 225, 0.3),
        inset 0 0 15px rgba(147, 112, 219, 0.2);
    text-shadow: 0 0 10px rgba(147, 112, 219, 0.9), 0 0 20px rgba(65, 105, 225, 0.7);
    background-image: radial-gradient(circle at center, rgba(147, 112, 219, 0.15) 0%, rgba(0, 0, 0, 0.4) 100%);
    position: relative;
    overflow: hidden;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    backdrop-filter: blur(10px);
}

#close-inventory-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: 2px solid transparent;
    border-radius: 50%;
    background: linear-gradient(45deg, #9370db, #4169e1, #9370db) border-box;
    -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: destination-out;
    mask-composite: exclude;
    animation: borderRotate 2s linear infinite;
}

#close-inventory-btn::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(
        45deg,
        transparent 0%,
        rgba(147, 112, 219, 0.3) 30%,
        rgba(65, 105, 225, 0.4) 50%,
        rgba(147, 112, 219, 0.3) 70%,
        transparent 100%
    );
    transform: rotate(30deg);
    animation: closeBtnShine 3s linear infinite;
}

/* 边框旋转动画 */
@keyframes borderRotate {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

/* 关闭按钮闪光动画 */
@keyframes closeBtnShine {
    0% {
        transform: rotate(30deg) translateX(-100%);
    }
    100% {
        transform: rotate(30deg) translateX(100%);
    }
}

#close-inventory-btn:hover {
    background-color: rgba(0, 0, 0, 0.5);
    border-color: #4169e1;
    box-shadow: 
        0 0 30px rgba(147, 112, 219, 0.7),
        0 0 60px rgba(65, 105, 225, 0.5),
        inset 0 0 20px rgba(147, 112, 219, 0.3);
    transform: translateY(-2px) scale(1.1);
    color: #4169e1;
    text-shadow: 0 0 15px rgba(147, 112, 219, 1), 0 0 30px rgba(65, 105, 225, 0.9);
}

#close-inventory-btn:active {
    transform: translateY(1px) scale(0.98);
    box-shadow: 
        0 0 15px rgba(147, 112, 219, 0.6),
        0 0 30px rgba(65, 105, 225, 0.3),
        inset 0 0 10px rgba(147, 112, 219, 0.4);
    animation: btnPress 0.2s ease;
}

/* 按钮按下动画 */
@keyframes btnPress {
    0% {
        transform: translateY(-2px) scale(1.1);
    }
    100% {
        transform: translateY(1px) scale(0.98);
    }
}

#inventory-content {
    padding: 20px;
    height: calc(100vh - 80px);
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

/* 10x10卡牌格子网格 */
#inventory-grid {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    grid-template-rows: repeat(10, 1fr);
    gap: 10px;
    width: 100%;
    height: 100%;
    max-width: 1200px;
    max-height: 1200px;
}

/* 背包卡牌样式 - 高级科技感设计 */
.inventory-slot {
    background-color: #1a1f2e;
    border: 3px solid #00ffff;
    border-radius: 12px;
    padding: 8px;
    text-align: center;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 100px; /* 保持原有尺寸 */
    height: 120px; /* 保持原有尺寸 */
    
    /* 高级多层渐变背景 */
    background-image: 
        radial-gradient(circle at 15% 20%, rgba(0, 255, 255, 0.25) 0%, transparent 50%),
        radial-gradient(circle at 85% 80%, rgba(128, 0, 255, 0.25) 0%, transparent 50%),
        radial-gradient(circle at 50% 50%, rgba(255, 0, 255, 0.1) 0%, transparent 70%),
        linear-gradient(135deg, #1a1f2e 0%, #2c3448 50%, #3a4358 100%);
    
    /* 渐变边框效果 */
    border-image: linear-gradient(45deg, #00ffff, #8000ff, #ff00ff, #00ffff) 1;
    
    /* 霓虹光影效果 */
    box-shadow: 
        0 0 20px rgba(0, 255, 255, 0.4),
        0 5px 30px rgba(0, 0, 0, 0.6),
        inset 0 0 20px rgba(0, 255, 255, 0.15);
    
    /* 动态背景动画 */
    animation: inventoryBackgroundGlow 4s ease-in-out infinite alternate;
}

/* 背包卡牌背景发光动画 */
@keyframes inventoryBackgroundGlow {
    0% { 
        box-shadow: 
            0 0 20px rgba(0, 255, 255, 0.4),
            0 5px 30px rgba(0, 0, 0, 0.6),
            inset 0 0 20px rgba(0, 255, 255, 0.15);
    }
    100% { 
        box-shadow: 
            0 0 25px rgba(128, 0, 255, 0.4),
            0 5px 30px rgba(0, 0, 0, 0.6),
            inset 0 0 20px rgba(128, 0, 255, 0.15);
        border-image: linear-gradient(45deg, #8000ff, #ff00ff, #00ffff, #8000ff) 1;
    }
}

.inventory-slot:hover {
    transform: scale(1.05);
    box-shadow: 0 0 20px rgba(0, 255, 255, 0.4);
    transition: all 0.2s ease;
    z-index: 100;
}

.inventory-slot .plant-icon {
    width: 60px; /* 对调前的高度 */
    height: 50px; /* 对调前的宽度 */
    margin: 5px auto;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

.inventory-slot .plant-name {
    font-size: 12px;
    font-weight: bold;
    color: #00ffff;
    margin-bottom: 5px;
    text-shadow: 0 0 5px rgba(0, 255, 255, 0.5);
}

.inventory-slot .plant-cost {
    font-size: 14px;
    color: #00ffff;
    font-weight: bold;
    text-shadow: 0 0 10px rgba(0, 255, 255, 0.5);
    margin-bottom: 5px;
}

.inventory-slot .synthesize-btn {
    background-color: #2c3448;
    color: #00ffff;
    border: 1px solid #00ffff;
    padding: 2px 6px;
    font-size: 12px;
    border-radius: 3px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 0 5px rgba(0, 255, 255, 0.2);
    text-shadow: 0 0 3px rgba(0, 255, 255, 0.5);
    margin-top: auto;
}

.inventory-slot .synthesize-btn:hover {
    background-color: #3a4358;
    box-shadow: 0 0 10px rgba(0, 255, 255, 0.4);
}

/* 卡牌数量显示 - 右下角 */
.inventory-slot .card-count {
    position: absolute;
    bottom: 5px;
    right: 5px;
    font-size: 14px;
    font-weight: bold;
    color: #ffffff;
    text-shadow: 0 0 5px rgba(255, 255, 255, 0.8);
    background-color: rgba(0, 0, 0, 0.5);
    padding: 2px 5px;
    border-radius: 3px;
    z-index: 10;
}

/* 卡牌阶数显示 - 左下角 */
.inventory-slot .card-tier {
    position: absolute;
    bottom: 5px;
    left: 5px;
    font-size: 14px;
    font-weight: bold;
    color: #ffd700;
    text-shadow: 0 0 5px rgba(255, 215, 0, 0.8);
    background-color: rgba(0, 0, 0, 0.5);
    padding: 2px 5px;
    border-radius: 3px;
    z-index: 10;
}

/* 不同类型卡牌的背景颜色 */
/* 能源卡和治疗卡 - 白色科技背景 */
.inventory-slot.card-energy100,
.inventory-slot.card-healSingle {
    background-image: 
        radial-gradient(circle at 20% 80%, rgba(255, 255, 255, 0.3) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(0, 255, 255, 0.2) 0%, transparent 50%),
        linear-gradient(135deg, #f0f0f0 0%, #e0e0e0 30%, #d0d0d0 60%, #c0c0c0 100%);
    border-image: linear-gradient(45deg, #ffffff, #00ffff, #ffffff) 1;
    box-shadow: 
        0 0 25px rgba(255, 255, 255, 0.5),
        0 5px 30px rgba(0, 0, 0, 0.5),
        inset 0 0 20px rgba(0, 255, 255, 0.15);
    color: #333;
    animation: energyCardGlow 4s ease-in-out infinite alternate;
}

@keyframes energyCardGlow {
    0% { box-shadow: 
        0 0 25px rgba(255, 255, 255, 0.5),
        0 5px 30px rgba(0, 0, 0, 0.5),
        inset 0 0 20px rgba(0, 255, 255, 0.15); }
    100% { box-shadow: 
        0 0 30px rgba(0, 255, 255, 0.6),
        0 5px 30px rgba(0, 0, 0, 0.5),
        inset 0 0 20px rgba(0, 255, 255, 0.25); }
}

/* 高级能源卡和高级治疗卡 - 绿色科技背景 */
.inventory-slot.card-energy300,
.inventory-slot.card-healAll,
.inventory-slot.card-timeStop {
    background-image: 
        radial-gradient(circle at 80% 20%, rgba(0, 255, 0, 0.3) 0%, transparent 50%),
        radial-gradient(circle at 20% 80%, rgba(0, 128, 0, 0.2) 0%, transparent 50%),
        linear-gradient(135deg, #003300 0%, #004d00 30%, #003300 60%, #001a00 100%);
    border-image: linear-gradient(45deg, #00ff00, #008000, #00ff00) 1;
    box-shadow: 
        0 0 25px rgba(0, 255, 0, 0.5),
        0 5px 30px rgba(0, 0, 0, 0.5),
        inset 0 0 20px rgba(0, 255, 0, 0.15);
    color: #fff;
    animation: advancedEnergyCardGlow 4s ease-in-out infinite alternate;
}

@keyframes advancedEnergyCardGlow {
    0% { box-shadow: 
        0 0 25px rgba(0, 255, 0, 0.5),
        0 5px 30px rgba(0, 0, 0, 0.5),
        inset 0 0 20px rgba(0, 255, 0, 0.15); }
    100% { box-shadow: 
        0 0 30px rgba(0, 255, 0, 0.7),
        0 5px 30px rgba(0, 0, 0, 0.5),
        inset 0 0 20px rgba(0, 255, 0, 0.25); }
}

/* 凌枪射手、产能机、盾御机 - 蓝色科技背景 */
.inventory-slot.card-peashooter,
.inventory-slot.card-sunflower,
.inventory-slot.card-wallnut {
    background-image: 
        radial-gradient(circle at 60% 40%, rgba(0, 0, 255, 0.3) 0%, transparent 50%),
        radial-gradient(circle at 40% 60%, rgba(0, 128, 255, 0.2) 0%, transparent 50%),
        linear-gradient(135deg, #002244 0%, #003366 30%, #002244 60%, #001122 100%);
    border-image: linear-gradient(45deg, #0080ff, #0040ff, #0080ff) 1;
    box-shadow: 
        0 0 25px rgba(0, 0, 255, 0.5),
        0 5px 30px rgba(0, 0, 0, 0.5),
        inset 0 0 20px rgba(0, 128, 255, 0.15);
    color: #fff;
    animation: plantCardGlow 4s ease-in-out infinite alternate;
}

@keyframes plantCardGlow {
    0% { box-shadow: 
        0 0 25px rgba(0, 0, 255, 0.5),
        0 5px 30px rgba(0, 0, 0, 0.5),
        inset 0 0 20px rgba(0, 128, 255, 0.15); }
    100% { box-shadow: 
        0 0 30px rgba(0, 128, 255, 0.7),
        0 5px 30px rgba(0, 0, 0, 0.5),
        inset 0 0 20px rgba(0, 128, 255, 0.25); }
}

/* 赤炎刀手 - 火焰科技背景 */
.inventory-slot.card-chiYanDaoshou, 
.inventory-slot.card-cherryBomb, 
.inventory-slot.card-jalapeno {
    background-image: 
        radial-gradient(circle at center, rgba(255, 69, 0, 0.4) 0%, transparent 70%),
        radial-gradient(circle at 80% 20%, rgba(255, 0, 0, 0.3) 0%, transparent 50%),
        linear-gradient(135deg, #330000 0%, #4d0000 30%, #330000 60%, #1a0000 100%);
    border-image: linear-gradient(45deg, #ff4500, #ff0000, #ff4500) 1;
    box-shadow: 
        0 0 30px rgba(255, 69, 0, 0.6),
        0 5px 30px rgba(0, 0, 0, 0.6),
        inset 0 0 20px rgba(255, 69, 0, 0.2);
    color: #fff;
    animation: chiYanDaoshouGlow 3s ease-in-out infinite alternate;
}

@keyframes chiYanDaoshouGlow {
    0% { box-shadow: 
        0 0 30px rgba(255, 69, 0, 0.6),
        0 5px 30px rgba(0, 0, 0, 0.6),
        inset 0 0 20px rgba(255, 69, 0, 0.2); }
    100% { box-shadow: 
        0 0 40px rgba(255, 0, 0, 0.8),
        0 5px 30px rgba(0, 0, 0, 0.6),
        inset 0 0 20px rgba(255, 0, 0, 0.3); }
}

/* 虚式机和时间刀客 - 金色科技背景 */
.inventory-slot.card-xushiJi, .inventory-slot.card-shiJianDaoKe {
    background-image: 
        radial-gradient(circle at 40% 40%, rgba(255, 215, 0, 0.3) 0%, transparent 50%),
        radial-gradient(circle at 60% 60%, rgba(255, 165, 0, 0.2) 0%, transparent 50%),
        linear-gradient(135deg, #332200 0%, #4d3300 30%, #332200 60%, #1a1100 100%);
    border-image: linear-gradient(45deg, #ffd700, #ff8c00, #ffd700) 1;
    box-shadow: 
        0 0 30px rgba(255, 215, 0, 0.6),
        0 5px 30px rgba(0, 0, 0, 0.5),
        inset 0 0 20px rgba(255, 165, 0, 0.15);
    color: #333;
    animation: xushiJiGlow 3s ease-in-out infinite alternate;
}

/* 金御核 - 金色科技背景 */
.inventory-slot.card-jinYuHe {
    background-image: 
        radial-gradient(circle at 40% 40%, rgba(255, 215, 0, 0.3) 0%, transparent 50%),
        radial-gradient(circle at 60% 60%, rgba(255, 165, 0, 0.2) 0%, transparent 50%),
        linear-gradient(135deg, #332200 0%, #4d3300 30%, #332200 60%, #1a1100 100%) !important;
    border-image: linear-gradient(45deg, #ffd700, #ff8c00, #ffd700) 1 !important;
    box-shadow: 
        0 0 30px rgba(255, 215, 0, 0.6),
        0 5px 30px rgba(0, 0, 0, 0.5),
        inset 0 0 20px rgba(255, 165, 0, 0.15) !important;
    color: #333 !important;
    animation: xushiJiGlow 3s ease-in-out infinite alternate !important;
}

/* 金御核卡牌悬停效果 */
.inventory-slot.card-jinYuHe:hover {
    transform: scale(1.12) translateY(-8px) rotateX(5deg) !important;
    box-shadow: 
        0 0 40px rgba(255, 165, 0, 0.8),
        0 10px 50px rgba(0, 0, 0, 0.7),
        inset 0 0 25px rgba(255, 165, 0, 0.25) !important;
    border-image: linear-gradient(45deg, #ff8c00, #ffd700, #ff8c00) 1 !important;
    transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1) !important;
}

/* 移除金御核卡牌的默认动画效果，使用金色专属动画 */
.inventory-slot.card-jinYuHe {
    animation: xushiJiGlow 3s ease-in-out infinite alternate !important;
}

@keyframes xushiJiGlow {
    0% { box-shadow: 
        0 0 30px rgba(255, 215, 0, 0.6),
        0 5px 30px rgba(0, 0, 0, 0.5),
        inset 0 0 20px rgba(255, 165, 0, 0.15); }
    100% { box-shadow: 
        0 0 40px rgba(255, 165, 0, 0.8),
        0 5px 30px rgba(0, 0, 0, 0.5),
        inset 0 0 20px rgba(255, 165, 0, 0.25); }
}

/* 炽影机 - 金色科技背景 */
.inventory-slot.card-chiying {
    background-image: 
        radial-gradient(circle at 40% 40%, rgba(255, 215, 0, 0.3) 0%, transparent 50%),
        radial-gradient(circle at 60% 60%, rgba(255, 165, 0, 0.2) 0%, transparent 50%),
        linear-gradient(135deg, #332200 0%, #4d3300 30%, #332200 60%, #1a1100 100%);
    border-image: linear-gradient(45deg, #ffd700, #ff8c00, #ffd700) 1;
    box-shadow: 
        0 0 30px rgba(255, 215, 0, 0.6),
        0 5px 30px rgba(0, 0, 0, 0.5),
        inset 0 0 20px rgba(255, 165, 0, 0.15);
    color: #333;
    animation: xushiJiGlow 3s ease-in-out infinite alternate;
}

/* 升星卡 - 蓝色科技背景 */
.inventory-slot.card-levelUp {
    background-image: 
        radial-gradient(circle at center, rgba(0, 128, 255, 0.4) 0%, transparent 70%),
        radial-gradient(circle at 70% 30%, rgba(0, 255, 255, 0.3) 0%, transparent 50%),
        linear-gradient(135deg, #003366 0%, #004d99 30%, #003366 60%, #001a33 100%);
    border-image: linear-gradient(45deg, #00ffff, #0080ff, #00ffff) 1;
    box-shadow: 
        0 0 30px rgba(0, 128, 255, 0.6),
        0 5px 30px rgba(0, 0, 0, 0.6),
        inset 0 0 20px rgba(0, 255, 255, 0.2);
    color: #fff;
    animation: levelUpGlow 3s ease-in-out infinite alternate;
}

@keyframes levelUpGlow {
    0% { box-shadow: 
        0 0 30px rgba(0, 128, 255, 0.6),
        0 5px 30px rgba(0, 0, 0, 0.6),
        inset 0 0 20px rgba(0, 255, 255, 0.2); }
    100% { box-shadow: 
        0 0 40px rgba(0, 255, 255, 0.8),
        0 5px 30px rgba(0, 0, 0, 0.6),
        inset 0 0 20px rgba(0, 255, 255, 0.3); }
}

/* 超级升星卡 - 紫色科技背景 */
.inventory-slot.card-superLevelUp {
    background-image: 
        radial-gradient(circle at center, rgba(128, 0, 255, 0.5) 0%, transparent 70%),
        radial-gradient(circle at 30% 30%, rgba(255, 0, 255, 0.4) 0%, transparent 50%),
        radial-gradient(circle at 70% 70%, rgba(0, 255, 255, 0.3) 0%, transparent 50%),
        linear-gradient(135deg, #330066 0%, #4d0099 30%, #330066 60%, #1a0033 100%);
    border-image: linear-gradient(45deg, #ff00ff, #8000ff, #ff00ff) 1;
    box-shadow: 
        0 0 40px rgba(128, 0, 255, 0.7),
        0 8px 40px rgba(0, 0, 0, 0.7),
        inset 0 0 25px rgba(255, 0, 255, 0.25);
    color: #fff;
    animation: superLevelUpInventoryGlow 2.5s ease-in-out infinite alternate;
    transform: perspective(1000px) translateZ(5px);
}

@keyframes superLevelUpInventoryGlow {
    0% { 
        box-shadow: 
            0 0 40px rgba(128, 0, 255, 0.7),
            0 8px 40px rgba(0, 0, 0, 0.7),
            inset 0 0 25px rgba(255, 0, 255, 0.25);
    }
    100% { 
        box-shadow: 
            0 0 50px rgba(255, 0, 255, 0.9),
            0 8px 40px rgba(0, 0, 0, 0.7),
            inset 0 0 25px rgba(255, 0, 255, 0.4);
    }
}

/* 抽卡动画中的升星卡 - 蓝色背景 */
.card-front.card-levelUp {
    background-color: rgba(0, 128, 255, 0.9);
    background-image: linear-gradient(135deg, rgba(0, 128, 255, 0.9) 0%, rgba(0, 90, 200, 0.9) 100%);
    color: #fff;
}

/* 为不同颜色背景的卡牌调整文字颜色 */
.inventory-slot.card-energy100 .plant-name,
.inventory-slot.card-energy100 .plant-cost,
.inventory-slot.card-healSingle .plant-name,
.inventory-slot.card-healSingle .plant-cost,
.inventory-slot.card-xushiJi .plant-name,
.inventory-slot.card-xushiJi .plant-cost,
.inventory-slot.card-jinYuHe .plant-name,
.inventory-slot.card-jinYuHe .plant-cost,
.inventory-slot.card-chiying .plant-name,
.inventory-slot.card-chiying .plant-cost,
.card-front.card-energy100 .plant-name,
.card-front.card-energy100 .plant-cost,
.card-front.card-healSingle .plant-name,
.card-front.card-healSingle .plant-cost,
.card-front.card-xushiJi .plant-name,
.card-front.card-xushiJi .plant-cost {
    color: #333;
    text-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
}

.inventory-slot.card-energy300 .plant-name,
.inventory-slot.card-energy300 .plant-cost,
.inventory-slot.card-healAll .plant-name,
.inventory-slot.card-healAll .plant-cost,
.inventory-slot.card-timeStop .plant-name,
.inventory-slot.card-timeStop .plant-cost,
.inventory-slot.card-peashooter .plant-name,
.inventory-slot.card-peashooter .plant-cost,
.inventory-slot.card-sunflower .plant-name,
.inventory-slot.card-sunflower .plant-cost,
.inventory-slot.card-wallnut .plant-name,
.inventory-slot.card-wallnut .plant-cost,
.inventory-slot.card-chiYanDaoshou .plant-name,
.inventory-slot.card-chiYanDaoshou .plant-cost,
.inventory-slot.card-levelUp .plant-name,
.inventory-slot.card-levelUp .plant-cost,
.inventory-slot.card-superLevelUp .plant-name,
.inventory-slot.card-superLevelUp .plant-cost,
.card-front.card-energy300 .plant-name,
.card-front.card-energy300 .plant-cost,
.card-front.card-healAll .plant-name,
.card-front.card-healAll .plant-cost,
.card-front.card-timeStop .plant-name,
.card-front.card-timeStop .plant-cost,
.card-front.card-peashooter .plant-name,
.card-front.card-peashooter .plant-cost,
.card-front.card-sunflower .plant-name,
.card-front.card-sunflower .plant-cost,
.card-front.card-wallnut .plant-name,
.card-front.card-wallnut .plant-cost,
.card-front.card-chiYanDaoshou .plant-name,
.card-front.card-chiYanDaoshou .plant-cost,
.card-front.card-levelUp .plant-name,
.card-front.card-levelUp .plant-cost,
.card-front.card-superLevelUp .plant-name,
.card-front.card-superLevelUp .plant-cost {
    color: #fff;
    text-shadow: 0 0 5px rgba(0, 0, 0, 0.8);
}

/* 植物选择器中不同类型植物的背景颜色 */
.plant-item[data-plant="peashooter"],
.plant-item[data-plant="sunflower"],
.plant-item[data-plant="wallnut"] {
    background-color: rgba(0, 0, 255, 0.9);
    background-image: linear-gradient(135deg, rgba(0, 0, 255, 0.9) 0%, rgba(0, 0, 200, 0.9) 100%);
    color: #fff;
}

.plant-item[data-plant="chiYanDaoshou"] {
    background-color: #330000;
    background-image: 
        radial-gradient(circle at center, rgba(255, 69, 0, 0.2) 0%, transparent 50%),
        linear-gradient(135deg, #330000 0%, #4d0000 100%);
    border: 1px solid #ff4500;
    box-shadow: 
        0 0 10px rgba(255, 69, 0, 0.3),
        inset 0 0 10px rgba(255, 69, 0, 0.1);
    color: #fff;
}

.plant-item[data-plant="xushiJi"] {
    background-color: rgba(255, 215, 0, 0.9);
    background-image: linear-gradient(135deg, rgba(255, 215, 0, 0.9) 0%, rgba(200, 170, 0, 0.9) 100%);
    color: #333;
}

/* 炽影机背景颜色与虚式机相同 */
.plant-item[data-plant="chiying"] {
    background-color: rgba(255, 215, 0, 0.9);
    background-image: linear-gradient(135deg, rgba(255, 215, 0, 0.9) 0%, rgba(200, 170, 0, 0.9) 100%);
    color: #333;
}

.plant-item[data-plant="jinYuHe"] {
    background-color: rgba(255, 215, 0, 0.9);
    background-image: linear-gradient(135deg, rgba(255, 215, 0, 0.9) 0%, rgba(200, 170, 0, 0.9) 100%);
    color: #333;
}

/* 植物选择器中不同背景颜色下的文字颜色 */
.plant-item[data-plant="xushiJi"] .plant-name,
.plant-item[data-plant="xushiJi"] .plant-cost,
.plant-item[data-plant="chiying"] .plant-name,
.plant-item[data-plant="chiying"] .plant-cost,
.plant-item[data-plant="jinYuHe"] .plant-name,
.plant-item[data-plant="jinYuHe"] .plant-cost {
    color: #333;
    text-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
}

.plant-item[data-plant="peashooter"] .plant-name,
.plant-item[data-plant="peashooter"] .plant-cost,
.plant-item[data-plant="sunflower"] .plant-name,
.plant-item[data-plant="sunflower"] .plant-cost,
.plant-item[data-plant="wallnut"] .plant-name,
.plant-item[data-plant="wallnut"] .plant-cost,
.plant-item[data-plant="chiYanDaoshou"] .plant-name,
.plant-item[data-plant="chiYanDaoshou"] .plant-cost {
    color: #fff;
    text-shadow: 0 0 5px rgba(0, 0, 0, 0.8);
}

/* 空的卡牌槽 */
.inventory-slot.empty {
    background-color: rgba(26, 31, 46, 0.5);
    border-color: rgba(0, 255, 255, 0.3);
    box-shadow: 0 0 5px rgba(0, 255, 255, 0.1);
}

.inventory-slot.empty:hover {
    border-color: rgba(0, 255, 255, 0.5);
    box-shadow: 0 0 10px rgba(0, 255, 255, 0.3);
}

/* 冷却时间覆盖层 */
.inventory-slot .cooldown-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 80%;
    background: linear-gradient(45deg, rgba(0, 0, 0, 0.8), rgba(0, 255, 255, 0.3));
    border-radius: 8px;
    z-index: 6;
    transition: width 0.05s linear;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-right: 4px solid #00ffff;
    box-shadow: 
        inset 0 0 20px rgba(0, 255, 255, 0.4),
        0 0 10px rgba(0, 255, 255, 0.2);
    backdrop-filter: blur(5px);
}

/* 冷却层上的蓝色时钟图标 */
.inventory-slot::before {
    content: "";
    width: 60px;
    height: 60px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 999;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
    background: radial-gradient(circle, rgba(0, 255, 255, 0.2) 0%, rgba(0, 255, 255, 0) 70%);
    border: 4px solid #00ffff;
    border-radius: 50%;
    box-shadow: 
        0 0 10px rgba(0, 255, 255, 0.8),
        0 0 20px rgba(0, 255, 255, 0.6),
        0 0 30px rgba(0, 255, 255, 0.4),
        inset 0 0 10px rgba(0, 255, 255, 0.3);
}

/* 分针 */
.inventory-slot::after {
    content: "";
    position: absolute;
    width: 3px;
    height: 25px;
    background: #00ffff;
    border-radius: 5px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -80%);
    transform-origin: bottom center;
    animation: clockHandRotate 2s linear infinite;
    z-index: 1000;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
    box-shadow: 0 0 5px rgba(0, 255, 255, 0.8);
}

/* 时钟旋转动画 */
@keyframes clockHandRotate {
    from {
        transform: translate(-50%, -80%) rotate(0deg);
    }
    to {
        transform: translate(-50%, -80%) rotate(360deg);
    }
}

/* 只有在冷却状态下显示时钟图标和指针 */
.inventory-slot.on-cooldown::before {
    opacity: 1;
}

.inventory-slot.on-cooldown::after {
    opacity: 1;
}

/* 时钟图标增强动画 */
@keyframes clockAnimation {
    0% {
        transform: translate(-50%, -50%) rotate(0deg) scale(1);
        opacity: 0.8;
    }
    50% {
        transform: translate(-50%, -50%) rotate(5deg) scale(1.2);
        opacity: 1;
    }
    100% {
        transform: translate(-50%, -50%) rotate(0deg) scale(1);
        opacity: 0.8;
    }
}

/* 能源数字放大跳动效果 */
.energy-boost-effect {
    animation: energyBoost 0.5s ease-out;
}

@keyframes energyBoost {
    0% {
        transform: scale(1);
        color: #ffff00;
    }
    50% {
        transform: scale(1.5);
        color: #ff6600;
        text-shadow: 0 0 10px rgba(255, 255, 0, 0.8);
    }
    100% {
        transform: scale(1);
        color: #ffff00;
    }
}

/* 金币数字放大跳动效果 */
.coin-boost-effect {
    animation: coinBoost 0.5s ease-out;
}

@keyframes coinBoost {
    0% {
        transform: scale(1);
        color: #ffd700;
    }
    50% {
        transform: scale(1.5);
        color: #ffaa00;
        text-shadow: 0 0 10px rgba(255, 215, 0, 0.8);
    }
    100% {
        transform: scale(1);
        color: #ffd700;
    }
}

/* 冷却时间文字 */
.inventory-slot .cooldown-text {
    position: absolute;
    top: 70%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #00ffff;
    font-size: 28px;
    font-weight: bold;
    text-shadow: 
        0 0 5px rgba(0, 255, 255, 1),
        0 0 10px rgba(0, 255, 255, 0.9),
        0 0 15px rgba(0, 255, 255, 0.8),
        0 0 20px rgba(0, 255, 255, 0.6);
    z-index: 7;
    pointer-events: none;
    animation: cooldownPulse 1s ease-in-out infinite alternate;
    background: rgba(0, 0, 0, 0.5);
    padding: 5px 15px;
    border-radius: 20px;
    border: 2px solid rgba(0, 255, 255, 0.5);
    box-shadow: 0 0 10px rgba(0, 255, 255, 0.3);
}

/* 卡牌选项栏中的冷却时间文字 */
.card-panel .inventory-slot .cooldown-text {
    font-size: 18px;
}

/* 冷却时间文字的脉动动画 */
@keyframes cooldownPulse {
    from {
        opacity: 0.8;
        text-shadow: 
            0 0 5px rgba(0, 255, 255, 1),
            0 0 10px rgba(0, 255, 255, 0.8),
            0 0 15px rgba(0, 255, 255, 0.6),
            0 0 20px rgba(0, 255, 255, 0.4);
    }
    to {
        opacity: 1;
        text-shadow: 
            0 0 8px rgba(0, 255, 255, 1),
            0 0 15px rgba(0, 255, 255, 0.9),
            0 0 20px rgba(0, 255, 255, 0.8),
            0 0 25px rgba(0, 255, 255, 0.6);
    }
}

/* 抽卡预加载界面 */
#card-draw-loading-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: 
        radial-gradient(circle at center, 
            rgba(128, 0, 255, 0.4) 0%, 
            rgba(0, 255, 255, 0.3) 20%, 
            rgba(0, 0, 255, 0.3) 40%, 
            rgba(0, 0, 0, 0.95) 70%, 
            rgba(0, 0, 0, 0.98) 100%),
        repeating-linear-gradient(
            45deg,
            transparent, 
            transparent 20px,
            rgba(128, 0, 255, 0.05) 20px,
            rgba(128, 0, 255, 0.05) 40px
        );
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 20000;
    animation: loadingScreenPulse 2s ease-in-out infinite;
}

#card-draw-loading-screen h2 {
    font-size: 48px;
    color: #00ffff;
    text-shadow: 
        0 0 20px rgba(0, 255, 255, 0.8),
        0 0 40px rgba(128, 0, 255, 0.6),
        0 0 60px rgba(255, 0, 255, 0.4);
    margin-bottom: 40px;
    letter-spacing: 5px;
    animation: loadingTitleGlow 2s ease-in-out infinite;
}

#card-draw-loading-spinner {
    width: 120px;
    height: 120px;
    border: 6px solid rgba(0, 255, 255, 0.2);
    border-top: 6px solid #00ffff;
    border-radius: 50%;
    animation: cardDrawSpin 1s linear infinite;
    box-shadow: 
        0 0 30px rgba(0, 255, 255, 0.5),
        inset 0 0 30px rgba(0, 255, 255, 0.2);
    margin-bottom: 30px;
}

#card-draw-loading-text {
    font-size: 24px;
    color: #ff69b4;
    text-shadow: 
        0 0 15px rgba(255, 105, 180, 0.8),
        0 0 30px rgba(147, 112, 219, 0.6);
    letter-spacing: 2px;
    animation: loadingTextPulse 1.5s ease-in-out infinite;
    margin-bottom: 20px;
}

#card-draw-loading-progress-container {
    width: 400px;
    height: 8px;
    background-color: rgba(20, 25, 35, 0.9);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 
        0 0 20px rgba(0, 255, 255, 0.3),
        inset 0 0 20px rgba(0, 255, 255, 0.1);
    border: 2px solid rgba(0, 255, 255, 0.3);
}

#card-draw-loading-progress-bar {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #00ffff, #9370db, #ff69b4);
    background-size: 200% auto;
    animation: progressGradient 2s linear infinite;
    box-shadow: 0 0 15px rgba(0, 255, 255, 0.7);
    transition: width 0.3s ease;
    border-radius: 8px;
}

@keyframes progressGradient {
    0% { background-position: 0% center; }
    100% { background-position: 200% center; }
}

@keyframes loadingScreenPulse {
    0%, 100% {
        background: 
            radial-gradient(circle at center, 
                rgba(128, 0, 255, 0.4) 0%, 
                rgba(0, 255, 255, 0.3) 20%, 
                rgba(0, 0, 255, 0.3) 40%, 
                rgba(0, 0, 0, 0.95) 70%, 
                rgba(0, 0, 0, 0.98) 100%),
            repeating-linear-gradient(
                45deg,
                transparent, 
                transparent 20px,
                rgba(128, 0, 255, 0.05) 20px,
                rgba(128, 0, 255, 0.05) 40px
            );
    }
    50% {
        background: 
            radial-gradient(circle at center, 
                rgba(128, 0, 255, 0.5) 0%, 
                rgba(0, 255, 255, 0.4) 20%, 
                rgba(0, 0, 255, 0.4) 40%, 
                rgba(0, 0, 0, 0.9) 70%, 
                rgba(0, 0, 0, 0.95) 100%),
            repeating-linear-gradient(
                45deg,
                transparent, 
                transparent 20px,
                rgba(147, 112, 219, 0.1) 20px,
                rgba(147, 112, 219, 0.1) 40px
            );
    }
}

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

@keyframes loadingTitleGlow {
    0%, 100% {
        text-shadow: 
            0 0 20px rgba(0, 255, 255, 0.8),
            0 0 40px rgba(128, 0, 255, 0.6),
            0 0 60px rgba(255, 0, 255, 0.4);
    }
    50% {
        text-shadow: 
            0 0 30px rgba(0, 255, 255, 1),
            0 0 60px rgba(128, 0, 255, 0.8),
            0 0 90px rgba(255, 0, 255, 0.6);
    }
}

@keyframes loadingTextPulse {
    0%, 100% {
        opacity: 0.7;
        transform: scale(1);
    }
    50% {
        opacity: 1;
        transform: scale(1.05);
    }
}

/* 背包预加载界面样式 */
#inventory-loading-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: 
        radial-gradient(circle at center, 
            rgba(0, 255, 128, 0.4) 0%, 
            rgba(0, 128, 255, 0.3) 20%, 
            rgba(0, 0, 255, 0.3) 40%, 
            rgba(0, 0, 0, 0.95) 70%, 
            rgba(0, 0, 0, 0.98) 100%),
        repeating-linear-gradient(
            45deg,
            transparent, 
            transparent 20px,
            rgba(0, 255, 128, 0.05) 20px,
            rgba(0, 255, 128, 0.05) 40px
        );
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 20000;
    animation: inventoryLoadingScreenPulse 2s ease-in-out infinite;
}

#inventory-loading-screen h2 {
    font-size: 48px;
    color: #00ff80;
    text-shadow: 
        0 0 20px rgba(0, 255, 128, 0.8),
        0 0 40px rgba(0, 128, 255, 0.6),
        0 0 60px rgba(0, 255, 255, 0.4);
    margin-bottom: 40px;
    letter-spacing: 5px;
    animation: inventoryLoadingTitleGlow 2s ease-in-out infinite;
}

#inventory-loading-spinner {
    width: 120px;
    height: 120px;
    border: 6px solid rgba(0, 255, 128, 0.2);
    border-top: 6px solid #00ff80;
    border-radius: 50%;
    animation: inventoryLoadingSpin 1s linear infinite;
    box-shadow: 
        0 0 30px rgba(0, 255, 128, 0.5),
        inset 0 0 30px rgba(0, 255, 128, 0.2);
    margin-bottom: 30px;
}

#inventory-loading-text {
    font-size: 24px;
    color: #00ffaa;
    text-shadow: 
        0 0 15px rgba(0, 255, 170, 0.8),
        0 0 30px rgba(0, 128, 255, 0.6);
    letter-spacing: 2px;
    animation: inventoryLoadingTextPulse 1.5s ease-in-out infinite;
    margin-bottom: 20px;
}

#inventory-loading-progress-container {
    width: 400px;
    height: 8px;
    background-color: rgba(20, 25, 35, 0.9);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 
        0 0 20px rgba(0, 255, 128, 0.3),
        inset 0 0 20px rgba(0, 255, 128, 0.1);
    border: 2px solid rgba(0, 255, 128, 0.3);
}

#inventory-loading-progress-bar {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #00ff80, #0080ff, #9370db);
    background-size: 200% auto;
    animation: progressGradient 2s linear infinite;
    box-shadow: 0 0 15px rgba(0, 255, 128, 0.7);
    transition: width 0.3s ease;
    border-radius: 8px;
}

@keyframes inventoryLoadingScreenPulse {
    0%, 100% {
        background: 
            radial-gradient(circle at center, 
                rgba(0, 255, 128, 0.4) 0%, 
                rgba(0, 128, 255, 0.3) 20%, 
                rgba(0, 0, 255, 0.3) 40%, 
                rgba(0, 0, 0, 0.95) 70%, 
                rgba(0, 0, 0, 0.98) 100%),
            repeating-linear-gradient(
                45deg,
                transparent, 
                transparent 20px,
                rgba(0, 255, 128, 0.05) 20px,
                rgba(0, 255, 128, 0.05) 40px
            );
    }
    50% {
        background: 
            radial-gradient(circle at center, 
                rgba(0, 255, 128, 0.5) 0%, 
                rgba(0, 128, 255, 0.4) 20%, 
                rgba(0, 0, 255, 0.4) 40%, 
                rgba(0, 0, 0, 0.9) 70%, 
                rgba(0, 0, 0, 0.95) 100%),
            repeating-linear-gradient(
                45deg,
                transparent, 
                transparent 20px,
                rgba(0, 128, 255, 0.1) 20px,
                rgba(0, 128, 255, 0.1) 40px
            );
    }
}

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

@keyframes inventoryLoadingTitleGlow {
    0%, 100% {
        text-shadow: 
            0 0 20px rgba(0, 255, 128, 0.8),
            0 0 40px rgba(0, 128, 255, 0.6),
            0 0 60px rgba(0, 255, 255, 0.4);
    }
    50% {
        text-shadow: 
            0 0 30px rgba(0, 255, 128, 1),
            0 0 60px rgba(0, 128, 255, 0.8),
            0 0 90px rgba(0, 255, 255, 0.6);
    }
}

@keyframes inventoryLoadingTextPulse {
    0%, 100% {
        opacity: 0.7;
        transform: scale(1);
    }
    50% {
        opacity: 1;
        transform: scale(1.05);
    }
}

/* 抽卡界面加载界面样式 */
#draw-card-panel-loading-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: 
        radial-gradient(circle at center, 
            rgba(128, 0, 255, 0.4) 0%, 
            rgba(0, 255, 255, 0.3) 20%,
            rgba(0, 0, 255, 0.3) 40%,
            rgba(0, 0, 0, 0.95) 70%,
            rgba(0, 0, 0, 0.98) 100%),
        repeating-linear-gradient(
            45deg,
            transparent, 
            transparent 20px,
            rgba(128, 0, 255, 0.05) 20px,
            rgba(128, 0, 255, 0.05) 40px
        );
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 20000;
    animation: loadingScreenPulse 2s ease-in-out infinite;
}

#draw-card-panel-loading-screen h2 {
    font-size: 48px;
    color: #00ffff;
    text-shadow: 
        0 0 20px rgba(0, 255, 255, 0.8),
        0 0 40px rgba(128, 0, 255, 0.6),
        0 0 60px rgba(255, 0, 255, 0.4);
    margin-bottom: 40px;
    letter-spacing: 5px;
    animation: loadingTitleGlow 2s ease-in-out infinite;
}

#draw-card-panel-loading-spinner {
    width: 120px;
    height: 120px;
    border: 6px solid rgba(0, 255, 255, 0.2);
    border-top: 6px solid #00ffff;
    border-radius: 50%;
    animation: cardDrawSpin 1s linear infinite;
    box-shadow: 
        0 0 30px rgba(0, 255, 255, 0.5),
        inset 0 0 30px rgba(0, 255, 255, 0.2);
    margin-bottom: 30px;
}

#draw-card-panel-loading-text {
    font-size: 24px;
    color: #ff69b4;
    text-shadow: 
        0 0 15px rgba(255, 105, 180, 0.8),
        0 0 30px rgba(147, 112, 219, 0.6);
    letter-spacing: 2px;
    animation: loadingTextPulse 1.5s ease-in-out infinite;
    margin-bottom: 20px;
}

#draw-card-panel-loading-progress-container {
    width: 400px;
    height: 8px;
    background-color: rgba(20, 25, 35, 0.9);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 
        0 0 20px rgba(0, 255, 255, 0.3),
        inset 0 0 20px rgba(0, 255, 255, 0.1);
    border: 2px solid rgba(0, 255, 255, 0.3);
}

#draw-card-panel-loading-progress-bar {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #9370db, #00ffff, #ff69b4);
    background-size: 200% auto;
    animation: progressGradient 2s linear infinite;
    box-shadow: 0 0 15px rgba(0, 255, 255, 0.7);
    transition: width 0.3s ease;
    border-radius: 8px;
}

/* 副本界面加载界面样式 */
#dungeon-panel-loading-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: 
        radial-gradient(circle at center, 
            rgba(0, 255, 128, 0.4) 0%, 
            rgba(139, 69, 19, 0.3) 20%,
            rgba(0, 0, 0, 0.95) 70%,
            rgba(0, 0, 0, 0.98) 100%),
        repeating-linear-gradient(
            45deg,
            transparent, 
            transparent 20px,
            rgba(0, 255, 128, 0.05) 20px,
            rgba(0, 255, 128, 0.05) 40px
        );
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 20000;
    animation: inventoryLoadingScreenPulse 2s ease-in-out infinite;
}

#dungeon-panel-loading-screen h2 {
    font-size: 48px;
    color: #00ff88;
    text-shadow: 
        0 0 20px rgba(0, 255, 128, 0.8),
        0 0 40px rgba(139, 69, 19, 0.6),
        0 0 60px rgba(0, 255, 128, 0.4);
    margin-bottom: 40px;
    letter-spacing: 5px;
    animation: inventoryLoadingTitleGlow 2s ease-in-out infinite;
}

#dungeon-panel-loading-spinner {
    width: 120px;
    height: 120px;
    border: 6px solid rgba(0, 255, 128, 0.2);
    border-top: 6px solid #00ff88;
    border-radius: 50%;
    animation: inventorySpin 1s linear infinite;
    box-shadow: 
        0 0 30px rgba(0, 255, 128, 0.5),
        inset 0 0 30px rgba(0, 255, 128, 0.2);
    margin-bottom: 30px;
}

#dungeon-panel-loading-text {
    font-size: 24px;
    color: #00ff88;
    text-shadow: 
        0 0 15px rgba(0, 255, 128, 0.8),
        0 0 30px rgba(139, 69, 19, 0.6);
    letter-spacing: 2px;
    animation: inventoryLoadingTextPulse 1.5s ease-in-out infinite;
    margin-bottom: 20px;
}

#dungeon-panel-loading-progress-container {
    width: 400px;
    height: 8px;
    background-color: rgba(20, 25, 35, 0.9);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 
        0 0 20px rgba(0, 255, 128, 0.3),
        inset 0 0 20px rgba(0, 255, 128, 0.1);
    border: 2px solid rgba(0, 255, 128, 0.3);
}

#dungeon-panel-loading-progress-bar {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #00ff80, #0080ff, #9370db);
    background-size: 200% auto;
    animation: progressGradient 2s linear infinite;
    box-shadow: 0 0 15px rgba(0, 255, 128, 0.7);
    transition: width 0.3s ease;
    border-radius: 8px;
}