:root {
    --regions-gold: #B29758;
    --regions-dark: #1F2032;
    --regions-dark-2: #181927;
    --regions-dark-3: #26273B;
    --regions-cream: #E8E2D5;
    --regions-text: #CBC6BD;
}

.regions-page {
    width: min(1160px, calc(100% - 48px));
    margin: 0 auto;
    padding: 48px 0 72px;
    flex: 1 0 auto;
}

.regions-hero {
    padding: 38px 34px 34px;
    border: 1px solid rgba(178,151,88,.2);
    background:
        radial-gradient(
            circle at 50% -40%,
            rgba(178,151,88,.12),
            transparent 42%
        ),
        linear-gradient(
            180deg,
            rgba(38,39,59,.75),
            rgba(24,25,39,.88)
        );
    text-align: center;
}

.ornament {
    display: flex;
    width: min(420px, 80%);
    margin: 0 auto 22px;
    align-items: center;
    gap: 14px;
    color: var(--regions-gold);
}

.ornament span {
    height: 1px;
    flex: 1;
    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(178,151,88,.5),
            transparent
        );
}

.ornament b {
    font-weight: 400;
}

.regions-kicker {
    color: var(--regions-gold);
    font-family: 'Cinzel', serif;
    font-size: 10px;
    letter-spacing: .22em;
}

.regions-hero h1 {
    margin: 8px 0 12px;
    color: var(--regions-cream);
    font-family: 'Cinzel Decorative', 'Cinzel', serif;
    font-size: clamp(30px, 5vw, 54px);
    font-weight: 400;
}

.regions-hero > p {
    width: min(650px, 100%);
    margin: 0 auto;
    color: #aaa79f;
    font-size: 13px;
    line-height: 1.8;
}

.regions-stats {
    display: flex;
    justify-content: center;
    gap: 1px;
    width: min(620px, 100%);
    margin: 28px auto 0;
    border: 1px solid rgba(178,151,88,.16);
}

.regions-stats div {
    flex: 1;
    padding: 16px 10px;
    background: rgba(12,13,21,.22);
}

.regions-stats div + div {
    border-left: 1px solid rgba(178,151,88,.14);
}

.regions-stats strong {
    display: block;
    color: var(--regions-cream);
    font-family: 'Cinzel', serif;
    font-size: 20px;
    font-weight: 500;
}

.regions-stats span {
    display: block;
    margin-top: 4px;
    color: var(--regions-gold);
    font-family: 'Cinzel', serif;
    font-size: 8px;
    letter-spacing: .12em;
}

.regions-tools {
    display: grid;
    grid-template-columns: minmax(200px, 1fr) auto auto;
    gap: 10px;
    align-items: end;
    margin: 18px 0;
    padding: 16px;
    border: 1px solid rgba(178,151,88,.16);
    background: rgba(24,25,39,.82);
}

.regions-tools label span {
    display: block;
    margin-bottom: 7px;
    color: var(--regions-gold);
    font-family: 'Cinzel', serif;
    font-size: 8px;
    letter-spacing: .12em;
}

.regions-tools input {
    width: 100%;
    min-height: 42px;
    padding: 10px 12px;
    border: 1px solid rgba(178,151,88,.18);
    outline: none;
    background: #171824;
    color: var(--regions-cream);
    font-family: 'Poppins', sans-serif;
}

.regions-tools input:focus {
    border-color: rgba(178,151,88,.65);
}

.regions-tools button {
    min-height: 42px;
    padding: 0 14px;
    border: 1px solid rgba(178,151,88,.22);
    background: rgba(178,151,88,.06);
    color: #bbb7ad;
    font-family: 'Cinzel', serif;
    font-size: 8px;
    letter-spacing: .08em;
    cursor: pointer;
}

.regions-tools button:hover {
    border-color: rgba(178,151,88,.55);
    color: var(--regions-cream);
}

.kingdom-card {
    margin-bottom: 14px;
    border: 1px solid rgba(178,151,88,.18);
    background:
        linear-gradient(
            180deg,
            rgba(38,39,59,.72),
            rgba(24,25,39,.89)
        );
}

.kingdom-card > summary {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    gap: 18px;
    align-items: center;
    min-height: 78px;
    padding: 14px 22px;
    cursor: pointer;
    list-style: none;
}

