/* ==========================================================================
   DropHub Crash — ставки раунда (только crash.html, body.ht-crash)

   Подключается после crash.theme.css / crash.bg.css и до mobile.css.
   Селекторы того же веса, что в crash.css и crash.theme.css (префикс
   .gm-body:where(.ht-crash) / :where(.ht-crash)), — побеждают порядком.

   · Общий блок списка невидим: без подложки, рамки и своей прокрутки —
     над карточками только заголовок по центру на линиях («Ставки раунда»,
     ::before — разметку пишет crash.main.js целиком, свой узел в ней не
     выживет). Пустой блок прячет crash.css (:empty), заголовок вместе с ним.
   · Карточка — тёмное стекло стола, слева тонкая полоска состояния
     (фиолетовая — в игре, лаймовая — забрал, розовая — сгорело).
   · Вещь ставки и вещь выигрыша стоят на мягком световом пятне
     (фиолетовом и лаймовом), а не висят в пустоте.
   · «В игре» и «Сгорело» — текст с точкой, без коробки: десяток
     одинаковых кнопок подряд читался как форма, а не как стол.
   · Забрал — множитель крупно лаймом, под ним сумма; крупный (≥x2) —
     множитель сплошной лаймовой плашкой и разлив справа.
   · Аватар (krazeLevel.player) не трогается: его фон и рамку снимает
     .is-lvl из drophub.level.js. Своя ставка — лаймовая рамка поверх.
   ========================================================================== */

/* ── общий блок: невидимый, с заголовком ── */
:where(.ht-crash) .cr-bets {
  max-height: none; overflow: visible;
  margin-top: 26px; padding: 0; border: 0; border-radius: 0;
  background: none; box-shadow: none;
  gap: 10px;
}
:where(.ht-crash) .cr-bets::before {
  content: 'Ставки раунда'; grid-column: 1 / -1;
  display: block; margin-bottom: 4px; text-align: center;
  font-family: var(--f-body); font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  line-height: 18px; color: #A69FCF;
  background:
    linear-gradient(90deg, transparent, rgba(166, 120, 255, .32)) left center / calc(50% - 96px) 1px no-repeat,
    linear-gradient(270deg, transparent, rgba(166, 120, 255, .32)) right center / calc(50% - 96px) 1px no-repeat;
}

