/* ACHIEVEMENTS PAGE — Winner cards with animated borders */

/* Page overrides */
body.achievements-page .section {
    padding: 2rem 0;
}

body.achievements-page .section-title {
    font-size: 2rem;
    margin-bottom: 2rem;
    background: none;
    -webkit-background-clip: unset;
    -webkit-text-fill-color: unset;
    background-clip: unset;
    animation: none;
    color: #f8f8fa;
    text-align: left;
    width: 100%;
    max-width: 1280px;
    margin-left: auto;
    margin-right: auto;
    padding: 0 var(--space-xl);
}

body.achievements-page .container {
    max-width: 1280px;
    padding: 0 var(--space-xl);
}

/* Winners grid */
.winners-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: var(--space-xl);
    max-width: 1280px;
    margin: 0 auto;
}

.winner-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
    padding: var(--space-xl);
    background: rgba(255, 255, 255, .02);
    border: 2px solid transparent;
    border-radius: var(--radius-xl);
    background-clip: padding-box;
    position: relative;
    transition: transform 420ms cubic-bezier(.2, .9, .2, 1), box-shadow 360ms cubic-bezier(.2, .9, .2, 1);
    will-change: transform, box-shadow;
    overflow: hidden;
}

.winner-card::before {
    content: '';
    position: absolute;
    inset: -3px;
    background: conic-gradient(from var(--angle), transparent 0%, transparent 30%, var(--color-red) 50%, var(--color-red-light) 60%, transparent 70%, transparent 100%);
    border-radius: var(--radius-xl);
    z-index: -2;
    animation: borderRotate 4s linear infinite;
}

.winner-card::after {
    content: '';
    position: absolute;
    inset: 2px;
    background: var(--color-black-soft);
    border-radius: calc(var(--radius-xl) - 2px);
    z-index: -1;
}

.winner-card:hover {
    transform: translateY(-10px) translateZ(0);
    box-shadow: 0 18px 44px rgba(255, 0, 51, .18);
}

.winner-card:hover::before {
    animation: borderRotate 2s linear infinite;
}

.winner-rank {
    font-size: .875rem;
    font-weight: 800;
    color: var(--color-red);
    text-transform: uppercase;
    letter-spacing: .08em;
}

.winner-info h3 {
    font-size: 1.3rem;
    font-weight: 700;
    margin-bottom: var(--space-md);
    color: var(--color-white);
}

.winner-info p {
    font-size: .95rem;
    line-height: 1.8;
    color: var(--color-text-secondary);
}

/* Responsive */
@media (max-width: 1023px) {
    .winners-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 767px) {
    .winners-grid {
        grid-template-columns: 1fr !important;
    }
}