/**************************************************************************************************
    Kumikan Site Theme
    Load this AFTER lorekeeper.css.
    Recommended path: public/css/kumikan.css
**************************************************************************************************/

/**************************************************************************************************
    Root Variables
**************************************************************************************************/

:root {
    --kumi-bg: #e7e1d3;
    --kumi-bg-soft: #f1ece2;
    --kumi-panel: rgba(250, 246, 237, 0.82);
    --kumi-panel-soft: rgba(244, 239, 229, 0.72);
    --kumi-parchment: #fbf5e8;

    --kumi-green-black: #050b07;
    --kumi-green-deep: #0a1811;
    --kumi-green-mid: #102318;
    --kumi-green-accent: #718c68;
    --kumi-green-text: #2f4a2a;

    --kumi-gold: #c9a66a;
    --kumi-clay: #b27a4f;
    --kumi-clay-light: #c59468;

    --kumi-ink: #191c18;
    --kumi-muted: #686b62;
    --kumi-border: rgba(86, 72, 52, 0.18);

    --kumi-radius: 12px;
}

/**************************************************************************************************
    Global Page Background
**************************************************************************************************/

body {
    background:
        linear-gradient(
            135deg,
            #ece7dc 0%,
            #f4f0e8 42%,
            #e6e0d4 100%
        ) !important;
    color: var(--kumi-ink);
    font-family: Lato, sans-serif;
    font-size: 14px;
}

#app {
    min-height: 100vh;
    background:
        radial-gradient(circle at 72% 8%, rgba(255,255,255,0.65), transparent 28%),
        radial-gradient(circle at 30% 22%, rgba(197,166,106,0.12), transparent 30%),
        linear-gradient(135deg, #e7e1d3 0%, #f1ece2 46%, #ddd8ca 100%) !important;
}

/**************************************************************************************************
    Header / Navbar
**************************************************************************************************/

.site-header-image {
    display: block;
    min-height: 190px;
    background-repeat: repeat;
    background-position: center;
}

html body nav#headerNav.navbar,
#headerNav {
    position: relative;
    z-index: 1030 !important;
    overflow: visible !important;
}

.navbar {
    overflow: visible !important;
}

html body nav#headerNav.navbar,
#headerNav {
    min-height: 86px;
    background:
        radial-gradient(circle at top left, rgba(255,255,255,0.06), transparent 30%),
        linear-gradient(180deg, #1b211e 0%, #151916 100%) !important;
    box-shadow: 0 10px 24px rgba(0,0,0,0.24) !important;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}

#headerNav .navbar-collapse,
#headerNav .navbar-nav,
#headerNav .nav-item,
#headerNav .dropdown {
    overflow: visible !important;
}

.navbar-brand {
    color: #f7f3ea !important;
    font-size: 1.35rem;
    font-weight: 900;
    letter-spacing: 0.07em;
}

.navbar-brand .small {
    color: var(--kumi-gold) !important;
    font-size: 0.8rem;
    letter-spacing: 0.08em;
}

.navbar .nav-link {
    color: rgba(247,243,234,0.72) !important;
    font-size: 0.86rem;
    font-weight: 800;
    letter-spacing: 0.045em;
}

.navbar .nav-link:hover {
    color: #fffaf0 !important;
}

.nav-play > .nav-link,
.nav-link.nav-play {
    background: linear-gradient(135deg, var(--kumi-clay), var(--kumi-clay-light)) !important;
    color: #fffaf0 !important;
    border: 1px solid rgba(232,197,128,0.28) !important;
    border-radius: 8px !important;
    padding: 0.9rem 1.45rem !important;
    margin-left: 1.65rem;
    box-shadow: 0 8px 18px rgba(0,0,0,0.22);
}

.nav-play > .nav-link:hover,
.nav-link.nav-play:hover {
    background: linear-gradient(135deg, var(--kumi-clay-light), var(--kumi-gold)) !important;
    transform: translateY(-1px);
}

/**************************************************************************************************
    Dropdowns
**************************************************************************************************/

#headerNav .dropdown-menu,
.play-dropdown,
.nav-dropdown-menu {
    z-index: 2100 !important;
    background: #1b211d;
    border: 1px solid rgba(245,240,230,0.12);
    border-radius: 12px;
    box-shadow: 0 16px 30px rgba(0,0,0,0.36);
    overflow: visible !important;
}

.play-dropdown .dropdown-item,
.nav-dropdown-menu .dropdown-item,
.dropdown-menu .dropdown-item {
    color: rgba(245,240,230,0.78);
    font-weight: 600;
}

.play-dropdown .dropdown-item:hover,
.nav-dropdown-menu .dropdown-item:hover,
.dropdown-menu .dropdown-item:hover {
    background: rgba(212,173,104,0.12);
    color: #fffaf0;
}

/**************************************************************************************************
    Global Layout
**************************************************************************************************/

main.container-fluid {
    max-width: 100% !important;
    width: 100% !important;
    overflow: visible;
}

main.container-fluid > .row {
    width: 100% !important;
}

#app,
main,
main.container-fluid,
.kumi-page-layout,
.kumi-main-content {
    overflow: visible;
}

.kumi-page-layout {
    display: grid !important;
    gap: 0;
    margin: 0 !important;
    width: 100%;
}

.kumi-page-layout.has-sidebar {
    grid-template-columns: 270px minmax(0, 1fr) 340px;
}

.kumi-page-layout.no-sidebar {
    grid-template-columns: minmax(0, 1fr) 340px;
}

.kumi-page-layout.has-sidebar .kumi-sidebar,
.kumi-page-layout.has-sidebar .sidebar {
    grid-column: 1;
}

.kumi-page-layout.has-sidebar .kumi-main-content {
    grid-column: 2;
}

.kumi-page-layout.has-sidebar .kumi-global-rightbar {
    grid-column: 3;
}

.kumi-page-layout.no-sidebar .kumi-main-content {
    grid-column: 1;
}

.kumi-page-layout.no-sidebar .kumi-global-rightbar {
    grid-column: 2;
}

.kumi-main-content {
    min-width: 0;
    padding: 2.5rem 3rem;
    background: rgba(248,244,236,0.58);
}

.kumi-global-rightbar {
    min-width: 0;
    padding: 1.5rem 1rem;
    background: var(--kumi-green-black);
}

/**************************************************************************************************
    Left Sidebar
**************************************************************************************************/

