/* ==========================================================================
   DropHub Crash — стили

   Структура — своя, в стиле остальных игр сайта (минер, коинфлип): панель
   управления слева в рамке --line на --panel, поле игры справа — скруглённый
   блок с 3D-сценой, под ними полоса истории. Никакого стекла и блюра:
   плоские панели, тонкие линии, зелёная главная кнопка, лайм/жёлтый как
   акцент цифр.

   ---------- ЕДИНИЦА u ----------
   Внутри игрового поля (множитель, банк, колонка «забрали») размеры
   остались в u = clamp(7.5px, .8vw, 11.5px) — они масштабируются с полем.
   Панель управления — в px, как и остальные панели сайта.
   ========================================================================== */

/* Атрибут hidden слабее любого display из правил ниже — закрепляем. */
.cr-page [hidden] { display: none !important; }

.cr-page {
  --u: clamp(7.5px, .8vw, 11.5px);
  --gold: var(--accent);
  --gold-soft: #EEFF9C;
  --violet: #8A3DFF;
  --violet-soft: #C9A6FF;
  --glass: rgba(255, 255, 255, .08);
  --glass-line: rgba(255, 255, 255, .07);
  --navy: #15161B;
  --navy-hi: #1B1D24;
  /* цвета сцены: небо и пол картинки crash_bg — фон игрового блока,
     рамка и подложки внутри поля берут их же */
  --sky: #2D3C53;
  --sky-deep: #16202F;
  --ground: #0F1622;
  --scene-line: #2A3A52;
  /* жар раунда: 0 — старт, 1 — высокий множитель; ставит скрипт */
  --heat: 0;
  width: min(1400px, calc(100% - 40px));
  margin: 20px auto 48px;
  font-family: var(--f-body);
  color: var(--text);
}

/* Фон страницы: ночной двор (assets/crash_page_bg.webp) за блоками краша,
   полупрозрачный, поверх общего переливающегося фона сайта. К низу
   страницы растворяется — ставки и описание лежат на обычном фоне. */
.cr-page::before {
  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: url("assets/crash_page_bg.webp") center top / cover no-repeat;
  opacity: .5;
  -webkit-mask: linear-gradient(180deg, #000 40%, transparent 100%); mask: linear-gradient(180deg, #000 40%, transparent 100%);
}

/* ── панель: два блока в ряд + история ─────────────────────────────── */

.cr-panel { position: relative; display: flex; flex-direction: column; gap: 12px; }
.cr-row { display: flex; gap: 12px; height: calc(52 * var(--u)); min-height: 520px; }

/* ── панель управления ──────────────────────────────────────────────── */

.cr-side {
  flex: none; width: 340px; min-height: 0;
  display: flex; flex-direction: column; gap: 8px;
  padding: 14px;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: rgba(10, 10, 11, .86);   /* чуть просвечивает фон-двор */
}
.cr-side__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 2px; }
.cr-side__title {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--f-cond); font-size: 18px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--text);
}
/* Значок игры рядом с названием — тот же, что в меню разделов. */
.cr-side__ico { width: 26px; height: 26px; flex: none; object-fit: contain; }
.cr-side__tools { display: flex; gap: 6px; }
.cr-tool {
  width: 30px; height: 30px; padding: 6px; cursor: pointer;
  border: 1px solid var(--line); border-radius: 9px; background: var(--panel-3); color: var(--text-mute);
  transition: color .14s, border-color .14s;
}
.cr-tool:hover { color: var(--text); border-color: var(--text-mute); }
.cr-tool i, .cr-tool svg { display: block; width: 100%; height: 100%; }

.cr-cap {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  margin-top: 6px;
  font-family: var(--f-cond); font-size: 10px; letter-spacing: .15em; text-transform: uppercase; color: var(--text-mute);
}
.cr-cap a { color: var(--text-dim); text-decoration: none; display: inline-flex; align-items: center; gap: 4px; transition: color .14s; }
.cr-cap a:hover { color: var(--text); }
.cr-cap__links { display: flex; align-items: center; gap: 8px; letter-spacing: .08em; }
.cr-cap__links i { width: 12px; height: 12px; display: inline-block; }
.cr-cap__links svg { display: block; width: 100%; height: 100%; }

/* ставка — выбранный скин. В полёте плита показывает вещь, которую можно
   вывести прямо сейчас, и каждая смена ступени отыграна глитчем (ниже).
   На обрыве — серая. */
.cr-hero {
  position: relative; display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 10px; align-items: center;
  min-height: 70px; padding: 6px 12px 6px 6px;
  border: 1px solid var(--line); border-radius: 12px; background: var(--panel-3);
  transition: border-color .2s;
}
.cr-panel[data-phase="fly"] .cr-hero.is-live { border-color: color-mix(in srgb, var(--gold) 45%, var(--line)); }
.cr-hero__art { position: relative; width: 84px; height: 58px; }
.cr-hero__art #cr-hero-img { width: 100%; height: 100%; object-fit: contain; display: block; filter: drop-shadow(0 6px 10px rgba(0,0,0,.6)); transition: filter .3s, transform .3s; }
.cr-hero__art #cr-hero-img[hidden] { display: none; }
/* ── Глитч смены вещи ──
   Три копии картинки поверх основной, каждая выкрашена в свой канал и
   сложена screen: там, где копии совпадают, выходит обычная вещь, где
   разъехались — цветная кайма. Разовый глитч — класс is-glitch (ставит
   crash.main.js на 380 мс на плиту СКИНА, #cr-hero), постоянное мерцание
   ступени — is-up (ниже). Без этих классов копий нет вовсе.
   Цвета копий — статичный filter. Разовый глитч анимирует transform,
   clip-path и opacity; постоянное мерцание — только transform и opacity. */
.cr-hero__gl {
  display: none; position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain; pointer-events: none; mix-blend-mode: screen;
}
.cr-hero__art.is-glitch .cr-hero__gl,
.cr-hero__art.is-up .cr-hero__gl { display: block; }
.cr-hero__gl--r { filter: sepia(1) saturate(10) hue-rotate(-52deg) brightness(1.05); }
.cr-hero__gl--g { filter: sepia(1) saturate(10) hue-rotate(58deg)  brightness(1.05); }
.cr-hero__gl--b { filter: sepia(1) saturate(10) hue-rotate(172deg) brightness(1.05); }