/* ── карточка ── */
.gm-body:where(.ht-crash) .cr-bets .cr-card,
.gm-body:where(.ht-crash) .cr-bets .cr-card:nth-child(even),
.gm-body:where(.ht-crash) .cr-bets .cr-card.is-out,
.gm-body:where(.ht-crash) .cr-bets .cr-card:nth-child(even).is-out {
  --cr-st: #8B5CFF;                       /* цвет полоски состояния */
  height: calc(6.6 * var(--u));
  padding: 0 calc(1.4 * var(--u)) 0 calc(1.5 * var(--u));
  grid-template-columns: minmax(0, 1fr) calc(8.4 * var(--u)) minmax(0, 1fr) auto;
  column-gap: 0;
  background: linear-gradient(180deg, #241D48 0%, #1C1639 100%);
  border: 1px solid rgba(150, 112, 255, .15);
  border-radius: 14px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 6px 18px rgba(6, 3, 20, .28);
  transition: border-color .2s, background .25s, opacity .25s, box-shadow .25s;
}
@media (hover: hover) {
  .gm-body:where(.ht-crash) .cr-bets .cr-card:hover { border-color: rgba(166, 120, 255, .34); }
}
/* полоска состояния слева (::before раньше нёс кадр зала — снят) */
.gm-body:where(.ht-crash) .cr-bets .cr-card::before {
  content: ''; display: block; position: absolute; z-index: 1;
  left: 0; right: auto; top: 26%; bottom: 26%; width: 3px;
  border-radius: 0 3px 3px 0; opacity: 1;
  background: var(--cr-st); box-shadow: 0 0 10px var(--cr-st);
  -webkit-mask: none; mask: none;
  transition: background-color .2s, box-shadow .2s;
}

/* имя и ставка */
:where(.ht-crash) .cr-card__who { gap: calc(1 * var(--u)); }
:where(.ht-crash) .cr-card__who > span { gap: calc(.35 * var(--u)); }
:where(.ht-crash) .cr-card__who b {
  font-size: calc(1.25 * var(--u)); font-weight: 600; color: #F2EFFF; line-height: 1.15;
}
:where(.ht-crash) .cr-card__who u {
  font-family: var(--f-cond); font-size: calc(1.4 * var(--u)); font-weight: 600; letter-spacing: .01em;
  line-height: 1; color: #CDB8FF;
}

/* вещь ставки — на фиолетовом световом пятне */
:where(.ht-crash) .cr-card__art,
:where(.ht-crash) .cr-card__win {
  justify-content: center; height: calc(5 * var(--u));
}
:where(.ht-crash) .cr-card__art {
  background: radial-gradient(50% 55% at 50% 60%, rgba(140, 92, 255, .42) 0%, rgba(140, 92, 255, .12) 55%, rgba(140, 92, 255, 0) 100%);
}
:where(.ht-crash) .cr-card__art img { width: calc(6.6 * var(--u)); height: calc(4.8 * var(--u)); }
:where(.ht-crash) .cr-card__art .cr-card__coin,
:where(.ht-crash) .cr-card__win .cr-card__coin { width: calc(3.2 * var(--u)); height: calc(3.2 * var(--u)); margin-left: 0; }

/* статус и выигрыш — прижаты вправо, множитель над суммой */
:where(.ht-crash) .cr-card__mid {
  justify-self: end; flex-direction: column; align-items: flex-end; justify-content: center;
  gap: calc(.45 * var(--u)); min-width: 0;
}
:where(.ht-crash) .cr-badge {
  width: auto; height: auto; padding: 0; border: 0; border-radius: 0; background: none;
  font-family: var(--f-cond); font-weight: 600; letter-spacing: .01em; line-height: 1;
}

/* «В игре» / «Сгорело» — текст с точкой */
:where(.ht-crash) .cr-badge--wait,
:where(.ht-crash) .cr-badge--lost {
  gap: calc(.7 * var(--u));
  font-family: var(--f-body); font-size: calc(1.2 * var(--u)); font-weight: 600; letter-spacing: 0; opacity: 1;
}
:where(.ht-crash) .cr-badge--wait { color: #B6A8EC; }
:where(.ht-crash) .cr-badge--lost { color: #FF8AA0; }
:where(.ht-crash) .cr-badge--wait::before,
:where(.ht-crash) .cr-badge--lost::before {
  content: ''; flex: none; width: 7px; height: 7px; border-radius: 50%;
}
:where(.ht-crash) .cr-badge--wait::before {
  background: #A678FF; box-shadow: 0 0 0 3px rgba(166, 120, 255, .16), 0 0 10px rgba(166, 120, 255, .8);
  animation: cr-live 1.6s ease-in-out infinite;
}
:where(.ht-crash) .cr-badge--lost::before { background: #FF5C7A; box-shadow: 0 0 0 3px rgba(255, 92, 122, .14); }
@keyframes cr-live { 50% { opacity: .45; box-shadow: 0 0 0 5px rgba(166, 120, 255, 0), 0 0 4px rgba(166, 120, 255, .4); } }

/* забрал: множитель крупно, сумма под ним */
:where(.ht-crash) .cr-badge--x {
  font-size: calc(1.9 * var(--u)); font-weight: 700; color: #D7FF00;
  text-shadow: 0 0 14px rgba(215, 255, 0, .4);
}
:where(.ht-crash) .cr-badge--sum {
  gap: calc(.3 * var(--u)); font-size: calc(1.3 * var(--u)); color: #EAFFB2;
}

/* вещь выигрыша — на лаймовом пятне; пустая ячейка места не берёт */
:where(.ht-crash) .cr-card__win {
  width: calc(7.4 * var(--u)); margin-left: calc(1 * var(--u));
  background: radial-gradient(50% 55% at 50% 60%, rgba(215, 255, 0, .26) 0%, rgba(215, 255, 0, .07) 55%, rgba(215, 255, 0, 0) 100%);
}
:where(.ht-crash) .cr-card__win:empty { display: none; }

/* ── забрал: лаймовая полоска, разлив справа и кромка ── */
.gm-body:where(.ht-crash) .cr-bets .cr-card.is-out,
.gm-body:where(.ht-crash) .cr-bets .cr-card:nth-child(even).is-out {
  --cr-st: #D7FF00;
  background:
    radial-gradient(38% 120% at 100% 50%, rgba(215, 255, 0, .09) 0%, rgba(215, 255, 0, 0) 100%),
    linear-gradient(180deg, #241D48 0%, #1C1639 100%);
  border-color: rgba(215, 255, 0, .22);
}
:where(.ht-crash) .cr-card.is-out::after { border-color: transparent; box-shadow: none; }

/* крупный выигрыш (≥x2): множитель — сплошная лаймовая плашка */
.gm-body:where(.ht-crash) .cr-bets .cr-card.is-out.is-big,
.gm-body:where(.ht-crash) .cr-bets .cr-card:nth-child(even).is-out.is-big {
  background:
    radial-gradient(46% 140% at 100% 50%, rgba(215, 255, 0, .15) 0%, rgba(215, 255, 0, 0) 100%),
    linear-gradient(180deg, #262049 0%, #1D173A 100%);
  border-color: rgba(215, 255, 0, .45);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 6px 22px rgba(6, 3, 20, .3), 0 0 18px rgba(215, 255, 0, .08);
}
:where(.ht-crash) .cr-card.is-out.is-big::after { border-color: transparent; }
:where(.ht-crash) .cr-card.is-big .cr-badge--x {
  padding: calc(.35 * var(--u)) calc(.8 * var(--u)); border-radius: 7px;
  background: #D7FF00; color: #131A00; text-shadow: none;
  font-size: calc(1.6 * var(--u));
  box-shadow: 0 0 16px rgba(215, 255, 0, .35);
}
:where(.ht-crash) .cr-card.is-big .cr-badge--sum { background: none; border: 0; color: #F1FFC4; }
:where(.ht-crash) .cr-card.is-out.is-big .cr-card__who b { color: #fff; }
:where(.ht-crash) .cr-card.is-out.is-big .cr-card__who u { color: #E4FF7A; }

/* своя ставка — лаймовая рамка поверх любого состояния */
:where(.ht-crash) .cr-card.is-me::after {
  border: 1.5px solid rgba(215, 255, 0, .75); mix-blend-mode: normal; opacity: 1;
}
:where(.ht-crash) .cr-card.is-me .cr-card__who b { color: #E9FF8A; }

/* сгоревшие — тише, розовая полоска, вещь бесцветная */
.gm-body:where(.ht-crash) .cr-bets .cr-card.is-lost { --cr-st: #FF5C7A; opacity: .6; }
.gm-body:where(.ht-crash) .cr-bets .cr-card.is-lost::before { box-shadow: none; }
:where(.ht-crash) .cr-card.is-lost .cr-card__art { background: none; }
:where(.ht-crash) .cr-card.is-lost .cr-card__art img { filter: grayscale(.9) brightness(.85); }

/* ── телефон ── */
@media (max-width: 600px) {
  .gm-body:where(.ht-crash) .cr-bets .cr-card,
  .gm-body:where(.ht-crash) .cr-bets .cr-card:nth-child(even),
  .gm-body:where(.ht-crash) .cr-bets .cr-card.is-out,
  .gm-body:where(.ht-crash) .cr-bets .cr-card:nth-child(even).is-out {
    height: 60px; padding: 0 12px 0 13px;
    grid-template-columns: minmax(0, 1fr) 62px minmax(0, auto) auto;
  }
  :where(.ht-crash) .cr-card__art img { width: 54px; height: 40px; }
  :where(.ht-crash) .cr-card__art, :where(.ht-crash) .cr-card__win { height: 44px; }
  :where(.ht-crash) .cr-card__win { width: 54px; margin-left: 6px; }
  :where(.ht-crash) .cr-card__mid { margin-left: 6px; }
  :where(.ht-crash) .cr-card__who b { font-size: 12.5px; }
  :where(.ht-crash) .cr-card__who u { font-size: 13.5px; }
  :where(.ht-crash) .cr-badge--wait, :where(.ht-crash) .cr-badge--lost { font-size: 12px; gap: 6px; }
  :where(.ht-crash) .cr-badge--x { font-size: 16px; }
  :where(.ht-crash) .cr-card.is-big .cr-badge--x { font-size: 13.5px; padding: 3px 7px; }
  :where(.ht-crash) .cr-badge--sum { font-size: 12.5px; }
}

@media (prefers-reduced-motion: reduce) {
  :where(.ht-crash) .cr-bets.is-fresh .cr-card { animation: none; }
  .gm-body:where(.ht-crash) .cr-bets .cr-card { transition: none; }
  :where(.ht-crash) .cr-badge--wait::before { animation: none; }
}