.kumi-sidebar,
.sidebar.kumi-sidebar {
    width: 270px;
    max-width: 270px;
    padding: 2rem 1.35rem !important;
    text-align: left !important;
    background:
        radial-gradient(circle at bottom left, rgba(138, 161, 112, .16), transparent 35%),
        linear-gradient(180deg, #050b07 0%, #0a1811 48%, #09150f 100%) !important;
    color: #f5ecd9 !important;
    border-right: 1px solid rgba(219, 185, 122, .18);
}

.kumi-sidebar ul {
    display: block !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.kumi-sidebar li {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}

.kumi-sidebar .sidebar-header {
    background: transparent !important;
    margin-bottom: 1.65rem !important;
    padding: 0 !important;
}

.kumi-sidebar .sidebar-header a {
    color: #fff8e8 !important;
    font-size: 0.98rem;
    font-weight: 900;
    letter-spacing: 0.04em;
}

.kumi-sidebar .sidebar-section {
    border-top: 1px solid rgba(234,209,160,.18);
    margin-top: 1.25rem;
    padding-top: 1.05rem !important;
}

.kumi-sidebar .sidebar-section-header {
    color: #ead1a0 !important;
    font-size: 0.78rem;
    font-weight: 900;
    letter-spacing: 0.035em;
    padding: 0 0.45rem !important;
    margin-bottom: 0.55rem;
    text-transform: uppercase;
}

.kumi-sidebar a,
.kumi-sidebar .sidebar-item a {
    display: block;
    padding: 0.73rem 0.75rem !important;
    border-radius: 7px !important;
    color: rgba(245,236,217,.82) !important;
    font-size: 0.94rem;
    font-weight: 600;
    text-transform: none !important;
    font-family: Lato, sans-serif !important;
}

.kumi-sidebar a:hover,
.kumi-sidebar .sidebar-item a:hover {
    background: rgba(112, 143, 94, .32) !important;
    color: #fff8e8 !important;
    text-decoration: none;
}

.kumi-sidebar a.active,
.kumi-sidebar .sidebar-item a.active {
    background: rgba(112, 143, 94, .32) !important;
    color: #fff8e8 !important;
    font-weight: 800 !important;
}

/**************************************************************************************************
    Right Sidebar / Expedition Cards
**************************************************************************************************/

.kumi-global-rightbar .kumi-field-card {
    margin-bottom: 1rem;
}

.kumi-field-card {
    overflow: hidden;
    border-radius: 12px;
    border: 1px solid rgba(214, 176, 104, .26);
    background:
        linear-gradient(180deg, rgba(251,245,232,.96), rgba(232,219,195,.94));
    box-shadow:
        0 12px 26px rgba(0,0,0,.10),
        inset 0 1px 0 rgba(255,255,255,.6);
}

.kumi-field-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .75rem .95rem;
    background:
        linear-gradient(135deg, #102318, #173520);
    color: #f6e8c8;
    font-family: Georgia, "Times New Roman", serif;
    font-size: .95rem;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.kumi-field-card-header span {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
}

.kumi-field-card-header em {
    min-width: 1.35rem;
    height: 1.35rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: rgba(128,153,106,.7);
    color: #fff;
    font-style: normal;
    font-size: .75rem;
}

.kumi-field-card-body {
    padding: .95rem;
}

.kumi-field-character {
    display: flex;
    justify-content: space-between;
    padding-bottom: .75rem;
    margin-bottom: .5rem;
    border-bottom: 1px solid rgba(120,105,82,.18);
}

.kumi-field-character strong {
    display: block;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.2rem;
    color: #1f1d19;
}

.kumi-field-character span {
    display: block;
    color: #625d52;
    font-size: .85rem;
}

.kumi-field-row {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr);
    gap: .75rem;
    padding: .7rem 0;
    border-bottom: 1px solid rgba(120,105,82,.14);
}

.kumi-field-row i {
    color: #496642;
    margin-top: .15rem;
}

.kumi-field-row span {
    display: block;
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: #7e7568;
    font-weight: 800;
}

.kumi-field-row strong {
    display: block;
    color: #222018;
    font-weight: 800;
}

.kumi-field-row small {
    display: block;
    color: #625d52;
    margin-top: .1rem;
}

.kumi-field-effects {
    margin-top: .8rem;
    padding: .8rem;
    border-radius: 10px;
    background: rgba(255,255,255,.36);
    border: 1px solid rgba(120,105,82,.12);
}

.kumi-field-effects strong {
    display: block;
    margin-bottom: .35rem;
    font-family: Georgia, "Times New Roman", serif;
}

.kumi-field-effects ul {
    margin: 0;
    padding-left: 1.1rem;
}

.kumi-danger-dots {
    display: flex !important;
    gap: .25rem;
    margin-top: .35rem !important;
}

.kumi-danger-dots b {
    width: .55rem;
    height: .55rem;
    border-radius: 999px;
    background: #b98b3f;
}

.kumi-danger-dots b.empty {
    background: rgba(120,105,82,.18);
}

.kumi-quest-list {
    padding: .35rem .85rem .85rem;
}

.kumi-quest-item {
    position: relative;
    padding: .75rem 0;
    border-bottom: 1px solid rgba(120,105,82,.15);
}

.kumi-quest-item strong {
    display: block;
    color: #1f1d19;
}

.kumi-quest-item span {
    display: block;
    color: #6b6458;
    font-size: .82rem;
}

.kumi-quest-item b {
    position: absolute;
    right: 0;
    top: .8rem;
    color: #496642;
    font-size: .85rem;
}

.kumi-view-all {
    display: block;
    text-align: center;
    padding: .75rem 0 0;
    color: #496642 !important;
    font-weight: 700;
}

/**************************************************************************************************
    Cards / Panels
**************************************************************************************************/

.card {
    background: var(--kumi-panel) !important;
    border: 1px solid var(--kumi-border) !important;
    border-left: 1px solid var(--kumi-border) !important;
    border-radius: var(--kumi-radius) !important;
    box-shadow: none !important;
    overflow: hidden;
    padding: 1.25rem !important;
    transition:
        transform 0.18s ease,
        box-shadow 0.22s ease,
        border-color 0.22s ease,
        background 0.22s ease !important;
}

.card-body {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
}

.card-header,
.card-footer {
    background: rgba(244,239,229,0.58) !important;
    border-color: var(--kumi-border) !important;
}

.card .row,
.card .col-12 {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

.card .col-12 {
    padding: 0 !important;
}

.world-entry,
.masterlist-entry,
.character-card {
    transition:
        transform 0.18s ease,
        border-color 0.22s ease,
        background 0.22s ease !important;
}

.world-entry:hover,
.masterlist-entry:hover,
.kumi-main-content [class*="col-"] > .card:hover {
    transform: translateY(-3px);
    border-color: rgba(145, 124, 90, 0.24) !important;
    background: rgba(255,252,247,0.88) !important;
}

.profile-assets-card .card:hover,
.profile-inventory .card:hover,
.inventory-stack .card:hover,
.user-profile-text .card:hover {
    transform: none !important;
}

/**************************************************************************************************
    Inventory Hover
**************************************************************************************************/

.profile-inventory-item,
.inventory-item {
    transition: transform 0.18s ease;
}

.profile-inventory-item:hover,
.inventory-item:hover {
    transform: translateY(-3px);
}

/**************************************************************************************************
    Typography / Headings
**************************************************************************************************/

h1, h2, h3, h4, h5,
.h1, .h2, .h3, .h4, .h5 {
    font-family: Georgia, "Times New Roman", serif !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    color: #1e1d18 !important;
}

h1 {
    font-size: 2.25rem !important;
    font-weight: 500 !important;
    margin-bottom: 0.15rem;
}

h2 {
    font-size: 1.35rem !important;
    font-weight: 500 !important;
}

h3 {
    font-size: 1.12rem !important;
    font-weight: 500 !important;
}

h1::after,
h2::after,
h3::after {
    content: " ✦";
    color: var(--kumi-gold);
    font-size: 0.62em;
}

/**************************************************************************************************
    Tabs
**************************************************************************************************/

.nav-tabs {
    border-bottom: 1px solid rgba(86,72,52,0.18) !important;
}

.nav-tabs .nav-link {
    border: 0 !important;
    color: #55584f !important;
    font-family: Lato, sans-serif !important;
    text-transform: none !important;
    font-size: 0.94rem;
    font-weight: 600;
    padding: 0.85rem 1rem;
}

.nav-tabs .nav-link.active {
    color: #171a16 !important;
    background: transparent !important;
    border-bottom: 2px solid #171a16 !important;
}

/**************************************************************************************************
    Buttons / Forms
**************************************************************************************************/

.btn {
    border-radius: 6px !important;
    font-weight: 700;
}

.btn-primary {
    background: #8b9f81 !important;
    border-color: #8b9f81 !important;
    color: #fffaf0 !important;
}

.btn-primary:hover {
    background: #718c68 !important;
    border-color: #718c68 !important;
}

.form-control,
.custom-select {
    background: rgba(255,250,240,0.82) !important;
    border: 1px solid rgba(86,72,52,0.18) !important;
    border-radius: 6px !important;
}

.form-control:focus,
.custom-select:focus {
    border-color: rgba(113,140,104,0.55) !important;
    box-shadow: 0 0 0 0.16rem rgba(113,140,104,0.18) !important;
}

/**************************************************************************************************
    Tables / Pagination / Badges
**************************************************************************************************/

.table {
    color: #262923;
}

.table th {
    border-top: 0 !important;
    border-bottom: 1px solid rgba(86,72,52,0.18) !important;
    font-size: 0.78rem;
    text-transform: uppercase;
    color: #55584f;
}

.table td {
    border-top: 1px solid rgba(86,72,52,0.11) !important;
}

.badge,
.badge-primary,
.badge-secondary {
    border-radius: 6px;
    font-weight: 700;
}

.badge-primary {
    background: rgba(113,140,104,0.18) !important;
    color: #405d38 !important;
}

.badge-secondary {
    background: rgba(86,72,52,0.12) !important;
    color: #5d5548 !important;
}

.page-link {
    background: rgba(250,246,237,0.75) !important;
    border-color: rgba(86,72,52,0.16) !important;
    color: #44513e !important;
}

.page-item.active .page-link {
    background: #718c68 !important;
    border-color: #718c68 !important;
    color: #fffaf0 !important;
}

/**************************************************************************************************
    Character Page Support
**************************************************************************************************/

.kumi-character-page {
    width: 100%;
}

.kumi-character-main-card,
.kumi-character-left-card,
.kumi-import-image-card,
.kumi-character-overview-card {
    background:
        radial-gradient(circle at top right, rgba(255,255,255,.72), transparent 42%),
        linear-gradient(180deg, rgba(255,252,244,.94), rgba(242,234,219,.88)) !important;
    border: 1px solid rgba(121, 101, 72, .18) !important;
    border-radius: 14px !important;
    box-shadow:
        0 10px 22px rgba(35, 27, 15, .045),
        inset 0 1px 0 rgba(255,255,255,.7);
}

.kumi-stat-list {
    width: 100%;
}

.kumi-stat-line,
.kumi-stat-total {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 48px;
    align-items: center;
    column-gap: 1rem;
}

.kumi-stat-line {
    margin-bottom: .45rem;
}

.kumi-stat-line span,
.kumi-stat-total span {
    border-bottom: 0 !important;
    padding-bottom: 0 !important;
}

.kumi-stat-line b,
.kumi-stat-total b {
    display: block;
    width: 48px;
    text-align: right;
    font-variant-numeric: tabular-nums;
    color: #3f5f46;
}

.kumi-stat-total {
    margin-top: .9rem;
    padding-top: .85rem;
    border-top: 1px solid rgba(120,105,82,.18);
    font-weight: 800;
}

.kumi-stat-total span {
    text-transform: uppercase;
    letter-spacing: .04em;
}

.kumi-overview-grid.is-geno-overview {
    grid-template-columns: 1fr;
}

.kumi-overview-grid.is-geno-overview .kumi-section {
    max-width: none;
}

/**************************************************************************************************
    Mobile Sidebar Drawer + Mobile Layout
**************************************************************************************************/

.kumi-mobile-sidebar-toggle {
    display: none;
}

@media (max-width: 991px) {
    .site-mobile-header {
        display: block !important;
        position: fixed !important;
        right: 1.25rem !important;
        bottom: 1.25rem !important;
        top: auto !important;
        left: auto !important;
        width: auto !important;
        padding: 0 !important;
        z-index: 1050 !important;
        background: transparent !important;
    }

    .kumi-mobile-sidebar-toggle {
        display: inline-flex !important;
        align-items: center;
        gap: 0.35rem;

        padding: 0.55rem 0.85rem;
        border-radius: 8px;

        background: var(--kumi-green-accent);
        color: #fffaf0 !important;
        border: 1px solid rgba(255,255,255,0.35);

        font-weight: 700;
        box-shadow: 0 8px 18px rgba(0,0,0,0.18);
    }
}

@media (max-width: 991px) {
    .site-header-image{
        display: none !important;
    }

    main.container-fluid {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }

    .kumi-page-layout,
    .kumi-page-layout.has-sidebar,
    .kumi-page-layout.no-sidebar {
        display: block !important;
        width: 100%;
        min-height: auto;
    }

    .kumi-sidebar,
    .sidebar.kumi-sidebar {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 1040;

        width: 82% !important;
        max-width: 340px !important;
        height: 100vh;
        overflow-y: auto;

        transform: translateX(-105%);
        transition: transform 0.22s ease;

        padding-top: 4rem !important;
        box-shadow: 12px 0 28px rgba(0,0,0,0.18);
    }

    .kumi-sidebar.active,
    .sidebar.kumi-sidebar.active {
        transform: translateX(0);
    }

    .kumi-main-content {
        width: 100% !important;
        padding: 1.5rem !important;
        background: transparent !important;
        border: 0 !important;
    }

    .kumi-global-rightbar {
        width: 100%;
        max-width: none;
        padding: 0 1.25rem 2rem;
        background: transparent;
    }

    .kumi-global-rightbar .kumi-field-card {
        max-width: 100%;
        margin: 0 0 1rem;
    }

    .kumi-main-content > div:first-child,
    .kumi-main-content nav:first-child,
    .kumi-main-content .breadcrumb:first-child {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }

    .card {
        border-radius: 10px !important;
    }
}

/**************************************************************************************************
    Footer Final Override
**************************************************************************************************/

footer,
footer * {
    color: #718c68 !important;
    opacity: 1 !important;
}

footer a,
footer .nav-link {
    color: #718c68 !important;
}

footer a:hover,
footer .nav-link:hover {
    color: #8faa86 !important;
}

/**************************************************************************************************
    Footer
**************************************************************************************************/

body > #app > nav.navbar.navbar-expand-md.navbar-light:last-of-type,
body > #app > nav.navbar.navbar-expand-md.navbar-light:last-of-type .nav-link,
body > #app > nav.navbar.navbar-expand-md.navbar-light:last-of-type a,
body > #app > .copyright {
    color: #718c68 !important;
    opacity: 1 !important;
}

body > #app > nav.navbar.navbar-expand-md.navbar-light:last-of-type .nav-link:hover,
body > #app > nav.navbar.navbar-expand-md.navbar-light:last-of-type a:hover {
    color: #8faa86 !important;
}

/**************************************************************************************************
    Footer Alignment + Scroll Button Layer Fix
**************************************************************************************************/

body > #app > .copyright {
    width: 100%;
    text-align: center !important;
    display: block;
    padding: 0 1rem 1rem;
}

