/* =========================================================================
   Витрина каталога — дизайн «CA»: тёплая «бумага», лаконично, один чернильно-
   синий акцент. Обводки карточек с ПОВЫШЕННЫМ контрастом (по просьбе владельца):
   плитки читаются как отдельные объекты, но без пестроты. Классы и разметка
   сохранены — фильтр-JS (index/index.html.twig) не меняется.
   ========================================================================= */

:root {
    --cat-bg:        #f6f3ec;   /* тёплая бумага */
    --cat-surface:   #fffefb;   /* карточка */
    --cat-surface-2: #f0ece1;   /* hover / приподнятые элементы */
    --cat-line:      #b39a63;   /* обводка — жёсткая, контрастная тёплая линия */
    --cat-line-soft: #d3c4a0;   /* мягкая линия для тонких разделителей */
    --cat-line-hi:   #33475f;   /* чернильный акцент (hover / активное) */
    --cat-text:      #211d17;
    --cat-muted:     #6c6355;
    --cat-faint:     #9a9184;
    --cat-accent:    #33475f;    /* единый акцент, без градиентов */
    --cat-accent-soft:#eef1f5;
    --cat-radius:    10px;
    /* Сквозной свет: подвижные/кликабельные плитки — выпуклые (светлая грань
       сверху + мягкая тень снизу); тонкая тёмная обводка даёт жёсткий край. */
    --tile-raise: inset 0 1px 0 #fffdf5, 0 1px 2px rgba(51, 71, 95, 0.10);
    --tile-raise-hi: inset 0 1px 0 #fffdf5, 0 12px 26px rgba(51, 71, 95, 0.18);
}

/* Фон страницы — ровная тёплая бумага. */
body {
    background: var(--cat-bg) !important;
    background-attachment: fixed !important;
    min-height: 100vh !important;
    color: var(--cat-text);
}

.catalog {
    position: relative;
    max-width: 1180px;
    margin: 0 auto;
    padding: 40px 24px 96px;
    color: var(--cat-text);
    font-family: var(--ca-font);
}

/* --------------------------- ПАНЕЛЬ ФИЛЬТРОВ --------------------------- */
/* Тонкая панель как в макете CA: без «коробки», только нижняя линия. */
.cat-toolbar {
    position: sticky;
    top: 80px;
    z-index: 40;
    background: color-mix(in srgb, var(--cat-bg) 92%, transparent);
    backdrop-filter: blur(12px);
    border: 0;
    border-bottom: 1px solid var(--cat-line-soft);
    border-radius: 0;
    padding: 12px 0 10px;
    margin-bottom: 30px;
    box-shadow: none;
    /* Мобильный скролл схлопывает высоту через JS (index.html.twig) — верх
       панели остаётся приклеен к хедеру через sticky, скрытие идёт снизу.
       overflow-anchor:none — иначе Chrome сам подкручивает scrollY, компенсируя
       наш же height-рефлоу, и анимация начинает «дёргаться». */
    overflow-anchor: none;
}

/* Поиск */
.cat-search { position: relative; margin-bottom: 12px; }
.cat-search__icon {
    position: absolute; left: 15px; top: 50%;
    transform: translateY(-50%);
    color: var(--cat-faint); font-size: 15px; pointer-events: none;
}
.cat-search__input {
    width: 100%; height: 48px; padding: 0 44px;
    font-size: 16px; color: var(--cat-text);
    background: var(--cat-surface);
    border: 1px solid var(--cat-line);
    border-radius: var(--cat-radius);
    outline: none;
    transition: border-color .2s, box-shadow .2s;
}
.cat-search__input::placeholder { color: var(--cat-faint); }
.cat-search__input:focus {
    border-color: var(--cat-accent);
    box-shadow: 0 0 0 3px rgba(51, 71, 95, 0.14);
}
.cat-search__clear {
    position: absolute; right: 10px; top: 50%;
    transform: translateY(-50%);
    width: 30px; height: 30px; display: none;
    align-items: center; justify-content: center;
    border: none; cursor: pointer;
    color: var(--cat-muted); background: var(--cat-surface-2);
    border-radius: 8px; font-size: 13px;
}
.cat-search__clear:hover { color: var(--cat-text); }
.cat-search.has-value .cat-search__clear { display: flex; }

