/* Colorful table style matching your theme */
.table-purple {
    --bs-table-bg: #323232;                 /* dark background */
    --bs-table-striped-bg: #2a1f2d;         /* purple-tinted stripe */
    --bs-table-striped-color: #ffffff;      /* white text on striped rows */
    --bs-table-border-color: #895197;       /* purple borders */
    --bs-table-hover-bg: #3a2a3d;           /* hover effect */
    --bs-table-hover-color: #ffffff;        /* white hover text */
}

/* Make ALL table text white */
.table-purple td,
.table-purple th {
    color: #ffffff !important;
}

/* Header styling */
.table-purple thead th {
    background-color: #895197 !important;
    color: #ffffff !important;
    border-color: #895197 !important;
    font-size: 1.1rem;
}

/* Body cell borders */
.table-purple tbody td {
    border-color: #895197 !important;
}

/* Wrapper with rounded corners and solid purple background */
.table-rounded {
    background-color: #895197;       /* purple background */
    border-radius: 12px;
    overflow: hidden;
    padding: 0;
    margin-bottom: 20px;
    box-shadow: 0 0 10px rgba(137, 81, 151, 0.3); /* optional soft glow */
}

/* Rounded container */
.table-rounded {
    border-radius: 12px;
    overflow: hidden;              /* ensures corners stay clean */
    background-color: #895197;     /* purple border/background */
    padding: 5px;
}

/* Table itself */
.table-clean {
    width: 100%;
    margin: 0;
    border-collapse: collapse;     /* removes spacing that causes gaps */
}

/* Header */
.table-clean thead th {
    background-color: #895197;
    color: white;
    padding: 12px;
    font-size: 1.1rem;
}

/* Body rows */
.table-clean tbody tr {
    background-color: #2a2a2a;     /* dark grey */
    color: white;
}

.table-clean tbody tr:nth-child(even) {
    background-color: #323232;     /* slightly lighter grey */
}

/* Cell borders */
.table-clean th,
.table-clean td {
    border: 1px solid #895197;
    padding: 10px;
    text-align: center;
}
/* Enable automatic numbering inside the leaderboard */
.table-clean tbody {
    counter-reset: leaderboard-counter;
}

.table-clean tbody tr {
    counter-increment: leaderboard-counter;
    position: relative;
}

/* Number styling */
.table-clean tbody tr td:first-child {
    padding-left: 45px; /* space for number */
}

.table-clean tbody tr td:first-child::before {
    content: counter(leaderboard-counter) ".";
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: white;
    font-weight: 700;
    opacity: 0.9;
}

/* Clean lobby box */
.lobby-box {
    background-color: #895197;
    border: 2px solid #895197;
    border-radius: 10px;
    padding: 15px;
    margin-bottom: 20px;
}

/* Lobby title */
.lobby-title {
    color: white;
    font-size: 1.3rem;
    margin-bottom: 10px;
}

/* Player list */
.lobby-player {
    background-color: #2a2a2a;
    color: white;
    padding: 8px 12px;
    border-radius: 6px;
    margin-bottom: 6px;
    border: 1px solid #895197;
}

.player-list-box {
    background-color: #895197;
    border: 2px solid #895197;
    border-radius: 12px;
    padding: 20px;
    margin-top: 20px;
}

.player-list-title {
    color: white;
    font-size: 1.5rem;
    margin-bottom: 15px;
    font-weight: 600;
}

.player-item {
    background-color: #2a2a2a;
    color: white;
    padding: 10px 14px;
    border-radius: 6px;
    border: 1px solid #895197;
    margin-bottom: 8px;
    font-size: 1.1rem;
}

.player-list-box {
    counter-reset: contestant-counter;
}

.player-item {
    counter-increment: contestant-counter;
    position: relative;
    padding-left: 45px; /* space for the number */
}

.player-item::before {
    content: counter(contestant-counter) ".";
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: white;
    font-weight: 700;
    opacity: 0.9;
}