body > #app > nav.navbar.navbar-expand-md.navbar-light:last-of-type {
    justify-content: center !important;
}

body > #app > nav.navbar.navbar-expand-md.navbar-light:last-of-type .navbar-nav {
    margin-left: auto !important;
    margin-right: auto !important;
}

.kumi-page-layout.has-sidebar.has-rightbar {
    grid-template-columns: 270px minmax(0, 1fr) 340px;
}

.kumi-page-layout.has-sidebar.no-rightbar {
    grid-template-columns: 270px minmax(0, 1fr);
}

.kumi-page-layout.no-sidebar.has-rightbar {
    grid-template-columns: minmax(0, 1fr) 340px;
}

.kumi-page-layout.no-sidebar.no-rightbar {
    grid-template-columns: minmax(0, 1fr);
}

@media (max-width: 1400px) and (min-width: 992px) {
    .kumi-page-layout.has-sidebar.has-rightbar {
        grid-template-columns: 270px minmax(0, 1fr);
    }

    .kumi-page-layout.no-sidebar.has-rightbar {
        grid-template-columns: minmax(0, 1fr);
    }

    .kumi-page-layout.has-sidebar.has-rightbar .kumi-main-content {
        grid-column: 2;
    }

    .kumi-page-layout.no-sidebar.has-rightbar .kumi-main-content {
        grid-column: 1;
    }

    .kumi-page-layout.has-sidebar.has-rightbar .kumi-global-rightbar {
        grid-column: 2;
    }

    .kumi-page-layout.no-sidebar.has-rightbar .kumi-global-rightbar {
        grid-column: 1;
    }

    .kumi-global-rightbar {
        width: 100%;
        max-width: none;
        background: transparent;
        padding: 0 3rem 2rem;
    }
}
/**************************************************************************************************
    FINAL Kumikan Layout + Dossier Cleanup
    This block intentionally overrides older duplicated rules above it.
**************************************************************************************************/

