/* ==========================================================================
   DropHub — единый вид карточки скина (как в контрактах)

   Заливка цветом редкости сверху, уходящая в тёмный низ; светящаяся кромка
   по верху; фирменный узор — мелкие молнии из логотипа в шахматном
   порядке, в светлом оттенке той же редкости, тают к подписи.

   Файл подключается ПОСЛЕДНИМ на каждой странице: у карточек разных
   разделов свои правила в своих css (cases, profile, market, home …), и
   этот слой одинаково перекрывает их фон, не трогая разметку и размеры.
   Состояния (выбрана, выпала, наведение) остаются за своими правилами —
   они точнее по селектору.

   Цвет редкости приходит из разметки то в --r, то в --rar: имена
   исторически разные, поэтому одна переменная --sc с запасной цепочкой.

   Узор лежит в ::after под содержимым (isolation + z-index: -1). У части
   карточек этот псевдоэлемент раньше рисовал водяной знак «D», цветную
   метку сбоку или полоску снизу — здесь он переназначен под узор целиком.
   Большая рамка приза (.cs-prize) сюда не входит: у неё свой вид с лучами.
   ========================================================================== */

.cs-sm, .cs-it, .pf-item, .pg-skin, .mk-page .pg-skin, .ct-it, .ct-slot.is-full,
.up-tile, .ks-it, .cr-item, .tr-in, .tr-rit, .cfl-it, .bt-it, .bt-rit, .kz-drop, .gg-live__link {
  --sc: var(--r, var(--rar, #4b69ff));
  isolation: isolate;
  background:
    radial-gradient(90% 70% at 50% 0%, color-mix(in srgb, var(--sc) 75%, transparent), transparent 70%),
    linear-gradient(180deg, color-mix(in srgb, var(--sc) 45%, #1b1c2c) 0%, #1b1c2c 72%);
  box-shadow: inset 0 2px 0 var(--sc), inset 0 10px 16px -10px var(--sc);
}
.bt-it { position: absolute; }   /* карточка в слоте баттла остаётся абсолютной */

.cs-sm::after, .cs-it::after, .pf-item::after, .pg-skin::after, .mk-page .pg-skin::after,
.ct-it::after, .ct-slot.is-full::after, .up-tile::after, .ks-it::after, .cr-item::after,
.tr-in::after, .tr-rit::after, .cfl-it::after, .bt-it::after, .bt-rit::after, .kz-drop::after,
.gg-live__link::after {
  content: ''; display: block; position: absolute; inset: 0; width: auto; height: auto;
  z-index: -1; pointer-events: none; border-radius: inherit;
  /* Затухание к подписи — в самом цвете слоя, а маска одна (только
     молнии). Две маски с mask-composite: intersect в браузерах без его
     поддержки (старый Chrome, часть сборок Яндекса/Opera) СКЛАДЫВАЛИСЬ:
     верх карточки заливался сплошным слоем, и подпись оказывалась на
     тёмном прямоугольнике. */
  --sc-tint: color-mix(in srgb, var(--sc) 40%, #fff);
  background: linear-gradient(180deg, var(--sc-tint) 0%, color-mix(in srgb, var(--sc-tint) 50%, transparent) 42%, transparent 80%);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cg fill='%23000'%3E%3Cpath d='M11.5 2 5 12.2h4.3L7 20l7.2-10.8H9.8z'/%3E%3Cpath d='M31.5 22 25 32.2h4.3L27 40l7.2-10.8h-4.4z'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 40px 40px repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cg fill='%23000'%3E%3Cpath d='M11.5 2 5 12.2h4.3L7 20l7.2-10.8H9.8z'/%3E%3Cpath d='M31.5 22 25 32.2h4.3L27 40l7.2-10.8h-4.4z'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 40px 40px repeat;
  opacity: .2;
}

/* Старые украшения, которые спорили бы с новым видом: знак «D» за
   оружием в содержимом кейса и золотая кромка у карточек выбора. */
.cs-sm::before { display: none; }
.cr-item::before, .ks-it::before, .tr-in::before, .up-tile::before { display: none; }