@font-face {
    font-family: 'DINEngschriftStd';
    src: url('https://cdn.jsdelivr.net/npm/din-condensed-web@1.0.3/fonts/DINEngschriftStd.woff2') format('woff2'),
            url('https://cdn.jsdelivr.net/npm/din-condensed-web@1.0.3/fonts/DINEngschriftStd.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
.count-down-box {
    width: 100%;
    height: 162px;
    overflow: hidden;
}

.time {
    position: absolute;
    inset: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    top: 1.5vw;
}

/* ===== 单位组 ===== */
.unit-group {
    display: flex;
    align-items: center;
    position: relative;
}

.unit-group.month { margin-right: 0.5vw; }
.unit-group.day   { margin-right: 0.5vw; }
.unit-group.min   { margin-right: 0.5vw; }

.unit-text {
    margin-left: 0.5vw;
    margin-top: 3.5vw;
    font-size: 2.4vw;
    color: var(--cp-main);
    font-weight: bold;
}
.unit-title {
    top: -1.3vw;
    position: absolute;
    width: 6.8vw;
    text-align: right;
    font-size: 0.9vw;
    color: var(--cp-main);
    font-weight: bold;
    transform: scaleY(1.2);
}

/* ===== 单列 ===== */
.time-col {
    position: relative;
    width: 3.3vw;
    height: 6.5vw;
    perspective: 17vw;
}

.time-col-block {
    position: relative;
    display: flex;
    border-radius: 0.6vw;
    overflow: hidden;
    padding: 0 0.2vw;
    background: var(--cp-main);
}
.time-col-mask {
    width: 100%;
    height: 3.4vw;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 99;
    border-top: 0.1vw solid rgba(255 ,255 ,255, 0.8);
    background: rgba(255 ,255 ,255, 0.3);
}

/* ===== 外壳（负责整体圆角） ===== */
.time-col::before {
    content: "";
    position: absolute;
    inset: 0;
    /* background: var(--cp-main); */
     /* background:  linear-gradient(
        to bottom,
        rgba(255, 255, 255, 0.1),
        rgba(255, 255, 255, 0.2),
        rgba(255, 255, 255, 0.3),
        rgba(255, 255, 255, 0.5)
    ); */
    /* border-radius: 1vw 0 0 1vw; */
    z-index: 0;
}

/* ===== 静态兜底层 ===== */
.static {
    position: absolute;
    inset: 0;
    font-size: 5vw;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1;
    font-family: 'DINAlternate';
    src: local('DIN Alternate'),
            local('DIN Alternate Bold'),
            local('DINEngschrift Std');
    font-weight: bold;
    font-style: normal;
}

/* ===== 翻页容器 ===== */
.flip {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    transform-style: preserve-3d;
}

/* ===== 上下页 ===== */
.curr,
.next {
    position: absolute;
    width: 100%;
    height: 50%;
    overflow: hidden;
    /* background:  linear-gradient(
        to bottom,
        rgba(255, 255, 255, 0.1),
        rgba(255, 255, 255, 0.2),
        rgba(255, 255, 255, 0.3),
        rgba(255, 255, 255, 0.5)
    ); */
    color: #fff;
    backface-visibility: hidden;
    transform-style: preserve-3d;
     font-family: 'DINAlternate';
    src: local('DIN Alternate'),
            local('DIN Alternate Bold'),
            local('DINEngschrift Std');
    font-weight: bold;
    font-style: normal;
}

/* 上半页 - 当前值 */
.curr {
    top: 0;
    border-radius: 1vw 1vw 0 0;
    /* border-bottom: 0.2vw solid rgba(255 ,255 ,255, 0.8); */
    transform-origin: center bottom;
    /* background: var(--cp-main); */
}

/* 下半页 - 下一个值 */
.next {
    bottom: 0;
    border-radius: 0 0 1vw 1vw;
    /* border-top: 0.2vw solid rgba(255 ,255 ,255, 0.8); */
    background: rgba(255 ,255 ,255, 1);
    transform-origin: center top;
    transform: rotateX(-180deg);
}

/* 数字 - 关键修复：使用伪元素显示数字 */
.curr::before,
.next::before {
    content: attr(data-t);
    position: absolute;
    width: 100%;
    height: 200%; /* 两倍高度，因为只显示一半 */
    font-size: 5vw;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* 上半页显示上半部分数字 */
.curr::before {
    top: 0;
    line-height: 18vw; /* 整个数字的高度 */
}

/* 下半页显示下半部分数字 */
.next::before {
    bottom: 0;
    line-height: 18vw; /* 整个数字的高度 */
    transform: translateY(-50%);
}

/* ===== 翻页动画 ===== */
.flip.flipping .curr {
    transition: transform 0.55s ease-in-out;
    transform: rotateX(-180deg);
}

.flip.flipping .next {
    transition: transform 0.55s ease-in-out;
    transform: rotateX(0deg);
    width: 105%;
    background-color: rgba(255 ,255, 255, 0.2);
}

/* 动画结束后重置位置（无过渡） */
.flip:not(.flipping) .curr {
    transform: rotateX(0deg);
}

.flip:not(.flipping) .next {
    transform: rotateX(-180deg);
}
@media screen and (max-width: 768px){
    .time {
        transform: scale(1.8);
    }
}