/* Keep nav above page chrome, but below modals. */
html body nav#headerNav.navbar,
#headerNav {
    position: relative !important;
    z-index: 1030 !important;
    overflow: visible !important;
}

#headerNav .dropdown-menu,
.play-dropdown,
.nav-dropdown-menu {
    z-index: 1040 !important;
}

.modal-backdrop {
    z-index: 10400 !important;
}

.modal {
    z-index: 10450 !important;
}

.modal-dialog,
.modal-content {
    position: relative;
    z-index: 10460 !important;
}

/* Main site grid. */
.kumi-page-layout.has-sidebar.has-rightbar,
.kumi-page-layout.has-sidebar:not(.no-rightbar) {
    display: grid !important;
    grid-template-columns: 270px minmax(0, 1fr) 340px !important;
    grid-template-areas: "sidebar content rightbar" !important;
}

.kumi-page-layout.has-sidebar.no-rightbar {
    display: grid !important;
    grid-template-columns: 270px minmax(0, 1fr) !important;
    grid-template-areas: "sidebar content" !important;
}

.kumi-page-layout.no-sidebar.has-rightbar,
.kumi-page-layout.no-sidebar:not(.no-rightbar) {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 340px !important;
    grid-template-areas: "content rightbar" !important;
}

.kumi-page-layout.no-sidebar.no-rightbar {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-areas: "content" !important;
}

.kumi-page-layout .kumi-sidebar,
.kumi-page-layout .sidebar.kumi-sidebar {
    grid-area: sidebar !important;
}

.kumi-page-layout .kumi-main-content {
    grid-area: content !important;
    width: 100% !important;
    min-width: 0 !important;
    position: relative;
    z-index: 1;
}

.kumi-page-layout .kumi-global-rightbar {
    grid-area: rightbar !important;
    min-width: 0 !important;
    position: relative;
    z-index: 2;
}

@media (max-width: 1400px) and (min-width: 992px) {
    .kumi-page-layout.has-sidebar.has-rightbar,
    .kumi-page-layout.has-sidebar:not(.no-rightbar) {
        grid-template-columns: 270px minmax(0, 1fr) !important;
        grid-template-areas:
            "sidebar content"
            "sidebar rightbar" !important;
    }

    .kumi-page-layout.no-sidebar.has-rightbar,
    .kumi-page-layout.no-sidebar:not(.no-rightbar) {
        grid-template-columns: minmax(0, 1fr) !important;
        grid-template-areas:
            "content"
            "rightbar" !important;
    }

    .kumi-page-layout .kumi-global-rightbar {
        width: 100% !important;
        max-width: none !important;
        padding: 0 3rem 2rem !important;
        background: transparent !important;
        position: static !important;
        z-index: 1 !important;
    }
}

@media (max-width: 991px) {
    .kumi-page-layout,
    .kumi-page-layout.has-sidebar,
    .kumi-page-layout.no-sidebar,
    .kumi-page-layout.has-sidebar.has-rightbar,
    .kumi-page-layout.no-sidebar.has-rightbar {
        display: block !important;
        width: 100% !important;
    }

    .kumi-main-content {
        width: 100% !important;
        padding: 1.5rem !important;
    }

    .kumi-global-rightbar {
        width: 100% !important;
        max-width: none !important;
        padding: 0 1.25rem 2rem !important;
        background: transparent !important;
    }
}

/**************************************************************************************************
    Species Dossier: Clean Final Rules
**************************************************************************************************/

.kumi-dossier {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
}

.kumi-dossier-topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

.kumi-dossier-admin-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.kumi-dossier-hero {
    display: grid !important;
    grid-template-columns: minmax(320px, 430px) minmax(0, 1fr) minmax(240px, 300px) !important;
    gap: 1.5rem !important;
    align-items: stretch !important;
    width: 100%;
    margin-bottom: 1.5rem;
}

.kumi-dossier-image-wrap,
.kumi-dossier-credits,
.kumi-dossier-panel,
.kumi-dossier-stat-strip,
.kumi-dossier-tabs,
.kumi-dossier-subtabs {
    background:
        radial-gradient(circle at top right, rgba(255,255,255,.72), transparent 42%),
        linear-gradient(180deg, rgba(255,252,244,.94), rgba(242,234,219,.88)) !important;
    border: 1px solid rgba(121, 101, 72, .18) !important;
    border-radius: 16px !important;
    box-shadow: 0 10px 22px rgba(35, 27, 15, .045), inset 0 1px 0 rgba(255,255,255,.7) !important;
}

.kumi-dossier-image-wrap {
    overflow: hidden;
    min-height: 380px;
    display: flex;
}

.kumi-dossier-image {
    width: 100%;
    height: 100%;
    min-height: 380px;
    object-fit: cover;
    display: block;
}

.kumi-dossier-image-placeholder {
    width: 100%;
    min-height: 260px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(80,76,66,.55);
    background: rgba(255,255,255,.22);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.kumi-dossier-image-placeholder.small {
    min-height: 260px;
}

.kumi-dossier-title {
    min-width: 0;
    padding: 1rem 0;
}

.kumi-dossier-kicker {
    color: #718c68;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .1em;
    margin-bottom: .35rem;
}

.kumi-dossier-title h1 {
    font-size: clamp(2.35rem, 4vw, 4rem) !important;
    line-height: 1;
    margin-bottom: .85rem;
}

.kumi-dossier-meta-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-top: 1px solid rgba(121, 101, 72, .18);
    border-bottom: 1px solid rgba(121, 101, 72, .18);
    margin: 1rem 0;
}

.kumi-dossier-meta-grid > div {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 1rem;
    align-items: center;
    padding: .7rem .85rem;
    border-bottom: 1px solid rgba(121, 101, 72, .1);
}

.kumi-dossier-meta-grid > div:nth-child(odd) {
    border-right: 1px solid rgba(121, 101, 72, .1);
}

.kumi-dossier-meta-grid span {
    color: #718c68;
    text-transform: uppercase;
    font-size: .72rem;
    letter-spacing: .08em;
    font-weight: 900;
}

.kumi-dossier-meta-grid strong {
    text-align: right;
    color: #1f1d18;
}

.kumi-dossier-summary {
    line-height: 1.7;
    padding-top: .35rem;
}

.kumi-dossier-credits {
    padding: 1rem;
    align-self: start;
}

.kumi-credits-toggle {
    width: 100%;
    border: 0;
    background: transparent;
    color: #415c3c;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.05rem;
    text-align: left;
    display: flex;
    justify-content: space-between;
    font-weight: 700;
    padding: 0 0 .65rem;
    cursor: pointer;
}

.kumi-credit-row {
    display: grid;
    grid-template-columns: 26px minmax(0, 1fr);
    gap: .65rem;
    padding: .65rem 0;
    border-bottom: 1px solid rgba(121, 101, 72, .14);
}

.kumi-credit-row:last-child {
    border-bottom: 0;
}

.kumi-credit-row i {
    color: #718c68;
    margin-top: .15rem;
}

.kumi-credit-row strong,
.kumi-credit-row span {
    display: block;
}

.kumi-credit-row strong {
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: #7a715f;
}

.kumi-credit-row span {
    color: #1f1d18;
    font-weight: 700;
}

.kumi-dossier-stat-strip {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    width: 100%;
    margin-bottom: 1.5rem;
    overflow: hidden;
}

.kumi-dossier-stat-strip > div {
    display: grid !important;
    grid-template-columns: 34px minmax(0, 1fr) !important;
    gap: .25rem .75rem;
    align-items: center;
    padding: 1rem;
    border-right: 1px solid rgba(121, 101, 72, .14);
}

.kumi-dossier-stat-strip > div:last-child {
    border-right: 0;
}

