/* ==========================================================================
   DropHub Cases — кейсы за депозит (верх каталога, cases.dep.js)

   Блок стоит первым в колонке каталога, над коллекциями: тот же заголовок
   между двумя линиями, та же стеклянная карточка, что у коллекций
   (cases.cat.css), но под каждым кейсом — состояние и кнопка. Лаймовая
   кнопка — только у кейса, который можно открыть прямо сейчас; закрытые —
   с замком и тусклые.

   Телефон и узкое окно (≤1100px) — лента с прокруткой пальцем внутри
   блока (scroll-snap), страница вбок не едет.
   ========================================================================== */

.cx-dep { position: relative; margin: 0 0 38px; }
.cx-dep__head { display: flex; align-items: center; gap: 22px; }
.cx-dep__head::before, .cx-dep__head::after {
  content: ''; flex: 1; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .16));
}
.cx-dep__head::after { background: linear-gradient(90deg, rgba(255, 255, 255, .16), transparent); }
.cx-dep__title {
  flex: none; margin: 0;
  font-size: clamp(20px, 1.8vw, 26px); font-weight: 800;
  letter-spacing: .06em; text-transform: uppercase; text-align: center;
  text-shadow: 0 2px 18px rgba(0, 0, 0, .6);
}
.cx-dep__title i {
  display: inline-block; vertical-align: 3px; margin-left: 10px; height: 20px; padding: 0 8px;
  border-radius: 6px; background: var(--lime); color: #12150A;
  font: 700 11px/20px var(--f-body); letter-spacing: .06em; font-style: normal;
}
.cx-dep__sub {
  margin: 8px auto 0; max-width: 64ch; text-align: center;
  font-size: 13px; line-height: 1.5; color: #C9C3E6;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .9), 0 0 14px rgba(0, 0, 0, .8);
}
.cx-dep__sub b { color: var(--text); font-weight: 600; }

.cx-dep__row {
  --cols: 5; --gap: 16px;
  list-style: none; margin: 16px 0 0; padding: 0;
  display: flex; gap: var(--gap); justify-content: center;
}
/* карточка — индиго-стекло с тонкой рамкой, как у кейсов коллекций;
   за коробкой отсвет её цвета, кнопка прижата к низу */
.cx-dep__case {
  position: relative; flex: none;
  width: calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols));
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 0 12px 14px;
  /* без плашки, как кейсы каталога: под кейсом только пятно его цвета (__glow) */
  border: 0; border-radius: 20px;
  background: none; box-shadow: none;
}

/* картинка: квадрат без рамки, под кейсом пятно его цвета */
.cx-dep__art { position: relative; width: 100%; aspect-ratio: 1 / .9; margin-top: 6px; display: grid; place-items: center; }
.cx-dep__glow {
  position: absolute; left: 50%; bottom: 7%; width: 74%; height: 24%; transform: translateX(-50%);
  border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--tint) 60%, transparent), transparent 72%);
  filter: blur(6px); opacity: .6; transition: opacity .2s;
}
.cx-dep__box {
  position: relative; z-index: 1; width: 88%; height: auto; max-height: 100%; object-fit: contain; display: block;
  filter: drop-shadow(0 16px 24px rgba(0, 0, 0, .6));
  transition: transform .22s, filter .22s;
}
.cx-dep__case.is-ready .cx-dep__glow { opacity: .95; }
.cx-dep__case.is-ready:hover .cx-dep__box { transform: translateY(-5px) scale(1.03); }
/* закрыт: тусклый, с замком в углу */
.cx-dep__case.is-locked .cx-dep__box,
.cx-dep__case.is-off .cx-dep__box { filter: drop-shadow(0 16px 24px rgba(0, 0, 0, .6)) saturate(.55) brightness(.72); }
.cx-dep__case.is-cool .cx-dep__box { filter: drop-shadow(0 16px 24px rgba(0, 0, 0, .6)) saturate(.75) brightness(.85); }
.cx-dep__case.is-locked .cx-dep__glow, .cx-dep__case.is-off .cx-dep__glow { opacity: .25; }
.cx-dep__lock {
  position: absolute; z-index: 2; right: 8%; top: 8%;
  width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center;
  background: rgba(21, 15, 43, .85); color: #BDB7DE;
  box-shadow: inset 0 0 0 1px rgba(166, 120, 255, .28);
}
.cx-dep__lock svg { width: 17px; height: 17px; display: block; }

/* кейс с именем — ссылка на его страницу (depcase.html: состав и шансы) */
.cx-dep__go { width: 100%; min-width: 0; display: flex; flex-direction: column; align-items: center; color: inherit; text-decoration: none; border-radius: 16px; }
.cx-dep__go:hover .cx-dep__box { transform: translateY(-5px) scale(1.03); }
.cx-dep__go:focus-visible { outline: 2px solid var(--lime); outline-offset: 3px; }

