.stats-container {
    display: flex;
    gap: 40px;
    margin-top: 40px;
    margin-bottom: 40px;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

body.red-mode .stats-container {
    flex-direction: row-reverse;
}

.stats-container.visible {
    opacity: 1;
    transform: translateY(0);
}

.stat-box {
    background: rgba(9, 13, 34, 0.05);
    border: 1px solid rgba(122, 143, 160, 0.3);
    border-radius: 15px;
    padding: 20px 30px;
    text-align: center;
    position: relative;
    backdrop-filter: blur(2px);
    flex: 1;
    transition: transform 0.3s ease, border-color 0.3s ease;
    text-decoration: none;
    display: block;
    cursor: pointer;
    color: inherit;
}

body.red-mode .stat-box {
    background: rgba(30, 10, 20, 0.05); /* Lower opacity */
    backdrop-filter: blur(2px); /* Reduce blur */
    border: 1px solid rgba(160, 122, 122, 0.3);
}

.stat-box:hover {
    transform: translateY(-5px);
    border-color: rgba(255, 255, 255, 0.5);
}

.stat-number {
    font-size: 42px;
    font-weight: 700;
    margin-bottom: 5px;
    font-family: 'Courier New', monospace;
}

/* Blue Theme Stats */
body:not(.red-mode) .stat-number {
    color: #64b5f6;
    text-shadow: 0 0 10px rgba(100, 181, 246, 0.5);
}

body:not(.red-mode) .stat-box:hover .stat-number {
    text-shadow: 0 0 20px rgba(100, 181, 246, 0.8);
}


body.red-mode .stat-number {
    color: #ff4081;
    text-shadow: 0 0 10px rgba(255, 64, 129, 0.5);
}

body.red-mode .stat-box:hover .stat-number {
    text-shadow: 0 0 20px rgba(255, 64, 129, 0.8);
}

.stat-label {
    font-size: 12px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #b0bec5;
}