/* =========================================================
   CRDGAME — Item Codex Blocks
   Таблицы и карточки предметов в стиле CRDGAME
   Файл: /file/items/crd-item-codex.css
   Версия: 20260617-6
========================================================= */

.crd-item-codex {
    --crd-bg-main: #11100e;
    --crd-bg-panel: #171512;
    --crd-bg-head: #211f1c;
    --crd-bg-row: #151412;
    --crd-bg-row-alt: #191715;
    --crd-bg-highlight: rgba(216, 166, 74, 0.075);

    --crd-border: rgba(174, 137, 84, 0.18);
    --crd-border-soft: rgba(255, 255, 255, 0.06);

    --crd-text: #ded8c8;
    --crd-muted: #aaa391;
    --crd-gold: #d8a64a;
    --crd-gold-hover: #efc36a;

    width: 100% !important;
    max-width: 1180px !important;
    margin: 34px auto !important;
    color: var(--crd-text) !important;
    font-family: "Open Sans", Arial, sans-serif !important;
    box-sizing: border-box !important;
}

.crd-item-codex *,
.crd-item-codex *::before,
.crd-item-codex *::after {
    box-sizing: border-box !important;
}

/* =========================================================
   ПАНЕЛЬ ФИЛЬТРОВ
========================================================= */

.crd-item-filters {
    display: grid !important;
    grid-template-columns: 1fr 1fr 1.2fr !important;
    gap: 12px !important;
    margin: 0 0 18px !important;
}

.crd-item-filter,
.crd-item-search {
    width: 100% !important;
    height: 44px !important;
    padding: 0 14px !important;

    color: var(--crd-text) !important;
    background:
        linear-gradient(180deg, rgba(31, 28, 24, 0.96), rgba(15, 14, 13, 0.96)) !important;

    border: 1px solid var(--crd-border) !important;
    outline: none !important;

    font-size: 14px !important;
    line-height: 44px !important;
}

.crd-item-search::placeholder {
    color: rgba(222, 216, 200, 0.45) !important;
}

.crd-item-filter:focus,
.crd-item-search:focus {
    border-color: rgba(216, 166, 74, 0.55) !important;
    box-shadow: 0 0 0 1px rgba(216, 166, 74, 0.18) !important;
}

/* =========================================================
   ТАБЛИЦА ПРЕДМЕТОВ
========================================================= */

.crd-item-table-wrap {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;

    background: var(--crd-bg-main) !important;
    border: 1px solid var(--crd-border) !important;
    box-shadow: 0 16px 38px rgba(0, 0, 0, 0.26) !important;
}

.crd-item-table {
    width: 100% !important;
    min-width: 920px !important;

    table-layout: fixed !important;
    border-collapse: collapse !important;
    border-spacing: 0 !important;

    background: var(--crd-bg-main) !important;
}

/* Колонки */
.crd-item-table th:nth-child(1),
.crd-item-table td:nth-child(1) {
    width: 90px !important;
    min-width: 90px !important;
    max-width: 90px !important;
}

.crd-item-table th:nth-child(2),
.crd-item-table td:nth-child(2) {
    width: 28% !important;
}

.crd-item-table th:nth-child(3),
.crd-item-table td:nth-child(3) {
    width: 24% !important;
}

.crd-item-table th:nth-child(4),
.crd-item-table td:nth-child(4) {
    width: 22% !important;
}

.crd-item-table th:nth-child(5),
.crd-item-table td:nth-child(5) {
    width: 18% !important;
}

/* Шапка таблицы */
.crd-item-table thead th {
    height: 54px !important;
    padding: 0 14px !important;

    color: #e7dfc9 !important;
    background: var(--crd-bg-head) !important;

    border-bottom: 1px solid var(--crd-border) !important;
    border-right: 1px solid rgba(255, 255, 255, 0.055) !important;

    font-family: "Russo One", "Open Sans", Arial, sans-serif !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    line-height: 1.2 !important;
    letter-spacing: 0.6px !important;
    text-align: left !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
    vertical-align: middle !important;
}

.crd-item-table thead th:last-child {
    border-right: 0 !important;
}

