/* =============================================
   CRDGAME — Топ материалов сайта
   Файл: /file/top-materials/top-materials.css
   Стиль: облегчённый, ближе к Pearl Abyss
============================================= */

.crd-top-page {
    width: calc(100% - 32px) !important;
    max-width: 1320px !important;
    margin: 0 auto 70px !important;
    padding: 0 0 40px !important;
    box-sizing: border-box !important;
}

/* =============================================
   ШАПКА СТРАНИЦЫ
============================================= */

.crd-top-head {
    position: relative !important;
    margin: 0 0 42px !important;
    padding: 0 0 24px !important;

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

    border-bottom: 1px solid rgba(174,137,84,0.18) !important;
}

.crd-top-head::before,
.crd-top-head::after {
    display: none !important;
    content: none !important;
}

.crd-top-head__label {
    display: none !important;
}

.crd-top-head h1 {
    margin: 0 0 12px !important;

    color: #d7b06f !important;

    font-family: "Russo One", "Open Sans", sans-serif !important;
    font-size: 30px !important;
    line-height: 1.15 !important;
    font-weight: 400 !important;

    letter-spacing: 4px !important;
    text-transform: uppercase !important;

    text-shadow:
        0 1px 0 rgba(0,0,0,0.95),
        0 0 14px rgba(174,137,84,0.16) !important;
}

.crd-top-head p {
    max-width: 820px !important;
    margin: 0 !important;

    color: #9d9287 !important;

    font-family: "Open Sans", sans-serif !important;
    font-size: 14px !important;
    line-height: 1.7 !important;
}

/* =============================================
   СЕТКА
============================================= */

.crd-top-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 56px 34px !important;
}

/* =============================================
   КАРТОЧКА
============================================= */

.crd-top-card {
    position: relative !important;

    display: flex !important;
    flex-direction: column !important;

    min-height: 100% !important;

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

    overflow: visible !important;

    text-decoration: none !important;

    transform: none !important;
    transition: none !important;
}

.crd-top-card:hover {
    transform: none !important;
    background: transparent !important;
    border: 0 !important;
    border-left: 0 !important;
    box-shadow: none !important;
}

.crd-top-card::before,
.crd-top-card::after {
    display: none !important;
    content: none !important;
}

/* =============================================
   ОБЛОЖКА
============================================= */

.crd-top-card__image {
    position: relative !important;

    display: block !important;

    width: 100% !important;
    aspect-ratio: 923 / 522 !important;

    overflow: hidden !important;

    background: #0a0a0c !important;

    border: 1px solid rgba(255,255,255,0.10) !important;
    box-shadow: none !important;

    text-decoration: none !important;
    line-height: 0 !important;
}

/* Убираем декоративные рамки у картинки */
.crd-top-card__image::after {
    display: none !important;
    content: none !important;
}

/* Возможные uCoz-обёртки внутри изображения */
.crd-top-card__image .news-image-wrap,
.crd-top-card__image .news-image-wrap.center,
.crd-top-card__image .news-image-wrap a,
.crd-top-card__image a,
.crd-top-card__image span {
    position: absolute !important;
    inset: 0 !important;

    display: block !important;

    width: 100% !important;
    height: 100% !important;

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

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

    line-height: 0 !important;
    font-size: 0 !important;

    overflow: hidden !important;
}

/* Сама картинка */
.crd-top-card__image img,
.crd-top-card__image .news-image-wrap img,
.crd-top-card__image a img,
.crd-top-card__image span img {
    position: absolute !important;
    inset: 0 !important;

    display: block !important;

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

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

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

    object-fit: cover !important;
    object-position: center center !important;

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

    filter: brightness(0.86) contrast(1.05) !important;

    transition:
        transform 0.45s ease,
        filter 0.35s ease !important;
}

.crd-top-card:hover .crd-top-card__image img {
    transform: scale(1.025) !important;
    filter: brightness(0.98) contrast(1.08) !important;
}

