/* Global */
body {
    margin: 0;
    font-family: "Segoe UI", Roboto, sans-serif;
    background-color: #060801;
    /* dark bg */
    color: #eee;
    /* light text for readability */
    line-height: 1.5;
}

/* Header */
header { 
    background-color: #441151; /* purple header */
    color: #eee;
    padding: 1rem;
    position: relative;
    width: 100%;
    box-sizing: border-box; /* include padding in width */
    overflow-x: hidden;     /* prevent horizontal scroll */
}

header h1 {
    margin: 0;
    font-size: 1.5rem;
}

#sort_tier {
    position: absolute;
    top: 1em;
    left: 25em;
    margin-top: 0.5rem;
    background-color: #1e2328;
    border: 2px solid #77867f;
    border-radius: 8px;
    color: #d1d5db;
    padding: 0.25rem 0.5rem;
    cursor: pointer;
}

/* container keeps centered column but rows are full-width */
#user_container {
    width: 100%;
    max-width: 980px;      /* keeps it from being too wide */
    margin: 1rem auto;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0 1rem;

    /* prevent overflow and enable horizontal scroll if content is too wide */
    overflow-x: auto;
    box-sizing: border-box;
}

/* each user is a horizontal row with columns */
.user {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0em 2em;
    border-bottom: 1px solid #77867f;
    font-family: Arial, sans-serif;
    font-size: 18px; /* slightly bigger for visibility */
    max-width: 1200px; /* bigger, but still not full screen */
    width: 80%; /* fills most of screen, but keeps margins */
    margin: 0em auto; /* centers with some vertical spacing */
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    background-color: #1e2328;
    color: #d1d5db;
    transition: background 0.2s, border-color 0.2s;
}

.user:hover {
    border-bottom-color: #470063;
    background-color: #2a2f36;
}

.top-row {
    display: flex;
    align-items: center;
    gap: 1.5em;
    flex-shrink: 0;
}

.username {
    min-width: 250px;
    max-width: 500px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #ffffff;
}

.tiers {
    display: flex;
    gap: 2em;
}

.tiers p {
    width: 60px;
    text-align: right;
    color: #cbd5e1;
}

/* responsive: collapse to stacked layout on small screens */
@media (max-width: 600px) {
    .position {
        margin: 0.2em
    }
    .user {
        display: flex;
        flex-direction: column;
        gap: 0.15rem;
        padding: 0.25rem 0.5rem;
        box-sizing: border-box;
    }

    /* Top row: position + username */
    .user .top-row {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        width: 100%;
    }

    .user .position {
        font-weight: 700;
        text-align: center;
        width: 50px;
    }

    .user .username {
        flex: 1;
        text-align: left;
        margin: 0;
    }

    /* Bottom row: tiers */
    .user .tiers {
        display: flex;
        justify-content: center;   /* center the row */
        gap: 0.5rem;               /* smaller spacing between tiers */
        width: 100%;
    }

    .user .tier1,
    .user .tier2,
    .user .tier3 {
        text-align: center;        /* align numbers nicely */
        min-width: 50px;           /* optional for consistent width */
    }
}