.crd-item-table thead th.crd-sortable {
    cursor: pointer !important;
}

.crd-item-table thead th.crd-sortable::after {
    content: "◆" !important;
    float: right !important;
    margin-left: 8px !important;

    color: rgba(222, 216, 200, 0.25) !important;
    font-size: 10px !important;

    transform: rotate(45deg) !important;
}

/* Строки */
.crd-item-table tbody tr {
    height: 74px !important;
    background: var(--crd-bg-row) !important;
    transition: background 0.18s ease !important;
}

.crd-item-table tbody tr:nth-child(even) {
    background: var(--crd-bg-row-alt) !important;
}

.crd-item-table tbody tr:hover {
    background: #211d19 !important;
}

.crd-item-table tbody tr.crd-row-highlight {
    background:
        linear-gradient(90deg, var(--crd-bg-highlight), rgba(25, 23, 20, 0.98)) !important;
}

/* Ячейки */
.crd-item-table td {
    height: 74px !important;
    padding: 10px 14px !important;

    color: var(--crd-muted) !important;
    background: transparent !important;

    border-bottom: 1px solid rgba(255, 255, 255, 0.035) !important;
    border-right: 1px solid rgba(255, 255, 255, 0.045) !important;

    font-size: 15px !important;
    line-height: 1.4 !important;
    vertical-align: middle !important;
}

.crd-item-table td:last-child {
    border-right: 0 !important;
}

/* =========================================================
   ТАБЛИЦА — ИКОНКИ ЧЕРЕЗ $IMAGE$
========================================================= */

.crd-item-table .crd-item-icon-cell,
.crd-item-table td.crd-item-icon-cell {
    width: 90px !important;
    min-width: 90px !important;
    max-width: 90px !important;

    padding: 8px 10px !important;

    text-align: center !important;
    vertical-align: middle !important;
    overflow: hidden !important;
}

.crd-item-table .crd-item-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 64px !important;
    height: 64px !important;
    min-width: 64px !important;
    min-height: 64px !important;
    max-width: 64px !important;
    max-height: 64px !important;

    margin: 0 auto !important;
    padding: 0 !important;

    overflow: hidden !important;

    background: rgba(0, 0, 0, 0.22) !important;
    border: 1px solid rgba(174, 137, 84, 0.28) !important;
    box-shadow: none !important;
}

/* Только uCoz-обёртки внутри маленькой иконки таблицы */
.crd-item-table .crd-item-icon .crd-article-img,
.crd-item-table .crd-item-icon .news-image-wrap,
.crd-item-table .crd-item-icon .news-image-wrap.center,
.crd-item-table .crd-item-icon .ulightbox,
.crd-item-table .crd-item-icon a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 62px !important;
    height: 62px !important;
    min-width: 62px !important;
    min-height: 62px !important;
    max-width: 62px !important;
    max-height: 62px !important;

    margin: 0 !important;
    padding: 0 !important;

    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    outline: 0 !important;

    overflow: hidden !important;
}

.crd-item-table .crd-item-icon img {
    display: block !important;

    width: 62px !important;
    height: 62px !important;
    min-width: 62px !important;
    min-height: 62px !important;
    max-width: 62px !important;
    max-height: 62px !important;

    object-fit: contain !important;

    margin: 0 auto !important;
    padding: 0 !important;

    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    outline: 0 !important;

    float: none !important;
    position: static !important;
    transform: none !important;

    filter: drop-shadow(0 7px 10px rgba(0, 0, 0, 0.55)) !important;
}

/* =========================================================
   ТАБЛИЦА — НАЗВАНИЯ
========================================================= */

.crd-item-table td.crd-item-name {
    display: table-cell !important;

    color: var(--crd-gold) !important;
    background: transparent !important;

    border-left: 0 !important;
    box-shadow: none !important;

    padding: 10px 14px !important;

    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 1.35 !important;

    text-align: left !important;
    vertical-align: middle !important;
}

.crd-item-table td.crd-item-name a,
.crd-item-table .crd-item-name a,
.crd-item-table a.crd-item-name {
    display: inline !important;
    position: static !important;

    color: var(--crd-gold) !important;
    background: transparent !important;
    background-color: transparent !important;

    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;

    margin: 0 !important;
    padding: 0 !important;

    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 1.35 !important;

    text-decoration: none !important;
    white-space: normal !important;
}