.kumi-dossier-stat-strip i {
    grid-column: 1;
    grid-row: 1 / span 2;
    color: #718c68;
    font-size: 1.25rem;
}

.kumi-dossier-stat-strip strong {
    grid-column: 2;
    grid-row: 1;
    color: #7a715f;
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .07em;
}

.kumi-dossier-stat-strip span {
    grid-column: 2 !important;
    grid-row: 2 !important;
    text-align: left !important;
    color: #1f1d18;
    font-weight: 800;
}

.kumi-dossier-panel {
    padding: 1.25rem;
    margin-bottom: 1.5rem;
    min-width: 0;
}

.kumi-dossier-panel h2 {
    margin-bottom: 1rem;
}

.kumi-dossier-tab-content,
.tab-content.kumi-dossier-tab-content {
    width: 100%;
    min-width: 0;
}

.kumi-overview-layout {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(260px, 320px) !important;
    gap: 1.5rem;
    align-items: stretch;
    width: 100%;
}

.kumi-overview-silhouette {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(220px, 300px);
    gap: 1.5rem;
    align-items: center;
    min-height: 260px;
}

.kumi-overview-text {
    line-height: 1.7;
}

.kumi-size-placeholder {
    min-height: 220px;
    border-radius: 14px;
    border: 1px dashed rgba(121, 101, 72, .22);
    background: linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,.04));
    color: rgba(80, 76, 66, .45);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    text-align: center;
}

.kumi-size-placeholder i {
    font-size: 4rem;
}

.kumi-overview-mini-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: .85rem;
    margin-top: 1.25rem;
}

.kumi-overview-mini-grid > div {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr);
    gap: .25rem .65rem;
    padding: .85rem;
    min-height: 108px;
    border: 1px solid rgba(121, 101, 72, .14);
    border-radius: 12px;
    background: rgba(255,255,255,.28);
}

.kumi-overview-mini-grid i {
    grid-row: span 2;
    color: #718c68;
}

.kumi-overview-mini-grid strong {
    color: #415c3c;
    text-transform: uppercase;
    letter-spacing: .07em;
    font-size: .72rem;
}

.kumi-overview-mini-grid span {
    font-weight: 700;
}

.kumi-side-image {
    width: 100%;
    max-height: 320px;
    object-fit: cover;
    border-radius: 12px;
}

.kumi-threat-box {
    border-top: 1px solid rgba(121, 101, 72, .16);
    padding-top: .9rem;
    margin-top: .9rem;
}

.kumi-threat-box strong,
.kumi-threat-box span {
    display: block;
}

.kumi-threat-box strong {
    color: #718c68;
    text-transform: uppercase;
    font-size: .72rem;
    letter-spacing: .08em;
}

.kumi-threat-box span {
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.15rem;
}

.kumi-dossier-side-nav .sidebar-item a i {
    width: 1.2rem;
    margin-right: .35rem;
    color: #ead1a0;
}

.kumi-dossier-subtabs {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    padding: 0;
    margin: 0 0 1rem;
    overflow: hidden;
}

.kumi-dossier-subtabs li {
    flex: 1 1 130px;
    margin: 0;
}

.kumi-dossier-subtabs a {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    padding: .85rem 1rem;
    color: #28251f !important;
    font-weight: 800;
    text-transform: uppercase;
    font-size: .78rem;
    letter-spacing: .04em;
    border-right: 1px solid rgba(121, 101, 72, .14);
}

.kumi-dossier-subtabs a.active,
.kumi-dossier-subtabs a:hover {
    background: linear-gradient(135deg, #2f6b4d, #718c68);
    color: #fffaf0 !important;
}

.kumi-template-downloads {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
}

.kumi-template-card {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: .85rem;
    align-items: center;
    padding: 1rem;
    border-radius: 14px;
    border: 1px solid rgba(121, 101, 72, .16);
    background: rgba(255,255,255,.28);
    color: #1f1d18 !important;
}

.kumi-template-card i {
    color: #718c68;
    font-size: 1.5rem;
}

.kumi-template-card strong,
.kumi-template-card span {
    display: block;
}

@media (max-width: 1500px) {
    .kumi-dossier-hero {
        grid-template-columns: minmax(280px, 380px) minmax(0, 1fr) !important;
    }

    .kumi-dossier-credits {
        grid-column: 1 / -1;
    }
}

@media (max-width: 1250px) {
    .kumi-dossier-stat-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .kumi-dossier-stat-strip > div {
        border-bottom: 1px solid rgba(121, 101, 72, .14);
    }

    .kumi-overview-layout,
    .kumi-overview-silhouette {
        grid-template-columns: 1fr !important;
    }

    .kumi-overview-mini-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 767px) {
    .kumi-dossier-topbar {
        flex-direction: column;
        align-items: stretch;
    }

    .kumi-dossier-hero {
        grid-template-columns: 1fr !important;
    }

    .kumi-dossier-meta-grid,
    .kumi-dossier-stat-strip,
    .kumi-overview-mini-grid {
        grid-template-columns: 1fr !important;
    }

    .kumi-dossier-meta-grid > div:nth-child(odd) {
        border-right: 0;
    }

    .kumi-dossier-stat-strip > div {
        border-right: 0;
    }
}

/**************************************************************************************************
    FINAL Dossier Width + Responsive Text Fix
**************************************************************************************************/

/* Remove old Lorekeeper side bands */
html body #app,
html body main,
html body main.container-fluid,
html body main.container-fluid > .row,
html body .kumi-page-layout,
html body .kumi-main-content {
    background: #f1ece2 !important;
    background-color: #f1ece2 !important;
    box-shadow: none !important;
}

/* Prevent Bootstrap row negative margins from creating side color strips */
html body main.container-fluid > .row.kumi-page-layout {
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: none !important;
}

/* Make the actual content area fill cleanly */
.kumi-main-content {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
}

.kumi-dossier {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
}

/* Stop text from overlapping in dossier header/stat sections */
.kumi-dossier-meta-grid > div,
.kumi-dossier-stat-strip > div,
.kumi-overview-mini-grid > div {
    min-width: 0 !important;
}

.kumi-dossier-meta-grid strong,
.kumi-dossier-meta-grid span,
.kumi-dossier-stat-strip strong,
.kumi-dossier-stat-strip span,
.kumi-overview-mini-grid strong,
.kumi-overview-mini-grid span {
    min-width: 0 !important;
    word-break: normal;
}

/* Medium windows: stack label/value instead of forcing side-by-side */
@media (max-width: 1250px) {
    .kumi-dossier-meta-grid {
        grid-template-columns: 1fr !important;
    }

    .kumi-dossier-meta-grid > div {
        grid-template-columns: 1fr !important;
        gap: .25rem !important;
        border-right: 0 !important;
    }

    .kumi-dossier-meta-grid strong {
        text-align: left !important;
    }

    .kumi-dossier-stat-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .kumi-dossier-stat-strip > div {
        grid-template-columns: 34px minmax(0, 1fr) !important;
    }

    .kumi-dossier-stat-strip span {
        grid-column: 2 !important;
        grid-row: 2 !important;
        text-align: left !important;
    }

    .kumi-overview-layout {
        grid-template-columns: 1fr !important;
    }
}

/* Small windows: everything becomes single column */
@media (max-width: 700px) {
    .kumi-dossier-stat-strip,
    .kumi-overview-mini-grid,
    .kumi-natural-history-grid,
    .kumi-dossier-card-row {
        grid-template-columns: 1fr !important;
    }

    .kumi-dossier-hero {
        grid-template-columns: 1fr !important;
    }

    .kumi-main-content {
        padding: 1rem !important;
    }
}

/**************************************************************************************************
    FINAL Fix: Dossier Width + No Vertical Text
**************************************************************************************************/

html,
body,
#app,
main,
main.container-fluid,
main.container-fluid > .row,
.kumi-page-layout,
.kumi-main-content {
    background: #f1ece2 !important;
    background-color: #f1ece2 !important;
}

main.container-fluid {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

main.container-fluid > .row,
.row.kumi-page-layout {
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: none !important;
}

.kumi-main-content {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
}

/* STOP vertical letter stacking */
.kumi-dossier-meta-grid span,
.kumi-dossier-meta-grid strong,
.kumi-dossier-stat-strip strong,
.kumi-dossier-stat-strip span,
.kumi-overview-mini-grid strong,
.kumi-overview-mini-grid span {
    word-break: normal !important;
    overflow-wrap: normal !important;
    white-space: normal !important;
}

/* Overview cards should not become tiny columns */
.kumi-overview-mini-grid {
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)) !important;
}