/* ── Мерцание ступени (is-up) ──
   Ставка летит, а на плите уже не поставленная вещь, а ступень лестницы:
   вещь «нестабильна» и мерцает всё время, пока так. Цветная кайма по
   краю (две копии на 0–2 px в стороны) каждые 0.09–0.23 с меняет яркость
   и сдвиг, изредка мелькает третий канал, сама вещь то и дело на миг
   тускнеет; раз в 1–2.3 с — короткий (~0.15 с, три рывка) разъезд
   каналов на 2–7 px. Первый разъезд — через 0.9–1.5 с после разового
   глитча, не сразу.
   Шаги задаёт crash.main.js (flStep) переменными --fl-* на плите, а не
   CSS-анимация: бегущую анимацию браузер пересэмплирует в каждом кадре
   полёта, даже когда её значения стоят. Здесь — только куда переменные
   подставить; без них (таймер не запущен, «меньше движения») — ровная
   слабая кайма. Рваные полосы (clip-path) — только в разовом глитче.
   Во время разового глитча (is-glitch) значения мерцания не действуют:
   его анимация и полная яркость копий — поверх. */
.cr-hero__art.is-up .cr-hero__gl,
.cr-hero__art.is-up #cr-hero-img { will-change: transform, opacity; }
.cr-hero__art.is-up:not(.is-glitch) .cr-hero__gl--r { opacity: var(--fl-ro, .3);  transform: var(--fl-rt, translate(-1px, 0)); }
.cr-hero__art.is-up:not(.is-glitch) .cr-hero__gl--b { opacity: var(--fl-bo, .22); transform: var(--fl-bt, translate(1px, 0)); }
.cr-hero__art.is-up:not(.is-glitch) .cr-hero__gl--g { opacity: var(--fl-go, 0);   transform: var(--fl-gt, none); }
.cr-hero__art.is-up:not(.is-glitch) #cr-hero-img   { opacity: var(--fl-mo, 1);   transform: var(--fl-mt, none); transition: filter .3s; }
/* разовый глитч смены вещи */
.cr-hero__art.is-glitch .cr-hero__gl--r { animation: cr-gl-r .34s steps(1) both; }
.cr-hero__art.is-glitch .cr-hero__gl--g { animation: cr-gl-g .34s steps(1) both; }
.cr-hero__art.is-glitch .cr-hero__gl--b { animation: cr-gl-b .34s steps(1) both; }
.cr-hero__art.is-glitch #cr-hero-img { animation: cr-gl-main .34s steps(2) both; }

/* Полосы рвутся прыжками (steps), а не плавно: плавный сдвиг читается как
   дрожь, рывки — как сбой сигнала. */
@keyframes cr-gl-r {
  0%   { transform: translate(-6px, 0);  clip-path: inset(8% 0 58% 0); }
  25%  { transform: translate(5px, -1px); clip-path: inset(62% 0 6% 0); }
  50%  { transform: translate(-4px, 1px); clip-path: inset(30% 0 38% 0); }
  75%  { transform: translate(3px, 0);   clip-path: inset(0 0 74% 0); }
  100% { transform: none; clip-path: inset(0); opacity: 0; }
}
@keyframes cr-gl-g {
  0%   { transform: translate(2px, 1px);  clip-path: inset(40% 0 30% 0); }
  33%  { transform: translate(-2px, 0);   clip-path: inset(10% 0 70% 0); }
  66%  { transform: translate(1px, -1px); clip-path: inset(70% 0 4% 0); }
  100% { transform: none; clip-path: inset(0); opacity: 0; }
}
@keyframes cr-gl-b {
  0%   { transform: translate(6px, 0);   clip-path: inset(52% 0 12% 0); }
  25%  { transform: translate(-5px, 1px); clip-path: inset(4% 0 66% 0); }
  50%  { transform: translate(4px, -1px); clip-path: inset(44% 0 26% 0); }
  75%  { transform: translate(-3px, 0);  clip-path: inset(78% 0 0 0); }
  100% { transform: none; clip-path: inset(0); opacity: 0; }
}
@keyframes cr-gl-main {
  0%   { transform: translate(2px, 0) skewX(-7deg); filter: brightness(1.7) contrast(1.3); }
  50%  { transform: translate(-2px, 0) skewX(5deg); filter: brightness(.7); }
  100% { transform: none; filter: drop-shadow(0 6px 10px rgba(0,0,0,.6)); }
}
.cr-panel[data-phase="over"] .cr-hero__art #cr-hero-img { filter: grayscale(.8) brightness(.5); transform: scale(.94); }
.cr-hero__bolt { display: none; }
.cr-hero.is-strike { animation: cr-card-flash .55s ease-out; }
@keyframes cr-card-flash { 0% { box-shadow: 0 0 0 2px var(--gold), 0 0 24px color-mix(in srgb, var(--gold) 60%, transparent); } 100% { box-shadow: none; } }
.cr-hero__meta { display: grid; gap: 4px; min-width: 0; }
.cr-hero__name { font-size: 13px; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cr-hero__price { display: flex; align-items: center; gap: 5px; font-family: var(--f-cond); font-size: 17px; font-weight: 600; color: var(--gold); font-variant-numeric: tabular-nums; }
.cr-coin { display: inline-block; width: 15px; height: 15px; color: var(--gold); }
.cr-coin svg { display: block; width: 100%; height: 100%; }
.cr-hero__cap { font-size: 11px; color: var(--text-mute); }

/* Пустая строка ставки: обесцвеченный силуэт ножа вместо пустого места.
   Цена при этом не показывается — ставить ещё нечего, а прочерк рядом с
   монетой читался как «ноль», то есть как настоящее число. */
.cr-hero.is-ghost #cr-hero-img {
  filter: grayscale(1) brightness(1.1) !important;
  opacity: .26; transform: none !important;
}
.cr-hero.is-ghost .cr-hero__price { display: none; }

/* авто-вывод: поле и быстрые цели одной строкой */
.cr-autobar { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 6px; }
.cr-auto {
  display: flex; align-items: center; height: 38px; padding: 0 10px;
  border: 1px solid var(--line); border-radius: 9px; background: var(--panel-3);
  font-family: var(--f-cond); font-size: 15px; font-weight: 600; color: var(--text-mute);
}
.cr-auto input {
  width: 100%; min-width: 0; margin-left: 2px; border: 0; background: none; outline: 0;
  font: inherit; color: var(--text); font-variant-numeric: tabular-nums;
}
.cr-auto input::placeholder { color: var(--text-mute); }
.cr-quick { display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; }
.cr-q {
  height: 38px; padding: 0; cursor: pointer;
  border: 1px solid var(--line); border-radius: 9px; background: var(--panel-3);
  font-family: var(--f-cond); font-size: 13px; font-weight: 600; color: var(--text-mute); font-variant-numeric: tabular-nums;
  transition: color .14s, border-color .14s, background-color .14s;
}
.cr-q:hover { color: var(--text); border-color: var(--text-mute); }
.cr-q.is-on { color: var(--text); border-color: color-mix(in srgb, var(--gold) 55%, var(--line)); background: color-mix(in srgb, var(--gold) 12%, var(--panel-3)); }
.cr-q--inf { font-size: 17px; line-height: 1; }
.cr-q:disabled { opacity: .45; cursor: default; }
.cr-q:disabled:hover { color: var(--text-mute); border-color: var(--line); }
.cr-q.is-on:disabled { opacity: 1; color: var(--text); }