.crd-item-table td.crd-item-name a::before,
.crd-item-table td.crd-item-name a::after,
.crd-item-table .crd-item-name a::before,
.crd-item-table .crd-item-name a::after,
.crd-item-table a.crd-item-name::before,
.crd-item-table a.crd-item-name::after {
    display: none !important;
    content: none !important;
}

.crd-item-table td.crd-item-name a:hover,
.crd-item-table .crd-item-name a:hover,
.crd-item-table a.crd-item-name:hover {
    color: var(--crd-gold-hover) !important;
    background: transparent !important;

    border: 0 !important;
    box-shadow: none !important;

    text-decoration: none !important;
}

/* Остальные ячейки */
.crd-item-table .crd-item-effect,
.crd-item-table .crd-item-source,
.crd-item-table .crd-item-region {
    font-size: 15px !important;
    line-height: 1.4 !important;
}

.crd-item-table .crd-item-effect {
    color: #e5dfcc !important;
    font-weight: 700 !important;
}

.crd-item-table .crd-item-source,
.crd-item-table .crd-item-region {
    color: var(--crd-muted) !important;
    font-weight: 600 !important;
}

/* =========================================================
   КАРТОЧКА ПРЕДМЕТА
========================================================= */

.crd-item-card {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 260px !important;
    gap: 34px !important;
    align-items: center !important;

    width: 100% !important;
    max-width: 940px !important;
    min-height: 0 !important;

    margin: 34px auto !important;
    padding: 30px 34px !important;

    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;

    box-sizing: border-box !important;
}

/* Контент слева */
.crd-item-card-content {
    grid-column: 1 !important;
    grid-row: 1 !important;

    min-width: 0 !important;
    max-width: none !important;

    border: 0 !important;
    box-shadow: none !important;
}

/* Картинка справа */
.crd-item-card > .crd-item-card-media {
    grid-column: 2 !important;
    grid-row: 1 !important;

    align-self: center !important;
    justify-self: center !important;

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

    width: 240px !important;
    min-width: 240px !important;
    max-width: 240px !important;

    min-height: 240px !important;

    margin: 0 !important;
    padding: 0 !important;

    background: transparent !important;
    border: 0 !important;
    border-left: 0 !important;
    box-shadow: none !important;
    outline: 0 !important;

    overflow: hidden !important;
}

/* Только uCoz-обёртки внутри картинки карточки */
.crd-item-card > .crd-item-card-media .crd-article-img,
.crd-item-card > .crd-item-card-media .news-image-wrap,
.crd-item-card > .crd-item-card-media .news-image-wrap.center,
.crd-item-card > .crd-item-card-media .ulightbox,
.crd-item-card > .crd-item-card-media a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 220px !important;
    height: 220px !important;
    min-width: 220px !important;
    min-height: 220px !important;
    max-width: 220px !important;
    max-height: 220px !important;

    margin: 0 !important;
    padding: 0 !important;

    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    outline: 0 !important;

    overflow: hidden !important;
}

.crd-item-card > .crd-item-card-media img {
    display: block !important;

    width: 220px !important;
    height: 220px !important;
    min-width: 220px !important;
    min-height: 220px !important;
    max-width: 220px !important;
    max-height: 220px !important;

    object-fit: contain !important;

    margin: 0 auto !important;
    padding: 0 !important;

    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    outline: 0 !important;

    float: none !important;
    position: static !important;
    transform: none !important;

    filter:
        drop-shadow(0 18px 26px rgba(0, 0, 0, 0.55))
        drop-shadow(0 0 18px rgba(174, 137, 84, 0.08)) !important;
}

/* Заголовок */
.crd-item-card-title {
    margin: 0 0 18px !important;

    color: #f0ead8 !important;

    font-family: "Noto Serif", Georgia, serif !important;
    font-size: 24px !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
}

/* Характеристики */
.crd-item-stats {
    display: grid !important;
    gap: 8px !important;

    margin: 0 0 22px !important;
    padding: 0 0 20px !important;

    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}

