/* ========================================================================== 
   CHARACTERS V5 — TEOS BLACK DIAMOND
   ========================================================================== */

body.site-page.site-page--characters .page-index > .content {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 330px !important;
    align-items: start !important;
    gap: 24px !important;
    width: min(1440px, calc(100% - 64px)) !important;
    padding: 36px 0 72px !important;
}

body.site-page.site-page--characters .column-left {
    display: block !important;
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: auto !important;
    min-width: 0 !important;
    margin: 0 !important;
}

body.site-page.site-page--characters .column-right.home-sidebar {
    display: grid !important;
    grid-column: 2 !important;
    grid-row: 1 !important;
    align-self: start !important;
    align-content: start !important;
    width: 330px !important;
    margin: 0 !important;
}

body.site-page.site-page--characters .content-header {
    display: none !important;
}

body.site-page.site-page--characters .column-left > .content-bg {
    overflow: hidden !important;
    background: rgba(4, 8, 13, .95) !important;
    border: 1px solid rgba(202, 211, 222, .11) !important;
    border-top-color: rgba(226, 194, 111, .56) !important;
    box-shadow: 0 22px 58px rgba(0, 0, 0, .28) !important;
}

.characters-page,
.characters-page *,
.characters-page *::before,
.characters-page *::after {
    box-sizing: border-box;
}

.characters-page {
    width: 100%;
    min-width: 0;
    padding: 0 0 42px !important;
    color: #d9dee5;
}

/* Hero */

.characters-hero {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 158px;
    margin: 0;
    padding: 25px 48px 28px;
    overflow: hidden;
    background:
        radial-gradient(circle at 82% 35%, rgba(201, 160, 69, .13), transparent 28%),
        linear-gradient(118deg, rgba(5, 9, 14, .99) 0%, rgba(9, 14, 20, .97) 59%, rgba(21, 20, 16, .94) 100%);
    border: 0;
    border-bottom: 1px solid rgba(213, 184, 115, .25);
    border-radius: 0;
    box-shadow: none;
}

.characters-hero::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 47%;
    height: 2px;
    background: linear-gradient(90deg, #efd078, rgba(213, 184, 115, .1));
}

.characters-hero::after {
    display: none;
}

.characters-hero__content {
    position: relative;
    z-index: 1;
    max-width: 690px;
    padding-right: 0;
}

.characters-eyebrow,
.characters-section-kicker {
    color: #d8b95f;
    font-size: 12px;
    line-height: 1.3;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.characters-title {
    margin: 8px 0 9px;
    color: #f1eee6;
    font-family: "Cormorant SC", Georgia, "Times New Roman", serif;
    font-size: 46px;
    line-height: 1.04;
    font-weight: 600;
    letter-spacing: .015em;
}

.characters-description {
    max-width: 610px;
    margin: 0;
    color: #929ba7;
    font-size: 15px;
    line-height: 1.55;
}

/* Action explanation strip */

.characters-info {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    margin: 0;
    padding: 0 48px;
    background: rgba(7, 11, 16, .72);
    border-bottom: 1px solid rgba(213, 184, 115, .16);
}

.characters-info__item {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    align-items: center;
    gap: 15px;
    min-height: 116px;
    padding: 22px 22px;
    background: transparent;
    border: 0;
    border-right: 1px solid rgba(202, 211, 222, .08);
    border-radius: 0;
}

.characters-info__item:first-child {
    padding-left: 0;
}

.characters-info__item:last-child {
    padding-right: 0;
    border-right: 0;
}

.characters-info__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    color: #d6ba68;
    background: linear-gradient(135deg, rgba(213, 184, 115, .13), rgba(213, 184, 115, .025));
    border: 1px solid rgba(213, 184, 115, .28);
    border-radius: 0;
    clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
    font-size: 13px;
}

.characters-info__icon--delete {
    color: #d48a82;
    background: linear-gradient(135deg, rgba(169, 73, 66, .14), rgba(169, 73, 66, .025));
    border-color: rgba(191, 92, 83, .3);
}

.characters-info__icon--restore {
    color: #8bc5cb;
    background: linear-gradient(135deg, rgba(103, 176, 185, .13), rgba(103, 176, 185, .025));
    border-color: rgba(115, 190, 198, .26);
}

.characters-info__item strong {
    display: block;
    color: #e1e5ea;
    font-size: 14px;
    line-height: 1.35;
    font-weight: 700;
}

.characters-info__item p {
    margin: 5px 0 0;
    color: #77818e;
    font-size: 12px;
    line-height: 1.5;
}

.characters-info__item p b {
    color: #d5b967;
}

/* Character sections */

.characters-section {
    margin: 0;
    padding: 38px 48px 42px;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.characters-section + .characters-section {
    border-top: 1px solid rgba(213, 184, 115, .18);
}

.characters-section--deleted {
    background: linear-gradient(180deg, rgba(84, 35, 35, .025), transparent 55%);
}

.characters-section-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin: 0 0 22px;
    padding: 0 0 17px;
    border-bottom: 1px solid rgba(202, 211, 222, .1);
}

