:root {
    /* === Content RoadMillion === */
    --road-max-width: 1200px;
    --road-margin: 50px auto;
    --road-padding: 30px;
    --road-bg: #1e1e1e;
    --road-text: #fff;
    --road-highlight: #FFD700;
    --road-border-radius: 5px;
    --road-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
    --road-box-sizing: border-box;

    /* === Section Spacing & Fonts === */
    --road-section-gap: 20px;
    --road-row-gap: 15px;
    --road-row-margin-top: 50px;
    --road-row-padding: 15px;
    --road-row-border-radius: 10px;
    --road-row-transition: box-shadow 0.3s ease-in-out;

    --road-font-text1: 18px;
    --road-font-text2: 16px;

    /* === Card Styles === */
    --card-bg: #2e2e2e;
    --card-shadow: 0 4px 6px rgba(0, 0, 0, 0.8);
    --card-min-width: 250px;
    --card-max-width-percent: 30%;
    --card-height: 100px;
    --card-padding: 15px;
    --card-img-size: 60px;
    --card-img-border: 1px solid var(--road-highlight);
    --card-gap: 15px;

    /* === Rank Styles === */
    --rank-font-size: 24px;
    --laurel-size: 60px;
    --laurel-icon-size: 50px;
    --rank-text-size: 18px;

    /* === Progress Styles === */
    --progress-section-width: 50%;
    --progress-container-bg: #333;
    --progress-container-height: 20px;
    --progress-bar-bg: var(--road-highlight);
    --progress-transition: width 0.5s ease-in-out;
    --progress-text-size: 12px;

    /* === Keyframes === */
    --pulse-start-shadow: 0px 0px 20px 5px rgba(255, 215, 0, 0.8);
    --pulse-end-shadow: 0px 0px 30px 10px rgba(255, 215, 0, 1);
}

.content-roadMillion {
    max-width: var(--road-max-width);
    margin: var(--road-margin);
    padding: var(--road-padding);
    background-color: var(--road-bg);
    border-radius: var(--road-border-radius);
    box-shadow: var(--road-shadow);
    color: var(--road-text);
    box-sizing: var(--road-box-sizing);
}

.content-roadMillion h3 {
    color: var(--road-highlight);
    text-align: center;
}

.section1-roadMillion {
    text-align: center;
    color: var(--road-text);
    gap: var(--road-section-gap);
}

.text1-sec1 {
    font-size: var(--road-font-text1);
}

.text2-sec1 {
    font-size: var(--road-font-text2);
}

.section2-roadMillion {
    display: flex;
    flex-direction: column;
    gap: var(--road-section-gap);
    margin-top: var(--road-section-gap);
}

.roadMillion-user-row {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: var(--road-row-gap);
    width: 100%;
    margin: var(--road-row-margin-top) auto 0;
    padding: var(--road-row-padding);
    border-radius: var(--road-row-border-radius);
    transition: var(--road-row-transition);
    flex-wrap: wrap;
}

.first-place {
    box-shadow: var(--pulse-start-shadow);
    border: 2px solid var(--road-highlight);
    animation: pulse-glow 1s infinite alternate ease-in-out;
}

@keyframes pulse-glow {
    0% {
        box-shadow: var(--pulse-start-shadow);
    }

    100% {
        box-shadow: var(--pulse-end-shadow);
    }
}

.roadMillion-rank {
    font-size: var(--rank-font-size);
    font-weight: bold;
    color: var(--road-highlight);
    min-width: 50px;
    text-align: center;
    position: relative;
}

.laurel-rank {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--laurel-size);
    color: var(--road-highlight);
    width: var(--laurel-size);
    height: var(--laurel-size);
}

.laurel-rank i {
    font-size: var(--laurel-icon-size);
}

.rank-text {
    position: absolute;
    font-size: var(--rank-text-size);
    font-weight: bold;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -40%);
    color: white;
    text-shadow: 0 0 2px black;
}

.roadMillion-user-card {
    display: flex;
    align-items: center;
    background: var(--card-bg);
    padding: var(--card-padding);
    box-shadow: var(--card-shadow);
    flex: 1;
    min-width: var(--card-min-width);
    max-width: var(--card-max-width-percent);
    height: var(--card-height);
    justify-content: flex-start;
}

.roadMillion-user-card img {
    width: var(--card-img-size);
    height: var(--card-img-size);
    object-fit: cover;
    border: var(--card-img-border);
    margin-right: var(--card-gap);
}

.roadMillion-user-info {
    display: flex;
    flex-direction: column;
}

.roadMillion-user-info h5 {
    color: var(--road-highlight);
    margin: 0;
    font-size: var(--road-font-text1);
}

.roadMillion-user-info p {
    color: #ccc;
    margin: 5px 0;
    font-size: var(--road-font-text2);
}

.roadMillion-progress-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: var(--progress-section-width);
}

.roadMillion-progress-container {
    width: 100%;
    background: var(--progress-container-bg);
    border-radius: var(--road-border-radius);
    overflow: hidden;
    height: var(--progress-container-height);
    margin-bottom: 5px;
}

.roadMillion-progress-bar {
    height: 100%;
    background: var(--progress-bar-bg);
    transition: var(--progress-transition);
}

.roadMillion-progress-text {
    color: var(--road-highlight);
    font-size: var(--progress-text-size);
    text-align: center;
}

.luxury-link {
    color: var(--road-highlight);
    text-decoration: none;
}

.luxury-link.disabled {
    color: var(--road-text);
    cursor: not-allowed;
    pointer-events: none;
    text-decoration: none;
}

@media (max-width: 600px) {
    .roadMillion-user-row {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .roadMillion-user-card {
        max-width: 100%;
        justify-content: center;
    }

    .roadMillion-progress-section {
        width: 100%;
        margin-top: 10px;
    }
}