/* ==========================================================================
   DropHub Battles — лобби (bt-) и страница битвы (ba-)

   Продолжение home.css: те же токены, чёрная база, лаймовый акцент.

   ---------- СТРУКТУРА ПО РЕФЕРЕНСУ ----------

   Снято с сохранённой копии CSGORoll › Case Battles (1440): колонка списка
   1047px + правая панель фильтров 283px; строка битвы — полоска-шапка 33px
   (8/20 внутри, скругление сверху), тело с отступом 12px: лента плиток
   кейсов 90×90 с зазором 5 на подложке, справа колонка 280px с аватарами
   (24px, зазор 4) и кнопкой 44px. Цвета — наши: панели #15161B/#0F1011,
   акцент лаймовый, «вход» золотой.
   ========================================================================== */

.bt-body .kz-gbar { display: none; }
html, body { overflow-x: clip; }
/* hidden сильнее собственного display у кнопок и панелей */
.bt-body [hidden] { display: none !important; }
/* монета в тексте — размером с букву; где нужно крупнее, задаётся ниже.
   Значок баланса в шапке под это правило попадать не должен: там своя
   рамка 24px, и монета в 1em висела в ней мелкой и не по центру. */
.bt-body .kz-coin-img { width: 1em; height: 1em; vertical-align: -.15em; }
.bt-body .kz-balance__coin .kz-coin-img { width: 100%; height: 100%; vertical-align: baseline; }
.bt-btn .kz-coin-img { width: 15px; height: 15px; }

.bt-page, .ba-page {
  /* Палитра и радиусы — со страницы кейса (cases.css). Раздел открывают
     сразу после открытия кейсов, и раньше он выглядел как другой сайт:
     панели серые, кнопки жёлтые, скругления мельче. */
  /* Тот же язык, что у HiLo и рулетки: полупрозрачные блоки без
     обводок, глянцевые плитки-кнопки, лаймовый акцент. Синяя палитра со
     страницы кейса убрана — раздел выглядел чужим. */
  --cs-ink: #0A0C11;
  --cs-panel: rgba(8, 10, 16, .55);
  --cs-edge: transparent;
  --cs-btn: rgba(255, 255, 255, .06);
  --cs-btn-dim: rgba(8, 10, 16, .55);
  --cs-btn-hi: rgba(255, 255, 255, .1);
  --cs-text-dim: var(--text-mute);
  --cs-green: #2E9E3F;
  --gloss: linear-gradient(180deg, rgba(255,255,255,.14) 0%, rgba(255,255,255,.04) 38%, rgba(0,0,0,.08) 52%, rgba(0,0,0,.28) 100%);
  --lime-tile: #B9C41B;
}

.bt-page {
  --side: 300px;
  position: relative;
  max-width: var(--shell); margin: 0 auto;
  padding: 22px var(--pad-x) 56px;
  display: grid; grid-template-columns: minmax(0, 1fr) var(--side); gap: 0 24px;
  align-items: start;
  transition: grid-template-columns .32s cubic-bezier(.4, 0, .2, 1);
}
.bt-page.is-folded { grid-template-columns: minmax(0, 1fr) 0px; gap: 0; }
.bt-col-main { min-width: 0; display: flex; flex-direction: column; gap: 16px; }

/* ═══════════════ ЗАГОЛОВОК ═══════════════ */

.bt-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 48px; }
.bt-title { display: flex; align-items: center; gap: 12px; }
/* Значок без плашки и заголовок обычного размера — как в шапке рулетки.
   Жёлтый градиентный квадрат с тенью и крупные прописные буквы делали из
   названия раздела баннер: он весил больше, чем список битв под ним. */
.bt-title__badge { width: 34px; height: 34px; display: grid; place-items: center; flex: none; background: none; }
.bt-title__badge svg { width: 26px; height: 26px; display: block; }
/* значок игры — тот же, что в меню игр и на главной (assets/games/battles.webp) */
.bt-title__badge img { width: 100%; height: 100%; object-fit: contain; display: block; }
.bt-title h1 { margin: 0; font-family: var(--f-cond); font-size: 18px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.bt-top__tools { display: flex; align-items: center; gap: 14px; }

/* кнопки */
.bt-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 44px; padding: 0 18px; border-radius: 9px; border: 0; cursor: pointer;
  font: inherit; font-size: 13px; font-weight: 700; letter-spacing: .02em; color: var(--text); text-decoration: none;
  background: var(--cs-btn); white-space: nowrap;
  transition: background-color .14s, color .14s, transform .12s, box-shadow .14s;
}
.bt-btn svg { width: 16px; height: 16px; display: block; }
.bt-btn:hover { background: var(--cs-btn-hi); }
.bt-btn:disabled { opacity: .45; cursor: default; }
.bt-btn--create {
  height: 48px; padding: 0 28px; border-radius: 11px;
  background: var(--gloss), var(--lime-tile); color: #0E1102;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), inset 0 -1px 0 rgba(0,0,0,.3), 0 10px 22px -12px var(--lime-tile);
  font-family: var(--f-cond); font-size: 14px; letter-spacing: .08em; text-transform: uppercase;
}
.bt-btn--create:hover { filter: brightness(1.08); background: var(--gloss), var(--lime-tile); }
/* Вход в чужую битву — не главное действие страницы, а одна строка из
   списка. Сплошная зелёная заливка растягивалась на всю ширину строки и
   перекрикивала сами кейсы. Приглушённый вариант — как «Продать всё» на
   странице кейса: та же зелень, но заливкой в 14 %. Сплошной зелёной
   осталась только «Создать битву», она здесь одна главная. */
