/* 争分夺秒环节特殊样式 */
.timerace-leaderboard {
    grid-template-columns: 1fr !important;
    max-width: 900px;
    margin: 0 auto;
    position: relative;
}

/* 争分夺秒特殊标题 */
.leaderboard-title {
    background: #ffffff;
    background-clip: text;
    -webkit-background-clip: text;
    /* color: transparent;
    text-shadow: 0 2px 10px rgba(217, 119, 6, 0.3); */
}

/* 争分夺秒页面标题和倒计时容器样式 */
.header {
    gap: 2rem;
    margin-bottom: 2rem;
 
    flex-wrap: wrap; /* 允许在小屏幕上换行 */
}

/* 用户项样式覆盖 */
.timerace-item {
    background: linear-gradient(135deg, rgba(249, 115, 22, 0.12), rgba(234, 88, 12, 0.08)) !important;
    border: 1px solid rgba(249, 115, 22, 0.25) !important;
    min-height: 75px !important;
    height: 75px !important;
    position: relative;
    overflow: visible !important;
    /* 优化平滑过渡效果 */
    transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1),
                opacity 0.7s ease,
                background 0.4s ease,
                box-shadow 0.4s ease,
                border 0.4s ease !important;
    will-change: transform, opacity; /* 性能优化 */
    backface-visibility: hidden; /* 防止闪烁 */
    transform-origin: center center; /* 确保变换从中心点开始 */
    transform-style: preserve-3d; /* 启用3D变换 */
    z-index: 5; /* 确保基础层级 */
}

/* 过渡状态对所有元素应用相同的基础尺寸 */
.timerace-item.transition-state {
    transform: scale(1) !important; /* 所有项目使用相同的尺寸 */
    z-index: 5 !important;
    background: linear-gradient(135deg, rgba(180, 180, 180, 0.2), rgba(150, 150, 150, 0.1)) !important;
    border: 1px solid rgba(150, 150, 150, 0.3) !important; 
    box-shadow: 0 5px 15px rgba(150, 150, 150, 0.1) !important;
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                background 0.35s ease,
                box-shadow 0.35s ease,
                opacity 0.35s ease !important;
    pointer-events: none; /* 防止过渡期间的交互 */
}

/* 为上移和下移的元素提供不同的过渡时间 */
.timerace-item.move-up {
    transition-duration: 0.75s !important;
    z-index: 10 !important; /* 上移的元素需要更高的层级 */
}

.timerace-item.move-down {
    transition-duration: 0.95s !important;
}

.timerace-item .user-icon {
    background: linear-gradient(135deg, #f97316, #ea580c) !important;
    box-shadow: 0 0 20px rgba(249, 115, 22, 0.3) !important;
    transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                background 0.3s ease, 
                box-shadow 0.3s ease, 
                border 0.3s ease !important;
    will-change: transform; /* 性能优化 */
}

/* 统一设置用户名为白色，没有阴影 */
.user-name {
    color: #ffffff !important;
    text-shadow: none !important;
}

/* 奖牌样式 - 冠军（金） */
.medal-rank-1 {
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.3), rgba(255, 165, 0, 0.2)) !important;
    border: 1px solid rgba(255, 215, 0, 0.6) !important;
    box-shadow: 0 5px 20px rgba(255, 215, 0, 0.3) !important;
    transform: scale(1) !important;
    z-index: 10 !important;
    transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1),
                background 0.4s ease, 
                box-shadow 0.4s ease,
                border 0.4s ease !important;
}

.medal-rank-1 .user-icon {
    background: linear-gradient(135deg, #FFD700, #FFA500) !important;
    box-shadow: 0 0 25px rgba(255, 215, 0, 0.7) !important;
    border: 2px solid rgba(255, 215, 0, 0.5) !important;
}

/* 移除用户名特殊颜色和阴影 */
.medal-rank-1 .user-name {
    font-weight: 700 !important;
}

/* 奖牌样式 - 亚军（银） */
.medal-rank-2 {
    background: linear-gradient(135deg, rgba(192, 192, 192, 0.3), rgba(160, 160, 160, 0.2)) !important;
    border: 1px solid rgba(192, 192, 192, 0.5) !important;
    box-shadow: 0 5px 20px rgba(192, 192, 192, 0.3) !important;
    transform: scale(1) !important;
    z-index: 9 !important;
    transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1),
                background 0.4s ease, 
                box-shadow 0.4s ease,
                border 0.4s ease !important;
}

.medal-rank-2 .user-icon {
    background: linear-gradient(135deg, #E0E0E0, #A0A0A0) !important;
    box-shadow: 0 0 25px rgba(192, 192, 192, 0.7) !important;
    border: 2px solid rgba(192, 192, 192, 0.5) !important;
}

/* 移除用户名特殊颜色和阴影 */
.medal-rank-2 .user-name {
    font-weight: 600 !important;
}

/* 奖牌样式 - 季军（铜） */
.medal-rank-3 {
    background: linear-gradient(135deg, rgba(205, 127, 50, 0.3), rgba(184, 115, 51, 0.2)) !important;
    border: 1px solid rgba(205, 127, 50, 0.5) !important;
    box-shadow: 0 5px 20px rgba(205, 127, 50, 0.3) !important;
    transform: scale(1) !important;
    z-index: 8 !important;
    transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1),
                background 0.4s ease, 
                box-shadow 0.4s ease,
                border 0.4s ease !important;
}

