/* ============================================= */
/* BMG Crew Builder Mobile — style.css          */
/* Очищенная версия                              */
/* ============================================= */

* { margin:0; padding:0; box-sizing:border-box; touch-action:manipulation; }
body { background:#000; color:#fff; font-family:'Oswald',sans-serif; min-height:100vh; -webkit-tap-highlight-color:transparent; }

/* ===== БЕЗОПАСНЫЕ ЗОНЫ ТЕЛЕФОНА =====
   Чёлка/строка состояния сверху и полоса-жест снизу. Работает в паре с
   viewport-fit=cover в <meta name="viewport">. На устройствах без вырезов и на
   ПК env(...) равен 0, поэтому вёрстка там не меняется. */
:root {
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

/* ТОП-БАР */
.top-bar { background:linear-gradient(#111,#000); padding:calc(10px + var(--safe-top)) 12px 10px; text-align:center; border-bottom:4px solid #e94560; position:sticky; top:0; z-index:100; box-shadow:0 4px 15px rgba(0,0,0,.6); }
.top-bar h1 { font-size:22px; letter-spacing:6px; color:#ffd700; text-shadow:0 0 20px rgba(233,69,96,.7); margin-bottom:6px; }
.top-bar-content { display:flex; justify-content:space-between; align-items:center; gap:10px; padding:0 15px; }
.top-bar-content h1 { margin-bottom:0; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.header-buttons { display:flex; gap:12px; align-items:center; flex-shrink:0; }
/* Пометка «бета-тест» рядом с названием раздела. margin-right:auto прижимает её
   к заголовку, а кнопки топ-бара оставляет у правого края */
.beta-badge {
  flex-shrink:0; margin-right:auto; white-space:nowrap;
  background:rgba(233,69,96,.14); color:#e94560; border:1px solid #e94560; border-radius:8px;
  padding:2px 7px; font-size:9.5px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase;
}
/* Все круглые кнопки топ-бара — строго 40×40, не сжимаются при нехватке места */
.compendium-small-btn { display:flex; align-items:center; justify-content:center; width:40px; height:40px; flex-shrink:0; padding:0; background:#e94560; color:#fff; border:none; border-radius:50%; cursor:pointer; box-shadow:0 4px 15px rgba(233,69,96,.5); transition:all .3s; position: relative; }
.compendium-small-btn:hover { background:#ff3366; transform:translateY(-2px); }
.compendium-small-btn svg { width:24px; height:24px; fill:#fff; }
.compendium-small-btn[title]:hover::after {
  content: attr(title);
  position: absolute;
  bottom: -35px;
  left: 50%;
  transform: translateX(-50%);
  background: #222;
  color: #fff;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 11px;
  white-space: nowrap;
  z-index: 1000;
  box-shadow: 0 2px 8px rgba(0,0,0,0.5);
}
.funds { font-size:14px; font-weight:bold; margin-top:8px; }
.funds span { color:#e94560; margin:0 10px; }
#repLimit { width:50px; background:#222; color:#fff; border:1px solid #e94560; }
#charismaticIndicator { margin-left:15px; color:#ffd700; font-weight:bold; display:none; }

/* ВКЛАДКИ ФРАКЦИЙ */
.tabs-container { background:#111; padding:10px 0 8px; border-bottom:3px solid #222; overflow-y:auto; display:none; }
.tabs-container:not(.hidden) { display:block; }
.faction-cards { display:flex; flex-direction:column; gap:12px; padding:0 12px; }
.faction-card {
  height:160px; background-size:cover; background-position:center; position:relative;
  border-radius:20px; box-shadow:0 3px 8px rgba(0,0,0,.4); cursor:pointer;
  transition:all .25s ease; display:flex; align-items:center; justify-content:flex-end; padding-right:80px;
}
.faction-card:hover { transform:translateY(-4px); box-shadow:0 0 18px rgba(233,69,96,.7); }
.faction-card.active { border:4px solid #e94560; box-shadow:0 0 18px rgba(233,69,96,.7); }
.faction-icon { position:absolute; right:12px; top:50%; transform:translateY(-50%); height:80px; width:auto; filter:drop-shadow(0 0 5px rgba(0,0,0,0.8)); }

/* СПИСОК МОДЕЛЕЙ */
.models-list { display:flex; flex-direction:column; gap:10px; padding:10px 10px calc(10px + var(--safe-bottom)); }

/* Мини-карточка модели — общая для разделов "Карточки", "Билдер" и просмотра
   ростера: фото слева, справа построчно — имя, ранг, Rep/Funding и основные
   характеристики модели (компактный вид, полную карточку можно не открывать). */
.mini-card {
  background:#1a1a1a; border-radius:14px; overflow:hidden; position:relative; cursor:pointer;
  border:2px solid transparent; box-shadow:0 4px 12px rgba(0,0,0,.5); transition:all .3s;
  display:flex; align-items:stretch; gap:10px; padding:8px;
}
.mini-card:hover { transform:translateY(-4px); box-shadow:0 10px 20px rgba(233,69,96,.4); }
.mini-card.in-crew { border:4px solid #e94560; box-shadow:0 0 30px rgba(233,69,96,.8); }

/* Кнопка добавить/удалить — верхний правый угол (только билдер) */
.mini-card-corner { position:absolute; top:8px; right:8px; display:flex; align-items:center; gap:6px; z-index:10; }
.add-btn, .remove-btn { width:34px; height:34px; border-radius:50%; font-size:20px; font-weight:bold; border:none; box-shadow:0 3px 10px rgba(0,0,0,.6); transition:all .3s; cursor:pointer; flex-shrink:0; }
.add-btn { background:#e94560; color:#fff; }
.add-btn:hover { background:#ff3366; }
.remove-btn { background:#c00; color:#fff; }
.remove-btn:hover { background:#f00; }
.mini-card-corner .count { background:rgba(0,0,0,0.7); color:#fff; font-size:12px; font-weight:bold; padding:3px 8px; border-radius:12px; min-width:20px; text-align:center; box-shadow:0 2px 6px rgba(0,0,0,0.78); text-shadow:1px 1px 2px #000; pointer-events:none; }

.mini-photo-wrap { position:relative; flex-shrink:0; }
.mini-photo-wrap img { width:74px; height:94px; object-fit:cover; border-radius:10px; display:block; }
.boss-crown { position:absolute; top:-8px; left:-8px; font-size:22px; filter:drop-shadow(0 2px 4px rgba(0,0,0,.8)); }

.mini-right-col { flex:1; display:flex; flex-direction:column; justify-content:center; gap:3px; min-width:0; }
#modelsGridBuilder .mini-right-col { padding-right:40px; } /* место под угловую кнопку найма в билдере */
.mini-name { font-weight:bold; font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mini-rank-text { color:#bbb; font-size:11px; text-transform:uppercase; letter-spacing:.5px; }
.mini-rep { color:#e94560; font-weight:bold; font-size:12.5px; }

/* ПАНЕЛЬ АПГРЕЙДОВ: жёлтый «язычок», выглядывающий из-под нижнего края
   карточки. Есть у КАЖДОЙ модели отряда (билдер и просмотр ростера):
   купленные апгрейды, их удаление и кнопка покупки нового */
.mini-card-wrap { display:flex; flex-direction:column; min-width:0; }
.mini-card-wrap > .mini-card { position:relative; z-index:2; }
.mini-card-wrap > .mini-card:hover { transform:none; } /* иначе карточка «отрывается» от панели */
.mini-upgrades-flap {
  margin:-12px 10px 0; padding:16px 10px 7px;
  background:linear-gradient(#ffd700, #dfae00);
  border-radius:0 0 14px 14px;
  box-shadow:0 5px 12px rgba(0,0,0,.45);
  display:flex; flex-wrap:wrap; align-items:center; gap:6px;
  animation:flapDown .2s ease;
}
@keyframes flapDown { from { transform:translateY(-8px); opacity:0; } to { transform:none; opacity:1; } }
.flap-title { color:#000; font-family:'Oswald',sans-serif; font-weight:700; font-size:10px; letter-spacing:1.5px; opacity:.7; }
.flap-chip {
  display:inline-flex; align-items:center; gap:5px; min-width:0; max-width:100%;
  background:#111; color:#ffd700; border-radius:10px; padding:4px 8px;
  font-size:10.5px; font-weight:bold; cursor:pointer; transition:background .15s;
}
.flap-chip:hover { background:#2a2a2a; }
.flap-chip-name { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.flap-chip b { color:#fff; font-size:10px; flex-shrink:0; }
.flap-chip-remove {
  display:flex; align-items:center; justify-content:center; width:15px; height:15px; flex-shrink:0;
  background:#c00; color:#fff; border-radius:50%; font-size:10px; line-height:1; cursor:pointer;
}
.flap-chip-remove:hover { background:#f00; }
.flap-add {
  margin-left:auto; width:26px; height:26px; border:none; border-radius:50%; flex-shrink:0;
  background:#000; color:#ffd700; font-size:16px; font-weight:bold; cursor:pointer; line-height:1;
  box-shadow:0 2px 6px rgba(0,0,0,.4); transition:background .15s;
}
.flap-add:hover { background:#333; }

.rank-icon { height:24px !important; width:auto !important; max-width:60px; object-fit:contain; background:#ffffff; padding:2px; border-radius:50%; box-shadow:0 2px 6px rgba(0,0,0,0.6); display:flex; align-items:center; justify-content:center; }

/* ======================== КАРТЫ ЦЕЛЕЙ (БИЛДЕР КОЛОДЫ, см. cards.js) ======================== */
/* Кнопка колоды в топ-баре билдера — с бейджем числа набранных карт */
.builder-deck-btn { position:relative; }
.builder-deck-badge {
  position:absolute; top:-5px; right:-5px; background:#e94560; color:#fff;
  font-size:10px; font-weight:700; border-radius:10px; padding:1px 5px; min-width:10px;
  box-shadow:0 2px 5px rgba(0,0,0,.5); pointer-events:none;
}

.obj-cards-page { padding:10px 10px calc(10px + var(--safe-bottom)); max-width:1500px; margin:0 auto; }
.obj-section-title { color:#ffd700; font-family:'Oswald',sans-serif; font-weight:700; letter-spacing:2px; font-size:14px; margin:14px 4px 8px; }
.obj-cards-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:10px; align-items:start; }

/* Карта каталога: скан + бейджи, +/− в углу — как у мини-карточек моделей */
.obj-card {
  position:relative; background:#1a1a1a; border-radius:12px; overflow:hidden; cursor:pointer;
  border:2px solid transparent; box-shadow:0 4px 12px rgba(0,0,0,.5); transition:all .3s;
}
.obj-card:hover { box-shadow:0 8px 18px rgba(233,69,96,.35); }
.obj-card.in-crew { border-color:#e94560; box-shadow:0 0 18px rgba(233,69,96,.6); }
.obj-card img { width:100%; display:block; }
.obj-card-req-missing img { opacity:.5; }
.obj-card-mandatory { border-color:#ffd700; }
.obj-card-footer { padding:6px 8px 8px; display:flex; flex-direction:column; gap:2px; }
.obj-card-name { color:#fff; font-weight:700; font-size:11.5px; }
.obj-card-info { color:#e94560; font-weight:700; font-size:10.5px; }
.obj-card-mandatory .obj-card-info { color:#ffd700; }
.obj-card-info-row { display:flex; align-items:center; justify-content:space-between; gap:6px; }
/* Значок «!» — у карты есть требования; красный, если они не выполнены */
.obj-card-req-btn {
  display:flex; align-items:center; justify-content:center; width:18px; height:18px; flex-shrink:0;
  border-radius:50%; border:2px solid #ffd700; color:#ffd700;
  font-weight:700; font-size:12px; line-height:1; cursor:pointer; transition:all .15s;
}
.obj-card-req-btn:hover { background:rgba(255,215,0,.15); }
.obj-card-req-btn.is-missing { border-color:#ff6b6b; color:#ff6b6b; }
.obj-card-req-btn.is-missing:hover { background:rgba(255,107,107,.15); }

/* Сводка колоды в топ-баре страницы карт: счётчики и подсказки, чего не хватает */
.obj-deck-summary { display:flex; flex-direction:column; gap:4px; }
.obj-deck-counters { display:flex; flex-wrap:wrap; align-items:center; gap:4px 16px; }
.obj-deck-counters .is-ok { color:#7ddf7d; }
.obj-deck-counters .is-warn { color:#ffb84d; }
.obj-deck-counters b { color:inherit; }
.obj-deck-msg { color:#ffb84d; font-size:12px; font-weight:normal; letter-spacing:.3px; }
.obj-deck-msg.is-ok { color:#7ddf7d; }

/* Колода в просмотре ростера — компактный список названий */
.roster-cards-panel {
  background:#141414; border-radius:14px; padding:10px 14px 12px; margin:10px;
  box-shadow:0 4px 12px rgba(0,0,0,.5);
}
.roster-cards-panel .obj-section-title { margin:0 0 8px; }
.roster-cards-chips { display:flex; flex-wrap:wrap; gap:6px; }
.roster-card-chip {
  display:inline-flex; align-items:center; gap:5px; background:#000; color:#fff;
  border:1px solid #333; border-radius:10px; padding:4px 9px; font-size:11px; font-weight:bold; cursor:pointer;
  transition:border-color .15s;
}
.roster-card-chip:hover { border-color:#e94560; }
.roster-card-chip b { color:#e94560; }
.roster-card-chip.is-mandatory { color:#ffd700; border-color:#5a4d00; }

/* Строка характеристик в мини-карточке (Movement/Attack/Defense/Strength + WIL/END) */
.rp-stats { display:flex; flex-wrap:wrap; gap:4px; margin-top:2px; }
.rp-stat {
  display:inline-flex; align-items:center; gap:3px; background:#000; color:#fff;
  border:1px solid #333; border-radius:8px; padding:2px 6px;
  font-family:'Oswald',sans-serif; font-weight:700; font-size:11.5px; letter-spacing:.5px;
}
.rp-stat img { width:13px; height:13px; }
.rp-stat-wil { color:#ffd700; border-color:#5a4d00; }
.rp-stat-end { color:#e94560; border-color:#5a1a26; }

/* ПОЛНАЯ КАРТОЧКА */
.full-card { position:fixed; inset:0; background:#000; z-index:9999; overflow-y:auto; display:none; padding-top:var(--safe-top); padding-bottom:var(--safe-bottom); }
.full-card.active { display:block; }
.full-inner { max-width:480px; margin:0 auto; background:#000; overflow:hidden; position:relative; }
.close-full {
  position:absolute; top:12px; right:12px; width:30px; height:30px;
  display:flex; align-items:center; justify-content:center;
  font-size:18px; font-weight:bold; color:#fff; background:rgba(0,0,0,.55);
  border-radius:50%; cursor:pointer; z-index:10; line-height:1;
}

/* Панель-глоссарий с расшифровкой трейтов и правил оружия — только на планшетах/ПК */
.full-card-sidebar { display:none; }

@media (min-width: 1040px) {
  .full-card.active {
    display:flex; align-items:flex-start; justify-content:center; gap:24px;
    padding:30px 24px;
  }
  .full-inner { margin:0; flex-shrink:0; border-radius:18px; }
  .full-card-sidebar {
    display:block; width:480px; flex-shrink:0; background:#141414; color:#eee;
    border-radius:16px; padding:18px 24px; box-shadow:0 10px 30px rgba(0,0,0,.6);
    position:sticky; top:30px; max-height:calc(100vh - 60px); overflow-y:auto;
    overscroll-behavior:contain; /* прокрутка глоссария не двигает карточку */
  }
}

.sidebar-section + .sidebar-section { margin-top:20px; }
.sidebar-title {
  color:#ffd700; font-weight:700; letter-spacing:2px; font-size:15px;
  border-bottom:2px solid #e94560; padding-bottom:8px; margin-bottom:12px;
}
.sidebar-entry { margin-bottom:14px; }
.sidebar-entry-name { color:#fff; font-weight:700; font-size:13.5px; letter-spacing:.5px; margin-bottom:3px; }
.sidebar-entry-desc { color:#bbb; font-size:13px; line-height:1.5; }
.sidebar-entry-desc .inline-icon { height:1.1em; vertical-align:middle; background:#fff; border-radius:50%; padding:1px; box-sizing:content-box; }
.sidebar-empty { color:#888; text-align:center; padding:40px 10px; font-size:14px; }

/* COMPENDIUM И ПОИСК */
.compendium-modal { position:fixed; inset:0; background:#000; z-index:2000; overflow-y:auto; display:none; flex-direction:column; padding-bottom:var(--safe-bottom); }
.compendium-modal.active { display:flex; }
.compendium-header { background:#111; padding:calc(15px + var(--safe-top)) 15px 15px; text-align:center; border-bottom:4px solid #e94560; position:sticky; top:0; z-index:10; }
.compendium-header h2 { color:#ffd700; font-size:24px; margin:0; font-weight:700; letter-spacing:1px; }
.compendium-header h2 span:last-child { color:#888; font-size:14px; }
/* Единая кнопка «назад» — такой же красный круг 40×40 со стрелкой, как в топ-барах */
.back-btn { position:absolute; left:15px; top:50%; transform:translateY(-50%); display:flex; align-items:center; justify-content:center; width:40px; height:40px; flex-shrink:0; padding:0; background:#e94560; color:#fff; border:none; border-radius:50%; cursor:pointer; box-shadow:0 4px 15px rgba(233,69,96,.5); transition:background .3s; }
.back-btn:hover { background:#ff3366; }
.back-btn svg { width:24px; height:24px; fill:#fff; }

/* КНОПКИ ДОКУМЕНТОВ (RULEBOOK, FAQS, BATMATCH) */
.rules-docs-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 12px;
}
.rules-doc-btn {
  display: inline-block;
  background: linear-gradient(135deg, #ffd700 0%, #ffaa00 100%);
  color: #000;
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: bold;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 1px;
  box-shadow: 0 4px 12px rgba(255, 215, 0, 0.3);
  transition: all 0.3s ease;
}
.rules-doc-btn:hover {
  background: linear-gradient(135deg, #ffaa00 0%, #ffd700 100%);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(255, 215, 0, 0.5);
}
.rules-doc-btn:active {
  transform: translateY(0);
}
.compendium-search-wrapper { padding:16px; background:#111; }
.compendium-search { display:flex; align-items:center; background:#222; border:2px solid #333; border-radius:50px; overflow:hidden; transition:all .3s ease; box-shadow:0 4px 15px rgba(0,0,0,.4); }
.compendium-search:focus-within { border-color:#ff3366; box-shadow:0 0 25px rgba(233,69,96,.8); }
.compendium-search .search-icon { width:20px; height:20px; fill:#e94560; margin:0 14px; pointer-events:none; }
.compendium-search input { flex:1; background:transparent; border:none; outline:none; color:#fff; font-size:16px; padding:14px 10px 14px 0; }
.compendium-search input::placeholder { color:#aaa; }
.compendium-search .clear-search { background:#e94560; color:#fff; border:none; width:36px; height:36px; border-radius:50%; font-size:20px; cursor:pointer; margin-right:8px; display:flex; align-items:center; justify-content:center; transition:background .2s; }
.compendium-search .clear-search:hover { background:#ff3366; }
.compendium-content { flex:1; padding-bottom:100px; }
/* Записи справочника/поиска — в едином тёмном стиле попапов */
.comp-entry { margin:20px 15px 10px; background:#141414; border-radius:16px; overflow:hidden; box-shadow:0 6px 20px rgba(0,0,0,.5); }
.comp-title { color:#ffd700; padding:14px 16px 10px; font-weight:700; font-size:18px; letter-spacing:1px; border-bottom:2px solid #e94560; word-break:break-word; }
.comp-text { padding:14px 16px; line-height:1.65; color:#bbb; font-size:14px; }
.comp-title .inline-icon, .comp-text .inline-icon { background:#fff; border-radius:50%; padding:1px; box-sizing:content-box; }

/* ОФИЦИАЛЬНЫЕ КАРТОЧКИ */
.official-card { background:#f2ede2; color:#000; border-radius:18px; overflow:hidden; box-shadow:0 10px 30px rgba(0,0,0,.6); margin:10px; font-family:'Oswald',sans-serif; }

.official-header {
  background:linear-gradient(115deg, #ffd700 0%, #ffd700 42%, #fff9e0 100%);
  color:#111; padding:14px 52px 14px 16px; display:flex; align-items:center; justify-content:space-between; gap:12px;
}
.official-header-text { min-width:0; }
.official-name { font-size:clamp(16px,4.5vw,21px); font-weight:700; letter-spacing:1px; line-height:1.15; word-break:break-word; }
.official-subtitle { font-size:11.5px; letter-spacing:1px; opacity:.85; margin-top:4px; color:#4a3f22; text-transform:uppercase; }
/* Иконки ранга с подписью RANK над ними — подпись подобрана по ширине иконки */
.official-header-rank { display:flex; flex-direction:column; align-items:center; gap:3px; flex-shrink:0; }
.official-rank-label { font-size:8px; font-weight:700; letter-spacing:1.5px; line-height:1; color:#111; opacity:.75; }
.official-rank-icons { display:flex; align-items:center; gap:6px; }
.official-header-rank .rank-icon { background:#fff; box-shadow:0 2px 6px rgba(0,0,0,.35); }

.official-main {
  display:flex; gap:10px; padding:10px; min-height:220px;
  background:url('img/card-bg.jpg') center/cover no-repeat #f5f5f5;
  border-top:3px solid #e6c200;
  border-bottom:3px solid #e6c200;
}
/* Фото занимает 40.5% ширины карточки (было 45%) — уменьшено на 10%,
   вместе с ним пропорционально уменьшен и потолок ширины */
.official-img-wrapper { flex:0 0 40.5%; max-width:180px; display:flex; align-items:stretch; justify-content:center; overflow:hidden; }
.official-img { width:100%; height:100%; object-fit:cover; object-position:center top; display:block; }

.official-info-col { flex:1; display:flex; flex-direction:column; gap:8px; min-width:0; padding-top:2px; }

.official-aff-riv-row {
  display:flex; align-items:center; gap:6px; font-size:11px; font-weight:700; letter-spacing:1px;
  color:#fff; flex-wrap:wrap; background:#1a1a1a; padding:5px 10px; border-radius:10px; align-self:flex-start;
}
.aff-riv-label { opacity:.85; color:#fff; }
.aff-riv-icons { display:inline-flex; align-items:center; }
.aff-riv-icons img.faction-icon-small { height:20px; margin:0 2px; }
.aff-riv-divider { width:1px; height:16px; background:#666; margin:0 2px; }

.official-rep-funding {
  font-size:clamp(13px,3.6vw,15px); font-weight:700; color:#fff;
  background:#1a1a1a; padding:5px 10px; border-radius:10px; align-self:flex-start;
}
.official-rep-funding span { color:#ffd700; }
.rep-funding-sep { color:#888 !important; margin:0 2px; }

.official-stats-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px 6px; margin-top:auto; }
.stat-badge { border-radius:14px; display:flex; align-items:center; justify-content:center; gap:6px; text-align:center; box-shadow:0 3px 8px rgba(0,0,0,.35); }
.stat-badge.stat-yellow { background:#ffd700; color:#000; }
.stat-badge.stat-black { background:#111; color:#ffd700; }
.stat-badge.stat-big { padding:10px 6px; flex-direction:column; clip-path:polygon(3% 8%,97% 2%,100% 55%,95% 98%,5% 100%,0% 48%); }
.stat-badge.stat-big .stat-num { font-size:clamp(22px,6vw,32px); font-weight:700; line-height:1; }
.stat-badge.stat-big .stat-name { font-size:9.5px; font-weight:700; letter-spacing:1.5px; margin-top:3px; }
.stat-badge.stat-small { padding:7px 6px; clip-path:polygon(6% 0%,94% 6%,100% 50%,92% 100%,8% 94%,0% 50%); }
.stat-badge.stat-small .stat-num { font-size:clamp(16px,4.5vw,22px); font-weight:700; }
.stat-badge-icon { width:16px; height:16px; flex-shrink:0; background:#000; border-radius:50%; padding:4px; box-sizing:content-box; }

.official-section { padding:4px 8px 8px; background:#f2ede2; }
/* Секции без заголовка (оружие, трейты) — отступ сверху вместо чёрной плашки */
.official-section.no-title { padding-top:10px; }
.official-section-title { background:#000; color:#ffd700; padding:8px; font-size:15px; font-weight:700; letter-spacing:2px; text-align:center; }

.official-weapon { background:#232323; color:#fff; padding:10px 12px; border-radius:12px; margin:8px 0; box-shadow:0 4px 6px rgba(0,0,0,.5); }
.official-weapon-first-line { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px; font-weight:700; }
.official-weapon-name { color:#ffd700; font-size:15px; letter-spacing:.5px; }
.official-weapon-stats { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.official-weapon-damage { font-size:16px; }
.official-weapon-rof, .official-weapon-ammo { color:#fff; display:flex; align-items:center; gap:4px; font-size:14px; }
.official-weapon-traits-line { margin-top:8px; padding-top:8px; border-top:1px dashed #444; text-align:center; font-size:12px; letter-spacing:.5px; }
.weapon-trait-text { color:#ffd700; cursor:pointer; }
.weapon-trait-text:hover { text-decoration:underline; }

.official-section.yellow { background:#ffd700; margin:0; padding:0 0 12px; }
.official-section.yellow.no-title { padding:12px 0; }
.official-section.yellow .official-section-title { margin-bottom:8px; }
.official-traits-list { display:grid; grid-template-columns:1fr 1fr; gap:2px 14px; padding:0 16px; }
.official-trait-item { font-size:12.5px; font-weight:700; letter-spacing:.3px; color:#000; padding:4px 0; cursor:pointer; }
.official-trait-item:hover { text-decoration:underline; }
.official-trait-item.equipment-item { display:flex; align-items:center; gap:6px; }
.official-trait-item.equipment-item small { opacity:.75; font-weight:600; }
.official-trait-item.equipment-item .remove-eq { position:static; width:18px; height:18px; font-size:13px; flex-shrink:0; }
.official-trait-item .inline-icon { background:#fff; border-radius:50%; padding:2px; box-sizing:content-box; }

.stat-icon { width:20px; height:20px; vertical-align:middle; }

/* ВСПОМОГАТЕЛЬНЫЕ ЭЛЕМЕНТЫ */
.faction-icon-small { height:22px; width:auto; margin:0 4px; vertical-align:middle; border-radius:4px; box-shadow:0 2px 6px rgba(0,0,0,0.6); }

/* ЛИМИТ REP */
#repLimit { width:64px; height:32px; background:#111; color:#fff; border:2px solid #e94560; border-radius:12px; font-family:'Oswald',sans-serif; font-size:16px; font-weight:bold; text-align:center; margin:0 6px; outline:none; transition:all 0.3s ease; box-shadow:0 4px 12px rgba(233,69,96,0.2); }
#repLimit:focus { border-color:#ff3366; box-shadow:0 0 20px rgba(233,69,96,0.7); background:#222; }
#repLimit::-webkit-inner-spin-button, #repLimit::-webkit-outer-spin-button { -webkit-appearance:none; margin:0; }

/* МОДАЛЬНОЕ ОКНО ВЫБОРА РАНГА (в стиле trait-popup) */
.rank-select-modal { position:fixed; inset:0; background:rgba(0,0,0,0.85); backdrop-filter:blur(5px); z-index:10000; display:flex; align-items:center; justify-content:center; padding:calc(20px + var(--safe-top)) 20px calc(20px + var(--safe-bottom)); }
.rank-select-content {
  background:#141414; width:100%; max-width:400px; max-height:90vh; border-radius:16px;
  display:flex; flex-direction:column; overflow:hidden; box-shadow:0 10px 30px rgba(0,0,0,.6), 0 0 25px rgba(233,69,96,0.3);
}
.rank-select-header {
  padding:16px 20px 12px; color:#ffd700; display:flex; justify-content:space-between; align-items:flex-start; gap:12px;
  font-family:'Oswald',sans-serif; font-weight:700; letter-spacing:1px; font-size:clamp(14px,4vw,17px);
  border-bottom:2px solid #e94560; word-break:break-word; flex-shrink:0;
}
.rank-select-header strong { color:#fff; }
.rank-select-close { font-size:26px; line-height:1; cursor:pointer; color:#fff; flex-shrink:0; transition:color .2s; }
.rank-select-close:hover { color:#e94560; }
.rank-select-buttons { display:flex; flex-direction:column; gap:12px; padding:18px 20px; overflow-y:auto; }
.rank-select-btn { background:#1e1e1e; color:#eee; border:2px solid #333; border-radius:12px; padding:14px; font-size:16px; font-weight:700; font-family:'Oswald',sans-serif; cursor:pointer; transition:all 0.25s; }
.rank-select-btn:hover { border-color:#e94560; background:#2a1418; transform:translateY(-1px); }

/* УДАЛЕНИЕ EQUIPMENT */
.remove-eq { position:absolute; top:-10px; right:-10px; background:#ff0000; color:#fff; width:28px; height:28px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:20px; font-weight:bold; cursor:pointer; box-shadow:0 3px 8px rgba(255,0,0,0.8); z-index:12; transition:all 0.3s; }
.remove-eq:hover { background:#ff3333; transform:scale(1.2); }

/* ИКОНКИ В ТЕКСТЕ */
.inline-icon { display:inline-block; height:1.1em; width:auto; vertical-align:middle; margin:0 2px; }

/* ПОПАП ТРЕЙТОВ (в стиле панели-глоссария рядом с карточкой) */
.trait-popup { position:fixed; inset:0; background:rgba(0,0,0,0.85); backdrop-filter:blur(5px); z-index:10000; display:flex; align-items:center; justify-content:center; padding:calc(20px + var(--safe-top)) 20px calc(20px + var(--safe-bottom)); }
.trait-popup-content {
  background:#141414; width:100%; max-width:450px; border-radius:16px;
  overflow:hidden; box-shadow:0 10px 30px rgba(0,0,0,.6), 0 0 25px rgba(233,69,96,0.3);
}
.trait-popup-header {
  padding:16px 20px 12px; color:#ffd700; display:flex; justify-content:space-between; align-items:flex-start;
  font-family:'Oswald',sans-serif; font-weight:700; letter-spacing:1px; font-size:16px;
  border-bottom:2px solid #e94560;
}
.trait-popup-body { padding:18px 20px; color:#bbb; line-height:1.6; font-size:13.5px; max-height:70vh; overflow-y:auto; }
.trait-popup-body .inline-icon { background:#fff; border-radius:50%; padding:1px; box-sizing:content-box; }
.trait-popup-close { font-size:26px; line-height:1; cursor:pointer; color:#fff; flex-shrink:0; margin-left:12px; transition:color .2s; }
.trait-popup-close:hover { color:#e94560; }

/* ПРОФИЛЬ И СОХРАНЕНИЯ ОТРЯДОВ (в стиле trait-popup, см. auth.js) */
.auth-modal { position:fixed; inset:0; background:rgba(0,0,0,0.85); backdrop-filter:blur(5px); z-index:10000; display:none; align-items:center; justify-content:center; padding:calc(20px + var(--safe-top)) 20px calc(20px + var(--safe-bottom)); }
.auth-modal.active { display:flex; }
.auth-modal-content { max-width:420px; }
.auth-form { display:flex; flex-direction:column; gap:12px; }
.auth-form input {
  background:#1e1e1e; color:#fff; border:2px solid #333; border-radius:12px; padding:12px 14px;
  font-family:'Oswald',sans-serif; font-size:15px; outline:none; transition:border-color .2s;
}
.auth-form input:focus { border-color:#e94560; }
.auth-buttons { display:flex; gap:10px; }
.auth-buttons .rank-select-btn { flex:1; padding:11px; font-size:14px; }
.auth-note { color:#888; font-size:11.5px; line-height:1.5; margin:2px 0 0; }
.auth-profile-head { display:flex; align-items:center; gap:10px; margin-bottom:14px; }
.auth-username { color:#fff; font-weight:700; font-size:15px; flex:1; word-break:break-word; }
.auth-slots { color:#ffd700; font-weight:700; font-size:13px; }
.saves-title { color:#ffd700; font-weight:700; letter-spacing:2px; font-size:13px; border-bottom:2px solid #e94560; padding-bottom:6px; margin-bottom:10px; }
.save-row {
  display:flex; align-items:center; gap:10px; background:#1e1e1e;
  border-radius:12px; padding:10px 12px; margin-bottom:8px; transition:background .2s;
}
.save-row:hover { background:#2a1418; }
.save-info { flex:1; min-width:0; }
.save-name { color:#fff; font-weight:700; font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.save-meta { color:#888; font-size:11.5px; margin-top:2px; }
.save-actions { display:flex; gap:6px; flex-shrink:0; }
.save-btn {
  background:#e94560; color:#fff; border:none; border-radius:16px; padding:7px 12px;
  font-family:'Oswald',sans-serif; font-weight:700; font-size:12px; cursor:pointer; transition:background .2s;
}
.save-btn:hover { background:#ff3366; }
.save-btn-del { background:#333; padding:7px 10px; }
.save-btn-del:hover { background:#c00; }

/* РАЗДЕЛ ИГРА (game.js): обмен ростерами по коду */
.game-content { padding:16px 12px 80px; max-width:1100px; margin:0 auto; }
.game-setup { display:flex; flex-direction:column; gap:16px; }
.game-panel {
  background:#141414; border-radius:16px; padding:18px 20px;
  display:flex; flex-direction:column; gap:12px; box-shadow:0 6px 20px rgba(0,0,0,.5);
}
.game-center { align-items:center; text-align:center; }
.game-panel-title { color:#ffd700; font-weight:700; letter-spacing:2px; font-size:16px; border-bottom:2px solid #e94560; padding-bottom:8px; }
.game-note { color:#999; font-size:13px; line-height:1.5; margin:0; }
.game-waiting { color:#ffd700; font-size:14px; }
.game-select, .game-code-input {
  background:#1e1e1e; color:#fff; border:2px solid #333; border-radius:12px; padding:11px 14px;
  font-family:'Oswald',sans-serif; font-size:15px; outline:none; width:100%;
}
.game-select:focus, .game-code-input:focus { border-color:#e94560; }
.game-code-input { text-transform:uppercase; letter-spacing:6px; text-align:center; font-weight:700; }
.game-code-display {
  font-size:44px; font-weight:700; letter-spacing:12px; color:#ffd700;
  background:#000; border-radius:16px; padding:14px 20px 14px 32px;
  user-select:all; /* клик — и код выделен целиком для копирования */
}
/* Блок условий игры (Event + Encounter) в настройке */
.game-cond-row { display:flex; align-items:center; gap:8px; }
.game-cond-label { color:#999; font-size:12px; text-transform:uppercase; letter-spacing:1px; flex:0 0 92px; }
.game-cond-select { flex:1; min-width:0; padding:8px 10px; font-size:14px; }
.game-cond-btn {
  width:36px; height:36px; flex-shrink:0; background:#141414; color:#fff; border:2px solid #333;
  border-radius:10px; font-size:16px; cursor:pointer; transition:all .2s;
  display:flex; align-items:center; justify-content:center;
}
.game-cond-btn:hover { border-color:#e94560; background:#2a1418; }

/* Блок условий в ожидании и на экране игры — заметные карточки у обоих игроков */
.game-cond-bar { display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin:0 0 14px; }
.game-cond-card {
  flex:1; min-width:200px; max-width:340px; background:#141414;
  border-radius:14px; padding:10px 14px; cursor:pointer; text-align:center;
  transition:all .2s; box-shadow:0 4px 14px rgba(0,0,0,.45);
}
.game-cond-card:hover { background:#2a1418; transform:translateY(-2px); box-shadow:0 6px 18px rgba(233,69,96,.3); }
.game-cond-card-label { color:#e94560; font-size:10.5px; font-weight:700; letter-spacing:2px; text-transform:uppercase; }
.game-cond-card-name { color:#ffd700; font-family:'Oswald',sans-serif; font-weight:700; font-size:17px; letter-spacing:.5px; margin:3px 0; }
.game-cond-card-hint { color:#777; font-size:10.5px; }

/* Скан карты условия в попапе (см. conditionPopupBody в game.js) */
.game-cond-popup-img-wrap { text-align:center; }
.game-cond-popup-img { max-width:100%; height:auto; border-radius:12px; box-shadow:0 6px 20px rgba(0,0,0,.5); }
.game-cond-popup-text { color:#bbb; line-height:1.6; font-size:13.5px; }

/* Верхняя строка партии: код игры, компактные чипы условий и выход.
   На телефоне переносится по строкам, чипы ужимаются с многоточием */
.game-play-bar { display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin-bottom:12px; }
.game-play-code { color:#999; font-size:13px; flex-shrink:0; }
.game-play-code b { color:#ffd700; letter-spacing:3px; }
.game-leave-btn { margin-left:auto; flex-shrink:0; }
.game-cond-chip {
  display:inline-flex; align-items:center; gap:6px; min-width:0; max-width:190px;
  background:#141414; border:1px solid #333; border-radius:10px; padding:4px 9px;
  cursor:pointer; transition:border-color .15s;
}
.game-cond-chip:hover { border-color:#e94560; }
.game-cond-chip b { color:#e94560; font-size:10px; letter-spacing:1px; flex-shrink:0; }
.game-cond-chip-name {
  color:#ffd700; font-size:11.5px; font-weight:700;
  min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

/* Вкладки экрана партии — только на телефонах и узких планшетах.
   На широких экранах (см. медиа-запрос ниже) вкладки скрыты, а все три блока
   показаны сразу, как было до разделения */
.game-tabs { display:flex; gap:6px; margin-bottom:12px; }
.game-tab {
  flex:1; min-width:0; background:#141414; color:#999; border:2px solid #333; border-radius:12px;
  padding:9px 6px; font-family:'Oswald',sans-serif; font-weight:700; font-size:12px; letter-spacing:.5px;
  cursor:pointer; transition:all .15s; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  touch-action:manipulation;
}
.game-tab:hover { border-color:#666; }
.game-tab.on { background:#e94560; border-color:#e94560; color:#fff; }
.game-panes { display:block; }
.game-pane { display:none; }
.game-pane.on { display:block; }

.game-roster { background:#141414; border-radius:16px; overflow:hidden; box-shadow:0 6px 20px rgba(0,0,0,.5); }
.game-roster-head { background:#1a1a1a; border-bottom:2px solid #e94560; padding:12px 16px; }
.game-roster-title { color:#ffd700; font-weight:700; letter-spacing:2px; font-size:14px; }
.game-roster-sub { color:#999; font-size:12.5px; margin-top:3px; }
.game-model-row {
  display:flex; align-items:center; gap:10px; padding:8px 10px; cursor:pointer;
  border-bottom:1px solid #222; transition:background .2s;
}
.game-model-row:last-child { border-bottom:none; }
.game-model-row:hover { background:#1f1f1f; }
.game-model-row img { width:44px; height:56px; object-fit:cover; border-radius:8px; flex-shrink:0; }
.game-model-info { min-width:0; flex:1; }
/* Первая строка: имя, ранг с Rep и прижатые вправо счётчики WIL/END */
.game-model-line1 { display:flex; align-items:center; gap:6px 8px; flex-wrap:wrap; }
.game-model-name { color:#fff; font-weight:700; font-size:14px; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.game-model-meta { color:#888; font-size:11.5px; white-space:nowrap; }
.game-model-counters { display:inline-flex; align-items:center; gap:8px; margin-left:auto; flex-shrink:0; cursor:default; }
.game-model-counters .gm-counter { font-size:10px; letter-spacing:.5px; }
.game-model-counters .gm-counter b { font-size:16px; min-width:20px; }
.game-model-counters .gm-counter button { width:26px; height:26px; font-size:15px; }
/* Вторая строка: статусы, патроны, эффекты, снаряжение */
.game-model-eq { color:#777; font-size:10.5px; font-style:italic; min-width:0; }
.game-model-missing { opacity:.5; cursor:default; }
.game-model-ko { opacity:.45; }

/* Панель условий игры в настройке — отдельным блоком над созданием/входом */
.game-cond-panel { margin-bottom:16px; }

/* ПАНЕЛЬ РАУНДА: раунд, инициатива, пасс-маркеры (Take the Lead / Passing).
   Компактный вид — две строки вместо трёх, короткие подписи, мелкие кнопки */
.game-round-panel { margin-bottom:12px; gap:8px; padding:10px 12px; }
.game-round-row { display:flex; align-items:center; gap:6px 8px; flex-wrap:wrap; }
.game-round-counter b { font-size:20px; min-width:24px; }
.game-round-panel .gm-counter { font-size:11px; }
.game-round-panel .gm-counter button { width:28px; height:28px; font-size:16px; }
.game-round-panel .gm-counter b { font-size:17px; min-width:22px; }
.game-next-round-btn { margin-left:auto; width:32px; height:32px; font-size:15px; }
.game-round-label { color:#999; font-size:11px; text-transform:uppercase; letter-spacing:1px; flex-shrink:0; }
.game-init-chip {
  max-width:104px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  padding:5px 9px; font-size:11.5px;
}

/* Патроны и статусы модели */
.gm-ammo { font-size:11px; }
.gm-ammo img { width:12px; height:12px; background:#fff; border-radius:50%; padding:1px; }
.gm-ammo b { font-size:16px; min-width:20px; }
.gm-ammo button { width:26px; height:26px; font-size:15px; }
.gm-fx-row { display:inline-flex; align-items:center; gap:6px; flex-wrap:wrap; }
.gm-fx-chip {
  display:inline-flex; align-items:center; gap:5px; background:#2a1418; color:#ff9db0;
  border:1px solid #5a1a26; border-radius:9px; padding:4px 8px;
  font-size:11px; font-weight:700; letter-spacing:.3px; cursor:pointer; transition:border-color .15s;
}
.gm-fx-chip:hover { border-color:#e94560; }
.gm-fx-chip b {
  display:flex; align-items:center; justify-content:center; width:15px; height:15px;
  background:#c00; color:#fff; border-radius:50%; font-size:10px; line-height:1; cursor:pointer;
}
.gm-fx-add {
  background:#111; color:#999; border:1px solid #383838; border-radius:9px; padding:5px 6px;
  font-family:'Oswald',sans-serif; font-size:11px; font-weight:700; letter-spacing:.5px;
  cursor:pointer; outline:none; max-width:110px;
}
.gm-fx-add:hover { border-color:#e94560; color:#fff; }

/* СЧЁТ ПАРТИИ И РЕЗУЛЬТАТ (очки побед + фиксация победителя) */
.game-result-panel { margin-bottom:14px; }
/* Счёт стоит во вкладке карт целей — там же, где набираются VP.
   Компактный вид: обе стороны и кнопка завершения в одну строку */
.game-score-panel { margin-bottom:14px; gap:8px; padding:10px 12px; }
.game-score-row { display:flex; align-items:center; flex-wrap:wrap; gap:8px 10px; }
.game-score-label { color:#ffd700; font-weight:700; font-size:12px; letter-spacing:2px; flex-shrink:0; }
.game-score-sep { color:#666; font-weight:700; }
.game-score-panel .game-vp-box {
  flex:0 1 auto; min-width:0; flex-direction:row; align-items:center; gap:8px;
  background:#1a1a1a; border-radius:10px; padding:4px 8px;
}
.game-score-panel .game-vp-name { font-size:12px; max-width:96px; }
.game-score-panel .gm-counter b { font-size:19px; min-width:24px; }
.game-score-panel .gm-counter button { width:28px; height:28px; font-size:16px; }
.game-finish-btn {
  margin-left:auto; flex-shrink:0; background:#141414; color:#e94560; border:2px solid #e94560;
  border-radius:10px; padding:6px 12px; font-family:'Oswald',sans-serif; font-weight:700;
  font-size:11.5px; letter-spacing:1px; cursor:pointer; transition:all .15s; touch-action:manipulation;
}
.game-finish-btn:hover { background:#e94560; color:#fff; }
.game-finish-block { display:flex; flex-direction:column; gap:8px; border-top:1px solid #222; padding-top:8px; }
.game-finish-cancel { background:#333; flex:0 0 auto; }
.game-finish-cancel:hover { background:#444; }
.game-vp-row { display:flex; gap:12px; flex-wrap:wrap; }
.game-vp-box {
  flex:1; min-width:140px; background:#1a1a1a; border-radius:12px;
  padding:10px 12px; display:flex; flex-direction:column; align-items:center; gap:6px;
}
.game-vp-name { color:#fff; font-weight:700; font-size:13px; letter-spacing:.5px; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.game-vp-box .gm-counter b { color:#ffd700; font-size:24px; min-width:34px; }
.game-finish-row { display:flex; gap:10px; flex-wrap:wrap; }
.game-finish-row .rank-select-btn { flex:1; min-width:140px; padding:11px; font-size:14px; }
.game-result-winner { color:#ffd700; font-family:'Oswald',sans-serif; font-weight:700; font-size:22px; letter-spacing:1px; }
.game-result-score { color:#ccc; font-size:15px; }
.game-result-score b { color:#e94560; font-size:18px; }

/* ======================== РАЗДЕЛ ТУРНИРЫ (tournaments.js) ======================== */
/* Экран выбора роли: две крупные карточки */
.tn-role-choice { display:flex; flex-direction:column; gap:16px; }
.tn-role-card { cursor:pointer; transition:all .2s; }
.tn-role-card:hover { background:#2a1418; transform:translateY(-2px); box-shadow:0 6px 18px rgba(233,69,96,.3); }
.tn-role-icon { font-size:38px; line-height:1; }
@media (min-width: 700px) {
  .tn-role-choice { flex-direction:row; }
  .tn-role-card { flex:1; }
}

.tn-roles-back { align-self:flex-start; margin-bottom:14px; background:#333; }
.tn-roles-back:hover { background:#444; }
.tn-list-title { margin-top:20px; }

/* Форма создания турнира */
.tn-form-row { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.tn-form-label { color:#999; font-size:12px; text-transform:uppercase; letter-spacing:1px; flex:0 0 92px; }
.tn-num { width:80px; flex:0 0 auto; }
.tn-textarea { resize:vertical; font-family:'Oswald',sans-serif; }

/* Карточка турнира */
.tn-card { margin-bottom:16px; }
.tn-card-title { word-break:break-word; }
.tn-card-meta { color:#999; font-size:13px; }
.tn-card-slots { color:#ccc; font-size:14px; }
.tn-card-slots b { color:#ffd700; }
.tn-card-actions { display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.tn-card-actions .rank-select-btn { padding:10px 16px; font-size:14px; }

/* Список участников */
.tn-players { display:flex; flex-direction:column; gap:6px; }
.tn-player-row {
  display:flex; align-items:center; gap:8px; background:#1a1a1a;
  border-radius:10px; padding:7px 10px; min-width:0;
}
.tn-player-clickable { cursor:pointer; transition:border-color .15s; }
.tn-player-clickable:hover { background:#2a1418; }
.tn-player-num { color:#777; font-family:'Oswald',sans-serif; font-weight:700; font-size:12px; width:18px; text-align:center; flex-shrink:0; }
.tn-player-name { color:#fff; font-weight:700; font-size:13px; flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tn-player-name b { color:#ffd700; font-weight:700; }
.tn-badge {
  flex-shrink:0; font-size:10px; font-weight:700; letter-spacing:.5px; text-transform:uppercase;
  border-radius:8px; padding:3px 7px; border:1px solid #333; color:#999;
}
.tn-badge-ok { color:#7ddf7d; border-color:#2e5a2e; }
.tn-badge-wait { color:#ffb84d; border-color:#5a4d00; }
.tn-badge-reserve { color:#ffd700; border-color:#5a4d00; }

/* Статусы турнира */
.tn-badge-open { color:#7ddf7d; border-color:#2e5a2e; }
.tn-badge-live { color:#ff3366; border-color:#5a1a26; animation:tnLivePulse 1.6s ease-in-out infinite; }
.tn-badge-done { color:#999; border-color:#333; }
@keyframes tnLivePulse { 0%,100% { opacity:1; } 50% { opacity:.55; } }

/* Пары тура */
.tn-pair-row {
  display:flex; align-items:center; gap:8px; background:#1a1a1a;
  border-radius:10px; padding:7px 10px; flex-wrap:wrap;
}
.tn-pair-side { color:#fff; font-weight:700; font-size:13px; display:inline-flex; align-items:center; gap:6px; min-width:0; }
.tn-pair-vs { color:#e94560; font-family:'Oswald',sans-serif; font-weight:700; font-size:11px; letter-spacing:1px; }
.tn-pair-pending { color:#777; }
.tn-pair-win { color:#7ddf7d; font-size:11.5px; }
.tn-pair-loss { color:#ff6b6b; font-size:11.5px; }

/* Таблица турнира и победитель */
.tn-st-row { cursor:default; }
.tn-st-cell { flex-shrink:0; color:#ffd700; font-family:'Oswald',sans-serif; font-weight:700; font-size:12.5px; min-width:48px; text-align:right; }
.tn-st-winner { background:#1f1a0a; box-shadow:0 0 12px rgba(255,215,0,.25); }
.tn-winner-banner {
  background:linear-gradient(90deg, rgba(255,215,0,.12), transparent); border-left:3px solid #ffd700;
  border-radius:0 10px 10px 0; padding:10px 14px; color:#fff; font-size:15px;
}
.tn-winner-banner b { color:#ffd700; font-family:'Oswald',sans-serif; letter-spacing:1px; }

/* Запись своего результата тура */
.tn-report-form { display:flex; flex-direction:column; gap:10px; border-top:2px solid #e94560; padding-top:12px; }
.tn-report-done { display:flex; align-items:center; gap:10px; flex-wrap:wrap; color:#7ddf7d; font-weight:700; font-size:13.5px; }

/* Кнопки управления ходом турнира (организатор) */
.tn-org-btn { border-color:#5a4d00; color:#ffd700; }
.tn-org-btn:hover { border-color:#ffd700; background:#2a2414; }

/* Форма подачи турнирных ростеров + чек-лист правил */
.tn-rosters-form { display:flex; flex-direction:column; gap:10px; border-top:2px solid #e94560; padding-top:12px; }
.tn-checklist { display:flex; flex-direction:column; gap:4px; background:#1a1a1a; border-radius:10px; padding:10px 12px; }
.tn-check { font-size:12.5px; font-weight:700; letter-spacing:.3px; }
.tn-check.is-ok { color:#7ddf7d; }
.tn-check.is-bad { color:#ff6b6b; }

/* Счётчики WIL/END и статусы KD/KO у модели на экране игры.
   Размеры рассчитаны на палец на телефоне: кнопки ~34px и крупные цифры. */
.game-model-track { display:flex; align-items:center; gap:6px 8px; margin-top:5px; flex-wrap:wrap; cursor:default; }
.game-model-track .gm-status { padding:5px 9px; font-size:11.5px; }
.gm-counter { display:inline-flex; align-items:center; gap:6px; color:#999; font-size:12px; letter-spacing:1px; font-weight:700; font-family:'Oswald',sans-serif; }
.gm-counter b { color:#ffd700; font-size:19px; min-width:26px; text-align:center; }
.gm-counter button {
  width:34px; height:34px; border-radius:9px; background:#222; color:#fff; border:1px solid #383838;
  cursor:pointer; font-size:19px; line-height:1; display:flex; align-items:center; justify-content:center;
  transition:border-color .15s; touch-action:manipulation;
}
.gm-counter button:hover { border-color:#e94560; }
.gm-status {
  background:#111; color:#777; border:2px solid #333; border-radius:9px; padding:7px 12px;
  font-family:'Oswald',sans-serif; font-weight:700; font-size:13px; letter-spacing:1px;
  cursor:pointer; transition:all .15s; touch-action:manipulation;
}
.gm-status:hover { border-color:#666; }
.gm-status.on { background:#ffd700; color:#000; border-color:#ffd700; }

/* КОЛОДА ЦЕЛЕЙ НА ЭКРАНЕ ИГРЫ (game-cards.js): рука, зоны, фишки.
   Панель видна только своему игроку — рука по правилам скрыта от оппонента. */
.gc-panel { margin-bottom:16px; }
.gc-stats { display:flex; flex-wrap:wrap; gap:8px 16px; }
.gc-stat { color:#999; font-size:12px; letter-spacing:1px; font-weight:700; text-transform:uppercase; }
.gc-stat b { color:#ffd700; font-size:16px; }
.gc-tokens { display:flex; flex-wrap:wrap; gap:10px 16px; padding:10px 0; border-top:1px solid #222; border-bottom:1px solid #222; }
.gc-token { text-transform:none; }
.gc-warn { color:#ff6b6b; }
.gc-actions-row { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.gc-act-chip {
  background:#1e1e1e; border:2px solid #333; border-radius:10px; padding:7px 12px;
  color:#ffd700; font-size:12.5px; font-weight:700; letter-spacing:1px;
}
.gc-block { display:flex; flex-direction:column; gap:8px; }
.gc-block-title { color:#e94560; font-weight:700; font-size:13px; letter-spacing:2px; text-transform:uppercase; }
.gc-cards { display:grid; grid-template-columns:repeat(auto-fill, minmax(128px, 1fr)); gap:10px; align-items:start; }
.gc-card {
  position:relative; background:#1a1a1a; border-radius:12px; overflow:hidden; cursor:pointer;
  box-shadow:0 4px 12px rgba(0,0,0,.5); transition:box-shadow .2s;
}
.gc-card:hover { box-shadow:0 8px 18px rgba(233,69,96,.35); }
.gc-card img { width:100%; display:block; }
.gc-card-name { color:#fff; font-weight:700; font-size:11px; padding:6px 8px 0; }
.gc-card-actions { display:flex; flex-wrap:wrap; align-items:center; gap:4px; padding:6px 8px 8px; }
.gc-card-actions button {
  flex:1; min-width:30px; height:30px; border-radius:8px; background:#222; color:#fff;
  border:1px solid #383838; cursor:pointer; font-size:14px; line-height:1;
  display:flex; align-items:center; justify-content:center; transition:border-color .15s;
}
.gc-card-actions button:hover { border-color:#e94560; }
.gc-vp { color:#ffd700; font-weight:700; font-size:12px; letter-spacing:1px; }
.gc-trait-chips { display:flex; flex-wrap:wrap; gap:6px; }
.gc-trait-chip {
  background:#1e1e1e; border:1px solid #383838; border-radius:10px; padding:5px 10px;
  color:#ffd700; font-size:11.5px; font-weight:700; cursor:pointer; transition:border-color .15s;
}
.gc-trait-chip:hover { border-color:#e94560; }

@media (min-width: 700px) {
  .game-setup { flex-direction:row; align-items:stretch; }
  .game-setup .game-panel { flex:1; }
}

/* Широкий экран: вкладки не нужны — карты целей во всю ширину, ростеры двумя
   колонками под ними. Ограничение по высоте отсекает телефон в альбомной
   ориентации (обычно 700-950px в ширину, но низкий): за столом там нужны
   вкладки, а не две узкие колонки ростеров */
@media (min-width: 700px) and (min-height: 600px) {
  .game-tabs { display:none; }
  .game-panes { display:flex; flex-wrap:wrap; align-items:flex-start; gap:16px; }
  .game-pane { display:block; }
  #game-pane-cards { flex:1 1 100%; }
  #game-pane-me, #game-pane-opp { flex:1 1 0; min-width:0; }
}

/* ======================== РАЗДЕЛ СТАТИСТИКА (stats.js) ======================== */
.stats-content { padding:16px 12px 80px; max-width:900px; margin:0 auto; display:flex; flex-direction:column; gap:16px; }
.stats-loading { text-align:center; color:#999; padding:40px 0; letter-spacing:1px; }

/* Плитки общих счётчиков */
.stats-tiles { display:grid; grid-template-columns:repeat(2, 1fr); gap:10px; }
.stats-tile {
  background:#141414; border-radius:14px; padding:14px 8px 12px;
  display:flex; flex-direction:column; align-items:center; gap:2px; text-align:center;
  box-shadow:0 4px 12px rgba(0,0,0,.45);
}
.stats-tile-icon { font-size:20px; line-height:1; margin-bottom:4px; }
.stats-tile-value { font-family:'Oswald',sans-serif; font-weight:700; font-size:26px; line-height:1; color:#ffd700; }
.stats-tile-label { color:#999; font-size:11px; text-transform:uppercase; letter-spacing:1px; margin-top:3px; }

/* Панели-рейтинги: место, картинка, название + полоса, число */
.stats-panel { gap:8px; }
.stats-rows { display:flex; flex-direction:column; gap:10px; margin-top:4px; }
.stats-row { display:flex; align-items:center; gap:10px; min-width:0; }
.stats-row-place {
  font-family:'Oswald',sans-serif; font-weight:700; font-size:14px; color:#777;
  width:20px; text-align:center; flex-shrink:0;
}
.stats-row.is-top .stats-row-place { color:#ffd700; }
.stats-row-img { flex-shrink:0; }
.stats-row-faction { width:32px; height:32px; object-fit:contain; filter:drop-shadow(0 2px 4px rgba(0,0,0,.6)); }
.stats-row-photo { width:34px; height:42px; object-fit:cover; object-position:center top; border-radius:8px; box-shadow:0 2px 6px rgba(0,0,0,.5); }
.stats-row-flag { font-size:24px; line-height:1; flex-shrink:0; width:32px; text-align:center; }
.stats-row-main { flex:1; min-width:0; display:flex; flex-direction:column; gap:5px; }
.stats-row-name { color:#fff; font-weight:700; font-size:13px; letter-spacing:.3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.stats-row.is-top .stats-row-name { color:#ffd700; }
.stats-row-bar { height:8px; background:#000; border:1px solid #333; border-radius:6px; overflow:hidden; }
.stats-row-fill { height:100%; background:linear-gradient(90deg, #e94560, #ff3366); border-radius:6px; }
.stats-row.is-top .stats-row-fill { background:linear-gradient(90deg, #ffd700, #ffaa00); }
.stats-row-count { font-family:'Oswald',sans-serif; font-weight:700; font-size:16px; color:#e94560; flex-shrink:0; min-width:26px; text-align:right; }
.stats-row.is-top .stats-row-count { color:#ffd700; }

/* Планшет/ПК: плитки шире (6 плиток: 2→3→6 колонок) */
@media (min-width: 700px) {
  .stats-tiles { grid-template-columns:repeat(3, 1fr); }
}
@media (min-width: 1100px) {
  .stats-tiles { grid-template-columns:repeat(6, 1fr); }
}

/* Строка выбора страны в профиле */
.auth-country-row { display:flex; align-items:center; gap:10px; margin-bottom:8px; }
.auth-country-label { color:#999; font-size:12px; text-transform:uppercase; letter-spacing:1px; flex-shrink:0; }
.auth-country-select { flex:1; min-width:0; padding:9px 12px; font-size:14px; }

/* Email профиля (восстановление пароля) — поле + кнопка сохранить, как страна */
.auth-email-row { display:flex; align-items:center; gap:10px; margin:14px 0 8px; }
.auth-email-row input { flex:1; min-width:0; padding:9px 12px; font-size:14px; }

/* Ссылка "Забыли пароль?" под кнопками входа */
.auth-forgot-link { color:#e94560; font-size:12.5px; text-align:center; cursor:pointer; margin:-4px 0 0; }
.auth-forgot-link:hover { text-decoration:underline; }

/* Смена пароля — сворачиваемый блок в профиле, как остальные тёмные панели */
.auth-change-pass { margin:16px 0; border-top:1px solid #2a2a2a; padding-top:12px; }
.auth-change-pass summary {
  color:#ffd700; font-weight:700; letter-spacing:1px; font-size:12.5px; cursor:pointer;
  list-style:none; text-transform:uppercase;
}
.auth-change-pass summary::-webkit-details-marker { display:none; }
.auth-change-pass summary::before { content:"▸ "; }
.auth-change-pass[open] summary::before { content:"▾ "; }
.auth-change-pass .auth-form { margin-top:12px; }

/* СВЯЗАННЫЕ ПРАВИЛА В ПОПАПАХ (расшифровка трейтов, упомянутых в апгрейде/трейте) */
.popup-related { margin-top:16px; border-top:2px solid #e94560; padding-top:12px; }
.popup-related-title { color:#ffd700; font-weight:700; letter-spacing:2px; font-size:12px; margin-bottom:10px; }
.popup-related-entry { margin-bottom:12px; }
.popup-related-entry:last-child { margin-bottom:0; }
.popup-related-name { color:#fff; font-weight:700; font-size:13px; margin-bottom:3px; }
.popup-related-desc { color:#999; font-size:12.5px; line-height:1.55; }


/* ОКНО ПОКУПКИ EQUIPMENT (в стиле trait-popup) */
.equipment-modal { position:fixed; inset:0; background:rgba(0,0,0,0.85); backdrop-filter:blur(5px); z-index:10000; display:flex; align-items:center; justify-content:center; padding:calc(20px + var(--safe-top)) 20px calc(20px + var(--safe-bottom)); }
.equipment-modal-content {
  background:#141414; width:100%; max-width:480px; max-height:90vh; border-radius:16px;
  display:flex; flex-direction:column; overflow:hidden; box-shadow:0 10px 30px rgba(0,0,0,.6), 0 0 25px rgba(233,69,96,0.3);
}
.equipment-modal-header {
  padding:16px 20px 12px; color:#ffd700; display:flex; justify-content:space-between; align-items:flex-start; gap:12px;
  font-family:'Oswald',sans-serif; font-weight:700; letter-spacing:1px; font-size:clamp(14px,4vw,17px);
  border-bottom:2px solid #e94560; word-break:break-word; flex-shrink:0;
}
.equipment-modal-header strong { color:#fff; }
.equipment-modal-close { font-size:26px; line-height:1; cursor:pointer; color:#fff; flex-shrink:0; transition:color .2s; }
.equipment-modal-close:hover { color:#e94560; }
.equipment-modal-funding { background:#1a1a1a; padding:10px 20px; text-align:center; border-bottom:2px solid #e94560; flex-shrink:0; }
.equipment-modal-funding .avail { color:#ffd700; font-weight:bold; font-size:14px; }
.equipment-modal-funding .total { color:#aaa; font-size:12px; margin-left:8px; }
.equipment-modal-list { padding:16px 20px; overflow-y:auto; display:flex; flex-direction:column; gap:12px; }
.equipment-modal-empty { text-align:center; color:#aaa; padding:10px 0; }
.equipment-item-btn {
  background:#1e1e1e; color:#eee; border:2px solid #333; border-radius:12px; padding:12px 14px; text-align:left;
  font-family:'Oswald',sans-serif; cursor:pointer; transition:all 0.25s; width:100%;
}
.equipment-item-btn:hover:not(:disabled) { border-color:#e94560; background:#2a1418; transform:translateY(-1px); }
.equipment-item-btn:disabled { opacity:0.5; cursor:not-allowed; }
.equipment-item-name { font-weight:700; font-size:14.5px; word-break:break-word; color:#fff; }
.equipment-item-price { color:#ffd700; font-weight:600; font-size:13px; }
.equipment-item-effects { display:block; opacity:0.85; font-size:12.5px; margin-top:5px; color:#bbb; line-height:1.5; }
.equipment-item-req { color:#ffd700; display:block; margin-top:5px; font-size:11.5px; }
.equipment-item-warning { color:#ff6b6b; display:block; margin-top:5px; font-size:11.5px; }
.equipment-item-special { color:#ffd700; font-size:11px; margin-left:6px; }

/* МОБИЛЬНАЯ ОПТИМИЗАЦИЯ COMPENDIUM */
@media (max-width: 480px) {
  .compendium-header { padding: calc(12px + var(--safe-top)) 10px 12px; }
  .compendium-header h2 { font-size: 18px; }
  .back-btn { left: 10px; }
  
  .rules-docs-buttons {
    gap: 6px;
    margin-top: 10px;
  }
  
  .rules-doc-btn {
    padding: 6px 12px;
    font-size: 10px;
    border-radius: 16px;
  }
  
  .compendium-search-wrapper { padding: 12px; }
  .compendium-search input { font-size: 14px; padding: 12px 10px 12px 0; }
  
  .comp-entry { margin: 16px 10px 8px; border-radius: 12px; }
  .comp-title { font-size: 16px; padding: 12px 14px 8px; }
  .comp-text { font-size: 13.5px; padding: 12px 14px; line-height: 1.6; }
  
  /* Размер кнопок не трогаем — они всегда 40×40, меняется только зазор */
  .header-buttons { gap: 8px; }
}

@media (max-width: 360px) {
  .rules-doc-btn {
    padding: 5px 10px;
    font-size: 9px;
  }
  
  .compendium-header h2 { font-size: 16px; }
}

/* ======================== ГЛАВНОЕ МЕНЮ ======================== */
/* Компактное меню в стиле остальных разделов приложения: тёмные панели (#141414),
   красный акцент (#e94560), золотой заголовок. Сетка 2 колонки — целиком помещается
   на экран телефона без прокрутки. */
.main-menu {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  min-height: 100dvh; /* мобильные браузеры с плавающей адресной строкой */
  background: linear-gradient(180deg, #0d0d0d 0%, #161616 55%, #0d0d0d 100%);
  position: relative;
  overflow: hidden;
  padding: calc(20px + var(--safe-top)) 14px calc(20px + var(--safe-bottom));
}

.main-menu-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(ellipse at 20% 85%, rgba(233, 69, 96, 0.12) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 15%, rgba(255, 215, 0, 0.07) 0%, transparent 50%);
}

.main-menu-content {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 400px;
  display: flex;
  flex-direction: column;
  align-items: center;
  animation: fadeIn 0.4s ease-out;
}

.main-logo { text-align: center; margin-bottom: 14px; }
.main-logo h1 {
  font-size: 44px;
  font-weight: 700;
  letter-spacing: 10px;
  padding-left: 10px; /* компенсация letter-spacing для оптического центра */
  margin: 0;
  color: #ffd700;
  text-shadow: 0 0 16px rgba(233, 69, 96, 0.65);
  font-family: 'Oswald', sans-serif;
}
.main-logo .subtitle {
  font-size: 11.5px;
  color: #999;
  margin-top: 4px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  line-height: 1.5;
}

/* ПЕРЕКЛЮЧАТЕЛЬ ЯЗЫКОВ */
.lang-switch { display: flex; gap: 8px; margin-bottom: 16px; }
.lang-btn {
  background: #141414;
  color: #888;
  border: 2px solid #2a2a2a;
  padding: 5px 16px;
  border-radius: 16px;
  font-size: 12px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.2s;
  font-family: 'Oswald', sans-serif;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.lang-btn:hover { border-color: #e94560; color: #e94560; }
.lang-btn.active { background: #e94560; color: #fff; border-color: #e94560; box-shadow: 0 3px 10px rgba(233, 69, 96, 0.4); }

/* КНОПКИ РАЗДЕЛОВ */
.menu-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; }
/* При нечётном числе кнопок последняя занимает всю строку — без «дырки» в сетке */
.menu-buttons .menu-btn:last-child:nth-child(odd) { grid-column: 1 / -1; }
.menu-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: #141414;
  color: #eee;
  border: 2px solid #2a2a2a;
  border-radius: 14px;
  padding: 13px 8px 11px;
  cursor: pointer;
  transition: all 0.2s;
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.45);
}
.menu-btn:hover {
  border-color: #e94560;
  background: #1b1416;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(233, 69, 96, 0.25);
}
.menu-btn:active { transform: translateY(0) scale(0.98); }
.btn-icon { font-size: 22px; line-height: 1; }
.btn-text { font-size: 13px; letter-spacing: 2px; }

.main-menu-footer { margin-top: 14px; text-align: center; }
.version { color: #555; font-size: 11px; letter-spacing: 2px; text-transform: uppercase; }
.footer-note { color: #555; font-size: 10.5px; margin-top: 6px; letter-spacing: .3px; line-height: 1.6; }
.footer-note a { color: #777; text-decoration: none; border-bottom: 1px dotted #555; }
.footer-note a:hover { color: #e94560; border-bottom-color: #e94560; }

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Совсем узкие экраны */
@media (max-width: 360px) {
  .main-logo h1 { font-size: 38px; letter-spacing: 7px; }
  .btn-text { font-size: 12px; letter-spacing: 1.5px; }
}

/* Планшет/ПК — меню чуть крупнее */
@media (min-width: 700px) {
  .main-menu-content { max-width: 460px; }
  .main-logo h1 { font-size: 54px; }
  .menu-btn { padding: 16px 10px 14px; }
  .btn-text { font-size: 14px; }
}

/* ======================== БОКОВАЯ ПАНЕЛЬ КАРТОЧКИ В БИЛДЕРЕ ======================== */
/* На мобильных панель не существует — карточка открывается на весь экран (.full-card).
   На ПК/планшетах (>=768px, см. BUILDER_PANEL_MEDIA в script.js) карточка открывается
   справа от списка моделей. */
.builder-card-panel { display: none; }

@media (min-width: 768px) {
  .builder-layout {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    max-width: 1500px;
    margin: 0 auto;
    padding: 0 10px;
  }
  .builder-layout .models-list {
    flex: 1;
    min-width: 0;
    max-width: none;   /* внутри flex-строки центрирование не нужно */
    margin: 0;
    padding: 10px 0;
  }
  .builder-card-panel.active {
    display: block;
    width: clamp(340px, 40vw, 480px);
    flex-shrink: 0;
    position: sticky;
    top: 125px;                       /* высота липкого топ-бара билдера */
    max-height: calc(100vh - 140px);
    overflow-y: auto;
    margin-top: 10px;
    border-radius: 18px;
    background: #0d0d0d;
    box-shadow: 0 10px 30px rgba(0,0,0,.6);
  }
  .builder-card-panel .official-card { margin: 0; }
  .builder-panel-close { position: sticky; top: 8px; margin-left: auto; margin-right: 8px; margin-bottom: -38px; }
  .builder-panel-glossary {
    background: #141414; color: #eee; border-radius: 0 0 18px 18px;
    padding: 16px 20px; margin-top: 2px;
  }
}

/* На широких экранах расшифровка трейтов — справа от карточки (второй колонкой),
   а не под ней; панель при этом становится шире. Каждая колонка скроллится
   НЕЗАВИСИМО: прокрутка глоссария не двигает карточку и наоборот. */
@media (min-width: 1200px) {
  .builder-card-panel.active.has-glossary {
    width: clamp(720px, 56vw, 940px);
    /* сама панель больше не скроллится — скроллятся её колонки */
    overflow: visible;
    max-height: none;
  }
  .builder-card-panel.has-glossary .builder-panel-body {
    display: flex;
    align-items: flex-start;
    gap: 12px;
  }
  .builder-card-panel.has-glossary .builder-panel-card,
  .builder-card-panel.has-glossary .builder-panel-glossary {
    max-height: calc(100vh - 150px);
    overflow-y: auto;
    overscroll-behavior: contain; /* докрутка до конца колонки не тянет страницу */
  }
  .builder-card-panel.has-glossary .builder-panel-card {
    flex: 0 0 clamp(340px, 26vw, 480px);
    min-width: 0;
    border-radius: 18px;
  }
  .builder-card-panel.has-glossary .builder-panel-glossary {
    flex: 1;
    min-width: 240px;
    margin-top: 0;
    border-radius: 16px;
  }
  /* Узкие скроллбары колонок — в стиле остального интерфейса */
  .builder-panel-card::-webkit-scrollbar,
  .builder-panel-glossary::-webkit-scrollbar { width: 6px; }
  .builder-panel-card::-webkit-scrollbar-thumb,
  .builder-panel-glossary::-webkit-scrollbar-thumb { background: #333; border-radius: 3px; }
}

/* ======================== АДАПТАЦИЯ ПОД ПЛАНШЕТ / ПК ======================== */
/* Мобильная вёрстка (по умолчанию) не трогается — только добавляем поведение для широких экранов */
@media (min-width: 700px) {
  .top-bar-content,
  .funds,
  .tabs-container .faction-cards,
  .models-list,
  #rosterPreviewCards,
  .obj-cards-page {
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
  }

  /* Вкладки фракций — сеткой вместо вертикального списка */
  .tabs-container .faction-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 16px;
  }
  .faction-card { height: 150px; }

  /* Списки моделей (карточки, билдер, просмотр ростера) — несколько колонок
     вместо одной узкой полосы; карточки компактные, колонок помещается больше */
  .models-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
    align-items: start;
    gap: 10px;
  }
}

@media (min-width: 1100px) {
  .top-bar-content,
  .funds,
  .tabs-container .faction-cards,
  .models-list,
  #rosterPreviewCards,
  .obj-cards-page {
    max-width: 1500px;
  }
}

/* Широкие ПК-мониторы — ещё больше колонок в списке банды */
@media (min-width: 1600px) {
  .top-bar-content,
  .funds,
  .tabs-container .faction-cards,
  .models-list,
  #rosterPreviewCards,
  .obj-cards-page {
    max-width: 1900px;
  }
  .models-list { grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); }
}

/* ======================== ПЕРЕКЛЮЧАТЕЛЬ ФОРМАТА ETERNAL ========================
   Компактная пилюля над списком фракций (билдер и раздел КАРТОЧКИ).
   Выключен по умолчанию: модели Eternal скрыты, пока игрок сам их не включит.
   Пояснение к формату — в атрибуте title, отдельной строки не занимает. */
.eternal-toggle-slot { display: flex; justify-content: flex-end; padding: 0 12px 8px; }
.eternal-toggle {
  display: inline-flex; align-items: center; gap: 8px;
  background: #1a1a1a; border: 1px solid #2e2e2e; border-radius: 999px;
  /* по вертикали чуть свободнее, чем нужно визуально — чтобы попадать пальцем */
  padding: 6px 8px 6px 12px; cursor: pointer; user-select: none;
  line-height: 1; transition: border-color .18s;
}
.eternal-toggle:hover { border-color: #444; }
.eternal-toggle input { position: absolute; opacity: 0; width: 0; height: 0; }

/* order: -1 — подпись слева от тумблера, хотя в разметке идёт после него.
   Так работает обычный сестринский селектор input:checked ~ .eternal-toggle-label
   и не нужен :has() */
.eternal-toggle-label {
  order: -1;
  font-size: 11px; font-weight: 700; letter-spacing: .08em;
  color: #8a8a8a; white-space: nowrap; transition: color .18s;
}
.eternal-toggle input:checked ~ .eternal-toggle-label { color: #ffc72c; }

.eternal-toggle-track {
  flex: none; position: relative; width: 30px; height: 17px;
  background: #333; border-radius: 999px; transition: background .18s;
}
.eternal-toggle-knob {
  position: absolute; top: 3px; left: 3px; width: 11px; height: 11px;
  background: #888; border-radius: 50%; transition: transform .18s, background .18s;
}
.eternal-toggle input:checked + .eternal-toggle-track { background: #7a5c12; }
.eternal-toggle input:checked + .eternal-toggle-track .eternal-toggle-knob {
  transform: translateX(13px); background: #ffc72c;
}
.eternal-toggle input:focus-visible + .eternal-toggle-track { outline: 2px solid #ffc72c; outline-offset: 2px; }

/* Метка на карточке модели формата Eternal — чтобы в общем списке было видно,
   что профиль не из стандартного формата */
.eternal-badge {
  display: inline-block; vertical-align: middle;
  font-size: 9px; font-weight: 700; letter-spacing: .08em;
  color: #ffc72c; background: rgba(255, 199, 44, .12);
  border: 1px solid rgba(255, 199, 44, .45); border-radius: 4px;
  padding: 1px 5px; margin-left: 6px; white-space: nowrap;
}