@charset "utf-8";

body,div,img,form,input,ul,li,h1,h2,a,span{margin: 0; padding: 0; border: none; box-sizing: border-box;}
ul,li{list-style: none;}
/* body,input,h1,h2{font-family: "微软雅黑", "黑体"; font-size: 16px; line-height: 30px; font-weight: normal; position: relative; } */


a{color: #000; text-decoration: none;}
a:hover{color: #D92636;}
.fl{float: left;}
.fr{float: right;}
.clearflx:after{content: ""; display: block; visibility: hidden; clear: both;}
.cl{ clear:both; height:0px; overflow:hidden;}

.none{display: none;}

img{
	/* 元素不能成为鼠标事件的target */
	pointer-events:none;
	-webkit-pointer-events:none;
	-ms-pointer-events:none;
	-moz-pointer-events:none;
}
*:not(input) {
    -webkit-touch-callout:none;/*系统默认菜单被禁用*/
    -webkit-user-select:none;/*webkit浏览器*/
    -khtml-user-select:none;/*早起浏览器*/
    -moz-user-select:none;/*火狐浏览器*/
    -ms-user-select:none;/*IE浏览器*/
    user-select:none;/*用户是否能够选中文本*/
}

/* 常规设置 */
.container{position: relative; width: 100%; height: 750px; overflow: hidden;}
.video{position: absolute; left: 0; top: 0; width: 100%; height: 100%;}
/* 音频设置 */
.audioBox{position: absolute; left: 30px; top: 30px; width: 45px; height: 45px;  z-index : 101;}
.play_on{background: url("icon_music_play.png") no-repeat left top/100%; width: 45px; height: 45px; display: none;}
.play_off{background: url("icon_music_pause.png") no-repeat left top/100%; width: 45px; height: 45px; display: none;}
.audio_preloader{display: none;}

/* p0 加载页 */
.p0{background: url("bg1.jpg") no-repeat left top/100% 100%; position: relative; width: 100%; height: 750px;}
.p1_loading{position: absolute; left: 0; top: 0; width: 100%; height: 100%;}
.loading_progress{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2}.progress_container{width:400px;height:80px}
.progress_bar{width:100%;height:20px;background:rgba(255,255,255,.2);border-radius:10px;overflow:hidden}
.progress_fill{width:0%;height:100%;background:#fff;animation:progress 2s ease-in-out forwards}
.text_container{height:40px;position:relative;margin-top:15px}
.progress_num,.p1_tips_click{position:absolute;width:100%;text-align:center;color:#fff;font-size:28px;left:0;top:0}
.p1_tips_click{animation:fadeIn .5s}
@keyframes progress{0%{width:0%}100%{width:100%}}@keyframes fadeIn{from{opacity:0}to{opacity:1}}


/* p1 */
.p1{ position: relative; width: 100%; height: 750px; background: url("bg1.jpg") no-repeat left top/100% 100%; }
.p1_content{position: absolute; width: 100%; height: 100%;background: url("bg1_new2.jpg") no-repeat left top/100% 100%;}
.p1_l_bg{position: absolute; left: 0; bottom: 0; }
.p1_r_bg{position: absolute; right: 0; bottom: 10px; }
.p1_l{position: absolute; left: 158px; top: 429px; }
.p1_r{position: absolute;right: 0;bottom: -4px;}
.p1_top{position: absolute; right: 0; top: 0; }
.p1_bottom{position: absolute;left: 0;bottom: -6px;}
.p1_t{position: absolute; left: 50%; top: 50%; margin-left: -384px; margin-top: -244.5px; }
.p1_e1{position: absolute; left: 66px; bottom: 22px;}
.p1_e2{position: absolute; left: 523px; top: 441px;}
.p1_e3{position: absolute; left: 663px; top: 495px;}
.p1_e4{position: absolute; left: 123px; top: 382px;}
.p1_tips{position: absolute; left: 528px; top: 406px;}
.p1_loading_pic{position: absolute;left: 328px;top: 216px;}
.p1_loading_pic2{position: absolute;left: 888px;top: 296px;}
.tips_hand{position: absolute; left: 80px; top: 170px;}
.tips_hand img{width: 200px;}


/* p2 原因互动页 */
.p2{ position: relative; width: 100%; height: 750px;}
.p2_content{background: url("bg2.jpg") no-repeat left top/100% 100%; position: absolute; left: 0; top: 0; width: 100%; height: 100%;}
.p20_box{position: absolute; left: 55px; top: 51px; width: 367px; height: 459px;}
.p20_bg{position: absolute; left: 0; top: 180px; }
.p20_i{position: absolute;left: 162px;top: 460px;}
.p20_q{position: absolute; left: 108px; top: 40px; display: none; }

.p40_box{position: absolute; left: 471px; top: 41px; width: 355px; height: 473px;}
.p40_bg{position: absolute;left: 49px;top: 210px;}
.p40_i{position: absolute;left: 227px;top: 470px;}
.p40_q{position: absolute; left: 0; top: 40px; display: none; }

.p25_box{position: absolute; left: 826px; top: 57px; width: 419px; height: 457px;}
.p25_bg{position: absolute;left: 89px;top: 200px;}
.p25_i{position: absolute;left: 291px;top: 454px;}
.p25_q{position: absolute; left: 28px; top: 40px; display: none; }

.p2_logo{position: absolute; right: 35px; bottom: 17px;}
.btn_back{position: absolute; left: 90px; top: 17px;}
.btn_jump{position: absolute; right: 22px; top: 17px;}
.btn_back img, .btn_jump img{width: 150px;}
.p2_tips{position: absolute; left: 404px; top: 570px;}
.btn_goP3{position:absolute;left:50%;margin-left:-222px;bottom:50px;z-index:99;cursor:pointer;}
.p2 .tips_hand1{position: absolute; left: 140px; top: 180px;}

/* p3 视频选择页 */
.p3{position: relative; width: 100%; height: 750px;}
.p3_content{background: url("bg3.jpg") no-repeat left top/100%; position: absolute; width: 100%; height: 750px;}
.p3_btn1{position: absolute; left: 90px; top: 130px; background: url("p3_btn1.png") no-repeat left top/100% 100%; width: 399px; height: 282px; padding: 20px; text-align: center;}
.p3_btn2{position: absolute; right: 90px; top: 130px; background: url("p3_btn2.png") no-repeat left top/100% 100%; width: 464px; height: 279px; padding: 20px; text-align: center;}
.p3_btn1>img{width: 241px; height: 196px;}
.p3_btn2>img{width: 269px; height: 176px;}
.tips_hand2{position: absolute;left: 240px;top: 150px;}


/* 游戏设置 */
.p4{background:#ffffff;position:relative;width:100%;height:750px;overflow:hidden;}
.btn_playGame{position:absolute;left:50%;margin-left:-222px;bottom:50px;z-index:99;cursor:pointer;}
.btn_again{position:absolute;left: 20%;bottom:50px;z-index:99;cursor:pointer;display:none;}
.btn_share{position:absolute;right: 20%;bottom:50px;z-index:99;cursor:pointer;display:none;}

.p4::before,
.p4::after {
    content: '';
    position: absolute;
    width: 400px;
    height: 400px;
    border-radius: 50%;
    z-index: 1;
    animation: circlePulse 8s ease-in-out infinite;
}

.p4::before {
    background: #1e88e5;
    top: -150px;
    right: -50px;
    transform: rotate(-15deg);
    animation-delay: 0s;
}

.p4::after {
    background: #ffd700;
    bottom: -150px;
    left: -50px;
    transform: rotate(15deg);
    animation-delay: 4s;
}

@keyframes circlePulse {
    0% {
        transform: rotate(-15deg) scale(1);
        opacity: 0.7;
    }
    50% {
        transform: rotate(-15deg) scale(1.15);
        opacity: 0.9;
    }
    100% {
        transform: rotate(-15deg) scale(1);
        opacity: 0.7;
    }
}

@keyframes circlePulse2 {
    0% {
        transform: rotate(15deg) scale(1);
        opacity: 0.7;
    }
    50% {
        transform: rotate(15deg) scale(1.15);
        opacity: 0.9;
    }
    100% {
        transform: rotate(15deg) scale(1);
        opacity: 0.7;
    }
}

.p4::before {
    animation-name: circlePulse;
}

.p4::after {
    animation-name: circlePulse2;
}

.animated-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.animated-bg::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at center, transparent 0%, rgba(0,0,0,0.1) 100%);
    animation: pulse 4s ease-in-out infinite;
}

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

.floating-particles {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    pointer-events: none;
}

.particle {
    position: absolute;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    pointer-events: none;
    animation: float 6s ease-in-out infinite;
}

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

.game-container {
    position: relative;
    z-index: 3;
    width: 800px;
    height: 600px;
    margin: 0 auto;
    border-radius: 20px;
    transform-style: preserve-3d;
    perspective: 1000px;
    transition: transform 0.3s ease;
    isolation: isolate;
}

.vaccine {
    position: absolute;
    left: 50px;
    top: 50%;
    transform: translateY(-50%);
    width: 250px;
    height: 250px;
    z-index: 10;
    cursor: pointer;
    transition: all 0.3s ease;
}

.vaccine:hover {
    transform: translateY(-50%) scale(1.1);
}

.vaccine img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.vaccine.charging::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 80px;
    height: 80px;
    background: radial-gradient(circle, 
        rgba(255, 255, 255, 1) 0%,
        rgba(0, 255, 255, 0.9) 30%,
        rgba(0, 255, 0, 0.8) 60%,
        rgba(0, 255, 255, 0.6) 100%
    );
    border-radius: 50%;
    box-shadow: 
        0 0 40px rgba(255, 255, 255, 0.8),
        0 0 80px rgba(0, 255, 255, 0.6),
        0 0 120px rgba(0, 255, 0, 0.4);
    animation: charging 2s ease-out, charging-pulse 0.5s ease-in-out infinite;
    z-index: 1001;
    filter: blur(2px);
}

@keyframes charging {
    0% {
        transform: translateY(-50%) scale(0.5);
        opacity: 0;
        filter: blur(2px) brightness(1);
    }
    20% {
        transform: translateY(-50%) scale(1.2);
        opacity: 0.8;
        filter: blur(3px) brightness(1.5);
    }
    40% {
        transform: translateY(-50%) scale(0.8);
        opacity: 0.9;
        filter: blur(2px) brightness(1.2);
    }
    60% {
        transform: translateY(-50%) scale(1.1);
        opacity: 1;
        filter: blur(3px) brightness(1.8);
    }
    80% {
        transform: translateY(-50%) scale(0.9);
        opacity: 0.95;
        filter: blur(2px) brightness(1.5);
    }
    100% {
        transform: translateY(-50%) scale(1);
        opacity: 1;
        filter: blur(2px) brightness(2);
    }
}

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

.vaccine.attacking {
    animation: kamehameha-pose 3s ease-out;
}

.energy-wave {
    position: absolute;
    left: 200px;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    background: 
        radial-gradient(circle at left center,
            rgba(255, 255, 255, 1) 0%,
            rgba(0, 255, 255, 0.9) 20%,
            rgba(0, 255, 0, 0.8) 40%,
            rgba(0, 255, 255, 0.6) 60%,
            rgba(0, 255, 0, 0.4) 80%,
            rgba(0, 255, 255, 0.2) 100%
        ),
        linear-gradient(90deg,
            rgba(255, 255, 255, 0.8) 0%,
            rgba(0, 255, 255, 0.6) 50%,
            rgba(0, 255, 0, 0.4) 100%
        );
    border-radius: 50%;
    box-shadow: 
        0 0 50px rgba(255, 255, 255, 0.8),
        0 0 100px rgba(0, 255, 255, 0.6),
        0 0 150px rgba(0, 255, 0, 0.4);
    z-index: 999;
    animation: kamehameha 0.5s ease-out;
    transform-origin: left center;
    filter: blur(3px);
    clip-path: polygon(0 50%, 0 50%, 0 50%);
}

@keyframes kamehameha {
    0% {
        width: 0;
        height: 0;
        opacity: 0;
        clip-path: polygon(0 50%, 0 50%, 0 50%);
        filter: blur(3px) brightness(1);
    }
    20% {
        width: 100px;
        height: 100px;
        opacity: 0.8;
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
        filter: blur(2px) brightness(1.5);
    }
    40% {
        width: 300px;
        height: 300px;
        opacity: 1;
        clip-path: polygon(
            0 20%,
            100% 0,
            100% 100%,
            0 80%
        );
        border-radius: 0 50% 50% 0;
        filter: blur(3px) brightness(2);
    }
    60% {
        width: 800px;
        height: 800px;
        opacity: 0.9;
        clip-path: polygon(
            0 30%,
            100% 0,
            100% 100%,
            0 70%
        );
        border-radius: 0 60% 60% 0;
        filter: blur(4px) brightness(1.8);
    }
    80% {
        width: 1500px;
        height: 1500px;
        opacity: 0.8;
        clip-path: polygon(
            0 35%,
            100% 0,
            100% 100%,
            0 65%
        );
        border-radius: 0 70% 70% 0;
        filter: blur(5px) brightness(1.5);
    }
    100% {
        width: 2000px;
        height: 2000px;
        opacity: 0;
        clip-path: polygon(
            0 40%,
            100% 0,
            100% 100%,
            0 60%
        );
        border-radius: 0 80% 80% 0;
        filter: blur(6px) brightness(1);
    }
}

.vaccine.attacking {
    animation: kamehameha-pose 3s ease-out;
}

@keyframes kamehameha-pose {
    0% {
        transform: translateY(-50%) scale(1);
    }
    20% {
        transform: translateY(-50%) scale(1.2) rotate(-15deg);
    }
    40% {
        transform: translateY(-50%) scale(1.1) rotate(15deg);
    }
    60% {
        transform: translateY(-50%) scale(1.3) rotate(-10deg);
    }
    80% {
        transform: translateY(-50%) scale(1.2) rotate(10deg);
    }
    100% {
        transform: translateY(-50%) scale(1);
    }
}

.virus-item {
    position: absolute;
    width: 80px;
    height: 80px;
    cursor: pointer;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    transform-style: preserve-3d;
    animation: float 3s ease-in-out infinite;
    animation-delay: calc(var(--delay, 0) * 1s);
    z-index: 5;
}

.virus-item:hover {
    transform: scale(1.1) translateZ(20px);
    filter: brightness(1.2);
}

.virus-item img {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.2));
}

