:root,
[data-bs-theme="dark"] {
    --bs-body-bg: #121012;
    --bs-body-color: #e8e2d6;
    --bs-emphasis-color: #f5f0e6;
    --bs-secondary-color: #c9932f;
    --bs-tertiary-bg: #1c1815;
    --bs-secondary-bg: #1c1815;
    --bs-border-color: #4a4038;
    --bs-border-color-translucent: #4a4038;
    --bs-primary: #a31f1f;
    --bs-primary-rgb: 163, 31, 31;
    --bs-primary-text-emphasis: #e05a5a;
    --bs-link-color: #c9932f;
    --bs-link-color-rgb: 201, 147, 47;
    --bs-link-hover-color: #e0ac4a;
    --bs-link-hover-color-rgb: 224, 172, 74;
    --bs-danger: #a31f1f;
    --bs-danger-rgb: 163, 31, 31;

    --bs-accordion-bg: #1c1815;
    --bs-accordion-border-color: #4a4038;
    --bs-accordion-active-bg: #2a1414;
    --bs-accordion-active-color: #e0ac4a;
    --bs-accordion-btn-focus-box-shadow: 0 0 0 0.2rem rgba(163, 31, 31, 0.35);

    --bs-nav-tabs-link-active-bg: #1c1815;
    --bs-nav-tabs-link-active-border-color: #4a4038 #4a4038 #1c1815;
}

body {
    background-image: radial-gradient(ellipse at top, #1a1512 0%, #121012 60%);
    background-attachment: fixed;
}

h1, h2, h3, h4, h5, h6,
.navbar-brand,
.accordion-button {
    font-family: 'Oswald', sans-serif;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.navbar {
    background-color: #1c1815 !important;
    border-bottom: 2px solid var(--bs-primary);
}

.navbar-brand {
    color: var(--bs-primary-text-emphasis) !important;
    text-shadow: 0 0 8px rgba(163, 31, 31, 0.5);
}

.nav-tabs {
    border-bottom-color: var(--bs-border-color);
}

.nav-tabs .nav-link {
    color: var(--bs-body-color);
    font-family: 'Oswald', sans-serif;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    border: none;
    border-bottom: 3px solid transparent;
}

@media (max-width: 575.98px) {
    .nav-tabs .nav-link {
        padding: 0.4rem 0.5rem;
        font-size: 0.8rem;
        letter-spacing: 0;
    }
}

.nav-tabs .nav-link:hover {
    border-color: transparent;
    color: var(--bs-link-hover-color);
}

.nav-tabs .nav-link.active {
    background-color: transparent;
    color: var(--bs-primary-text-emphasis);
    border-bottom: 3px solid var(--bs-primary);
}

.nav-pills .nav-link {
    color: var(--bs-body-color);
    font-family: 'Oswald', sans-serif;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.nav-pills .nav-link.active {
    background-color: var(--bs-primary);
    color: #f5f0e6;
}

.character-portrait {
    border: 2px solid var(--bs-primary);
    box-shadow: 0 0 16px rgba(163, 31, 31, 0.35);
}

.accordion-button::after {
    filter: invert(60%) sepia(60%) saturate(500%) hue-rotate(-10deg);
}

.accordion-button:not(.collapsed) {
    box-shadow: inset 0 -1px 0 var(--bs-border-color);
}

.sheet-portrait {
    border: 2px solid var(--bs-primary);
    box-shadow: 0 0 16px rgba(163, 31, 31, 0.35);
}

.form-check-input:checked {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
}

.form-check-input:focus {
    box-shadow: 0 0 0 0.2rem rgba(163, 31, 31, 0.35);
}

.condition-silhouette path {
    fill: var(--bs-primary);
    opacity: 0.08;
}

/* Bootstrap 5.3 bakes literal colors into .btn-primary's compiled CSS instead of
   reading --bs-primary, so overriding the variable alone doesn't retheme buttons. */
.btn-primary {
    --bs-btn-color: #f5f0e6;
    --bs-btn-bg: var(--bs-primary);
    --bs-btn-border-color: var(--bs-primary);
    --bs-btn-hover-color: #f5f0e6;
    --bs-btn-hover-bg: #7a1818;
    --bs-btn-hover-border-color: #7a1818;
    --bs-btn-active-color: #f5f0e6;
    --bs-btn-active-bg: #6b1515;
    --bs-btn-active-border-color: #6b1515;
    --bs-btn-disabled-color: #f5f0e6;
    --bs-btn-disabled-bg: var(--bs-primary);
    --bs-btn-disabled-border-color: var(--bs-primary);
    --bs-btn-focus-shadow-rgb: 163, 31, 31;
}

.info-hero {
    position: relative;
    min-height: 18rem;
    border-radius: 0.375rem;
    overflow: hidden;
    background: url('../images/wildtalents-cover.jpg') center 20% / cover no-repeat;
    border: 2px solid var(--bs-primary);
    box-shadow: 0 0 24px rgba(163, 31, 31, 0.35);
}

.info-hero__scrim {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 1.5rem;
    background: linear-gradient(180deg, rgba(18, 16, 18, 0) 30%, rgba(18, 16, 18, 0.92) 100%);
}

.info-hero__title {
    font-family: 'Oswald', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #f5f0e6;
    text-shadow: 0 0 12px rgba(163, 31, 31, 0.6);
    font-size: 2rem;
    margin-bottom: 0.25rem;
}

.info-hero__tagline {
    color: var(--bs-secondary-color);
    margin-bottom: 0;
}

@media (max-width: 575.98px) {
    .info-hero {
        min-height: 13rem;
    }
    .info-hero__title {
        font-size: 1.4rem;
    }
}