/* Ряды чипов */
.cat-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; }
.cat-filters + .cat-filters { margin-top: 10px; }
.cat-filters__label {
    font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em;
    color: var(--cat-faint); margin-right: 4px;
}
/* Подчёркнутые текст-вкладки как в макете CA (без пилюль и коробок). */
.cat-chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 1px; font-size: 14px; font-weight: 600;
    color: var(--cat-muted);
    background: transparent;
    border: 0; box-shadow: none;
    border-bottom: 2px solid transparent;
    border-radius: 0; cursor: pointer; user-select: none;
    transition: color .16s ease, border-color .16s ease; white-space: nowrap;
}
.cat-chip:hover { color: var(--cat-text); }
.cat-chip__count { font-size: 12px; color: var(--cat-faint); font-weight: 700; }
.cat-chip.is-active {
    color: var(--cat-text);
    background: transparent;
    border-bottom-color: var(--cat-accent);
}
.cat-chip.is-active .cat-chip__count { color: var(--cat-accent); }

/* Тумблер «показывать в разработке» */
.cat-toggle {
    display: inline-flex; align-items: center; gap: 9px;
    margin-left: auto; font-size: 14px; color: var(--cat-muted);
    cursor: pointer; user-select: none;
}
.cat-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.cat-toggle__track {
    width: 40px; height: 23px; border-radius: 999px;
    background: var(--cat-surface-2);
    border: 1px solid var(--cat-line);
    position: relative; transition: background .2s, border-color .2s; flex: none;
}
.cat-toggle__track::after {
    content: ''; position: absolute; top: 2px; left: 2px;
    width: 17px; height: 17px; border-radius: 50%;
    background: #b9ac8e; transition: transform .2s, background .2s;
}
.cat-toggle input:checked + .cat-toggle__track {
    background: rgba(51, 71, 95, 0.28);
    border-color: var(--cat-accent);
}
.cat-toggle input:checked + .cat-toggle__track::after { transform: translateX(17px); background: var(--cat-accent); }

/* ------------------------------ СЕКЦИИ --------------------------------- */
.cat-section { margin-bottom: 40px; }
.cat-section.is-empty { display: none; }
.cat-section__head {
    display: flex; align-items: center; gap: 12px;
    margin-bottom: 16px; padding-bottom: 10px;
    border-bottom: 1px solid var(--cat-line-soft);
}
.cat-section__bar {
    width: 4px; height: 26px; border-radius: 4px;
    background: var(--cat-accent); flex: none;
}
.cat-section__title { font-size: 1.3rem; font-weight: 700; }
.cat-section__subtitle { font-size: 13px; color: var(--cat-muted); margin-top: 1px; }
.cat-section__count {
    margin-left: auto; font-size: 13px; font-weight: 600;
    color: var(--cat-muted); background: var(--cat-surface);
    border: 1px solid var(--cat-line-soft); padding: 3px 11px; border-radius: 999px;
}

/* ------------------------------- СЕТКА --------------------------------- */
.cat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 14px;
}