.characters-section-head h2 {
    margin: 6px 0 0;
    color: #eeeae2;
    font-family: "Cormorant SC", Georgia, "Times New Roman", serif;
    font-size: 31px;
    line-height: 1.1;
    font-weight: 600;
    letter-spacing: .01em;
}

.characters-section-head p {
    margin: 6px 0 0;
    color: #7e8894;
    font-size: 13px;
    line-height: 1.45;
}

.characters-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    min-width: 42px;
    height: 36px;
    padding: 0 12px;
    color: #e3c871;
    background: rgba(213, 184, 115, .07);
    border: 1px solid rgba(213, 184, 115, .25);
    border-radius: 0;
    clip-path: polygon(7px 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%, 0 7px);
    font-size: 13px;
    line-height: 1;
    font-weight: 800;
}

.characters-count--deleted {
    color: #cc918b;
    background: rgba(160, 72, 65, .07);
    border-color: rgba(180, 84, 76, .24);
}

.characters-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

/* Character card */

.characters-card {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, rgba(14, 19, 26, .98), rgba(7, 11, 16, .98));
    border: 1px solid rgba(202, 211, 222, .11);
    border-radius: 0;
    box-shadow: 0 14px 34px rgba(0, 0, 0, .18);
    transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}

.characters-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, rgba(213, 184, 115, .6), transparent 56%);
    opacity: .6;
}

.characters-card:hover {
    transform: translateY(-2px);
    border-color: rgba(213, 184, 115, .31);
    box-shadow: 0 18px 42px rgba(0, 0, 0, .3);
}

.characters-card--main {
    border-color: rgba(226, 196, 112, .36);
    box-shadow: inset 3px 0 0 #d8b75c, 0 16px 38px rgba(0, 0, 0, .22);
}

.characters-card--deleted {
    opacity: .83;
    filter: saturate(.75);
}

.characters-card__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    min-height: 96px;
    padding: 17px 18px;
    border-bottom: 1px solid rgba(202, 211, 222, .08);
}

.characters-card__identity {
    display: flex;
    align-items: center;
    min-width: 0;
    gap: 15px;
}

.characters-card__class-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    background: radial-gradient(circle, rgba(213, 184, 115, .12), rgba(9, 13, 18, .5) 68%);
    border: 1px solid rgba(213, 184, 115, .22);
    border-radius: 0;
    clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}

.characters-card__class-image {
    display: block;
    width: 24px;
    height: 24px;
    object-fit: contain;
    image-rendering: auto;
}

.characters-card__name-wrap {
    min-width: 0;
}