.crd-item-stat {
    display: block !important;

    color: #d8d1c0 !important;

    font-size: 16px !important;
    line-height: 1.45 !important;
}

.crd-item-stat strong {
    color: #ffffff !important;
}

/* Эффект */
.crd-item-effect-box {
    margin: 0 0 14px !important;
}

.crd-item-effect-title {
    display: block !important;

    margin: 0 0 10px !important;

    color: #eee5cf !important;

    font-size: 18px !important;
    font-weight: 800 !important;
    line-height: 1.35 !important;
}

.crd-item-effect-text {
    margin: 0 !important;

    color: #ded8c8 !important;

    font-size: 16px !important;
    line-height: 1.65 !important;
}

/* Описания внутри левого блока */
.crd-item-card-content .crd-item-card-desc {
    max-width: none !important;

    margin: 12px 0 0 !important;

    color: #a9a08d !important;

    font-size: 14px !important;
    font-style: italic !important;
    line-height: 1.55 !important;
}

/* Ссылки внутри карточки */
.crd-item-card a {
    color: var(--crd-gold) !important;
    background: transparent !important;

    border: 0 !important;
    box-shadow: none !important;

    padding: 0 !important;

    text-decoration: none !important;
}

.crd-item-card a:hover {
    color: var(--crd-gold-hover) !important;
}

/* =========================================================
   ВАЖНО:
   Ниже НЕ трогаем обычные $IMAGE$ после карточек.
   Поэтому нет глобальных правил вида:
   .crd-item-codex .crd-article-img { ... }
========================================================= */

/* =========================================================
   МОБИЛЬНАЯ ВЕРСИЯ
========================================================= */

@media (max-width: 860px) {
    .crd-item-filters {
        grid-template-columns: 1fr !important;
    }

    .crd-item-card {
        grid-template-columns: 1fr !important;
        max-width: 100% !important;
        padding: 24px !important;
    }

    .crd-item-card-content {
        grid-column: 1 !important;
        grid-row: 1 !important;
    }

    .crd-item-card > .crd-item-card-media {
        grid-column: 1 !important;
        grid-row: 2 !important;

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

        padding: 22px 0 0 !important;

        border: 0 !important;
        border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
    }

    .crd-item-table {
        min-width: 760px !important;
    }
}

@media (max-width: 560px) {
    .crd-item-table {
        min-width: 720px !important;
    }

    .crd-item-table thead th {
        font-size: 13px !important;
    }

    .crd-item-table td {
        font-size: 14px !important;
    }

    .crd-item-table th:nth-child(1),
    .crd-item-table td:nth-child(1),
    .crd-item-table .crd-item-icon-cell {
        width: 76px !important;
        min-width: 76px !important;
        max-width: 76px !important;
    }

    .crd-item-table .crd-item-icon {
        width: 54px !important;
        height: 54px !important;
        min-width: 54px !important;
        min-height: 54px !important;
        max-width: 54px !important;
        max-height: 54px !important;
    }

    .crd-item-table .crd-item-icon .crd-article-img,
    .crd-item-table .crd-item-icon .news-image-wrap,
    .crd-item-table .crd-item-icon .news-image-wrap.center,
    .crd-item-table .crd-item-icon .ulightbox,
    .crd-item-table .crd-item-icon a,
    .crd-item-table .crd-item-icon img {
        width: 52px !important;
        height: 52px !important;
        min-width: 52px !important;
        min-height: 52px !important;
        max-width: 52px !important;
        max-height: 52px !important;
    }

    .crd-item-card-title {
        font-size: 21px !important;
    }

    .crd-item-card > .crd-item-card-media .crd-article-img,
    .crd-item-card > .crd-item-card-media .news-image-wrap,
    .crd-item-card > .crd-item-card-media .news-image-wrap.center,
    .crd-item-card > .crd-item-card-media .ulightbox,
    .crd-item-card > .crd-item-card-media a,
    .crd-item-card > .crd-item-card-media img {
        width: 170px !important;
        height: 170px !important;
        min-width: 170px !important;
        min-height: 170px !important;
        max-width: 170px !important;
        max-height: 170px !important;
    }
}