/* ==========================================================================
   DropHub — каталог кейсов (cases.html) в общем стиле разделов

   Отдельным файлом, а не правкой cases.css: тот подключают ещё страница
   кейса, батл и апгрейд, и любая правка в нём тянула бы за собой смену
   версии на чужих страницах. Здесь всё под body.cx-body — класс есть
   только у каталога, страница открытия кейса (тоже cs-body) не задета.
   Подключается последним, после mobile.css и cases.dep.css.

   Язык — как у батлов, бонусов и VIP:
   · фон индиго #1A1430, поверхности — «стекло» #2C2452 → #241D45,
     рамки #3A3166 / #4C4182, колодцы полей #150F2B;
   · заголовки Oswald по центру между двумя фиолетовыми линиями;
   · лайм — только «включено» и главное действие, деньги — зелёный --money;
   · свечение одно: мягкое пятно цвета кейса под коробкой (как было).

   Баннер с артом «CASES» остался как есть: он и есть шапка раздела,
   только низ теперь растворяется в индиго, а не в графите.
   ========================================================================== */

body.cx-body {
  --cx-bg: #1A1430;
  --cx-glass: linear-gradient(180deg, #2C2452 0%, #241D45 100%);
  --cx-glass-hi: linear-gradient(180deg, #342B60 0%, #2A2250 100%);
  --cx-well: #150F2B;
  --cx-line: #3A3166;
  --cx-line2: #4C4182;
  --cx-hl: inset 0 1px 0 rgba(255, 255, 255, .07);
  --cx-text: #F5F3FF;
  --cx-dim: #BDB7DE;
  --cx-mute: #A69FCF;
  --cx-faint: #8F87B8;
  --cx-lime: #D7FF00;
  /* ширина колонки фильтров на широком экране — её же вычитает баннер */
  --cx-side: 316px;
  /* нейтрали шапки и панелей с фиолетовым подтоном — как на бонусах */
  --panel:     #0D0A1A;
  --panel-2:   #130E24;
  --panel-3:   #1E1836;
  --line:      #2B2449;
  --line-soft: #1F1938;
  background-color: var(--cx-bg);
}
/* Акцент каталога — лайм сайта, а не жёлтый общих кнопок: на нём
   ползунок цены, галочки и цифра диапазона. Только внутри колонки —
   кнопки шапки остаются своими. */
.cx-body .cx-page { --accent: var(--cx-lime); color: var(--cx-text); }


/* ═══════════════ БАННЕР С АРТОМ ═══════════════
   На широком экране открытая панель фильтров стоит поверх правых
   316px окна и закрывала конец надписи «CASES» (на 1024 читалось
   «CASE»). Кадр сужается до колонки каталога: object-fit: cover из
   cases.css обрезает края фона, а надпись по центру кадра остаётся
   целой. Панель свёрнута — кадр снова во всю ширину; ширина едет
   вместе с отступом колонки (.34s, та же кривая, что в cases.css). */
@media (min-width: 901px) {
  .cx-body .cx-hero img { transition: width .34s cubic-bezier(.4, 0, .2, 1); }
  .cx-body:has(.cx-page:not(.is-folded)) .cx-hero img { width: calc(100% - var(--cx-side)); }
}
@media (min-width: 901px) and (prefers-reduced-motion: reduce) {
  .cx-body .cx-hero img { transition: none; }
}
/* Кадр приглушён (владелец 2026-10-28): яркий арт спорил с кейсами,
   которые на него наезжают. Не убран — только темнее и чуть бледнее. */
.cx-body .cx-hero img { filter: brightness(.55) saturate(.85); }


/* ═══════════════ ЗАГОЛОВКИ РАЗДЕЛОВ ═══════════════
   «Кейсы за депозит» и каждая коллекция — одинаково: Oswald, разрядка,
   линии по бокам из прозрачного в фиолетовый. */
.cx-body .cx-group__head,
.cx-body .cx-dep__head { gap: 18px; }
.cx-body .cx-group__head::before,
.cx-body .cx-dep__head::before { min-width: 24px; background: linear-gradient(90deg, transparent, rgba(166, 120, 255, .38)); }
.cx-body .cx-group__head::after,
.cx-body .cx-dep__head::after { min-width: 24px; background: linear-gradient(270deg, transparent, rgba(166, 120, 255, .38)); }
/* «Кейсы за депозит» стоит на арте баннера: на светлых местах кадра
   линия .38 пропадала (была видна только одна) — плотнее и с тенью */
.cx-body .cx-dep__head::before { background: linear-gradient(90deg, transparent, rgba(166, 120, 255, .55)); }
.cx-body .cx-dep__head::after { background: linear-gradient(270deg, transparent, rgba(166, 120, 255, .55)); }
.cx-body .cx-dep__head::before,
.cx-body .cx-dep__head::after { filter: drop-shadow(0 1px 1px rgba(6, 2, 20, .85)); }
.cx-body .cx-group__title,
.cx-body .cx-dep__title {
  font-family: var(--f-cond); font-size: clamp(22px, 2vw, 30px); font-weight: 600;
  line-height: 1.1; letter-spacing: .06em; color: var(--cx-text);
}
.cx-body .cx-dep__sub { margin-top: 10px; font-size: 13.5px; color: var(--cx-dim); }

.cx-body .cx-groups { gap: 48px; }


/* ═══════════════ КАРТОЧКА КЕЙСА ═══════════════
   Стеклянная плашка с тонкой рамкой; за коробкой — едва заметный
   отсвет её цвета, под ней — прежнее пятно. Имя Oswald, цена —
   пилюля в колодце. Наведение: карточка приподнимается, рамка
   светлеет, коробка чуть растёт. */
.cx-body .cx-grid { --gap: 16px; margin-top: 20px; gap: 16px var(--gap); }
.cx-body .cx-case {
  /* без плашки: кейс стоит прямо на фоне страницы, под ним только пятно его цвета (__glow) */
  padding: 0 0 16px;
  border: 0; border-radius: 20px;
  background: none; box-shadow: none;
  transition: transform .18s;
}
/* светлее при наведении — отдельным слоем: градиент сам не анимируется */
.cx-body .cx-case::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  display: none;
}
.cx-body .cx-case:hover { transform: translateY(-4px); }
.cx-body .cx-case:focus-visible { outline: 2px solid var(--cx-lime); outline-offset: 3px; }

.cx-body .cx-case__art { aspect-ratio: 1 / .9; margin-top: 6px; }
.cx-body .cx-case__box { width: 88%; }
.cx-body .cx-case__glow { opacity: .5; }
.cx-body .cx-case:hover .cx-case__glow { opacity: .85; }

.cx-body .cx-case__name {
  position: relative; margin-top: 6px; padding: 0 12px;
  font-family: var(--f-cond); font-size: 16px; font-weight: 500; letter-spacing: .06em; line-height: 1.2;
  color: var(--cx-text);
}
.cx-body .cx-case__price {
  position: relative; gap: 6px;
  margin-top: 8px; height: 30px; padding: 0 12px; border-radius: 15px;
  background: rgba(13, 9, 28, .55); box-shadow: inset 0 0 0 1px rgba(166, 120, 255, .16);
  font-family: var(--f-cond); font-size: 15px; font-weight: 600; letter-spacing: .02em; color: var(--money);
}
.cx-body .cx-case__price i { width: 15px; height: 15px; }

/* плашка в углу: ровная заливка без градиента, Oswald с разрядкой */
.cx-body .cx-case__badge {
  left: 10px; top: 10px; gap: 4px; height: 22px; padding: 0 8px; border-radius: 6px;
  font-family: var(--f-cond); font-size: 12px; font-weight: 500; letter-spacing: .1em;
}
.cx-body .cx-case__badge svg { width: 11px; height: 11px; }
.cx-body .cx-case__badge--top { background: var(--cx-lime); color: #12150A; }
.cx-body .cx-case__badge--new { background: #34D399; color: #04210F; }
.cx-body .cx-case__badge--hot { background: #FF8A3D; color: #2A0F00; }

/* ничего не нашлось */
.cx-body .cx-empty {
  padding: 56px 20px; border-radius: 20px;
  border: 1px dashed var(--cx-line2); background: rgba(34, 27, 62, .45);
  color: var(--cx-dim); font-size: 14px;
}
.cx-body .cx-empty__reset {
  margin-top: 16px; height: 42px; padding: 0 20px; border: 0; border-radius: 12px;
  background: transparent; color: var(--cx-lime); box-shadow: inset 0 0 0 1.5px rgba(215, 255, 0, .5);
  font-family: var(--f-cond); font-size: 14px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  transition: background-color .15s, box-shadow .15s;
}
.cx-body .cx-empty__reset:hover { background: rgba(215, 255, 0, .06); box-shadow: inset 0 0 0 1.5px var(--cx-lime); }


/* ═══════════════ ПАНЕЛЬ ФИЛЬТРОВ ═══════════════
   Общее для колонки и шторки: шапка с иконкой, подписи, поиск,
   ползунок, галочки, «Сбросить». */
.cx-body .cx-filter__head { border-bottom-color: rgba(166, 120, 255, .14); }
.cx-body .cx-filter__head b { display: inline-flex; align-items: center; gap: 10px; color: var(--cx-text); }
.cx-body .cx-filter__head b::before {
  content: ''; width: 18px; height: 18px; flex: none; background: var(--cx-mute);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 7h10M18 7h2M4 17h4M12 17h8'/%3E%3Ccircle cx='16' cy='7' r='2.5'/%3E%3Ccircle cx='10' cy='17' r='2.5'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 7h10M18 7h2M4 17h4M12 17h8'/%3E%3Ccircle cx='16' cy='7' r='2.5'/%3E%3Ccircle cx='10' cy='17' r='2.5'/%3E%3C/svg%3E") center / contain no-repeat;
}
.cx-body .cx-filter__hide {
  width: 34px; height: 34px; border-radius: 10px;
  border-color: var(--cx-line); background: var(--cx-glass); box-shadow: var(--cx-hl); color: var(--cx-mute);
}
.cx-body .cx-filter__hide:hover { border-color: var(--cx-line2); background: var(--cx-glass-hi); color: var(--cx-text); }

.cx-body .cx-filter__lbl {
  font-family: var(--f-cond); font-size: 12px; font-weight: 500; letter-spacing: .14em; color: var(--cx-mute);
}
.cx-body .cx-filter__range-val { font-family: var(--f-cond); font-size: 14px; font-weight: 600; letter-spacing: .02em; color: var(--cx-lime); }

.cx-body .cx-filter__search i { color: var(--cx-faint); }
.cx-body .cx-filter__search input {
  height: 44px; border-radius: 12px;
  border-color: var(--cx-line); background: var(--cx-well); box-shadow: inset 0 2px 8px rgba(6, 2, 20, .35);
  color: var(--cx-text);
}
.cx-body .cx-filter__search input::placeholder { color: var(--cx-faint); }
.cx-body .cx-filter__search input:focus { border-color: var(--cx-line2); }

/* ползунок: трек индиго, заливка и ручки лаймом с тёмным ободком */
.cx-body .cx-range__track { background: #2C2452; }
.cx-body .cx-range input[type="range"]::-webkit-slider-thumb {
  background: var(--cx-lime); border: 3px solid #1F1840;
  box-shadow: 0 0 0 1px rgba(215, 255, 0, .7), 0 2px 8px rgba(0, 0, 0, .5);
}
.cx-body .cx-range input[type="range"]::-moz-range-thumb { background: var(--cx-lime); border: 3px solid #1F1840; }
.cx-body .cx-range input[type="range"]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px rgba(215, 255, 0, .3); }
.cx-body .cx-range__ends { color: var(--cx-faint); }

/* коллекции: строка с галочкой, включённая — подсвечена индиго */
.cx-body .cx-check { border-radius: 10px; font-weight: 500; color: var(--cx-dim); }
.cx-body .cx-check:hover { background: rgba(166, 120, 255, .1); color: var(--cx-text); }
.cx-body .cx-check:has(input:checked) { background: rgba(166, 120, 255, .08); }
.cx-body .cx-check__box { border-radius: 6px; border-color: var(--cx-line2); background: var(--cx-well); color: #12150A; }
.cx-body .cx-check input:checked ~ .cx-check__box { background: var(--cx-lime); border-color: var(--cx-lime); }
.cx-body .cx-check input:focus-visible ~ .cx-check__box { outline: 2px solid var(--cx-lime); outline-offset: 2px; }
.cx-body .cx-check__ico { color: var(--cx-mute); opacity: 1; }
.cx-body .cx-check__n {
  min-width: 22px; height: 20px; padding: 0 6px; border-radius: 10px;
  display: grid; place-items: center;
  background: rgba(166, 120, 255, .12); color: var(--cx-mute);
  font-family: var(--f-cond); font-size: 12px; font-weight: 500;
}
.cx-body .cx-check__n:empty { display: none; }

.cx-body .cx-filter__reset {
  height: 42px; border-radius: 12px;
  border-color: var(--cx-line); background: var(--cx-glass); box-shadow: var(--cx-hl); color: var(--cx-dim);
  font-family: var(--f-cond); font-size: 14px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase;
}
.cx-body .cx-filter__reset:hover { border-color: var(--cx-line2); background: var(--cx-glass-hi); color: var(--cx-text); }


/* ═══════════════ ПАНЕЛЬ: ШИРОКИЙ ЭКРАН ═══════════════
   Была тёмной полосой от шапки до низа окна. Теперь — плавающая
   плашка, как «Фильтры битв»: отступ от шапки и края, скругление,
   высота по содержимому. Подвал по-прежнему поднимает её
   (--cx-foot из cases.list.js), но теперь сдвигом целиком, а не
   урезанием высоты: раньше в конце страницы плашка сжималась до
   «Названия» и «Цены» и выглядела обрезанной карточкой. Сдвиг —
   свойством translate, а не transform: transform занят сворачиванием
   и у него transition, а сдвиг должен идти ровно за прокруткой.
   Свёрнутая — язычок у края; колонка карточек оставляет ему место. */
@media (min-width: 761px) {
  .cx-body .cx-page { --side: var(--cx-side); }
  /* свёрнутая панель: язычок (≈37px у края окна) наезжал на рамку
     карточек последней колонки — колонка оставляет ему место */
  .cx-body .cx-page.is-folded { padding-right: calc(var(--pad-x) + 32px); }
  .cx-body .cx-filter {
    top: 84px; right: 16px; bottom: auto;
    width: calc(var(--side) - 16px);
    max-height: calc(100vh - 100px);
    translate: 0 calc(-1 * var(--cx-foot, 0px));
    padding: 16px 18px 18px; gap: 18px;
    border: 1px solid var(--cx-line); border-radius: 20px;
    background: linear-gradient(180deg, #261E4A 0%, #1F1840 100%);
    -webkit-backdrop-filter: none; backdrop-filter: none;
    box-shadow: 0 24px 60px rgba(8, 4, 24, .55), var(--cx-hl);
  }
  .cx-body .cx-page.is-folded .cx-filter { transform: translateX(calc(100% + 64px)); }
  .cx-body .cx-filter__head b { font-family: var(--f-cond); font-size: 16px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; }
  .cx-body .cx-filter__foot { margin-top: 0; }

  .cx-body .cx-filter-open {
    border-color: var(--cx-line); border-radius: 14px 0 0 14px;
    background: var(--cx-glass); box-shadow: -10px 0 30px rgba(8, 4, 24, .45), var(--cx-hl);
    -webkit-backdrop-filter: none; backdrop-filter: none;
    font-family: var(--f-cond); font-size: 13px; font-weight: 500; letter-spacing: .12em; color: var(--cx-text);
  }
  .cx-body .cx-filter-open:hover { background: var(--cx-glass-hi); }
  .cx-body .cx-filter-open i { color: var(--cx-lime); }
}
/* 761–900: панель ложится поверх списка, место у страницы не отнимает */
@media (min-width: 761px) and (max-width: 900px) {
  .cx-body .cx-filter { width: min(300px, 86vw); }
}


/* ═══════════════ ТЕЛЕФОН ═══════════════
   Строка поиска с «Фильтрами» и шторка — те же, что были (cases.css),
   здесь только цвета и шрифты; карточки по две в ряд, поплотнее. */
@media (max-width: 760px) {
  .cx-body .cx-groups { gap: 34px; }
  .cx-body .cx-group__head, .cx-body .cx-dep__head { gap: 12px; }
  .cx-body .cx-group__title, .cx-body .cx-dep__title { font-size: 22px; }

  .cx-body .cx-grid { --gap: 10px; margin-top: 14px; row-gap: 10px; }
  .cx-body .cx-case { padding-bottom: 12px; border-radius: 16px; }
  .cx-body .cx-case:hover { transform: none; }
  .cx-body .cx-case__art { margin-top: 4px; }
  .cx-body .cx-case__name { padding: 0 8px; font-size: 14px; letter-spacing: .05em; }
  .cx-body .cx-case__price { height: 28px; padding: 0 10px; font-size: 14px; }
  .cx-body .cx-case__badge { left: 8px; top: 8px; height: 20px; padding: 0 7px; font-size: 11px; }

  .cx-body .cx-mbar.is-stuck { background: rgba(26, 20, 48, .97); box-shadow: 0 1px 0 var(--cx-line), 0 12px 24px -14px rgba(6, 2, 20, .9); }
  .cx-body .cx-mbar__search i { color: var(--cx-faint); }
  .cx-body .cx-mbar__search input { border-color: var(--cx-line); background: var(--cx-well); color: var(--cx-text); }
  .cx-body .cx-mbar__search input::placeholder { color: var(--cx-faint); }
  .cx-body .cx-mbar__search input:focus { border-color: var(--cx-line2); }
  .cx-body .cx-mbar__btn {
    border-color: var(--cx-line); background: var(--cx-glass); box-shadow: var(--cx-hl); color: var(--cx-text);
    font-family: var(--f-cond); font-size: 15px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase;
  }
  .cx-body .cx-mbar__btn i { color: var(--cx-lime); }
  .cx-body .cx-mbar__btn.is-active { border-color: rgba(215, 255, 0, .6); }
  .cx-body .cx-mbar__n { background: var(--cx-lime); color: #12150A; font-family: var(--f-body); }

  /* шторка: та же индиго-плашка, что и колонка на широком экране */
  body.cx-body .cx-page .cx-cols > .cx-filter { border-top-color: var(--cx-line2); background: #1F1840; }
  .cx-body .cx-page .cx-filter__head,
  .cx-body .cx-page .cx-filter__foot { background: #1F1840; }
  .cx-body .cx-page .cx-filter__foot { border-top-color: rgba(166, 120, 255, .14); }
  .cx-body .cx-page .cx-filter__close { border-color: var(--cx-line); background: var(--cx-glass); box-shadow: var(--cx-hl); }
  .cx-body .cx-page .cx-filter__foot .cx-filter__reset { color: var(--cx-text); }
  .cx-body .cx-page .cx-filter__apply {
    background: var(--cx-lime); color: #12150A;
    font-family: var(--f-cond); font-size: 15px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  }
  .cx-body .cx-page .cx-filter__apply:disabled { background: #2C2452; color: var(--cx-faint); }
}

@media (prefers-reduced-motion: reduce) {
  .cx-body .cx-case, .cx-body .cx-case::before { transition: none; }
  .cx-body .cx-case:hover { transform: none; }
}