/* ==========================================================================
   DropHub Crash — тема сайта (только crash.html, body.ht-crash)

   Подключается СРАЗУ ПОСЛЕ crash.css и ДО mobile.css. Каждое правило — тот
   же селектор, что в crash.css / games.css / home.css, с префиксом
   :where(.ht-crash): веса он не добавляет, поэтому правило перебивает
   crash.css порядком, а mobile.css на телефоне по-прежнему перебивает его.
   Где телефонное правило mobile.css надо перебить — префикс .ht-crash без
   :where (на класс тяжелее), и только внутри своего @media.

   Язык тот же, что у апгрейда, HiLo, контрактов и «1 Клика»: индиго-стол с
   «лампой», тонкой сеткой и редкими искрами, заголовок по центру на линиях,
   «колодцы» под поля, стеклянные чипы, лаймовая главная кнопка. Лайм на
   странице — то, что забираешь, и главное действие; фиолет — ожидание и
   выбор; розовый — обрыв и потери.

   Разметка, id и классы не меняются. 3D-сцена (crash3d.js) не трогается:
   вокруг неё только рамка «экрана», вставленного в стол, и тени по краям,
   чтобы множитель и история читались поверх.
   ========================================================================== */

/* ═══════════ ПАЛИТРА ═══════════
   Блок body — копия index.css body.ht-home: на эти имена опираются шапка,
   подвал и общие панели, поэтому они остаются как были. */
body.ht-crash {
  --ht-bg:        #1A1430;
  --ht-deep:      #120C26;
  --ht-surface:   #221B3E;
  --ht-surface-2: #2C2452;
  --ht-line:      #3A3166;
  --ht-text:      #F5F3FF;
  --ht-text-dim:  #BDB7DE;
  --ht-text-mute: #8F87B8;
  --ht-scrim:     16, 10, 36;

  --panel:     #0D0A1A;
  --panel-2:   #130E24;
  --panel-3:   #1E1836;
  --line:      #2B2449;
  --line-soft: #1F1938;
  --radius:    16px;

  background-color: var(--ht-bg);
}

/* Свои цвета — под именами --cx-*; общие токены crash.css (--gold, --green,
   --accent) переназначены: на них стоят цена, «Забрать», всплывающая сумма. */