.kumi-overview-mini-grid > div {
    grid-template-columns: 32px minmax(170px, 1fr) !important;
    min-width: 230px !important;
}

/* Header meta should stack before it gets cramped */
@media (max-width: 1450px) {
    .kumi-dossier-meta-grid {
        grid-template-columns: 1fr !important;
    }

    .kumi-dossier-meta-grid > div {
        grid-template-columns: 1fr !important;
    }

    .kumi-dossier-meta-grid strong {
        text-align: left !important;
    }
}

/* Stat strip should wrap before it gets cramped */
@media (max-width: 1450px) {
    .kumi-dossier-stat-strip {
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
    }

    .kumi-dossier-stat-strip > div {
        grid-template-columns: 34px minmax(150px, 1fr) !important;
    }

    .kumi-dossier-stat-strip span {
        grid-column: 2 !important;
        grid-row: 2 !important;
        text-align: left !important;
    }
}

/**************************************************************************************************
    Species Dossier - Taxonomy
**************************************************************************************************/

.kumi-dossier-section-header {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: end;
    margin-bottom: 1.5rem;
}

.kumi-dossier-section-kicker {
    display: block;
    text-transform: uppercase;
    letter-spacing: .08em;
    font-size: .72rem;
    font-weight: 800;
    color: #718c68;
    margin-bottom: .2rem;
}

.kumi-dossier-section-count {
    color: #5c574c;
    font-weight: 700;
}

.kumi-taxonomy-layout {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.kumi-taxonomy-group {
    border: 1px solid rgba(121, 101, 72, .16);
    border-radius: 18px;
    overflow: hidden;
    background:
        radial-gradient(circle at top right, rgba(255,255,255,.6), transparent 40%),
        linear-gradient(180deg, rgba(255,252,244,.94), rgba(242,234,219,.88));
}

.kumi-taxonomy-header {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: center;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid rgba(121, 101, 72, .12);
}

.kumi-taxonomy-header-main {
    display: flex;
    gap: 1rem;
    align-items: center;
    min-width: 0;
}

.kumi-taxonomy-header-main img {
    width: 72px;
    height: 72px;
    object-fit: cover;
    border-radius: 12px;
}

.kumi-taxonomy-header h3 {
    margin: 0 0 .25rem;
}

.kumi-taxonomy-meta {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.kumi-taxonomy-meta span {
    padding: .25rem .55rem;
    border-radius: 999px;
    background: rgba(113, 140, 104, .12);
    color: #4d6147;
    font-size: .76rem;
    font-weight: 700;
}

.kumi-taxonomy-description {
    padding: 1rem 1.25rem;
    color: #3f3a30;
    line-height: 1.7;
}

.kumi-population-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
    padding: 0 1.25rem 1.25rem;
}

.kumi-population-card {
    overflow: hidden;
    border-radius: 14px;
    border: 1px solid rgba(121, 101, 72, .14);
    background: rgba(255,255,255,.28);
    color: #1f1d18 !important;
}

.kumi-population-card img {
    width: 100%;
    height: 140px;
    object-fit: cover;
}

.kumi-population-content {
    padding: .9rem;
}

.kumi-population-content h4 {
    margin: 0 0 .35rem;
}

.kumi-population-rarity {
    display: inline-block;
    margin-bottom: .5rem;
    font-size: .76rem;
    font-weight: 800;
}

.kumi-population-content p {
    margin: 0;
    color: #5c574c;
}

.kumi-empty-populations {
    padding: 1rem 1.25rem 1.25rem;
    color: #6b665c;
    font-style: italic;
}

.kumi-arcane-name {
    font-size: 1.1rem;
    font-style: italic;
    opacity: 0.8;
    margin-top: .35rem;
    letter-spacing: .04em;
}

@media (max-width: 850px) {
    .kumi-taxonomy-header {
        flex-direction: column;
        align-items: stretch;
    }
}

/**************************************************************************************************
    SPECIES DOSSIER - SUBTYPES
**************************************************************************************************/

.kumi-subtype-list {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)) !important;
    gap: 1rem !important;
    align-items: stretch !important;
}

.kumi-subtype-card {
    display: grid !important;
    grid-template-columns: 140px minmax(0, 1fr) 26px !important;
    gap: 1rem !important;
    align-items: center !important;

    min-height: 140px !important;
    padding: 1rem !important;

    border-radius: 18px !important;
    border: 1px solid rgba(121, 101, 72, .16) !important;

    background:
        radial-gradient(circle at top right, rgba(255,255,255,.65), transparent 45%),
        linear-gradient(180deg, rgba(255,252,244,.94), rgba(242,234,219,.88)) !important;

    color: #1f1d18 !important;
}

.kumi-subtype-thumb {
    width: 140px !important;
    height: 100px !important;
    border-radius: 14px !important;
    overflow: hidden !important;

    border: 1px solid rgba(121, 101, 72, .12) !important;
    background: rgba(255,255,255,.32) !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    flex-shrink: 0 !important;
}

.kumi-subtype-thumb img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

.kumi-subtype-thumb span {
    font-size: .7rem !important;
    text-transform: uppercase !important;
    letter-spacing: .08em !important;
    color: #8a8478 !important;
    font-weight: 800 !important;
}

.kumi-subtype-info {
    min-width: 0 !important;
}

.kumi-subtype-info h3 {
    margin: 0 0 .35rem !important;
    line-height: 1.1 !important;
}

.kumi-subtype-meta {
    margin-bottom: .45rem !important;
    font-weight: 800 !important;
}

.kumi-subtype-info p {
    margin: 0 !important;
    color: #5d574d !important;
    line-height: 1.5 !important;
}

.kumi-subtype-arrow {
    justify-self: end !important;
    color: #718c68 !important;
    font-size: 1.1rem;
}

.kumi-subtype-arrow:hover {
    color: #2f4a2a !important;
}

@media (max-width: 900px) {
    .kumi-subtype-list {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 575px) {
    .kumi-subtype-card {
        grid-template-columns: 1fr !important;
    }

    .kumi-subtype-thumb {
        width: 100% !important;
        height: 180px !important;
    }

    .kumi-subtype-arrow {
        display: none !important;
    }
}

/**************************************************************************************************
    SPECIES DOSSIER - NATURAL HISTORY
**************************************************************************************************/
.kumi-history-intro {
    width: 100%;
    max-width: none;
    margin-bottom: 1.25rem;
    line-height: 1.75;
}

.kumi-history-sections {
    display: grid;
    gap: 1.25rem;
}

.kumi-history-section {
    padding: 1.25rem;
    border-radius: 16px;
    border: 1px solid rgba(121, 101, 72, .16);
    background: rgba(255,255,255,.28);
}

.kumi-history-section h3 {
    display: flex;
    align-items: center;
    gap: .65rem;
    margin-bottom: 1rem;
}

.kumi-history-section h3 i {
    color: #718c68;
}

.kumi-history-subsection {
    padding: 1rem 0;
    border-top: 1px solid rgba(121, 101, 72, .14);
}

.kumi-history-subsection h4 {
    margin-bottom: .45rem;
    color: #415c3c !important;
}

.kumi-history-subsection p:last-child {
    margin-bottom: 0;
}

/**************************************************************************************************
    SPECIES DOSSIER - ABILITIES
**************************************************************************************************/
.kumi-ability-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1rem;
}