.bt-btn--join {
  border-radius: 11px; background: var(--gloss), var(--cs-green); color: #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), inset 0 -1px 0 rgba(0,0,0,.3), 0 10px 22px -12px var(--cs-green);
  font-family: var(--f-cond); font-size: 14px; letter-spacing: .06em; text-transform: uppercase;
}
.bt-btn--join:hover { filter: brightness(1.08); background: var(--gloss), var(--cs-green); }
.bt-btn--watch { border-radius: 11px; background: rgba(255, 255, 255, .06); font-family: var(--f-cond); font-size: 14px; letter-spacing: .06em; text-transform: uppercase; }
.bt-btn--watch:hover { background: rgba(255, 255, 255, .1); }
.bt-btn--join b, .bt-btn--create b { display: inline-flex; align-items: center; gap: 4px; font-weight: 800; }
.bt-btn--watch.is-done { color: var(--text-mute); }
.bt-btn--bot { background: rgba(138, 61, 255, .22); color: #D3B8FF; }
.bt-btn--bot:hover { background: rgba(138, 61, 255, .34); }

.bt-iconbtn {
  width: 48px; height: 48px; display: grid; place-items: center; flex: none;
  border-radius: 12px; border: 0; background: var(--cs-btn-dim);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  color: var(--cs-text-dim); cursor: pointer; transition: background-color .14s, color .14s;
}
.bt-iconbtn:hover { background: var(--cs-btn-hi); color: #fff; }
.bt-iconbtn svg, .bt-iconbtn i { width: 18px; height: 18px; display: block; }
.bt-iconbtn--filters { display: none; }
.bt-page.is-folded .bt-iconbtn--filters { display: grid; }

/* иконки режимов */
.bt-ico { display: inline-grid; place-items: center; width: 16px; height: 16px; color: var(--text); }
.bt-ico svg { width: 100%; height: 100%; display: block; }
.bt-ico--shared { color: #7EC8FF; }
.bt-ico--fast { color: var(--accent); }

/* ═══════════════ СПИСОК ═══════════════ */

.bt-list { display: flex; flex-direction: column; gap: 16px; }
.bt-empty { padding: 60px 0; text-align: center; color: var(--text-mute); font-size: 14px; }

.bt-row {
  position: relative; border-radius: 14px; background: var(--cs-panel);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  border: 1px solid transparent;
  transition: background-color .14s, border-color .14s;
}
.bt-row:hover { background: rgba(14, 17, 26, .62); }
.bt-row:has(.bt-row__actions:hover) { background: var(--cs-panel); }
.bt-row.is-mine { border-color: color-mix(in srgb, var(--accent) 35%, transparent); }
.bt-row__link { position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.bt-row__head, .bt-row__body { position: relative; z-index: 2; pointer-events: none; }
.bt-row__actions, .bt-tile { pointer-events: auto; }

.bt-row__head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  height: 34px; padding: 0 20px; border-radius: 13px 13px 0 0;
  background: rgba(255, 255, 255, .04);
  font-size: 12px; font-weight: 600;
}
.bt-row__stats { display: flex; align-items: center; }
.bt-stat {
  display: inline-flex; align-items: center; gap: 7px; padding: 0 12px;
  border-right: 1px solid rgba(255, 255, 255, .08);
  font-variant-numeric: tabular-nums;
}
.bt-stat:first-child { padding-left: 0; }
.bt-stat svg { width: 14px; height: 14px; display: block; color: var(--text); }
.bt-stat b { font-weight: 700; }
.bt-stat--price b { color: var(--text); }
.bt-stat .kz-coin-img { width: 14px; height: 14px; }
.bt-row__unboxed { color: var(--accent); }
.bt-row__unboxed b { display: inline-flex; align-items: center; gap: 4px; color: var(--text); font-weight: 700; }
.bt-row__unboxed .kz-coin-img { width: 14px; height: 14px; }
.bt-row__wait { color: var(--text); font-weight: 500; }
.bt-row__wait b { color: var(--accent); }

.bt-row__body { display: flex; gap: 20px; padding: 12px; }
.bt-row__cases { flex: 1; min-width: 0; }
.bt-cases {
  display: flex; gap: 5px; padding: 5px; overflow-x: auto; scrollbar-width: none;
  border-radius: 8px; background: rgba(0, 0, 0, .28);
  -webkit-mask: linear-gradient(90deg, #000 calc(100% - 40px), transparent);
          mask: linear-gradient(90deg, #000 calc(100% - 40px), transparent);
}
.bt-cases::-webkit-scrollbar { display: none; }
.bt-tile {
  position: relative; flex: none; width: 90px; height: 90px; display: grid; place-items: center;
  border-radius: 8px; background: rgba(255, 255, 255, .04); border: 1px solid transparent;
  transition: border-color .14s;
}
.bt-tile img { width: 72px; height: 72px; object-fit: contain; display: block; mix-blend-mode: screen; }
.bt-tile.is-past { opacity: .45; }
.bt-tile.is-now { border-color: var(--accent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent), 0 0 18px color-mix(in srgb, var(--accent) 22%, transparent); }

.bt-row__side { flex: none; width: 280px; display: flex; flex-direction: column; }
.bt-seats { display: flex; align-items: center; justify-content: center; gap: 6px; height: 32px; }
.bt-team { display: inline-flex; align-items: center; gap: 4px; }
.bt-vs { display: inline-grid; place-items: center; width: 18px; height: 18px; color: var(--text-mute); }
.bt-vs .bt-ico { width: 14px; height: 14px; color: var(--text-mute); }
/* Обесцвечивание берётся из общего .ba-x__logo — здесь только размер:
   между аватарами значок мельче, чем на стыке дорожек. */
.bt-vs .ba-x__logo { width: 18px; height: 18px; object-fit: contain; }
.bt-row__actions { margin-top: 16px; }
.bt-row__actions .bt-btn { width: 100%; }
/* «Войти за …» + глаз «Смотреть» одной строкой: вход тянется, глаз квадратный */
.bt-row__actions:has(.bt-btn--eye) { display: flex; gap: 8px; }
.bt-row__actions .bt-btn--join { flex: 1 1 auto; min-width: 0; }
.bt-row__actions .bt-btn--eye { flex: none; width: auto; aspect-ratio: 1; padding: 0; }
.bt-row__actions .bt-btn--eye svg { width: 20px; height: 20px; }

/* аватар: буква на цветном круге; свой — лаймовое кольцо */
.bt-ava {
  --h: 200;
  display: inline-grid; place-items: center; flex: none;
  width: 28px; height: 28px; border-radius: 50%;
  background: linear-gradient(160deg, hsl(var(--h) 60% 52%), hsl(var(--h) 60% 30%));
  color: #fff; font-size: 12px; font-weight: 800; font-style: normal; line-height: 1;
  box-shadow: 0 0 0 2px #0D0F14, 0 0 0 3px rgba(255, 255, 255, .08);
}
.bt-ava.is-me { box-shadow: 0 0 0 2px #0D0F14, 0 0 0 4px var(--accent); }
.bt-ava--empty { background: #2A2D35; border: 1px dashed rgba(255, 255, 255, .2); box-shadow: none; }
.bt-ava--lg { width: 44px; height: 44px; font-size: 18px; }

/* ═══════════════ ФИЛЬТРЫ ═══════════════ */

.bt-filters {
  position: sticky; top: 80px;
  width: var(--side); display: flex; flex-direction: column; gap: 12px;
  transition: transform .32s cubic-bezier(.4, 0, .2, 1), opacity .25s;
}
.bt-page.is-folded .bt-filters { transform: translateX(calc(100% + 60px)); opacity: 0; pointer-events: none; }
.bt-filters__head { display: flex; align-items: center; justify-content: space-between; height: 48px; }
.bt-filters__head > span { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.bt-filters__head i { width: 18px; height: 18px; display: block; }
.bt-filters__head i svg { width: 100%; height: 100%; }
.bt-filters__head .bt-iconbtn { width: 40px; height: 40px; }
.bt-filters__head .bt-iconbtn svg { transform: rotate(-90deg); }

.bt-seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 6px; }
.bt-seg button {
  height: 48px; border-radius: 10px; border: 0; background: var(--cs-panel);
  color: var(--text-mute); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
  transition: background-color .14s, color .14s, box-shadow .14s;
}
.bt-seg button:hover { color: var(--text); background: rgba(14, 17, 26, .7); }
.bt-seg button.is-on {
  background: var(--gloss), var(--lime-tile); color: #0E1102;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), inset 0 -1px 0 rgba(0,0,0,.3);
}
.bt-seg--3 button { height: 40px; font-size: 12px; background: rgba(255, 255, 255, .05); }
.bt-seg--3 button.is-on { background: var(--gloss), var(--lime-tile); }

.bt-field {
  position: relative; display: flex; align-items: center; gap: 8px;
  height: 48px; padding: 0 6px 0 12px; border-radius: 10px; border: 0; background: var(--cs-panel);
}
.bt-field__coin { width: 16px; height: 16px; flex: none; border-radius: 50%; background: url(assets/coin-64.png) center/contain no-repeat; }
.bt-field input { flex: 1; min-width: 0; height: 100%; border: 0; background: none; color: var(--text); font: inherit; font-family: var(--f-cond); font-size: 15px; font-weight: 700; outline: none; font-variant-numeric: tabular-nums; }
.bt-field input::placeholder { color: var(--text-mute); }
.bt-field button {
  height: 32px; padding: 0 12px; border-radius: 7px; border: 1px solid var(--line); background: rgba(255, 255, 255, .05); color: var(--text-mute);
  font: inherit; font-family: var(--f-cond); font-size: 11px; font-weight: 700; letter-spacing: .08em; cursor: pointer;
  transition: color .14s, border-color .14s;
}
.bt-field button:hover { color: var(--text); border-color: var(--text-mute); }

.bt-select { position: relative; display: block; }
.bt-select__btn {
  width: 100%; height: 48px; padding: 0 40px 0 14px; border-radius: 10px;
  border: 0; background: var(--cs-btn-dim); color: var(--text);
  font: inherit; font-size: 12px; font-weight: 600; text-align: left;
  cursor: pointer; outline: none; transition: background-color .14s, border-color .14s;
}
.bt-select__btn:hover, .bt-select.is-open .bt-select__btn { background: rgba(14, 17, 26, .7); }
/* стрелка: вниз в покое, вверх у раскрытого */
.bt-select__btn i {
  position: absolute; right: 16px; top: 50%; width: 8px; height: 8px; pointer-events: none;
  border-right: 2px solid var(--cs-text-dim); border-bottom: 2px solid var(--cs-text-dim);
  transform: translateY(-70%) rotate(45deg); transition: transform .16s;
}
.bt-select.is-open .bt-select__btn i { transform: translateY(-20%) rotate(-135deg); }

.bt-select__list {
  position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 40;
  padding: 6px; border-radius: 12px;
  background: rgba(12, 14, 20, .96); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  box-shadow: 0 14px 34px rgba(0, 0, 0, .55);
}
.bt-select__list button {
  display: block; width: 100%; text-align: left;
  height: 38px; padding: 0 12px; border: 0; border-radius: 8px; cursor: pointer;
  background: transparent; color: var(--cs-text-dim);
  font: inherit; font-size: 12px; font-weight: 600;
  transition: background-color .12s, color .12s;
}
.bt-select__list button:hover { background: var(--cs-btn); color: #fff; }
.bt-select__list button.is-on { background: var(--gloss), var(--lime-tile); color: #0E1102; }

.bt-fbox { display: flex; flex-direction: column; gap: 8px; padding: 14px; border-radius: 12px; background: var(--cs-panel); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.bt-fbox--plain { gap: 18px; }
.bt-fbox__t { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text); }
.bt-toggles { display: flex; flex-direction: column; }
.bt-toggle {
  display: flex; align-items: center; gap: 12px; height: 44px; padding: 0 12px; border-radius: 6px;
  font-size: 13px; cursor: pointer; transition: background-color .14s;
}
.bt-toggle:hover { background: var(--panel-3); }
.bt-toggle__ico { width: 20px; height: 20px; display: grid; place-items: center; color: var(--text); }
.bt-toggle__ico svg { width: 18px; height: 18px; }
.bt-toggle > span:nth-child(2) { flex: 1; }
.bt-toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
.bt-toggle i {
  position: relative; width: 40px; height: 20px; border-radius: 10px; flex: none;
  background: #2A2D35; border: 1px solid rgba(255, 255, 255, .08); transition: background-color .16s;
}
.bt-toggle i::after {
  content: ''; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%;
  background: #8C939B; transition: transform .16s, background-color .16s;
}
.bt-toggle input:checked ~ i { background: color-mix(in srgb, var(--lime) 30%, var(--cs-btn)); border-color: color-mix(in srgb, var(--lime) 60%, transparent); }
.bt-toggle input:checked ~ i::after { transform: translateX(20px); background: var(--lime); }
.bt-opt { display: flex; flex-direction: column; gap: 10px; }
.bt-opt__t { display: inline-flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 600; }
.bt-opt__t i { width: 16px; height: 16px; display: block; }
.bt-opt__t i svg { width: 100%; height: 100%; display: block; }

/* ═══════════════ ОКНО СОЗДАНИЯ ═══════════════ */

body.bt-modal-open { overflow: hidden; }
.bt-modal {
  position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 24px;
  background: rgba(0, 0, 0, .7); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.bt-modal[hidden] { display: none; }
.bt-sheet {
  width: min(760px, 100%); max-height: calc(100vh - 48px); display: flex; flex-direction: column;
  border-radius: 16px; background: rgba(12, 14, 20, .96); border: 0;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .6);
  animation: bt-sheet-in .22s ease-out;
}
@keyframes bt-sheet-in { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }
.bt-sheet__head { display: flex; align-items: center; justify-content: space-between; height: 60px; padding: 0 12px 0 22px; border-bottom: 1px solid rgba(255, 255, 255, .06); }
.bt-sheet__head b { font-family: var(--f-cond); font-size: 18px; letter-spacing: .06em; text-transform: uppercase; }
.bt-sheet__head .bt-iconbtn { width: 38px; height: 38px; border: 0; background: none; }
.bt-sheet__body { flex: 1; min-height: 0; overflow: auto; padding: 14px 22px 18px; display: flex; flex-direction: column; gap: 14px; }
.bt-sheet__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 22px; border-top: 1px solid rgba(255, 255, 255, .06); }
.bt-sheet__sum { font-size: 13px; color: var(--text-mute); }
.bt-sheet__sum b { display: inline-flex; align-items: center; gap: 4px; margin-left: 6px; color: var(--text); font-size: 15px; }
.bt-sheet__foot .bt-btn--create { min-width: 240px; }

.bt-sec { display: flex; flex-direction: column; gap: 10px; }
.bt-lbl { display: flex; justify-content: space-between; align-items: baseline; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-mute); }
.bt-lbl i { font-style: normal; color: var(--accent); letter-spacing: 0; }
.bt-hint { margin: 0; font-size: 12px; color: var(--text-mute); }
.bt-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.bt-chip {
  display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 14px;
  border-radius: 9px; border: 0; background: rgba(255, 255, 255, .06);
  color: var(--text-mute); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
  transition: background-color .14s, color .14s, box-shadow .14s;
}
.bt-chip svg { width: 15px; height: 15px; display: block; }
.bt-chip:hover { color: var(--text); background: rgba(255, 255, 255, .1); }
.bt-chip.is-on { background: var(--gloss), var(--lime-tile); color: #0E1102; box-shadow: inset 0 1px 0 rgba(255,255,255,.18), inset 0 -1px 0 rgba(0,0,0,.3); }
.bt-chip.is-on svg { color: #0E1102; }

.bt-pick { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
/* Верх окна создания — компактно: состав и скорость в одну строку,
   кнопки ниже, коллекции одной прокручиваемой полосой. */
.bt-secrow { display: flex; flex-wrap: wrap; gap: 10px 28px; }
.bt-sheet .bt-sec { gap: 7px; }
.bt-sheet .bt-chips { gap: 5px; }
.bt-sheet .bt-chip { height: 30px; padding: 0 11px; gap: 5px; border-radius: 7px; font-size: 12px; }
.bt-sheet .bt-chip svg { width: 13px; height: 13px; }
#bt-c-cols { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-mask: linear-gradient(90deg, #000 calc(100% - 28px), transparent); mask: linear-gradient(90deg, #000 calc(100% - 28px), transparent); }
#bt-c-cols::-webkit-scrollbar { display: none; }
#bt-c-cols .bt-chip { flex: none; white-space: nowrap; }
.bt-picks { display: flex; flex-direction: column; gap: 18px; }
.bt-pickgroup { display: flex; flex-direction: column; gap: 10px; }
.bt-pickgroup[hidden] { display: none; }
.bt-pickgroup__title {
  display: flex; align-items: center; gap: 14px; margin: 0;
  font-size: 13px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--text);
}
.bt-pickgroup__title::before, .bt-pickgroup__title::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .16)); }
.bt-pickgroup__title::after { background: linear-gradient(90deg, rgba(255, 255, 255, .16), transparent); }
.bt-pickbox {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 10px 8px 8px; border-radius: 12px; border: 1px solid transparent; background: rgba(255, 255, 255, .05);
  text-align: center; cursor: pointer; transition: border-color .14s, background-color .14s;
}
.bt-pickbox:hover { background: rgba(255, 255, 255, .08); }
.bt-pickbox.is-on { border-color: var(--accent); background: linear-gradient(180deg, color-mix(in srgb, var(--tint) 22%, transparent), transparent 70%), rgba(255, 255, 255, .05); }
.bt-pickbox img { width: 100%; max-width: 96px; aspect-ratio: 1; object-fit: contain; display: block; mix-blend-mode: screen; }
.bt-pickbox b { font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.bt-pickbox u { display: inline-flex; align-items: center; gap: 3px; text-decoration: none; font-size: 12px; font-weight: 700; color: var(--money); }
.bt-pickbox .kz-coin-img { width: 12px; height: 12px; }
.bt-qty { display: flex; align-items: center; gap: 4px; margin-top: 4px; }
.bt-qty button { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 7px; border: 0; background: rgba(255, 255, 255, .08); color: var(--text); cursor: pointer; }
.bt-qty button:hover { background: rgba(255, 255, 255, .14); }
.bt-qty button svg { width: 12px; height: 12px; }
.bt-qty i { width: 24px; text-align: center; font-style: normal; font-size: 13px; font-weight: 800; }
.bt-switch { display: inline-flex; align-items: center; gap: 12px; cursor: pointer; font-size: 13px; font-weight: 600; }
.bt-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.bt-switch i { position: relative; width: 40px; height: 20px; border-radius: 10px; background: #2A2D35; border: 1px solid rgba(255, 255, 255, .08); transition: background-color .16s; }
.bt-switch i::after { content: ''; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #8C939B; transition: transform .16s, background-color .16s; }
.bt-switch input:checked ~ i { background: color-mix(in srgb, var(--accent) 30%, #2A2D35); }
.bt-switch input:checked ~ i::after { transform: translateX(20px); background: var(--accent); }
.bt-switch span { display: inline-flex; align-items: center; gap: 6px; }
.bt-switch span svg { width: 14px; height: 14px; color: var(--accent); }

/* ═══════════════ СТРАНИЦА БИТВЫ ═══════════════ */

.ba-page {
  max-width: 1440px; margin: 0 auto;
  padding: 18px var(--pad-x) 56px;
  display: flex; flex-direction: column; gap: 14px;
}
.ba-head + .ba-arena { margin-top: 10px; }
/* ═══════════════ ШАПКА БИТВЫ (по референсу) ═══════════════
   Полоса на всю ширину страницы: слева квадратная «назад» и «Общая сумма
   битвы» с рядом иконок (режим · быстрый · игроков), по центру карусель
   кейсов набора с шестиугольным медальоном текущего («3 из 8», имя,
   картинка, цена), справа три квадратные кнопки: звук, ссылка, честность. */
.ba-head {
  --tint: #4b69ff;
  position: relative; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px;
  min-height: 132px; padding: 14px 18px; border-radius: 16px;
  /* Фон — кадр с двумя бойцами у храма (assets/battle_head_bg.webp),
     сильно приглушённый: сверху тёмная заливка на 72 %, по краям затухание,
     плюс лёгкое пятно цвета текущего кейса снизу по центру. Персонажи
     остаются видны по бокам, центр под каруселью спокойный. */
  background:
    radial-gradient(60% 120% at 50% 100%, color-mix(in srgb, var(--tint) 22%, transparent), transparent 70%),
    linear-gradient(90deg, rgba(14, 15, 20, .92) 0%, rgba(14, 15, 20, .55) 22%, rgba(14, 15, 20, .8) 50%, rgba(14, 15, 20, .55) 78%, rgba(14, 15, 20, .92) 100%),
    linear-gradient(180deg, rgba(14, 15, 20, .55), rgba(14, 15, 20, .8)),
    url(assets/battle_head_bg.webp) center 38% / cover no-repeat, #0F1014;
  border: 0;
}
.ba-head::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .25; border-radius: inherit;
  background: repeating-linear-gradient(115deg, transparent 0 18px, rgba(255, 255, 255, .025) 18px 19px);
}
.ba-head__left { display: flex; align-items: center; gap: 16px; min-width: 0; }
.ba-back {
  width: 46px; height: 46px; flex: none; display: grid; place-items: center; border-radius: 9px;
  background: rgba(8, 10, 16, .6); color: var(--text); text-decoration: none; transition: background-color .14s;
}
.ba-back:hover { background: rgba(255, 255, 255, .12); }
.ba-back i { width: 20px; height: 20px; display: block; }
.ba-back i svg { width: 100%; height: 100%; }
.ba-head__info { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.ba-total { margin: 0; display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; color: var(--text); white-space: nowrap; }
.ba-total b { display: inline-flex; align-items: center; gap: 5px; color: var(--green); font-size: 16px; font-weight: 800; font-variant-numeric: tabular-nums; }
.ba-total .kz-coin-img { width: 15px; height: 15px; }
.ba-head__meta { margin: 0; display: inline-flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 700; color: var(--text); }
.ba-head__meta > i, .ba-head__meta > span { display: inline-flex; align-items: center; gap: 5px; }
.ba-head__meta svg, .ba-head__meta .bt-ico { width: 16px; height: 16px; }
.ba-head__meta em { width: 1px; height: 16px; background: rgba(255, 255, 255, .15); }
.ba-head__meta .bt-ico--fast { color: var(--accent); }

/* карусель: все кейсы набора в ряд, текущий по центру спрятан под
   медальоном; отыгранные слева гаснут */
.ba-head__center {
  position: relative; width: min(600px, 44vw); height: 118px; overflow: hidden;
  -webkit-mask: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
          mask: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.ba-carousel {
  position: absolute; left: 50%; top: 50%; display: flex; align-items: center; gap: 16px;
  transform: translate(calc(-50% - var(--shift, 0px)), -50%);
  transition: transform .5s cubic-bezier(.4, 0, .2, 1); will-change: transform;
}
.ba-case { flex: none; width: 76px; height: 76px; display: grid; place-items: center; transition: opacity .3s; }
.ba-case img {
  width: 72px; height: 72px; object-fit: contain; display: block; mix-blend-mode: screen;
  -webkit-mask: radial-gradient(closest-side, #000 60%, transparent 100%);
          mask: radial-gradient(closest-side, #000 60%, transparent 100%);
}
.ba-case b, .ba-case u { display: none; }
.ba-case.is-past { opacity: .35; }
.ba-case.is-now { visibility: hidden; }

/* шестиугольный медальон текущего кейса по центру карусели: счётчик
   раунда, имя, картинка, цена */
.ba-hex {
  position: absolute; left: 50%; top: calc(50% + 20px); z-index: 3; transform: translate(-50%, -50%);
  width: 172px; height: 196px; padding: 30px 14px 28px;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 2px;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  background: #1C1E26;
}
.ba-hex::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, #2A2D36, #16171D);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}
.ba-hex::after {
  content: ''; position: absolute; inset: 3px; z-index: -1;
  background: #13141A;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}
.ba-hex__round { font-size: 13px; font-weight: 800; color: var(--text); white-space: nowrap; }
.ba-hex__round.is-state { color: var(--accent); text-transform: uppercase; font-family: var(--f-cond); letter-spacing: .04em; font-size: 12px; }
.ba-hex__name { font-size: 11px; font-weight: 700; color: #C9CFD6; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* картинка по центру свободного места между именем и ценой; чёрный
   квадрат подложки гасит режим screen на тёмном фоне, без масок и свечений.
   Цена поднята от нижнего угла (padding-bottom 28px): там шестиугольник
   сужается, и плашка шире «699» («2,999», «12,500») вылезала за его
   кромку; место под неё взято у картинки (78 → 70 px). */
.ba-hex img { width: 104px; height: 70px; object-fit: contain; display: block; margin: auto 0; mix-blend-mode: screen; }
.ba-hex__price { display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 12px; border-radius: 12px; text-decoration: none; background: color-mix(in srgb, var(--green) 24%, #0F1011); color: var(--green); font-size: 12px; font-weight: 800; }
.ba-hex__price .kz-coin-img { width: 12px; height: 12px; }

.ba-head__right { display: flex; justify-content: flex-end; gap: 10px; }
.ba-iconbtn {
  width: 46px; height: 46px; display: grid; place-items: center; border-radius: 9px; border: 0;
  background: rgba(8, 10, 16, .6); color: var(--text); cursor: pointer; transition: background-color .14s, color .14s;
}
.ba-iconbtn:hover { background: rgba(255, 255, 255, .12); }
.ba-iconbtn svg { width: 20px; height: 20px; display: block; }
.ba-iconbtn.is-off { color: var(--text-mute); }
.ba-iconbtn.is-ok { color: var(--green); }

/* верх арены: режим слева, стол справа — всегда, не только в итоге */
.ba-arena { padding-top: 62px; }
.ba-arena__chip { top: 12px; }
.ba-arena__chip--pot { font-size: 16px; }
.ba-arena .ba-lanes::before { top: 0; }
.ba-arena.is-waiting { padding-top: 100px; }
.ba-arena__center { position: absolute; left: 50%; top: 46px; z-index: 6; transform: translateX(-50%); }
.ba-arena__center .bt-btn--bot { height: 40px; }
/* «Войти за ◎ 1,495»: сумма — строкой с монетой (иначе b и картинка
   монеты блочные, и число уезжало под монету) */
.ba-arena__center .bt-btn b { display: inline-flex; align-items: center; gap: 4px; font-weight: 800; }

/* итог */
.ba-result {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  padding: 12px 20px; border-radius: 12px; border: 1px solid transparent; background: var(--cs-panel);
  font-size: 14px; font-weight: 600;
}
.ba-result b { display: inline-flex; align-items: center; gap: 5px; font-size: 20px; font-weight: 800; font-variant-numeric: tabular-nums; }
.ba-result.is-up { border-color: color-mix(in srgb, var(--green) 45%, var(--line)); }
.ba-result.is-up b { color: var(--green); }
.ba-result.is-down b { color: #FF7A7A; }

/* ═══════════════ АРЕНА ═══════════════
   Дорожка на игрока во всю ширину, одна под другой. Лента — наш опенкейс
   (.cs-reel/.cs-strip/.cs-it из cases.css), единица --u задаётся на
   дорожке скриптом по числу игроков. Через все дорожки — вертикальная
   линия-указатель, между дорожками медальон со скрещёнными мечами. */
.ba-arena {
  --cs-ink: #0F1011;
  position: relative; padding: 34px 10px 10px; border-radius: 16px;
  background: rgba(8, 10, 16, .6); border: 0;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  box-shadow: 0 20px 50px rgba(0, 0, 0, .35);
}
.ba-lanes { position: relative; display: flex; flex-direction: column; gap: 10px; }
.ba-lanes::before {
  content: ''; position: absolute; left: 50%; top: 0; bottom: 0; z-index: 4; width: 2px; margin-left: -1px;
  background: linear-gradient(180deg, var(--accent), rgba(237, 224, 15, .25)); pointer-events: none;
  box-shadow: 0 0 10px color-mix(in srgb, var(--accent) 50%, transparent);
}
.ba-lane {
  position: relative; height: calc(31.6 * var(--u)); padding: 8px;
  border-radius: 12px; background: rgba(0, 0, 0, .35); border: 1px solid rgba(255, 255, 255, .05); overflow: hidden;
  transition: border-color .3s, box-shadow .3s, opacity .3s;
}
/* медальон между дорожками — над стыком, поверх линии */
.ba-lanes .ba-x { position: relative; display: block; height: 0; z-index: 6; pointer-events: none; }
.ba-lanes .ba-x .ba-x__logo {
  position: absolute; left: 50%; top: -20px; width: 34px; height: 34px; margin-left: -17px; padding: 5px; box-sizing: border-box;
  border-radius: 50%; background: #0D0F14; border: 1px solid rgba(255, 255, 255, .08);
  object-fit: contain; box-shadow: 0 4px 12px rgba(0, 0, 0, .5);
}
.ba-lane.is-me { border-color: color-mix(in srgb, var(--accent) 35%, var(--line)); }
.ba-lane.is-win { border-color: var(--green); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--green) 30%, transparent), 0 0 30px color-mix(in srgb, var(--green) 15%, transparent); }
.ba-lane.is-lose { opacity: .6; }
.ba-lanes.is-teams .ba-lane[data-team="0"] { border-left: 3px solid #7EC8FF; }
.ba-lanes.is-teams .ba-lane[data-team="1"] { border-left: 3px solid #FF9A7A; }

.ba-lane__who {
  position: absolute; left: 12px; top: 12px; z-index: 5; display: flex; align-items: center; gap: 10px;
  padding: 4px 12px 4px 4px; border-radius: 24px; background: rgba(15, 16, 17, .78);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.ba-lane__who > span { display: flex; flex-direction: column; }
.ba-lane__who b { font-size: 13px; font-weight: 700; }
.ba-lane__who b.is-mute { color: var(--text-mute); font-weight: 500; }
.ba-lane__who .bt-btn--bot { height: 34px; padding: 0 12px; font-size: 12px; margin-left: 8px; }
.ba-sum { display: inline-flex; align-items: center; gap: 4px; text-decoration: none; font-size: 13px; font-weight: 800; color: var(--money); font-variant-numeric: tabular-nums; }
.ba-sum .kz-coin-img { width: 13px; height: 13px; }
.bt-ava--md { width: 36px; height: 36px; font-size: 15px; }
.ba-lane .bt-ava { box-shadow: 0 0 0 2px #0F1011, 0 0 0 3px rgba(255, 255, 255, .08); }
.ba-lane .bt-ava.is-me { box-shadow: 0 0 0 2px #0F1011, 0 0 0 4px var(--accent); }

/* лента внутри дорожки: те же .cs-* что на странице кейса, но затухание
   по краям своё (у кейса оно от --cs-ink, здесь фон дорожки) */
.ba-reel { height: 100%; border-radius: 8px; }
.ba-reel::before, .ba-reel::after { content: ''; position: absolute; top: 0; bottom: 0; z-index: 2; width: 18%; pointer-events: none; }
.ba-reel::before { left: 0; background: linear-gradient(90deg, #0F1011, rgba(15, 16, 17, 0)); }
.ba-reel::after  { right: 0; background: linear-gradient(270deg, #0F1011, rgba(15, 16, 17, 0)); }
.ba-lane .cs-strip.is-idle { animation-duration: calc(var(--idle-n, 16) * 6s); }
.ba-lane .cs-it__wear { display: none; }
.ba-lane.is-compact .cs-it__txt { display: none; }
.ba-lane.is-compact .cs-it { padding-top: calc(4 * var(--u)); }
.ba-lane.is-empty .cs-strip { opacity: .25; }

/* ═══════════════ СЧЁТ ═══════════════ */

.ba-scores { position: relative; display: grid; grid-template-columns: repeat(var(--n, 2), minmax(0, 1fr)); gap: 14px; }
.ba-score {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px;
  align-self: start; min-height: 120px; padding: 14px 14px 12px; border-radius: 12px; overflow: hidden;
  background: var(--cs-panel);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  border: 1px solid transparent;
  transition: background-color .3s, border-color .3s;
}
/* ─── подсветка результата: только после конца битвы ───
   Классы is-lead/is-back вешаются после каждого раунда — по ним видно
   текущего лидера. Но пока розыгрыш идёт, лидер меняется, и мигание
   зелёным и красным читается как объявленный итог: человек видит
   «ПОРАЖЕНИЕ» ещё до того, как открылся последний кейс. Поэтому цвет
   включается только у .ba-scores.is-done (ставится в finish()), а до
   этого колонки приглушены. */
.ba-scores.is-done .ba-score.is-lead { background: radial-gradient(70% 90% at 15% 20%, color-mix(in srgb, var(--green) 26%, transparent), transparent 70%), rgba(8, 14, 10, .7); border-color: color-mix(in srgb, var(--green) 45%, transparent); }
.ba-scores.is-done .ba-score.is-back { background: radial-gradient(70% 90% at 15% 20%, rgba(255, 82, 82, .22), transparent 70%), rgba(16, 8, 10, .7); border-color: rgba(255, 92, 92, .3); }

/* Пока битва идёт — полупрозрачная нейтральная колонка. Прозрачность
   задана фоном и рамкой, а не opacity на всей карточке: под opacity
   вместе с ней поблёкли бы и выпавшие предметы, а их видно должно быть
   полностью — ради них сюда и смотрят. Игроки и суммы — в полную
   яркость, сумма горит зелёным (решение владельца 2026-10-13): цвет
   денег у всех одинаковый, лидера он не выдаёт. */
.ba-scores:not(.is-done) .ba-score {
  background: rgba(8, 10, 16, .4);
  border-color: transparent;
}
.ba-score__who { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 700; }
.ba-score__sum { display: inline-flex; align-items: center; height: 34px; padding: 0 16px; border-radius: 17px; background: rgba(0, 0, 0, .45); }
.ba-score__sum .ba-sum {
  color: var(--money); font-size: 14px;
  text-shadow: 0 0 10px color-mix(in srgb, var(--money) 45%, transparent);
}
/* итог объявлен: у проигравших сумма красная, как у командных сумм */
.ba-scores.is-done .ba-score.is-back .ba-score__sum .ba-sum { color: #FF7A7A; text-shadow: none; }
.ba-score__verdict { display: none; align-items: center; gap: 8px; font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.ba-score__verdict u { text-decoration: none; display: inline-flex; align-items: center; gap: 4px; }
.ba-score__verdict .kz-coin-img { width: 12px; height: 12px; }
.ba-score.is-lead .ba-score__verdict:not(:empty) { display: inline-flex; color: var(--green); }
.ba-score.is-back .ba-score__verdict:not(:empty) { display: inline-flex; color: #FF7A7A; }
.ba-score__drops { display: flex; flex-direction: column; gap: 6px; width: 100%; margin-top: 4px; }
.ba-score__drops:empty { display: none; }
.ba-drop {
  --rar: #4b69ff;
  position: relative; display: flex; align-items: center; gap: 10px;
  min-height: 92px; padding: 8px 12px 8px 8px; border-radius: 10px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--rar) 22%, #14151B) 0%, #14151B 55%);
  border: 1px solid color-mix(in srgb, var(--rar) 22%, var(--line));
}
.ba-drop img { width: 96px; height: 72px; object-fit: contain; flex: none; display: block; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .55)); }
.ba-drop__txt { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-width: 0; text-align: left; }
.ba-drop__wear { display: inline-flex; align-items: center; height: 18px; padding: 0 7px; border-radius: 5px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .1); font-size: 10px; font-weight: 800; font-style: normal; color: var(--text); }
.ba-drop__type { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; font-size: 12px; font-weight: 600; color: #C9CFD6; }
.ba-drop__type::before { content: ''; width: 6px; height: 6px; border-radius: 1px; background: var(--rar); box-shadow: 0 0 6px var(--rar); }
.ba-drop__name { font-size: 13px; font-weight: 800; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ba-drop__price { display: inline-flex; align-items: center; gap: 4px; font-style: normal; font-size: 13px; font-weight: 800; color: var(--text); font-variant-numeric: tabular-nums; }
.ba-drop__price .kz-coin-img { width: 14px; height: 14px; }
.ba-drop.is-new { animation: ba-pop .35s ease-out; }
@keyframes ba-pop { from { transform: translateY(-8px); opacity: 0; } to { transform: none; opacity: 1; } }

/* ─── скины проигравших перелетают победителю (battles.main.js moveDrops) ───
   как в апгрейд-батле: карточка победителя на время полёта — поверх
   соседних и без обрезки (иначе скин появлялся бы только на её границе),
   предмет в полёте светится цветом победы, при посадке — вспышка */
.ba-scores { --take: var(--green); }
.bt-body .ba-scores { --take: var(--btx-lime); }
.ba-score.is-taking { z-index: 4; overflow: visible; }
.ba-drop.is-fly {
  z-index: 6; will-change: transform, opacity, filter;
  border-color: color-mix(in srgb, var(--take) 70%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--take) 45%, transparent), 0 18px 40px -14px color-mix(in srgb, var(--take) 55%, transparent);
}
.ba-drop.is-landed { animation: ba-land .9s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes ba-land {
  0% { border-color: var(--take); box-shadow: 0 0 0 2px var(--take), 0 0 28px color-mix(in srgb, var(--take) 70%, transparent), inset 0 0 22px color-mix(in srgb, var(--take) 30%, transparent); }
  100% { box-shadow: none; }
}
.ba-score__gone {
  display: grid; place-items: center; min-height: 60px; margin: 0; padding: 10px 14px; border-radius: 10px; text-align: center;
  border: 1px dashed rgba(166, 120, 255, .28); color: var(--text-mute); font-size: 13px; font-weight: 600;
  animation: ba-pop .4s ease-out 1.2s both;
}
@media (max-width: 640px), (max-width: 950px) and (max-height: 500px) {
  .ba-scores .ba-score__gone { min-height: 48px; padding: 6px 4px; border-radius: 8px; font-size: 10px; line-height: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .ba-drop.is-landed, .ba-score__gone { animation: none; }
}
/* мечи между карточками счёта — на стыке соседних карточек */
.ba-scores .ba-x { position: relative; width: 0; margin: 0 -7px; z-index: 2; }
.ba-scores .ba-x i {
  position: absolute; left: -22px; top: 32px; width: 44px; height: 44px; display: grid; place-items: center;
  border-radius: 12px; background: #0D0F14; border: 1px solid rgba(255, 255, 255, .08);
  box-shadow: 0 6px 16px rgba(0, 0, 0, .5);
}
.ba-scores .ba-x i .ba-x__logo { width: 26px; height: 26px; object-fit: contain; }

/* Обесцвечен и приглушён: это разделитель, а не элемент, за которым
   следят. В цвете он забирал внимание у скинов в дорожках. */
.ba-x__logo { filter: grayscale(1) brightness(1.25); opacity: .55; }
.ba-scores { display: flex; }
.ba-scores .ba-score { flex: 1; min-width: 0; }

/* командные блоки в 2 на 2: цвет команды, название и сумма в шапке */
.ba-teamgrp {
  --tc: #7EC8FF;
  flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 10px;
  padding: 10px; border-radius: 16px; border: 1px solid color-mix(in srgb, var(--tc) 40%, transparent);
  background: linear-gradient(180deg, color-mix(in srgb, var(--tc) 12%, transparent), transparent 60%), rgba(8, 10, 16, .5);
}
.ba-teamgrp[data-team="1"] { --tc: #FF9A7A; }
/* командам — то же правило: цвет лидера только после итога */
.ba-scores.is-done .ba-teamgrp.is-lead { border-color: color-mix(in srgb, var(--green) 55%, var(--line)); }
.ba-scores.is-done .ba-teamgrp.is-back { opacity: .92; }
.ba-scores:not(.is-done) .ba-teamgrp { border-color: color-mix(in srgb, var(--tc) 22%, transparent); }
.ba-teamgrp__head { display: flex; align-items: center; justify-content: space-between; padding: 2px 6px 0; }
.ba-teamgrp__head b { display: inline-flex; align-items: center; gap: 8px; font-family: var(--f-cond); font-size: 14px; letter-spacing: .1em; text-transform: uppercase; color: var(--tc); }
.ba-teamgrp__head b::before { content: ''; width: 10px; height: 10px; border-radius: 3px; background: var(--tc); box-shadow: 0 0 8px var(--tc); }
.ba-teamgrp__head .ba-sum { color: var(--money); font-size: 15px; text-shadow: 0 0 10px color-mix(in srgb, var(--money) 45%, transparent); }
.ba-scores.is-done .ba-teamgrp.is-lead .ba-teamgrp__head .ba-sum { color: var(--green); }
.ba-scores.is-done .ba-teamgrp.is-back .ba-teamgrp__head .ba-sum { color: #FF7A7A; }
.ba-teamgrp__cards { display: flex; gap: 10px; }
@media (max-width: 1000px) { .ba-teamgrp__cards { flex-direction: column; } }
.ba-teamgrp__cards .ba-score { flex: 1; min-width: 0; }
/* метка команды у имени в дорожке */
.ba-tag { display: inline-grid; place-items: center; margin-left: 6px; height: 16px; padding: 0 5px; border-radius: 4px; font-size: 10px; font-weight: 800; font-style: normal; vertical-align: 1px; color: #0A0C0E; }
.ba-tag--0 { background: #7EC8FF; }
.ba-tag--1 { background: #FF9A7A; }

/* ═══════════════ ИТОГ В ОКНЕ АРЕНЫ ═══════════════
   По концу битвы дорожки уходят, и на их месте — победители, стол и
   кнопки, как у референса. Над ареной слева режим, справа стол; медальон
   кейса остаётся по центру. */
/* итог ложится ПОВЕРХ дорожек с приземлившимися предметами: фон арены
   не меняется, под окном только лёгкий блюр и слабое затемнение */
.ba-arena.is-final .ba-lanes { pointer-events: none; }
.ba-arena.is-final .ba-lanes::before { opacity: .35; }
.ba-arena__chip {
  position: absolute; top: 12px; z-index: 5; display: inline-flex; align-items: center; gap: 8px;
  height: 34px; padding: 0 14px; border-radius: 8px; background: rgba(0, 0, 0, .45); border: 0;
  font-size: 13px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
}
.ba-arena__chip--pot { right: 14px; color: var(--green); font-variant-numeric: tabular-nums; letter-spacing: 0; font-size: 15px; }
.ba-arena__chip .kz-coin-img { width: 14px; height: 14px; }

.ba-final {
  position: absolute; inset: 0; z-index: 8; border-radius: inherit;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  padding: 60px 20px 30px; text-align: center;
  background: rgba(8, 9, 12, .38);
  -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px);
  animation: ba-final-in .45s ease-out;
}
@keyframes ba-final-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.ba-final__who { display: flex; flex-wrap: wrap; justify-content: center; gap: 28px; }
.ba-final__p { position: relative; }
.ba-final__p u { text-decoration: none; display: inline-flex; align-items: center; gap: 3px; font-size: 13px; font-weight: 800; color: var(--green); }
.ba-final__p u .kz-coin-img { width: 12px; height: 12px; }
/* корона над победителем */
.ba-final__crown {
  position: absolute; left: 50%; top: -18px; z-index: 2; width: 30px; height: 30px; transform: translateX(-50%);
  display: grid; place-items: center; border-radius: 50%; color: #2A1B00;
  background: linear-gradient(160deg, #FFE27A, var(--gold) 55%, #B8860B);
  box-shadow: 0 6px 16px color-mix(in srgb, var(--gold) 45%, transparent), 0 0 0 2px rgba(12, 13, 18, .8);
  animation: ba-crown .7s cubic-bezier(.2, 1.4, .4, 1) .15s both;
}
.ba-final__crown svg { width: 16px; height: 16px; }
@keyframes ba-crown { from { transform: translate(-50%, -10px) scale(.4); opacity: 0; } to { transform: translateX(-50%); opacity: 1; } }
.ba-final__p.is-winner .bt-ava { box-shadow: 0 0 0 3px rgba(12, 13, 18, .8), 0 0 0 5px var(--gold), 0 0 30px color-mix(in srgb, var(--gold) 50%, transparent); }
.ba-final__sum small { display: flex; justify-content: center; align-items: center; gap: 4px; width: 100%; margin-top: -4px; font-family: var(--f-body, Inter, sans-serif); font-size: 12px; font-weight: 600; letter-spacing: 0; color: #C9CFD6; }
.ba-final__sum small .kz-coin-img { width: 11px; height: 11px; display: inline-block; }
.ba-final__p { display: flex; flex-direction: column; align-items: center; gap: 10px; font-size: 14px; font-weight: 700; text-shadow: 0 1px 8px rgba(0, 0, 0, .8); }
.bt-ava--xl { width: 64px; height: 64px; font-size: 26px; }
.ba-final .bt-ava { box-shadow: 0 0 0 3px rgba(12,13,18,.8), 0 0 0 5px color-mix(in srgb, var(--gold) 70%, transparent); }
.ba-final .bt-ava.is-me { box-shadow: 0 0 0 3px rgba(12,13,18,.8), 0 0 0 5px var(--accent); }
/* значок уровня вместо аватара (обёртка .bt-ava.is-lvl, battles.view.js):
   кольца-рамки по кругу снимает is-lvl — победитель светится золотом по
   форме шестиугольника, свой значок — своим свечением (is-me значка) */
.ba-final__p.is-winner .bt-ava.is-lvl { filter: drop-shadow(0 0 10px color-mix(in srgb, var(--gold) 60%, transparent)) drop-shadow(0 4px 10px rgba(0, 0, 0, .55)); }
.ba-final__sum {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; margin-top: 6px;
  font-family: var(--f-cond); font-size: 44px; font-weight: 700; letter-spacing: .02em; color: var(--text); font-variant-numeric: tabular-nums;
  text-shadow: 0 2px 18px rgba(0, 0, 0, .8);
}
.ba-final__sum .kz-coin-img { width: 36px; height: 36px; }
.ba-final__me { margin: -4px 0 6px; font-size: 13px; color: #C9CFD6; text-shadow: 0 1px 8px rgba(0, 0, 0, .8); }
.ba-final__me b { display: inline-flex; align-items: center; gap: 4px; font-size: 15px; font-weight: 800; color: var(--text); }
.ba-final__me.is-up b { color: var(--green); }
.ba-final__me.is-down b { color: #FF7A7A; }
.ba-final__me .kz-coin-img { width: 14px; height: 14px; }
.ba-final .bt-btn { width: min(420px, 100%); height: 50px; }
.bt-btn--same { border-radius: 11px; background: var(--gloss), var(--cs-green); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.18), inset 0 -1px 0 rgba(0,0,0,.3); font-family: var(--f-cond); font-size: 14px; letter-spacing: .08em; text-transform: uppercase; }
.bt-btn--same:hover { filter: brightness(1.08); background: var(--gloss), var(--cs-green); }
.bt-btn--same b { display: inline-flex; align-items: center; gap: 4px; font-weight: 800; }
.bt-btn--same .kz-coin-img { width: 15px; height: 15px; }
.bt-btn--edit { border-radius: 11px; background: rgba(255, 255, 255, .1); font-family: var(--f-cond); font-size: 14px; letter-spacing: .08em; text-transform: uppercase; }
.ba-final__back { margin-top: 6px; font-size: 14px; font-weight: 700; color: var(--gold); text-decoration: none; }
.ba-final__back:hover { text-decoration: underline; }

/* ═══════════════ УЗКИЕ ЭКРАНЫ ═══════════════ */

@media (max-width: 1100px) {
  .bt-page { grid-template-columns: minmax(0, 1fr); }
  .bt-page.is-folded { grid-template-columns: minmax(0, 1fr); }
  .bt-filters { position: fixed; top: 72px; right: 12px; bottom: 12px; width: min(300px, 86vw); overflow: auto; z-index: 45; padding: 12px; border-radius: 12px; background: rgba(10, 11, 15, .95); }
  .bt-iconbtn--filters { display: grid; }
  .ba-scores { flex-wrap: wrap; }
}
@media (max-width: 860px) {
  .bt-row__body { flex-direction: column; }
  .bt-row__side { width: 100%; }
  .bt-pick { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ba-head { grid-template-columns: 1fr; }
  .ba-head__center { width: 100%; justify-self: center; }
  .ba-head__right { justify-content: flex-start; }
}
@media (max-width: 600px) {
  .ba-scores { flex-direction: column; }
  .ba-scores .ba-x { display: none; }
  .bt-pick { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* разделитель перед первым значком строки режима: без «быстрого» строка
   начиналась с черты */
.ba-head__meta > em:first-child { display: none; }

/* ═══════════════ ТЕЛЕФОН: АРЕНА КОЛОНКАМИ ═══════════════
   На широком экране арена — горизонтальные дорожки одна под другой, под
   ними карточки счёта. На телефоне так не выходило: четыре дорожки по
   160px занимали весь экран, выпавшее уезжало вниз за них, а карточки
   счёта стояли узкими столбиками у левого края.

   Здесь раскладка как у мобильных батлов: игрок — колонка. Сверху
   аватар, имя и сумма, под ними ВЕРТИКАЛЬНАЯ лента (ось ленты
   battles.main.js читает из стилей: flex-direction у .cs-strip), под
   лентой в той же колонке — выпавшее, свежее сверху. Колонок столько,
   сколько мест (--n и data-n ставит скрипт): 2, 3, 4, в 2 на 2 — четыре
   с цветом команды. Карточки выпавшего лежат в отдельном блоке под
   ареной, но в той же сетке и с тем же отступом, поэтому стоят ровно под
   своей лентой.

   Размеры колонки — переменные на .ba-lanes: --ih высота ячейки ленты,
   --rh высота окна ленты; --wh на арене — высота таблички игрока (под
   ней встаёт итог, таблички остаются видны).

   Без backdrop-filter и крупных теней: на телефоне они перерисовывают
   всё под панелью на каждом кадре прокрутки и прокрутки лент.

   Второе условие — телефон боком (844×390, 932×430): ширина как у
   планшета, но высоты нет, и в старой раскладке шапка с медальоном
   занимали весь первый экран, а выпавшее начиналось на ~1100px ниже. */
@media (max-width: 640px), (max-width: 950px) and (max-height: 500px) {
  .ba-arena, .ba-score, .ba-lane__who, .ba-final, .ba-teamgrp { -webkit-backdrop-filter: none; backdrop-filter: none; }

  .ba-page { padding: 12px var(--pad-x) 28px; gap: 10px; }
  .ba-head + .ba-arena { margin-top: 0; }

  /* ── шапка: назад · сумма · кнопки | карусель | раунд ── */
  .ba-head {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "left right" "center center" "hex hex";
    gap: 8px 10px; min-height: 0; padding: 10px; border-radius: 14px;
  }
  .ba-head__left { grid-area: left; gap: 10px; }
  .ba-head__right { grid-area: right; gap: 6px; align-self: start; }
  .ba-back, .ba-iconbtn { width: 36px; height: 36px; border-radius: 9px; }
  .ba-back i { width: 18px; height: 18px; }
  .ba-iconbtn svg { width: 17px; height: 17px; }
  .ba-head__info { gap: 3px; }
  .ba-total { flex-direction: column; align-items: flex-start; gap: 0; font-size: 11px; font-weight: 600; color: var(--text-mute); }
  .ba-total b { font-size: 16px; }
  .ba-total .kz-coin-img { width: 14px; height: 14px; }
  .ba-head__meta { gap: 8px; font-size: 12px; }
  .ba-head__meta svg, .ba-head__meta .bt-ico { width: 14px; height: 14px; }
  .ba-head__meta em { height: 12px; }

  /* карусель: текущий кейс не прячется под медальоном (его здесь нет),
     а подсвечен по центру */
  .ba-head__center { grid-area: center; width: 100%; height: 62px; }
  .ba-carousel { gap: 10px; }
  .ba-case { position: relative; width: 50px; height: 50px; border-radius: 50%; }
  .ba-case img { width: 46px; height: 46px; }
  .ba-case.is-now {
    visibility: visible;
    background: radial-gradient(closest-side, color-mix(in srgb, var(--tint) 55%, transparent), transparent);
  }
  .ba-case.is-now img { transform: scale(1.16); }
  .ba-case.is-now::after {
    content: ''; position: absolute; left: 32%; right: 32%; bottom: -5px; height: 3px;
    border-radius: 2px; background: var(--accent);
  }

  /* медальон — строкой под каруселью: «Раунд 2 из 5 · имя · цена» */
  .ba-hex {
    grid-area: hex; position: relative; left: auto; top: auto; z-index: 1; transform: none;
    justify-self: center; width: auto; max-width: 100%; height: 30px; padding: 0 4px 0 12px;
    flex-direction: row; align-items: center; justify-content: center; gap: 8px;
    clip-path: none; border-radius: 15px; background: rgba(0, 0, 0, .42);
  }
  .ba-hex::before, .ba-hex::after, .ba-hex img { display: none; }
  .ba-hex__round { flex: none; font-size: 12px; }
  .ba-hex__round:not(.is-state):not(:empty)::before { content: 'Раунд '; color: var(--text-mute); font-weight: 600; }
  .ba-hex__name { flex: 0 1 auto; min-width: 0; font-size: 12px; }
  .ba-hex__price { flex: none; height: 22px; padding: 0 9px; }
  /* пока битва не пришла с сервера, строка пустая: без этого на
     медленной сети висели одинокое «Раунд» и пустая зелёная плашка */
  .ba-hex__name:empty, .ba-hex__price:empty { display: none; }
  .ba-hex:has(> .ba-hex__round:empty) { visibility: hidden; }

  /* ── арена ── дорожки и итог в одной ячейке сетки: итог ложится поверх
     лент, а высота арены — по большему из двух, ничего не вылезает */
  .ba-arena {
    --wh: 74px;
    display: grid; grid-template-columns: minmax(0, 1fr); align-items: start;
    padding: 42px 6px 6px; border-radius: 14px;
    background: rgba(8, 10, 16, .82); box-shadow: none;
  }
  .ba-arena.is-waiting { padding-top: 88px; }
  .ba-arena > .ba-lanes, .ba-arena > .ba-final { grid-area: 1 / 1; }
  .ba-arena__chip { top: 7px; height: 28px; padding: 0 10px; }
  .ba-arena__chip--pot { right: 6px; font-size: 13px; }
  .ba-arena__chip .kz-coin-img { width: 13px; height: 13px; }
  .ba-arena__center { left: 6px; right: 6px; top: 42px; transform: none; display: flex; justify-content: center; }
  .ba-arena__center .bt-btn { width: 100%; height: 38px; }

  .ba-lanes {
    --ih: 64px; --rh: 212px;
    display: grid; grid-template-columns: repeat(var(--n, 2), minmax(0, 1fr)); gap: 4px;
  }
  .ba-lanes[data-n="2"] { --ih: 90px; --rh: 250px; }
  .ba-lanes[data-n="3"] { --ih: 76px; --rh: 232px; }
  .ba-lanes::before, .ba-lanes > .ba-x { display: none; }

  /* верхняя рамка толще: в 2 на 2 это цвет команды, у своей колонки —
     акцент, у победителя — зелень; итог встаёт ровно под неё (--wh + 3px) */
  .ba-lanes .ba-lane { height: auto; padding: 0; display: flex; flex-direction: column; border-radius: 10px; border-top-width: 3px; }
  .ba-lanes.is-teams .ba-lane[data-team="0"] { border-left: 1px solid rgba(255, 255, 255, .05); border-top: 3px solid #7EC8FF; }
  .ba-lanes.is-teams .ba-lane[data-team="1"] { border-left: 1px solid rgba(255, 255, 255, .05); border-top: 3px solid #FF9A7A; }
  .ba-lane.is-win { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--green) 30%, transparent); }

  /* табличка игрока — шапка колонки */
  .ba-lanes .ba-lane__who {
    position: relative; left: auto; top: auto; z-index: 3; flex: 1 0 auto; min-height: var(--wh);
    flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    padding: 6px 4px; border-radius: 0; background: rgba(15, 16, 17, .55); text-align: center;
  }
  .ba-lane__who > span { align-items: center; max-width: 100%; }
  .ba-lane__who b { display: flex; align-items: center; justify-content: center; max-width: 100%; font-size: 11.5px; line-height: 15px; }
  .ba-nm { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .ba-lane__who .bt-bot { flex: none; margin-left: 3px; padding: 0 3px; font-size: 9px; }
  .ba-lane__who .ba-tag { display: none; }
  .ba-lanes .bt-ava--md { width: 28px; height: 28px; font-size: 12px; }
  .ba-lane__who .ba-sum { font-size: 12px; line-height: 15px; }
  .ba-lanes[data-n="4"] .ba-lane__who .ba-sum { gap: 3px; font-size: 11px; letter-spacing: -.01em; }
  .ba-lanes[data-n="4"] .ba-lane__who .ba-sum .kz-coin-img { width: 11px; height: 11px; }
  .ba-lane__who .bt-btn--bot {
    width: 100%; height: auto; min-height: 30px; margin: 2px 0 0; padding: 4px; gap: 4px;
    border-radius: 8px; font-size: 10.5px; line-height: 1.15; white-space: normal; text-align: center;
  }
  .ba-lane__who .bt-btn--bot svg { flex: none; width: 13px; height: 13px; }

  /* лента — вертикальная, указатель поперёк по центру окна */
  .ba-lanes .ba-reel { flex: none; height: var(--rh); border-radius: 0 0 9px 9px; }
  .ba-lanes .ba-reel::before {
    left: 0; right: 0; top: 0; bottom: 0; width: auto;
    background: linear-gradient(180deg, #0F1011 0%, rgba(15, 16, 17, 0) 24%, rgba(15, 16, 17, 0) 76%, #0F1011 100%);
  }
  .ba-lanes .ba-reel::after {
    left: 0; right: 0; top: 50%; bottom: auto; z-index: 3; width: auto; height: 2px; margin-top: -1px;
    background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 30%, transparent) 50%, var(--accent));
  }
  .ba-lanes .ba-lane .cs-strip {
    flex-direction: column; align-items: stretch; gap: 4px;
    width: 100%; height: max-content; padding: 0 3px; box-sizing: border-box;
  }
  .ba-lanes .ba-lane .cs-strip.is-idle { animation-name: ba-drift-v; }
  .ba-lanes .ba-lane .cs-it {
    width: 100%; height: var(--ih); padding: 4px 3px 0; gap: 2px;
    justify-content: center; border-radius: 8px;
  }
  .ba-lanes .ba-lane .cs-it img { width: 100%; height: calc(var(--ih) - 14px); margin-left: 0; filter: none; }
  .ba-lanes .ba-lane .cs-it__txt { display: none; }
  .ba-lanes .ba-lane .cs-it__bar { bottom: 3px; width: 34%; height: 3px; border-radius: 2px; box-shadow: none; }
  .ba-lanes .cs-reel.is-landed .cs-it.is-hit {
    transform: scale(1.03);
    box-shadow: 0 0 0 1px var(--rar), 0 0 16px color-mix(in srgb, var(--rar) 50%, transparent);
  }

  /* ── итог: под табличками игроков, поверх лент ── */
  .ba-final {
    position: relative; inset: auto; z-index: 8; margin-top: calc(var(--wh) + 3px);
    gap: 10px; padding: 18px 12px 14px; border-radius: 0 0 10px 10px;
    background: rgba(8, 9, 12, .9);
  }
  .ba-final__who { gap: 18px; max-width: 100%; }
  .ba-final__p { gap: 6px; max-width: 100%; min-width: 0; font-size: 13px; }
  /* длинное имя Steam (до 32 знаков) — многоточием, метка «бот» видна */
  .ba-final__p > b { display: flex; justify-content: center; max-width: 100%; min-width: 0; }
  .ba-final .ba-nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .ba-final .bt-bot { flex: none; margin-left: 4px; }
  .ba-final .bt-ava--xl { width: 50px; height: 50px; font-size: 20px; }
  .ba-final__crown { top: -14px; width: 26px; height: 26px; }
  .ba-final__crown svg { width: 14px; height: 14px; }
  .ba-final__sum { gap: 8px; margin-top: 0; font-size: 32px; }
  .ba-final__sum .kz-coin-img { width: 26px; height: 26px; }
  .ba-final__me { margin: -2px 0 2px; font-size: 12.5px; }
  .ba-final .bt-btn { width: 100%; max-width: 420px; height: 44px; font-size: 13px; letter-spacing: .05em; }

  /* ── выпавшее: колонки ровно под лентами ── */
  .ba-scores {
    display: grid; grid-template-columns: repeat(var(--n, 2), minmax(0, 1fr));
    gap: 4px; padding: 0 6px; align-items: start;
  }
  .ba-scores > .ba-x { display: none; }
  /* имя и сумма — в шапке колонки над лентой; здесь только итог и
     предметы */
  .ba-scores .ba-score, .ba-scores:not(.is-done) .ba-score {
    min-height: 0; padding: 0; gap: 4px; border-radius: 10px;
    background: none; border: 0; overflow: visible;
  }
  .ba-score__who, .ba-score__sum { display: none; }
  .ba-scores.is-done .ba-score { padding: 4px; }
  .ba-scores.is-done .ba-score.is-lead { background: rgba(8, 14, 10, .7); border: 1px solid color-mix(in srgb, var(--green) 45%, transparent); }
  .ba-scores.is-done .ba-score.is-back { background: rgba(16, 8, 10, .7); border: 1px solid rgba(255, 92, 92, .3); }
  .ba-score__verdict { flex-direction: column; gap: 1px; max-width: 100%; padding: 2px 0; font-size: 10px; line-height: 12px; letter-spacing: .04em; text-align: center; }
  .ba-score__verdict u { font-size: 11px; line-height: 14px; letter-spacing: 0; }
  .ba-score__verdict .kz-coin-img { width: 10px; height: 10px; }
  /* у победителя под словом сумма, у проигравшего — нет: одна высота на
     всех, чтобы ряды выпавшего стояли вровень по колонкам */
  .ba-scores.is-done .ba-score__verdict { min-height: 31px; justify-content: center; }
  .ba-scores .ba-score__drops { flex-direction: column-reverse; justify-content: flex-end; gap: 4px; margin-top: 0; }

  .ba-scores .ba-drop {
    min-width: 0; min-height: 0; flex-direction: column; align-items: stretch; gap: 2px;
    padding: 5px 4px 6px; border-radius: 8px;
    background: linear-gradient(180deg, color-mix(in srgb, var(--rar) 26%, #14151B) 0%, #14151B 78%);
  }
  .ba-scores .ba-drop > img { width: 100%; height: 48px; filter: none; }
  .ba-scores .ba-drop__txt { align-items: center; gap: 1px; width: 100%; text-align: center; }
  .ba-scores .ba-drop__wear, .ba-scores .ba-drop__type { display: none; }
  .ba-scores .ba-drop__name { font-size: 10.5px; font-weight: 700; color: #C9CFD6; }
  .ba-scores .ba-drop__price { font-size: 11.5px; }
  .ba-scores .ba-drop__price .kz-coin-img { width: 11px; height: 11px; }
  /* тень монеты из общего .ba-drop img — фильтр на каждой карточке */
  .ba-scores .ba-drop .kz-coin-img { filter: none; }
  .ba-scores[data-n="2"] .ba-drop > img { height: 66px; }
  .ba-scores[data-n="2"] .ba-drop__type { display: inline-flex; max-width: 100%; font-size: 10.5px; }
  .ba-scores[data-n="2"] .ba-drop__name { font-size: 12px; color: var(--text); }
  .ba-scores[data-n="2"] .ba-drop__price { font-size: 12.5px; }
  .ba-scores[data-n="3"] .ba-drop > img { height: 56px; }

  /* суммы не шире своей колонки: если не влезают, монета уходит на
     строку выше числа, а не за рамку карточки */
  .ba-lane__who .ba-sum, .ba-scores .ba-drop__price, .ba-score__verdict u { flex-wrap: wrap; justify-content: center; max-width: 100%; }
  /* четыре колонки (4 игрока и 2 на 2): на 360px карточка — 68px, а
     «22,736.94» или «+25,000.00» — обычное дело. Шрифт по ширине экрана,
     у цены предмета и выигрыша без монеты (она есть в шапке колонки).
     В шапке (3 и 4 колонки) монета уходит только у сумм от миллиона
     (.is-long ставит paintMoney): с ней число переносилось на вторую
     строку, а её закрывало окно итога, которое встаёт ровно под
     табличку (--wh). */
  .ba-scores[data-n="4"] .ba-drop__price,
  .ba-scores[data-n="4"] .ba-score__verdict u,
  .ba-lanes[data-n="4"] .ba-lane__who .ba-sum { font-size: min(11px, 2.9vw); letter-spacing: -.02em; }
  .ba-scores[data-n="4"] .ba-drop__price .kz-coin-img,
  .ba-scores[data-n="4"] .ba-score__verdict u .kz-coin-img,
  .ba-lanes:not([data-n="2"]) .ba-lane__who .ba-sum.is-long .kz-coin-img { display: none; }
  .ba-scores[data-n="4"] .ba-score__verdict u { gap: 0; }
  .ba-scores[data-n="4"] .ba-drop { padding-left: 2px; padding-right: 2px; }
  .ba-lanes[data-n="4"] .ba-lane__who { padding-left: 2px; padding-right: 2px; }

  /* 2 на 2: командные блоки разбираются в ту же сетку — шапка команды
     на две колонки над её игроками, цвет команды полосой */
  .ba-scores .ba-teamgrp, .ba-scores .ba-teamgrp__cards { display: contents; }
  .ba-scores .ba-teamgrp__head {
    grid-row: 1; align-self: stretch; flex-direction: column; justify-content: center; gap: 2px; min-width: 0; padding: 5px 6px;
    border-radius: 8px; border-top: 2px solid var(--tc);
    background: color-mix(in srgb, var(--tc) 12%, rgba(8, 10, 16, .75));
  }
  .ba-scores .ba-teamgrp[data-team="0"] .ba-teamgrp__head { grid-column: 1 / 3; }
  .ba-scores .ba-teamgrp[data-team="1"] .ba-teamgrp__head { grid-column: 3 / 5; }
  .ba-scores .ba-teamgrp__head b { gap: 6px; font-size: 12px; letter-spacing: .06em; white-space: nowrap; }
  .ba-scores .ba-teamgrp__head b::before { width: 8px; height: 8px; box-shadow: none; }
  .ba-scores .ba-teamgrp__head .ba-sum { font-size: 12px; }
  .ba-scores .ba-teamgrp .ba-score { grid-row: 2; }

  @keyframes ba-drift-v {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(0, calc(var(--idle-n, 16) * -1 * (var(--ih) + 4px)), 0); }
  }
}
@media (max-width: 640px) and (prefers-reduced-motion: reduce), (max-width: 950px) and (max-height: 500px) and (prefers-reduced-motion: reduce) {
  .ba-lanes .ba-lane .cs-strip.is-idle { animation: none; }
}
@media (prefers-reduced-motion: reduce) {
  .ba-drop.is-new, .ba-final, .ba-final__crown { animation: none; }
}

/* ═══════════════ ТЕМА САЙТА: ИНДИГО-СТОЛ ═══════════════
   (2026-10-15) Раздел переведён на язык апгрейда, HiLo, контрактов, краша
   и «1 Клика»: индиго-поверхности со светлой кромкой сверху, «колодцы» под
   кейсы и ленты, лаймовое главное действие, Oswald в заголовках и цифрах,
   Inter в тексте. Правила выше не удалены — этот раздел перекрывает их
   весом (префикс .bt-body: mobile.css и drophub.skincard.css идут позже) и
   порядком. Раскладку он почти не трогает — цвет, рамки и тени; мобильные
   колонки арены живут в блоке «ТЕЛЕФОН» выше, а здесь в конце — только их
   перекраска.

   Цвета: лайм — действие, «включено» и победитель; фиолет — идущая битва
   и подсветка стола; деньги — прежний зелёный --money, как везде на сайте.
   Метку «бот» и круглые аватарки со значком уровня рисует battles.view.js
   (стили bt-view-css) — здесь они не переопределяются, только свечение
   победителя.

   Фото в шапке битвы (assets/battle_head_bg.webp) осталось: тонировано
   индиго, по краям виньетка, под текстом и каруселью затемнение. */
body.bt-body { background-color: #1A1430; }
.bt-body {
  --btx-glass: linear-gradient(180deg, #2C2452 0%, #241D45 100%);
  --btx-glass-hi: linear-gradient(180deg, #342B60 0%, #2A2250 100%);
  --btx-well: linear-gradient(180deg, #150F2B 0%, #1B1436 100%);
  --btx-table:
    radial-gradient(40% 46% at 50% 0%, rgba(140, 90, 255, .26), transparent 72%),
    radial-gradient(60% 50% at 0% 100%, rgba(110, 80, 230, .12), transparent 70%),
    radial-gradient(60% 50% at 100% 100%, rgba(110, 80, 230, .12), transparent 70%),
    linear-gradient(180deg, #261E4A 0%, #201941 58%, #1D163A 100%);
  --btx-line: #3A3166; --btx-line2: #4C4182;
  --btx-hl: inset 0 1px 0 rgba(255, 255, 255, .07);
  --btx-text: #F5F3FF; --btx-dim: #BDB7DE; --btx-mute: #A69FCF; --btx-faint: #8F87B8;
  --btx-lime: #D7FF00;
  --btx-run: #C46BFF;
  /* «включено» — индиго-заливка и чистая лаймовая рамка, как активный
     множитель в апгрейде: полупрозрачный лайм на индиго давал хаки */
  --btx-on-bg: linear-gradient(180deg, #2E2658 0%, #241D45 100%);
  --btx-on-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 0 12px rgba(215, 255, 0, .16);
  --btx-cta: linear-gradient(180deg, #EEFF7A 0%, #D7FF00 46%, #B4E200 100%);
  --btx-cta-shadow: 0 12px 26px -12px rgba(215, 255, 0, .5), 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);
}
/* старые токены раздела — на индиго: на них стоят поля, сегменты и
   кнопки выше, которые здесь поимённо не перечислены */
.bt-body .bt-page, .bt-body .ba-page {
  --cs-ink: #150F2B;
  --cs-panel: rgba(34, 27, 62, .92);
  --cs-btn: #2C2452;
  --cs-btn-dim: #221B3E;
  --cs-btn-hi: #372E62;
  --cs-text-dim: var(--btx-mute);
  --lime-tile: #D7FF00;
  --text-mute: var(--btx-mute);
}

/* ─── кнопки ─── */
.bt-body .bt-btn { color: var(--btx-text); }
.bt-body .bt-btn:focus-visible, .bt-body .bt-iconbtn:focus-visible, .bt-body .ba-iconbtn:focus-visible,
.bt-body .ba-back:focus-visible, .bt-body .bt-chip:focus-visible, .bt-body .bt-seg button:focus-visible {
  outline: 2px solid var(--btx-lime); outline-offset: 2px;
}
/* главное действие — сплошной лайм: «Создать битву», «Создать за …»,
   «Создать такую же», вход гостя и «Войти за …» по центру арены */
.bt-body .bt-btn--create, .bt-body .bt-btn--create:hover,
.bt-body .bt-btn--same, .bt-body .bt-btn--same:hover,
.bt-body .bt-btn--login,
.bt-body #ba-callall[data-mode="join"] {
  border: 0; border-radius: 14px;
  background: var(--btx-cta); color: #10150A;
  box-shadow: var(--btx-cta-shadow);
  font-family: var(--f-cond); font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  transition: filter .14s, transform .14s;
}
.bt-body .bt-btn--create { height: 48px; padding: 0 28px; font-size: 15px; }
.bt-body .bt-btn--create svg, .bt-body .bt-btn--login svg { color: #10150A; }
@media (hover: hover) {
  .bt-body .bt-btn--create:hover:not(:disabled), .bt-body .bt-btn--same:hover:not(:disabled),
  .bt-body .bt-btn--login:hover, .bt-body #ba-callall[data-mode="join"]:hover { filter: brightness(1.06); }
}
.bt-body .bt-btn--create:active:not(:disabled), .bt-body .bt-btn--same:active:not(:disabled),
.bt-body .bt-btn--login:active, .bt-body #ba-callall[data-mode="join"]:active { transform: translateY(1px); }
.bt-body .bt-btn--create:disabled, .bt-body .bt-btn--same:disabled { opacity: .4; filter: saturate(.5); box-shadow: none; }
/* вход в чужую битву из строки — лаймовая рамка на индиго, сплошным лаймом
   только по наведению: строк много, а главная кнопка страницы одна */
.bt-body .bt-btn--join, .bt-body .bt-btn--join:hover {
  border: 1px solid var(--btx-lime); border-radius: 13px;
  background: var(--btx-on-bg); color: var(--btx-lime);
  box-shadow: var(--btx-on-shadow); filter: none;
  font-family: var(--f-cond); font-weight: 600; letter-spacing: .08em;
}
@media (hover: hover) {
  .bt-body .bt-btn--join:hover { background: var(--btx-cta); color: #10150A; }
}
/* «Смотреть», «Итоги», «Позвать ботов», «К списку битв» — индиго-стекло */
.bt-body .bt-btn--watch, .bt-body .bt-btn--edit {
  border: 1px solid var(--btx-line); border-radius: 13px;
  background: var(--btx-glass); color: var(--btx-text); box-shadow: var(--btx-hl);
  font-family: var(--f-cond); font-weight: 500; letter-spacing: .08em;
}
.bt-body .bt-btn--watch:hover, .bt-body .bt-btn--edit:hover { border-color: var(--btx-line2); background: var(--btx-glass-hi); }
.bt-body .bt-btn--watch svg { color: var(--btx-mute); }
.bt-body .bt-btn--watch.is-done { color: var(--btx-dim); }
.bt-body .bt-btn--bot { border: 1px solid rgba(166, 120, 255, .38); background: rgba(166, 120, 255, .14); color: #DCCBFF; }
.bt-body .bt-btn--bot:hover { border-color: rgba(166, 120, 255, .6); background: rgba(166, 120, 255, .24); }
.bt-body .bt-iconbtn {
  border: 1px solid var(--btx-line); background: var(--btx-glass); color: var(--btx-dim);
  box-shadow: var(--btx-hl); -webkit-backdrop-filter: none; backdrop-filter: none;
}
.bt-body .bt-iconbtn:hover { border-color: var(--btx-line2); background: var(--btx-glass-hi); color: #fff; }

/* Гость: вместо «Создать за …», «Войти за …» и «Создать такую же» —
   вход через Steam (без входа сервер всё равно откажет). Класс dh-user
   на <html> ставит drophub.auth.js; так же устроена кнопка входа в плинко. */
.bt-body .bt-btn--login { display: none; height: 48px; padding: 0 22px; font-size: 14px; text-decoration: none; }
.bt-body .bt-btn--login svg { width: 18px; height: 18px; flex: none; }
html:not(.dh-user) .bt-body #bt-c-go,
html:not(.dh-user) .bt-body #ba-same,
html:not(.dh-user) .bt-body #ba-callall[data-mode="join"] { display: none; }
html:not(.dh-user) .bt-body .bt-sheet__foot > .bt-btn--login,
html:not(.dh-user) .bt-body .ba-final > .bt-btn--login,
html:not(.dh-user) .bt-body .ba-arena__center:has(> #ba-callall[data-mode="join"]:not([hidden])) > .bt-btn--login { display: inline-flex; }
.bt-body .ba-arena__center .bt-btn--login { height: 42px; font-size: 13px; }

/* ═══ ЛОББИ ═══ */

/* заголовок по центру на линиях, как у апгрейда и «1 Клика»; под ним —
   «Честная игра» слева и действия справа */
.bt-body .bt-top { flex-direction: column; align-items: stretch; gap: 16px; min-height: 0; }
.bt-body .bt-title { justify-content: center; gap: 12px; }
.bt-body .bt-title::before, .bt-body .bt-title::after { content: ''; flex: 1; min-width: 24px; height: 1px; }
.bt-body .bt-title::before { margin-right: 6px; background: linear-gradient(90deg, transparent, rgba(166, 120, 255, .35)); }
.bt-body .bt-title::after { margin-left: 6px; background: linear-gradient(270deg, transparent, rgba(166, 120, 255, .35)); }
.bt-body .bt-title__badge { width: 34px; height: 34px; }
.bt-body .bt-title h1 {
  font-size: 30px; font-weight: 600; line-height: 1.1; letter-spacing: .06em; color: var(--btx-text);
  white-space: nowrap; text-shadow: 0 0 24px rgba(166, 44, 255, .45);
}
.bt-body .bt-top__tools { justify-content: flex-end; gap: 10px; }

/* ─── строка битвы ─── */
.bt-body .bt-list { gap: 12px; }
.bt-body .bt-empty { color: var(--btx-mute); }
.bt-body .bt-row {
  border: 1px solid var(--btx-line); border-radius: 20px;
  background: var(--btx-glass);
  box-shadow: 0 14px 30px rgba(8, 4, 24, .3), var(--btx-hl);
  -webkit-backdrop-filter: none; backdrop-filter: none;
  transition: border-color .14s;
}
.bt-body .bt-row:hover { border-color: var(--btx-line2); background: var(--btx-glass-hi); }
.bt-body .bt-row:has(.bt-row__actions:hover) { border-color: var(--btx-line); background: var(--btx-glass); }
.bt-body .bt-row.is-mine { border-color: rgba(215, 255, 0, .5); }
/* доигранная — тише: её смотрят ради итога, а не чтобы войти */
.bt-body .bt-row.is-done { background: linear-gradient(180deg, #272049 0%, #211A40 100%); }
/* идущие и завершённые приглушены — яркими остаются те, куда можно войти и свои;
   кнопка не тускнеет, при наведении на строку всё возвращается */
.bt-body .bt-row.is-running:not(.is-mine) :is(.bt-row__head, .bt-row__cases, .bt-seats),
.bt-body .bt-row.is-done:not(.is-mine) :is(.bt-row__head, .bt-row__cases, .bt-seats) {
  opacity: .62; filter: saturate(.7); transition: opacity .14s, filter .14s;
}
.bt-body .bt-row.is-done:not(.is-mine) :is(.bt-row__head, .bt-row__cases, .bt-seats) { opacity: .5; filter: saturate(.5); }
.bt-body .bt-row.is-running:not(.is-mine):hover :is(.bt-row__head, .bt-row__cases, .bt-seats),
.bt-body .bt-row.is-done:not(.is-mine):hover :is(.bt-row__head, .bt-row__cases, .bt-seats) { opacity: .9; filter: none; }
.bt-body .bt-row__head {
  height: auto; min-height: 46px; padding: 6px 18px 0; border-radius: 19px 19px 0 0;
  background: none; color: var(--btx-dim); font-size: 12px;
}
.bt-body .bt-row__stats { flex-wrap: wrap; row-gap: 6px; min-width: 0; }
/* состояние словом (battles.view.js): ждёт — лайм, идёт — фиолет, итог — тихо */
.bt-state {
  display: inline-flex; align-items: center; gap: 7px; flex: none;
  height: 24px; margin-right: 12px; padding: 0 10px; border-radius: 12px;
  font-family: var(--f-cond); font-size: 12px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase;
  color: var(--btx-faint); background: rgba(255, 255, 255, .05);
}
.bt-state::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.bt-row.is-waiting .bt-state { color: var(--btx-lime); background: rgba(215, 255, 0, .08); box-shadow: inset 0 0 0 1px rgba(215, 255, 0, .28); }
.bt-row.is-running .bt-state { color: var(--btx-run); background: rgba(196, 107, 255, .12); box-shadow: inset 0 0 0 1px rgba(196, 107, 255, .3); }
.bt-row.is-running .bt-state::before { animation: bt-live 1.4s ease-in-out infinite; }
@keyframes bt-live { 50% { opacity: .25; } }
.bt-body .bt-stat { border-right-color: rgba(166, 120, 255, .18); color: var(--btx-dim); }
.bt-body .bt-stat:last-child { border-right: 0; }
.bt-body .bt-stat svg { color: var(--btx-mute); }
.bt-body .bt-stat b { font-family: var(--f-cond); font-size: 15px; font-weight: 600; letter-spacing: .02em; color: var(--btx-text); }
.bt-body .bt-stat .bt-ico { color: var(--btx-dim); }
.bt-body .bt-stat .bt-ico--fast { color: var(--btx-lime); }
.bt-body .bt-row__wait { color: var(--btx-dim); white-space: nowrap; }
.bt-body .bt-row__wait b { color: var(--btx-lime); font-family: var(--f-cond); font-size: 15px; font-weight: 600; }
.bt-body .bt-row__unboxed { color: var(--btx-mute); white-space: nowrap; }
.bt-body .bt-row__unboxed b { font-family: var(--f-cond); font-size: 15px; font-weight: 600; color: var(--money); }
.bt-body .bt-row__body { gap: 18px; padding: 8px 14px 14px; }
/* кейсы битвы — в колодце, у плитки пятно цвета кейса */
.bt-body .bt-cases {
  gap: 6px; padding: 6px; border-radius: 14px; background: var(--btx-well);
  box-shadow: inset 0 0 0 1px rgba(166, 120, 255, .1), inset 0 2px 10px rgba(6, 2, 20, .45);
}
.bt-body .bt-tile {
  border-radius: 11px;
  background: radial-gradient(64% 56% at 50% 58%, color-mix(in srgb, var(--tint) 26%, transparent), transparent 76%), #1E1840;
}
.bt-body .bt-tile.is-now { border-color: var(--btx-lime); box-shadow: 0 0 0 1px rgba(215, 255, 0, .22); }
.bt-body .bt-row__side { justify-content: center; }
.bt-body .bt-seats { height: 40px; }
.bt-body .bt-row__actions { margin-top: 12px; }
/* свободное место — тот же пунктирный круг, в цвет индиго */
.bt-body .bt-ava--empty:not(.is-lvl) { background: rgba(21, 15, 43, .7); border-color: rgba(166, 120, 255, .45); }

/* ─── фильтры ─── */
.bt-body .bt-filters__head > span { font-family: var(--f-cond); font-size: 16px; font-weight: 500; letter-spacing: .1em; color: var(--btx-text); }
.bt-body .bt-filters__head i { color: var(--btx-mute); }
.bt-body .bt-seg button {
  border: 1px solid var(--btx-line); background: var(--btx-glass); color: var(--btx-mute);
  box-shadow: var(--btx-hl);
}
.bt-body .bt-seg button:hover { color: var(--btx-text); border-color: var(--btx-line2); background: var(--btx-glass-hi); }
.bt-body .bt-seg button.is-on, .bt-body .bt-seg button.is-on:hover {
  color: var(--btx-lime); border-color: var(--btx-lime); background: var(--btx-on-bg); box-shadow: var(--btx-on-shadow);
}
.bt-body .bt-field { border: 1px solid var(--btx-line); background: var(--btx-well); box-shadow: inset 0 2px 8px rgba(6, 2, 20, .35); }
.bt-body .bt-field:focus-within { border-color: var(--btx-line2); }
.bt-body .bt-field input { color: var(--btx-text); }
.bt-body .bt-field input::placeholder { color: var(--btx-faint); font-family: var(--f-body, Inter, sans-serif); font-size: 13px; font-weight: 500; }
.bt-body .bt-field button { border-color: var(--btx-line2); background: rgba(166, 120, 255, .1); color: var(--btx-dim); }
.bt-body .bt-field button:hover { border-color: var(--btx-lime); color: var(--btx-lime); }
.bt-body .bt-select__btn { border: 1px solid var(--btx-line); background: var(--btx-glass); color: var(--btx-text); box-shadow: var(--btx-hl); }
.bt-body .bt-select__btn:hover, .bt-body .bt-select.is-open .bt-select__btn { border-color: var(--btx-line2); background: var(--btx-glass-hi); }
.bt-body .bt-select__btn i { border-color: var(--btx-mute); }
.bt-body .bt-select__list {
  border: 1px solid var(--btx-line2); background: #241D45;
  -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: 0 18px 40px rgba(8, 4, 24, .6);
}
.bt-body .bt-select__list button { color: var(--btx-dim); }
.bt-body .bt-select__list button:hover { background: rgba(166, 120, 255, .14); color: #fff; }
.bt-body .bt-select__list button.is-on { background: var(--btx-on-bg); color: var(--btx-lime); box-shadow: inset 0 0 0 1px var(--btx-lime); }
.bt-body .bt-fbox {
  border: 1px solid var(--btx-line); border-radius: 18px; background: rgba(34, 27, 62, .6);
  box-shadow: var(--btx-hl); -webkit-backdrop-filter: none; backdrop-filter: none;
}
.bt-body .bt-fbox__t { font-family: var(--f-cond); font-size: 13px; font-weight: 500; letter-spacing: .12em; color: var(--btx-mute); }
.bt-body .bt-opt__t { color: var(--btx-dim); }
.bt-body .bt-opt__t i { color: var(--btx-mute); }

/* ─── окно создания — тот же стол: лампа сверху, индиго ─── */
.bt-body .bt-modal { background: rgba(12, 8, 28, .74); }
.bt-body .bt-sheet {
  overflow: hidden; border: 1px solid var(--btx-line); border-radius: 26px;
  background: var(--btx-table);
  box-shadow: 0 30px 80px rgba(6, 2, 20, .6), var(--btx-hl);
}
.bt-body .bt-sheet__head { height: 64px; padding: 0 14px 0 24px; border-bottom-color: rgba(166, 120, 255, .14); }
.bt-body .bt-sheet__head b { font-size: 22px; font-weight: 600; letter-spacing: .06em; color: var(--btx-text); }
.bt-body .bt-sheet__head .bt-iconbtn { border-color: transparent; background: none; box-shadow: none; }
.bt-body .bt-sheet__head .bt-iconbtn:hover { border-color: var(--btx-line); background: rgba(166, 120, 255, .1); }
.bt-body .bt-sheet__body { padding: 16px 24px 20px; }
.bt-body .bt-sheet__foot { padding: 14px 24px; border-top-color: rgba(166, 120, 255, .14); background: rgba(21, 15, 43, .55); }
.bt-body .bt-sheet__sum { color: var(--btx-mute); }
.bt-body .bt-sheet__sum b { font-family: var(--f-cond); font-size: 20px; font-weight: 600; color: var(--btx-text); }
.bt-body .bt-sheet__foot .bt-btn--create, .bt-body .bt-sheet__foot .bt-btn--login { min-width: 250px; height: 52px; }
.bt-body .bt-lbl { font-family: var(--f-cond); font-size: 12px; font-weight: 500; letter-spacing: .14em; color: var(--btx-mute); }
.bt-body .bt-lbl i { color: var(--btx-lime); font-weight: 600; }
.bt-body .bt-hint { color: var(--btx-dim); }
.bt-body .bt-chip { border: 1px solid var(--btx-line); background: var(--btx-glass); color: var(--btx-mute); box-shadow: var(--btx-hl); }
.bt-body .bt-chip:hover { color: var(--btx-text); border-color: var(--btx-line2); background: var(--btx-glass-hi); }
.bt-body .bt-chip.is-on, .bt-body .bt-chip.is-on:hover { color: var(--btx-lime); border-color: var(--btx-lime); background: var(--btx-on-bg); box-shadow: var(--btx-on-shadow); }
.bt-body .bt-chip.is-on svg { color: var(--btx-lime); }
.bt-body .bt-pickgroup__title { font-family: var(--f-cond); font-size: 15px; font-weight: 500; letter-spacing: .12em; color: var(--btx-text); }
.bt-body .bt-pickgroup__title::before { background: linear-gradient(90deg, transparent, rgba(166, 120, 255, .35)); }
.bt-body .bt-pickgroup__title::after { background: linear-gradient(90deg, rgba(166, 120, 255, .35), transparent); }
.bt-body .bt-pickbox {
  border: 1px solid var(--btx-line); border-radius: 16px;
  background: radial-gradient(70% 46% at 50% 34%, color-mix(in srgb, var(--tint) 22%, transparent), transparent 74%), var(--btx-glass);
  box-shadow: var(--btx-hl);
}
.bt-body .bt-pickbox:hover { border-color: var(--btx-line2); }
.bt-body .bt-pickbox.is-on {
  border-color: var(--btx-lime);
  background: radial-gradient(70% 46% at 50% 34%, color-mix(in srgb, var(--tint) 32%, transparent), transparent 74%), var(--btx-on-bg);
  box-shadow: var(--btx-on-shadow);
}
.bt-body .bt-pickbox b { font-family: var(--f-cond); font-size: 13px; font-weight: 500; letter-spacing: .06em; color: var(--btx-text); }
.bt-body .bt-pickbox u { font-family: var(--f-cond); font-size: 14px; font-weight: 600; color: var(--money); }
.bt-body .bt-qty button { border: 1px solid var(--btx-line2); background: rgba(166, 120, 255, .12); color: var(--btx-text); }
.bt-body .bt-qty button:hover { border-color: var(--btx-lime); color: var(--btx-lime); background: rgba(166, 120, 255, .18); }
.bt-body .bt-qty i { font-family: var(--f-cond); font-size: 15px; font-weight: 600; color: var(--btx-dim); }
.bt-body .bt-pickbox.is-on .bt-qty i { color: var(--btx-lime); }

/* ═══ КОМНАТА ═══ */

/* шапка: фото остаётся — тонировка индиго, виньетка по краям, тёмная
   середина под каруселью; диагональная штриховка снята */
.bt-body .ba-head {
  border: 1px solid var(--btx-line); border-radius: 24px;
  background:
    radial-gradient(60% 120% at 50% 100%, color-mix(in srgb, var(--tint) 18%, transparent), transparent 70%),
    radial-gradient(130% 160% at 50% 50%, transparent 46%, rgba(14, 9, 32, .8) 100%),
    linear-gradient(90deg, rgba(26, 20, 48, .9) 0%, rgba(26, 20, 48, .45) 24%, rgba(26, 20, 48, .82) 50%, rgba(26, 20, 48, .45) 76%, rgba(26, 20, 48, .9) 100%),
    linear-gradient(180deg, rgba(60, 40, 140, .32), rgba(29, 22, 58, .78)),
    url(assets/battle_head_bg.webp) center 38% / cover no-repeat, #1D163A;
  box-shadow: 0 20px 50px rgba(8, 4, 24, .4), var(--btx-hl);
}
.bt-body .ba-head::before { display: none; }
.bt-body .ba-back, .bt-body .ba-iconbtn {
  border: 1px solid rgba(166, 120, 255, .26); background: rgba(21, 15, 43, .66); color: var(--btx-text);
}
.bt-body .ba-back:hover, .bt-body .ba-iconbtn:hover { border-color: var(--btx-line2); background: rgba(55, 46, 98, .85); }
.bt-body .ba-iconbtn.is-off { color: var(--btx-faint); }
.bt-body .ba-iconbtn.is-ok { color: var(--btx-lime); border-color: rgba(215, 255, 0, .5); }
.bt-body .ba-total { color: var(--btx-dim); font-weight: 600; }
.bt-body .ba-total b { font-family: var(--f-cond); font-size: 22px; font-weight: 600; letter-spacing: .02em; color: var(--money); }
.bt-body .ba-head__meta { color: var(--btx-dim); }
.bt-body .ba-head__meta em { background: rgba(166, 120, 255, .3); }
.bt-body .ba-head__meta .bt-ico--fast { color: var(--btx-lime); }
/* медальон: фиолетовая кромка, индиго внутри */
.bt-body .ba-hex { background: #241D45; }
.bt-body .ba-hex::before { background: linear-gradient(180deg, #7A64D0, #3A3166 60%, #2C2452); }
.bt-body .ba-hex::after { background: linear-gradient(180deg, #2C2452 0%, #1B1436 100%); }
.bt-body .ba-hex__round { font-family: var(--f-cond); font-size: 14px; font-weight: 600; letter-spacing: .06em; color: var(--btx-text); }
.bt-body .ba-hex__round.is-state { color: var(--btx-lime); font-size: 13px; letter-spacing: .08em; }
.bt-body .ba-hex__name { color: var(--btx-dim); }
.bt-body .ba-hex__price { background: rgba(21, 15, 43, .8); box-shadow: inset 0 0 0 1px rgba(166, 120, 255, .3); color: var(--money); font-family: var(--f-cond); font-size: 13px; font-weight: 600; }

/* арена — стол: лампа сверху, сетка 44 px, гаснущая к краям, редкие искры */
.bt-body .ba-arena {
  isolation: isolate;
  border: 1px solid var(--btx-line); border-radius: 26px;
  background: var(--btx-table);
  box-shadow: 0 24px 60px rgba(8, 4, 24, .45), var(--btx-hl), inset 0 0 120px rgba(14, 8, 36, .35);
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
.bt-body .ba-arena::before, .bt-body .ba-arena::after {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; border-radius: inherit;
}
.bt-body .ba-arena::before {
  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: center -1px;
  -webkit-mask-image: radial-gradient(64% 70% at 50% 34%, #000 0%, rgba(0, 0, 0, .35) 55%, transparent 85%);
          mask-image: radial-gradient(64% 70% at 50% 34%, #000 0%, rgba(0, 0, 0, .35) 55%, transparent 85%);
}
.bt-body .ba-arena::after {
  background:
    radial-gradient(1.6px 1.6px at 6% 12%, rgba(215, 255, 0, .75), transparent),
    radial-gradient(1.2px 1.2px at 14% 88%, rgba(255, 255, 255, .5), transparent),
    radial-gradient(1.8px 1.8px at 31% 6%, rgba(166, 120, 255, .8), transparent),
    radial-gradient(1.3px 1.3px at 69% 7%, rgba(166, 120, 255, .8), transparent),
    radial-gradient(1.2px 1.2px at 86% 90%, rgba(255, 255, 255, .45), transparent),
    radial-gradient(1.7px 1.7px at 94% 14%, rgba(215, 255, 0, .65), transparent);
  animation: bt-twinkle 5s ease-in-out infinite alternate;
}
@keyframes bt-twinkle { from { opacity: .45; } to { opacity: 1; } }
.bt-body .ba-arena__chip {
  border: 1px solid rgba(166, 120, 255, .22); background: rgba(21, 15, 43, .72); color: var(--btx-dim);
  font-family: var(--f-cond); font-weight: 500; letter-spacing: .1em;
}
.bt-body .ba-arena__chip--pot { color: var(--money); font-size: 17px; font-weight: 600; letter-spacing: .02em; }
/* Цифры Oswald сидят в строке ниже её середины, а монета — ровно по
   центру плашки: на глаз монета висела над суммой. Опускаем её на 1 px. */
.bt-body .ba-arena__chip--pot .kz-coin-img { position: relative; top: 1px; }
/* указатель через все дорожки — тонкий лайм без ореола */
.bt-body .ba-lanes::before { background: linear-gradient(180deg, var(--btx-lime), rgba(215, 255, 0, .2)); box-shadow: none; }
.bt-body .ba-lane { border-color: rgba(166, 120, 255, .16); background: var(--btx-well); }
.bt-body .ba-lane.is-me { border-color: rgba(215, 255, 0, .42); }
.bt-body .ba-lane.is-win { border-color: var(--btx-lime); box-shadow: inset 0 0 0 1px rgba(215, 255, 0, .3); }
.bt-body .ba-lanes .ba-x .ba-x__logo { background: #1D163A; border-color: var(--btx-line); box-shadow: 0 4px 12px rgba(8, 4, 24, .5); }
.bt-body .ba-lane__who {
  background: rgba(21, 15, 43, .84); box-shadow: inset 0 0 0 1px rgba(166, 120, 255, .2);
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
.bt-body .ba-lane__who b { color: var(--btx-text); }
.bt-body .ba-lane__who b.is-mute { color: var(--btx-faint); }
.bt-body .ba-sum { font-family: var(--f-cond); font-weight: 600; }
.bt-body .ba-reel::before { background: linear-gradient(90deg, #170F2E, rgba(23, 15, 46, 0)); }
.bt-body .ba-reel::after { background: linear-gradient(270deg, #170F2E, rgba(23, 15, 46, 0)); }

/* итог поверх дорожек: победитель — лаймом, стол — крупно */
.bt-body .ba-final { background: rgba(21, 15, 43, .58); }
.bt-body .ba-final__crown { background: var(--btx-cta); color: #10150A; box-shadow: 0 0 0 2px #1D163A, 0 6px 14px rgba(8, 4, 24, .5); }
.bt-body .ba-final__p.is-winner > b { color: var(--btx-lime); }
.bt-body .ba-final__p.is-winner .bt-ava:not(.is-lvl) { box-shadow: 0 0 0 3px #1D163A, 0 0 0 5px var(--btx-lime); }
.bt-body .ba-final__p.is-winner .bt-ava.is-lvl { filter: drop-shadow(0 0 10px rgba(215, 255, 0, .4)) drop-shadow(0 4px 10px rgba(0, 0, 0, .5)); }
.bt-body .ba-final__p u { color: var(--money); font-family: var(--f-cond); font-weight: 600; }
.bt-body .ba-final__sum { font-weight: 600; color: var(--btx-text); text-shadow: 0 2px 18px rgba(8, 4, 24, .8); }
.bt-body .ba-final__me { color: var(--btx-dim); }
.bt-body .ba-final__me b { font-family: var(--f-cond); font-size: 17px; font-weight: 600; }
.bt-body .ba-final__me.is-up b { color: var(--btx-lime); }
.bt-body .ba-final .bt-btn--login { width: min(420px, 100%); height: 50px; }

/* счёт по игрокам */
.bt-body .ba-score {
  border: 1px solid var(--btx-line); border-radius: 18px; background: var(--btx-glass);
  box-shadow: var(--btx-hl); -webkit-backdrop-filter: none; backdrop-filter: none;
}
.bt-body .ba-scores:not(.is-done) .ba-score { border-color: var(--btx-line); background: rgba(34, 27, 62, .72); }
.bt-body .ba-scores.is-done .ba-score.is-lead {
  border-color: var(--btx-lime);
  background: radial-gradient(70% 50% at 50% 0%, rgba(215, 255, 0, .1), transparent 70%), var(--btx-glass);
}
.bt-body .ba-scores.is-done .ba-score.is-back { border-color: rgba(255, 92, 92, .28); background: rgba(30, 23, 54, .8); }
.bt-body .ba-score__who { color: var(--btx-text); }
.bt-body .ba-score__sum { background: var(--btx-well); box-shadow: inset 0 0 0 1px rgba(166, 120, 255, .14); }
.bt-body .ba-score__sum .ba-sum { font-size: 16px; text-shadow: none; }
.bt-body .ba-scores.is-done .ba-score.is-lead .ba-score__sum .ba-sum { color: var(--btx-lime); }
.bt-body .ba-score.is-lead .ba-score__verdict:not(:empty) { color: var(--btx-lime); }
.bt-body .ba-score__verdict { font-family: var(--f-cond); font-weight: 600; letter-spacing: .1em; }
.bt-body .ba-scores .ba-x i { background: #1D163A; border-color: var(--btx-line); box-shadow: 0 6px 16px rgba(8, 4, 24, .5); }
.bt-body .ba-drop {
  background: linear-gradient(90deg, color-mix(in srgb, var(--rar) 22%, #1E1840) 0%, #1E1840 58%);
  border-color: color-mix(in srgb, var(--rar) 28%, #3A3166);
}
.bt-body .ba-drop__type { color: var(--btx-dim); }
.bt-body .ba-drop__name { color: var(--btx-text); }
.bt-body .ba-drop__price { font-family: var(--f-cond); font-weight: 600; }
.bt-body .ba-drop__wear { border-color: rgba(166, 120, 255, .22); background: rgba(166, 120, 255, .12); }
.bt-body .ba-teamgrp {
  background: linear-gradient(180deg, color-mix(in srgb, var(--tc) 10%, transparent), transparent 60%), rgba(29, 22, 58, .55);
}
.bt-body .ba-teamgrp__head b { font-weight: 500; }
.bt-body .ba-teamgrp__head b::before { box-shadow: none; }
.bt-body .ba-teamgrp__head .ba-sum { text-shadow: none; }
.bt-body .ba-scores.is-done .ba-teamgrp.is-lead { border-color: var(--btx-lime); }
.bt-body .ba-scores.is-done .ba-teamgrp.is-lead .ba-teamgrp__head .ba-sum { color: var(--btx-lime); }
.bt-body .ba-result { border-color: var(--btx-line); background: var(--btx-glass); color: var(--btx-dim); }
.bt-body .ba-result b { font-family: var(--f-cond); font-weight: 600; }
.bt-body .ba-result.is-up { border-color: rgba(215, 255, 0, .5); }
.bt-body .ba-result.is-up b { color: var(--btx-lime); }

/* ═══ УЗКИЕ ЭКРАНЫ ═══ */
@media (max-width: 1100px) {
  .bt-body .bt-filters { border: 1px solid var(--btx-line); background: #1D163A; box-shadow: 0 24px 60px rgba(8, 4, 24, .6); }
}
@media (max-width: 760px) {
  .bt-body .bt-top { gap: 12px; }
  .bt-body .bt-title { gap: 10px; }
  .bt-body .bt-title::before, .bt-body .bt-title::after { min-width: 14px; }
  .bt-body .bt-title__badge { width: 28px; height: 28px; }
  .bt-body .bt-title h1 { font-size: 24px; }
  .bt-body .bt-top__tools { width: 100%; }
  .bt-body .bt-top__tools .bt-btn--create { flex: 1; min-width: 0; height: 46px; padding: 0 16px; font-size: 14px; }
  .bt-body .bt-filters { border: 0; background: none; box-shadow: none; padding: 0; }
  .bt-body .bt-row { border-radius: 18px; }
  /* значки набора — одной строкой; «Ждём N игроков» при нехватке места
     уходит строкой ниже, а не разрывает значки */
  .bt-body .bt-row__head { flex-wrap: wrap; row-gap: 4px; padding: 8px 12px 0; }
  .bt-body .bt-row__stats { flex-wrap: nowrap; }
  .bt-body .bt-row__body { gap: 12px; padding: 8px 10px 12px; }
  .bt-body .bt-modal { padding: 10px; }
  .bt-body .bt-sheet { max-height: calc(100vh - 20px); border-radius: 22px; }
  .bt-body .bt-sheet__head { height: 56px; padding: 0 8px 0 16px; }
  .bt-body .bt-sheet__head b { font-size: 19px; }
  .bt-body .bt-sheet__body { padding: 12px 14px 16px; }
  .bt-body .bt-sheet__foot { flex-wrap: wrap; padding: 12px 14px; }
  .bt-body .bt-sheet__foot .bt-btn--create, .bt-body .bt-sheet__foot .bt-btn--login { flex: 1 1 100%; min-width: 0; height: 50px; }
}
@media (max-width: 374px) {
  .bt-body .bt-title h1 { font-size: 21px; }
  .bt-body .bt-row__head { padding: 8px 10px 0; }
  .bt-body .bt-stat { padding: 0 8px; }
  .bt-body .bt-state { margin-right: 8px; }
  /* «Общая сумма битвы:» переносится, а не залезает под кнопки шапки */
  .bt-body .ba-total { white-space: normal; line-height: 1.25; }
}
/* телефон: колонки арены (раскладка — блок «ТЕЛЕФОН» выше); здесь только
   то, что общий раздел темы выше перебил бы весом */
@media (max-width: 640px), (max-width: 950px) and (max-height: 500px) {
  .bt-body .ba-head { border-radius: 18px; }
  .bt-body .ba-arena { border-radius: 18px; box-shadow: var(--btx-hl); }
  .bt-body .ba-hex { background: rgba(21, 15, 43, .78); box-shadow: inset 0 0 0 1px rgba(166, 120, 255, .24); }
  .bt-body .ba-case.is-now::after { background: var(--btx-lime); }
  .bt-body .ba-lanes .ba-lane__who { background: rgba(29, 22, 58, .9); box-shadow: none; }
  .bt-body .ba-lanes .ba-reel::before {
    background: linear-gradient(180deg, #170F2E 0%, rgba(23, 15, 46, 0) 24%, rgba(23, 15, 46, 0) 76%, #170F2E 100%);
  }
  .bt-body .ba-lanes .ba-reel::after {
    background: linear-gradient(90deg, var(--btx-lime), rgba(215, 255, 0, .3) 50%, var(--btx-lime));
  }
  .bt-body .ba-scores .ba-score, .bt-body .ba-scores:not(.is-done) .ba-score { border: 0; background: none; box-shadow: none; }
  .bt-body .ba-scores.is-done .ba-score.is-lead { border: 1px solid var(--btx-lime); background: rgba(34, 27, 62, .8); }
  .bt-body .ba-scores.is-done .ba-score.is-back { border: 1px solid rgba(255, 92, 92, .28); background: rgba(30, 23, 54, .8); }
  .bt-body .ba-scores .ba-drop { background: linear-gradient(180deg, color-mix(in srgb, var(--rar) 26%, #1E1840) 0%, #1E1840 78%); }
  .bt-body .ba-total b { font-size: 17px; }
  .bt-body .ba-hex__round { font-size: 12px; }
  .bt-body .ba-arena__chip--pot { font-size: 14px; }
  .bt-body .ba-scores .ba-teamgrp__head { background: color-mix(in srgb, var(--tc) 12%, rgba(29, 22, 58, .85)); }
  .bt-body .ba-final { background: rgba(21, 15, 43, .92); }
}
@media (prefers-reduced-motion: reduce) {
  .bt-row.is-running .bt-state::before, .bt-body .ba-arena::after { animation: none; }
  .bt-body .bt-btn, .bt-body .bt-row { transition: none; }
}

/* ═══ ВЫБРАННОЕ И ВКЛЮЧЁННОЕ — ГРАДИЕНТ ЛОГОТИПА ═══
   Статичный градиент кислотный → розовый через светлый тон (напрямую
   смесь рыжеет), как ⚡/🛒 в «1 Клике» (oneclick.css). Стоит в конце
   файла: те же селекторы выше рисовали лаймовую рамку. */
.bt-body .bt-seg button.is-on, .bt-body .bt-seg button.is-on:hover,
.bt-body .bt-chip.is-on, .bt-body .bt-chip.is-on:hover,
.bt-body #ba-snd:not(.is-off) {
  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);
}
.bt-body .bt-chip.is-on svg { color: #F4FFD6; }
/* звук включён — значок градиентом (#dh-acid в battle.html) */
.bt-body #ba-snd:not(.is-off) svg { stroke: url(#dh-acid); }