/* Баттлы (25.09) — режим в разработке, только по прямой ссылке /battles.
   Раскладка снята с образца, который дал владелец (лобби-таблица, конструктор со слотами
   кейсов и окном выбора, комната с колонками игроков). Оформление — наше, кейс-баттловское:
   * панель — тело #0f1118, шапка #090a0e, рамки #29313f, пунктир #382f2b;
   * полоса состояния — rgba(9,8,13,.55), min-height 53px;
   * кнопка — фон linear-gradient(90deg,#261214,#181412) + рамка border-image
     linear-gradient(45deg,#e6964c,#bb281e), на hover заливка градиентом (как .button у /upgrade);
   * тексты #bfcae3 / #7d8495 / #555a67, акценты #d3863c / #e19248 / #ee6f3c;
   * ⚠️ зелёного на странице нет: все суммы — оранжевые #d3863c, как цены в инвентаре апгрейда;
   * рулетка — копия блока со страницы кейса (в конце файла). */

.container.battles {
  max-width: 1200px; margin: 0 auto; flex: 1 0 auto; width: 100%;
  padding: 0 10px 40px; box-sizing: border-box; position: relative;
  background: url("../assets/img/bg_case.webp") no-repeat; background-size: 100%;
}
.container.battles .page-title { text-transform: uppercase; color: #fff; margin: 0; font-size: 26px; }
.container.battles sup { font-size: 11px; color: #7d8495; text-transform: none; margin-left: 4px; }
.bt-empty { padding: 44px 20px; text-align: center; color: #555a67; font-size: 15px; text-transform: uppercase; }
.bt-cap { font-size: 12px; text-transform: uppercase; color: #7d8495; }
.bt-err { color: #ff8e74; font-size: 13px; min-height: 18px; margin-top: 10px; }

/* ── фирменная кнопка ── */
.bt-btn {
  display: inline-flex; justify-content: center; align-items: center; height: 40px; padding: 0 18px;
  background: linear-gradient(90deg, #261214, #181412);
  border: 2px solid; border-image-source: linear-gradient(45deg, #e6964c 0%, #bb281e 100%); border-image-slice: 1;
  color: #fff; text-decoration: none; text-transform: uppercase; font-size: 14px; font-weight: 600;
  cursor: pointer; white-space: nowrap; font-family: inherit;
}
.bt-btn:hover:not(:disabled) { background: linear-gradient(45deg, #e6964c, #bb281e); }
.bt-btn:disabled { color: #6f6f6f; cursor: not-allowed; filter: grayscale(100%); }
.bt-btn--sm { height: 32px; padding: 0 14px; font-size: 12px; border-width: 1px; }
.bt-btn--ghost { border-image-source: linear-gradient(45deg, #382f2b 0%, #382f2b 100%); color: #bfcae3; }
.bt-btn--ghost:hover:not(:disabled) { background: rgba(9, 8, 13, .55); }
.bt-btn--danger { color: #b5717a; }
.bt-btn--danger:hover:not(:disabled) { border-image-source: linear-gradient(45deg, #bb281e 0%, #bb281e 100%); color: #fff; }


/* ── шапка страницы: заголовок + вкладки слева, действия справа ── */
.bt-head { display: flex; align-items: center; justify-content: space-between; gap: 16px;
  flex-wrap: wrap; margin: 20px 0 14px; }
.bt-head__l { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.bt-head__act { display: flex; gap: 8px; }
.bt-back { color: #e19248; font-size: 14px; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
.bt-back::before { content: '←'; font-size: 16px; }
.bt-back:hover span { text-decoration: underline; }

.bt-tabs { display: inline-flex; gap: 4px; background-color: rgba(9, 8, 13, .55); padding: 4px; }
.bt-tabs button { height: 32px; padding: 0 16px; background: none; border: 0; color: #7d8495;
  font: inherit; font-size: 13px; text-transform: uppercase; font-weight: 600; cursor: pointer; }
.bt-tabs button:hover { color: #bfcae3; }
.bt-tabs button.on { background-color: #0f1118; color: #e19248; box-shadow: inset 0 -2px 0 #e19248; }

/* ===== «Правила игры» — окно и ссылка 1-в-1 с контрактов (перенесено из css/contract.css,
   там оно живёт внутри .container.contract). Отличается только позиция ссылки: у нас она
   стоит в шапке рядом с вкладками, а не абсолютом под заголовком. ===== */
.light-modal, .light-modal * { box-sizing: content-box; }
.container.battles .rules { color: #e19248; font-size: 0; font-weight: 600; text-decoration: none;
  display: inline-flex; align-items: center; }
.container.battles .rules img { vertical-align: middle; margin-right: 10px; height: 26px; }
.container.battles .rules span { font-size: 16px; position: relative; vertical-align: middle; }
.container.battles .rules span::after { background-color: #e19248; display: block; content: ""; height: 2px;
  width: 0%; left: 50%; bottom: 0; position: absolute; transition: width .3s ease-in-out; transform: translateX(-50%); }
.container.battles .rules span:hover::after, .container.battles .rules span:focus::after { width: 100%; }

.light-modal { display: none; position: fixed; background: rgba(0, 0, 0, 0); top: 0; bottom: 0; left: 0; right: 0;
  align-items: center; justify-content: center; z-index: 6; transition: background 1s; font-size: 16px; visibility: hidden; }
.light-modal.visible { background: rgba(0, 0, 0, .6); display: flex; visibility: visible; }
.light-modal-content { background: #292d35; color: #fff; width: 380px; border-radius: .2em; position: relative;
  max-height: calc(100vh - 10px); line-height: 1.4; display: flex; flex-direction: column; max-width: calc(100vw - 30px); }
.light-modal-wider .light-modal-content { width: 500px; }
.light-modal-wider .light-modal-footer { padding: 3px; }
.light-modal-header { padding: 14px 20px; background: rgba(0, 0, 0, .2); display: flex;
  justify-content: space-between; align-items: center; }
.light-modal-heading { margin: 0; font-size: 20px; font-weight: 400; }
.light-modal-heading + .light-modal-close-icon { position: static; }
.light-modal-body { background: #14171e url("/assets/img/modal-bg.jpg") no-repeat center top;
  padding: 20px 20px 4px 20px; overflow: auto; max-height: 450px; }
.light-modal-footer { padding: 15px 20px; background: rgba(0, 0, 0, .2); text-align: right;
  display: flex; align-items: center; justify-content: space-between; }
.light-modal-close-icon { text-decoration: none; line-height: 1; position: absolute; top: -15px; right: -15px; }
.light-modal-close-icon svg { width: 18px; height: 18px; fill: #7c7c7c; transition: all .2s ease-in-out; }
.light-modal-close-icon:hover svg { fill: #fff; }

ol.faq-style { counter-reset: li; padding-left: 10px; margin: 0; }
ol.faq-style > li { position: relative; display: block; padding: .4em .4em .4em 2.3em; margin: .5em 0 0 0;
  background: #21242a; color: #e2e2e2; transition: all .3s ease-out; }
ol.faq-style > li:hover { background: #2e313a; }
ol.faq-style > li:hover::before { transform: rotate(360deg); }
ol.faq-style > li h3 { margin: 5px 0 0 0; color: #d78f4c; font-size: 17px; }
ol.faq-style > li p { font-size: 14px; margin-top: 5px; margin-bottom: 5px; cursor: default; line-height: normal; }
ol.faq-style > li::before { content: counter(li); counter-increment: li; position: absolute; left: -18px; top: 50%;
  margin-top: -1.3em; background: #d6883e; height: 30px; width: 30px; line-height: 1.9em; border: 5px solid #14171e;
  text-align: center; font-weight: bold; border-radius: 30px; transition: all .3s ease-out; color: #14171e;
  transform-origin: center center; }

/* вылет сверху — как у окна правил на контрактах (style.css, #contract-rules-modal) */
#battles-rules-modal.light-modal.visible .light-modal-content { animation: rules-fly-in .8s cubic-bezier(.22, 1, .36, 1) both; }

/* ── полоса фильтров ── */
.bt-filters { display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  background-color: rgba(9, 8, 13, .55); min-height: 53px; padding: 8px 15px;
  box-sizing: border-box; margin-bottom: 12px; }
.bt-filters__cap { font-size: 14px; color: #c3dcff; margin-right: 4px; }
.bt-sel, .bt-num, .bt-find {
  height: 32px; background-color: rgba(9, 8, 13, .55); border: 1px solid #29313f; color: #bfcae3;
  font: inherit; font-size: 13px; padding: 0 8px; box-sizing: border-box;
}
/* селект рисуем сами: системный на тёмной панели выглядит чужеродно */
.bt-sel { cursor: pointer; appearance: none; -webkit-appearance: none; padding-right: 26px;
  background-image: linear-gradient(45deg, transparent 50%, #7d8495 50%), linear-gradient(135deg, #7d8495 50%, transparent 50%);
  background-position: calc(100% - 14px) 14px, calc(100% - 9px) 14px;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; }
.bt-sel:hover { border-color: #e19248; }
.bt-sel option { background-color: #0f1118; color: #bfcae3; }
.bt-num { width: 68px; }
.bt-find { width: 190px; }
.bt-sel:focus, .bt-num:focus, .bt-find:focus { outline: none; border-color: #e19248; }
.bt-range { display: inline-flex; align-items: center; gap: 6px; }
.bt-range i { color: #555a67; font-style: normal; }
.bt-clear { border: 0; background: none; color: #555a67; font: inherit; font-size: 13px; cursor: pointer; margin-left: auto; }
.bt-clear:hover { color: #bb281e; }

/* ── таблица битв ── */
.bt-table { background-color: #0f1118; border: 1px solid #29313f; }
.bt-table__head, .bt-row {
  display: grid; grid-template-columns: 96px minmax(0, 1fr) 120px 210px 190px; gap: 12px; align-items: center;
}
.bt-table__head { background-color: #090a0e; min-height: 46px; padding: 0 15px;
  font-size: 12px; text-transform: uppercase; color: #7d8495; letter-spacing: .4px; }
.bt-table__head span:nth-child(3) { text-align: right; }
.bt-table__head span:nth-child(4), .bt-table__head span:nth-child(5) { text-align: center; }
.bt-row { padding: 12px 15px; border-top: 1px solid #1b2130; transition: background .2s ease; }
.bt-row:hover { background-color: rgba(225, 146, 72, .04); }
.bt-row.finished { opacity: .72; }

.bt-row__rounds { display: flex; flex-direction: column; align-items: center; justify-content: center;
  width: 84px; height: 66px; background-color: rgba(9, 8, 13, .45); border: 1px solid #382f2b; }
.bt-row__rounds b { font-size: 24px; color: #fff; line-height: 1; }
.bt-row__rounds i { font-size: 11px; color: #7d8495; font-style: normal; text-transform: uppercase; margin-top: 3px; }
.bt-tag { display: block; font-style: normal; font-size: 9px; color: #ee6f3c; text-transform: uppercase; letter-spacing: .5px; }

.bt-row__cases { display: flex; gap: 6px; overflow: hidden; }
.bt-row__price { text-align: right; font-size: 17px; font-weight: 700; color: #d3863c; white-space: nowrap; }
.bt-row__players { display: flex; justify-content: center; }
.bt-row__act { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.bt-row__st { font-size: 12px; text-transform: uppercase; color: #7d8495; }
.bt-row__st.running { color: #ee6f3c; }

/* глазок «смотреть» */
.bt-watch { width: 32px; height: 32px; border: 1px solid #382f2b; background-color: rgba(9, 8, 13, .45);
  display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.bt-watch span { width: 14px; height: 14px; border: 2px solid #7d8495; border-radius: 50% 0; transform: rotate(45deg); display: block; }
.bt-watch:hover { border-color: #e19248; }
.bt-watch:hover span { border-color: #e19248; }

/* миниатюра кейса */
.bt-mini { position: relative; width: 78px; height: 66px; flex: none;
  background-color: rgba(9, 8, 13, .35); border: 1px solid #29313f; }
.bt-mini .bt-art { height: 46px; }
.bt-mini__n { position: absolute; right: 4px; top: 3px; font-size: 11px; color: #e19248; font-weight: 700; z-index: 2; }
.bt-mini__n::before { content: '×'; font-size: 9px; opacity: .8; }
.bt-mini__t { position: absolute; left: 0; right: 0; bottom: 3px; text-align: center; font-size: 10px;
  color: #d3863c; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 4px; }
.bt-mini--more { display: flex; align-items: center; justify-content: center; color: #e19248; font-size: 13px; font-weight: 700; }

/* аватарки и места */
.bt-ava { width: 34px; height: 34px; object-fit: cover; border: 1px solid #29313f; }
.bt-ava.is-me { border-color: #e19248; }
.bt-seats { display: flex; align-items: center; gap: 6px; }
.bt-seats--team { gap: 10px; }
.bt-team { display: inline-flex; gap: 4px; padding: 3px; border: 1px solid #29313f; background-color: rgba(9, 8, 13, .35); }
.bt-vs { font-style: normal; font-size: 11px; color: #ee6f3c; text-transform: uppercase; }
.bt-seat { display: inline-flex; }
.bt-seat.win .bt-ava { border-color: #e19248; }
.bt-seat--free { width: 34px; height: 34px; border: 1px dashed #382f2b; background-color: rgba(9, 8, 13, .21);
  align-items: center; justify-content: center; }
.bt-seat--free i { font-style: normal; color: #404d64; font-size: 15px; }

/* ── конструктор ── */
.bt-form { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.bt-modes { display: inline-flex; gap: 4px; }
.bt-modes button { min-width: 48px; height: 40px; padding: 0 10px; background-color: rgba(9, 8, 13, .45);
  border: 1px solid #382f2b; color: #bfcae3; font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; }
.bt-modes button:hover { border-color: #e19248; }
.bt-modes button.on { border-color: #e19248; color: #e19248; background-color: rgba(225, 146, 72, .08); }

.bt-toggle { display: inline-flex; align-items: center; gap: 10px; height: 40px; padding: 0 12px;
  background-color: rgba(9, 8, 13, .45); border: 1px solid #382f2b; color: #7d8495;
  font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; text-transform: uppercase; }
.bt-toggle.on { color: #e19248; border-color: #e19248; }
.bt-sw { width: 32px; height: 16px; border-radius: 8px; background-color: #29313f; position: relative; display: block; transition: background .2s ease; }
.bt-sw::after { content: ''; position: absolute; left: 2px; top: 2px; width: 12px; height: 12px; border-radius: 50%;
  background: #7d8495; transition: transform .2s ease, background .2s ease; }
.bt-toggle.on .bt-sw { background-color: rgba(225, 146, 72, .3); }
.bt-toggle.on .bt-sw::after { transform: translateX(16px); background: #e19248; }

/* превью набора */
.bt-preview { display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  background-color: rgba(9, 8, 13, .55); min-height: 82px; padding: 10px 15px; box-sizing: border-box; margin-bottom: 12px; }
.bt-preview__rounds { display: flex; align-items: center; gap: 10px; }
.bt-badge { width: 46px; height: 46px; flex: none; display: flex; align-items: center; justify-content: center;
  background-color: rgba(9, 8, 13, .45); border: 1px solid #382f2b; color: #fff; font-size: 20px; font-weight: 700; }
.bt-preview__cap { display: flex; flex-direction: column; font-size: 14px; color: #bfcae3; }
.bt-preview__cap i { font-style: normal; font-size: 12px; color: #7d8495; text-transform: uppercase; margin-top: 2px; }
.bt-preview__cases { display: flex; gap: 6px; flex: 1; overflow-x: auto; padding-bottom: 2px; }
.bt-preview__sum { display: flex; flex-direction: column; align-items: flex-end; margin-left: auto; }
.bt-preview__sum b { font-size: 20px; color: #d3863c; }

/* слоты кейсов */
.bt-slots { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.bt-slot { height: 208px; background-color: rgba(9, 8, 13, .21); border: 1px dashed #382f2b;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  color: #555a67; font: inherit; font-size: 14px; text-transform: uppercase; cursor: pointer; transition: border .25s ease; }
.bt-slot:hover { border-color: #e19248; color: #e19248; }
.bt-slot__ico { width: 46px; height: 46px; border: 1px solid currentColor; display: flex;
  align-items: center; justify-content: center; font-size: 22px; }

/* карточка кейса — и в слоте конструктора, и в окне выбора */
.bt-case { position: relative; height: 208px; box-sizing: border-box; display: flex; flex-direction: column;
  align-items: center; justify-content: flex-start; padding: 10px 8px 12px;
  background-color: #0f1118; border: 1px solid #29313f; transition: border .25s ease; }
.bt-case:hover { border-color: #e19248; }
.bt-case.on { border-color: #e19248; }
.bt-case__p { font-size: 14px; font-weight: 700; color: #d3863c; margin-bottom: 4px; }
.bt-case .bt-art { height: 104px; }
.bt-case__t { width: 100%; text-align: center; font-size: 12px; color: #bfcae3; text-transform: uppercase;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 4px; }
.bt-case__add { margin-top: auto; }
.bt-case__qty { margin-top: auto; display: flex; align-items: center; gap: 12px;
  background-color: #2b3342; padding: 3px 10px; }
.bt-case__qty button { width: 20px; height: 20px; border: 0; background: none; color: #bfcae3;
  font: inherit; font-size: 17px; line-height: 1; cursor: pointer; }
.bt-case__qty button:hover { color: #e19248; }
.bt-case__qty b { color: #ee6f3c; min-width: 20px; text-align: center; font-size: 14px; }

/* картинка кейса: коробка и ствол слоями, размер по ВЫСОТЕ (иначе широкие png лезут на текст) */
.bt-art { position: relative; display: block; width: 100%; height: 78px; }
.bt-art__back  { position: absolute; top: 14%; left: 50%; transform: translateX(-42%); height: 72%; width: auto; }
.bt-art__front { position: absolute; top: 6%;  left: 50%; transform: translateX(-56%); height: 88%; width: auto; }
.bt-case:hover .bt-art__front { transform: translateX(-56%) translateY(-4px); transition: transform .2s ease; }

/* ── окно «Добавить кейсы» ── */
body.bt-modal-open { overflow: hidden; }
.bt-modal { position: fixed; inset: 0; z-index: 1000; background: rgba(5, 6, 10, .82);
  display: flex; align-items: center; justify-content: center; padding: 20px;
  opacity: 0; transition: opacity .18s ease; }
.bt-modal.open { opacity: 1; }
.bt-modal__box { width: 100%; max-width: 1100px; max-height: 88vh; display: flex; flex-direction: column;
  background-color: #0f1118; border: 1px solid #29313f; transform: translateY(12px); transition: transform .18s ease; }
.bt-modal.open .bt-modal__box { transform: none; }
.bt-modal__head { display: flex; align-items: center; justify-content: space-between;
  min-height: 60px; padding: 0 18px; background-color: #090a0e; border-bottom: 1px solid #29313f;
  color: #fff; font-size: 17px; text-transform: uppercase; }
.bt-modal__x { width: 32px; height: 32px; border: 1px solid #382f2b; background: none;
  color: #7d8495; font: inherit; font-size: 15px; cursor: pointer; }
.bt-modal__x:hover { border-color: #bb281e; color: #bb281e; }
/* ⚠️ Шапка и фильтры — фиксированной высоты, скроллится только сетка. Без flex:none
   фильтры сжимались, поиск уезжал под список кейсов и его не было видно. */
.bt-modal__head, .bt-filters--modal { flex: none; }
.bt-filters--modal { margin: 0; }
.bt-modal__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px;
  padding: 14px; overflow-y: auto; align-content: start; flex: 1; min-height: 0; }
.bt-modal__grid::-webkit-scrollbar { width: 6px; }
.bt-modal__grid::-webkit-scrollbar-track { background: rgba(9, 8, 13, .4); }
.bt-modal__grid::-webkit-scrollbar-thumb { background: #382f2b; }
.bt-modal__grid::-webkit-scrollbar-thumb:hover { background: #e19248; }

/* ── полоса состояния комнаты ── */
.bt-summary {
  background-color: rgba(9, 8, 13, .55); min-height: 53px; padding: 8px 15px; box-sizing: border-box;
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 12px;
}
.bt-summary__l { font-size: 14px; color: #bfcae3; text-transform: uppercase; white-space: nowrap; }
.bt-summary__c { font-size: 14px; text-transform: uppercase; color: #e29349; text-align: center; flex: 1; }
.bt-summary__c.is-done { color: #e19248; }
.bt-summary__r { font-size: 15px; text-transform: uppercase; color: #bfcae3; white-space: nowrap; }
.bt-summary__r b { color: #d3863c; font-weight: 700; }

/* ── арена: колонки игроков ── */
.bt-arena { display: grid; gap: 12px; }
.bt-arena--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bt-arena--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.bt-arena--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.bt-arena--team { grid-template-columns: minmax(0, 1fr) 54px minmax(0, 1fr); align-items: start; }
.bt-side { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px;
  padding: 10px; border: 1px solid #29313f; background-color: rgba(9, 8, 13, .2); position: relative; padding-top: 26px; }
.bt-side__cap { position: absolute; left: 10px; top: 6px; font-size: 11px; text-transform: uppercase;
  color: #7d8495; letter-spacing: .5px; }
.bt-side.is-win { border-color: #e19248; }
.bt-side.is-win .bt-side__cap { color: #e19248; }
.bt-side.is-lose { opacity: .8; }
.bt-vs-big { align-self: center; text-align: center; font-size: 22px; font-weight: 700;
  color: #ee6f3c; text-transform: uppercase; letter-spacing: 1px; }

.bt-col { display: flex; flex-direction: column; min-width: 0;
  background-color: #0f1118; border: 1px solid #29313f;
  transition: border-color .45s ease, box-shadow .45s ease, opacity .45s ease, filter .45s ease; }
.bt-col.is-win { border-color: #e19248; box-shadow: 0 0 22px rgba(225, 146, 72, .22), 0 0 0 1px rgba(225, 146, 72, .35); }
.bt-col.is-lose { opacity: .55; filter: grayscale(.55); }

.bt-col__state { position: relative; min-height: 40px; display: flex; align-items: center; justify-content: center;
  gap: 10px; background-color: #090a0e; color: #7d8495; font-size: 12px; text-transform: uppercase;
  font-weight: 600; padding: 5px 8px; overflow: hidden; }
.bt-col__state.ready { color: #bfcae3; }
.bt-col__state.live { color: #ee6f3c; }
.bt-col__state.lose { color: #555a67; opacity: 0; transition: opacity .45s ease; }
.bt-col__state.lose.shown { opacity: 1; }

/* Плашка победы сделана ровно как кнопка сайта: тёмная заливка linear-gradient(90deg,#261214,#181412)
   и рамка border-image linear-gradient(45deg,#e6964c,#bb281e). Никаких бликов и выездов —
   на странице кейса выигрыш тоже показывают статично, просто подсвечивая нужный предмет. */
.bt-col__state.win {
  background: linear-gradient(90deg, #261214, #181412);
  border: 2px solid; border-image-source: linear-gradient(45deg, #e6964c 0%, #bb281e 100%); border-image-slice: 1;
  color: #fff; letter-spacing: 1px; opacity: 0;
}
.bt-col__state.win.shown { animation: bt-fade-in .28s ease forwards; }
.bt-col__state.win b { font-size: 13px; font-weight: 700; }
.bt-col__state.win em { font-style: normal; font-size: 13px; font-weight: 700; color: #e19248; }
@keyframes bt-fade-in { from { opacity: 0; } to { opacity: 1; } }

.bt-col__info { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-bottom: 1px solid #1b2130; min-height: 52px; box-sizing: border-box; }
.bt-col__name { font-size: 13px; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bt-col__name i { font-style: normal; font-size: 10px; color: #555a67; text-transform: uppercase; margin-left: 5px; }
.bt-col__sum { margin-left: auto; font-size: 14px; font-weight: 700; color: #d3863c; white-space: nowrap; }
.bt-col__info--join, .bt-col__info--empty { justify-content: center; color: #555a67; font-size: 12px; text-transform: uppercase; }

.bt-game--empty, .bt-game--idle { display: flex; align-items: center; justify-content: center; min-height: 148px;
  color: #404d64; font-size: 12px; text-transform: uppercase; letter-spacing: .5px;
  background: repeating-linear-gradient(45deg, rgba(9,8,13,.25) 0 10px, rgba(9,8,13,.12) 10px 20px); }
/* заглушка занятого слота до старта: спокойный фон вместо схлопнутой рулетки */
.bt-game--idle { background: rgba(9, 8, 13, .28); color: #555a67; }

/* Сетка дропов: ячейка фиксированной ширины и ряд ПО ЦЕНТРУ. Если тянуть колонки на 1fr,
   то при двух раундах две ячейки прижимаются влево и половина колонки пустует — выглядит криво. */
.bt-skins { display: grid; grid-template-columns: repeat(auto-fit, 92px); justify-content: center;
  gap: 6px; padding: 10px; }
.bt-skin { position: relative; height: 84px; border: 1px dashed #382f2b; background-color: rgba(9, 8, 13, .21);
  display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; }
.bt-skin.filled { border-style: solid; border-color: #29313f; background-color: rgba(10, 12, 16, .55); }
/* без подпрыгиваний: предмет просто проявляется, как на странице кейса */
.bt-skin.pop { animation: bt-skin-in .3s ease; }
@keyframes bt-skin-in {
  from { opacity: 0; transform: scale(.94); }
  to   { opacity: 1; transform: scale(1); }
}
.bt-col__sum.bump { animation: bt-sum-in .4s ease; }
@keyframes bt-sum-in {
  0%   { color: #fff; }
  100% { color: #d3863c; }
}
.bt-skin img { max-width: 86%; max-height: 40px; object-fit: contain; }
.bt-skin__p { position: absolute; right: 4px; top: 3px; font-size: 10px; font-weight: 700; color: #d3863c; }
.bt-skin__w { font-size: 9px; color: #7d8495; white-space: nowrap; max-width: 92%; overflow: hidden; text-overflow: ellipsis; }
.bt-skin__s { font-size: 10px; color: #bfcae3; white-space: nowrap; max-width: 92%; overflow: hidden; text-overflow: ellipsis; }
.bt-skin.filled::after { content: ''; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
  width: 70%; height: 3px; border-radius: 2px 2px 0 0; background: #555a67; }
.bt-skin.industrial::after { background: #5e98d9; }
.bt-skin.mil-spec::after   { background: #4b69ff; }
.bt-skin.restricted::after { background: #8847ff; }
.bt-skin.classified::after { background: #d32ce6; }
.bt-skin.covert::after     { background: #eb4b4b; }
.bt-skin.rare::after       { background: #ffd700; }

/* ── адаптив ── */
@media (max-width: 1100px) {
  .bt-table__head, .bt-row { grid-template-columns: 80px minmax(0, 1fr) 100px 170px 160px; }
  .bt-slots { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .bt-arena--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .container.battles { overflow-x: hidden; }
  .container.battles .page-title { font-size: 21px; }
  /* ⚠️ Не flex-column: в нём блок кнопок непонятно почему растягивался выше своего
     содержимого и под кнопками оставалась пустая полоса. Обычный блок считает высоту честно. */
  .bt-head { display: block; margin-top: 14px; }
  .bt-head__l { justify-content: center; gap: 10px; margin-bottom: 12px; }
  /* три кнопки подряд шире экрана — без переноса страница ехала вбок.
     Сетка, а не flex-wrap: у flex-контейнера от переносов строк в шаблоне оставалась
     лишняя пустая полоса под кнопками. */
  .bt-head__act { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 8px; grid-auto-rows: 40px; align-content: start; }
  .bt-head__act .bt-btn { width: 100%; height: 100%; }
  /* «Создать битву» в лобби лежит прямо в .bt-head — растягиваем на всю ширину */
  .bt-head > .bt-btn { width: 100%; }
  .bt-table__head { display: none; }
  .bt-row { grid-template-columns: 76px minmax(0, 1fr); grid-template-areas: 'r c' 'p l' 'a a'; row-gap: 8px; }
  .bt-row__rounds { grid-area: r; }
  .bt-row__cases { grid-area: c; }
  .bt-row__price { grid-area: p; text-align: left; }
  .bt-row__players { grid-area: l; justify-content: flex-start; }
  .bt-row__act { grid-area: a; justify-content: stretch; }
  .bt-row__act .bt-btn { flex: 1; }
  .bt-arena--3, .bt-arena--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bt-arena--team { grid-template-columns: 1fr; }
  .bt-vs-big { padding: 6px 0; }
  .bt-preview__sum { margin-left: 0; align-items: flex-start; }
}
@media (max-width: 640px) {
  .bt-slots { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bt-arena, .bt-arena--2, .bt-arena--3, .bt-arena--4 { grid-template-columns: 1fr; }
  .bt-side { grid-template-columns: 1fr; }

  /* фильтры в столбик: на телефоне селект и поиск не влезают в строку и налезали на список */
  .bt-filters { gap: 8px; min-height: 0; padding: 12px; }
  .bt-filters__cap { width: 100%; margin: 0; }
  .bt-sel, .bt-find { width: 100%; height: 38px; }
  .bt-range { width: 100%; }
  .bt-range .bt-num { flex: 1; height: 38px; }
  .bt-clear { margin: 2px 0 0; width: 100%; text-align: left; }

  /* окно выбора кейсов — на весь экран */
  .bt-modal { padding: 0; }
  .bt-modal__box { max-width: none; width: 100%; height: 100%; max-height: 100%; border: 0; }
  .bt-modal__head { min-height: 52px; font-size: 15px; }
  .bt-modal__grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); padding: 10px; }

  .bt-preview { gap: 10px; }
  .bt-preview__cases { order: 3; flex: 1 0 100%; }
  .bt-summary { gap: 6px; }
  .bt-summary__l, .bt-summary__r, .bt-summary__c { flex: 1 1 100%; text-align: center; white-space: normal; }
  .bt-game--idle, .bt-game--empty { min-height: 92px; }
  .bt-col__state.win { flex-wrap: wrap; }
}
/* ===================================================================
   Рулетка — скопирована из style.css (страница кейса), заменён только
   префикс .container.caseBox #case-box-app → .container.battles .bt-game
   =================================================================== */
/* ⚠️ На странице кейса в этой сетке лежат несколько рулеток сразу, поэтому там
   minmax(320px, 1fr) и поля по 15px. В колонке битвы рулетка всегда ОДНА, а сама колонка
   при четырёх игроках уже 320px — из-за минимума лента вылезала за края и наезжала на соседей.
   Здесь: одна колонка, min-width:0 и никаких боковых полей. */
.container.battles .bt-game { min-width: 0; overflow: hidden; }
.container.battles .bt-game .games-wrapper {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  column-gap: 0;
  row-gap: 5px;
  justify-content: center;
  align-items: stretch;
  justify-items: stretch;
  align-content: center;
  margin: 0 6px;
  position: relative;
}
.container.battles .bt-game .games-wrapper.solo { grid-auto-rows: 1fr; }
.container.battles .bt-game .games-wrapper > div {
  min-width: 0;
  background-color: rgba(15, 18, 24, .5);
  overflow: hidden;
  padding: 30px 0 26px 0;
  box-sizing: border-box;
  margin: 8px 0 4px 0;
  position: relative;
}
.container.battles .bt-game .games-wrapper.solo > div { padding: 50px 0; }
.container.battles .bt-game .games-wrapper > div::before,
.container.battles .bt-game .games-wrapper > div::after {
  content: "";
  position: absolute;
  display: block;
  height: 1px;
  width: 100%;
  background: linear-gradient(90deg, rgba(124, 67, 42, 0) 0%, rgb(124, 67, 42) 50%, rgba(124, 67, 42, 0) 100%);
}
.container.battles .bt-game .games-wrapper > div::before { top: 0; }
.container.battles .bt-game .games-wrapper > div::after { bottom: 0; }

/* круги позади ленты */
.container.battles .bt-game .games-wrapper > div .circle__back .static,
.container.battles .bt-game .games-wrapper > div .circle__back .animated {
  position: absolute;
  top: calc(50% - 15px);
  left: calc(50% - 30px);
  transform: translate(calc(-50% + 30px), -50%);
}
.container.battles .bt-game .games-wrapper.solo > div .circle__back .static,
.container.battles .bt-game .games-wrapper.solo > div .circle__back .animated { top: 50%; }
.container.battles .bt-game .games-wrapper > div .circle__back .static { height: 60%; }
.container.battles .bt-game .games-wrapper > div .circle__back .animated { height: 96%; }
.container.battles .bt-game .games-wrapper.solo > div .circle__back .static { height: 76%; }
.container.battles .bt-game .games-wrapper.solo > div .circle__back .animated { height: 119%; }
.container.battles .bt-game .games-wrapper > div .circle__back .static > img,
.container.battles .bt-game .games-wrapper > div .circle__back .animated > img { height: 100%; }
.container.battles .bt-game .games-wrapper > div .circle__back .animated > img {
  filter: brightness(0.8);
  animation: rotation 40000ms infinite linear;
}
.container.battles .bt-game .games-wrapper > div.rolling .circle__back > .animated > img {
  animation: rotation4 calc(var(--duration) * 1ms) cubic-bezier(0.39, 0.575, 0.65, 1);
}
@keyframes rotation4 {
  from { transform: rotate(0deg); }
  to   { transform: rotate(1439deg); }
}

/* лента предметов */
.container.battles .bt-game .games-wrapper > div .rolling-assets {
  display: flex;
  justify-content: left;
  align-items: center;
  position: relative;
  z-index: 1;
  margin-left: calc(var(--offset) * 1px);
}
.container.battles .bt-game .games-wrapper > div .rolling-assets > div {
  text-align: center;
  color: #c3dcff;
  font-weight: 600;
  position: relative;
  box-sizing: border-box;
  margin: 0 calc(var(--margin) * 1px);
  width: calc(var(--width) * 1px);
  flex-shrink: 0;
  transition: opacity .5s ease;
}
.container.battles .bt-game .games-wrapper > div .rolling-assets > div > img {
  display: block;
  margin: 0 auto -15px auto;
  filter: brightness(1.2);
  width: calc(var(--width) * 1px);
  height: calc(var(--width) * 1px);
}
.container.battles .bt-game .games-wrapper > div .rolling-assets > div h3,
.container.battles .bt-game .games-wrapper > div .rolling-assets > div h4 {
  visibility: hidden;
  position: absolute;
  margin: 0;
  font-size: 12px;
  bottom: 14px;
  white-space: nowrap;
  width: auto;
  text-align: center;
  color: #e6964c;
  transition: transform 600ms ease, font-size 600ms ease;
  left: 50%;
  transform: scale(1) translateY(0) translateX(-50%);
  transform-origin: left;
}
.container.battles .bt-game .games-wrapper > div .rolling-assets > div h4 { bottom: -1px; font-weight: 100; }
.container.battles .bt-game .games-wrapper > div .rolling-assets > div h5,
.container.battles .bt-game .games-wrapper > div .rolling-assets > div h6 {
  width: calc(100% + 16px);
  font-size: 12px;
  overflow: hidden;
  margin: 0 -10px;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.container.battles .bt-game .games-wrapper > div .rolling-assets > div h6 { font-weight: 100; }

/* конечное состояние: лента доехала, выигрыш подсвечен */
.container.battles .bt-game .games-wrapper > div.finished .rolling-assets {
  transform: translateX(calc(var(--transition) * 1px));
  margin-left: 0;
}
.container.battles .bt-game .games-wrapper > div.finished .rolling-assets > .drop { z-index: 1; position: relative; }
.container.battles .bt-game .games-wrapper > div.finished .rolling-assets > .drop > img { transition: transform 450ms ease; }
.container.battles .bt-game .games-wrapper > div.finished .rolling-assets > .drop h3,
.container.battles .bt-game .games-wrapper > div.finished .rolling-assets > .drop h4 {
  display: block;
  visibility: visible;
  z-index: 2;
}
.container.battles .bt-game .games-wrapper > div.finished .rolling-assets > .drop h4 { bottom: -7px; font-weight: 600; }
.container.battles .bt-game .games-wrapper > div.finished .rolling-assets > .drop h5,
.container.battles .bt-game .games-wrapper > div.finished .rolling-assets > .drop h6 { opacity: 0; visibility: hidden; }
.container.battles .bt-game .games-wrapper > div.finished .rolling-assets > .drop + div {
  mask-image: linear-gradient(to right, transparent 0%, transparent 5%, black 100%);
}
.container.battles .bt-game .games-wrapper > div.finished .rolling-assets > div:has(+ .drop) {
  mask-image: linear-gradient(to left, transparent 0%, transparent 5%, black 100%);
}
.container.battles .bt-game .games-wrapper > div.finished .rolling-assets > div:not(.drop) { opacity: .5; }
.container.battles .bt-game .games-wrapper > div.finished .rolling-assets > div:not(.drop) img { filter: grayscale(1); }
.container.battles .bt-game .games-wrapper > div.finished .rolling-assets > div:not(.drop) h5,
.container.battles .bt-game .games-wrapper > div.finished .rolling-assets > div:not(.drop) h6 { opacity: .5; }
.container.battles .bt-game .games-wrapper.solo > div.finished div.drop > img { transform: scale(1.9) translateY(-6px) translateX(-4px); }
.container.battles .bt-game .games-wrapper.solo > div.finished div.drop h3,
.container.battles .bt-game .games-wrapper.solo > div.finished div.drop h4 { transform: scale(1.6) translateY(13px) translateX(-50%); }
.container.battles .bt-game .games-wrapper > div.finished div.drop > img { transform: scale(1.34) translateY(-9px) translateX(-4px); }
.container.battles .bt-game .games-wrapper > div.finished div.drop h3,
.container.battles .bt-game .games-wrapper > div.finished div.drop h4 { transform: scale(1.18) translateY(-5px) translateX(-50%); }

/* ── живое обновление списка битв ──
   Новая битва въезжает сверху, ушедшая схлопывается по высоте (не просто гаснет — иначе
   соседние строки скачком перепрыгивают на её место), изменившаяся коротко подсвечивается. */
.bt-row.bt-in { animation: bt-row-in .42s cubic-bezier(.2, .9, .3, 1); }
@keyframes bt-row-in {
  from { opacity: 0; transform: translateY(-12px); }
  to   { opacity: 1; transform: none; }
}
.bt-row.bt-out {
  overflow: hidden; pointer-events: none;
  height: 0 !important; padding-top: 0; padding-bottom: 0; opacity: 0; border-top-color: transparent;
  transition: height .32s ease, padding .32s ease, opacity .24s ease, border-color .24s ease;
}
.bt-row.bt-upd { animation: bt-row-upd .8s ease; }
@keyframes bt-row-upd {
  0%   { background-color: rgba(225, 146, 72, .16); }
  100% { background-color: transparent; }
}

/* ── каркас до загрузки (10.10) ──
   Рисуется инлайн-скриптом в battles.html ещё до тяжёлого data.js: та же разметка, что соберёт
   js/battles.js, а вместо данных — мерцающие плашки в тонах панелей. Когда данные пришли,
   скрипт подменяет каркас и вешает .bt-reveal — строки и колонки мягко проявляются по очереди. */
.bt-sk { display: inline-block; vertical-align: middle; flex: none; max-width: 100%;
  background: linear-gradient(90deg, rgba(41, 49, 63, .35) 25%, rgba(64, 77, 100, .5) 45%, rgba(41, 49, 63, .35) 65%);
  background-size: 300% 100%; animation: bt-sk 1.3s ease-in-out infinite; }
.bt-sk--r { margin-left: auto; display: block; }
@keyframes bt-sk { from { background-position: 100% 0; } to { background-position: 0 0; } }
.bt-is-skeleton .bt-row--sk { animation: bt-fade .4s ease both; animation-delay: calc(var(--i, 0) * 60ms); }
.bt-is-skeleton .bt-row__rounds { border-color: #29313f; }
.bt-is-skeleton .bt-skins { display: flex; justify-content: center; padding: 12px; }
.bt-is-skeleton .bt-tabs button, .bt-is-skeleton .bt-slot, .bt-is-skeleton .bt-modes button, .bt-is-skeleton .bt-toggle { pointer-events: none; }

.bt-reveal .bt-row,
.bt-reveal .bt-col,
.bt-reveal .bt-empty,
.bt-reveal .bt-preview__cases,
.bt-reveal .bt-head__act,
.bt-reveal .bt-summary > * { animation: bt-fade .38s ease both; animation-delay: calc(var(--i, 0) * 45ms); }
@keyframes bt-fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .bt-sk, .bt-reveal *, .bt-is-skeleton .bt-row--sk { animation: none !important; }
}