.medal-rank-3 .user-icon {
    background: linear-gradient(135deg, #CD7F32, #A06020) !important;
    box-shadow: 0 0 25px rgba(205, 127, 50, 0.7) !important;
    border: 2px solid rgba(205, 127, 50, 0.5) !important;
}

/* 移除用户名特殊颜色和阴影 */
.medal-rank-3 .user-name {
    font-weight: 600 !important;
}

/* 4-8名样式（灰色配色） */
.other-rank {
    background: linear-gradient(135deg, rgba(113, 113, 122, 0.2), rgba(82, 82, 91, 0.1)) !important;
    border: 1px solid rgba(113, 113, 122, 0.3) !important;
    box-shadow: 0 5px 15px rgba(113, 113, 122, 0.1) !important;
    transform: scale(1) !important; /* 确保没有放大效果 */
    z-index: 5 !important;
    transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1),
                background 0.4s ease, 
                box-shadow 0.4s ease,
                border 0.4s ease !important;
}

.other-rank .user-icon {
    background: linear-gradient(135deg, #71717a, #52525b) !important;
    box-shadow: 0 0 20px rgba(113, 113, 122, 0.3) !important;
}

/* 奖牌标识样式 - 隐藏不显示 */
.medal-badge {
    display: none !important;
}

/* 用时显示 */
.time-used {
    font-size: 1.3rem;
    font-weight: 600;
    color: #fef3c7;
    padding: 0.25rem 0.7rem;
    background: linear-gradient(135deg, rgba(251, 146, 60, 0.3), rgba(249, 115, 22, 0.2));
    border-radius: 0.5rem;
    white-space: nowrap;
    margin-right: 0.5rem;
    width: 100px; /* 固定宽度 */
    text-align: center; /* 文本居中 */
    box-sizing: border-box; /* 确保 padding 不影响总宽度 */
}

.time-used::before {
    content: "⏱️ ";
    margin-right: 0.25rem;
}

/* 分数和用时更新动画优化 */
@keyframes scoreUpdate {
    0% {
        transform: scale(1);
    }
    30% {
        transform: scale(1.15);
    }
    60% {
        transform: scale(0.95);
    }
    85% {
        transform: scale(1.02);
    }
    100% {
        transform: scale(1);
    }
}

.score-update {
    animation: scoreUpdate 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* 时间更新动画 */
@keyframes timeUpdate {
    0% {
        transform: scale(1);
    }
    30% {
        transform: scale(1.1);
        background: linear-gradient(135deg, rgba(251, 146, 60, 0.5), rgba(249, 115, 22, 0.3));
    }
    60% {
        transform: scale(0.95);
    }
    85% {
        transform: scale(1.02);
    }
    100% {
        transform: scale(1);
    }
}

.time-update {
    animation: timeUpdate 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* 添加排名变化高亮闪烁效果 */
@keyframes rankChangeHighlight {
    0% {
        box-shadow: 0 0 0 rgba(249, 115, 22, 0);
    }
    30% {
        box-shadow: 0 0 15px rgba(249, 115, 22, 0.5);
    }
    100% {
        box-shadow: 0 0 0 rgba(249, 115, 22, 0);
    }
}

.rank-changed {
    animation: rankChangeHighlight 1.2s ease-out;
}

/* 争分夺秒倒计时特殊样式 */
.countdown-container {
    background: rgba(255, 255, 255, 0.08);
    border-radius: 1rem;
    padding: 1rem 1.5rem;
    /* backdrop-filter: blur(15px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3); */
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    min-width: 140px;
}

.countdown-time {
    font-size: 3rem !important; /* 增大字体 */
    font-weight: 700;
    color: #ffffff;
}

/* 响应式调整 */
@media (max-width: 768px) {
    .header {
        flex-direction: column;
        gap: 1rem;
        align-items: center; /* 确保小屏幕上垂直居中 */
    }
    
    .countdown-container {
        width: 80%; /* 在小屏幕上设置宽度 */
        max-width: 300px;
        padding: 1rem 1.5rem;
    }
    
    .countdown-time {
        font-size: 2.5rem !important;
    }
    
    .time-used {
        font-size: 0.9rem;
        padding: 0.2rem 0.5rem;
        width: 65px; /* 小屏幕下的固定宽度 */
    }
    
    .timerace-item {
        height: 70px !important;
        min-height: 70px !important;
    }
    
    .medal-badge {
        font-size: 18px;
        right: 8px;
        top: 5px;
    }
}