:where(.ht-crash) .cr-page {
  --cx-s2: #2C2452; --cx-deep: #150F2B;
  --cx-glass: linear-gradient(180deg, #2C2452 0%, #241D45 100%);
  --cx-well:  linear-gradient(180deg, #150F2B 0%, #1B1436 100%);
  --cx-well-sh: inset 0 2px 6px rgba(6, 2, 20, .45), 0 1px 0 rgba(255, 255, 255, .05);
  --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-ink: #CFC8F0;
  --cx-violet: #C46BFF;
  --cx-rose: #FF5C7A; --cx-rose-l: #FF9AAE;
  --cx-scrim: rgba(21, 15, 43, .78);

  --accent:      var(--lime);
  --gold:        var(--lime);
  --gold-soft:   #EEFF9C;
  --green:       var(--lime);
  --violet:      #8B5CF6;
  --violet-soft: #C4B5FD;
  --scene-line:  rgba(166, 120, 255, .24);
  --text-dim:    var(--cx-dim);
  --text-mute:   var(--cx-faint);
}
/* Фото двора за страницей (crash.page::before, crash.bg.css) выключено, как
   граффити-кадр у апгрейда: яркий слой спорил со столом. Фон — ровный
   индиго сайта, «жизнь» в нём — от лампы и сетки стола. */
:where(.ht-crash) .cr-page::before { display: none; }

/* ── заголовок раздела ──
   По центру на линиях, как у апгрейда. Полосу ставит drophub.gamebar.js перед
   <main>; на телефоне её прячет mobile.css — там название стоит строкой
   над полем (.cr-side__head, переносит drophub.mobile.js). */
.cr-body .kz-gbar { max-width: 1480px; padding: 10px var(--pad-x, 20px) 0; justify-content: center; gap: 12px; }
.cr-body .kz-gbar::before, .cr-body .kz-gbar::after { content: ''; flex: 1; height: 1px; min-width: 24px; }
.cr-body .kz-gbar::before { margin-right: 6px; background: linear-gradient(90deg, transparent, rgba(166, 120, 255, .35)); }
.cr-body .kz-gbar::after  { margin-left: 6px;  background: linear-gradient(270deg, transparent, rgba(166, 120, 255, .35)); }
.cr-body .kz-gbar .kz-gico { width: 30px; height: 30px; flex: none; }
.cr-body .kz-gbar__txt { display: block; flex: none; }
.cr-body .kz-gbar__txt b { font-size: 30px; font-weight: 600; letter-spacing: .06em; line-height: 1.1; color: #F5F3FF; text-shadow: 0 0 24px rgba(166, 44, 255, .45); }
.cr-body .kz-gbar__txt i { display: none; }
:where(.ht-crash) .kz-game[aria-current="page"] { background: rgba(140, 90, 255, .2); }

:where(.ht-crash) .cr-page { margin-top: 16px; }

/* ═══════════ СТОЛ ═══════════
   Вся игра — один индиго-стол: лампа над панелью ставки, разливы по нижним
   углам, сетка 44 px, гаснущая к краям, и редкие искры. Панель ставки
   лежит прямо на столе (без своей коробки — не карточка в карточке), а
   сцена вставлена в него «экраном». */
:where(.ht-crash) .cr-panel {
  isolation: isolate;
  padding: 16px;
  border: 1px solid var(--cx-line); border-radius: 28px;
  background:
    radial-gradient(34% 44% at 16% 0%, rgba(140, 90, 255, .30), transparent 72%),
    radial-gradient(50% 50% at 0% 100%, rgba(110, 80, 230, .14), transparent 70%),
    radial-gradient(50% 50% at 100% 100%, rgba(110, 80, 230, .12), transparent 70%),
    linear-gradient(180deg, #261E4A 0%, #201941 58%, #1D163A 100%);
  box-shadow: 0 24px 60px rgba(8, 4, 24, .45), inset 0 1px 0 rgba(255, 255, 255, .07), inset 0 0 120px rgba(14, 8, 36, .35);
}
:where(.ht-crash) .cr-panel::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; border-radius: inherit;
  background-image:
    linear-gradient(rgba(190, 170, 255, .06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(190, 170, 255, .06) 1px, transparent 1px);
  background-size: 44px 44px; background-position: -1px -1px;
  -webkit-mask-image: radial-gradient(60% 80% at 18% 30%, #000 0%, rgba(0, 0, 0, .35) 55%, transparent 85%);
          mask-image: radial-gradient(60% 80% at 18% 30%, #000 0%, rgba(0, 0, 0, .35) 55%, transparent 85%);
}
/* искры — по полям стола, вне сцены */
:where(.ht-crash) .cr-panel::after {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; border-radius: inherit;
  background:
    radial-gradient(1.6px 1.6px at 3% 14%, rgba(215, 255, 0, .8), transparent),
    radial-gradient(1.2px 1.2px at 9% 96%, rgba(255, 255, 255, .5), transparent),
    radial-gradient(1.8px 1.8px at 24% 98.4%, rgba(166, 120, 255, .8), transparent),
    radial-gradient(1.2px 1.2px at 46% 1.4%, rgba(255, 255, 255, .45), transparent),
    radial-gradient(1.4px 1.4px at 71% 98.6%, rgba(166, 120, 255, .85), transparent),
    radial-gradient(1.7px 1.7px at 92% 1.3%, rgba(215, 255, 0, .7), transparent),
    radial-gradient(1.3px 1.3px at 99.4% 62%, rgba(166, 120, 255, .7), transparent),
    radial-gradient(1.1px 1.1px at .6% 58%, rgba(255, 255, 255, .4), transparent);
  animation: cr-twinkle 5s ease-in-out infinite alternate;
}
@keyframes cr-twinkle { from { opacity: .45; } to { opacity: 1; } }
:where(.ht-crash) .cr-row { gap: 18px; }

/* ═══════════ ПАНЕЛЬ СТАВКИ ═══════════ */
:where(.ht-crash) .cr-side {
  gap: 8px; padding: 2px 0 0; border: 0; border-radius: 0; background: none; box-shadow: none;
}
/* Название игры на широком экране уже стоит заголовком над столом — в
   панели вместо него подпись «Ставка»; инструменты остаются справа. */
@media (min-width: 761px) {
  :where(.ht-crash) .cr-side__title { display: none; }
  :where(.ht-crash) .cr-side__head::before {
    content: 'Ставка';
    font-family: var(--f-cond); font-size: 17px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
    color: var(--cx-text);
  }
}
:where(.ht-crash) .cr-side__title { font-weight: 600; letter-spacing: .06em; color: #fff; }
:where(.ht-crash) .cr-tool {
  width: 32px; height: 32px; border-radius: 10px;
  border-color: var(--cx-line); background: var(--cx-glass); color: var(--cx-ink);
  box-shadow: var(--cx-hl);
}
:where(.ht-crash) .cr-tool:hover { color: #fff; border-color: var(--cx-line2); }
:where(.ht-crash) .cr-tool:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }

/* подписи — с разрядкой, как .up-cap */
:where(.ht-crash) .cr-cap {
  margin-top: 6px;
  font-family: var(--f-body); font-size: 10.5px; font-weight: 700; letter-spacing: .14em; color: var(--cx-mute);
}
:where(.ht-crash) .cr-cap__links { color: var(--cx-faint); letter-spacing: .1em; }
:where(.ht-crash) .cr-cap a { color: var(--cx-dim); }
:where(.ht-crash) .cr-cap a:hover { color: var(--lime); }

/* поле — «колодец» */
:where(.ht-crash) .cr-auto {
  height: 40px; border: 1px solid var(--cx-line); border-radius: 12px;
  background: var(--cx-well); box-shadow: var(--cx-well-sh);
  font-size: 16px; color: var(--cx-faint);
  transition: border-color .15s;
}
:where(.ht-crash) .cr-auto input { color: var(--cx-text); }
:where(.ht-crash) .cr-auto input::placeholder { color: var(--cx-faint); }
:where(.ht-crash) .cr-auto:focus-within { border-color: var(--lime); }

/* быстрые кнопки — стеклянные чипы, как .up-chip */
:where(.ht-crash) .cr-quick { gap: 5px; }
:where(.ht-crash) .cr-q {
  height: 40px; border: 1px solid var(--cx-line); border-radius: 10px;
  background: linear-gradient(180deg, #3A3070 0%, #2C2452 100%);
  box-shadow: var(--cx-hl), 0 2px 6px rgba(0, 0, 0, .3);
  font-size: 14px; font-weight: 600; letter-spacing: .02em; color: var(--cx-ink);
}
@media (hover: hover) {
  :where(.ht-crash) .cr-q:hover { color: var(--cx-text); border-color: var(--cx-line2); background: linear-gradient(180deg, #44397F 0%, #342B60 100%); }
}
:where(.ht-crash) .cr-q:active:not(:disabled) { transform: translateY(1px); }
/* выбранная цель — индиго-заливка и чистая лаймовая рамка (как .up-chip.is-on):
   полупрозрачный лайм поверх индиго даёт хаки */
:where(.ht-crash) .cr-q.is-on, :where(.ht-crash) .cr-q.is-on:hover {
  color: var(--lime); border-color: var(--lime);
  background: linear-gradient(180deg, #2E2658 0%, #241D45 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 0 12px rgba(215, 255, 0, .16);
}
:where(.ht-crash) .cr-q:disabled { box-shadow: none; }
:where(.ht-crash) .cr-q:disabled:hover { color: var(--cx-ink); border-color: var(--cx-line); background: linear-gradient(180deg, #3A3070 0%, #2C2452 100%); }
:where(.ht-crash) .cr-q.is-on:disabled { color: var(--lime); border-color: var(--lime); }
:where(.ht-crash) .cr-q:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }

/* Скином | Балансом — сегмент в колодце; выбранное светлее, без лайма:
   это выбор вида ставки, а не то, что забирают */
:where(.ht-crash) .cr-mode {
  gap: 4px; padding: 4px; margin-top: 8px;
  border: 1px solid var(--cx-line); border-radius: 14px;
  background: var(--cx-well); box-shadow: var(--cx-well-sh);
}
:where(.ht-crash) .cr-mode .cr-q {
  height: 32px; border-color: transparent; border-radius: 10px; background: transparent; box-shadow: none;
  font-family: var(--f-body); font-size: 11.5px; font-weight: 700; letter-spacing: .1em; color: var(--cx-faint);
}
:where(.ht-crash) .cr-mode .cr-q:hover { border-color: transparent; background: rgba(255, 255, 255, .04); color: var(--cx-text); }
:where(.ht-crash) .cr-mode .cr-q.is-on, :where(.ht-crash) .cr-mode .cr-q.is-on:hover {
  color: #fff; border-color: var(--cx-line2);
  background: linear-gradient(180deg, #4A3D8F 0%, #3A3070 100%);
  box-shadow: var(--cx-hl), 0 2px 6px rgba(0, 0, 0, .3);
}
:where(.ht-crash) .cr-mode .cr-q.is-on:disabled { color: #fff; }

/* предмет на кону / строка выигрыша — колодец; в полёте кромка лаймом */
:where(.ht-crash) .cr-hero {
  border: 1px solid var(--cx-line); border-radius: 14px;
  background:
    radial-gradient(50% 90% at 14% 50%, rgba(140, 90, 255, .16), transparent 70%),
    var(--cx-well);
  box-shadow: var(--cx-well-sh);
}
:where(.ht-crash) .cr-panel[data-phase="fly"] .cr-hero.is-live { border-color: rgba(215, 255, 0, .75); }
:where(.ht-crash) .cr-hero__name { color: var(--cx-text); }
:where(.ht-crash) .cr-hero__price { font-size: 18px; color: var(--cx-text); }
:where(.ht-crash) .cr-hero.is-live .cr-hero__price, :where(.ht-crash) .cr-coinhero.is-won .cr-hero__price { color: var(--lime); }
:where(.ht-crash) .cr-coinhero.is-lost .cr-hero__price { color: var(--cx-rose-l); }
:where(.ht-crash) .cr-coinhero__ico { color: var(--lime); }
/* Глитч и мерцание вещи на плите (анимации — в crash.css): каналы в цветах
   темы — фиолетовый, розовый, лайм. Только статичный filter у копий. */
:where(.ht-crash) .cr-hero__gl--r { filter: sepia(1) saturate(9) hue-rotate(232deg) brightness(1.2); }
:where(.ht-crash) .cr-hero__gl--g { filter: sepia(1) saturate(7) hue-rotate(300deg) brightness(1.1); }
:where(.ht-crash) .cr-hero__gl--b { filter: sepia(1) saturate(9) hue-rotate(52deg)  brightness(1.3); }
:where(.ht-crash) .cr-hero.is-strike { animation-name: cr-card-flash-l; }
@keyframes cr-card-flash-l { 0% { box-shadow: 0 0 0 2px var(--lime); } 100% { box-shadow: var(--cx-well-sh); } }

/* ── главная кнопка ──
   Состояния ставит setBtn в crash.main.js классами: is-place (поставить),
   is-cash (забрать), is-pending, is-refused, is-cancel, is-queue,
   is-settled is-won/is-lost, is-login (гость); без класса — выключена. */
:where(.ht-crash) .cr-state {
  height: 58px; margin-top: 6px; padding: 0 18px; gap: 10px;
  border: 0; border-radius: 16px;
  background: var(--cx-glass); color: var(--cx-faint);
  box-shadow: inset 0 0 0 1px var(--cx-line), var(--cx-hl);
  font-size: 18px; font-weight: 700; letter-spacing: .1em;
}
:where(.ht-crash) .cr-state b { display: inline-flex; align-items: center; gap: 5px; font-weight: 600; letter-spacing: .02em; }
/* поставить / забрать / войти — лаймом, как .up-go */
:where(.ht-crash) .cr-state.is-place,
:where(.ht-crash) .cr-state.is-cash,
:where(.ht-crash) .cr-state.is-login {
  background: linear-gradient(180deg, #EEFF7A 0%, #D7FF00 46%, #B4E200 100%); color: #10150A;
  box-shadow: 0 14px 32px -8px rgba(215, 255, 0, .45), 0 0 0 1px rgba(215, 255, 0, .55),
              inset 0 1px 0 rgba(255, 255, 255, .7), inset 0 -3px 0 rgba(70, 100, 0, .3);
}
:where(.ht-crash) .cr-state.is-place b { opacity: .78; }
:where(.ht-crash) .cr-state.is-login { cursor: pointer; }
:where(.ht-crash) .cr-state.is-login:hover { filter: brightness(1.06); }
/* «Забрать N» — та же лаймовая, сумма крупнее, мягкое кольцо-дыхание */
:where(.ht-crash) .cr-state.is-cash { font-size: 19px; animation: cr-pulse-l 1.4s ease-in-out infinite; }
:where(.ht-crash) .cr-state.is-cash b { font-size: 21px; }
@keyframes cr-pulse-l {
  50% { box-shadow: 0 14px 32px -8px rgba(215, 255, 0, .45), 0 0 0 5px rgba(215, 255, 0, .2),
                    inset 0 1px 0 rgba(255, 255, 255, .7), inset 0 -3px 0 rgba(70, 100, 0, .3); }
}
/* лаймовая, но занятая (ждём ответ сервера) — приглушена, не дышит */
:where(.ht-crash) .cr-state.is-place[aria-disabled="true"] { filter: saturate(.7) brightness(.85); }
:where(.ht-crash) .cr-state.is-cash.is-pending { animation: none; filter: brightness(.86); }
:where(.ht-crash) .cr-state.is-cancel { color: var(--cx-dim); }
:where(.ht-crash) .cr-state.is-cancel:hover { color: var(--cx-rose-l); }
:where(.ht-crash) .cr-state.is-queue {
  font-size: 13px; color: #E2CCFF;
  background: linear-gradient(180deg, #3B2C74 0%, #2E2458 100%);
  box-shadow: inset 0 0 0 1px rgba(196, 107, 255, .5), var(--cx-hl);
}
:where(.ht-crash) .cr-state.is-refused, :where(.ht-crash) .cr-state.is-refused.is-cash {
  font-size: 13px; color: #FFC2CE; animation: none;
  background: linear-gradient(180deg, #3A2050 0%, #2D1A42 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 92, 122, .55), var(--cx-hl);
}
:where(.ht-crash) .cr-state.is-settled { font-size: 14px; animation: none; }
:where(.ht-crash) .cr-state.is-settled.is-won  { color: var(--lime); box-shadow: inset 0 0 0 1px rgba(215, 255, 0, .55), var(--cx-hl); }
:where(.ht-crash) .cr-state.is-settled.is-lost { color: var(--cx-rose-l); box-shadow: inset 0 0 0 1px rgba(255, 92, 122, .5), var(--cx-hl); }
:where(.ht-crash) .cr-state:focus-visible { outline: 2px solid var(--lime); outline-offset: 3px; }
:where(.ht-crash) .cr-hint { color: var(--cx-rose-l); text-align: center; }

/* инвентарь — колодец */
:where(.ht-crash) .cr-inv {
  border: 1px solid var(--cx-line); border-radius: 14px;
  background: var(--cx-well); box-shadow: var(--cx-well-sh);
}
:where(.ht-crash) .cr-inv__empty b { color: var(--cx-text); }
:where(.ht-crash) .cr-inv__empty span { color: var(--cx-faint); }
/* «Внести скин» — второстепенная: индиго с лаймовой рамкой, чтобы рядом
   была одна сплошная лаймовая кнопка — главная */
:where(.ht-crash) .cr-deposit {
  border: 1px solid var(--lime); border-radius: 12px; color: var(--lime);
  background: linear-gradient(180deg, #2E2658 0%, #241D45 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07);
}
@media (hover: hover) { :where(.ht-crash) .cr-deposit:hover { background: linear-gradient(180deg, #3A3070 0%, #2C2452 100%); } }

/* ═══════════ СЦЕНА — «экран» в столе ═══════════
   Пока 3D грузится, виден индиго-градиент; сцена перекрывает его целиком.
   Кромка экрана подсказывает фазу: в полёте — лайм, на обрыве — розовый. */
:where(.ht-crash) .cr-game {
  border: 1px solid rgba(166, 120, 255, .24); border-radius: 20px;
  background: radial-gradient(70% 60% at 50% 0%, #2E2560 0%, transparent 70%), linear-gradient(180deg, #221B45 0%, #150F2B 100%);
  box-shadow: 0 14px 34px rgba(8, 4, 24, .45), 0 0 0 4px rgba(21, 15, 43, .5);
  transition: border-color .3s;
}
:where(.ht-crash) .cr-panel[data-phase="fly"] .cr-game  { border-color: rgba(215, 255, 0, .38); }
:where(.ht-crash) .cr-panel[data-phase="over"] .cr-game { border-color: rgba(255, 92, 122, .5); }
/* тени по краям экрана — индиго, не чёрные: сверху под множитель и
   плашки, снизу под полосу истории */
:where(.ht-crash) .cr-game::after {
  border-radius: inherit;
  /* лёгкая индиго-плёнка (без blend — дёшево поверх живого холста):
     серый двор сцены садится в палитру стола */
  background:
    linear-gradient(rgba(52, 30, 130, .14), rgba(52, 30, 130, .14)),
    linear-gradient(180deg, rgba(16, 10, 36, .62) 0%, rgba(16, 10, 36, 0) 26%, rgba(16, 10, 36, 0) 76%, rgba(16, 10, 36, .78) 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .04), inset 0 0 60px rgba(14, 8, 36, .45);
}

/* банк и игроки — стеклянные плашки */
:where(.ht-crash) .cr-stat {
  border: 1px solid rgba(166, 120, 255, .2); border-radius: 12px;
  background: var(--cx-scrim);
}
:where(.ht-crash) .cr-stat__ico { opacity: .7; color: var(--cx-mute); }
:where(.ht-crash) .cr-stat b { font-size: 16px; color: var(--cx-text); }
:where(.ht-crash) .cr-stat--bank b { color: var(--lime); }
:where(.ht-crash) .cr-stat span { font-family: var(--f-body); font-size: 9px; font-weight: 700; letter-spacing: .14em; color: var(--cx-mute); }

/* Множитель — главное число страницы: крупный Oswald. В ожидании белый
   (обратный отсчёт), в полёте лаймовый, на обрыве розовый. */
:where(.ht-crash) .cr-timer { top: 22px; }
:where(.ht-crash) .cr-timer__val {
  font-family: var(--f-cond); font-size: calc(6.6 * var(--u)); font-weight: 600; line-height: 1; letter-spacing: .01em;
  color: var(--cx-text);
  text-shadow: 0 4px 18px rgba(10, 6, 28, .75);
}
:where(.ht-crash) .cr-panel[data-phase="fly"] .cr-timer__val {
  color: var(--lime);
  text-shadow: 0 4px 18px rgba(10, 6, 28, .75), 0 0 26px rgba(215, 255, 0, .22);
}
:where(.ht-crash) .cr-panel[data-phase="over"] .cr-timer__val { color: var(--cx-rose); text-shadow: 0 4px 18px rgba(10, 6, 28, .75); }
:where(.ht-crash) .cr-timer__cap {
  margin-top: 8px; padding: 4px 12px; border-radius: 999px;
  background: var(--cx-scrim); box-shadow: inset 0 0 0 1px rgba(166, 120, 255, .2);
  font-family: var(--f-body); font-size: 10px; font-weight: 700; letter-spacing: .16em; color: var(--cx-ink);
}
:where(.ht-crash) .cr-mine {
  margin-top: 8px; padding: 5px 12px; border-radius: 999px;
  border: 1px solid rgba(166, 120, 255, .22); background: var(--cx-scrim);
}
:where(.ht-crash) .cr-mine em { font-size: 14px; color: var(--cx-text); }
:where(.ht-crash) .cr-mine em.is-win { color: var(--lime); }

/* обрыв — слово по центру, розовым, без неона */
:where(.ht-crash) .cr-bust { background: radial-gradient(55% 45% at 50% 50%, rgba(255, 92, 122, .2), transparent 72%); }
:where(.ht-crash) .cr-bust b {
  font-family: var(--f-cond); font-size: calc(5.2 * var(--u)); font-weight: 600; letter-spacing: .14em;
  color: var(--cx-rose); text-shadow: 0 4px 22px rgba(10, 6, 28, .8);
}
:where(.ht-crash) .cr-bust span { font-family: var(--f-cond); font-weight: 600; color: var(--cx-rose-l); }

/* кто забрал — стеклянные строки; аватар с уровнем (krazeLevel.player) и
   плашка множителя справа от круга — как в crash.css, только цвета */
:where(.ht-crash) .cr-out {
  border: 1px solid rgba(166, 120, 255, .18); border-radius: 12px;
  background: var(--cx-scrim);
}
:where(.ht-crash) .cr-out::after { display: none; }
:where(.ht-crash) .cr-out.is-me { border-color: rgba(215, 255, 0, .7); }
:where(.ht-crash) .cr-out .cr-ava b { background: var(--lime); color: #10150A; transform: none; border-radius: 6px; }
:where(.ht-crash) .cr-out__ico { color: var(--cx-mute); }
:where(.ht-crash) .cr-out__name { color: var(--cx-ink); font-weight: 600; }
:where(.ht-crash) .cr-out.is-me .cr-out__name { color: var(--lime); }
/* запасной аватар без компонента уровня — буква в индиго-круге */
:where(.ht-crash) .cr-ava:not(.is-lvl) { border-radius: 50%; background: var(--cx-s2); color: var(--cx-text); }

/* итог своей ставки — стекло стола */
:where(.ht-crash) .cr-result {
  border: 1px solid var(--cx-line); border-radius: 18px;
  background: linear-gradient(180deg, rgba(44, 36, 82, .97) 0%, rgba(30, 24, 60, .97) 100%);
  box-shadow: 0 18px 40px rgba(8, 4, 24, .6), inset 0 1px 0 rgba(255, 255, 255, .07);
}
:where(.ht-crash) .cr-result.is-won  { border-color: rgba(215, 255, 0, .6); }
:where(.ht-crash) .cr-result.is-lost { border-color: rgba(255, 92, 122, .55); }
:where(.ht-crash) .cr-result__t { font-family: var(--f-body); font-weight: 700; color: var(--lime); }
:where(.ht-crash) .cr-result.is-lost .cr-result__t { color: var(--cx-rose); }
:where(.ht-crash) .cr-result__n { color: var(--cx-text); }
:where(.ht-crash) .cr-result__sum { font-size: 19px; color: var(--cx-text); }
:where(.ht-crash) .cr-result.is-lost .cr-result__sum { color: var(--cx-rose-l); }

/* ═══════════ ИСТОРИЯ РАУНДОВ ═══════════
   Шесть классов heat() (crash.view.js), у каждого свой заметный цвет: до x1.1
   розовый, до x2 синий, до x3 зелёный, до x5 фиолет, до x10 пурпур, от x10
   лайм. Низкие обрывы — большинство раундов (до x3 их около двух третей),
   поэтому они не гасятся в индиго: иначе лента выглядит неподсвеченной. */
:where(.ht-crash) .cr-history__list { gap: 5px; }
:where(.ht-crash) .cr-history__list:empty::before { color: var(--cx-faint); }
:where(.ht-crash) .cr-chip { border-radius: 10px; }
:where(.ht-crash) .cr-chip > span {
  opacity: 1; border-radius: 10px; border-width: 1px;
  font-family: var(--f-cond); font-size: 14px; font-weight: 600; letter-spacing: .02em;
}
:where(.ht-crash) .cr-chip--red    { background: #3A1F45; color: var(--cx-rose-l); }
:where(.ht-crash) .cr-chip--red    > span { border-color: rgba(255, 92, 122, .4); }
:where(.ht-crash) .cr-chip--blue   { background: linear-gradient(180deg, #3F7DFF 0%, #2556E0 100%); color: #fff; }
:where(.ht-crash) .cr-chip--blue   > span { border-color: rgba(168, 200, 255, .55); }
:where(.ht-crash) .cr-chip--green  { background: linear-gradient(180deg, #3FE08A 0%, #1FA95C 100%); color: #052012; }
:where(.ht-crash) .cr-chip--green  > span { border-color: rgba(176, 255, 210, .6); }
:where(.ht-crash) .cr-chip--purple { background: linear-gradient(180deg, #7C4DFF 0%, #6233D9 100%); color: #fff; }
:where(.ht-crash) .cr-chip--purple > span { border-color: rgba(196, 170, 255, .55); }
:where(.ht-crash) .cr-chip--cyan   { background: linear-gradient(180deg, #B45CFF 0%, #8B2FE0 100%); color: #fff; }
:where(.ht-crash) .cr-chip--cyan   > span { border-color: rgba(226, 190, 255, .6); }
:where(.ht-crash) .cr-chip--gold   { background: linear-gradient(180deg, #EEFF7A 0%, #D7FF00 50%, #B4E200 100%); color: #10150A; box-shadow: none; }
:where(.ht-crash) .cr-chip--gold   > span { border-color: rgba(246, 255, 180, .7); }
/* бесконечный блик с blur + mix-blend на каждом чипе ≥x10 — снят (перф) */
:where(.ht-crash) .cr-chip--gold::after { display: none; animation: none; }

/* ═══════════ О РЕЖИМЕ ═══════════ */
:where(.ht-crash) .cr-about { content-visibility: auto; contain-intrinsic-size: auto 160px; color: var(--cx-faint); }
:where(.ht-crash) .cr-about h2 { font-family: var(--f-cond); font-weight: 600; letter-spacing: .03em; color: var(--cx-text); }

/* ═══════════ ПЛАНШЕТ И ТЕЛЕФОН ═══════════ */
@media (max-width: 980px) {
  :where(.ht-crash) .cr-panel { padding: 14px; border-radius: 24px; }
  :where(.ht-crash) .cr-row { gap: 14px; }
}
@media (max-width: 760px) {
  /* стол уже, меньше скругления; панель ставки под сценой на том же столе */
  :where(.ht-crash) .cr-page { margin-top: 10px; }
  .ht-crash .cr-panel { padding: 10px; border-radius: 20px; }
  .ht-crash .cr-row { gap: 10px; }
  .ht-crash .cr-game { border-radius: 16px; }
  .ht-crash .cr-side__head { padding: 0 2px; }
  .ht-crash .cr-inv { background: var(--cx-well); }
  /* кегль базовой кнопки — из mobile.css (14px, с переносом); крупнее —
     только у главных действий, у служебных подписей свои 13px */
  .ht-crash .cr-state { height: 54px; }
  .ht-crash .cr-state.is-place, .ht-crash .cr-state.is-login { font-size: 16px; }
  .ht-crash .cr-state.is-cash b { font-size: 19px; }
  .ht-crash .cr-timer__cap { margin-top: 6px; }
  /* меньше 16px — iOS приближает страницу при фокусе */
  :where(.ht-crash) .cr-auto input { font-size: 16px; }
}
@media (max-width: 374px) {
  .ht-crash .cr-panel { padding: 8px; border-radius: 18px; }
  .ht-crash .cr-q { font-size: 13px; }
  .ht-crash .cr-chip > span { font-size: 13px; }
}

@media (prefers-reduced-motion: reduce) {
  :where(.ht-crash) .cr-panel::after,
  :where(.ht-crash) .cr-state.is-cash { animation: none; }
  :where(.ht-crash) .cr-game, :where(.ht-crash) .cr-q { transition: none; }
}

/* ═══ ВЫБРАННОЕ И ВКЛЮЧЁННОЕ — ГРАДИЕНТ ЛОГОТИПА ═══
   Статичный градиент кислотный → розовый через светлый тон (напрямую
   смесь рыжеет), как ⚡/🛒 в «1 Клике» (oneclick.css). Стоит в конце
   файла: те же селекторы выше рисовали лаймовую рамку. */
:where(.ht-crash) .cr-q.is-on, :where(.ht-crash) .cr-q.is-on:hover, :where(.ht-crash) .cr-q.is-on:disabled,
:where(.ht-crash) .cr-mode .cr-q.is-on, :where(.ht-crash) .cr-mode .cr-q.is-on:hover, :where(.ht-crash) .cr-mode .cr-q.is-on:disabled {
  color: #F4FFD6;
  border: 1.5px solid transparent;
  background: linear-gradient(180deg, #2A2158 0%, #1C1540 100%) padding-box, linear-gradient(135deg, #D7FF00 0%, #F0FFC8 45%, #FFD6F7 55%, #F535F0 100%) border-box;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), -4px -4px 14px rgba(215, 255, 0, .16), 4px 4px 14px rgba(245, 53, 240, .2);
}