.virus-item img.hit {
    opacity: 0;
    transform: scale(0.5) rotate(180deg) translateZ(-20px);
}

.virus-item.squash {
    animation: squash 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes squash {
    0% {
        transform: scale(1) translateZ(0);
    }
    50% {
        transform: scale(1.2, 0.5) translateZ(10px);
    }
    100% {
        transform: scale(0.5) translateZ(-20px);
    }
}

.virus-item.hit {
    animation: virus-explode 0.5s ease-out forwards;
}

@keyframes virus-explode {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.5);
        opacity: 0.5;
        filter: brightness(2);
    }
    100% {
        transform: scale(0);
        opacity: 0;
        filter: brightness(0);
    }
}

.score {
    position: absolute;
    top: 20px;
    left: 90px;
    font-size: 24px;
    background: rgba(255, 255, 255, 0.9);
    padding: 10px 20px;
    border-radius: 15px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    transform: translateZ(10px);
    transition: all 0.3s ease;
}

.score:hover {
    transform: translateZ(15px) scale(1.05);
}

.health-tip {
    position: absolute;
    background: rgba(255, 255, 255, 0.9);
    padding: 15px 85px 15px 25px;
    border-radius: 40px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    white-space: normal;
    z-index: 99;
    font-size: 18px;
    color: #333;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.5);
    pointer-events: none;
    transform: translate(-50%, -50%);
    line-height: 1.5;
    opacity: 0;
    animation: tip-appear 0.5s ease-out forwards, tip-float 3s ease-in-out infinite;
    text-align: justify;
    width: 250px;
    word-wrap: break-word;
    display: flex;
    align-items: center;
    gap: 15px;
    background-repeat: no-repeat;
    background-position: right center;
    background-size: 60px 60px;
}

