/* Common gradient bridge style for all roles */
.roles-gradient-bridge {
    position: relative;
}
.roles-gradient-bridge::after {
    content: "";
    position: absolute;
    right: -12px;
    width: 12px;
    top: 0;
    height: 100%;
    pointer-events: none;
    transition: opacity 0.4s;
    opacity: 0.45;
}

/* Gradient bridge effect for All Roles after the roles-card */
.all-roles-gradient-bridge::after {
    background: linear-gradient(90deg, var(--all-roles-primary-color) 0%, var(--all-roles-secondary-color) 60%, transparent 100%);
}

/* Gradient bridge effect for Citizen role after the roles-card */
.citizen-role-gradient-bridge::after {
    background: linear-gradient(90deg, var(--citizen-role-primary-color) 0%, var(--citizen-role-secondary-color) 60%, transparent 100%);
}

/* Gradient bridge effect for Mafia role after the roles-card */
.mafia-role-gradient-bridge::after {
    background: linear-gradient(90deg, var(--mafia-role-primary-color) 0%, var(--mafia-role-secondary-color) 40%, transparent 80%);
}

/* Gradient bridge effect for Don role after the roles-card */
.don-role-gradient-bridge::after {
    background: linear-gradient(90deg, var(--don-role-primary-color) 0%, var(--don-role-secondary-color) 60%, transparent 100%);
}

/* Gradient bridge effect for Sheriff role after the roles-card */
.sheriff-role-gradient-bridge::after {
    background: linear-gradient(90deg, var(--sheriff-role-primary-color) 0%, var(--sheriff-role-secondary-color) 60%, transparent 100%);
}

/* Common styles for all role statistics components */

:root {
    --roles-header-text-color-dark: rgba(0,0,0,.75);
    --roles-header-text-color-light: #fafafa;
    --all-roles-primary-color: #17c2fe;
    --all-roles-secondary-color: #0a4f68;
    --citizen-role-primary-color: #f73430;
    --citizen-role-secondary-color: #4c1c1c;
    --sheriff-role-primary-color: #feae17;
    --sheriff-role-secondary-color: #68470a;
    --mafia-role-primary-color: #000000;
    --mafia-role-secondary-color: #595959;
    --don-role-primary-color: #7c3aed;
    --don-role-secondary-color: #2e1065;
}
/* Don role card header */
.don-role-card-header {
    background: var(--don-role-primary-color);
    color: var(--roles-header-text-color-light);
}

/* Don role card content */
.don-role-card-content {
    background: var(--don-role-secondary-color);
    color: var(--roles-header-text-color-light);
}

/* Don role subtitle */
.don-role-subtitle {
    font-weight: 500;
    color: var(--don-role-primary-color);
}

/* Don role grid */
.don-role-grid {
    border-color: var(--don-role-primary-color);
    border-width: 1px;
}

/* Don role progress bar overrides */
.don-role-grid .mud-progress-linear:not(.mud-progress-linear-buffer)::before {
    background-color: var(--don-role-primary-color);
}

.don-role-grid .mud-progress-linear:not(.mud-progress-linear-buffer) .mud-progress-linear-bar {
    background-color: var(--don-role-primary-color);
}

.roles-card {
    background: none;
    box-shadow: none;
}

.roles-header-title-text {
    margin: 0;
    color: var(--roles-header-text-color-dark);
    font-weight: 700;
    font-size: 1.25rem;
    text-transform: uppercase;
}

.roles-header-games-text {
    color: var(--roles-header-text-color-dark);
    font-weight: 700;
    font-size: 0.6rem;
}

.mafia-role-card-header .roles-header-title-text {
    color: var(--roles-header-text-color-light);
}

.mafia-role-card-header .roles-header-games-text {
    color: var(--roles-header-text-color-light);
}

.roles-card-header {
    display: block;
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
    font-weight: bold;
    letter-spacing: 0.5px;
}

.all-roles-card-header {
    background: var(--all-roles-primary-color);
}

/* Citizen role card header */
.citizen-role-card-header {
    background: var(--citizen-role-primary-color);
}

/* Sheriff role card header */
.sheriff-role-card-header {
    background: var(--sheriff-role-primary-color);
}

.mafia-role-card-header {
    background: var(--mafia-role-primary-color);
}

.roles-card-content{
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 12px 0;
}

.all-roles-card-content {
    background: var(--all-roles-secondary-color);
}

/* Citizen role card content */
.citizen-role-card-content {
    background: var(--citizen-role-secondary-color);
}

/* Sheriff role card content */
.sheriff-role-card-content {
    background: var(--sheriff-role-secondary-color);
}
.mafia-role-card-content {
    background: var(--mafia-role-secondary-color);
}

.all-roles-subtitle {
    font-weight: 500;
    color: var(--all-roles-primary-color);
}

.citizen-role-subtitle {
    font-weight: 500;
    color: var(--citizen-role-primary-color);
}

/* Sheriff role subtitle */
.sheriff-role-subtitle {
    font-weight: 500;
    color: var(--sheriff-role-primary-color);
}
.mafia-role-subtitle {
    font-weight: 500;
    color: var(--mafia-role-primary-color);
}

.role-grid {
    background-color: #222529;
    border-radius: 15px;
    overflow: hidden;
}

.all-roles-grid {
    border-color: var(--all-roles-primary-color);
    border-width: 1px;
}

.citizen-role-grid {
    border-color: var(--citizen-role-primary-color);
    border-width: 1px;
}

/* Sheriff role grid */
.sheriff-role-grid {
    border-color: var(--sheriff-role-primary-color);
    border-width: 1px;
}

.mafia-role-grid {
    border-color: white;
    border-width: 1px;
}

.all-roles-grid .mud-progress-linear:not(.mud-progress-linear-buffer)::before {
    background-color: var(--all-roles-primary-color);
}

.all-roles-grid .mud-progress-linear:not(.mud-progress-linear-buffer) .mud-progress-linear-bar {
    background-color: var(--all-roles-primary-color);
}

/* Citizen role progress bar overrides */
.citizen-role-grid .mud-progress-linear:not(.mud-progress-linear-buffer)::before {
    background-color: var(--citizen-role-primary-color);
}

.citizen-role-grid .mud-progress-linear:not(.mud-progress-linear-buffer) .mud-progress-linear-bar {
    background-color: var(--citizen-role-primary-color);
}

/* Sheriff role progress bar overrides */
.sheriff-role-grid .mud-progress-linear:not(.mud-progress-linear-buffer)::before {
    background-color: var(--sheriff-role-primary-color);
}

.sheriff-role-grid .mud-progress-linear:not(.mud-progress-linear-buffer) .mud-progress-linear-bar {
    background-color: var(--sheriff-role-primary-color);
}

/* Mafia role progress bar overrides */
.mafia-role-grid .mud-progress-linear:not(.mud-progress-linear-buffer)::before {
    background-color: var(--mafia-role-primary-color);
}

.mafia-role-grid .mud-progress-linear:not(.mud-progress-linear-buffer) .mud-progress-linear-bar {
    background-color: var(--mafia-role-primary-color);
}