.cx-dep__name {
  margin-top: 6px; font-family: var(--f-cond); font-size: 16px; font-weight: 500; line-height: 1.2;
  letter-spacing: .06em; text-transform: uppercase; color: #F5F3FF;
  max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cx-dep__min, .cx-dep__need {
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  margin-top: 4px; min-height: 18px; max-width: 100%;
  font-size: 13px; font-weight: 600; color: #A69FCF; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.cx-dep__min--ok { color: var(--lime); }
.cx-dep__need { color: #C8BEEA; font-weight: 600; }
.cx-dep__min svg, .cx-dep__need svg { width: 14px; height: 14px; flex: none; display: block; }

/* кнопка состояния */
.cx-dep__btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  width: 100%; height: 40px; margin-top: 12px; padding: 0 12px;
  border: 0; border-radius: 12px;
  font-family: var(--f-cond); font-size: 14px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase;
  white-space: nowrap; cursor: pointer;
  transition: background-color .15s, box-shadow .15s, color .15s, filter .15s;
}
.cx-dep__btn svg { width: 16px; height: 16px; flex: none; }
.cx-dep__btn:focus-visible { outline: 2px solid var(--lime); outline-offset: 3px; }
.cx-dep__btn--lime { background: var(--lime); color: #12150A; font-weight: 600; box-shadow: 0 10px 22px -12px rgba(215, 255, 0, .5); }
.cx-dep__btn--lime:hover { background: #E4FF4A; }
.cx-dep__btn--lime.is-busy { cursor: progress; filter: saturate(.7); }
.cx-dep__btn--line { background: transparent; color: var(--lime); box-shadow: inset 0 0 0 1.5px rgba(215, 255, 0, .5); }
.cx-dep__btn--line:hover { background: rgba(215, 255, 0, .06); box-shadow: inset 0 0 0 1.5px var(--lime); }
/* «Войти» — индиго-стекло со светлой рамкой, как «Смотреть» у батлов */
.cx-dep__btn--ghost {
  background: linear-gradient(180deg, #3A3068 0%, #2E2658 100%); color: #F5F3FF;
  box-shadow: inset 0 0 0 1px #4C4182, inset 0 1px 0 rgba(255, 255, 255, .08);
}
.cx-dep__btn--ghost:hover { background: linear-gradient(180deg, #43387A 0%, #352C64 100%); box-shadow: inset 0 0 0 1px #5D509C, inset 0 1px 0 rgba(255, 255, 255, .08); }
.cx-dep__btn--dim { background: rgba(21, 15, 43, .6); color: #8F87B8; cursor: default; box-shadow: inset 0 0 0 1px rgba(166, 120, 255, .16); }
.cx-dep__btn--dim b { color: #F5F3FF; font-weight: 600; font-variant-numeric: tabular-nums; }
.cx-dep__btn--wait { background: rgba(21, 15, 43, .45); cursor: default; }

.cx-dep__note {
  margin: 14px auto 0; max-width: 60ch; text-align: center;
  font-size: 13px; color: #FFB4A8;
}

/* узкое окно: лента с прокруткой пальцем, карточки фиксированной ширины */
@media (max-width: 1100px) {
  .cx-dep__row {
    justify-content: flex-start; overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scrollbar-width: none;
    margin-left: calc(-1 * var(--pad-x)); margin-right: calc(-1 * var(--pad-x));
    padding: 0 var(--pad-x) 4px; scroll-padding: 0 var(--pad-x);
  }
  .cx-dep__row::-webkit-scrollbar { display: none; }
  .cx-dep__case { width: 190px; scroll-snap-align: start; }
}
/* 901–1100 с открытой панелью фильтров: лента кончалась ровно у левого
   края панели, и срезанная карточка будто уходила под неё. Теперь лента
   кончается у края колонки, а справа мягко гаснет — видно, что дальше
   есть ещё кейсы и её можно листать. Запас справа — чтобы последняя
   карточка в конце прокрутки не тонула в затухании. */
@media (min-width: 901px) and (max-width: 1100px) {
  .cx-page:not(.is-folded) .cx-dep__row {
    margin-right: 0; padding-right: 32px;
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 44px), transparent);
            mask-image: linear-gradient(90deg, #000 calc(100% - 44px), transparent);
  }
}
@media (max-width: 760px) {
  .cx-dep { margin: 4px 0 26px; }
  .cx-dep__head { gap: 14px; }
  .cx-dep__sub { font-size: 12.5px; padding: 0 4px; }
  /* телефон: без ленты — все пять кейсов сразу, три в ряд и два под ними
     по центру. Лента со срезанной третьей карточкой выглядела так,
     будто кейсы уезжают за край. */
  .cx-dep__row {
    --gap: 8px; margin: 12px 0 0; padding: 0;
    flex-wrap: wrap; justify-content: center; row-gap: 14px;
    overflow: visible; scroll-snap-type: none;
  }
  .cx-dep__case { width: calc((100% - 2 * var(--gap)) / 3); min-width: 0; padding: 0 2px 4px; border-radius: 14px; }
  .cx-dep__art { margin-top: 0; }
  .cx-dep__name { font-size: 13px; letter-spacing: .04em; }
  .cx-dep__min, .cx-dep__need { font-size: 11.5px; }
  .cx-dep__btn { height: 34px; font-size: 12px; padding: 0 6px; }
  .cx-dep__verb { display: none; }
  .cx-dep__lock { width: 28px; height: 28px; border-radius: 8px; }
  .cx-dep__lock svg { width: 14px; height: 14px; }
}
@media (max-width: 400px) {
  .cx-dep__btn { font-size: 11.5px; letter-spacing: 0; gap: 4px; padding: 0 4px; }
  .cx-dep__btn svg { width: 14px; height: 14px; }
  /* «Снова через 13:42» в карточке ~140px упиралась в края кнопки —
     часы убираем, время и так видно */
  .cx-dep__btn--dim svg { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .cx-dep__box, .cx-dep__btn { transition: none; }
  .cx-dep__case.is-ready:hover .cx-dep__box { transform: none; }
  .cx-dep__go:hover .cx-dep__box { transform: none; }
}