/* --- Rankings Page General Layout --- */

.rankings-container {
    display: flex;         /* Use Flexbox for side-by-side layout */
    gap: 30px;             /* Space between the two columns */
    align-items: flex-start; /* Align cards to the top */
    width: 100%;           /* Use full available width */
    margin-top: 30px;      /* Space below page header */
}

/* --- Individual Ranking Section (Card Styling) --- */
.rankings-section {
    background-color: var(--card); /* Card background */
    border-radius: 16px;          /* Rounded corners */
    box-shadow: var(--shadow);      /* Card shadow */
    padding: 20px 25px;           /* Padding INSIDE the card */
    margin-bottom: 30px;          /* Space below card (used when stacked) */
    overflow: hidden;             /* Ensure content respects radius */
    flex: 1;                      /* Each card takes half the space */
    min-width: 0;                 /* Prevent overflow issues */
}

.rankings-section h2 {
    font-size: 22px;
    font-weight: 800;
    color: var(--fg);
    text-align: center;
    margin-bottom: 15px; /* Reduced margin */
    letter-spacing: -0.03em;
    margin-top: 0; /* Remove top margin */
}

/* --- Ranking List (Inside the Card) --- */
.rankings-list {
    max-width: none;       /* Remove max-width */
    margin: 0;             /* Remove auto margins */
    padding: 0;            /* Remove list padding */
    width: 100%;           /* List takes full width of card */
    box-sizing: border-box;
}

/* --- Individual Rank Item --- */
.rank-item {
    display: flex;
    align-items: center;
    padding: 12px 0; /* Vertical padding, horizontal padding comes from section */
    border-bottom: 1px solid var(--border); /* Separator */
    gap: 15px; /* Space between elements */
    position: relative; /* Needed for badge positioning */
}

.rank-item:last-child {
    border-bottom: none; /* Remove border from last item */
}

.rank-position {
    font-size: 16px;
    font-weight: 700;
    color: var(--muted);
    min-width: 40px; /* Align ranks */
    text-align: right;
    flex-shrink: 0; /* Prevent rank number from shrinking */
}

/* --- Avatar Wrapper and Badge --- */
.rank-avatar-wrapper {
    position: relative; /* Container for the avatar and badge */
    width: 48px;
    height: 48px;
    flex-shrink: 0; /* Prevent wrapper from shrinking */
}

.rank-avatar {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: var(--chip); /* Placeholder background */
    display: block; /* Remove extra space below image */
}

.first-place-badge {
    position: absolute;
    bottom: -2px;
    right: -5px;
    background-color: gold;
    color: #444;
    font-size: 10px;
    font-weight: 800;
    padding: 2px 5px;
    border-radius: 5px;
    line-height: 1;
    border: 1px solid rgba(0,0,0,0.2);
    box-shadow: 0 1px 2px rgba(0,0,0,0.2);
    transform: rotate(10deg);
    z-index: 1;
}

/* --- Rank Count Text --- */
.rank-count {
    font-size: 16px;
    font-weight: 600;
    color: var(--fg);
    flex-grow: 1; /* Take remaining space */
    white-space: nowrap; /* Prevent wrapping */
    overflow: hidden; /* Hide overflow */
    text-overflow: ellipsis; /* Add ... if text is too long */
}

/* Add " Gradients" / " Palettes" text using CSS */
.gradient-list .rank-count::after {
    content: " Gradients";
    font-weight: normal; /* Make the unit text less prominent */
    color: var(--muted);
    margin-left: 4px;
}
.palette-list .rank-count::after {
     content: " Palettes";
     font-weight: normal;
     color: var(--muted);
     margin-left: 4px;
}

/* --- Message for Empty Lists --- */
.no-rankings {
    text-align: center;
    color: var(--muted);
    padding: 40px 20px;
}

/* --- Responsive Stacking --- */
@media (max-width: 768px) { /* Stacking breakpoint */
    .rankings-container {
        flex-direction: column; /* Stack vertically */
        gap: 30px;             /* Adjust gap when stacked */
    }
    /* Section takes full width when stacked */
     .rankings-container > .rankings-section {
        width: 100%;
        box-sizing: border-box; /* Ensure padding is included */
     }
}