.health-tip::after {
    display: none; /* 移除伪元素，改用背景图片 */
}

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

@keyframes tip-float {
    0% {
        transform: translate(-50%, -50%);
    }
    50% {
        transform: translate(-50%, calc(-50% - 10px));
    }
    100% {
        transform: translate(-50%, -50%);
    }
}

.health-tip.show {
    animation: danmaku 12s linear forwards;
}

@keyframes danmaku {
    0% {
        left: -100%;
        opacity: 0;
    }
    5% {
        opacity: 1;
    }
    95% {
        opacity: 1;
    }
    100% {
        left: 100%;
        opacity: 0;
    }
}

.particles-container{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:1000;}
.particle{position:absolute;background:#ff6b6b;border-radius:50%;pointer-events:none;}
@keyframes explode{0%{transform:scale(1);opacity:1;}100%{transform:scale(0);opacity:0;}}
.explode{animation:explode 0.5s ease-out forwards;}

/* 分享盒 */
.share_box{width: 100%; height: 100%; position: fixed; left: 0px; top: 0px; z-index: 101; display: none;}
.share_bg{width: 100%; height: 100%; background: rgba(25, 28, 34, 0.58); position: absolute; left: 0px; top: 0px; -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px);}
.share_png{background: url("share_tips2.png") no-repeat left 10px; width: 100%; height: 100%; position: absolute; left: 0px; top: 0px;}