/* ------------------------------ КАРТОЧКА ------------------------------- */
/* Обводка с повышенным контрастом: 1.5px тёплая линия, на hover — чернила. */
.cat-card {
    position: relative;
    display: flex; flex-direction: column;
    min-height: 178px; padding: 18px;
    border: 1.5px solid var(--cat-line);
    border-radius: var(--cat-radius);
    background: var(--cat-surface);
    box-shadow: var(--tile-raise);
    text-decoration: none; color: inherit;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.cat-card:hover {
    transform: translateY(-4px);
    border-color: var(--cat-line-hi);
    box-shadow: var(--tile-raise-hi);
}
.cat-card.is-hidden { display: none; }

.cat-card__icon { font-size: 2.2rem; line-height: 1; margin-bottom: 11px; }
.cat-card__title { font-size: 1.12rem; font-weight: 700; margin-bottom: 6px; letter-spacing: -0.01em; }
.cat-card__desc { font-size: 0.87rem; line-height: 1.5; color: var(--cat-muted); flex: 1; }

/* Мета-ряд */
.cat-card__meta { margin-top: 13px; }
.cat-tag {
    display: inline-flex; align-items: center;
    font-size: 12px; font-weight: 600; padding: 4px 11px;
    border-radius: 999px;
    background: var(--cat-surface-2);
    border: 1px solid var(--cat-line-soft);
    color: var(--cat-muted);
}

/* Значок «в разработке» */
.cat-card.is-wip { border-color: #d8c48a; }
.cat-card.is-wip .cat-card__icon, .cat-card.is-wip .cat-card__title { opacity: 0.75; }
.cat-card__wip {
    position: absolute; top: 13px; right: 13px;
    font-size: 11px; font-weight: 700; color: #9a7b2e;
    background: rgba(216, 196, 138, 0.22);
    border: 1px solid #d8c48a;
    padding: 3px 9px; border-radius: 999px;
}

/* Карточка-семейство: варианты кнопками */
.cat-card__variants { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-top: 13px; }
.cat-variant {
    display: flex; align-items: center; justify-content: center;
    font-size: 13px; font-weight: 600; padding: 8px 15px;
    border-radius: 8px; text-decoration: none;
    color: var(--cat-text);
    background: var(--cat-surface-2);
    border: 1.5px solid var(--cat-line);
    box-shadow: var(--tile-raise);
    transition: all .16s ease;
}
.cat-variant:hover {
    border-color: var(--cat-accent);
    background: var(--cat-accent-soft);
    color: var(--cat-accent);
    transform: translateY(-2px);
}
.cat-variant.is-wip { color: var(--cat-faint); border-style: dashed; }

/* --------------------------- ПУСТОЙ ПОИСК ------------------------------ */
.cat-empty { display: none; text-align: center; padding: 64px 20px; color: var(--cat-muted); }
.cat-empty.is-visible { display: block; }
.cat-empty__icon { font-size: 2.6rem; margin-bottom: 12px; }
.cat-empty__title { font-size: 1.25rem; font-weight: 700; color: var(--cat-text); margin-bottom: 6px; }
.cat-empty__hint { max-width: 420px; margin: 0 auto; line-height: 1.6; }
/* CTA-кнопка пустого состояния (страница «Избранные») */
.cat-empty__cta {
    display: inline-flex; align-items: center; justify-content: center;
    margin-top: 22px; padding: 13px 26px; border-radius: 12px;
    background: var(--cat-accent); color: #fff;
    border: 1px solid var(--cat-line-hi);
    font-size: 15px; font-weight: 700; text-decoration: none;
    transition: transform .1s ease, opacity .12s ease;
}
.cat-empty__cta:hover { transform: translateY(-1px); opacity: .92; }

/* ------------------------------ АДАПТИВ -------------------------------- */
@media (max-width: 640px) {
    .catalog { padding: 26px 16px 72px; }
    /* overflow:hidden — схлопывание высоты по скроллу (см. index.html.twig) обрезает
       содержимое ровно по границе, не даёт ему переполниться поверх сетки карточек.
       На мобильном убираем backdrop-filter:blur и делаем фон непрозрачным: полу-
       прозрачное размытие поверх прокручивающихся карточек мерцает (перерисовка блюра
       на каждый кадр скролла + схлопывание height) — отсюда «моргает строка поиска». */
    .cat-toolbar {
        top: 72px; overflow: hidden;
        background: var(--cat-bg);
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        /* Схлопывание по скроллу теперь дискретное (класс .is-collapsed из
           index.html.twig) — height/max-height анимирует сам браузер одним
           переходом, а не JS покадрово. Это убирает «дёрганье». box-sizing
           border-box + overflow:hidden гарантируют клип по границе панели,
           панель остаётся в потоке (sticky) — дыры над сеткой карточек нет. */
        transition: max-height .28s ease;
    }
    .cat-toolbar.is-collapsed { max-height: 0 !important; }
    /* Мобильная витрина — 2 компактные колонки (иначе 36 карточек = «простыня»
       ~17000px в один столбец). Карточка ужимается: меньше паддинги, короче
       описание (клип по 3 строкам). Десктопная сетка (auto-fill 240px) не тронута. */
    .cat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .cat-card { min-height: 0; padding: 13px; }
    .cat-card__icon { font-size: 1.9rem; margin-bottom: 8px; }
    .cat-card__title { font-size: 1rem; margin-bottom: 5px; }
    .cat-card__desc {
        font-size: 0.8rem; line-height: 1.45;
        display: -webkit-box; -webkit-box-orient: vertical;
        -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden;
    }
    .cat-card__meta { margin-top: 10px; }
    .cat-card__variants { grid-template-columns: 1fr; }
    .cat-toggle { margin-left: 0; width: 100%; margin-top: 6px; }
}

/* Очень узкие экраны (<360px): 2 колонки становятся тесными — один столбец. */
@media (max-width: 359px) {
    .cat-grid { grid-template-columns: 1fr; }
}

/* --------------------- Звёздочка «в избранное» ------------------------- */
.cat-star {
    position: absolute; top: 10px; right: 12px; z-index: 3;
    width: 30px; height: 30px; padding: 0; border: none;
    background: rgba(255, 254, 251, 0.85);
    border-radius: 999px; color: var(--cat-faint);
    font-size: 17px; line-height: 30px; text-align: center; cursor: pointer;
    opacity: 0; transition: opacity .15s ease, color .15s ease, transform .1s ease;
}
.cat-card:hover .cat-star,
.cat-star.is-fav,
.cat-star:focus-visible { opacity: 1; }
.cat-star:hover { transform: scale(1.12); color: #d9a441; }
.cat-star.is-fav { color: #e0a52c; opacity: 1; }
/* На тач-устройствах нет hover — звёздочку не видно и «в избранное» не нажать.
   Показываем её всегда, где hover недоступен (телефоны/планшеты). */
@media (hover: none) {
    .cat-star { opacity: 1; }
}

/* ===================== МОБИЛЬНЫЙ ФИЛЬТР (≤640) ======================== */
@media (max-width: 640px) {
    /* строка: поиск + кнопка «Фильтры» (собирается в JS) */
    .gp-frow { display: flex; gap: 8px; align-items: center; }
    .gp-frow .cat-search { flex: 1; margin-bottom: 0; }
    .gp-fbtn {
        flex: 0 0 auto; height: 48px; padding: 0 14px;
        display: inline-flex; align-items: center; gap: 7px;
        border: 1px solid var(--cat-line); background: var(--cat-surface);
        box-shadow: var(--tile-raise); border-radius: var(--cat-radius);
        color: var(--cat-text); font-size: 14px; font-weight: 600; cursor: pointer;
        white-space: nowrap;
    }
    /* категории — один ряд с горизонтальным скроллом */
    .cat-filters[data-filter-group="category"] {
        flex-wrap: nowrap; overflow-x: auto; margin-top: 12px; gap: 16px;
        scrollbar-width: none;
        -webkit-mask: linear-gradient(90deg, #000 90%, transparent);
        mask: linear-gradient(90deg, #000 90%, transparent);
    }
    .cat-filters[data-filter-group="category"]::-webkit-scrollbar { display: none; }
    .cat-filters[data-filter-group="category"] .cat-chip { flex: 0 0 auto; }
    .cat-filters__label { display: none; }
}

/* Шторка фильтров (bottom-sheet) — второстепенные фильтры */
.gp-fsheet-overlay {
    position: fixed; inset: 0; background: rgba(20, 17, 12, 0.4);
    z-index: 1200; opacity: 0; visibility: hidden; transition: opacity .2s;
}
.gp-fsheet-overlay.open { opacity: 1; visibility: visible; }
.gp-fsheet {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 1201;
    background: var(--cat-bg); border-radius: 18px 18px 0 0;
    padding: 14px 18px calc(20px + env(safe-area-inset-bottom));
    box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.28);
    transform: translateY(100%); transition: transform .24s ease;
}
.gp-fsheet.open { transform: translateY(0); }
.gp-fsheet__grab { width: 40px; height: 4px; border-radius: 99px; background: var(--cat-line-soft); margin: 0 auto 12px; }
.gp-fsheet__title { font-size: 16px; font-weight: 700; margin-bottom: 14px; }
.gp-fsheet .cat-filters { gap: 8px; }
.gp-fsheet .cat-filters__label {
    display: block; width: 100%;
    font-size: 11px; text-transform: uppercase; letter-spacing: .06em;
    color: var(--cat-faint); margin-bottom: 2px;
}
/* В шторке чипы игроков — пилюли, а не вкладки */
.gp-fsheet .cat-chip {
    padding: 8px 14px; border: 1px solid var(--cat-line-soft);
    border-radius: 99px; border-bottom-width: 1px;
}
.gp-fsheet .cat-chip.is-active {
    background: var(--cat-accent); border-color: var(--cat-accent); color: #fff;
}
.gp-fsheet .cat-toggle { margin-left: 0; width: 100%; margin-top: 12px; justify-content: space-between; }
.gp-fsheet__apply {
    width: 100%; height: 48px; margin-top: 18px; border: 0;
    border-radius: var(--cat-radius); background: var(--cat-accent);
    color: #fff; font-size: 15px; font-weight: 700; cursor: pointer;
}

/* =========================================================================
   ТЕМА «НОЧЬ» для каталога — переопределяем только значения токенов --cat-*.
   Согласовано с --ca-* из ca-theme.css (тот же тёмный графит + осветлённый
   чернильно-синий акцент). Карточки/фильтры каталога перекрашиваются сами.
   ========================================================================= */
:root[data-theme="night"] {
    --cat-bg:        #14161b;
    --cat-surface:   #1c2029;
    --cat-surface-2: #262b36;
    --cat-line:      #454b58;
    --cat-line-soft: #2c313b;
    --cat-line-hi:   #6f8fc4;
    --cat-text:      #e9e7e1;
    --cat-muted:     #a9a89f;
    --cat-faint:     #74767d;
    --cat-accent:    #4f6ea3;
    --cat-accent-soft:#232c3a;
    --tile-raise:    inset 0 1px 0 rgba(255,255,255,0.06), 0 1px 2px rgba(0,0,0,0.55);
    --tile-raise-hi: inset 0 1px 0 rgba(255,255,255,0.08), 0 12px 26px rgba(0,0,0,0.60);
}