/* 粒子倒计时容器 */
#particleCountdownContainer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 65;
    pointer-events: none;
    display: none;
}

#particleCountdownCanvas {
    display: block;
    width: 100%;
    height: 100%;
}

/* CSS 扩散圆环容器 */
.pc-ring-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: hidden;
}

.pc-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 10px;
    height: 10px;
    border-radius: 50%;
    pointer-events: none;
    opacity: 0;
}

/* 最外层 - 粗边框，最先扩散 */
.pc-ring-1 {
    border: 8px solid rgba(255, 255, 255, 0.9);
    box-shadow:
        0 0 15px rgba(255, 255, 255, 0.9),
        0 0 30px rgba(100, 180, 255, 0.7),
        0 0 45px rgba(0, 100, 255, 0.5);
}

/* 中间层 - 中等边框 */
.pc-ring-2 {
    border: 5px solid rgba(200, 230, 255, 0.7);
    box-shadow:
        0 0 10px rgba(255, 255, 255, 0.7),
        0 0 25px rgba(100, 180, 255, 0.5);
}

/* 内层 - 细边框，最后扩散 */
.pc-ring-3 {
    border: 3px solid rgba(150, 200, 255, 0.6);
    box-shadow:
        0 0 8px rgba(255, 255, 255, 0.5),
        0 0 20px rgba(100, 180, 255, 0.4);
}

/* 圆环激活状态 */
.pc-ring-1.active {
    animation: pcRingExpand1 var(--pc-ring-duration) ease-out forwards;
}

.pc-ring-2.active {
    animation: pcRingExpand2 var(--pc-ring-duration) ease-out forwards;
    animation-delay: 30ms;
}

.pc-ring-3.active {
    animation: pcRingExpand3 var(--pc-ring-duration) ease-out forwards;
    animation-delay: 60ms;
}

/* 扩散动画 - 最外层 */
@keyframes pcRingExpand1 {
    0% {
        width: 10px;
        height: 10px;
        opacity: 1;
        border-width: 8px;
    }
    50% {
        opacity: 0.9;
    }
    100% {
        width: var(--pc-ring-size);
        height: var(--pc-ring-size);
        opacity: 0;
        border-width: 2px;
    }
}

/* 扩散动画 - 中间层 */
@keyframes pcRingExpand2 {
    0% {
        width: 10px;
        height: 10px;
        opacity: 0.8;
        border-width: 5px;
    }
    50% {
        opacity: 0.7;
    }
    100% {
        width: var(--pc-ring-size);
        height: var(--pc-ring-size);
        opacity: 0;
        border-width: 1px;
    }
}

/* 扩散动画 - 内层 */
@keyframes pcRingExpand3 {
    0% {
        width: 10px;
        height: 10px;
        opacity: 0.7;
        border-width: 3px;
    }
    50% {
        opacity: 0.5;
    }
    100% {
        width: var(--pc-ring-size);
        height: var(--pc-ring-size);
        opacity: 0;
        border-width: 1px;
    }
}

/* 响应式 - 平板端 */
@media (max-width: 900px) {
    .pc-ring-1 {
        border-width: 6px;
    }
    .pc-ring-2 {
        border-width: 4px;
    }
    .pc-ring-3 {
        border-width: 2px;
    }
}

/* 响应式 - 手机端 */
@media (max-width: 600px) {
    .pc-ring-1 {
        border-width: 4px;
        box-shadow:
            0 0 10px rgba(255, 255, 255, 0.9),
            0 0 20px rgba(100, 180, 255, 0.7);
    }
    .pc-ring-2 {
        border-width: 3px;
        box-shadow:
            0 0 8px rgba(255, 255, 255, 0.7),
            0 0 15px rgba(100, 180, 255, 0.5);
    }
    .pc-ring-3 {
        border-width: 2px;
        box-shadow:
            0 0 5px rgba(255, 255, 255, 0.5),
            0 0 10px rgba(100, 180, 255, 0.4);
    }
}

/* 响应式 - 手机横屏 */
@media (max-height: 500px) and (orientation: landscape) {
    .pc-ring-1 {
        border-width: 5px;
    }
    .pc-ring-2 {
        border-width: 3px;
    }
    .pc-ring-3 {
        border-width: 2px;
    }
}