.main-phone{ transform-origin: 375px 375px;}
.main-phone2{width: 1334px; height: 100%; transform-origin: 375px 375px;}
/* 竖屏 */
@media screen and (orientation: portrait) {
    /* .main-phone{ width: 35000px; height: 750px;} */
	.main-phone, .main-phone2, .tips{-webkit-transform:rotate(90deg); -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg);}   
}
/* 横屏 */
@media screen and (orientation: landscape) {
    /* .main-phone{ width: 35000px; height: 750px;} */
    .main-phone2{width: 100%; height: 100%;}
	.main-phone, .main-phone2{margin: 0; -webkit-transform:rotate(0); -moz-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0);}

    .share_png{background: url("share_tips2.png") no-repeat left 10px;}

}



/* 横屏适配 */
@media screen and (orientation: landscape) and (max-width: 900px) {
    .p4 {
        height: 100vh;
    }

    .game-container {
        height: 80vh;
        width: auto;
        aspect-ratio: 4/3;
    }

    .score {
        top: 10px;
        right: 10px;
    }

    .health-tip {
        bottom: 10px;
    }
}

/* 添加触摸事件支持 */
@media (hover: none) {
    .particle {
        /* 移动端优化动画性能 */
        will-change: transform, opacity;
    }
}

.virus-item:nth-child(odd) {
    --delay: 0.5;
}