.kumi-info-card {
    padding: 1rem;
    border-radius: 14px;
    border: 1px solid rgba(121, 101, 72, .16);
    background: rgba(255,255,255,.28);
}

.kumi-stat-bars > div {
    display: grid;
    grid-template-columns: 100px minmax(0, 1fr) 42px;
    gap: .75rem;
    align-items: center;
    margin-bottom: .65rem;
}

.kumi-stat-bars > div > div {
    height: 9px;
    border-radius: 999px;
    background: rgba(121, 101, 72, .16);
    overflow: hidden;
}

.kumi-stat-bars b {
    display: block;
    height: 100%;
    background: #718c68;
}

.kumi-stat-bars strong {
    text-align: right;
}

.kumi-magic-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .75rem;
}

.kumi-magic-grid div {
    padding: .85rem;
    border-radius: 12px;
    background: rgba(255,255,255,.32);
    border: 1px solid rgba(121, 101, 72, .14);
}

.kumi-magic-grid strong,
.kumi-magic-grid span {
    display: block;
}

/********************************************************************************************
    SPECIES DOSSIER - ACTIVITY MODIFIERS
********************************************************************************************/
.kumi-modifier-list {
    display: grid;
    gap: 1rem;
}

.kumi-modifier-card {
    padding: 1rem;
    border-radius: 14px;
    border: 1px solid rgba(121, 101, 72, .16);
    background: rgba(255,255,255,.28);
}

.kumi-modifier-card-header {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: start;
    margin-bottom: .75rem;
}

.kumi-modifier-card-header h3 {
    margin: .25rem 0;
}

.kumi-modifier-card-header p {
    margin: 0;
    color: #6c6559;
}

.kumi-modifier-kind {
    display: inline-block;
    padding: .2rem .5rem;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 800;
    text-transform: uppercase;
    background: rgba(113, 140, 104, .16);
}

.kumi-modifier-card.is-penalty .kumi-modifier-kind {
    background: rgba(143, 92, 70, .18);
}

.kumi-modifier-card-header > strong {
    white-space: nowrap;
    font-size: 1.05rem;
}

.kumi-modifier-meta {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-bottom: .75rem;
}

.kumi-modifier-meta span {
    padding: .35rem .6rem;
    border-radius: 999px;
    background: rgba(255,255,255,.38);
    border: 1px solid rgba(121, 101, 72, .12);
    font-size: .82rem;
}

.kumi-modifier-notes {
    padding-top: .75rem;
    border-top: 1px solid rgba(121, 101, 72, .12);
}

.kumi-modifier-notes p {
    margin-bottom: 0;
}

/**************************************************************************************************
    SPECIES DOSSIER - IMAGES
**************************************************************************************************/
.kumi-scale-image {
    width: 100%;
    max-width: 420px;
    height: auto;
    object-fit: contain;
    display: block;
    margin: 0 auto;
}

.kumi-side-image {
    width: 100%;
    border-radius: 12px;
    object-fit: cover;
}

/**************************************************************************************************
    SPECIES DOSSIER - GALLERY IMAGES
**************************************************************************************************/
.kumi-gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.25rem;
}

.kumi-gallery-card {
    overflow: hidden;
    border-radius: 18px;
    background: rgba(255,255,255,.28);
    border: 1px solid rgba(121, 101, 72, .12);
    backdrop-filter: blur(10px);
}

.kumi-gallery-image-link {
    display: block;
}

.kumi-gallery-image {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    display: block;
    transition: transform .25s ease;
}

.kumi-gallery-card:hover .kumi-gallery-image {
    transform: scale(1.03);
}

.kumi-gallery-content {
    padding: 1rem;
}

.kumi-gallery-content h3 {
    margin-bottom: .5rem;
}

.kumi-gallery-caption {
    color: #5e584f;
    line-height: 1.5;
}

.kumi-gallery-credit {
    margin-top: 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: .85rem;
    opacity: .85;
}

/**************************************************************************************************
    SPECIES DOSSIER - MASTERLIST
**************************************************************************************************/
.kumi-index-page {
    max-width: 1200px;
    margin: 0 auto;
}

.kumi-index-hero {
    padding: 1.75rem;
    margin-bottom: 1.25rem;
    border-radius: 22px;
    background: rgba(255,255,255,.32);
    border: 1px solid rgba(121, 101, 72, .14);
}

.kumi-index-hero h1 {
    margin: .25rem 0 .5rem;
}

.kumi-index-hero p {
    max-width: 760px;
    margin: 0;
}

.kumi-index-search {
    margin-bottom: 1.25rem;
}

.kumi-search-form {
    display: flex;
    gap: .75rem;
    justify-content: flex-end;
}

.kumi-search-form .form-control {
    max-width: 320px;
}

.kumi-species-index-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1rem;
}

.kumi-species-index-card {
    display: grid;
    grid-template-columns: 130px 1fr;
    gap: 1rem;
    padding: 1rem;
    border-radius: 20px;
    background: rgba(255,255,255,.34);
    border: 1px solid rgba(121, 101, 72, .14);
    color: inherit;
    text-decoration: none !important;
    transition: transform .2s ease, border-color .2s ease;
}

.kumi-species-index-card:hover {
    color: inherit;
    transform: translateY(-2px);
    border-color: rgba(121, 101, 72, .28);
}

.kumi-species-index-image {
    min-height: 130px;
    border-radius: 16px;
    overflow: hidden;
    background: rgba(255,255,255,.35);
    display: flex;
    align-items: center;
    justify-content: center;
}

.kumi-species-index-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.kumi-species-index-kicker {
    font-size: .72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .08em;
    opacity: .7;
}

.kumi-species-index-body h2 {
    margin: .2rem 0 .55rem;
    font-size: 1.35rem;
}

.kumi-species-index-meta {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    margin-bottom: .65rem;
}

.kumi-species-index-meta span {
    padding: .25rem .5rem;
    border-radius: 999px;
    background: rgba(255,255,255,.45);
    font-size: .78rem;
}

.kumi-species-index-summary {
    font-size: .9rem;
    line-height: 1.5;
    opacity: .9;
}

.kumi-species-index-footer {
    margin-top: .8rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 700;
}

@media (max-width: 575px) {
    .kumi-search-form {
        flex-direction: column;
    }

    .kumi-search-form .form-control {
        max-width: none;
    }

    .kumi-species-index-card {
        grid-template-columns: 1fr;
    }

    .kumi-species-index-image {
        min-height: 200px;
    }
}

/**************************************************************************************************
    USER PAGES
**************************************************************************************************/

.text-idle {
    color: #875413 !important;
}

@media screen and (max-width: 991px) {

    html body #app main.container-fluid > .row.kumi-page-layout {
        display: block !important;
        grid-template-columns: unset !important;
        grid-template-areas: unset !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    html body #app main.container-fluid > .row.kumi-page-layout > aside.kumi-sidebar,
    html body #app main.container-fluid > .row.kumi-page-layout > aside.sidebar.kumi-sidebar {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        z-index: 1040 !important;

        width: 82vw !important;
        max-width: 340px !important;
        height: 100vh !important;

        transform: translateX(-105%) !important;
        transition: transform .22s ease !important;

        margin: 0 !important;
        padding: 4rem 1rem 1rem !important;
        overflow-y: auto !important;
    }

    html body #app main.container-fluid > .row.kumi-page-layout > aside.kumi-sidebar.active,
    html body #app main.container-fluid > .row.kumi-page-layout > aside.sidebar.kumi-sidebar.active {
        transform: translateX(0) !important;
    }

    html body #app main.container-fluid > .row.kumi-page-layout > section.kumi-main-content {
        display: block !important;
        grid-area: unset !important;
        grid-column: unset !important;

        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        margin: 0 !important;
        padding: 1rem !important;
        transform: none !important;
    }

    html body #app main.container-fluid > .row.kumi-page-layout > aside.kumi-global-rightbar {
        display: none !important;
    }

    html body main.container-fluid {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        overflow-x: hidden !important;
    }

    html body,
    html body #app {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
    }
}