.characters-card__name {
    overflow: hidden;
    color: #f0f2f5;
    font-size: 19px;
    line-height: 1.25;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.characters-card__meta {
    margin-top: 5px;
    color: #808a96;
    font-size: 12px;
    line-height: 1.4;
}

.characters-card__meta span {
    margin: 0 6px;
    color: #b4974f;
}

.characters-card__main-badge,
.characters-card__deleted-badge {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    min-height: 27px;
    padding: 0 10px;
    border-radius: 0;
    font-size: 10px;
    line-height: 1;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.characters-card__main-badge {
    color: #e5ca76;
    background: rgba(213, 184, 115, .08);
    border: 1px solid rgba(213, 184, 115, .25);
}

.characters-card__deleted-badge {
    color: #cf928b;
    background: rgba(164, 70, 63, .08);
    border: 1px solid rgba(180, 82, 74, .24);
}

.characters-card__stats {
    display: grid;
    grid-template-columns: 1.5fr .65fr .65fr;
    gap: 1px;
    background: rgba(202, 211, 222, .07);
    border-bottom: 1px solid rgba(202, 211, 222, .07);
}

.characters-card__stats--deleted {
    grid-template-columns: 1.5fr .65fr;
}

.characters-card__stat {
    min-width: 0;
    padding: 13px 15px;
    background: rgba(6, 10, 15, .94);
}

.characters-card__stat > span {
    display: block;
    margin-bottom: 6px;
    color: #68727e;
    font-size: 10px;
    line-height: 1.2;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.characters-card__stat strong {
    display: flex;
    align-items: center;
    min-height: 32px;
    overflow: hidden;
    color: #d5dae0;
    font-size: 14px;
    line-height: 1.35;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.characters-card__faction {
    gap: 9px;
}

.characters-card__faction-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    overflow: visible;
}

.characters-card__faction-icon > .faction_light,
.characters-card__faction-icon > .faction_dark {
    flex: 0 0 45px;
    width: 45px !important;
    height: 54px !important;
    margin: 0 !important;
    transform: scale(.55) !important;
    transform-origin: center !important;
}

.characters-card__actions {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 12px 14px;
}

.characters-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 40px;
    padding: 0 15px;
    color: #aeb6c1;
    background: rgba(255, 255, 255, .025);
    border: 1px solid rgba(202, 211, 222, .12);
    border-radius: 0;
    font-family: inherit;
    font-size: 12px;
    line-height: 1.2;
    font-weight: 800;
    cursor: pointer;
    clip-path: polygon(7px 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%, 0 7px);
    transition: color .18s ease, background .18s ease, border-color .18s ease, transform .18s ease;
}

button.characters-action {
    appearance: none;
}

.characters-action:hover {
    transform: translateY(-1px);
}

.characters-action--main {
    color: #dfc875;
    border-color: rgba(213, 184, 115, .24);
}

.characters-action--main:hover {
    color: #fff0b1;
    background: rgba(213, 184, 115, .1);
    border-color: rgba(213, 184, 115, .48);
}

.characters-action--delete {
    margin-left: auto;
    color: #c08b86;
    border-color: rgba(176, 78, 70, .18);
}

.characters-action--delete:hover {
    color: #efaaa3;
    background: rgba(158, 61, 54, .1);
    border-color: rgba(190, 88, 80, .4);
}

.characters-action--restore {
    width: 100%;
    color: #9bcbd0;
    border-color: rgba(112, 183, 190, .2);
}

.characters-action--restore:hover {
    color: #c4f2f5;
    background: rgba(77, 146, 153, .1);
    border-color: rgba(112, 183, 190, .42);
}

.characters-action--current {
    color: #a8c9a4;
    cursor: default;
    pointer-events: none;
}

.characters-empty {
    grid-column: 1 / -1;
    padding: 42px 24px;
    color: #7f8995;
    background: rgba(255, 255, 255, .015);
    border: 1px dashed rgba(202, 211, 222, .14);
    border-radius: 0;
    font-size: 14px;
    line-height: 1.5;
    text-align: center;
}

@media (max-width: 1300px) and (min-width: 901px) {
    body.site-page.site-page--characters .page-index > .content {
        grid-template-columns: minmax(0, 1fr) 290px !important;
        gap: 20px !important;
        width: calc(100% - 40px) !important;
    }

    body.site-page.site-page--characters .column-right.home-sidebar {
        width: 290px !important;
    }

    .characters-hero,
    .characters-section {
        padding-right: 34px;
        padding-left: 34px;
    }

    .characters-info {
        padding-right: 34px;
        padding-left: 34px;
    }

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

@media (max-width: 900px) {
    body.site-page.site-page--characters .page-index > .content {
        display: block !important;
        width: calc(100% - 28px) !important;
        padding: 24px 0 52px !important;
    }

    body.site-page.site-page--characters .column-left,
    body.site-page.site-page--characters .column-right.home-sidebar {
        display: block !important;
        width: 100% !important;
    }

    body.site-page.site-page--characters .column-right.home-sidebar {
        margin-top: 22px !important;
    }

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

@media (max-width: 720px) {
    .characters-hero {
        min-height: 158px;
        padding: 25px 24px 28px;
    }

    .characters-hero__content {
        padding-right: 0;
    }

    .characters-title {
        font-size: 38px;
    }

    .characters-info {
        grid-template-columns: minmax(0, 1fr);
        padding: 0 24px;
    }

    .characters-info__item,
    .characters-info__item:first-child,
    .characters-info__item:last-child {
        min-height: 92px;
        padding: 18px 0;
        border-right: 0;
        border-bottom: 1px solid rgba(202, 211, 222, .08);
    }

    .characters-info__item:last-child {
        border-bottom: 0;
    }

    .characters-section {
        padding: 31px 24px 35px;
    }

    .characters-section-head {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        grid-template-rows: auto auto auto !important;
        align-items: center !important;
        column-gap: 14px !important;
        row-gap: 0 !important;
    }

    .characters-section-head > div {
        display: contents;
    }

    .characters-section-head .characters-section-kicker {
        grid-column: 1;
        grid-row: 1;
        min-width: 0;
    }

    .characters-section-head h2 {
        grid-column: 1 / -1;
        grid-row: 2;
    }

    .characters-section-head p {
        grid-column: 1 / -1;
        grid-row: 3;
    }

    .characters-section-head .characters-count {
        grid-column: 2;
        grid-row: 1;
        align-self: center;
        min-width: 38px;
        height: 30px;
        padding: 0 10px;
    }

    .characters-section-head h2 {
        font-size: 28px;
    }
}

@media (max-width: 520px) {
    .characters-hero,
    .characters-section,
    .characters-info {
        padding-right: 18px;
        padding-left: 18px;
    }

    .characters-hero__content {
        padding-right: 0;
    }

    .characters-title {
        font-size: 34px;
    }

    .characters-description {
        font-size: 14px;
    }

    .characters-card__top {
        align-items: flex-start;
        flex-direction: column;
    }

    .characters-card__main-badge,
    .characters-card__deleted-badge {
        margin-left: 55px;
    }

    .characters-card__stats,
    .characters-card__stats--deleted {
        grid-template-columns: minmax(0, 1fr);
    }

    .characters-card__actions {
        align-items: stretch;
        flex-direction: column;
    }

    .characters-action,
    .characters-action--delete {
        width: 100%;
        margin-left: 0;
    }
}