.virus-item:nth-child(even) {
    --delay: 1;
}

.virus-item:nth-child(3n) {
    --delay: 1.5;
}

.virus-item:nth-child(3n+1) {
    --delay: 2;
}

.virus-item:nth-child(3n+2) {
    --delay: 2.5;
}

/* 创建一个新的容器来放置弹幕 */
.danmaku-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1000;
    transform: translateZ(1px);
}

.virus-shield {
    position: absolute;
    left: 300px;
    top: 50%;
    transform: translateY(-50%);
    width: 50px;
    height: 400px;
    background: radial-gradient(circle at right center,
        rgba(0, 150, 255, 0.8) 0%,
        rgba(0, 100, 255, 0.6) 30%,
        rgba(0, 50, 255, 0.4) 60%,
        rgba(0, 0, 255, 0.2) 100%
    );
    border-radius: 50% 0 0 50%;
    box-shadow: 
        0 0 50px rgba(0, 150, 255, 0.6),
        0 0 100px rgba(0, 100, 255, 0.4),
        0 0 150px rgba(0, 150, 255, 0.3);
    z-index: 4;
    filter: blur(2px);
    opacity: 1;
    transition: all 0.3s ease;
    animation: shield-float 3s ease-in-out infinite, shield-glow 2s ease-in-out infinite;
}

