/* 倒计时组件样式 */

.countdown-container {
    position: absolute;
    top: 40%; /* 距离顶部40%，适配移动端和桌面端 */
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    z-index: 10;
    pointer-events: none; /* 🔧 不阻挡绘画区域 */
}

.countdown-title {
    font-size: clamp(18px, 1.56vw, 30px); /* 30/1920=1.56% */
    font-weight: bold;
    margin-bottom: clamp(6px, 0.625vw, 12px); /* 12/1920=0.625% */
    /* 使用text-shadow实现3px描边（简化为单层） */
    text-shadow: 
        -3px -3px 0 #fff,
        -3px  3px 0 #fff,
         3px -3px 0 #fff,
         3px  3px 0 #fff,
        -3px  0   0 #fff,
         3px  0   0 #fff,
         0   -3px 0 #fff,
         0    3px 0 #fff;
}

/* 移动端：标题文字允许换行 */
@media (max-width: 768px) {
    .countdown-title {
        max-width: 90vw;
        word-break: break-word;
        white-space: normal; /* 允许换行 */
    }
}

.countdown-time {
    font-family: 'Knewave', sans-serif;
    font-size: clamp(50px, 5.21vw, 100px); /* 100/1920=5.21% */
    font-weight: normal;
    line-height: 1.3; /* 行高，给换行留出空间 */
    max-width: 90vw; /* 限制最大宽度 */
    /* 使用text-shadow实现描边 */
    text-shadow: 
        -4px -4px 0 #fff,
        -4px  4px 0 #fff,
         4px -4px 0 #fff,
         4px  4px 0 #fff,
        -4px  0   0 #fff,
         4px  0   0 #fff,
         0   -4px 0 #fff,
         0    4px 0 #fff;
}

/* 桌面端：强制不换行 */
@media (min-width: 769px) {
    .countdown-time {
        white-space: nowrap;
    }
}

/* 移动端：允许在日期和时间之间换行 */
@media (max-width: 768px) {
    .countdown-time {
        font-size: clamp(40px, 8vw, 80px);
        display: flex;
        flex-direction: column;
        align-items: center;
        line-height: 1.2;
    }
    
    .countdown-date,
    .countdown-time-part {
        display: block;
        white-space: nowrap;
    }
}

/* 超小屏幕进一步缩小 */
@media (max-width: 480px) {
    .countdown-time {
        font-size: clamp(30px, 7vw, 60px);
    }
}

/* 暗色模式 */
@media (prefers-color-scheme: dark) {
    .countdown-title,
    .countdown-time {
        color: #fff;
        /* 暗色模式使用黑色描边（3px） */
        text-shadow: 
            -3px -3px 0 #000,
             3px -3px 0 #000,
            -3px  3px 0 #000,
             3px  3px 0 #000,
            -3px  0   0 #000,
             3px  0   0 #000,
             0   -3px 0 #000,
             0    3px 0 #000;
    }
}