.kingdom-card > summary::-webkit-details-marker {
    display: none;
}

.kingdom-mark {
    color: var(--regions-gold);
    font-size: 16px;
}

.kingdom-title small {
    display: block;
    color: var(--regions-gold);
    font-family: 'Cinzel', serif;
    font-size: 8px;
    letter-spacing: .14em;
}

.kingdom-title strong {
    display: block;
    margin-top: 3px;
    color: var(--regions-cream);
    font-family: 'Cinzel', serif;
    font-size: 17px;
    font-weight: 500;
}

.kingdom-count {
    color: #8f8b84;
    font-size: 10px;
}

.kingdom-count i {
    margin: 0 5px;
    color: var(--regions-gold);
    font-style: normal;
}

.kingdom-chevron {
    color: var(--regions-gold);
    font-size: 19px;
    font-weight: 300;
    transition: transform .18s ease;
}

.kingdom-card[open] .kingdom-chevron {
    transform: rotate(45deg);
}

.kingdom-body {
    padding: 0 22px 22px;
    border-top: 1px solid rgba(178,151,88,.11);
}

.region-block {
    padding: 24px 0 4px;
}

.region-block + .region-block {
    border-top: 1px solid rgba(178,151,88,.1);
}

.region-heading {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    align-items: flex-end;
    margin-bottom: 12px;
}

.region-heading span {
    color: #8d887e;
    font-family: 'Cinzel', serif;
    font-size: 7px;
    letter-spacing: .14em;
}

.region-heading h2 {
    margin: 3px 0 0;
    color: var(--regions-gold);
    font-family: 'Cinzel', serif;
    font-size: 15px;
    font-weight: 500;
}

.region-heading b {
    color: #807c74;
    font-size: 9px;
    font-weight: 400;
}

.topic-list {
    border-left: 1px solid rgba(178,151,88,.17);
    margin-left: 6px;
}

.topic-link {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    min-height: 47px;
    padding: 8px 10px 8px 16px;
    border-bottom: 1px solid rgba(178,151,88,.08);
    color: #c9c3b8;
    transition: .16s ease;
}

.topic-link:hover {
    padding-left: 20px;
    background: rgba(178,151,88,.045);
    color: var(--regions-cream);
}

.topic-diamond {
    color: var(--regions-gold);
    font-size: 7px;
}

.topic-title {
    min-width: 0;
    font-size: 12px;
}

.topic-external {
    color: #77736c;
    font-family: 'Cinzel', serif;
    font-size: 7px;
    letter-spacing: .09em;
}

.topic-link:hover .topic-external {
    color: var(--regions-gold);
}

.topic-empty,
.region-empty {
    padding: 16px;
    color: #77736c;
    font-size: 11px;
}

.registry-empty {
    padding: 54px 30px;
    border: 1px solid rgba(178,151,88,.18);
    background: rgba(24,25,39,.82);
    text-align: center;
}

.registry-empty > span {
    color: var(--regions-gold);
}

.registry-empty h2 {
    color: var(--regions-cream);
    font-family: 'Cinzel', serif;
    font-weight: 500;
}

.registry-empty p {
    color: #8d8982;
    font-size: 12px;
}

.kingdom-card.is-search-hidden,
.region-block.is-search-hidden,
.topic-link.is-search-hidden {
    display: none;
}

@media (max-width: 760px) {
    .regions-page {
        width: calc(100% - 28px);
        padding-top: 28px;
    }

    .regions-hero {
        padding: 30px 18px;
    }

    .regions-tools {
        grid-template-columns: 1fr 1fr;
    }

    .regions-tools label {
        grid-column: 1 / -1;
    }

    .kingdom-card > summary {
        grid-template-columns: auto minmax(0, 1fr) auto;
        gap: 11px;
        padding: 12px 15px;
    }

    .kingdom-count {
        display: none;
    }

    .kingdom-body {
        padding: 0 14px 16px;
    }

    .topic-link {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .topic-external {
        display: none;
    }
}


/* =========================================================
   REGIÕES — SOMENTE CONTEÚDO
   Header/sidebar/layout vêm 100% do css/index.css da HOME.
========================================================= */

.regions-page {
    flex: 1 0 auto;
}