.virus-shield.shield-broken {
    animation: shield-break 0.5s ease-out forwards;
}

@keyframes shield-break {
    0% {
        opacity: 1;
        transform: translateY(-50%) scale(1);
        filter: blur(2px) brightness(1);
    }
    50% {
        opacity: 0.8;
        transform: translateY(-50%) scale(1.2);
        filter: blur(4px) brightness(2);
    }
    100% {
        opacity: 0;
        transform: translateY(-50%) scale(1.5);
        filter: blur(6px) brightness(1);
    }
}

.shield-explosion {
    position: absolute;
    left: 300px;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    background: radial-gradient(circle at center,
        rgba(255, 255, 255, 1) 0%,
        rgba(0, 150, 255, 0.8) 20%,
        rgba(0, 100, 255, 0.6) 40%,
        rgba(0, 50, 255, 0.4) 60%,
        rgba(0, 0, 255, 0.2) 80%
    );
    border-radius: 50%;
    box-shadow: 
        0 0 100px rgba(255, 255, 255, 0.8),
        0 0 200px rgba(0, 150, 255, 0.6),
        0 0 300px rgba(0, 100, 255, 0.4);
    z-index: 5;
    opacity: 0;
    animation: shield-explode 1s ease-out forwards;
}

@keyframes shield-explode {
    0% {
        width: 50px;
        height: 400px;
        opacity: 0;
        transform: translateY(-50%) scale(1);
        filter: blur(2px) brightness(1);
    }
    20% {
        opacity: 1;
        filter: blur(4px) brightness(2);
    }
    50% {
        width: 200px;
        height: 600px;
        opacity: 0.8;
        filter: blur(6px) brightness(1.5);
    }
    100% {
        width: 400px;
        height: 800px;
        opacity: 0;
        transform: translateY(-50%) scale(1.5);
        filter: blur(8px) brightness(1);
    }
}

@keyframes shield-float {
    0% {
        transform: translateY(-50%) translateX(0);
    }
    50% {
        transform: translateY(-50%) translateX(-10px);
    }
    100% {
        transform: translateY(-50%) translateX(0);
    }
}

@keyframes shield-glow {
    0% {
        box-shadow: 
            0 0 50px rgba(0, 150, 255, 0.6),
            0 0 100px rgba(0, 100, 255, 0.4),
            0 0 150px rgba(0, 150, 255, 0.3);
    }
    50% {
        box-shadow: 
            0 0 70px rgba(0, 150, 255, 0.8),
            0 0 120px rgba(0, 100, 255, 0.6),
            0 0 170px rgba(0, 150, 255, 0.5);
    }
    100% {
        box-shadow: 
            0 0 50px rgba(0, 150, 255, 0.6),
            0 0 100px rgba(0, 100, 255, 0.4),
            0 0 150px rgba(0, 150, 255, 0.3);
    }
}

.vaccine.charging {
    animation: vaccine-shake 0.2s ease-in-out infinite;
}

@keyframes vaccine-shake {
    0% {
        transform: translateY(-50%) rotate(0deg);
    }
    25% {
        transform: translateY(-50%) rotate(-2deg);
    }
    50% {
        transform: translateY(-50%) rotate(0deg);
    }
    75% {
        transform: translateY(-50%) rotate(2deg);
    }
    100% {
        transform: translateY(-50%) rotate(0deg);
    }
}

.virus-item.hit {
    animation: virus-explode 0.5s ease-out forwards;
}

@keyframes virus-explode {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.5);
        opacity: 0.5;
        filter: brightness(2);
    }
    100% {
        transform: scale(0);
        opacity: 0;
        filter: brightness(0);
    }
}

/* 移除疫苗移动到中心的动画 */
.vaccine.move-to-center {
    animation: moveToCenter 1s ease-out forwards;
}

@keyframes moveToCenter {
    0% {
        left: 50px;
        transform: translateY(-50%);
    }
    100% {
        left: 50%;
        transform: translate(-50%, -50%);
    }
}