/* Если нет обложки */
.crd-top-card.is-no-cover .crd-top-card__image::before {
    content: "CRDGAME" !important;

    position: absolute !important;
    inset: 0 !important;
    z-index: 2 !important;

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

    color: rgba(174,137,84,0.55) !important;

    font-family: "Russo One", "Open Sans", sans-serif !important;
    font-size: 18px !important;
    letter-spacing: 3px !important;
}

/* =============================================
   ТЕКСТ ПОД КАРТИНКОЙ
============================================= */

.crd-top-card__body {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;

    padding: 14px 0 0 !important;

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

/* Категория + дата */
.crd-top-card__top {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;

    gap: 9px !important;

    min-height: 16px !important;
    margin: 0 0 8px !important;
}

.crd-top-card__cat {
    color: #b99155 !important;

    font-family: "Open Sans", sans-serif !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    line-height: 1 !important;

    letter-spacing: 1.4px !important;
    text-transform: uppercase !important;
    text-decoration: none !important;

    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.crd-top-card__cat:hover {
    color: #d7b06f !important;
}

.crd-top-card__date {
    color: #756b61 !important;

    font-family: "Open Sans", sans-serif !important;
    font-size: 12px !important;
    line-height: 1 !important;

    white-space: nowrap !important;
}

.crd-top-card__date::before {
    content: "·" !important;
    margin-right: 9px !important;
    color: rgba(174,137,84,0.44) !important;
}

/* Заголовок */
.crd-top-card__title {
    display: -webkit-box !important;

    min-height: 0 !important;

    margin: 0 0 10px !important;

    color: #d8d4ce !important;

    font-family: "Noto Serif", Georgia, "Times New Roman", serif !important;
    font-size: 21px !important;
    font-weight: 400 !important;
    line-height: 1.28 !important;
    letter-spacing: 0 !important;

    text-decoration: none !important;

    overflow: hidden !important;

    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;

    transition: color 0.22s ease !important;
}

.crd-top-card__title:hover {
    color: #d7b06f !important;
}

/* Просмотры / комментарии */
.crd-top-card__meta {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;

    gap: 12px !important;

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

    border-top: 0 !important;

    color: #7c7268 !important;

    font-family: "Open Sans", sans-serif !important;
    font-size: 12px !important;
    line-height: 1.4 !important;
}

.crd-top-card__meta b {
    color: #b99155 !important;
    font-weight: 800 !important;
}

.crd-top-card__meta a {
    color: #7c7268 !important;
    text-decoration: none !important;
}

.crd-top-card__meta a:hover {
    color: #b99155 !important;
}

/* =============================================
   ПАГИНАЦИЯ — Pearl Abyss exact style
============================================= */

.crd-top-pagination,
.crd-top-pagination.paging {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 0 !important;
    flex-wrap: wrap !important;

    margin: 58px 0 0 !important;
    padding: 0 !important;

    border: 0 !important;
    background: transparent !important;
}

.crd-top-pagination:empty {
    display: none !important;
}

/* Цифры */
.crd-top-page-btn,
.crd-top-page-btn.btn-page {
    position: relative !important;

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

    min-width: 34px !important;
    width: 34px !important;
    height: 30px !important;

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

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

    color: #c8c0b6 !important;

    font-family: Georgia, "Times New Roman", serif !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    line-height: 1 !important;

    text-align: center !important;
    text-decoration: none !important;

    cursor: pointer !important;

    transform: none !important;

    transition:
        color 0.2s ease,
        opacity 0.2s ease !important;
}

.crd-top-page-btn:hover {
    color: #d7b06f !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    transform: none !important;
}

/* Активная страница */
.crd-top-page-btn.active,
.crd-top-page-btn.is-active {
    color: #d7b06f !important;
    cursor: default !important;
    pointer-events: none !important;
}

.crd-top-page-btn.active::after,
.crd-top-page-btn.is-active::after {
    content: "" !important;

    position: absolute !important;
    left: 50% !important;
    bottom: 3px !important;

    width: 9px !important;
    height: 1px !important;

    transform: translateX(-50%) !important;

    background: #d7b06f !important;
}

/* Троеточие */
.crd-top-page-btn.disabled,
.crd-top-page-btn.is-disabled {
    color: #4b4641 !important;
    cursor: default !important;
    pointer-events: none !important;
    opacity: 1 !important;
}

/* Скрытый текст */
.crd-top-pagination .blind {
    position: absolute !important;

    width: 1px !important;
    height: 1px !important;

    margin: -1px !important;
    padding: 0 !important;

    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;

    white-space: nowrap !important;
    border: 0 !important;
}

/* Кнопка-стрелка */
.crd-top-page-btn.btn_arrow {
    min-width: 30px !important;
    width: 30px !important;
    height: 30px !important;

    margin-left: 10px !important;

    border: 1px solid rgba(174,137,84,0.45) !important;
    background: transparent !important;
    box-sizing: border-box !important;
}

.crd-top-page-btn.btn_arrow:hover {
    border-color: rgba(215,176,111,0.85) !important;
    background: rgba(174,137,84,0.06) !important;
}

/* Правая стрелка */
.crd-top-page-btn.btn_arrow::before {
    content: "" !important;

    display: block !important;

    width: 7px !important;
    height: 7px !important;

    margin-left: -2px !important;

    border-top: 1px solid #d7b06f !important;
    border-right: 1px solid #d7b06f !important;

    transform: rotate(45deg) !important;

    transition: border-color 0.2s ease !important;
}

.crd-top-page-btn.btn_arrow:hover::before {
    border-color: #f0dec0 !important;
}

/* Левая стрелка, если появится на других страницах */
.crd-top-page-btn.btn_arrow.prev {
    margin-left: 0 !important;
    margin-right: 10px !important;
}

.crd-top-page-btn.btn_arrow.prev::before {
    margin-left: 2px !important;
    transform: rotate(-135deg) !important;
}

/* Убираем подчёркивание у стрелок */
.crd-top-page-btn.btn_arrow::after {
    display: none !important;
    content: none !important;
}

@media (max-width: 560px) {
    .crd-top-pagination,
    .crd-top-pagination.paging {
        margin-top: 42px !important;
    }

    .crd-top-page-btn,
    .crd-top-page-btn.btn-page {
        min-width: 30px !important;
        width: 30px !important;
        height: 30px !important;
        font-size: 14px !important;
    }

    .crd-top-page-btn.btn_arrow {
        min-width: 28px !important;
        width: 28px !important;
        height: 28px !important;
        margin-left: 8px !important;
    }
}

/* =============================================
   АДАПТИВ
============================================= */

@media (max-width: 1200px) {
    .crd-top-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 46px 28px !important;
    }
}

@media (max-width: 720px) {
    .crd-top-page {
        width: calc(100% - 24px) !important;
    }

    .crd-top-head {
        margin-bottom: 32px !important;
        padding-bottom: 20px !important;
    }

    .crd-top-head h1 {
        font-size: 23px !important;
        letter-spacing: 2px !important;
    }

    .crd-top-head p {
        font-size: 13px !important;
    }

    .crd-top-grid {
        grid-template-columns: 1fr !important;
        gap: 36px !important;
    }

    .crd-top-card__title {
        font-size: 20px !important;
        -webkit-line-clamp: 3 !important;
    }

    .crd-top-pagination,
    .crd-top-pagination.paging {
        margin-top: 40px !important;
    }

    .crd-top-page-btn,
    .crd-top-page-btn.btn-page {
        min-width: 36px !important;
        width: 36px !important;
        height: 38px !important;
        font-size: 15px !important;
    }
}
/* =========================================================
   CRDGAME TOP MATERIALS — HOME2 CARD SKIN
   Карточки топа ближе к главной странице
   Версия: 20260704-homecards-1
========================================================= */

.crd-top-page {
 --crd-tm-gold: #b89a63;
 --crd-tm-gold-2: #d4bc84;
 --crd-tm-title: #f3eadb;
 --crd-tm-text: #d8ccba;
 --crd-tm-muted: #aa9d8b;
 --crd-tm-line: rgba(184,154,99,.34);
 --crd-tm-serif: Georgia, "Times New Roman", serif;
 --crd-tm-body: "Open Sans", "Exo 2", Arial, sans-serif;
}

.crd-top-grid {
 gap: 48px 34px !important;
}

.crd-top-card,
.crd-top-card:link,
.crd-top-card:visited {
 position: relative !important;
 display: flex !important;
 flex-direction: column !important;
 min-width: 0 !important;
 min-height: 100% !important;

 color: var(--crd-tm-text) !important;
 text-decoration: none !important;

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

 transform: none !important;
 transition: filter .25s ease !important;
}

.crd-top-card:hover {
 background: transparent !important;
 border: 0 !important;
 box-shadow: none !important;
 transform: none !important;
}

/* номер позиции */
.crd-top-card::before {
 content: attr(data-rank) !important;

 position: absolute !important;
 left: 10px !important;
 top: 10px !important;
 z-index: 10 !important;

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

 min-width: 38px !important;
 height: 26px !important;
 padding: 0 9px !important;

 color: #17110a !important;

 background: linear-gradient(180deg, #d7b06f 0%, #ae8954 100%) !important;
 border: 1px solid rgba(255,255,255,.18) !important;

 font-family: "Russo One", "Open Sans", Arial, sans-serif !important;
 font-size: 11px !important;
 font-weight: 400 !important;
 line-height: 1 !important;
 letter-spacing: .3px !important;

 box-shadow: 0 8px 18px rgba(0,0,0,.30) !important;
 pointer-events: none !important;
}

.crd-top-card::after {
 display: none !important;
 content: none !important;
}

/* обложка как на главной */
.crd-top-card__image {
 position: relative !important;
 display: block !important;

 width: 100% !important;
 aspect-ratio: 16 / 9 !important;

 overflow: hidden !important;

 background: rgba(0,0,0,.28) !important;
 border: 1px solid rgba(184,154,99,.34) !important;

 box-shadow: 0 16px 44px rgba(0,0,0,.24) !important;

 text-decoration: none !important;
 line-height: 0 !important;
 cursor: pointer !important;
}

/* мягкое затемнение поверх картинки */
.crd-top-card__image::after {
 content: "" !important;

 position: absolute !important;
 inset: 0 !important;
 z-index: 4 !important;

 display: block !important;

 pointer-events: none !important;

 background:
  linear-gradient(180deg, rgba(0,0,0,.01), rgba(0,0,0,.14)),
  radial-gradient(circle at 50% 50%, transparent, rgba(0,0,0,.08)) !important;

 opacity: .42 !important;
 transition: opacity .3s ease !important;
}

.crd-top-card:hover .crd-top-card__image::after {
 opacity: .24 !important;
}

/* uCoz-обёртки внутри картинки */
.crd-top-card__image .news-image-wrap,
.crd-top-card__image .news-image-wrap.center,
.crd-top-card__image span {
 position: absolute !important;
 inset: 0 !important;

 display: block !important;

 width: 100% !important;
 height: 100% !important;

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

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

 line-height: 0 !important;
 font-size: 0 !important;

 overflow: hidden !important;
}

/* внутренние ссылки-картинки больше не должны открывать lightbox */
.crd-top-card__image .news-image-wrap a,
.crd-top-card__image .ulightbox,
.crd-top-card__image a {
 position: absolute !important;
 inset: 0 !important;

 display: block !important;

 width: 100% !important;
 height: 100% !important;

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

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

 line-height: 0 !important;
 font-size: 0 !important;

 overflow: hidden !important;

 cursor: pointer !important;
}

/* сама картинка */
.crd-top-card__image img,
.crd-top-card__image .news-image-wrap img,
.crd-top-card__image a img,
.crd-top-card__image span img {
 position: absolute !important;
 inset: 0 !important;

 display: block !important;

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

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

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

 object-fit: cover !important;
 object-position: center center !important;

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

 vertical-align: top !important;

 filter: brightness(.96) saturate(.94) contrast(1.04) !important;
 transform: scale(1.001) !important;

 transition:
  transform .55s cubic-bezier(.19, 1, .22, 1),
  filter .35s ease !important;
}

.crd-top-card:hover .crd-top-card__image img {
 transform: scale(1.035) !important;
 filter: brightness(1.04) saturate(.98) contrast(1.05) !important;
}

/* если нет обложки */
.crd-top-card.is-no-cover .crd-top-card__image::before {
 content: "CRDGAME" !important;

 position: absolute !important;
 inset: 0 !important;
 z-index: 2 !important;

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

 color: rgba(184,154,99,.52) !important;

 font-family: "Russo One", "Open Sans", Arial, sans-serif !important;
 font-size: 18px !important;
 letter-spacing: 3px !important;
}

/* текст */
.crd-top-card__body {
 display: flex !important;
 flex-direction: column !important;
 flex: 1 !important;

 padding: 18px 0 0 !important;

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

.crd-top-card__top {
 display: flex !important;
 align-items: center !important;
 justify-content: flex-start !important;

 gap: 9px !important;

 min-height: 16px !important;
 margin: 0 0 9px !important;
}

.crd-top-card__cat {
 color: var(--crd-tm-gold) !important;

 font-family: var(--crd-tm-body) !important;
 font-size: 11px !important;
 font-weight: 800 !important;
 line-height: 1 !important;

 letter-spacing: 1.4px !important;
 text-transform: uppercase !important;
 text-decoration: none !important;

 white-space: nowrap !important;
 overflow: hidden !important;
 text-overflow: ellipsis !important;
}

.crd-top-card__cat:hover {
 color: var(--crd-tm-gold-2) !important;
}

.crd-top-card__date {
 color: #7f7468 !important;

 font-family: var(--crd-tm-body) !important;
 font-size: 12px !important;
 line-height: 1 !important;

 white-space: nowrap !important;
}

.crd-top-card__date::before {
 content: "·" !important;
 margin-right: 9px !important;
 color: rgba(184,154,99,.44) !important;
}

.crd-top-card__title {
 display: -webkit-box !important;

 margin: 0 0 10px !important;

 color: rgba(246,238,222,.96) !important;

 font-family: var(--crd-tm-serif) !important;
 font-size: 20px !important;
 font-weight: 700 !important;
 line-height: 1.28 !important;
 letter-spacing: 0 !important;

 text-decoration: none !important;
 text-shadow: 0 2px 14px rgba(0,0,0,.42) !important;

 overflow: hidden !important;

 -webkit-line-clamp: 2 !important;
 -webkit-box-orient: vertical !important;

 transition: color .25s ease !important;
}

.crd-top-card:hover .crd-top-card__title,
.crd-top-card__title:hover {
 color: #fff7e9 !important;
}

.crd-top-card__meta {
 display: flex !important;
 align-items: center !important;
 flex-wrap: wrap !important;

 gap: 12px !important;

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

 border-top: 0 !important;

 color: #8f8275 !important;

 font-family: var(--crd-tm-body) !important;
 font-size: 12px !important;
 line-height: 1.4 !important;
}

.crd-top-card__meta b {
 color: var(--crd-tm-gold) !important;
 font-weight: 800 !important;
}

.crd-top-card__meta a {
 color: #8f8275 !important;
 text-decoration: none !important;
}

.crd-top-card__meta a:hover {
 color: var(--crd-tm-gold) !important;
}

@media (max-width: 1200px) {
 .crd-top-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 42px 28px !important;
 }
}

@media (max-width: 720px) {
 .crd-top-grid {
  grid-template-columns: 1fr !important;
  gap: 36px !important;
 }

 .crd-top-card__body {
  padding-top: 14px !important;
 }

 .crd-top-card__title {
  color: #f3eadb !important;
  font-size: 21px !important;
  line-height: 1.2 !important;
  -webkit-line-clamp: 3 !important;
 }
}