/* ── Чем ставить: скином | балансом ──
   Две кнопки .cr-q пополам. Режим пишется в data-mode панели, и лишнее
   для режима прячется классами cr-for-skin / cr-for-coins. */
.cr-mode { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; margin-top: 6px; }
.cr-mode .cr-q { height: 32px; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; }
.cr-panel:not([data-mode="coins"]) .cr-for-coins,
.cr-panel[data-mode="coins"] .cr-for-skin { display: none; }

/* сумма: поле шире, чем у авто-вывода, быстрых кнопок три */
.cr-amtbar { grid-template-columns: minmax(0, 1fr) 150px; }
.cr-amtbar .cr-quick { grid-template-columns: repeat(3, 1fr); }
.cr-amtbar input:disabled { opacity: .6; }
.cr-amtbar .cr-coin { flex: none; margin-right: 4px; }
/* строка выигрыша — та же плита, что у скина, с монетой вместо вещи */
.cr-coinhero { min-height: 58px; }
.cr-coinhero .cr-hero__art { height: 44px; display: grid; place-items: center; }
.cr-coinhero__ico { display: block; width: 34px; height: 34px; color: var(--gold); filter: drop-shadow(0 4px 10px rgba(0,0,0,.6)); transition: filter .3s; }
.cr-coinhero__ico > * { display: block; width: 100%; height: 100%; }
.cr-coinhero.is-won .cr-hero__price { color: var(--green); }
.cr-coinhero.is-lost .cr-hero__price { color: #FF9A9A; }
.cr-coinhero.is-lost .cr-coinhero__ico { filter: grayscale(1) brightness(.6); }
/* монета вместо картинки скина: карточки ставок, «забрали», итог */
.cr-card__coin, .cr-out__coin { display: block; flex: none; color: var(--gold); }
.cr-card__coin { width: calc(3.6 * var(--u)); height: calc(3.6 * var(--u)); margin-left: calc(1.4 * var(--u)); filter: drop-shadow(0 3px 6px rgba(0,0,0,.6)); }
.cr-out__coin { width: 20px; height: 20px; margin: 0 13px 0 19px; }
.cr-card__coin > *, .cr-out__coin > *, .cr-result__coin > * { display: block; width: 100%; height: 100%; }
.cr-result__coin { display: grid; place-items: center; color: var(--gold); padding: 6px 17px; box-sizing: border-box; }

/* главная кнопка: поставить — зелёная, забрать — зелёная и дышит,
   отмена — тёмная, очередь на следующий раунд — фиолетовая */
.cr-state {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; height: 52px; margin-top: 4px; padding: 0 14px;
  border: 1px solid var(--line); border-radius: 12px; background: var(--panel-3);
  color: var(--text-mute); font-family: var(--f-cond); font-size: 15px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em; white-space: nowrap; cursor: default;
  transition: filter .14s, background-color .2s, color .2s, border-color .2s;
}
.cr-state b { font-variant-numeric: tabular-nums; font-weight: 700; }
/* выключенная кнопка — aria-disabled (мягко, см. setBtn в crash.main.js) */
.cr-state:not([disabled]):not([aria-disabled="true"]) { cursor: pointer; }
.cr-state:not([disabled]):not([aria-disabled="true"]):hover { filter: brightness(1.08); }
.cr-state.is-place  { background: var(--green); border-color: transparent; color: #08110B; }
.cr-state.is-place b { opacity: .72; }
.cr-state.is-cancel { background: var(--panel-2); color: var(--text-dim); }
.cr-state.is-queue  { background: color-mix(in srgb, var(--violet) 22%, var(--panel-3)); border-color: color-mix(in srgb, var(--violet) 55%, var(--line)); color: var(--violet-soft); font-size: 13px; }
.cr-state.is-cash   { background: var(--green); border-color: transparent; color: #08110B; animation: cr-pulse 1.4s ease-in-out infinite; }
@keyframes cr-pulse { 50% { box-shadow: 0 0 0 5px rgba(67, 217, 122, .16); } }
/* Цель нажатия — всегда сама кнопка, а не подпись/сумма/монета внутри:
   сумма в полёте меняется каждый кадр, и mousedown на ней + mouseup на
   уже другом узле браузер кликом не считает (crash.main.js, setBtn).
   pointer-events наследуется — монета внутри суммы тоже прозрачна. */
.cr-state > * { pointer-events: none; }
.cr-state { touch-action: manipulation; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; }
.cr-state:not([disabled]):not([aria-disabled="true"]):active { transform: scale(.985); }
/* «Забрать» нажато, ответ сервера ещё в пути: кнопка вдавлена, не дышит */
.cr-state.is-pending { transform: scale(.985); filter: brightness(.86); animation: none; cursor: progress; }
/* отказ сервера на кнопке («Поздно — обрыв на x1.86») */
.cr-state.is-refused { background: color-mix(in srgb, #FF5A5A 22%, var(--panel-3)); border-color: color-mix(in srgb, #FF5A5A 55%, var(--line)); color: #FFB3B3; animation: none; font-size: 13px; }
/* своя ставка только что решилась: кнопка заперта и показывает итог
   («Забрано x1.50 · сумма» / «Сгорело на x2.00»), пока по ней не перестанут
   нажимать (settleLock в crash.main.js) */
.cr-state.is-settled { animation: none; font-size: 13px; cursor: default; }
.cr-state.is-settled.is-won  { color: var(--green); border-color: color-mix(in srgb, var(--green) 45%, var(--line)); }
.cr-state.is-settled.is-lost { color: #FF8A8A; border-color: color-mix(in srgb, #FF5A5A 45%, var(--line)); }
.cr-hint { margin: 0; font-size: 12px; line-height: 1.4; color: #FF8A8A; }
.cr-hint:empty { display: none; }

/* инвентарь: ставят, выбирая предмет */
.cr-inv {
  flex: 1; min-height: 120px;
  display: flex; flex-direction: column; overflow: hidden;
  padding: 6px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel-2);
}
.cr-inv__empty { margin: auto; padding: 12px; text-align: center; display: flex; flex-direction: column; align-items: center; }
.cr-inv__empty b { font-size: 13px; font-weight: 600; color: var(--text); }
.cr-inv__empty span { margin-top: 3px; font-size: 12px; color: var(--text-mute); }
.cr-deposit {
  display: inline-flex; align-items: center; margin-top: 12px; height: 38px; padding: 0 14px;
  border-radius: 10px; background: var(--green); color: #08110B;
  font-family: var(--f-cond); font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; text-decoration: none;
}
.cr-arrow { display: inline-block; width: 16px; height: 16px; margin-left: 6px; }
.cr-arrow svg { display: block; width: 100%; height: 100%; }
.cr-inv__grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px;
  align-content: start; overflow: auto; flex: 1; min-height: 0; scrollbar-width: thin;
}
.cr-inv__grid:empty { display: none; }
/* Карточка предмета переехала в home.css: тот же вид нужен в панели
   ставки других игр, а crash.css подключён только здесь. */
/* скин дешевле минимальной ставки — погашен (crash.view.js invItem):
   нажатие только пишет причину строкой, выбора нет */
/* погашены картинка и цена, а не вся карточка: надпись «Мин. ставка»
   поверх картинки должна читаться */
.cr-item.is-low { cursor: not-allowed; }
.cr-item.is-low > img, .cr-item.is-low > b { opacity: .38; filter: grayscale(.7); }
.cr-item__min {
  position: absolute; top: 6px; left: 50%; z-index: 2; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 4px; max-width: calc(100% - 8px);
  padding: 3px 8px 3px 6px; border-radius: 999px;
  background: linear-gradient(180deg, rgba(52, 40, 98, .94), rgba(30, 22, 60, .94));
  box-shadow: inset 0 0 0 1px rgba(196, 107, 255, .5), 0 4px 12px rgba(6, 2, 20, .45);
  color: #EADFFF; font-family: var(--f-cond); font-style: normal; font-size: 10px; font-weight: 600;
  letter-spacing: .05em; line-height: 1; text-transform: uppercase; white-space: nowrap; overflow: hidden;
  pointer-events: none;
}
.cr-item__min svg { flex: none; width: 9px; height: 9px; color: #C46BFF; }
/* карточка уже 112 px (телефон: ~92) — «Мин. 10», иначе «Мин. ставка 10» */
.cr-item.is-low { container-type: inline-size; }
@container (max-width: 111px) { .cr-item__min-w { display: none; } }
.cr-item__min .kz-cur { width: .95em; height: .95em; margin: 0 .12em 0 .2em; vertical-align: -.12em; }
.cr-item.is-low:hover:not([disabled]) { border-color: var(--line); }
.cr-item.is-low:hover:not([disabled]) img { transform: none; }

/* ── игровое поле ───────────────────────────────────────────────────── */

/* Скруглённый блок под цвет сцены: сверху небо картинки, снизу её пол.
   Пока 3D грузится, виден этот градиент; сцена перекрывает его целиком. */
.cr-game {
  position: relative; flex: 1; min-width: 0; overflow: hidden; isolation: isolate;
  border: 1px solid var(--scene-line); border-radius: var(--radius);
  background: linear-gradient(180deg, var(--sky) 0%, var(--sky-deep) 62%, var(--ground) 100%);
}
.cr-scene { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.cr-scene::before {                       /* с ростом множителя поле теплеет лаймом снизу */
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(70% 55% at 50% 100%, color-mix(in srgb, var(--gold) 30%, transparent), transparent 70%);
  opacity: calc(var(--heat) * .5); transition: opacity .4s;
}
.cr-canvas { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; pointer-events: none; display: block; }
/* в 3D предмет летит гранатой — подиум и пузыри 2D-режима не нужны */
.cr-panel.is-3d .cr-scene::before { display: none; }
/* лёгкая виньетка по краям поля, чтобы интерфейс читался на сцене */
.cr-game::after {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(0,0,0,.35), transparent 22%, transparent 78%, rgba(0,0,0,.35));
}

/* Забор: выведенная сумма зелёным всплывает из центра поля и тает.
   Никаких колец и вспышек — только цифра. */
.cr-float {
  position: absolute; left: 50%; top: 42%; z-index: 6; transform: translate(-50%, -50%);
  font-family: 'Tomorrow', var(--f-cond), sans-serif; font-size: calc(3.4 * var(--u)); font-weight: 700; letter-spacing: .02em;
  color: var(--green); font-variant-numeric: tabular-nums;
  text-shadow: 0 2px 10px rgba(0,0,0,.7), 0 0 26px rgba(67, 217, 122, .55);
  pointer-events: none; animation: cr-float-up 1.6s cubic-bezier(.2,.8,.3,1) forwards;
}
@keyframes cr-float-up {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(.7); }
  18%  { opacity: 1; transform: translate(-50%, -50%) scale(1.12); }
  32%  { transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, calc(-50% - 9 * var(--u))) scale(1); }
}
.cr-pad, .cr-bubbles { display: none; }

/* банк и игроки: две плашки слева сверху */
.cr-stats { position: absolute; left: 12px; top: 12px; z-index: 3; display: flex; gap: 6px; }
.cr-stat {
  height: 44px; padding: 0 12px 0 10px;
  display: flex; align-items: center;
  border: 1px solid rgba(255, 255, 255, .08); border-radius: 10px; background: rgba(8, 12, 20, .62);
}
.cr-stat__ico { flex: none; width: 20px; height: 20px; opacity: .5; }
.cr-stat__ico svg { display: block; width: 100%; height: 100%; }
.cr-stat > div { margin-left: 8px; display: grid; min-width: 0; line-height: 1.15; }
.cr-stat b { font-family: var(--f-cond); font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cr-stat--bank b { color: var(--gold); }
.cr-stat span { font-family: var(--f-cond); font-size: 9.5px; letter-spacing: .13em; text-transform: uppercase; color: var(--text-mute); }

/* множитель */
.cr-timer {
  position: absolute; left: 50%; top: 14px; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; z-index: 3;
  white-space: nowrap;
}
.cr-timer__val {
  font-family: 'Tomorrow', var(--f-cond), sans-serif; font-size: calc(3.6 * var(--u)); line-height: 1.1;
  font-weight: 700; color: var(--gold); font-variant-numeric: tabular-nums;
  text-shadow: 0 2px 12px rgba(0,0,0,.6), 0 0 24px color-mix(in srgb, var(--gold) 35%, transparent);
  transition: color .25s;
}
.cr-timer__val.is-pop { animation: cr-mult-pop .5s cubic-bezier(.2,1.5,.4,1); }
@keyframes cr-mult-pop { 0% { transform: scale(1); } 40% { transform: scale(1.22); text-shadow: 0 0 40px var(--gold); } 100% { transform: scale(1); } }
.cr-mile {
  position: absolute; left: 50%; top: calc(6 * var(--u)); z-index: 6; transform: translateX(-50%);
  padding: 3px 10px; border-radius: 8px;
  background: var(--gold); color: #141500; font-family: var(--f-cond); font-size: 12px; font-weight: 700; letter-spacing: .08em;
  pointer-events: none; animation: cr-mile 1.4s ease-out forwards;
}
@keyframes cr-mile { 0% { opacity: 0; transform: translate(-50%, 6px) scale(.7); } 15% { opacity: 1; transform: translate(-50%, 0) scale(1.1); } 70% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -14px); } }
.cr-timer__cap {
  margin-top: 2px; font-family: var(--f-cond); font-size: 10px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--text-dim);
}
.cr-panel[data-phase="over"] .cr-timer__val { color: #FF5C5C; text-shadow: 0 2px 12px rgba(0,0,0,.6), 0 0 24px rgba(255,92,92,.5); }
.cr-panel[data-phase="over"] .cr-timer__cap { color: #FF9A9A; }
.cr-mine {
  margin-top: 8px; padding: 4px 10px; display: flex; align-items: center; gap: 2px;
  border: 1px solid rgba(255, 255, 255, .08); border-radius: 8px; background: rgba(8, 12, 20, .62);
}
.cr-mine em { font-style: normal; font-family: var(--f-cond); font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
.cr-mine em.is-win { color: var(--green); }
.cr-tri { width: 14px; height: 14px; opacity: .4; background: currentColor; color: #D9D9D9; clip-path: polygon(30% 20%, 75% 50%, 30% 80%); }
/* сумма и под ней невидимая тень из нулей в одной клетке: ширину держит
   тень, плашка не дёргается (см. putNum в crash.main.js) */
.cr-num { display: inline-grid; }
.cr-num > * { grid-area: 1 / 1; }
.cr-num__g { visibility: hidden; }

/* обрыв */
.cr-bust {
  position: absolute; inset: 0; z-index: 2;
  display: grid; place-content: center; text-align: center; gap: 2px;
  background: radial-gradient(60% 50% at 50% 50%, rgba(255,60,60,.22), transparent 70%);
  opacity: 0; pointer-events: none; transition: opacity .25s;
}
.cr-panel[data-phase="over"] .cr-bust { opacity: 1; }
.cr-bust b { font-family: 'Tomorrow', var(--f-cond), sans-serif; font-size: calc(4.4 * var(--u)); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #FF5C5C; text-shadow: 0 0 30px rgba(255,92,92,.6); }
.cr-bust span { font-family: 'Tomorrow', var(--f-cond), sans-serif; font-size: calc(2 * var(--u)); color: #FF9A9A; font-variant-numeric: tabular-nums; }

/* кто забрал: колонка справа */
.cr-outs {
  position: absolute; right: 12px; top: 66px; bottom: 54px; z-index: 2;   /* снизу — полоса истории */
  width: 220px; contain: size;
  display: flex; flex-direction: column; gap: 4px;
  overflow: hidden;
  -webkit-mask: linear-gradient(180deg, #000 80%, transparent); mask: linear-gradient(180deg, #000 80%, transparent);
}
.cr-out {
  position: relative; isolation: isolate; overflow: hidden;
  flex: none; height: 40px; padding: 0 8px;
  display: flex; align-items: center;
  border: 1px solid rgba(255, 255, 255, .07); border-radius: 9px; background: rgba(8, 12, 20, .62);
  animation: cr-in .3s cubic-bezier(.2, 1.3, .4, 1) both;
}
/* Кадр карты справа, влево сходит в ноль. Затухание маской, а не
   прозрачностью: под плиткой своя тёмная заливка, и приглушение
   прозрачностью подмешивало бы её к картинке. */
.cr-out::after {
  content: ''; position: absolute; right: 0; top: 0; bottom: 0; width: 62%;
  z-index: -1; pointer-events: none; border-radius: inherit;
  background: url("assets/row_bg2.webp") right center / cover no-repeat;
  opacity: .55;
  -webkit-mask: linear-gradient(to right, transparent, #000 60%);
          mask: linear-gradient(to right, transparent, #000 60%);
}
@keyframes cr-in { from { opacity: 0; transform: translateX(12px); } to { opacity: 1; transform: none; } }
.cr-out.is-me { border-color: color-mix(in srgb, var(--gold) 60%, transparent); }
.cr-ava {
  position: relative; flex: none; width: 26px; height: 26px;
  display: grid; place-items: center; border-radius: 8px;
  background: #000; color: #fff; font-style: normal; font-size: 11px; font-weight: 700;
}
.cr-out .cr-ava b {
  /* Свисал на 9px ниже аватара и заходил под следующую строку, а та
     рисуется поверх — множитель выглядел обрезанным. Теперь укладывается
     в высоту строки. */
  position: absolute; right: -8px; bottom: -4px;
  height: 14px; padding: 0 4px;
  display: flex; align-items: center; border-radius: 7px;
  background: var(--gold); color: #000; font-size: 9px; font-weight: 700; line-height: 1;
  transform: rotate(-3deg); white-space: nowrap;
}
/* Значок уровня (drophub.level.js) вместо буквы: шестиугольник в том же
   контейнере и того же размера; круг и фон контейнера снимает .is-lvl
   (вставляет компонент). Плашка множителя остаётся поверх, но ниже и
   тоньше, чем на букве: прежняя закрывала нижнюю половину цифр уровня.
   Значок для этого поднят на 3px — плашка не ложится на рамку строки. */
.cr-ava > .kz-lvl { --s: 26px; }
.cr-out .cr-ava.is-lvl { top: -3px; }
.cr-out .cr-ava.is-lvl b { z-index: 2; bottom: -7px; height: 12px; font-size: 8.5px; }
/* Круглое фото с висящим значком уровня (krazeLevel.player, has-pl):
   значок висит по центру низа, а плашка множителя на круге закрывала бы
   фото — она встаёт в поток справа от круга; круг поднят самим компонентом. */
.cr-out .cr-ava.has-pl { top: 0; width: auto; display: inline-flex; align-items: center; gap: 7px; }
.cr-out .cr-ava.has-pl b { position: static; z-index: auto; height: 14px; font-size: 9px; }
.cr-out .cr-ava.has-pl + .cr-out__ico { margin-left: 8px; }
.cr-out__ico { flex: none; width: 18px; height: 18px; margin-left: 10px; opacity: .5; }
.cr-out__ico svg { display: block; width: 100%; height: 100%; }
.cr-out__skin { flex: none; width: 46px; height: 24px; margin-left: 6px; object-fit: contain; }
.cr-out__name {
  margin-left: 6px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 11px; font-weight: 700; color: var(--gold);
}

/* наблюдение за игроком */
/* Стили наблюдения за игроком удалены вместе с самой возможностью:
   на кону показывается только своя ставка (см. crash.main.js). */


/* ── история ────────────────────────────────────────────────────────── */

/* Прошлые обрывы лежат по нижнему краю поля прямо на сцене: слева чипы,
   справа сводка. Отдельного блока под полем нет. */
.cr-history {
  position: absolute; left: 12px; right: 12px; bottom: 12px; z-index: 3;
  display: flex; align-items: center; gap: 10px;
}
.cr-history__scroll {
  position: relative; flex: 1; min-width: 0; overflow: hidden;
  -webkit-mask: linear-gradient(90deg, #000 88%, transparent); mask: linear-gradient(90deg, #000 88%, transparent);
}
.cr-history__list { display: flex; align-items: center; gap: 3px; height: 30px; }
.cr-history__list:empty::before { content: 'Пока нет раундов'; font-size: 11px; color: var(--text-mute); }
.cr-chip {
  flex: none; height: calc(3 * var(--u)); min-width: calc(5 * var(--u)); padding: 0 1px;
  display: flex; align-items: center; justify-content: center;
  border-radius: calc(1 * var(--u)); overflow: hidden; text-decoration: none;
}
.cr-chip > span {
  height: 100%; width: 100%; padding: 0 calc(1 * var(--u));
  display: flex; align-items: center; justify-content: center;
  border: 1px solid transparent; border-radius: calc(1 * var(--u));
  font-size: calc(1.2 * var(--u)); font-weight: 700; opacity: .8; font-variant-numeric: tabular-nums;
}
/* цвета — с референса: обрыв ниже 1.1 красный, до 2 синий, до 3 зелёный,
   до 5 фиолетовый, до 10 голубой, от 10 золотой с бликом */
.cr-chip--red    { background: linear-gradient(180deg, rgba(197,43,45,.22), rgba(228,74,27,.22)); color: #FC5A5A; }
.cr-chip--red    > span { border-color: rgba(255,96,58,.09); }
.cr-chip--blue   { background: linear-gradient(180deg, rgba(26,83,228,.5), rgba(34,130,255,.5)); color: #79C7FF; }
.cr-chip--blue   > span { border-color: rgba(119,189,255,.14); }
.cr-chip--green  { background: linear-gradient(180deg, #68C52B, #9DE136); color: #0A1409; }
.cr-chip--green  > span { border-color: rgba(181,255,124,.32); }
.cr-chip--purple { background: linear-gradient(180deg, #612BC5, #8C36E1); color: #0D0F17; }
.cr-chip--purple > span { border-color: rgba(183,124,255,.32); }
.cr-chip--cyan   { background: linear-gradient(180deg, #2B7FC5, #36A5E1); color: #0A1409; }
.cr-chip--cyan   > span { border-color: rgba(124,207,255,.32); }
.cr-chip--gold   { height: calc(3.2 * var(--u)); position: relative; background: linear-gradient(180deg, #B9DB00, var(--accent) 61%, #B5D000); color: #0A1409; }
.cr-chip--gold   > span { border-color: rgba(246,255,124,.55); }
.cr-chip--gold::after {
  content: ""; position: absolute; top: -1px; height: calc(100% + 2px); left: -80%; width: 80%;
  background: linear-gradient(to right, rgba(255,215,0,0), #FFEB82 35%, #FFF5B4, #FFEB82 65%, rgba(255,215,0,0));
  transform: skew(-15deg); filter: blur(4px) brightness(1.8); mix-blend-mode: screen; pointer-events: none;
  animation: cr-shine .8s ease-in-out infinite;
}
@keyframes cr-shine { 0% { left: -80%; } 100% { left: 180%; } }

/* ── ставки раунда ──────────────────────────────────────────────────── */

/* Ставки игроков лежат на том же дворе, что и сцена: та же картинка
   (assets/crash_bg.webp), та же рамка и скругление, что у игрового поля.
   Раньше это был список карточек прямо на фоне страницы — он висел в
   пустоте и не читался как часть игры. Заливка поверх картинки плотная:
   под карточками важна не сцена, а сами карточки. */
.cr-bets {
  margin-top: calc(2.4 * var(--u));
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(.8 * var(--u));
  align-content: start;
  max-height: calc(60 * var(--u)); overflow: auto;
  padding: calc(1.2 * var(--u)); scrollbar-width: thin;
  border: 1px solid var(--scene-line); border-radius: var(--radius);
  background:
    linear-gradient(180deg, rgba(13, 19, 30, .82) 0%, rgba(11, 16, 26, .9) 100%),
    url("assets/crash_bg.webp") center / cover no-repeat;
}
.cr-bets:empty { display: none; }
.cr-card {
  position: relative;
  height: calc(6.8 * var(--u)); padding: 0 calc(1.2 * var(--u));
  display: grid; grid-template-columns: 23% 25% minmax(0, 1fr) minmax(0, 1fr); align-items: center;
  border: 1px solid var(--line); border-radius: 12px; background: var(--panel);
  transition: background .25s, box-shadow .25s;
}
/* Подсветки — псевдоэлементом поверх, как у референса: своя карточка —
   белая рамка в режиме difference, выигрыш — золотая полупрозрачная. */
.cr-card::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; border: 2px solid transparent; transition: border-color .2s; }
.cr-card.is-me::after  { border-color: #fff; mix-blend-mode: difference; }
.cr-card.is-out::after { border-color: color-mix(in srgb, var(--gold) 52%, transparent); }
.cr-card.is-out.is-big::after { border-color: color-mix(in srgb, var(--gold) 70%, #fff); }
/* появление карточек в начале раунда — crashBetAnimation референса */
.cr-bets.is-fresh .cr-card { animation: cr-bet-in .35s both; }
@keyframes cr-bet-in { from { opacity: 0; transform: translateY(10%); } }
.cr-badge { transition: opacity .2s ease-out, border-color .2s ease-out, color .2s ease-out, background-color .2s ease-out; }
.cr-card.is-out { background: var(--panel-2); }
.cr-card.is-out.is-big { background: color-mix(in srgb, var(--gold) 55%, #2A2B12); box-shadow: 0 4px 14px rgba(0,0,0,.25); }
.cr-card.is-lost { opacity: .55; }
.cr-card__who { display: flex; align-items: center; gap: calc(.8 * var(--u)); min-width: 0; }
.cr-card__who .cr-ava { width: calc(4.4 * var(--u)); height: calc(4.4 * var(--u)); border-radius: calc(1 * var(--u)); font-size: calc(1.6 * var(--u)); }
.cr-card__who .cr-ava > .kz-lvl { --s: calc(4.4 * var(--u)); }
.cr-card__who > span { display: grid; min-width: 0; gap: calc(.2 * var(--u)); }
.cr-card__who b { font-size: calc(1.2 * var(--u)); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cr-card__who u { text-decoration: none; display: flex; align-items: center; gap: calc(.3 * var(--u)); font-size: calc(1.3 * var(--u)); font-weight: 700; color: var(--gold-soft); font-variant-numeric: tabular-nums; }
.cr-card.is-out.is-big .cr-card__who u { color: #1D1C09; }
.cr-card.is-out.is-big .cr-card__who b { color: #2A2914; }
.cr-card__art { display: flex; align-items: center; }
.cr-card__art img { width: calc(6.7 * var(--u)); height: calc(5 * var(--u)); object-fit: contain; filter: drop-shadow(0 3px 6px rgba(0,0,0,.6)); }
.cr-card__art img + img { margin-left: calc(-.6 * var(--u)); }
.cr-card__mid { display: flex; align-items: center; gap: calc(.8 * var(--u)); }
.cr-badge {
  flex: none; width: calc(9 * var(--u)); height: calc(3.6 * var(--u));
  display: inline-flex; align-items: center; justify-content: center; gap: calc(.3 * var(--u));
  border-radius: calc(1 * var(--u)); border: 1px solid transparent;
  font-size: calc(1.2 * var(--u)); font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.cr-badge--wait { background: rgba(255, 255, 255, .08); color: #9AA3B5; }
.cr-badge--lost { background: rgba(252, 90, 90, .16); color: #FC5A5A; }
.cr-badge--x    { background: #6DEA5D; color: #153C17; }
.cr-badge--sum  { background: transparent; border-color: rgba(106, 232, 94, .5); color: #6DEA5D; font-size: calc(1.3 * var(--u)); }
.cr-card.is-big .cr-badge--x   { background: #D5C33C; color: #372E13; }
.cr-card.is-big .cr-badge--sum { background: rgba(255,255,255,.6); border-color: rgba(255,255,255,.5); color: #1D1C09; }
.cr-card__win { justify-self: end; display: flex; align-items: center; }
.cr-card__win img { width: calc(5.9 * var(--u)); height: calc(4.4 * var(--u)); object-fit: contain; filter: drop-shadow(0 3px 6px rgba(0,0,0,.6)); }

/* ── о режиме ───────────────────────────────────────────────────────── */

.cr-about { margin-top: calc(4.8 * var(--u)); color: var(--text-mute); }
.cr-about h2 { margin: 0 0 calc(.8 * var(--u)); font-size: calc(1.6 * var(--u)); font-weight: 700; color: #C9CBD1; }
.cr-about p { margin: 0; font-size: calc(1.2 * var(--u)); line-height: 1.55; }

/* ── адаптив ────────────────────────────────────────────────────────── */

@media (max-width: 980px) {
  .cr-page { --u: 8px; }
  .cr-row { flex-direction: column; height: auto; min-height: 0; }
  .cr-side { width: auto; }
  .cr-game { min-height: 420px; }
  .cr-outs { width: 170px; }
  .cr-bets { grid-template-columns: 1fr; max-height: none; }
}
@media (max-width: 600px) {
  .cr-card { grid-template-columns: 30% 24% minmax(0, 1fr) auto; }
  .cr-outs { display: none; }
}

/* ── Монеты сверх скина на плите ── зелёным рядом с ценой ступени */
.cr-hero__plus { margin-left: 4px; font-size: 14px; color: var(--green); white-space: nowrap; }
.cr-hero__plus[hidden] { display: none; }

/* ── Итог ставки ── карточка по центру поля: всплывает, держится, гаснет.
   Поверх «Обрыва» (z 2) и вех (z 6), под ничем: пока она видна, смотреть
   больше не на что. Фон почти глухой — под ней сцена и красная вспышка. */
.cr-result {
  position: absolute; left: 50%; top: 46%; z-index: 7; transform: translate(-50%, -50%);
  width: min(82%, 320px); display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 12px; align-items: center;
  padding: 12px 16px 12px 12px; border-radius: 14px;
  background: rgba(8, 10, 16, .9); border: 1px solid rgba(255,255,255,.1);
  box-shadow: 0 18px 44px rgba(0,0,0,.55);
  pointer-events: none; animation: cr-result 3s ease both;
}
.cr-result[hidden] { display: none; }
.cr-result.is-won { border-color: color-mix(in srgb, var(--green) 45%, rgba(255,255,255,.1)); }
.cr-result.is-lost { border-color: rgba(255, 92, 92, .45); }
.cr-result__img { width: 76px; height: 54px; object-fit: contain; display: block; filter: drop-shadow(0 6px 10px rgba(0,0,0,.6)); }
.cr-result.is-lost .cr-result__img { filter: grayscale(1) brightness(.6); }
.cr-result__meta { display: grid; gap: 3px; min-width: 0; }
.cr-result__t { font-family: var(--f-cond); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--green); }
.cr-result.is-lost .cr-result__t { color: #FF5C5C; }
.cr-result__n { font-size: 13px; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cr-result__sum {
  display: flex; align-items: center; gap: 5px; font-family: var(--f-cond); font-size: 17px; font-weight: 600;
  color: var(--gold); font-variant-numeric: tabular-nums;
}
.cr-result__sum em { font-style: normal; color: var(--green); }
.cr-result.is-lost .cr-result__sum { color: #FF9A9A; }
@keyframes cr-result {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(.86); }
  12%  { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  80%  { opacity: 1; transform: translate(-50%, -50%); }
  100% { opacity: 0; transform: translate(-50%, calc(-50% - 12px)); }
}

/* ── Обрыв без дублей ──
   Число обрыва пишет счётчик наверху (красным), слово — большая плашка по
   центру. Раньше и число, и слово стояли в обоих местах — на телефоне они
   ещё и наезжали друг на друга. */
.cr-bust span { display: none; }
.cr-panel[data-phase="over"] .cr-timer__cap { display: none; }

@media (prefers-reduced-motion: reduce) {
  .cr-chip--gold::after, .cr-state.is-cash, .cr-out, .cr-hero__gl, .cr-hero, .cr-card, .cr-result { animation: none; }
  .cr-hero__art.is-glitch .cr-hero__gl, .cr-hero__art.is-up .cr-hero__gl { display: none; }
  .cr-hero__art.is-glitch #cr-hero-img, .cr-hero__art.is-up #cr-hero-img { animation: none; }
  .cr-hero__art.is-up:not(.is-glitch) #cr-hero-img { opacity: 1; transform: none; }
}

/* ═══════════════ СТАВКИ ИГРОКОВ: ЦВЕТА РЕФЕРЕНСА ═══════════════
   Возвращены токены 12cs, снятые с сохранённой копии: ряды dark-250
   #192148 и dark-300 #202956 через один, ставка золотистым #FFDB95,
   чип «в игре» rgba(54,70,128,.7) с текстом light-300 #9CB3ED, чип
   выигрыша #6DEA5D на #153C17, крупный выигрыш — ряд rgba(255,196,35,.6)
   с чипом #D5C33C/#372E13. Рамка только у своей ставки и у крупного
   выигрыша, как там. Раскладка и размеры не тронуты. */
.cr-card { background: #192148; border: 0; }
.cr-card:nth-child(even) { background: #202956; }
.cr-card.is-out { background: #192148; }
.cr-card:nth-child(even).is-out { background: #202956; }
.cr-card.is-out.is-big, .cr-card:nth-child(even).is-out.is-big {
  background: rgba(255, 196, 35, .6); box-shadow: 0 4px 14px rgba(129, 22, 32, .15);
}
.cr-card.is-out::after { border-color: transparent; }
.cr-card.is-out.is-big::after { border-color: rgba(255, 224, 140, .85); }
.cr-card.is-me::after { border-color: #fff; mix-blend-mode: normal; opacity: .9; }
.cr-card__who .cr-ava { background: #2A3466; color: #DCE4FF; border-radius: calc(.8 * var(--u)); }
.cr-card__who b { color: #fff; }
.cr-card__who u { color: #FFDB95; }
.cr-badge--wait { background: rgba(54, 70, 128, .7); color: #9CB3ED; }
.cr-badge--lost { background: rgba(54, 70, 128, .45); color: #9CB3ED; opacity: .8; }
.cr-badge--x    { background: #6DEA5D; color: #153C17; }
.cr-badge--sum  { border-color: rgba(109, 234, 93, .5); color: #6DEA5D; }
.cr-card.is-big .cr-badge--x   { background: #D5C33C; color: #372E13; }
.cr-card.is-big .cr-badge--sum { background: rgba(255,255,255,.6); border-color: rgba(255,255,255,.5); color: #1D1C09; }
.cr-card.is-out.is-big .cr-card__who u, .cr-card.is-out.is-big .cr-card__who b { color: #1D1C09; }

/* ═══════════════ …И В НАШИХ ЦВЕТАХ ═══════════════
   Та же схема, что у референса (два тона рядов через один, чип «в игре»,
   зелёный чип выигрыша, залитый ряд крупного выигрыша), но на нашей
   палитре: графит вместо синего, фиолет для ожидания, зелёный кнопок
   сайта для выигрыша, лайм для крупного выигрыша и суммы ставки. */
/* Подложка ряда — та же, что у строк «забрали» в окне анимации (.cr-out):
   полупрозрачная тёмная с тонкой светлой кромкой. Глухие #131418/#191B21
   делали ставки внизу отдельным списком другого вида, хотя это те же
   игроки и те же ставки, что показаны на сцене. */
/* .gm-body в селекторе обязателен: общее правило панелей в games.css
   (.gm-body .cr-card) весит больше одного класса и держало карточку
   глухой var(--panel), сколько бы ниже ни стояло это правило. */
.gm-body .cr-bets .cr-card,
.gm-body .cr-bets .cr-card:nth-child(even),
.gm-body .cr-bets .cr-card.is-out,
.gm-body .cr-bets .cr-card:nth-child(even).is-out {
  background: rgba(8, 12, 20, .62);
  border: 1px solid rgba(255, 255, 255, .07);
  box-shadow: none;
}
/* крупный выигрыш остаётся залитым — это отдельный сигнал */
.gm-body .cr-bets .cr-card.is-out.is-big {
  background: color-mix(in srgb, var(--accent) 58%, #23250E);
}
.cr-card.is-out.is-big, .cr-card:nth-child(even).is-out.is-big {
  background: color-mix(in srgb, var(--accent) 58%, #23250E); box-shadow: 0 4px 14px rgba(0, 0, 0, .3);
}
.cr-card.is-out.is-big::after { border-color: color-mix(in srgb, var(--accent) 80%, #fff); }
.cr-card__who .cr-ava { background: #24262C; color: var(--text); }
.cr-card__who u { color: var(--gold-soft, #EEFF9C); }
.cr-badge--wait { background: rgba(138, 61, 255, .22); color: #C9A9FF; }
.cr-badge--lost { background: rgba(255, 92, 92, .14); color: #FF7A7A; opacity: 1; }
.cr-badge--x    { background: var(--green, #43D97A); color: #08110B; }
.cr-badge--sum  { border-color: rgba(67, 217, 122, .55); color: var(--green, #43D97A); }
.cr-card.is-big .cr-badge--x   { background: var(--accent); color: #1D1C09; }
.cr-card.is-big .cr-badge--sum { background: rgba(255,255,255,.62); border-color: rgba(255,255,255,.5); color: #1D1C09; }
.cr-card.is-out.is-big .cr-card__who u, .cr-card.is-out.is-big .cr-card__who b { color: #1D1C09; }

/* Забравшие подсвечены, как у референса (.border-highlight-won): рамка
   2 px и мягкая тень; у крупного выигрыша рамка светлее. В наших цветах:
   лайм вместо янтаря. */
.cr-card.is-out::after {
  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
  box-shadow: 0 4px 14px rgba(0, 0, 0, .25), 0 0 0 1px color-mix(in srgb, var(--accent) 18%, transparent);
}
.cr-card.is-out.is-big::after { border-color: color-mix(in srgb, var(--accent) 85%, #fff); }

/* ── Кадр зала в строке ставки ──
   Правая половина строки, влево сходит в ноль.

   Затухание сделано маской, а не полупрозрачной картинкой: под строкой
   лежит своя тёмная заливка, и приглушать кадр прозрачностью значило бы
   подмешивать к нему эту заливку — картинка становилась грязно-серой.
   Маска убирает пиксели совсем, и слева остаётся чистый фон строки.

   z-index: -1 кладёт кадр под аватар, имя и кнопку, но над заливкой;
   isolation на строке не даёт ему уехать под неё. */
.cr-bets .cr-card { position: relative; isolation: isolate; overflow: hidden; }
/* Кадр тот же, что у строк в окне анимации (row_bg2.webp, .cr-out::after):
   те же ширина, прозрачность и маска. Раньше здесь стоял row_bg.webp —
   жёлто-зелёный, и ставки внизу выглядели не так, как те же ставки на
   сцене. */
.cr-bets .cr-card::before {
  content: ''; position: absolute; right: 0; top: 0; bottom: 0; width: 62%;
  z-index: -1; pointer-events: none; border-radius: inherit;
  background: url("assets/row_bg2.webp") right center / cover no-repeat;
  opacity: .55;
  -webkit-mask: linear-gradient(to right, transparent, #000 60%);
          mask: linear-gradient(to right, transparent, #000 60%);
}