/* Account/settings page anti-squish fix */
.account-content,
.account-content .card,
.kumi-main-content .card {
    min-width: 0 !important;
}

.kumi-main-content {
    overflow-x: hidden !important;
}

@media (max-width: 1600px) {
    .kumi-page-layout.has-sidebar.has-rightbar {
        grid-template-columns: 270px minmax(0, 1fr) !important;
        grid-template-areas:
            "sidebar content"
            "sidebar rightbar" !important;
    }

    .kumi-global-rightbar {
        grid-area: rightbar !important;
        width: 100% !important;
        max-width: none !important;
        padding: 0 3rem 2rem !important;
        background: transparent !important;
    }
}

@media (max-width: 1200px) {
    .kumi-page-layout.has-sidebar.has-rightbar,
    .kumi-page-layout.has-sidebar.no-rightbar {
        grid-template-columns: minmax(0, 1fr) !important;
        grid-template-areas:
            "content"
            "rightbar" !important;
    }

    .kumi-sidebar {
        display: none !important;
    }

    .kumi-sidebar.active {
        display: block !important;
    }
}

/*******************************************************************************************
    GENETICS DATABASE
*******************************************************************************************/
.gene-overview-section {
    max-width: 1200px;
}

.gene-overview-section {
    max-width: 1100px;
}

.gene-overview-section h2 {
    margin-top: 2.25rem;
    margin-bottom: 1rem;
    padding-bottom: .35rem;
    border-bottom: 1px solid rgba(167, 132, 77, .35);
    font-size: 1.8rem;
}

.gene-overview-section h2::after,
.gene-overview-section h1::after {
    content: " ✦";
    color: #c59a58;
    font-size: .8em;
}

.gene-overview-section > .row:first-child {
    background: rgba(255, 255, 255, .28);
    border: 1px solid rgba(167, 132, 77, .25);
    padding: 1.25rem;
    margin-left: 0;
    margin-right: 0;
    box-shadow: 0 4px 14px rgba(0,0,0,.04);
}

.gene-overview-section .img-thumbnail {
    border: 1px solid rgba(167, 132, 77, .45);
    background: #f8f1e6;
    padding: .35rem;
}

.gene-overview-section .gene-section {
    background: rgba(255, 255, 255, .22);
    border-left: 4px solid #c59a58;
    padding: 1rem 1.25rem;
    margin-bottom: 1.75rem;
}

.gene-restrictions-card {
    background: rgba(255, 255, 255, .25);
    border: 1px solid rgba(167, 132, 77, .3);
}

.gene-restrictions-card h5 {
    color: #7b6040;
    margin-top: .75rem;
}

.gene-restrictions-card ul {
    margin-bottom: .75rem;
}

.gene-type-badge {
    display: inline-block;
    padding: .35rem .75rem;
    border-radius: 999px;
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .03em;
    text-transform: uppercase;
    margin-right: .35rem;
    margin-bottom: .25rem;
    border: 1px solid transparent;
}

/* Base */
.gene-type-base {
    background: rgba(125, 82, 36, 0.12);
    border-color: rgba(125, 82, 36, 0.35);
    color: #7d5224;
}

/* Dilution */
.gene-type-dilution {
    background: rgba(197, 173, 104, 0.14);
    border-color: rgba(197, 173, 104, 0.4);
    color: #8f7741;
}

/* Modifier */
.gene-type-modifier {
    background: rgba(92, 117, 168, 0.12);
    border-color: rgba(92, 117, 168, 0.35);
    color: #4e6797;
}

/* Marking */
.gene-type-marking {
    background: rgba(122, 92, 153, 0.12);
    border-color: rgba(122, 92, 153, 0.35);
    color: #73548f;
}

.gene-rarity-badge {
    display: inline-block;
    padding: .32rem .7rem;
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
    border: 1px solid transparent;
}

/* Common */
.rarity-common {
    background: rgba(120,120,120,.12);
    border-color: rgba(120,120,120,.35);
    color: #6f6f6f;
}

/* Uncommon */
.rarity-uncommon {
    background: rgba(90,140,95,.12);
    border-color: rgba(90,140,95,.35);
    color: #537f57;
}

/* Rare */
.rarity-rare {
    background: rgba(70,110,180,.12);
    border-color: rgba(70,110,180,.35);
    color: #456ab0;
}

/* Scarce */
.rarity-scarce {
    background: rgba(125,90,165,.12);
    border-color: rgba(125,90,165,.35);
    color: #7650a5;
}

/* Exquisite */
.rarity-exquisite {
    background: rgba(196,138,54,.14);
    border-color: rgba(196,138,54,.38);
    color: #b27622;
}

/* Mythic */
.rarity-mythic {
    background: linear-gradient(
        135deg,
        rgba(35,35,55,.96),
        rgba(95,45,125,.96)
    );
    border-color: rgba(170,120,255,.55);
    color: #f1e3ff;
    box-shadow: 0 0 10px rgba(170,120,255,.18);
}

/* Legendary */
.rarity-legendary {
    background: rgba(186, 132, 42, .14);
    border-color: rgba(186, 132, 42, .38);
    color: #a36f1f;
    box-shadow: none;
}

/* Guardian */
.rarity-guardian {
    background: linear-gradient(
        135deg,
        rgba(20,85,95,.96),
        rgba(80,190,180,.96)
    );
    border-color: rgba(150,255,240,.6);
    color: #ecfffd;
    box-shadow: 0 0 12px rgba(120,255,240,.2);
}

.gene-guide-card {
    background: rgba(255, 255, 255, .22);
    border: 1px solid rgba(167, 132, 77, .28);
    border-radius: 14px;
    padding: 1.25rem;
    margin-bottom: 1.5rem;
}

.gene-guide-image-box {
    text-align: center;
    margin-bottom: 1rem;
}

.gene-guide-image-box img {
    max-width: 100%;
    max-height: 420px;
    object-fit: contain;
    border-radius: 10px;
}

.gene-guide-text {
    width: 100%;
}

.gene-guide-text h5 {
    margin-bottom: .75rem;
}

.gene-interaction-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem;
}

.gene-interaction-grid.single {
    grid-template-columns: 1fr;
}

@media (max-width: 768px) {
    .gene-interaction-grid {
        grid-template-columns: 1fr;
    }
}

.gene-range-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.gene-range-tab {
    border: 1px solid rgba(167, 132, 77, .35);
    background: rgba(255,255,255,.25);
    color: #6f573a;
    border-radius: 999px;
    padding: .45rem .9rem;
    cursor: pointer;
    font-weight: 600;
}

.gene-range-tab.active,
.gene-range-tab:hover {
    background: rgba(197, 154, 88, .22);
    border-color: rgba(197, 154, 88, .65);
    color: #4f3b25;
}

.gene-range-panel {
    display: none;
}

.gene-range-panel.active {
    display: block;
}

.gene-page-container {
    width: 100%;
    max-width: 100%;
}

.gene-page-container .gene-overview-section {
    width: 100%;
}

.gene-page-container .row {
    margin-left: 0;
    margin-right: 0;
}

/*******************************************************************************************
    GENE PAGE FULL WIDTH FIX
*******************************************************************************************/

.gene-page-container,
.gene-overview-section {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.gene-page-container .gene-guide-card,
.gene-page-container .gene-section,
.gene-page-container .card {
    width: 100% !important;
    max-width: none !important;
}

.gene-page-container .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.gene-page-container [class*="col-"] {
    max-width: none;
}

/******************************************************************************************
    CHARACTER PAGES
******************************************************************************************/
.character-card-name {
    overflow-wrap: anywhere;
    word-break: break-word;
    line-height: 1.15;
}

/**********************************************************************************************
    MASTERLIST
**********************************************************************************************/

.character-masterlist-name {
    overflow-wrap: anywhere;
    word-break: break-word;
    line-height: 1.15;
}