@import url("https://fonts.googleapis.com/css2?family=Outfit:wght@400;500&family=Inter:wght@400;500&display=swap");

:root {
  --font-display: "Outfit", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --bg: #040d1a;
  --bg-card: #0a1428;
  --bg-elevated: #0d1a33;
  --border: #1e2d47;
  --text: #e2e8f0;
  --text-muted: #90a1b9;
  --gold: #facc15;
  --gold-strong: #fde047;
  --blue: #3080ff;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}

h1, h2, h3, h4, h5, h6, .sidebar-title {
  font-family: var(--font-display);
}

/* Владелец 2026-09-23: максимум font-weight в боте — 500, нигде больше. h1-h6 и <b> по
   умолчанию жирные (bold=700) в браузере, явного правила под них раньше не было — без этого
   они остались бы жирными несмотря на все остальные font-weight ниже, гарантированно
   перекапанные тем же лимитом. */
h1, h2, h3, h4, h5, h6, b {
  font-weight: 500;
}

/* Светлая тема (settings.php) — тёмная схема выше остаётся дефолтом ("текущую цветовую гамму
   оставить как основную", владелец 2026-09-13). --gold/--gold-strong намеренно НЕ переопределены
   здесь — акцентный цвет либо остаётся золотым, либо подменяется отдельно инлайновым
   style="--gold:...;--gold-strong:..." на <html> (см. page_loader.php), независимо от
   тёмная/светлая. Атрибут выставляется JS в page_loader.php ДО первой отрисовки видимого контента
   (страница и так стартует с непрозрачным .page-loader поверх всего, см. его комментарий) —
   отдельный <html data-theme> на каждой из ~20 страниц не нужен, page_loader.php — общая для всех
   страниц точка, которая уже решает точно такую же задачу для csrf-token.
*/
:root[data-theme="light"] {
  --bg: #f3ede0;
  --bg-card: #ffffff;
  --border: #ddd0ae;
  --text: #2b2013;
  --text-muted: #7a6d55;
}

* {
  box-sizing: border-box;
}

/* Стандартный скроллбар браузера/WebView не вписывается в тёмную тему — свой тонкий скроллбар
   для всех скроллящихся блоков сразу (модалки, сайдбар, таблицы и т.п.), не только для
   отдельных мест. scrollbar-width/-color выше — стандарт (Firefox, Chromium 121+), а
   ::-webkit-scrollbar ниже — тот же вид в более старых WebView (в т.ч. телеграмовском). */
*::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

*::-webkit-scrollbar-track {
  background: transparent;
}

*::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 8px;
}

*::-webkit-scrollbar-thumb:hover {
  background: var(--gold);
}

/* Векторные line-иконки (Lucide, спрайт в icon_sprite_partial.php) вместо эмодзи-«стикеров» —
   наследуют цвет текста через currentColor, поэтому одинаково смотрятся в кнопках, заголовках и
   бейджах любого цвета без отдельной раскраски под каждое место. */
.icon {
  width: 1.1em;
  height: 1.1em;
  display: inline-block;
  flex-shrink: 0;
  vertical-align: -0.15em;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Цвет 1/2/3 места в рейтингах (раньше — 🥇🥈🥉) поверх одной и той же монохромной medal-иконки. */
.icon.rank-gold { stroke: var(--gold-strong); }
.icon.rank-silver { stroke: #c0c6d1; }
.icon.rank-bronze { stroke: #cd7f32; }

html {
  /* Подстраховка от горизонтального скролла на телефонах: если где-то в игровых данных
     (ник, описание бригады, сообщение дня со ссылкой без пробелов и т.п. — это всегда
     непредсказуемый внешний текст) попадётся длинный "неразрывный" кусок текста без пробелов,
     он переносится по символам (см. overflow-wrap ниже на body), а не толкает всю страницу
     вбок. */
  overflow-x: hidden;
}

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--text);
  background-color: var(--bg);
  min-height: 100vh;
  overflow-x: hidden;
  overflow-wrap: break-word;
}

.screen {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 1rem;
  padding: calc(4.5rem + env(safe-area-inset-top)) 1.5rem 2rem;
  text-align: center;
}

/* Обёртки для ajax-обновляемого контента (#page-content, #profile-data) — без этого блоки
   внутри них слипались: .screen даёт gap только между своими прямыми детьми. */
#page-content,
#profile-data {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.app-shell {
  min-height: 100vh;
}

.app-main {
  min-width: 0;
}

.menu-burger[hidden] {
  display: none;
}

.menu-burger {
  position: fixed;
  top: max(0.75rem, env(safe-area-inset-top));
  left: max(0.75rem, env(safe-area-inset-left));
  z-index: 40;
  width: 2.75rem;
  height: 2.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  font-size: 1.3rem;
  cursor: pointer;
}

.sidebar-backdrop {
  position: fixed;
  inset: 0;
  z-index: 35;
  background: rgba(0, 0, 0, 0.6);
}

.sidebar-backdrop[hidden] {
  display: none;
}

.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 16rem;
  max-width: 82vw;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  background: var(--bg-card);
  border-right: 1px solid var(--border);
  padding: max(0.75rem, env(safe-area-inset-top)) 0.6rem 0.75rem max(0.6rem, env(safe-area-inset-left));
  z-index: 36;
  transform: translateX(-100%);
  transition: transform 0.25s ease;
}

.sidebar.open {
  transform: translateX(0);
}

.sidebar-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--gold-strong);
  font-weight: 500;
  font-size: 1rem;
  padding: 0 0.3rem 0.75rem;
}

.sidebar-close {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 1.1rem;
  cursor: pointer;
  padding: 0.2rem;
}

.sidebar-items {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  flex: 1;
}

.sidebar-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.55rem 0.6rem;
  border: none;
  border-radius: 8px;
  background: none;
  color: var(--text-muted);
  text-decoration: none;
  text-align: left;
  font: inherit;
  font-family: var(--font-display);
  font-size: 0.875rem;
  width: 100%;
  cursor: pointer;
}

.sidebar-item--disabled {
  opacity: 0.4;
  cursor: default;
}

.sidebar-item.active {
  color: var(--bg);
  background: var(--gold-strong);
  font-weight: 500;
}

.sidebar-icon {
  font-size: 1.05rem;
  line-height: 1;
  flex-shrink: 0;
  width: 1.3rem;
  text-align: center;
}

.sidebar-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sidebar-badge {
  flex-shrink: 0;
  min-width: 1.15rem;
  height: 1.15rem;
  padding: 0 0.3rem;
  border-radius: 999px;
  background: #c0392b;
  color: #fff;
  font-size: 0.7rem;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Владелец 2026-09-23: закрыто — смотрит вниз, открыто — вверх (было право/вниз). Базовая
   иконка chevron-right смотрит вправо, поэтому закрытое состояние — это она же, повёрнутая на
   90°, открытое — на -90° (та же иконка в другую сторону, второй svg не нужен). */
.sidebar-chevron {
  flex-shrink: 0;
  opacity: 0.6;
  transform: rotate(90deg);
  transition: transform 0.15s ease;
}

.sidebar-item--parent.open .sidebar-chevron {
  transform: rotate(-90deg);
}

.sidebar-subgroup {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.2rem 0 0.4rem 2.4rem;
}

/* [hidden] и .sidebar-subgroup — одинаковая специфичность (0,0,1,0 у обоих), а это правило
   идёт позже в каскаде, поэтому без явного [hidden]-варианта display:flex выше всегда
   перебивал бы браузерный [hidden]{display:none} — подгруппа оставалась видна, даже когда
   group.hidden=true (nav.js): стрелочка крутилась, а список — нет. */
.sidebar-subgroup[hidden] {
  display: none;
}

.sidebar-subitem {
  padding: 0.35rem 0.4rem;
  font-size: 0.875rem;
  color: var(--text-muted);
  opacity: 0.6;
}

.sidebar-subitem--link {
  opacity: 1;
  text-decoration: none;
  cursor: pointer;
  border-radius: 8px;
}

.sidebar-subitem--link.active {
  color: var(--gold-strong);
  font-weight: 500;
  background: rgba(224, 165, 44, 0.12);
}

.subtitle {
  color: var(--text-muted);
  margin: -0.5rem auto 0.5rem;
  max-width: 22rem;
  line-height: 1.4;
  text-align: center;
}

.card {
  width: 100%;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

textarea, input[type="text"] {
  width: 100%;
  font: inherit;
  background: var(--bg);
  color: var(--text);
  border: none;
  border-radius: 8px;
  padding: 0.75rem;
  resize: vertical;
  min-height: 4.5rem;
}

/* Поля ввода и селекты без рамки и без кольца фокуса (владелец 2026-09-30: "убираем обводку везде,
   где возможно, при активном так же простым") — и в покое, и в фокусе вид один, поле читается только
   заливкой. Общее правило нужно и полям без своих стилей (нативные select/time в окне "По времени"),
   и будущим: им же задана заливка и цвет текста приложения, иначе без рамки белое поле сливается
   с белой панелью светлой темы. :where() даёт нулевую специфичность — правило конкретного поля ниже
   всегда сильнее. Чекбоксы/радио/range/color/file не трогаем: "обводки" в этом смысле у них нет.
   Заливка поля должна отличаться от фона контейнера (панель и модалка — var(--bg-card), поле —
   var(--bg)), иначе без рамки его не видно. Состояние ошибки — цветом заливки, не рамкой (см.
   #picker-weapon-step-amount). */
:where(input:not([type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="file"], [type="button"], [type="submit"], [type="reset"], [type="image"]), select, textarea) {
  border: none;
  outline: none;
  background-color: var(--bg);
  color: var(--text);
}

/* Иконка часов/календаря нативного time/date-поля рисуется тёмной — на тёмной заливке её не видно. */
input::-webkit-calendar-picker-indicator {
  filter: invert(1);
}

:root[data-theme="light"] input::-webkit-calendar-picker-indicator {
  filter: none;
}

button, .button {
  font: inherit;
  font-family: var(--font-display);
  font-weight: 500;
  padding: 0.75rem 1.5rem;
  border: none;
  border-radius: 8px;

  background: var(--gold);
  color: var(--bg);
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
}

/* Тот же баг с [hidden], что и у .pp-friend-action/.friend-tier-badge выше: базовое правило
   "button, .button" задаёт display:inline-block, оно перебивает браузерное [hidden]{display:none}
   — без этого варианта каждая скрытая по умолчанию кнопка "Остановить"/"Готово" (авто-стоп на
   farty/poker/card/dice/wheel, tattoo_clothing "buy-all-done") оставалась видна одновременно со
   своей парной кнопкой "Начать/Играть/Крутить" вместо переключения между ними. */
button[hidden], .button[hidden] {
  display: none;
}

button:hover:not(:disabled), .button:hover:not(:disabled) {
  filter: brightness(1.08);
}

button:active, .button:active {
  opacity: 0.85;
}

button.secondary, .button.secondary {
  background: transparent;
  color: var(--blue);
  border: 1px solid var(--blue);
}

button.secondary:hover:not(:disabled), .button.secondary:hover:not(:disabled) {
  background: rgba(59, 125, 222, 0.12);
}

.error {
  color: #ff8f8f;
  font-size: 0.9rem;
}

.maintenance-card {
  align-items: center;
  text-align: center;
  margin: auto 0;
  gap: 0.75rem;
}

.maintenance-icon {
  font-size: 3rem;
}

.avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--gold);
  flex-shrink: 0;
}

.badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
}

.badge {
  display: inline-block;
  background: var(--gold);
  color: var(--bg);
  font-size: 0.875rem;
  font-weight: 500;
  padding: 0.25rem 0.75rem;
  border-radius: 999px;
  flex-shrink: 0;
}

.badge-blue {
  background: var(--blue);
  color: var(--text);
}

.profile-card {
  flex-direction: row;
  align-items: center;
  gap: 0.85rem;
  padding: 1rem 1.25rem;
  flex-wrap: wrap;
}

.refresh-btn {
  flex-shrink: 0;
  padding: 0.4rem 0.7rem;
  font-size: 0.875rem;
}

.profile-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.1rem;
  flex: 1 1 auto;
}

.copyable {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  font: inherit;
  text-align: left;
  color: inherit;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nickname-row {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  min-width: 0;
}

.nickname {
  font-weight: 500;
  font-size: 1.05rem;
  color: var(--text);
  min-width: 0;
}

.profile-level {
  font-size: 0.75rem;
  color: var(--text-muted);
  white-space: nowrap;
}

.user-id {
  color: var(--text-muted);
  font-size: 0.875rem;
}

.logout-bottom {
  width: 100%;
  text-align: center;
  background: rgba(231, 76, 60, 0.15);
  color: #ff8f8f;
  border: 1px solid rgba(231, 76, 60, 0.4);
}

.stat-tiles {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.stat-tile-pill {
  flex: 1 1 0;
  /* Без min-width:0 плашка с длинным значением (Достижения/Энергия — формат "N / M", ощутимо
     длиннее просто числа) не помещается в свою долю строки и растягивается по content-based
     минимуму — на мобилке (см. медиа-запрос ниже) это ломало сетку 49%/49%: плашка вылезала
     шире отведённых 50% и переносилась на отдельную строку сама по себе, вместо того чтобы
     остаться четвёртой в сетке рядом с "Бицепс". */
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.5rem 0.75rem;
  font: inherit;
  color: inherit;
  cursor: pointer;
}

/* Числовые поля, оформленные плашкой (лагеря/друзья/меняла): без рамки, заливка --bg, чтобы не слиться
   с панелью (--bg-card). Плитки-кнопки .stat-tile-pill рамку сохраняют — это не поля ввода. */
input.stat-tile-pill {
  border: none;
  background: var(--bg);
}

/* Мобильный экран — сетка в строчку по 2 плашки (49%/49%) вместо горизонтального прокрута. */
@media (max-width: 700px) {
  .stat-tile-pill {
    flex: 0 0 calc(50% - 0.25rem);
  }
}

.stat-tile-icon {
  width: 30px;
  height: 30px;
  object-fit: contain;
  flex-shrink: 0;
}

.stat-tile-text {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
}

.stat-tile-pill b {
  font-size: 1.2rem;
  /* nowrap ломал "N / M" значения (Достижения/Энергия) на узких плашках — см. .stat-tile-pill
     min-width:0 выше: без переноса длинное значение просто раздвигало саму плашку. Обычные
     короткие числа (Авторитет/Таланты/Бицепс) по-прежнему остаются в одну строку сами по себе. */
  white-space: normal;
  overflow-wrap: break-word;
}

.stat-tile-label {
  font-size: 0.875rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.resource-list {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.resource-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.4rem 0.5rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
}

.resource-icon {
  width: 28px;
  height: 28px;
  object-fit: contain;
  flex-shrink: 0;
}

.resource-label {
  color: var(--text-muted);
  font-size: 0.875rem;
  flex: 1;
  text-align: left;
}

.resource-value {
  font-weight: 500;
  font-size: 0.95rem;
  white-space: nowrap;
}

.resource-icon--emoji {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
}

.vorkuta-safe-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  text-align: center;
  padding-bottom: 0.5rem;
}

.vorkuta-safe-icon {
  width: 96px;
  height: 96px;
  object-fit: contain;
}

.vorkuta-safe-error {
  margin: 0;
  color: #e74c3c;
  font-size: 0.875rem;
}

.vorkuta-safe-body .resource-list {
  width: 100%;
}

.vorkuta-safe-body .button {
  width: 100%;
}

/* "Люська" (luska_panel_partial.php) — сетка ячеек, тот же принцип, что у "Топ по урону"/
   пресетов: гибкое auto-fit вместо жёстких 5 колонок, чтобы на узком экране ячейки переносились
   на вторую строку, а не резали текст ("Бесплатно" — длинное слово для колонки в 1/5 ширины). */
.luska-cell-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(4rem, 1fr));
  gap: 0.5rem;
  margin: 0.6rem 0;
}

.luska-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.6rem 0.3rem;
  font: inherit;
  color: var(--text);
  cursor: pointer;
  text-align: center;
}

.luska-cell--free {
  border-color: var(--gold);
}

.luska-cell--opened {
  opacity: 0.5;
  cursor: default;
}

.luska-cell-icon {
  font-size: 1.4rem;
  line-height: 1;
}

.luska-cell-label {
  display: flex;
  align-items: center;
  gap: 0.2rem;
  font-size: 0.875rem;
  font-weight: 500;
}

.luska-cell-soap-icon {
  width: 14px;
  height: 14px;
  object-fit: contain;
}

.panel {
  width: 100%;
  background: var(--bg-card);
  border-radius: 8px;
  padding: 1.25rem;
  text-align: left;
  border: 1px solid var(--border);
  border-left: 5px solid var(--border);
}

.panel--combat {
  background: rgba(192, 57, 43, 0.12);
  border-left-color: #c0392b;
}

.panel--obshak {
  background: rgba(41, 128, 185, 0.12);
  border-left-color: #2980b9;
}

.panel--currency {
  background: rgba(224, 165, 44, 0.08);
  border-left-color: var(--gold);
}

.panel--boss-chests {
  background: rgba(142, 68, 173, 0.1);
  border-left-color: #8e44ad;
}

.weapon-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.weapon-chip {
  flex: 1 1 0;
  min-width: 8.5rem;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  background: linear-gradient(135deg, rgba(224, 165, 44, 0.2), var(--bg-card));
  border: 1px solid var(--gold);
  border-radius: 8px;
  padding: 0.6rem 0.75rem;
}

.weapon-icon {
  width: 34px;
  height: 34px;
  object-fit: contain;
  flex-shrink: 0;
}

.weapon-chip-text {
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
  min-width: 0;
}

.weapon-name {
  font-weight: 500;
  font-size: 0.875rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.weapon-damage {
  font-size: 1.35rem;
  font-weight: 500;
  color: var(--gold-strong);
  line-height: 1.15;
  white-space: nowrap;
}

.weapon-sub {
  font-size: 0.875rem;
  color: var(--text-muted);
  white-space: nowrap;
}

.weapon-count {
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--text);
}

.daily-delta {
  font-size: 0.875rem;
  font-weight: 500;
}

.weapon-chip--attack {
  border: none;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.weapon-chip--attack:active {
  transform: scale(0.98);
}

.weapon-chip--attack[disabled] {
  cursor: not-allowed;
  opacity: 0.5;
}

.weapon-chip--buyable {
  cursor: pointer;
}

.weapon-chip--buyable:active {
  transform: scale(0.98);
}

.weapon-buy-icon {
  margin-left: auto;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  color: var(--gold);
}

.weapon-buy-icon svg {
  width: 100%;
  height: 100%;
}

/* На узких экранах 3 карточки flex-wrap'ались криво: 2 в ряд + 3-я растягивалась на всю
   ширину (flex: 1 1 0 разъезжалось при переносе) — просто складываем все в один столбец. */
@media (max-width: 420px) {
  .weapon-strip {
    flex-direction: column;
  }

  .weapon-chip {
    width: 100%;
  }
}

.panel--bosses {
  background: rgba(142, 68, 173, 0.12);
  border-left-color: #8e44ad;
}

.panel--refresh {
  background: rgba(127, 140, 141, 0.1);
  border-left-color: #7f8c8d;
}

.panel--queue {
  background: rgba(41, 128, 185, 0.1);
  border-left-color: var(--blue);
}

.panel--presets {
  background: rgba(22, 160, 133, 0.1);
  border-left-color: #16a085;
}

.queue-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.queue-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0.6rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}

.queue-row--next {
  border-color: var(--blue);
}

.queue-row-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.18;
  z-index: 0;
}

.queue-row > * {
  position: relative;
  z-index: 1;
}

.queue-badge {
  flex-shrink: 0;
  background: var(--blue);
  color: #fff;
  font-size: 0.875rem;
  font-weight: 500;
  text-transform: uppercase;
  padding: 0.2rem 0.5rem;
  border-radius: 999px;
}

.queue-row-title {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 500;
}

.queue-row-mode {
  flex-shrink: 0;
  font-size: 0.875rem;
  color: var(--text-muted);
  white-space: nowrap;
}

.panel-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 0.25rem;
}

.panel-header-row .panel-title {
  margin: 0;
}

.queue-add-open-btn {
  flex-shrink: 0;
  font-size: 0.875rem;
  padding: 0.5rem 0.75rem;
}

.queue-row-count {
  flex-shrink: 0;
  color: var(--text-muted);
  font-size: 0.875rem;
  white-space: nowrap;
}

.queue-remove-btn {
  flex-shrink: 0;
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 1rem;
  line-height: 1;
  padding: 0.2rem;
  cursor: pointer;
}

.queue-attack-btn {
  flex-shrink: 0;
  width: 1.9rem;
  height: 1.9rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  border: none;
  background: var(--gold);
  color: var(--bg);
  font-size: 0.875rem;
  padding: 0;
  cursor: pointer;
}

.queue-attack-btn[disabled] {
  opacity: 0.4;
  cursor: not-allowed;
}

.queue-play-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.6rem;
  flex-wrap: wrap;
}

.queue-play-btn {
  flex-shrink: 0;
}

.queue-play-btn[data-mode="playing"] {
  background: var(--blue);
  color: #fff;
}

/* Красный/зелёный старт-стоп только на вкладке боссов (#tab-autoqueue) — .queue-play-btn шарится
   с deluga/zaruba/hodki, где просьба владельца не звучала, трогать их дефолт (gold/--blue) не
   нужно. */
#tab-autoqueue .queue-play-btn[data-mode="stopped"] {
  background: #2ecc71;
  color: #fff;
}

#tab-autoqueue .queue-play-btn[data-mode="playing"] {
  background: #e74c3c;
  color: #fff;
}

.queue-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.75rem;
}

.queue-preset-form {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  flex: 1;
}

.queue-preset-form input[type="text"] {
  flex: 1;
  min-width: 8rem;
  font: inherit;
  background: var(--bg);
  color: var(--text);
  border: none;
  border-radius: 8px;
  padding: 0.5rem 0.6rem;
}

.queue-add-form {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.4rem;
}

.queue-add-form input[type="number"] {
  width: 3.2rem;
  font: inherit;
  background: var(--bg);
  color: var(--text);
  border: none;
  border-radius: 8px;
  padding: 0.4rem;
  text-align: center;
}

.preset-list {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.preset-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.6rem 0.7rem;
}

.preset-name {
  font-weight: 500;
  margin-bottom: 0.3rem;
}

/* Раньше — ряд узких пилюль "название ×count" (.preset-item, ниже), владелец 2026-08-26
   попросил показывать ещё и режим/автоматизацию + возможность править каждого босса пресета —
   теперь это те же .queue-row, что и в реальной очереди, стек в столбик, не инлайн-чипы. */
.preset-items {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-bottom: 0.6rem;
}

.preset-item-row {
  background: var(--bg-card);
  border-radius: 8px;
  padding: 0.4rem 0.5rem;
}

.preset-actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

/* Окно "Пресеты очереди" (владелец 2026-09-29): компактная форма создания и аккордеон — в свёрнутом
   виде виден только заголовок-название пресета, клик раскрывает боссов и режимы. Всё под
   #boss-presets-modal: .preset-card/.preset-name делит stashgear_content_partial.php (ЗШ-пресеты). */
#boss-presets-modal .queue-preset-form {
  align-items: stretch;
  gap: 0.4rem;
}

/* Глобальное "textarea, input[type=text]" держит min-height:4.5rem — из-за него поле было огромным. */
#boss-presets-modal .queue-preset-form input[type="text"] {
  min-height: 0;
  padding: 0.35rem 0.6rem;
}

#boss-presets-modal .queue-preset-form .button {
  padding: 0.35rem 0.8rem;
  font-size: 0.9rem;
  white-space: nowrap;
}

/* Подсказка под формой создания: у .panel-subtitle нет верхнего отступа, и текст лип к полю и кнопке. */
#boss-presets-modal .queue-preset-form + .panel-subtitle {
  margin-top: 0.75rem;
  font-size: 0.78rem;
}

#boss-presets-modal .preset-list {
  gap: 0.4rem;
}

#boss-presets-modal .preset-card {
  padding: 0;
}

#boss-presets-modal .preset-toggle {
  padding: 0.5rem 0.7rem;
}

#boss-presets-modal .preset-toggle .preset-name {
  margin-bottom: 0;
}

#boss-presets-modal .preset-body {
  padding: 0 0.7rem 0.7rem;
}

#boss-presets-modal .preset-body.collapsed {
  display: none;
}

.preset-actions form,
.preset-actions .preset-add-btn {
  flex: 1 1 auto;
}

.preset-actions .button {
  width: 100%;
}

.boss-battle-card {
  position: relative;
  overflow: hidden;
}

.boss-battle-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.22;
  z-index: 0;
}

.boss-battle-card > *:not(.boss-battle-bg) {
  position: relative;
  z-index: 1;
}

.boss-battle-title {
  font-size: 1.1rem;
  font-weight: 500;
  margin-bottom: 0.6rem;
}

.hp-bar {
  position: relative;
  height: 1.6rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 0.75rem;
}

.hp-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #c0392b, #e74c3c);
  transition: width 0.3s ease;
}

.hp-bar-text {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.875rem;
  font-weight: 500;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}

.boss-tile-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.4rem;
  margin-top: 0.75rem;
}

/* ≤768px — 2 колонки (мобильный дефолт выше). >768px — модалка пикера шире (не общий
   .modal-panel max-width:480px, который раньше жал 3 колонки в "прокрут по горизонтали", а
   отдельный, только для #boss-picker-modal) и 3 колонки, раз места больше. */
@media (min-width: 769px) {
  #boss-picker-modal .modal-panel {
    max-width: 760px;
  }

  .boss-tile-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.boss-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.3rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.5rem 0.4rem;
}

.boss-tile--locked {
  opacity: 0.5;
}

.boss-tile-lock {
  position: absolute;
  top: 0.3rem;
  right: 0.3rem;
  font-size: 0.875rem;
}

.boss-tile-thumb {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 8px;
  object-fit: cover;
}

.boss-tile-title {
  font-size: 0.875rem;
  font-weight: 500;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.boss-tile-daily {
  font-size: 0.875rem;
  color: var(--text-muted);
}

.boss-tile-form {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  width: 100%;
  margin-top: 0.1rem;
}

.boss-tile-mode {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  font: inherit;
  font-size: 0.875rem;
  background-color: var(--bg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%239fb0d1' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.35rem center;
  background-size: 0.5rem;
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.3rem 1rem 0.3rem 0.35rem;
}

.stepper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  width: 100%;
}

.stepper-btn {
  flex-shrink: 0;
  width: 1.4rem;
  height: 1.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  font-size: 0.875rem;
  line-height: 1;
  padding: 0;
  cursor: pointer;
}

.stepper-value {
  width: 1.8rem;
  font: inherit;
  font-size: 0.875rem;
  background: none;
  color: var(--text);
  border: none;
  text-align: center;
  -moz-appearance: textfield;
}

.stepper-value::-webkit-outer-spin-button,
.stepper-value::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.boss-tile-add {
  width: 100%;
  font: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  padding: 0.35rem;
  border: none;
  border-radius: 6px;
  background: var(--gold);
  color: var(--bg);
  cursor: pointer;
}

.panel--boss-manager {
  background: rgba(142, 68, 173, 0.12);
  border-left-color: #8e44ad;
}

button.danger, .button.danger {
  background: transparent;
  color: #e74c3c;
  border: 1px solid #e74c3c;
}

button.light, .button.light {
  background: var(--text);
  color: var(--bg);
  border: 1px solid var(--text);
}

/* --- Автоочередь: шапка, действия, повтор --- */

.queue-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
}

/* Без min-width:0 текстовый блок отказывался сжиматься меньше своей естественной ширины и
   вылезал за кнопки автозапуска/добавления на узких экранах (обрезалось body{overflow-x:hidden},
   выглядело как "текст пропал"). */
.queue-header-info {
  min-width: 0;
}

.queue-header-title {
  font-weight: 500;
  font-size: 0.95rem;
}

.queue-header-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}

.queue-header-actions .button {
  padding: 0.6rem 0.9rem;
  font-size: 1rem;
  line-height: 1;
}

.queue-toolbar-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.6rem;
}

.queue-quick-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

/* .chip-btn — общий класс (шарится с hodki.php/tattoo_clothing.php, там нейтральный фон + gold
   только на .active — это переключатели вариантов). Здесь чипы — не переключатели, а кнопки
   действия ("В очередь"/"По времени"), поэтому просьбу владельца "кнопки жёлтые" делаем локальным
   переопределением внутри .queue-quick-row, не трогая сам .chip-btn. */
.queue-quick-row .chip-btn {
  background: var(--gold);
  color: var(--bg);
  border-color: var(--gold-strong);
}

.queue-quick-row .chip-btn:hover {
  filter: brightness(1.08);
}

.queue-quick-row .chip-btn .chip-count {
  background: var(--bg);
  color: var(--gold-strong);
}

.chip-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  background: var(--bg-card);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.4rem 0.75rem;
  cursor: pointer;
}

.chip-count {
  background: var(--gold);
  color: var(--bg);
  font-size: 0.875rem;
  font-weight: 500;
  border-radius: 999px;
  padding: 0.05rem 0.4rem;
}

.toggle-row-form {
  margin-bottom: 0.6rem;
}

.toggle-row {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.6rem 0.75rem;
  text-align: left;
  cursor: pointer;
  /* button, .button (общее правило) красит текст в тёмно-коричневый под золотые кнопки —
     .toggle-row тёмная сама по себе, без переопределения текст был нечитаем (тёмное на тёмном). */
  color: var(--text);
}

.toggle-row-text {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.toggle-row-text .panel-subtitle {
  margin: 0;
  font-size: 0.875rem;
}

.toggle-switch {
  flex-shrink: 0;
  width: 2.6rem;
  height: 1.5rem;
  border-radius: 999px;
  background: var(--border);
  position: relative;
  transition: background 0.15s ease;
}

.toggle-switch::after {
  content: "";
  position: absolute;
  top: 0.15rem;
  left: 0.15rem;
  width: 1.2rem;
  height: 1.2rem;
  border-radius: 50%;
  background: #fff;
  transition: transform 0.15s ease;
}

.toggle-switch.on {
  background: var(--blue);
}

.toggle-switch.on::after {
  transform: translateX(1.1rem);
}

/* Тумблер-чекбокс (не button) — используется в модалках/формах, где значение читается только
   при финальной отправке (пикер добавления боссов), а не мгновенно шлётся на сервер по клику.
   Сам чекбокс визуально скрыт (не display:none — так остаётся доступен со скринридера и
   табом), состояние переключателя рисует чистый CSS через :checked + .toggle-switch. */
.toggle-checkbox-input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.toggle-checkbox-input:checked + .toggle-switch {
  background: var(--blue);
}

.toggle-checkbox-input:checked + .toggle-switch::after {
  transform: translateX(1.1rem);
}

.picker-toggle-row {
  margin-bottom: 0.5rem;
}

.picker-toggle-row .toggle-row-text b {
  font-size: 0.92rem;
}

.picker-toggle-row .toggle-row-text .panel-subtitle {
  font-size: 0.875rem;
}

.picker-toggle-row--disabled {
  opacity: 0.5;
}

/* --- Строки очереди со статусом/пилюлей режима --- */

.queue-row--done {
  opacity: 0.55;
}

/* Превью запланированного пресета под очередью (boss_content_partial.php) — серые строки,
   золотое время старта сверху. */
.queue-scheduled {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 0.75rem;
}

.queue-scheduled-time {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.3rem;
  color: var(--gold);
  font-weight: 500;
}

.queue-row--scheduled {
  opacity: 0.5;
  filter: grayscale(1);
}

.queue-status-icon {
  flex-shrink: 0;
  font-size: 1rem;
}

.queue-row-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.queue-row-meta {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
}

/* Название босса и режим боя — одной строкой (boss_content_partial.php: очередь, пресеты, превью
   запланированного пресета); не помещаются рядом — режим уходит на строку ниже. */
.queue-row-headline {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.15rem 0.6rem;
  min-width: 0;
}

.queue-row-headline .queue-row-title {
  flex: 0 1 auto;
  max-width: 100%;
}

/* Строки очереди и пресетов боссов (владелец 2026-09-29: "прилипает"): чуть больше воздуха между
   названием, режимом и бейджами и менее круглые плашки. Скоуп по #tab-autoqueue/#boss-presets-modal —
   .mode-pill/.automation-badge/.queue-row-main общие с боевой карточкой, комбо, профилем и другими
   вкладками, там всё остаётся как было. */
#tab-autoqueue .queue-row-main,
#boss-presets-modal .queue-row-main {
  gap: 0.3rem;
}

#tab-autoqueue .queue-row-headline,
#boss-presets-modal .queue-row-headline {
  gap: 0.25rem 0.85rem;
}

#tab-autoqueue .queue-row-meta,
#boss-presets-modal .queue-row-meta {
  gap: 0.3rem 0.5rem;
}

#tab-autoqueue .queue-row .mode-pill,
#boss-presets-modal .queue-row .mode-pill {
  padding: 0.18rem 0.6rem;
  border-radius: 6px;
}

#tab-autoqueue .queue-row .automation-badge,
#boss-presets-modal .queue-row .automation-badge {
  padding: 0.12rem 0.55rem;
  border-radius: 6px;
}

.queue-row-target {
  font-size: 0.875rem;
  color: var(--text-muted);
  white-space: nowrap;
}

.queue-row-daily {
  font-size: 0.875rem;
  color: var(--text-muted);
}

.mode-pill {
  flex-shrink: 0;
  font-size: 0.875rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: #fff;
  border-radius: 999px;
  padding: 0.12rem 0.5rem;
  background: #5c6b8a;
}

.mode-pill[data-mode="pacansky"] { background: #5c6b8a; }
.mode-pill[data-mode="blotnoy"] { background: var(--blue); }
.mode-pill[data-mode="avtoritetny"] { background: var(--gold-strong); color: var(--bg); }
.mode-pill[data-mode="vorovskoy"] { background: #8e44ad; }
.mode-pill[data-mode="odin"] { background: #c0392b; }

.queue-row-actions {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-shrink: 0;
}

.queue-icon-btn {
  flex-shrink: 0;
  width: 1.9rem;
  height: 1.9rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--text);
  font-size: 0.875rem;
  line-height: 1;
  padding: 0;
  cursor: pointer;
}

.queue-icon-btn[disabled] {
  opacity: 0.35;
  cursor: not-allowed;
}

#tab-autoqueue .queue-list > .queue-row:not(.queue-row--done),
#boss-presets-modal .preset-items > .queue-row {
  cursor: grab;
}

.queue-row-drag-handle {
  flex-shrink: 0;
  width: 1.9rem;
  height: 1.9rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  touch-action: none;
  cursor: grab;
}

.queue-row-drag-handle .icon {
  width: 1.3em;
  height: 1.3em;
}

.queue-row--dragging {
  cursor: grabbing;
  touch-action: none;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
}

.queue-row-placeholder {
  border: 2px dashed var(--border);
  border-radius: 8px;
}

/* --- Вкладка «Выбор босса»: тулбар режима/количества --- */

.picker-toolbar {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.65rem 0.75rem;
  margin-bottom: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.picker-mode-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.mode-btn {
  flex: 1 1 auto;
  font: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  padding: 0.4rem 0.5rem;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--text-muted);
  cursor: pointer;
}

.mode-btn.active {
  background: var(--blue);
  border-color: var(--blue);
  color: #fff;
}

.picker-toolbar-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.picker-until-limit {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.875rem;
  color: var(--text-muted);
  cursor: pointer;
}

#picker-count-stepper {
  width: auto;
  gap: 0.4rem;
}

/* .stepper держит display:flex, который перебивает атрибут [hidden] (та же ловушка, что уже
   чинили в других местах проекта) — без этого поле "сколько раз" было видно всегда, независимо
   от чекбокса "до лимита". */
#picker-count-stepper[hidden] {
  display: none;
}

/* --- Плитки выбора боссов (мульти-select) --- */

.boss-pick {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* flex-start, не center: в сетке .boss-tile-grid высота ряда тянется по самой высокой плитке
     (напр. с предупреждением "Х/Y от «Босс»") — у более короткой плитки (напр. Кирпич, без
     доп.строки) контент при center повисал ровно посередине, с пустотой и сверху, и снизу.
     Владелец попросил прижать контент к верху одинаково у всех плиток ряда. */
  justify-content: flex-start;
  text-align: center;
  gap: 0.25rem;
  min-height: 3.2rem;
  background: var(--bg-card);
  border: 2px solid var(--border);
  border-radius: 8px;
  padding: 10px;
  cursor: pointer;
  transition: border-color 0.12s ease, background 0.12s ease;
}

/* Все сеты режимов (тату/шмот/хаты — то же, что в ℹ) собраны, либо собирать нечего вовсе
   (владелец 2026-09-28: босс без наград — тоже золотой). .selected ниже по специфичности
   перебивает — выбранная плитка остаётся синей. */
.boss-pick--set-complete {
  border-color: var(--gold);
}

.boss-pick.selected {
  border-color: var(--blue);
  background: rgba(59, 125, 222, 0.18);
}

.boss-pick--locked {
  /* Больше не блокирует выбор (можно поставить в очередь и добрать ключи по пути) — только
     предупреждает, поэтому обычный курсор и лёгкое затемнение, не "disabled". */
  opacity: 0.8;
}

.boss-pick-badge {
  position: absolute;
  top: 0.3rem;
  right: 0.3rem;
  font-size: 0.875rem;
}

.boss-pick-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.35rem;
  width: 100%;
}

.boss-pick-header-row .boss-pick-title {
  text-align: left;
  width: auto;
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.boss-pick-header-row .boss-pick-kills {
  flex: 0 0 auto;
  white-space: nowrap;
}

.boss-pick-title {
  font-size: 0.8rem;
  font-weight: 500;
  width: 100%;
  line-height: 1.2;
}

.boss-pick-daily {
  font-size: 0.8rem;
  color: var(--text-muted);
}

.boss-pick-locknote {
  font-size: 0.8rem;
  line-height: 1.25;
  white-space: normal;
  color: var(--text-muted);
}

.boss-pick-locknote--bad {
  color: #e74c3c;
}

.boss-pick-brigade-note {
  color: var(--gold-strong);
  font-weight: 500;
}

.boss-pick-brigade-note--locked {
  color: var(--text-muted);
  font-weight: 400;
}

.picker-confirm-bar {
  position: sticky;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.6rem 0.75rem;
  margin-top: 0.75rem;
}

.picker-confirm-bar .panel-subtitle {
  margin: 0;
}

.picker-confirm-actions {
  display: flex;
  gap: 0.5rem;
}

#picker-confirm-add[disabled] {
  opacity: 0.4;
  cursor: not-allowed;
}

.refresh-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

/* На узких экранах (~320px) подпись + select не помещались в одну строку и select вылезал
   за правый край панели/экрана (обрезался глобальным html{overflow-x:hidden}). Переносим
   select на отдельную строку вместо того, чтобы он толкался за пределы. */
@media (max-width: 360px) {
  .refresh-row {
    flex-wrap: wrap;
  }
}

.refresh-row select {
  font: inherit;
  background: var(--bg);
  color: var(--text);
  border: none;
  border-radius: 8px;
  padding: 0.4rem 0.6rem;
}

.obshak-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.obshak-header-text {
  min-width: 0;
}

.obshak-header .panel-subtitle {
  margin: 0;
}

.obshak-tier-icon {
  width: 40px;
  height: 40px;
  object-fit: contain;
  flex-shrink: 0;
}

.loot-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0.75rem 0;
}

.loot-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.25rem 0.6rem;
  font-size: 0.875rem;
  white-space: nowrap;
}

.loot-badge-icon {
  width: 18px;
  height: 18px;
  object-fit: contain;
}

.obshak-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 0.75rem;
}

.obshak-claim-status {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  font-size: 0.875rem;
  color: var(--text-muted);
}

.autocollect {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.875rem;
  cursor: pointer;
}

.obshak-footer button[disabled] {
  opacity: 0.6;
  cursor: default;
}

.currency-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.smg-input-row {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.smg-input-row input {
  flex: 1 1 auto;
  min-width: 0;
  width: auto;
}

.smg-input-row button {
  flex: 0 0 auto;
}

.smg-tier-select {
  margin-bottom: 0.75rem;
}

.chest-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.chest-slot {
  flex: 0 0 auto;
  width: 5.4rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.5rem 0.4rem;
  cursor: pointer;
}

.chest-slot--empty {
  cursor: default;
  opacity: 0.5;
  border-style: dashed;
}

.chest-slot--ready {
  border-color: #2ecc71;
  box-shadow: 0 0 0 1px #2ecc71 inset;
}

.chest-slot-icon {
  width: 40px;
  height: 40px;
  object-fit: contain;
}

.chest-slot-empty-icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  color: var(--text-muted);
}

.chest-slot-label {
  font-size: 0.875rem;
  color: var(--text-muted);
  text-align: center;
  white-space: nowrap;
}

.chest-slot--ready .chest-slot-label {
  color: #2ecc71;
  font-weight: 500;
}

.chest-lock-row {
  display: flex;
  gap: 0.15rem;
}

.chest-lock-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--border);
}

.chest-lock-dot--open {
  background: #2ecc71;
}

.chest-detail-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  text-align: center;
  padding-bottom: 0.5rem;
}

.chest-detail-icon {
  width: 88px;
  height: 88px;
  object-fit: contain;
}

.chest-detail-body .chest-lock-row {
  gap: 0.3rem;
}

.chest-detail-body .chest-lock-dot {
  width: 12px;
  height: 12px;
}

.chest-detail-body .button {
  width: 100%;
}

.automation-card-header {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-align: left;
  color: inherit;
}

.automation-card-icon {
  flex-shrink: 0;
  width: 2.4rem;
  height: 2.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  border-radius: 8px;
  background: var(--bg);
  border: 1px solid var(--border);
}

.automation-card-title {
  flex: 1;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.automation-status-badge {
  flex-shrink: 0;
  font-size: 0.875rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  background: var(--border);
  color: var(--text-muted);
}

.automation-status-badge--on {
  background: var(--gold);
  color: #2b1d00;
}

.automation-card-desc {
  margin: 0.6rem 0 0;
}

/* Шапка состояния автоматики (automation_state_html() в config.php) — один и тот же блок
   сверху КАЖДОГО раздела, где автоматика включается: бейдж активна/выключена + перечисление
   того, что именно сейчас выбрано. Владелец 2026-08-29. */
.automation-state {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem 0.55rem;
  margin: 0 0 0.6rem;
}

.automation-state-choices {
  font-size: 0.875rem;
  line-height: 1.25;
  color: var(--text-muted);
}

.automation-state[data-automation-state="on"] .automation-state-choices {
  color: var(--text);
}

.chest-stats-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-bottom: 0.75rem;
}

.chest-stat-tile {
  flex: 1 1 calc(33.333% - 0.4rem);
  min-width: 8.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.6rem 0.75rem;
}

.chest-stat-label {
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--text-muted);
}

.chest-stat-value {
  font-size: 1.15rem;
  font-weight: 500;
}

.chest-stats-reset-btn {
  background: none;
  border: none;
  color: var(--blue);
  font-size: 0.875rem;
  font-weight: 500;
  padding: 0;
  cursor: pointer;
}

.currency-pill {
  flex: 0 0 auto;
  /* Без min-width:0 плашка с длинным значением (например "1 987 750 +1 083 855") не помещается
     в свою долю строки и растягивается по content-based минимуму — та же ловушка, что уже была
     у .stat-tile-pill (см. комментарий там же): ниже 768px это перечёркивало flex-basis:49% —
     пилюля всё равно вылезала на всю ширину и переносилась на отдельную строку сама по себе. */
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 2.5rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.4rem 0.6rem;
}

/* Владелец 2026-09-12: на узких экранах пилюли валют сидят по ширине контента (flex:0 0 auto),
   поэтому ряды получаются рваными (то 1, то 3 в ряд) — ниже 768px фиксируем 2 в столбик, значок+
   название в первой строке пилюли, число — отдельной строкой под ними (order/flex-basis:100%,
   см. .currency-pill .resource-value ниже). Переупорядочивание — ТОЛЬКО в этом медиа-запросе,
   десктоп не трогаем (там пилюля и так умещается в одну строку без переносов). */
@media (max-width: 768px) {
  .currency-pill {
    /* НЕ "49%" — .currency-grid ставит gap:0.5rem МЕЖДУ пилюлями (не путать с gap ниже, тот
       внутренний, между значком/названием/числом ОДНОЙ пилюли): 49%+49%+0.5rem гарантированно
       больше 100% контейнера, вторая пилюля не помещается и уходит на новую строку — 1 в столбик
       вместо 2. calc(50% - 0.25rem) — та же формула, что уже рабочая у .stat-tile-pill выше по
       файлу для точно той же сетки 2 в ряд с тем же gap:0.5rem. */
    flex: 0 0 calc(50% - 0.25rem);
    flex-wrap: wrap;
    gap: 0.15rem 0.4rem;
  }

  .currency-pill .resource-icon {
    order: 1;
  }

  .currency-pill .resource-label {
    order: 2;
  }

  /* ВАЖНО: white-space:nowrap на .resource-value ниже (базовое правило, не в этом медиа-запросе)
     обязателен и наследуется на сам текст числа (число не обёрнуто в свой <span>) — без него
     браузер переносит строку по КАЖДОМУ пробелу-разрядному разделителю ("2 076 473" →
     "2\n076\n473", реальный баг, пойманный на скриншоте). Тут — только вынос числа на 100%
     ширины (свою строку целиком), сам перенос текста не трогаем. */
  .currency-pill .resource-value {
    order: 3;
    flex: 1 0 100%;
  }
}

/* Карточка "Рейтинг" на собственном профиле (владелец 2026-09-12) — недельный урон + урон
   сегодня, перед блоком валют. Стиль по образцу, который прислал владелец: золотая рамка,
   круглый значок-кубок слева, шеврон справа (пока декоративный — целевой страницы полного
   рейтинга в приложении ещё нет). */
.rating-card {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.7rem 0.8rem;
  background: var(--bg-card);
  border: 1px solid var(--gold);
  border-radius: 8px;
  margin-bottom: 0.9rem;
  cursor: pointer;
}

.rating-card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 50%;
  background: rgba(224, 165, 44, 0.15);
  flex-shrink: 0;
}

.rating-card-icon .icon {
  width: 1.3rem;
  height: 1.3rem;
}

.rating-card-body {
  flex: 1;
  min-width: 0;
}

.rating-card-title {
  font-weight: 500;
  color: var(--text);
}

.rating-card-title b {
  color: var(--gold-strong);
}

.rating-card-stats {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 0.2rem;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.rating-card-damage {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

.rating-card-damage .icon {
  color: #ff8f8f;
}

.rating-card-today {
  color: #2ecc71;
  font-weight: 500;
}

.rating-card-chevron {
  color: var(--text-muted);
  flex-shrink: 0;
}

button.currency-pill {
  cursor: pointer;
  /* Базовое "button, .button" правило красит ЛЮБУЮ кнопку в var(--bg) (текст под золотую кнопку) —
     .resource-value внутри пилюли своего color не задаёт и раньше наследовал нормальный var(--text)
     от <div>, но став <button> (чифир, кликабельный с 2026-09-15) сам потемнел до этого же var(--bg),
     нечитаемого на тёмном фоне пилюли. */
  color: var(--text);
}

button.currency-pill:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.currency-pill .resource-icon {
  width: 22px;
  height: 22px;
}

/* white-space:nowrap тут обязателен и наследуется на сам текст числа (число не обёрнуто в свой
   <span>) — без него браузер переносит строку по КАЖДОМУ пробелу-разрядному разделителю
   ("2 076 473" → "2\n076\n473", реальный баг, пойманный владельцем на скриншоте). flex-wrap —
   не для числа (оно nowrap и не ломается), а чтобы бейдж дельты (.daily-delta, отдельный <span>)
   мог уйти на свою строку под числом целиком, если вместе они не помещаются, вместо переполнения
   пилюли по ширине. Переупорядочивание строк (значок+название сверху, число снизу) — только на
   мобильном брейкпоинте, см. @media(max-width:768px) выше. */
.currency-pill .resource-value {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.875rem;
  font-weight: 500;
  white-space: nowrap;
}

.currency-pill .resource-label {
  font-size: 0.875rem;
  color: var(--text-muted);
  white-space: nowrap;
}

/* Владелец 2026-09-22: "теперь у нас никогда не должно быть таблиц... стараемся сводить всё к
   миниатюрам" — .stat-row был плоским списком label/value с разделителем-полоской (визуально
   читался как таблица). Теперь это мелкая самостоятельная плитка (как уже сложившийся
   .poker-stat-chip): inline-flex без ширины даёт им переноситься "облаком", как слова в абзаце,
   без правки разметки в файлах, где .stat-row используется. */
.stat-row {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.4rem 0.65rem;
  margin: 0 0.35rem 0.35rem 0;
  font-size: 0.8125rem;
}

.stat-row > span:first-child {
  color: var(--text-muted);
}

/* Для строк с более длинным/составным содержимым (описание сета, лидер бригады с ID-кнопкой и
   т.п.) миниатюрная плитка тесна — оставляем их полноширинными блочными строками, как раньше. */
.stat-row--wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 100%;
  margin-right: 0;
}

.stat-row--jackpot {
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: center;
  background: var(--bg-elevated);
  border-radius: 8px;
  padding: 0.75rem 1rem;
  margin-right: 0;
}

.stat-row--jackpot span {
  font-size: 1.05rem;
  font-weight: 500;
}

.stat-row--jackpot b {
  font-size: 1.7rem;
  color: var(--gold-strong);
}

.leader-id {
  margin-left: 0.3rem;
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--text-muted);
}

/* Модалка "Сумка открыта" (bag_reward_modal_partial.php + showBagRewardModal() в modal.js) —
   татуировка крупным акцентным блоком сверху, тот же золотой градиент, что .weapon-chip, но
   вертикально и на всю ширину: тут это редкая находка, а не рядовой ресурс. Обычный лут —
   плиткой снизу через уже общий .poker-stat-grid/.poker-stat-chip. */
.bag-tattoo-highlight {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  text-align: center;
  background: linear-gradient(135deg, rgba(224, 165, 44, 0.18), var(--bg-card));
  border: 1px solid var(--gold);
  border-radius: 8px;
  padding: 0.9rem 0.8rem;
  margin-bottom: 0.75rem;
}

.bag-tattoo-highlight + .bag-tattoo-highlight {
  margin-top: -0.35rem;
}

.bag-tattoo-highlight-image {
  width: 96px;
  height: 96px;
  object-fit: contain;
}

.bag-tattoo-highlight-name {
  margin: 0;
  font-size: 1.05rem;
}

.bag-tattoo-highlight-set {
  margin: 0;
  font-size: 0.875rem;
  color: var(--text-muted);
}

.tier-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.combo-mode-letter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.2rem;
  height: 1.2rem;
  padding: 0 0.2rem;
  margin-right: 0.35rem;
  border-radius: 4px;
  background: var(--border);
  color: #fff;
  font-size: 0.875rem;
  line-height: 1;
}

/* Единая раскраска режимов комбо (владелец 2026-09-22, по скриншоту "Шайба" на combo.php):
   авто — золотой, блат — синий, пац — серый. Применяется везде, где встречается режим комбо —
   .mode-pill (combo.php), тут (главная/профиль), .mode-btn--combo (модалка выбора босса) и
   .combo-avail-pill (сводка доступности вверху combo.php). */
.combo-mode-letter[data-mode="pacansky"] { background: #5c6b8a; }
.combo-mode-letter[data-mode="blotnoy"] { background: var(--blue); }
.combo-mode-letter[data-mode="avtoritetny"] { background: var(--gold-strong); color: var(--bg); }

/* Бейдж "Комбо: <буква>" на строках очереди/пресетов (bosses.php) — та же раскраска режимов,
   что и .combo-mode-letter/.mode-pill выше, вместо нейтрального .automation-badge. */
.automation-badge--combo {
  border: none;
  color: #fff;
  font-weight: 600;
}
.automation-badge--combo[data-mode="pacansky"] { background: #5c6b8a; }
.automation-badge--combo[data-mode="blotnoy"] { background: var(--blue); }
.automation-badge--combo[data-mode="avtoritetny"] { background: var(--gold-strong); color: var(--bg); }

.panel-title {
  margin: 0 0 0.25rem;
  font-size: 1rem;
}

.panel-subtitle {
  margin: 0 0 0.75rem;
  color: var(--text-muted);
  font-size: 0.875rem;
}

.modal {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
}

.modal[hidden] {
  display: none;
}

/* "Профиль игрока" открывается кликом по нику ВНУТРИ любой другой уже открытой модалки (посылки,
   магазины, масс-рассылка и т.п.) — все .modal делят один z-index:50, а #player-profile-modal
   рендерится из nav.php раньше в DOM, чем содержимое страницы, поэтому при равном z-index более
   поздний в DOM элемент (модалка страницы) рисуется поверх него. ID-селектор перебивает .modal по
   специфичности независимо от порядка в DOM — гарантирует, что профиль игрока всегда самый верхний
   (owner 2026-09-06: "модалка с его статистикой выводится под посылками"). Ниже .page-loader
   (9999, переход между страницами должен доминировать в любом случае). */
#player-profile-modal {
  z-index: 300;
}

.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
}

.modal-panel {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 480px;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 1rem 1rem calc(1rem + env(safe-area-inset-bottom));
  text-align: left;
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.5rem;
}

.modal-header .panel-title {
  margin: 0;
}

.modal-close {
  background: var(--bg-card);
  border: 1px solid var(--border);
  color: var(--text);
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  padding: 0;
  line-height: 1;
  font-size: 1rem;
  flex-shrink: 0;
}

.modal-body {
  overflow-y: auto;
}

.preset-schedule-form {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.preset-schedule-field {
  margin: 0;
}

.preset-schedule-form select,
.preset-schedule-form input[type="time"] {
  width: 100%;
  margin-top: 0.3rem;
}

.toggle-row-label {
  display: block;
  font-size: 0.875rem;
  color: var(--text-muted);
}

.ach-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
  flex-shrink: 0;
}

.tab-btn {
  flex: 1 1 0;
  min-width: 5.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.1rem;
  padding: 0.5rem 0.7rem;
  border-radius: 8px;
  border: none;
  /* Владелец 2026-09-09: "все такие кнопки переключалки сливаются" — раньше дефолтный фон
     (без своего --tab-color) был var(--bg-card), почти неотличимый от страницы, различие было
     только по opacity. Теперь дефолт — золотой (как основной .button везде), --tab-color
     остаётся для тех немногих мест, что реально задают свой цвет (сейчас только категории
     ачивок, profile_data_partial.php — им же нужен свой --tab-text-color/--tab-text-shadow,
     иначе тёмный текст-по-умолчанию нечитаем на их собственных, часто тёмных, цветах). */
  background: var(--tab-color, var(--gold));
  color: var(--tab-text-color, var(--bg));
  font: inherit;
  font-family: var(--font-display);
  font-size: 0.875rem;
  font-weight: 500;
  text-align: center;
  text-shadow: var(--tab-text-shadow, none);
  cursor: pointer;
  opacity: 0.55;
  transition: opacity 0.15s ease, filter 0.15s ease;
}

.tab-btn.active {
  opacity: 1;
}

.tab-btn:hover:not(.active):not(:disabled) {
  opacity: 0.8;
}

.tab-btn.active:hover:not(:disabled) {
  filter: brightness(1.08);
}

.ach-tab-count {
  font-size: 0.875rem;
  font-weight: 400;
  opacity: 0.9;
}

/* Владелец 2026-09-12: список ачивок "занимает пол экрана" — 12 категорий, каждая своей .tab-btn
   (общий класс, шарится с guild.php/farty.php/bosses.php и т.д., см. tgapp_feedback "все .tab-btn
   app-wide золотые" — трогать сам .tab-btn нельзя, задевает всё приложение), при переносе строк это
   несколько рядов ещё ДО самих карточек ачивок. Сжимаем только внутри #ach-modal. */
#ach-modal .tab-btn {
  padding: 0.3rem 0.4rem;
  min-width: 4.2rem;
  font-size: 0.75rem;
}

#ach-modal .ach-tab-count {
  font-size: 0.75rem;
}

/* Вкладка "Бригада" (guild.php) изначально была единственным местом, где владелец попросил
   заменить скролл на сетку 2×2 (4 кнопки: Моя бригада/Бригады/Журнал/Лагеря). 2026-09-01 просьбу
   расширили на все .ach-tabs/.tab-btn (см. базовые правила выше — flex-wrap + равный flex-basis
   убирают скролл везде), но guild.php всё равно держит свой отдельный жёсткий grid: у 4 кнопок
   очень разная длина текста ("Моя бригада" вплотную к "Бригады · 101"), и flex-wrap на узких
   экранах развалил бы их по одной в ряд вместо гарантированного 2×2, который владелец явно
   похвалил.
   2026-09-27 владелец: 2×2 "сильно громоздко" — теперь все кнопки в ОДНУ строку, иконка и текст
   внутри кнопки тоже в строку. grid-auto-flow: column — колонок ровно столько, сколько кнопок
   (4 в бригаде, 2 без неё), без пустых ячеек. */
.panel--guild-tabs .ach-tabs {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 0.4rem;
  overflow-x: visible;
}

.panel--guild-tabs .tab-btn {
  width: 100%;
  min-width: 0;
  flex-direction: row;
  gap: 0.35rem;
  padding: 0.45rem 0.5rem;
  line-height: 1.15;
}

@media (max-width: 480px) {
  .panel--guild-tabs .tab-btn {
    gap: 0.25rem;
    padding: 0.4rem 0.3rem;
    font-size: 0.75rem;
  }

  /* "· 100" у "Бригады" — просто размер каталога (всегда топ-100), а на узкой кнопке он
     отдельным flex-элементом ломался в столбик рядом с текстом. */
  .panel--guild-tabs .tab-btn .ach-tab-count {
    display: none;
  }
}

.tab-panel {
  display: none;
}

.tab-panel.active {
  display: block;
}

.tab-panel.active > * + * {
  margin-top: 0.75rem;
}

/* Достижения одного семейства (владелец 2026-09-09: "10к/50к/100к урона" и т.п. — одно и то же
   достижение в оригинальной игре, у нас раньше плоским списком) — карточка на семейство,
   .collapse-toggle/[data-collapse-toggle] тот же паттерн, что и tattoo_clothing.js/bosses.js
   (свёрнуто по умолчанию, переживает "↻ Обновить" через modal.js). */
.ach-group-list {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-top: 0.5rem;
}

.ach-group {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-left: 3px solid transparent;
  border-radius: 8px;
  padding: 0.4rem 0.55rem;
}

.ach-group--done {
  border-left-color: #2ecc71;
}

.ach-group-title-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  text-align: left;
}

.ach-group-icon {
  width: 22px;
  height: 22px;
  object-fit: contain;
  flex-shrink: 0;
}

.ach-group-title {
  font-weight: 500;
  font-size: 0.875rem;
}

.ach-group-meta {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.75rem;
  color: var(--text-muted);
  flex-shrink: 0;
}

.ach-list {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-top: 0.5rem;
}

.ach-list.collapsed {
  display: none;
}

.ach-item {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  background: var(--bg);
  border-radius: 8px;
  padding: 0.35rem 0.5rem;
}

.ach-item--locked {
  opacity: 0.5;
}

.ach-item--locked .ach-icon {
  filter: grayscale(1);
}

.ach-icon {
  width: 26px;
  height: 26px;
  object-fit: contain;
  flex-shrink: 0;
}

.ach-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}

.ach-name {
  font-weight: 500;
  font-size: 0.8rem;
}

.ach-title {
  color: var(--text-muted);
  font-size: 0.75rem;
}

.ach-progress {
  margin-top: 0.2rem;
}

.ach-progress-bar {
  height: 1rem;
}

.ach-progress-count {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.65rem;
  color: var(--text);
  white-space: nowrap;
}

.ach-reward {
  color: var(--gold-strong);
  font-weight: 500;
  font-size: 0.8rem;
  flex-shrink: 0;
}

.ach-grind-btn {
  flex-shrink: 0;
  padding: 0.2rem 0.4rem;
  font-size: 0.7rem;
}

.ach-grind-btn--active {
  background: var(--gold-strong);
  border-color: var(--gold-strong);
  color: var(--bg);
  font-weight: 500;
}

@media (max-width: 420px) {
  .screen {
    padding: calc(4.25rem + env(safe-area-inset-top)) 1rem 1.5rem;
  }

  .sidebar-subgroup {
    padding-left: 1.8rem;
  }

  .card, .panel {
    padding: 1.1rem;
  }
}

/* --- Оверлей перехода между страницами (гашение фона + цирковой тробер) --- */

.page-loader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(5, 10, 24, 0.86);
  backdrop-filter: blur(2px);
  opacity: 1;
  visibility: visible;
  transition: opacity 0.25s ease, visibility 0s linear 0s;
}

.page-loader--hide {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.25s ease, visibility 0s linear 0.25s;
}

.page-loader-spinner {
  font-size: 3.5rem;
  line-height: 1;
  animation: page-loader-bounce 1.1s ease-in-out infinite;
  filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.5));
}

@keyframes page-loader-bounce {
  0%, 100% {
    transform: translateY(0) rotate(-8deg);
  }
  50% {
    transform: translateY(-14px) rotate(8deg);
  }
}

/* --- Скелетоны: показываем сразу, пока #page-content/#profile-data ещё грузятся ajax'ом --- */

.skeleton-card {
  overflow: hidden;
}

.skeleton-line {
  height: 0.9rem;
  border-radius: 6px;
  background: linear-gradient(90deg, var(--bg) 25%, var(--border) 50%, var(--bg) 75%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.4s ease-in-out infinite;
  margin-bottom: 0.6rem;
}

.skeleton-line--title {
  width: 45%;
  height: 1.1rem;
}

.skeleton-bar {
  height: 1.6rem;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--bg) 25%, var(--border) 50%, var(--bg) 75%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.4s ease-in-out infinite;
}

@keyframes skeleton-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* --- Колокольчик уведомлений (шапка, на всех страницах через nav.php) --- */

/* Слева от колокольчика (владелец 2026-09-23): иконка человека + сколько людей сейчас на
   сайте (heartbeat, см. online_status.php/nav.js). right — отступ колокольчика (1rem) +
   его ширина (2.6rem) + зазор (0.5rem). */
.online-badge {
  position: fixed;
  top: calc(0.85rem + env(safe-area-inset-top));
  right: 4.1rem;
  z-index: 210;
  height: 2.6rem;
  padding: 0 0.7rem;
  border-radius: 999px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.875rem;
  font-weight: 500;
}

.online-badge .icon {
  color: var(--text-muted);
}

.notif-bell-wrap {
  position: fixed;
  top: calc(0.85rem + env(safe-area-inset-top));
  right: 1rem;
  z-index: 210;
}

.notif-bell {
  position: relative;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 50%;
  background: var(--bg-card);
  border: 1px solid var(--border);
  font-size: 1.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  color: var(--text);
}

.notif-bell-badge {
  position: absolute;
  top: -0.2rem;
  right: -0.2rem;
  min-width: 1.15rem;
  height: 1.15rem;
  padding: 0 0.3rem;
  border-radius: 999px;
  background: #c0392b;
  color: #fff;
  font-size: 0.7rem;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--bg);
}

.notif-panel {
  position: absolute;
  top: calc(100% + 0.5rem);
  right: 0;
  width: min(20rem, 85vw);
  max-height: 70vh;
  overflow-y: auto;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45);
  padding: 0.75rem;
}

.notif-panel[hidden] {
  display: none;
}

.notif-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 500;
  margin-bottom: 0.5rem;
}

.notif-clear-btn {
  background: none;
  border: none;
  color: var(--blue);
  font-size: 0.8rem;
  font-weight: 500;
  padding: 0;
  cursor: pointer;
}

.notif-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.notif-empty {
  text-align: left;
}

.notif-item {
  display: flex;
  padding: 0.5rem;
  border-radius: 8px;
  background: var(--bg);
  border: 1px solid var(--border);
}

.notif-item--unread {
  border-color: var(--gold);
  background: rgba(224, 165, 44, 0.08);
}

.notif-item-body {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  min-width: 0;
  width: 100%;
  text-align: left;
}

/* Портрет босса и название — в одну строку (см. notifications_panel_partial.php); награда и
   время — отдельными строками ниже. */
.notif-item-title-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.notif-item-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  object-fit: contain;
  flex-shrink: 0;
  background: var(--bg-card);
}

.notif-item-icon--fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
}

.notif-item-title {
  font-weight: 500;
  font-size: 0.85rem;
}

.notif-item-subtitle {
  font-size: 0.78rem;
  color: var(--text-muted);
  white-space: pre-line;
}

.notif-item-reward {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}

.notif-item-reward--pending {
  color: var(--text-muted);
  font-size: 0.75rem;
}

.notif-reward-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  background: rgba(224, 165, 44, 0.18);
  color: var(--gold-strong);
  font-size: 0.75rem;
  font-weight: 500;
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
}

.notif-reward-icon {
  width: 14px;
  height: 14px;
  object-fit: contain;
  flex-shrink: 0;
}

.notif-reward-icon--emoji {
  width: auto;
  height: auto;
  font-size: 0.75rem;
  line-height: 1;
}

.notif-item-time {
  font-size: 0.68rem;
  color: var(--text-muted);
}

.notif-item-delete {
  flex-shrink: 0;
  align-self: flex-start;
  background: none;
  border: none;
  color: var(--text-muted);
  padding: 0.1rem;
  cursor: pointer;
  line-height: 0;
}

.notif-item-delete svg {
  width: 14px;
  height: 14px;
}

/* --- Бейджи автоматизации в строке очереди --- */

.automation-badge {
  display: inline-flex;
  align-items: center;
  font-size: 0.875rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.05rem 0.4rem;
}

/* Бейдж «🔥 сумма · оружие ×шаг» (Пробить урон после старта, владелец 2026-09-29) — обводка цвета
   огня. Стоит после базового .automation-badge: специфичность одна, границу решает порядок. */
.automation-badge--fire {
  border-color: #ff6a1a;
}

/* Бейдж «слить бой за мыло после атаки» (владелец 2026-09-30): красный фон, картинка мыла из игры и
   справа белый флаг — вместо перечёркнутой иконки флага, которую никто не понимал. */
.automation-badge--surrender {
  gap: 0.25rem;
  background: #c8322b;
  border-color: #c8322b;
  color: #fff;
}

.automation-badge-soap {
  height: 1.2em;
  width: auto;
  flex-shrink: 0;
}

/* --- Модалка пикера боссов --- */

.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 0.6rem;
  padding-top: 0.75rem;
  margin-top: 0.5rem;
  border-top: 1px solid var(--border);
}

.picker-loading {
  padding: 1rem 0;
}

/* --- Модалка "N ударов подряд" (bosses.js runHitSequence) --- */

.hits-progress-label {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: var(--text-muted);
  margin-bottom: 0.4rem;
}

.hits-summary-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.6rem;
  margin: 0.9rem 0;
}

.hits-summary-tile {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.6rem 0.75rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.hits-summary-tile b {
  font-size: 1.3rem;
  font-weight: 500;
  color: var(--gold-strong);
}

.hits-summary-tile span {
  font-size: 0.875rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.picker-cat-tab {
  font: inherit;
  font-weight: 500;
  font-size: 0.875rem;
  padding: 0.45rem 0.9rem;
  border-radius: 999px;
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text-muted);
  cursor: pointer;
  white-space: nowrap;
}

.picker-cat-tab.active {
  background: var(--gold);
  color: var(--bg);
  border-color: var(--gold);
}

#picker-cat-tabs {
  display: flex;
  gap: 0.4rem;
  overflow-x: auto;
  margin: 0.6rem 0;
  padding-bottom: 0.2rem;
}

.boss-pick-info {
  flex: 0 0 auto;
  width: 1.4rem;
  height: 1.4rem;
  border-radius: 50%;
  background: rgba(11, 23, 48, 0.75);
  color: var(--text);
  border: 1px solid var(--border);
  font-size: 0.9rem;
  line-height: 1;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

.boss-pick-tooltip {
  position: fixed;
  z-index: 500;
  width: min(280px, calc(100vw - 16px));
  background: var(--bg);
  border: 1px solid var(--gold);
  border-radius: 8px;
  padding: 0.5rem 0.6rem;
  font-size: 0.875rem;
  line-height: 1.35;
  color: var(--text);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5);
  text-align: left;
}

/* --- Карточка "сколько собрано / сколько прибавляет" внутри .boss-pick-tooltip (ℹ на плитке
   пикера) — те же классы/раскраска, что уже используют "Комбо: <буква>" (.combo-mode-letter,
   владелец: единая раскраска режимов) и .tc-set-progress-count/.tc-bonus-chip (профиль,
   "Статистика по боссам"), см. bosses.js pickerShowSetProgress(). */
.boss-pick-set-progress {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.boss-pick-set-mode {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.boss-pick-set-mode-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.boss-pick-set-mode-label {
  font-weight: 700;
  color: var(--gold-strong);
}

.boss-pick-set-type {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

.boss-pick-set-type-icon {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
}

img.boss-pick-set-type-icon {
  object-fit: contain;
}

.boss-pick-keychain-note {
  padding: 0;
}

.boss-pick-keychain-icon {
  width: 1.4rem;
  height: 1.4rem;
  object-fit: contain;
}

.picker-selected-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 0.75rem;
}

.picker-boss-list {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin-bottom: 0.9rem;
  max-height: 40vh;
  overflow-y: auto;
}

/* Один выбранный босс (обычное добавление/редактирование одного, не пачкой) — контент короткий,
   резать его в отдельный скролл незачем, вся модалка и так скроллится целиком при необходимости
   (.modal-body). Лимит выше остаётся для пакетного добавления — там список рядов реально длинный. */
.picker-boss-list--single {
  max-height: none;
  overflow: visible;
}

.picker-boss-row {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.6rem 0.7rem;
}

.picker-boss-row-title {
  font-weight: 500;
  font-size: 0.875rem;
  margin-bottom: 0.4rem;
}

.picker-boss-row-hp {
  font-weight: 400;
  color: var(--text-muted);
  font-size: 0.8rem;
}

.picker-boss-row .picker-mode-row {
  margin-bottom: 0.35rem;
}

.picker-boss-row-summary {
  margin: 0 0 0.4rem;
}

.picker-toggle--small {
  font-size: 0.875rem;
}

.picker-toggle-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin: 0.75rem 0;
}

.picker-toggle {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.875rem;
}

.picker-toggle-hint {
  font-size: 0.875rem;
  color: var(--text-muted);
}

.picker-combo-cost {
  margin-top: 0.3rem;
  margin-bottom: 0;
}

.picker-post-damage {
  margin: 0.75rem 0;
}

.deal-damage-controls select,
.deal-damage-controls input {
  font: inherit;
  background: var(--bg);
  color: var(--text);
  border: none;
  border-radius: 8px;
  padding: 0.5rem;
}

/* Поле суммы в окне "Оружие и шаг": окно не закрывается, пока тумблер "Пробить урон после старта"
   включён, а суммы нет — красноватая заливка показывает почему (рамок у полей больше нет). */
#picker-weapon-step-amount.is-invalid {
  background: rgba(231, 76, 60, 0.22);
}

/* Строки про "наколку" под полем суммы (если включено и то и другое) не должны липнуть к полю. */
#picker-weapon-step-amount-wrap:not([hidden]) + #picker-weapon-step-targets .panel-subtitle:first-child {
  margin-top: 0.5rem;
}

/* --- Карточка боя: статы, HP, пороги, лидерборд --- */

.battle-head-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.battle-stat-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.6rem;
  margin: 0.75rem 0;
}

.battle-stat-tile {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.6rem 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
}

.battle-stat-label {
  font-size: 0.875rem;
  color: var(--text-muted);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.25rem 0.5rem;
}

.battle-stat-hint {
  font-weight: 400;
  font-size: 0.95rem;
  color: var(--text-muted);
}

.battle-stat-value {
  font-size: 1.1rem;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.battle-boss-name {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.battle-stat-tile--dmg,
.battle-stat-tile--time {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
}

.battle-stat-tile--dmg .battle-stat-value { color: #2ecc71; }
.battle-stat-tile--time .battle-stat-value { color: #9b59b6; }

.hp-bar-wrap {
  margin-bottom: 0.75rem;
}

.hp-bar-label {
  display: flex;
  justify-content: space-between;
  font-size: 0.875rem;
  color: var(--text-muted);
  margin-bottom: 0.3rem;
}

.hp-bar-numbers {
  display: flex;
  justify-content: space-between;
  font-size: 0.875rem;
  color: var(--text-muted);
  margin-top: 0.25rem;
}

.threshold-block {
  background: rgba(224, 165, 44, 0.08);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.6rem 0.75rem;
  margin-bottom: 0.75rem;
}

.threshold-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.875rem;
  font-weight: 500;
  margin-bottom: 0.5rem;
}

.threshold-remaining {
  color: var(--gold-strong);
  font-weight: 500;
}

.threshold-remaining--done {
  color: #2ecc71;
}

.threshold-bar {
  position: relative;
  height: 0.6rem;
  background: var(--bg);
  border-radius: 999px;
  overflow: hidden;
}

.threshold-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--gold), var(--gold-strong));
  transition: width 0.3s ease;
}

.threshold-tick {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--bg-card);
}

.threshold-labels {
  display: flex;
  justify-content: space-between;
  font-size: 0.875rem;
  color: var(--text-muted);
  margin-top: 0.3rem;
}

.panel--leaderboard {
  background: rgba(59, 125, 222, 0.08);
  border-left-color: var(--blue);
  margin-bottom: 0.75rem;
}

.collapse-toggle {
  width: 100%;
  background: none;
  border: none;
  color: var(--text);
  font: inherit;
  font-weight: 500;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
}

/* Та же логика, что и .sidebar-chevron: закрыто (.collapsed) — вниз, открыто — вверх. Базовая
   иконка chevron-right смотрит вправо. */
.collapse-chevron {
  transform: rotate(-90deg);
  transition: transform 0.2s ease;
}

.collapse-toggle.collapsed .collapse-chevron {
  transform: rotate(90deg);
}

.leaderboard-list {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-top: 0.6rem;
  max-height: 16rem;
  overflow-y: auto;
}

.leaderboard-list.collapsed {
  display: none;
}

.leaderboard-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.5rem;
  border-radius: 8px;
}

.leaderboard-row--me {
  background: rgba(224, 165, 44, 0.18);
  border: 1px solid var(--gold);
}

.leaderboard-rank {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-muted);
  min-width: 1.6rem;
}

.leaderboard-rank--1 { color: var(--gold-strong); }
.leaderboard-rank--2 { color: #cfd8e3; }
.leaderboard-rank--3 { color: #d08a4e; }

.leaderboard-avatar {
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.leaderboard-name {
  flex: 1;
  min-width: 0;
  font-size: 0.875rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.leaderboard-damage {
  flex-shrink: 0;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--gold-strong);
  white-space: nowrap;
}

/* --- Бой с боссом: рукопашка / оружие / добить уроном / сдаться / баффы / таланты --- */

.panel--fight {
  background: rgba(11, 23, 48, 0.4);
  border-left-color: var(--gold);
}

.melee-label {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  margin: 0.75rem 0 0.4rem;
}

.melee-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.melee-chip {
  flex: 1 1 7rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.5rem;
  font: inherit;
  color: var(--text);
  cursor: pointer;
}

.melee-chip[disabled] {
  cursor: not-allowed;
  opacity: 0.6;
}

.melee-damage {
  font-size: 0.875rem;
  font-weight: 500;
}

.melee-cooldown {
  font-size: 0.875rem;
  color: var(--text-muted);
}

.melee-cooldown--ready {
  color: #2ecc71;
  font-weight: 500;
}

.weapon-cards {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

@media (min-width: 1000px) {
  .weapon-cards {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .weapon-cards .weapon-card {
    flex: 1 1 260px;
  }
}

.weapon-card {
  background: var(--bg-card);
  border: 1px solid var(--gold);
  border-radius: 8px;
  padding: 0.65rem 0.75rem;
}

.weapon-card-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.weapon-owned {
  margin-left: auto;
  font-size: 0.875rem;
  color: var(--text-muted);
}

.weapon-multi-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-bottom: 0.5rem;
}

.weapon-multi-btn {
  font: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  padding: 0.3rem 0.6rem;
  border-radius: 8px;
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text-muted);
  cursor: pointer;
}

.weapon-multi-btn.active {
  background: var(--gold);
  color: var(--bg);
  border-color: var(--gold);
}

.weapon-section-label {
  margin-top: 0.6rem;
}

.weapon-repeat-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.6rem;
}

.weapon-repeat-stepper {
  width: auto;
  gap: 0.4rem;
  flex-shrink: 0;
}

.weapon-repeat-stepper .stepper-btn {
  width: 1.9rem;
  height: 1.9rem;
  font-size: 1rem;
}

.weapon-repeat-input {
  width: 3.2rem;
  font-size: 0.95rem;
  font-weight: 500;
}

.weapon-repeat-hint {
  flex: 1 1 8rem;
  min-width: 0;
  font-size: 0.875rem;
  color: var(--text-muted);
}

.weapon-strike-btn {
  width: 100%;
}

.weapon-strike-repeat {
  font-weight: 500;
  opacity: 0.85;
}

.weapon-damage-range {
  margin-top: 0.4rem;
  font-size: 0.875rem;
  color: var(--text-muted);
  text-align: center;
}

.deal-damage-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 0.6rem;
  margin-top: 1rem;
}

.deal-damage-box {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.65rem 0.75rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
}

/* "Сдаться" (bosses.php) больше не отдельная карточка с подписью+кнопкой внутри — сама кнопка
   растягивается на весь размер ячейки сетки .deal-damage-row (владелец: кнопка = контейнер). */
.deal-damage-surrender-btn {
  width: 100%;
  height: 100%;
  background: var(--bg-card);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.deal-damage-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: center;
}

.deal-damage-controls select { flex: 1 1 6rem; }
.deal-damage-controls input { flex: 1 1 6rem; }

.needle-damage-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.needle-damage-amount {
  font-weight: 500;
  color: var(--gold-strong);
}

/* #needle-result обычно пустой (см. bosses.js #needle-strike-btn — очищается сразу после успеха),
   но .panel-subtitle всё равно резервирует под него margin-bottom — из-за этого в .deal-damage-box
   (flex-column + justify-content:center) .needle-damage-row визуально смещался выше истинного
   центра блока. */
#needle-result:empty {
  margin: 0;
}

.buff-list, .talent-list {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.buff-item, .talent-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.6rem 0.75rem;
}

.buff-icon, .talent-icon {
  width: 2.5rem;
  height: 2.5rem;
  object-fit: contain;
  flex-shrink: 0;
}

.buff-body, .talent-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}

.buff-title, .talent-title {
  font-weight: 500;
  font-size: 0.875rem;
}

.buff-desc, .talent-desc {
  font-size: 0.875rem;
  color: var(--text-muted);
}

.talent-level {
  font-size: 0.875rem;
  color: var(--gold-strong);
  font-weight: 500;
}

.buff-activate-btn, .talent-upgrade-btn {
  flex-shrink: 0;
  font-size: 0.875rem;
  padding: 0.5rem 0.75rem;
  white-space: nowrap;
}

.talent-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  margin-bottom: 0.75rem;
}

.talent-toolbar-actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.talent-toolbar-actions .button {
  font-size: 0.875rem;
  padding: 0.5rem 0.75rem;
  white-space: nowrap;
}

/* Талант вне текущей "цепочки" (ещё не открыт) — приглушаем карточку целиком, чтобы взгляд
   сразу шёл на то, что реально можно прокачать, а не терялся среди полусотни неактуальных. */
.talent-item--locked {
  opacity: 0.45;
}

.talent-item--max {
  border-color: rgba(46, 204, 113, 0.35);
}

.talent-status-badge {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.875rem;
  font-weight: 500;
  padding: 0.4rem 0.6rem;
}

.talent-status-badge--max {
  color: #2ecc71;
}

.talent-status-badge--locked {
  color: var(--text-muted);
}

/* Талант "Качок" (id=6, бицуха) — единственный со soft-cap'ом: после первых 10 уровней (чтобы
   не блокировать дальнейшую цепочку) автопрокачка сознательно откладывает его до конца, см.
   talent_lib.php. Бейдж-подсказка рядом с названием — чтобы это не выглядело как "забытый". */
.talent-catchup-hint {
  display: inline-block;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-muted);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.05rem 0.45rem;
  margin-left: 0.4rem;
  vertical-align: middle;
}

/* На узких экранах кнопка (не сжимается, текст в один ряд) и описание баффа/таланта делили
   одну строку с иконкой — описание сжималось в узкую полоску в пару символов на строку.
   Переносим кнопку на отдельную полноширинную строку вместо конкуренции с текстом за место. */
@media (max-width: 420px) {
  .buff-item, .talent-item {
    flex-wrap: wrap;
  }

  .buff-activate-btn, .talent-upgrade-btn {
    flex: 1 1 100%;
    margin-top: 0.4rem;
  }
}

/* --- Бригады: буква-аватар, карточка своей бригады, каталог, состав --- */

.avatar-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: #fff;
  font-weight: 500;
  flex-shrink: 0;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

.avatar-badge--sm {
  width: 1.9rem;
  height: 1.9rem;
  font-size: 0.875rem;
}

.avatar-badge--lg {
  width: 3rem;
  height: 3rem;
  font-size: 1.3rem;
}

.guild-header-card {
  flex-direction: row;
  align-items: center;
  gap: 0.85rem;
  text-align: left;
}

.guild-header-info {
  flex: 1;
  min-width: 0;
}

.guild-header-name {
  font-weight: 500;
  font-size: 1.05rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
}

.guild-empty-state {
  align-items: center;
  text-align: center;
  gap: 0.5rem;
}

.guild-search-input {
  width: 100%;
  font: inherit;
  background: var(--bg);
  color: var(--text);
  border: none;
  border-radius: 8px;
  padding: 0.6rem 0.75rem;
  margin-bottom: 0.75rem;
}

.guild-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.guild-card {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.55rem 0.7rem;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  width: 100%;
}

/* [hidden] и .guild-card — одинаковая специфичность, а .guild-card идёт позже в каскаде, поэтому
   без явного [hidden]-варианта display:flex выше всегда перебивал бы браузерный
   [hidden]{display:none} — тот же баг, что уже был у .sidebar-subgroup (см. выше): поиск по
   бригадам (guild.js: filterGuildList) ставил card.hidden=true на несовпавшие карточки, но они
   оставались видны, поэтому поиск выглядел так, будто вообще ничего не фильтрует. */
.guild-card[hidden] {
  display: none;
}

.guild-card-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.guild-card-name {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  min-width: 0;
  font-weight: 500;
  font-size: 0.88rem;
}

/* text-overflow нужен на отдельном вложенном элементе, а не на самом флекс-контейнере: на
   .guild-card-name ellipsis не сработал бы корректно вместе с бейджем "Моя" рядом — длинное
   название бригады просто вылезало бы за карточку вместо обрезки многоточием. */
.guild-card-name-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.guild-card-meta {
  font-size: 0.875rem;
  color: var(--text-muted);
}

.guild-card-chevron {
  flex-shrink: 0;
  color: var(--text-muted);
}

.guild-roster-title {
  margin: 0 0 0.5rem;
}

/* Кнопки управления своей бригадой (.guild-actions в guild_content_partial.php, owner 2026-09-27) —
   рядом с "Заявить о себе", компактно (владелец в тот же день назвал 2×2-вкладки "сильно
   громоздко"): иконка и текст в строку, 3 в ряд на телефоне, все 6 в ряд на широком экране. */
.guild-actions {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.4rem;
}

.guild-actions .button,
.guild-whitelist-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  min-width: 0;
  padding: 0.45rem 0.5rem;
  font-size: 0.8rem;
  line-height: 1.15;
  text-align: center;
}

.guild-actions .button:disabled,
.guild-whitelist-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.guild-whitelist-btn {
  width: 100%;
  margin-bottom: 0.6rem;
}

@media (max-width: 480px) {
  .guild-actions .button {
    gap: 0.2rem;
    padding: 0.4rem 0.3rem;
    font-size: 0.72rem;
  }
}

@media (min-width: 700px) {
  .guild-actions {
    grid-template-columns: repeat(6, 1fr);
  }
}

/* Модалки этих кнопок: строки игроков — те же .roster-row/.friend-avatar, что у списков друзей. */
.guild-manage-list {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-top: 0.5rem;
}

.guild-manage-row .roster-stats {
  padding-left: 0;
}

.guild-manage-row .guild-whitelist-remove {
  flex-shrink: 0;
  padding: 0.4rem 0.55rem;
}

.guild-request-error {
  flex: 1 1 100%;
  margin: 0;
}

.guild-journal-status {
  font-size: 0.8rem;
  font-weight: 500;
  color: #e67e22;
  white-space: nowrap;
}

.guild-journal-status--good {
  color: #2ecc71;
}

.guild-id-form {
  margin-top: 0.6rem;
}

/* Глобальное input[type=text] (общее с textarea) задаёт min-height 4.5rem — для однострочного ID
   это огромное поле. */
.guild-id-form .guild-search-input,
#guild-leave-leader-input {
  margin-bottom: 0;
  min-height: 0;
}

.guild-whitelist-members-btn {
  width: 100%;
  margin-top: 0.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  padding: 0.55rem 0.8rem;
  font-size: 0.875rem;
}

.guild-id-form .button {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.6rem 0.9rem;
}

/* Длинный статус журнала ("Отклонил: <ник>") переносится сам, а не съедает ник и ID слева. */
.guild-manage-row .roster-side {
  max-width: 55%;
  text-align: right;
}

.guild-manage-row .guild-journal-status {
  white-space: normal;
}

.guild-privilege-list {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  margin-bottom: 0.75rem;
}

.guild-privilege-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.55rem;
  font-size: 0.875rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
}

.guild-privilege-row--off {
  color: var(--text-muted);
}

.guild-privilege-mark--on {
  color: var(--gold-strong);
}

.guild-privilege-check {
  flex-shrink: 0;
  width: 1.05rem;
  height: 1.05rem;
  accent-color: var(--gold);
}

.guild-leave-actions {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.75rem;
}

.guild-leave-actions .button {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
}

.guild-roster-list {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  max-height: 22rem;
  overflow-y: auto;
}

/* "Состав бригады" на вкладке "Моя бригада" — без своей прокрутки, все участники сразу (владелец
   2026-09-27). Остальные .guild-roster-list (активность в лагере, модалка бригады) — как были. */
#tab-my-guild .guild-roster-list {
  max-height: none;
  overflow-y: visible;
}

.roster-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem;
  padding: 0.4rem 0.5rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
}

/* Таланты/достижения/авторитет — отдельной полноширинной строкой ниже, а не колонкой в
   .roster-row: на узких экранах табличная раскладка (как в других ботах на десктопе) просто не
   помещается, а тут значения переносятся сами по себе (flex-wrap) при нехватке места. */
.roster-stats {
  flex: 1 1 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  padding-left: calc(1.9rem + 0.55rem);
}

.roster-stat-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-muted);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.12rem 0.5rem;
  white-space: nowrap;
}

.roster-stat-icon {
  width: 14px;
  height: 14px;
  object-fit: contain;
  flex-shrink: 0;
}

.roster-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
  text-align: left;
}

.roster-name {
  font-size: 0.875rem;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.roster-id {
  font-size: 0.875rem;
  color: var(--text-muted);
}

.roster-side {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.1rem;
}

.roster-rank {
  font-size: 0.875rem;
  color: var(--text-muted);
  white-space: nowrap;
}

.roster-activity {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--gold-strong);
  white-space: nowrap;
}

/* --- Друзья (friends.php) — строки списка используют .roster-row/.roster-* выше, здесь
   только то, что специфично для аватарки-фото и кнопок принять/отклонить/удалить. --- */

.friend-list {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-bottom: 0.6rem;
}

.friend-avatar {
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.friend-avatar--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-card);
  border: 1px solid var(--border);
  font-size: 1.1rem;
}

/* Карточка заявки в друзья — больше внутренних отступов, чем у базового .roster-row (там теснее
   специально для рядов дружины/лагеря), просьба владельца 2026-09-06 добавить "воздуха". Точечно
   через комбинацию классов, чтобы не задеть .roster-row у guild.php/camp.php. */
.roster-row.friend-row {
  padding: 0.75rem 0.85rem;
  gap: 0.7rem;
}

/* Владелец 2026-09-06: убрать левый отступ у характеристик на карточке заявки — .roster-stats
   базово отступает под ширину аватарки (см. комментарий выше), но здесь смотрится как лишний
   падинг. Точечно только для .friend-row, не трогая .roster-stats у guild.php/camp.php. */
.friend-row .roster-stats {
  padding-left: 0;
}

/* От 700px и уже "Принять все"/"Отклонить все" переносились на 2 строки (иконка+текст не
   влезали) — убираем иконку и мельчим шрифт, чтобы текст встал в одну строку (owner 2026-09-06). */
@media (max-width: 700px) {
  #friends-accept-all .icon,
  #friends-decline-all .icon {
    display: none;
  }

  #friends-accept-all,
  #friends-decline-all {
    font-size: 0.8rem;
    padding: 0.65rem 0.4rem;
  }
}

.friend-request-actions {
  display: flex;
  flex-wrap: wrap;
  flex-shrink: 0;
  flex: 1 1 100%;
  gap: 0.4rem;
}

/* Принять/Отклонить/ЧС/белый список — все четыре в одну строку, мельче и compact-нее верхних
   "Принять все"/"Отклонить все" (те используют полноразмерный .button). */
.friend-request-actions .button {
  font-size: 0.8rem;
  padding: 0.45rem 0.6rem;
}

.friend-request-actions .friend-accept-btn,
.friend-request-actions .friend-decline-btn {
  flex: 1 1 auto;
}

.friend-request-actions .friend-quick-black-btn,
.friend-request-actions .friend-quick-white-btn {
  flex: 0 0 auto;
}

.friends-load-more-btn {
  width: 100%;
}

/* --- Модалка "Профиль игрока" (friend-profile-modal) --- */

.friend-profile-head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.6rem;
}

.friend-profile-avatar {
  width: 2.8rem;
  height: 2.8rem;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  font-size: 1.3rem;
}

.friend-profile-head-text {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
}

.friend-profile-name {
  font-size: 0.98rem;
  font-weight: 500;
  overflow-wrap: break-word;
}

.friend-profile-subhead {
  font-size: 0.82rem;
  margin-top: 0.7rem;
  margin-bottom: 0.2rem;
}

.pp-badge-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.friend-tier-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.12rem 0.45rem 0.12rem 0.25rem;
  border-radius: 999px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  font-size: 0.72rem;
  width: fit-content;
}

/* [hidden] и .friend-tier-badge — одинаковая специфичность, а .friend-tier-badge (display:
   inline-flex) идёт позже в каскаде и как авторское правило перебивает браузерное [hidden]{display:
   none} независимо от специфичности — тот же баг, что уже был у .sidebar-subgroup/.guild-card (см.
   выше). Без этого #pp-friend-badge/#pp-tier-badge оставались видны, даже когда JS выставлял
   hidden=true (баг с "Друг" у не-друга, владелец 2026-09-06). */
.friend-tier-badge[hidden] {
  display: none;
}

.pp-friend-badge {
  border-color: var(--gold);
  color: var(--gold-strong);
  padding-left: 0.5rem;
}

.friend-tier-icon {
  width: 15px;
  height: 15px;
}

.pp-friend-actions-row {
  display: flex;
  align-items: stretch;
  gap: 0.4rem;
  margin-bottom: 0.6rem;
}

.pp-friend-action {
  flex: 1 1 auto;
  box-sizing: border-box;
  font-size: 0.85rem;
  padding: 0.55rem 1rem;
}

.pp-list-action {
  flex: 0 0 auto;
  box-sizing: border-box;
  padding: 0.55rem 0.7rem;
}

/* Тот же баг с [hidden], что и у .friend-tier-badge выше: базовое правило "button, .button"
   задаёт display:inline-block, оно перебивает браузерное [hidden]{display:none} — без этого
   #pp-friend-remove/#pp-friend-add/#pp-list-black/#pp-list-white оставались видны все сразу
   независимо от hidden=true. */
.pp-friend-action[hidden],
.pp-list-action[hidden] {
  display: none;
}

/* Тот же баг с [hidden] в третий раз — #bag-reward-open-more-btn (bag_reward_modal_partial.php,
   class="button primary") пуст и скрыт по умолчанию, showBagRewardModal() (modal.js) открывает
   его текстом только когда явно передан moreLabel/onOpenMore; без этой строчки базовое "button,
   .button{display:inline-block}" всё равно рисовало пустую жёлтую кнопку под наградами — баг-
   репорт владельца 2026-09-09 со скриншотом модалки "Сумка открыта". */
#bag-reward-open-more-btn[hidden] {
  display: none;
}

.friend-profile-status {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  padding: 0.4rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  margin-bottom: 0.6rem;
  font-size: 0.78rem;
}

/* Тот же баг с [hidden], что и у .friend-tier-badge/.pp-friend-action выше: display:flex здесь —
   авторское правило, оно перебивает браузерное [hidden]{display:none} — без этого блок "Статус"
   показывался всегда, даже с пустым statusMessage (owner: "если статус пустой, то не надо его
   выводить"). */
.friend-profile-status[hidden] {
  display: none;
}

.friend-profile-status .panel-subtitle {
  margin: 0;
}

.friend-guild-card {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.4rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  margin-bottom: 0.6rem;
  font-weight: 500;
  font-size: 0.85rem;
}

/* Тот же баг с [hidden] (см. .friend-tier-badge/.friend-profile-status выше) — display:flex тут
   тоже перебивает [hidden]{display:none}, без этого карточка бригады показывалась всегда, даже у
   игрока без гильдии (пустой блок вплотную к тайлам статов сверху — то самое "слиплись"). */
.friend-guild-card[hidden] {
  display: none;
}

.friend-guild-icon {
  font-size: 1rem;
}

.friend-weekly-top-card {
  padding: 0.5rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  margin-bottom: 0.6rem;
  font-size: 0.85rem;
}

.friend-weekly-top-title {
  font-weight: 500;
  margin-bottom: 0.35rem;
}

.friend-weekly-top-row {
  display: flex;
  gap: 1.2rem;
}

.friend-weekly-top-cell {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.friend-weekly-top-cell b {
  font-size: 0.95rem;
}

/* "Оружие и ресурсы" в модалке игрока переиспользует .weapon-chip/.weapon-damage/.weapon-name с
   profile.php ("Реквизит"), но там значение — это боевой урон (крупное число, крупный шрифт
   уместен) в куда более широком контейнере, а тут — просто порог ачивки ("≥36 000") в узкой
   модалке (max-width:480px), где при 5 чипах в ряд крупный шрифт разваливал слова переносом
   ("САМОПА" + "Л" на двух строках, 2026-09-04). Скопировано как оверрайд-селектор под
   #player-profile-modal, а не правка самих .weapon-damage/.weapon-name — иначе уменьшился бы
   шрифт и на profile.php/camp_content_partial.php, где это не просили трогать. (Раньше тут был
   #fp-weapons — мёртвый селектор: ID модалки переименовали fp-* → pp-* при обобщении на все
   страницы, оверрайд молча переставал применяться.) */
#player-profile-modal .weapon-strip {
  gap: 0.4rem;
}

#player-profile-modal .weapon-chip {
  min-width: 7rem;
  padding: 0.45rem 0.55rem;
  gap: 0.4rem;
}

#player-profile-modal .weapon-icon {
  width: 24px;
  height: 24px;
}

#player-profile-modal .weapon-name {
  font-size: 0.68rem;
}

#player-profile-modal .weapon-damage {
  font-size: 0.85rem;
}

.stat-tile-icon--emoji {
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  flex-shrink: 0;
}

/* Тайлы статов (Авторитет/Таланты/Достижения/...) — .stat-tiles/.stat-tile-pill переиспользуются
   на profile.php (там уместна горизонтальная лента), а тут владелец явно попросил сетку вместо
   прокрута — оверрайд заскоуплен под #player-profile-modal, сам .stat-tiles/.stat-tile-pill не
   трогаем (см. profile_data_partial.php). */
#player-profile-modal .stat-tiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  overflow: visible;
  padding-bottom: 0;
  margin-bottom: 0.6rem;
}

#player-profile-modal .stat-tile-pill {
  padding: 0.4rem 0.55rem;
  gap: 0.4rem;
  min-width: 0;
}

#player-profile-modal .stat-tile-icon {
  width: 22px;
  height: 22px;
}

#player-profile-modal .stat-tile-pill b {
  font-size: 0.88rem;
}

#player-profile-modal .stat-tile-label {
  font-size: 0.65rem;
}

.friend-combo-table {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  margin-top: 0.3rem;
  margin-bottom: 0.4rem;
}

.friend-combo-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.3rem 0.45rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 0.78rem;
}

.friend-combo-boss {
  overflow-wrap: anywhere;
}

.friend-combo-cells {
  display: flex;
  gap: 0.5rem;
  flex-shrink: 0;
  color: var(--text-muted);
  white-space: nowrap;
}

.friends-add-form {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.friends-add-form .guild-search-input {
  flex: 1;
}

.guild-detail-head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.guild-detail-name {
  font-weight: 500;
  font-size: 1.05rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
}

/* Кнопка "Подать заявку" в модалке чужой бригады (guild.js): снизу, во всю ширину модалки,
   с отступом от содержимого выше (owner 2026-09-29). Раскладка и неактивное состояние — как у
   .guild-whitelist-btn: своего правила button:disabled в проекте нет, каждая кнопка задаёт сама. */
.guild-join-block {
  margin-top: 1.25rem;
}

.guild-join-btn {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
}

.guild-join-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.guild-join-result {
  margin: 0.5rem 0 0;
}

/* ===================== Тату и одежда (tattoo_clothing.php) ===================== */

.tab-btn:disabled {
  cursor: not-allowed;
  opacity: 0.32;
}

.chip-btn.active {
  background: var(--gold);
  color: var(--bg);
  border-color: var(--gold-strong);
}

.tc-category {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.tc-search-input {
  width: 100%;
  font: inherit;
  background: var(--bg);
  color: var(--text);
  border: none;
  border-radius: 8px;
  padding: 0.6rem 0.75rem;
}

.tc-filter-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.tc-source-row {
  gap: 0.4rem;
}

.tc-filter-label {
  font-size: 0.875rem;
  color: var(--text-muted);
  flex: 0 0 auto;
}

.tc-source-chip {
  font-size: 0.875rem;
  padding: 0.35rem 0.6rem;
}

/* Владелец 2026-09-09: "нормальную переключалку а не чекбокс" — .toggle-row/.toggle-switch
   (общий пилюльный тумблер, см. tgapp-feedback) вместо голого <input type="checkbox">. Компактный
   вариант поверх базового .toggle-row (тот по умолчанию на всю ширину, своя рамка/фон) — тут он
   сидит рядом с чипами-фильтрами в один ряд. */
.tc-buy-toggle {
  width: auto;
  background: none;
  border: none;
  padding: 0;
  gap: 0.4rem;
  font-size: 0.875rem;
}

/* Покупка татуировок/одежды (владелец 2026-09-09). "Купить всё" — сводная строка над списком
   предметов сета: сколько ещё нужно докупить, во что это встанет и сколько валюты сейчас есть. */
.tc-set-buy-row {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-top: 0.6rem;
}

.tc-set-buy-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  flex-wrap: wrap;
  background: rgba(224, 165, 44, 0.1);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.5rem 0.7rem;
}

.tc-set-buy-info {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.875rem;
  flex-wrap: wrap;
}

.tc-set-buy-info .resource-icon {
  width: 18px;
  height: 18px;
}

.tc-set-buy-balance {
  color: var(--text-muted);
}

.tc-buy-all-btn {
  flex-shrink: 0;
  padding: 0.4rem 0.8rem;
  font-size: 0.875rem;
}

.tc-buy-all-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Купить по 1 предмету — кнопка внутри карточки конкретной татуировки/вещи (только у ещё не
   своих и реально покупаемых, см. tattoo_clothing_items.php::canBuy). */
.tc-item-buy-btn {
  width: 100%;
  margin-top: 0.4rem;
  padding: 0.35rem 0.5rem;
  font-size: 0.8125rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
}

.tc-item-buy-btn .resource-icon {
  width: 16px;
  height: 16px;
}

.tc-summary {
  padding: 1rem 1.1rem;
  gap: 0.5rem;
}

.tc-summary-body {
  display: grid;
  row-gap: 0.5rem;
  column-gap: 0.5rem;
  align-items: center;
  margin-top: 0.6rem;
}

.tc-summary-body.collapsed {
  display: none;
}

.tc-summary-row {
  display: contents;
}

.tc-summary-row span {
  text-align: center;
}

.tc-summary-row .resource-icon {
  width: 22px;
  height: 22px;
}

.tc-summary-row--head span:first-child {
  display: none;
}

.tc-summary-row--collected span {
  color: #2ecc71;
  font-weight: 500;
}

.tc-summary-row--missing span {
  color: #e74c3c;
  font-weight: 500;
}

.tc-summary-row--collected span:first-child,
.tc-summary-row--missing span:first-child {
  text-align: left;
  font-size: 0.875rem;
  color: var(--text-muted);
  font-weight: 400;
}

.tc-set-list {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.tc-set-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-left: 4px solid transparent;
  border-radius: 8px;
  padding: 0.9rem 1rem;
}

.tc-set-card--done {
  border-left-color: #2ecc71;
}

.tc-set-header {
  align-items: center;
  gap: 0.5rem;
}

.tc-set-title-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  text-align: left;
}

.tc-set-name {
  font-weight: 500;
}

.tc-rarity-badge {
  color: #fff;
  font-size: 0.875rem;
  font-weight: 500;
  padding: 0.15rem 0.55rem;
  flex-shrink: 0;
}

.tc-set-desc {
  margin: 0.5rem 0 0;
  font-size: 0.875rem;
  color: var(--text-muted);
}

.tc-set-meta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  margin-top: 0.6rem;
}

.tc-set-progress {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: 1 1 140px;
}

.tc-set-progress-count {
  font-size: 0.875rem;
  font-weight: 500;
  white-space: nowrap;
  color: var(--text-muted);
}

.tc-text-done {
  color: #2ecc71;
}

.tc-progress-bar {
  flex: 1 1 auto;
  min-width: 60px;
}

.tc-progress-fill {
  background: linear-gradient(90deg, #1f9d55, #2ecc71);
}

.tc-set-bonuses {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.tc-bonus-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.2rem 0.55rem;
  font-size: 0.875rem;
  font-weight: 500;
  white-space: nowrap;
}

.tc-bonus-chip .resource-icon {
  width: 16px;
  height: 16px;
}

.tc-set-source {
  font-size: 0.875rem;
  color: var(--text-muted);
  flex: 1 1 100%;
}

.tc-set-items {
  margin-top: 0.75rem;
}

.tc-set-items.collapsed {
  display: none;
}

.tc-item-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 0.5rem;
}

@media (max-width: 768px) {
  .tc-item-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Модалка "Купить всё" — построчный прогресс покупки сета (владелец 2026-09-09). */
.tc-buy-progress-list {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin: 0.75rem 0;
}

.tc-buy-progress-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.35rem 0.6rem;
  border-radius: 8px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  font-size: 0.875rem;
}

.tc-buy-progress-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tc-buy-progress-state {
  flex-shrink: 0;
  font-weight: 500;
}

.tc-buy-progress-row--active {
  border-color: var(--gold);
}

.tc-buy-progress-row--done {
  border-color: #2ecc71;
}

.tc-buy-progress-row--done .tc-buy-progress-state {
  color: #2ecc71;
}

.tc-buy-progress-row--fail {
  border-color: #e74c3c;
}

.tc-buy-progress-row--fail .tc-buy-progress-state {
  color: #e74c3c;
}

.tc-item-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.tc-item-card--owned {
  border-color: #2ecc71;
}

.tc-item-thumb-wrap {
  position: relative;
  aspect-ratio: 1;
  background: var(--bg-card);
}

.tc-item-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.tc-item-thumb--empty {
  width: 100%;
  height: 100%;
}

.tc-item-check {
  position: absolute;
  top: 3px;
  right: 3px;
  background: #2ecc71;
  color: var(--bg);
  font-size: 0.875rem;
  font-weight: 500;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tc-item-body {
  padding: 0.4rem 0.45rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.tc-item-name {
  font-size: 0.875rem;
  font-weight: 500;
}

.tc-item-source {
  font-size: 0.875rem;
  color: var(--text-muted);
  line-height: 1.25;
}

.tc-item-bonuses {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}

.tc-item-bonuses .tc-bonus-chip {
  font-size: 0.875rem;
  padding: 0.1rem 0.4rem;
}

.tc-item-bonuses .resource-icon {
  width: 13px;
  height: 13px;
}

/* --- Заруба: карточки режимов + карточки сумок "Менялы" --- */

.zaruba-mode-row {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.zaruba-mode-card {
  /* Название, награда и лимит идут одной строкой, поэтому карточке нужно не меньше ~14rem
     (было 8rem под столбик) — на телефоне это по карточке на ряд, на широком экране три в ряд. */
  flex: 1 1 14rem;
  background: var(--bg);
  border: 2px solid var(--border);
  border-radius: 8px;
  padding: 0.75rem 0.6rem;
  text-align: center;
}

.zaruba-mode-card--active {
  border-color: var(--gold);
  background: rgba(224, 165, 44, 0.1);
}

.zaruba-mode-info {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.2rem 0.75rem;
}

.zaruba-mode-title {
  font-weight: 500;
  font-size: 0.875rem;
}

/* Глобального стиля для button:disabled в проекте нет, а золотая кнопка, пока идёт заруба
   (все три "Начать" отключены), без него выглядела бы рабочей. 0.55 — как у неактивной вкладки
   .tab-btn: читается как приглушённое золото, а не как грязно-оливковый при 0.4. */
.zaruba-start-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* Официальная картинка валюты в строке итога (модалка #zaruba-result-modal: руда/печатки/мыло). */
.zaruba-result-icon {
  width: 18px;
  height: 18px;
  object-fit: contain;
  vertical-align: middle;
}

/* Картинка мыла из игры на кнопке "Скип за мыло" (player_resource_fields()['soap']). */
.zaruba-skip-icon {
  width: 1.25rem;
  height: 1.25rem;
  object-fit: contain;
}

.zaruba-mode-reward {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  font-weight: 500;
  color: var(--gold-strong);
  font-size: 0.875rem;
}

.zaruba-mode-limit {
  font-size: 0.875rem;
  color: var(--text-muted);
}

.zaruba-bag-card {
  margin-bottom: 0.75rem;
}

.mode-pill[data-mode="zaruba-1"] { background: #5c6b8a; }
.mode-pill[data-mode="zaruba-2"] { background: var(--blue); }
.mode-pill[data-mode="zaruba-3"] { background: var(--gold-strong); color: var(--bg); }

/* --- Настройки автозарубы (модалка) --- */

.zaruba-auto-select {
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
  font: inherit;
  font-size: 0.875rem;
  background-color: var(--bg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%239fb0d1' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 0.6rem;
  color: var(--text);
  border: none;
  border-radius: 8px;
  padding: 0.55rem 2rem 0.55rem 0.75rem;
}

/* --- Лагеря (вкладка бригады): авто-нападение/оборона/меняла --- */

.camp-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.6rem 0;
  cursor: pointer;
}

.camp-toggle-row input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.camp-toggle-text {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.camp-toggle-text b {
  font-size: 0.875rem;
}

.camp-toggle-text .panel-subtitle {
  margin: 0;
  font-size: 0.875rem;
}

.camp-auto-details {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding-top: 0.3rem;
  border-top: 1px solid var(--border);
  margin-top: 0.3rem;
}

.alert-info-box {
  background: rgba(59, 125, 222, 0.12);
  border: 1px solid rgba(59, 125, 222, 0.35);
  border-radius: 8px;
  padding: 0.5rem 0.7rem;
  font-size: 0.875rem;
  color: var(--text-muted);
}

.camp-field-label {
  font-size: 0.875rem;
  font-weight: 500;
  margin-top: 0.2rem;
}

.seg-toggle {
  display: flex;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}

.seg-toggle-btn {
  flex: 1;
  background: var(--bg);
  color: var(--text-muted);
  border: none;
  padding: 0.5rem 0.6rem;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
}

.seg-toggle-btn.active {
  background: var(--blue);
  color: #fff;
}

.camp-weapon-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.camp-weapon-chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.35rem 0.7rem 0.35rem 0.5rem;
  font-size: 0.875rem;
  color: var(--text-muted);
  cursor: pointer;
}

.camp-weapon-chip .weapon-icon {
  width: 18px;
  height: 18px;
  object-fit: contain;
}

.camp-weapon-chip.active {
  border-color: var(--gold);
  color: var(--text);
}

.camp-weapon-priority {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 50%;
  background: var(--gold);
  color: #1a1200;
  font-size: 0.875rem;
  font-weight: 500;
}

.camp-batch-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.camp-batch-btn {
  background: var(--bg);
  color: var(--text-muted);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.4rem 0.65rem;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
}

.camp-batch-btn.active {
  background: var(--gold);
  color: #1a1200;
  border-color: var(--gold);
}

.camp-node-row .camp-attack-btn {
  flex-shrink: 0;
  padding: 0.4rem 0.6rem;
}

.camp-log-box {
  max-height: 260px;
  overflow-y: auto;
  background: #000;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.5rem 0.6rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.camp-log-row {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid #1f1f1f;
}

.camp-log-row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.camp-log-icon {
  flex-shrink: 0;
  font-size: 0.9rem;
}

.camp-log-text {
  color: #fff;
  font-size: 0.875rem;
  line-height: 1.35;
}

.camp-log-time {
  color: #9a9a9a;
  font-size: 0.875rem;
  margin-top: 0.1rem;
}

/* Единый скролл-контейнер для ВСЕХ журналов/логов приложения (Комбо, Таланты, Нычки,
   Конфискат, ЗШ, Фартовый, Покер, Карты, Кости, Делюги) — 2026-09-21, владелец пожаловался, что
   неограниченные списки (например 1000 спичек на прокрутку Фартового = сотни строк подряд)
   растягивают всю страницу; попросил везде то же самое поведение/оформление, что уже было
   только у "Лагерей" (.camp-log-box выше) — чёрный фон, белый текст, скролл вместо роста
   страницы. Сама .app-log-scroll не трогает display/gap контейнеров, у которых он уже свой
   (combo-log-list/confiscation-log-list/zsh-log/friends-history-list) — только добавляет
   max-height/overflow/фон/паддинг; у контейнеров без собственного flex (farty-log,
   card/dice/poker-auto-log) даёт его тоже.
   font-size 0.8125rem (~13px) — прямая просьба владельца ("маленький шрифт где-то 13пх"). */
.app-log-scroll {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-height: 260px;
  overflow-y: auto;
  background: #000;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.5rem 0.6rem;
}

/* Простые текстовые строки (farty-log/dice-auto-log/dice-manual-log) переиспользуют глобальный
   .panel-subtitle как класс строки — саму .panel-subtitle трогать нельзя (используется по всему
   приложению вне логов), поэтому переопределяем только внутри .app-log-scroll. */
.app-log-scroll .panel-subtitle {
  color: #fff;
  font-size: 0.8125rem;
}

/* Делюги переиспользуют .friends-history-list/-row (тот же компонент, что история друзей на
   friends.php) — трогать сам класс нельзя, красим только внутри .app-log-scroll (эта обёртка
   вешается ТОЛЬКО на #deluga-log-list, friends.php её не подключает). */
.app-log-scroll .friends-history-row {
  border-bottom-color: #1f1f1f;
  font-size: 0.8125rem;
}

.app-log-scroll .friends-history-name {
  color: #fff;
}

.app-log-scroll .friends-history-reason,
.app-log-scroll .friends-history-time {
  color: #9a9a9a;
}

/* 2026-09-30: тробер тика автозарубы (owner: "выиграли зарубу — страница просто замирает,
   непонятно что происходит, потом резко появляется новая заруба") — тот же icon('rotate-cw'),
   что уже используют кнопки "Обновить" по всему приложению, просто анимированный и скрытый по
   умолчанию (JS показывает его на время самого тика, см. zaruba.js). */
@keyframes zaruba-auto-spin {
  to { transform: rotate(360deg); }
}
.zaruba-auto-spinner {
  display: inline-block;
  animation: zaruba-auto-spin 0.8s linear infinite;
}
/* display:inline-block выше иначе бьёт атрибут [hidden] (авторский CSS перебивает UA-стиль
   [hidden]{display:none} — тот самый повторяющийся баг, см. tgapp-hidden-vs-display-css-bug). */
.zaruba-auto-spinner[hidden] {
  display: none;
}

/* --- Вкладка «Комбо» --- */

.combo-boss-card {
  position: relative;
  overflow: hidden;
}

.combo-boss-head {
  position: relative;
}

.combo-boss-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.12;
  border-radius: 8px;
  z-index: 0;
}

.combo-boss-head .panel-title {
  position: relative;
  z-index: 1;
}

.combo-mode-block {
  border-top: 1px solid var(--border);
  padding-top: 0.6rem;
  margin-top: 0.6rem;
  position: relative;
  z-index: 1;
}

.combo-mode-row-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.4rem;
}

.combo-status {
  font-size: 0.875rem;
  font-weight: 500;
  margin-left: auto;
}

.combo-status--ready { color: #2ecc71; }
.combo-status--missing { color: var(--text-muted); }

.combo-hit-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-bottom: 0.4rem;
}

.combo-hit-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  font-size: 0.875rem;
  color: var(--text-muted);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.15rem 0.35rem;
}

.combo-hit-icon {
  width: 16px;
  height: 16px;
  object-fit: contain;
}

.combo-cost-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-bottom: 0.4rem;
}

.combo-cost-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.2rem 0.45rem;
}

/* Чистый итог дня по комбо — иконки с ±числом прямо в заголовке "Комбо сегодня" на главной
   (profile_data_partial.php, boss_combo_daily_net()). Цвета плюса/минуса те же, что у дневных
   дельт "+N сегодня" у реквизита/валют (daily_delta_badge_html). */
.panel--combo .panel-title {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.combo-net-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--text-muted);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.15rem 0.4rem;
}

.combo-net-chip--up {
  color: #2ecc71;
}

.combo-net-chip--down {
  color: #ff8f8f;
}

/* Тот же чистый-итог чип, что в заголовке "Комбо сегодня", но компактнее — повторяется по
   каждому боссу/режиму в списке ниже (только оружие, без рублей, см. profile_data_partial.php). */
.combo-net-chip--row {
  margin-left: 0.3rem;
  font-size: 0.75rem;
  padding: 0.1rem 0.35rem;
}

.combo-entry-form {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.65rem 0.75rem;
  margin-top: 0.5rem;
}

.combo-entry-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
  gap: 0.4rem;
  margin: 0.5rem 0;
}

.combo-entry-slot {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  font-size: 0.875rem;
  color: var(--text-muted);
}

.combo-entry-slot select {
  font: inherit;
  font-size: 0.875rem;
  padding: 0.3rem;
  border-radius: 6px;
  border: none;
  background: var(--bg);
  color: var(--text);
}

.combo-entry-actions {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.combo-entry-error {
  font-size: 0.875rem;
  color: #e74c3c;
}

.combo-log-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.combo-log-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.6rem;
  border-bottom: 1px solid #1f1f1f;
  padding-bottom: 0.4rem;
}

.combo-log-row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.combo-log-row--error .combo-log-text {
  color: #e74c3c;
}

.combo-log-text {
  color: #fff;
  font-size: 0.8125rem;
  line-height: 1.35;
}

.combo-log-time {
  color: #9a9a9a;
  font-size: 0.8125rem;
  white-space: nowrap;
}

/* Нычки: логи впаривания намеренно чёрно-белые, без цветных индикаторов успеха/ошибки — 2026-08-28,
   владелец попросил убрать пестроту (была явно видна на скриншоте с зелёными/красными строками). */
.nychki-log-mono .combo-log-row--error .combo-log-text {
  color: #9a9a9a;
}

.mode-btn--combo {
  flex: 1 1 100%;
  text-align: left;
}

/* Та же раскраска режимов, что и .mode-pill/.combo-mode-letter — см. комментарий там. */
.mode-btn--combo.active[data-combo-mode-select="pacansky"] { background: #5c6b8a; border-color: #5c6b8a; color: #fff; }
.mode-btn--combo.active[data-combo-mode-select="blotnoy"] { background: var(--blue); border-color: var(--blue); color: #fff; }
.mode-btn--combo.active[data-combo-mode-select="avtoritetny"] { background: var(--gold-strong); border-color: var(--gold-strong); color: var(--bg); }

.combo-avail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
}

.combo-avail-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.3rem 0;
  border-bottom: 1px solid var(--border);
}

.combo-avail-row:last-child {
  border-bottom: none;
}

.combo-avail-name {
  font-size: 0.875rem;
  color: var(--text);
}

.combo-avail-pills {
  display: flex;
  gap: 0.3rem;
  flex-shrink: 0;
}

.combo-avail-pill {
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none;
  border-radius: 999px;
  padding: 0.15rem 0.45rem;
  color: #fff;
}

/* Раскраска теперь по режиму (пац/блат/авто), как везде — см. .mode-pill выше. Готовность/
   отсутствие записи по-прежнему видно (owner's own subtitle text above объясняет 🟢/🔴), но здесь
   передаётся приглушением, не отдельным цветом — та же идиома, что и неактивный .tab-btn
   (opacity: 0.55). */
.combo-avail-pill[data-mode="pacansky"] { background: #5c6b8a; }
.combo-avail-pill[data-mode="blotnoy"] { background: var(--blue); }
.combo-avail-pill[data-mode="avtoritetny"] { background: var(--gold-strong); color: var(--bg); }

.combo-avail-pill--missing {
  opacity: 0.5;
}

/* Покер (poker.php) — карты роял-флеш-чемпиона, текстом (ранг+масть), без подобранных
   картинок карт. */
.poker-card-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.6rem;
}

/* Владелец пожаловался, что на тёмном фоне вкладки карту трудно отличить от фона (border/bg
   картой почти той же тёмно-синей гаммы, что и вся страница) — переводим лицо карты на светлый
   фон (как у настоящей игральной карты), контраст с тёмной темой при этом гарантирован
   независимо от того, какой именно тёмный оттенок вокруг. */
.poker-card {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.4rem;
  padding: 0.3rem 0.45rem;
  border-radius: 8px;
  border: 1px solid #cfc6ae;
  background: #f7f2e2;
  color: #1a1f2e;
  font-weight: 500;
  font-size: 0.95rem;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.35);
}

.poker-card--red {
  color: #c0392b;
}

/* Увеличено по прямой просьбе владельца ("шрифт маленький, увеличь карты") — вкладка "Ручной"
   и текущая раздача автоигры. */
.poker-card--lg {
  min-width: 4rem;
  padding: 1rem 0.7rem;
  font-size: 1.9rem;
  border-radius: 8px;
}

.poker-btn-icon {
  width: 18px;
  height: 18px;
  vertical-align: middle;
  object-fit: contain;
}

.button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.poker-hand-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  margin-top: 0.6rem;
}

.poker-hand-slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  position: relative;
}

/* Карта как кликабельная кнопка (вкладка "Ручной", была отдельная кнопка "↻ Заменить" рядом с
   картой — теперь сама карта кликабельна) — сброс браузерных дефолтов button поверх .poker-card. */
.poker-card--clickable {
  cursor: pointer;
  font: inherit;
  transition: border-color 0.15s ease, transform 0.1s ease;
}

.poker-card--clickable:disabled {
  opacity: 0.5;
  cursor: default;
}

.poker-card--clickable:not(:disabled):active {
  transform: scale(0.96);
}

.poker-card--advised {
  border-color: var(--gold-strong);
  box-shadow: 0 0 0 2px rgba(242, 187, 63, 0.35);
}

.poker-advice-badge {
  position: absolute;
  top: -0.6rem;
  left: 50%;
  transform: translateX(-50%);
  background: var(--gold-strong);
  color: var(--bg);
  font-size: 0.875rem;
  font-weight: 500;
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
  white-space: nowrap;
  z-index: 1;
}

.poker-advice-banner {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin-top: 0.7rem;
  padding: 0.6rem 0.75rem;
  background: rgba(242, 187, 63, 0.1);
  border: 1px solid var(--gold);
  border-radius: 8px;
  font-size: 0.875rem;
  color: var(--text);
}

.poker-advice-icon {
  flex-shrink: 0;
}

/* Блоки+флекс вместо построчной "таблицы" для сводных метрик (шапка покера, дневная награда,
   мини-статы в раздаче) — каждая метрика своя карточка, оборачиваются по ширине экрана вместо
   единой панели со сплошными разделительными линиями. */
.poker-stat-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.poker-stat-chip {
  flex: 1 1 auto;
  min-width: 6.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.5rem 0.7rem;
}

.poker-stat-chip-label {
  font-size: 0.875rem;
  color: var(--text-muted);
}

.poker-stat-chip-value {
  font-size: 0.95rem;
  font-weight: 500;
}

/* Автоигра: выбор режима (Мыло/Фишки) как пара кликабельных карточек-радио. */
.poker-mode-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-bottom: 0.7rem;
}

/* Только flex-basis — остальное (фон/рамка/паддинг/раскладка) теперь берётся от .toggle-row,
   на который .poker-mode-chip навешивается вторым классом (см. poker_content_partial.php,
   2026-08-21: были нативные чекбоксы, заменены на общую pill-переключалку). */
.poker-mode-chip {
  flex: 1 1 10rem;
}

.poker-auto-form-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  margin-bottom: 0.6rem;
}

.poker-auto-form-row label {
  margin: 0;
}

.poker-auto-input {
  width: 6rem;
  background: var(--bg);
  border: none;
  border-radius: 8px;
  color: var(--text);
  padding: 0.4rem 0.5rem;
  font: inherit;
  text-align: right;
}

/* Журнал автоигры — карточка на раздачу (не таблица): бейджи-шапка, карты, список замен,
   награды снизу. Новые записи добавляются сверху (poker.js log.prepend). */
.poker-log-card {
  padding: 1rem;
  gap: 0.6rem;
  margin-bottom: 0.6rem;
}

.poker-log-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
}

.poker-log-replacements {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.poker-log-replace-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.4rem;
  font-size: 0.875rem;
  padding: 0.3rem 0.5rem;
  background: var(--bg);
  border-radius: 8px;
}

.poker-log-rewards {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  font-size: 0.875rem;
  color: #2ecc71;
  font-weight: 500;
}

.poker-box-card {
  padding: 1rem;
  gap: 0.5rem;
  margin-bottom: 0.7rem;
}

/* Колесо фортуны (wheel.php) — сетка секторов колеса. */
.wheel-slot-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(5.5rem, 1fr));
  gap: 0.5rem;
  margin-top: 0.6rem;
}

.wheel-slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  padding: 0.5rem 0.4rem;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg-card);
  text-align: center;
}

.wheel-slot-label {
  font-size: 0.875rem;
  color: var(--text-muted);
  line-height: 1.2;
}

/* Статистика дропа (wheel.js: renderWheelTallyRows()) — карточки .resource-row в ряд с
   переносом, не в столбик: места хватает, а список того, что выпало, может быть длинным. */
.wheel-drop-flow {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.wheel-drop-flow .resource-row {
  flex: 0 0 auto;
}

.combo-entry-textarea {
  width: 100%;
  font: inherit;
  font-size: 0.875rem;
  line-height: 1.4;
  padding: 0.6rem 0.7rem;
  border-radius: 8px;
  border: none;
  background: var(--bg);
  color: var(--text);
  resize: vertical;
}

/* Количество в "Купить реквизит" (profile.php, weapon-buy-modal) — без стрелок number-поля. Рамку и
   кольцо фокуса с него владелец просил снять раньше остальных; с 2026-09-30 это делает общее
   правило для всех полей (:where(input…) выше), отдельного правила по id больше не нужно. */
#weapon-buy-qty::-webkit-outer-spin-button,
#weapon-buy-qty::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

#weapon-buy-qty[type='number'] {
  -moz-appearance: textfield;
}

.confiscation-status {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.6rem;
  padding: 0.7rem 0.8rem;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg-card);
  font-size: 0.875rem;
  margin-top: 0.6rem;
  max-width: 100%;
}

.confiscation-status--ready {
  border-color: var(--gold-strong);
  background: rgba(224, 165, 44, 0.12);
}

.confiscation-status-icon {
  font-size: 1.3rem;
  flex-shrink: 0;
}

/* min-width:0 — иначе как flex-элемент этот span берёт за минимальную ширину свой
   НЕразорванный однострочный текст (стандартное поведение min-width:auto у флекс-детей),
   что на узких экранах толкает всю строку .confiscation-status шире экрана и обрезается
   глобальным html{overflow-x:hidden} (см. правило вверху файла) — снаружи это выглядит как
   "текст/иконка обрезаны слева". flex:1 1 200px — текст занимает всё свободное место и
   переносится нормально по словам вместо того, чтобы толкать соседей. */
.confiscation-status-text {
  flex: 1 1 200px;
  min-width: 0;
}

.confiscation-status #confiscation-claim-btn {
  margin-left: auto;
  flex-shrink: 0;
}

.confiscation-claim-error {
  color: #e74c3c;
  margin: 0.4rem 0 0;
}

/* Тот же приём, что у .weapon-strip выше в этом файле ("на узких экранах flex-wrap'ались
   криво — просто складываем всё в один столбец"): на совсем узких экранах кнопка "Собрать"
   рядом с иконкой+текстом теснится и может съезжать некрасиво — переносим её на отдельную
   полноширинную строку вместо борьбы за место в одну линию. */
@media (max-width: 420px) {
  .confiscation-status #confiscation-claim-btn {
    margin-left: 0;
    width: 100%;
  }
}

.confiscation-log-list {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.confiscation-log-row {
  border-bottom: 1px solid #1f1f1f;
  padding-bottom: 0.5rem;
}

.confiscation-log-row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.confiscation-log-main {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
}

.confiscation-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  background: rgba(224, 165, 44, 0.18);
  color: var(--gold-strong);
  font-size: 0.875rem;
  font-weight: 500;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
}

.confiscation-chip-icon {
  width: 16px;
  height: 16px;
  object-fit: contain;
  flex-shrink: 0;
}

.confiscation-log-time {
  margin-left: auto;
  color: #9a9a9a;
  font-size: 0.8125rem;
  white-space: nowrap;
}

.confiscation-log-tattoo {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  margin-top: 0.35rem;
  font-size: 0.8125rem;
  color: #fff;
  line-height: 1.4;
}

.confiscation-log-tattoo .confiscation-chip-icon {
  flex-shrink: 0;
}

/* Вкладка "Друзья" → "Авто": белый/чёрный список как пилюли-чипы вместо построчной таблицы
   (см. правило "блоки+флекс, не таблицы" в памяти проекта). */
.friends-chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.4rem;
}

.friends-list-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: rgba(46, 204, 113, 0.14);
  color: var(--text);
  font-size: 0.875rem;
  font-weight: 500;
  padding: 0.25rem 0.3rem 0.25rem 0.6rem;
  border-radius: 999px;
}

.friends-list-chip--black {
  background: rgba(231, 76, 60, 0.14);
}

.friends-list-chip-remove {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 0.9rem;
  line-height: 1;
  padding: 0.15rem 0.3rem;
}

/* История автоприёма — раскрывающийся список отдельных решений под сводными чипами
   (.poker-stat-grid/.poker-stat-chip, переиспользованы как есть). */
.friends-history-list {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-top: 0.6rem;
  max-height: 16rem;
  overflow-y: auto;
}

.friends-history-list.collapsed {
  display: none;
}

.friends-history-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  padding: 0.3rem 0;
  border-bottom: 1px solid var(--border);
}

.friends-history-row:last-child {
  border-bottom: none;
}

.friends-history-name {
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.friends-history-reason {
  color: var(--text-muted);
}

.friends-history-time {
  margin-left: auto;
  color: var(--text-muted);
  font-size: 0.875rem;
  white-space: nowrap;
}

/* Калькулятор урона (calc.php) — по образцу стороннего pro-prison-bot.ru, см. calc_content_partial.php. */
.calc-weapon-block {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.85rem 0.9rem;
  margin-bottom: 0.85rem;
  background: var(--bg);
}

.calc-weapon-block:last-child {
  margin-bottom: 0;
}

.calc-field-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.6rem;
  margin: 0.7rem 0;
}

/* На узких телефонах 3 равные колонки (Урон/Крит/Кол-во) с полем сброса внутри двух из них
   оставляли самому числу ~40px — реальные значения вроде "65607" обрезались до "6…" (владелец
   прислал скриншот). Ниже 480px (тот же порог, что уже используется для .calc-results напротив —
   там наоборот 2→4 колонки ВЫШЕ 480px) складываем поля в один столбец на всю ширину карточки —
   места хватает под любое число, сброс-кнопка больше не режет пространство. */
@media (max-width: 479px) {
  .calc-field-row {
    grid-template-columns: 1fr;
  }
}

.calc-field {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  min-width: 0;
}

.calc-field label {
  font-size: 0.875rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-muted);
}

.calc-field-with-reset {
  display: flex;
  align-items: stretch;
  gap: 0.3rem;
}

.calc-field-input {
  font: inherit;
  font-weight: 500;
  background: var(--card-bg, var(--bg));
  color: var(--text);
  border: none;
  border-radius: 8px;
  padding: 0.5rem 0.6rem;
  width: 100%;
  min-width: 0;
  text-align: center;
}

.calc-field-with-reset .calc-field-input {
  text-align: left;
}

.calc-reset-btn {
  flex: 0 0 auto;
  font-size: 0.95rem;
  line-height: 1;
  background: var(--card-bg, var(--bg));
  color: var(--text-muted);
  border: 1px solid var(--border);
  border-radius: 8px;
  width: 2.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.calc-reset-btn:hover {
  color: var(--blue);
  border-color: var(--blue);
}

.calc-reset-btn:active {
  transform: rotate(-45deg);
}

.calc-results {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
  margin-top: 0.75rem;
}

/* "За единицу" убрали (это же значение уже видно в поле "Урон" выше) — остались 3 числа, первое
   (Ожидаемый) растягиваем на всю ширину отдельной строкой, Мин/Макс — парой под ним. */
.calc-result-chip--wide {
  grid-column: 1 / -1;
}

.calc-result-chip {
  background: var(--card-bg, var(--bg));
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.5rem 0.55rem;
  text-align: center;
}

.calc-result-label {
  display: block;
  font-size: 0.875rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: 0.15rem;
}

.calc-result-chip b {
  font-size: 0.95rem;
}

.calc-result-chip--main {
  background: rgba(59, 130, 246, 0.12);
  border-color: rgba(59, 130, 246, 0.35);
}

.calc-result-chip--main b {
  color: var(--blue);
  font-size: 1.1rem;
}

/* Итого по всем предметам — по просьбе владельца в столбик, Ожидаемый первым сверху. */
.calc-total-block {
  border-color: rgba(59, 130, 246, 0.35);
}

.calc-total-results {
  grid-template-columns: 1fr;
}

/* Строки итога вкладки "Таланты" (.calc-talent-result) шли без stat-row (только --wrap-модификатор,
   без базового класса с паддингом/рамкой/фоном/отступом между строками) — визуально "прилипали"
   друг к другу и к полям ввода над ними; base-класс добавлен в разметке (calc_content_partial.php),
   тут только внешний отступ от .calc-results. */
.calc-talent-result {
  margin-top: 0.75rem;
}

.calc-formula {
  margin-top: 0.5rem;
  font-family: monospace;
  font-size: 0.875rem;
  color: var(--text-muted);
  word-break: break-all;
  opacity: 0.8;
}

.calc-eff-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--border);
}

.calc-eff-row:last-child {
  border-bottom: none;
}

.calc-eff-rank {
  font-weight: 500;
  color: var(--text-muted);
  width: 1.4rem;
  flex-shrink: 0;
}

.calc-eff-name {
  flex: 1 1 auto;
  min-width: 0;
}

.calc-eff-name b {
  display: block;
}

.calc-eff-name span {
  font-size: 0.875rem;
  color: var(--text-muted);
}

.calc-eff-value {
  text-align: right;
  flex-shrink: 0;
}

.calc-eff-value b {
  display: block;
  font-size: 1.1rem;
}

.calc-eff-value--1 { background: rgba(34, 197, 94, 0.1); border-radius: 8px; margin: 0 -0.4rem; padding: 0.3rem 0.4rem; }
.calc-eff-value--1 b { color: #22c55e; }
.calc-eff-value--2 b { color: var(--blue); }
.calc-eff-value--3 b { color: #f59e0b; }

.calc-recommend {
  margin-top: 0.6rem;
  padding: 0.6rem 0.7rem;
  border-radius: 8px;
  background: rgba(34, 197, 94, 0.12);
  border: 1px solid rgba(34, 197, 94, 0.3);
  color: #22c55e;
  font-size: 0.875rem;
  font-weight: 500;
}

/* "Ходки" (hodki.php) — карточки бизнеса/вишлиста/vparit: наша цветовая тема (--gold/--bg-card/
   --border), но по образцу карточного вида стороннего pro-prison-bot.ru — иконка+подпись в
   аккуратной плитке, не голый текст в строку. */
.hodki-item-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr));
  gap: 0.5rem;
}

.hodki-item-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.35rem;
  padding: 0.6rem 0.4rem;
  border-radius: 8px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  transition: border-color 0.15s ease, transform 0.15s ease;
  /* .hodki-item-chip рендерится и как <div> (не кликабельно), и как <button> (deluga.php
     календарь) — сброс на случай второго, чтобы не тянуть системный шрифт/рамку кнопки. */
  width: 100%;
  font: inherit;
  color: inherit;
  cursor: pointer;
}

.hodki-item-chip:hover {
  border-color: var(--gold);
}

.hodki-item-icon {
  flex-shrink: 0;
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 8px;
  object-fit: contain;
}

.hodki-item-icon--emoji {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  background: rgba(224, 165, 44, 0.12);
}

.hodki-item-icon--img {
  background: var(--bg);
}

.hodki-item-label {
  font-size: 0.875rem;
  line-height: 1.25;
  color: var(--text-muted);
  overflow-wrap: anywhere;
}

/* Пикер "Добавить в очередь" (модалка вне #page-content) — блок на каждую зону/мастера вместо
   select+одно число (владелец 2026-09-21: было "непонятно, какие шмотки есть или нет"). Внутри
   каждого блока — карточки сетов тату/одежды (.tc-set-card, см. "Тату и одежда"), так что своя
   CSS нужна только для самого блока-обёртки и шапки с кнопками. */
.hodki-pick-list {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

/* Без этого переопределения [hidden] на #hodki-add-prison-fields/#hodki-add-master-fields не
   срабатывает — авторский .hodki-pick-list{display:flex} выше перебивает UA-стиль [hidden]
   независимо от специфичности (тот самый повторяющийся баг проекта, см. память
   tgapp_hidden_vs_display_css_bug) — оба списка (тюрьмы и мастера) показывались одновременно
   при переключении вкладки Зона/Мастер вместо того, чтобы скрывать неактивный. */
.hodki-pick-list[hidden] {
  display: none;
}

.hodki-pick-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.7rem 0.8rem;
}

.hodki-pick-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.hodki-pick-card-title {
  font-weight: 500;
}

.hodki-pick-card-actions {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
}

.hodki-pick-card-actions .button {
  padding: 0.35rem 0.6rem;
  font-size: 0.8125rem;
}

.hodki-pick-set {
  margin-top: 0.5rem;
  padding: 0.5rem 0.6rem;
}

/* Владелец 2026-09-21: "показывай два в ряд" — карточки предметов тут крупнее, чем на "Тату и
   одежда" (показываем название+бонус к урону, не только картинку), 8/3-колоночная .tc-item-grid
   с той страницы была бы слишком тесной. Переопределяем только внутри пикера Ходок, саму
   .tc-item-grid на "Тату и одежда" не трогаем. */
.hodki-pick-item-grid {
  grid-template-columns: repeat(2, 1fr) !important;
}

/* Вне сетки (строка коллекции vparit внутри .queue-row) — картинка вместо .queue-status-icon,
   тот же .hodki-item-icon, но без карточной обвязки чипа. */
.queue-row > .hodki-item-icon {
  margin-right: 0.1rem;
}

/* ====== БАРЫГА ====== */
.baryga-acc {
  border: 1px solid var(--border); border-radius: 8px;
  margin-bottom: 0.75rem; overflow: hidden;
  background: rgba(0,0,0,0.18);
}
.baryga-acc-head {
  width: 100%; display: flex; align-items: center; gap: 0.75rem;
  padding: 0.75rem 1rem; background: transparent; border: 0; color: inherit;
  cursor: pointer; text-align: left; font: inherit;
}
.baryga-acc-head:hover { background: rgba(255,255,255,0.04); }
.baryga-acc-ico { width: 40px; height: 40px; object-fit: contain; flex: 0 0 40px; }
.baryga-acc-title { font-weight: 500; flex: 1; display: flex; align-items: center; gap: 0.5rem; }
.baryga-acc-meta { opacity: 0.75; font-size: 0.875rem; display: inline-flex; align-items: center; gap: 0.3rem; }
.baryga-inline-ico { width: 16px; height: 16px; object-fit: contain; vertical-align: middle; }
.baryga-acc-chev { transition: transform .15s ease; opacity: 0.6; }
.baryga-acc.is-open .baryga-acc-chev { transform: rotate(180deg); }
.baryga-acc-body { display: none; padding: 0.75rem 1rem 1rem; border-top: 1px solid var(--border); }
.baryga-acc.is-open .baryga-acc-body { display: block; }

.baryga-progress {
  position: relative; height: 26px; border-radius: 8px; overflow: hidden;
  background: rgba(0,0,0,0.4); border: 1px solid var(--border); margin-bottom: 0.75rem;
}
.baryga-progress-fill {
  position: absolute; inset: 0 auto 0 0;
  background: linear-gradient(90deg, #d4a52c, #e67e22);
  background-size: cover; background-position: left center;
  transition: width 0.3s ease;
}
.baryga-progress--baul { background-size: 100% 100%; background-repeat: no-repeat; }
.baryga-progress--stew .baryga-progress-fill { background: linear-gradient(90deg, #27ae60, #16a085); }
.baryga-progress-text {
  position: relative; z-index: 1; height: 100%;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.875rem; font-weight: 500; text-shadow: 0 1px 2px rgba(0,0,0,0.7);
}
.baryga-max { color: #f1c40f; }

.baryga-actions-row {
  display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap;
  margin: 0.5rem 0 0.75rem;
}

.baryga-loot-title { font-weight: 500; margin: 0.75rem 0 0.5rem; opacity: 0.85; }
.baryga-loot-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
  gap: 0.5rem;
}
.baryga-loot-tile {
  background: rgba(0,0,0,0.3); border: 1px solid var(--border); border-radius: 8px;
  background-size: cover; background-position: center;
  padding: 0.5rem; text-align: center;
  box-shadow: inset 0 0 0 1px rgba(212,165,44,0.15);
}
.baryga-loot-tile img { width: 48px; height: 48px; object-fit: contain; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.6)); }
.baryga-loot-name { font-size: 0.875rem; opacity: 0.75; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.baryga-loot-amt { font-weight: 500; color: #f1c40f; margin-top: 0.15rem; }

.baryga-tier-title { font-weight: 500; margin: 0.75rem 0 0.4rem; opacity: 0.85; }
.baryga-gift-grid {
  /* max 170px (не 1fr) + justify-content:center — иначе на широком десктопном окне (у .screen
     нет max-width, страница мобильная по задумке) плитки растягивались на всю ширину экрана и
     разъезжались с огромными пустыми полями вместо компактной сетки — то самое "криво смотрятся
     в большом разрешении", на что пожаловался владелец. */
  display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 170px));
  justify-content: center;
  gap: 0.5rem;
}
.baryga-gift-tile {
  background: rgba(0,0,0,0.32); border: 1px solid var(--border); border-radius: 8px;
  padding: 0.6rem; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 0.3rem;
}
.baryga-gift-tile.tier-1 { border-left: 3px solid #7f8c8d; }
.baryga-gift-tile.tier-2 { border-left: 3px solid #3498db; }
.baryga-gift-tile.tier-3 { border-left: 3px solid #d4a52c; box-shadow: 0 0 12px rgba(212,165,44,0.15); }
.baryga-gift-box {
  position: relative; width: 88px; height: 88px;
  background-size: contain; background-repeat: no-repeat; background-position: center;
  display: flex; align-items: center; justify-content: center;
  filter: drop-shadow(0 4px 6px rgba(0,0,0,0.4));
}
.baryga-gift-ico { width: 42px; height: 42px; object-fit: contain; margin-top: 10px; }
.baryga-gift-name { font-size: 0.875rem; opacity: 0.8; }
.baryga-gift-reward { font-weight: 500; color: #2ecc71; }
.baryga-gift-price { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.875rem; }
.baryga-gift-price img { width: 16px; height: 16px; object-fit: contain; }
.baryga-gift-owned { font-size: 0.875rem; opacity: 0.6; }
.baryga-gift-tile .button { width: 100%; padding: 0.35rem 0.5rem; font-size: 0.875rem; }
.baryga-gift-tile .button:disabled { opacity: 0.4; cursor: not-allowed; }

/* Карточка-кнопка выбора "что отправить" на вкладке "Отправить" — тот же .baryga-gift-tile, но
   сама кликабельна (не отдельная кнопка "Купить" внутри), поэтому нужна своя рамка на выбор. */
.baryga-gift-send-pick { cursor: pointer; }
.baryga-gift-send-pick.is-selected { border-color: var(--gold); box-shadow: 0 0 0 2px var(--gold); }

/* Карточка одной посылки во "Входящих"/"Истории" (владелец 2026-09-09: старый .stat-row--wrap
   ужимал всё в одну строку через justify-content:space-between и криво переносился). Теперь
   верхняя строка — аватарка+ник, всё остальное (тир/награда/сообщение/время) — блоками на всю
   ширину под ней; кнопка "Получить" (только во "Входящих") — справа, во всю высоту карточки. */
.baryga-gift-card {
  display: flex; align-items: center; gap: 0.75rem;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px;
  padding: 0.65rem 0.75rem;
}
.baryga-gift-card-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.3rem; }
/* Ник длиннее пары слов раньше переносился и толкал "ID ..." вбок/под низ вразнобой (владелец
   2026-09-15, скриншот "ЦИРК I Талант"). Теперь ник — всегда одна строка с многоточием, ID —
   всегда отдельной строкой под ним; клик по всему блоку (включая аватарку) открывает профиль,
   как и по нику на всех остальных страницах (см. [data-player-id] в modal.js). */
.baryga-gift-card-who { display: flex; align-items: center; gap: 0.5rem; min-width: 0; cursor: pointer; }
.baryga-gift-card-who-info { display: flex; flex-direction: column; min-width: 0; }
.baryga-gift-card-nick { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.baryga-gift-card-who-info .leader-id { margin-left: 0; }
.baryga-gift-card-reward { display: flex; align-items: center; gap: 0.3rem; font-size: 0.875rem; flex-wrap: wrap; }
.baryga-gift-card-msg { font-size: 0.8125rem; font-style: italic; opacity: 0.85; }
.baryga-gift-card-time { font-size: 0.75rem; opacity: 0.6; }
.baryga-gift-claim-btn { flex-shrink: 0; padding: 0.45rem 0.9rem; font-size: 0.875rem; }

/* Карточки тиров в объединённой вкладке "Отправить" (магазин + отправка, владелец 2026-09-09) —
   переиспользуют общий .baryga-acc аккордеон (шапка/тело/шеврон уже есть в CSS выше), тут только
   содержимое тела: чипы выбора типа посылки, строка выбранного типа и покупка со степпером. */
.baryga-shop-kind-row {
  display: flex; gap: 0.4rem; overflow-x: auto; padding-bottom: 0.2rem; margin-bottom: 0.5rem;
}
.baryga-shop-kind-chip {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 0.3rem;
  background: var(--bg); border: 1px solid var(--border); border-radius: 999px;
  padding: 0.35rem 0.65rem; font-size: 0.8125rem; color: var(--text); white-space: nowrap;
  cursor: pointer;
}
.baryga-shop-kind-chip img { width: 18px; height: 18px; object-fit: contain; }
.baryga-shop-kind-chip.is-selected { border-color: var(--gold); color: var(--gold-strong); background: rgba(224,165,44,0.12); }
.baryga-shop-selected-row {
  display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
  font-size: 0.9rem; padding: 0.4rem 0; border-top: 1px solid var(--border);
}
.baryga-shop-selected-info { display: flex; align-items: center; gap: 0.35rem; }
.baryga-shop-selected-owned { opacity: 0.6; font-size: 0.875rem; }
.baryga-shop-buy-row { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin-top: 0.4rem; }
.baryga-shop-qty-stepper { width: auto; }
.baryga-shop-buy-btn { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.4rem 0.9rem; }

.baryga-stats-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 0.5rem; margin-top: 0.5rem;
}
.baryga-stat-tile {
  background: rgba(0,0,0,0.3); border: 1px solid var(--border); border-radius: 8px;
  padding: 0.5rem 0.75rem;
  display: flex; align-items: center; justify-content: center; gap: 0.6rem;
  text-align: center;
}
.baryga-stat-tile img { width: 32px; height: 32px; object-fit: contain; flex: 0 0 32px; }
.baryga-stat-tile span { display: block; font-size: 0.875rem; opacity: 0.7; }
.baryga-stat-tile b { font-size: 1.15rem; color: #f1c40f; }

/* "Туалетка" (owner 2026-09-02) — карточка-строка, не аккордеон: нечего сворачивать, поэтому
   .baryga-acc-head тут не кнопка-тоггл, а просто строка (курсор обычный, без hover-подсветки). */
.baryga-toiletpaper-row { cursor: default; }
.baryga-toiletpaper-row:hover { background: transparent; }
.baryga-toiletpaper-toggle {
  width: auto; flex: 0 0 auto;
  background: transparent; border: 0; padding: 0; cursor: pointer;
}

/* Уровень баула — золотой бейдж в шапке аккордеона (владелец: "сверху уровень баула как у нас",
   картинка-референс показывала такой же бейдж уровня). */
.baryga-level-badge {
  flex-shrink: 0;
  background: var(--gold-strong); color: var(--bg);
  font-weight: 500; font-size: 0.875rem;
  padding: 0.2rem 0.6rem; border-radius: 999px;
}

/* Вложенный блок "Стата посылок" внутри Тушёнки — DB-персистентная статистика дропов шмоток
   (baryga_stew_stats_load()), отдельно от старой ачивочной сетки выше. Переиспользует
   .baryga-stats-grid/.baryga-stat-tile — тайлы тут без иконки (необязательна в разметке тайла). */
.baryga-substats {
  margin-top: 0.75rem; padding-top: 0.75rem; border-top: 1px solid var(--border);
}
.baryga-substats-title {
  display: flex; align-items: center; gap: 0.4rem;
  font-weight: 500; margin-bottom: 0.4rem;
}

/* Форма настроек автосбора баула — пока только форма+сохранение, без реальной автоматики
   (см. комментарий над #baryga-baul-auto-form в baryga_content_partial.php). */
.baryga-baul-auto-row {
  display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
  margin: 0.5rem 0;
}
.baryga-baul-auto-row select {
  background: var(--bg); color: var(--text); border: none;
  border-radius: 8px; padding: 0.4rem 0.6rem; font: inherit;
}
.baryga-baul-auto-thresholds {
  margin-top: 0.5rem; padding-top: 0.5rem; border-top: 1px solid var(--border);
}
.baryga-baul-auto-thresholds-title { font-weight: 500; margin-bottom: 0.2rem; }
.baryga-baul-auto-threshold-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 0.5rem;
}
.baryga-baul-auto-threshold {
  display: flex; align-items: center; gap: 0.4rem;
  background: var(--bg); border-radius: 8px;
  padding: 0.3rem 0.5rem;
}
.baryga-baul-auto-threshold img { width: 20px; height: 20px; object-fit: contain; flex: 0 0 20px; }
.baryga-baul-auto-threshold input {
  width: 100%; min-width: 0; border: none; background: transparent; color: var(--text); font: inherit;
}
.baryga-baul-auto-threshold input:focus { outline: none; }

/* --- Боссы (bosses.php): компактная раскладка на телефоне/планшете — вкладка растягивалась
   на ~4000px в один узкий столбец (жалоба владельца, экраны от 320px). Селекторы сидят на
   боссовых обёртках (.boss-battle-card/.weapon-card/#tab-autoqueue/#boss-presets-modal) —
   .queue-row, .queue-icon-btn, .toggle-row-form, .weapon-card-head и т.п. переиспользуются
   на других вкладках (Делюги/Лагеря/Ходки/Зарубы/Нычки/Калькулятор), их трогать нельзя. */

/* От 700px и уже — имя босса/режим/"Сегодня убито" занимают всю ширину отдельной строкой, а
   "Мой урон"/"До конца" встают ниже в 2 колонки. Плоская раскладка "все 3 плитки по 32%"
   (прошлая правка) не оставляла места для длинного имени+режима+счётчика на телефоне. */
@media (max-width: 700px) {
  .battle-stat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .battle-stat-tile--boss {
    grid-column: 1 / -1;
  }
}

@media (max-width: 480px) {
  .boss-battle-card {
    padding: 0.9rem 0.75rem;
  }

  .boss-battle-card .panel--fight,
  .boss-battle-card .panel--leaderboard {
    padding: 0.7rem 0.65rem;
  }

  .boss-battle-card .panel-title {
    font-size: 0.92rem;
  }

  .boss-battle-card .melee-label {
    font-size: 0.875rem;
    margin: 0.55rem 0 0.3rem;
  }

  /* Раскладка (имя на всю ширину + урон/таймер в 2 колонки) уже задана в @media(700px) выше —
     здесь только чуть теснее отступы под совсем узкий экран. */
  .battle-stat-grid {
    gap: 0.35rem;
    margin: 0.6rem 0;
  }

  .battle-stat-tile {
    padding: 0.45rem 0.5rem;
  }

  .battle-stat-value {
    font-size: 0.95rem;
    gap: 0.35rem;
  }

  /* Чипы рукопашных ударов раньше вставали по одному в ряд (flex-basis 7rem не оставлял места
     даже для второго внутри вложенной панели) — 4 удара растягивались на 4 полных ряда. */
  .melee-strip {
    gap: 0.35rem;
  }

  .melee-chip {
    flex-basis: 4.4rem;
    padding: 0.35rem;
    gap: 0.15rem;
  }

  .melee-chip .weapon-icon {
    width: 26px;
    height: 26px;
  }

  .melee-damage {
    font-size: 0.875rem;
  }

  .melee-cooldown {
    font-size: 0.875rem;
  }

  .weapon-cards {
    gap: 0.45rem;
  }

  .weapon-card {
    padding: 0.55rem 0.6rem;
  }

  .weapon-card .weapon-card-head {
    gap: 0.4rem;
    margin-bottom: 0.35rem;
  }

  .weapon-card .weapon-icon {
    width: 26px;
    height: 26px;
  }

  .weapon-card .weapon-name {
    font-size: 0.875rem;
  }

  .weapon-card .weapon-owned {
    font-size: 0.875rem;
  }

  .weapon-section-label {
    margin-top: 0.4rem;
  }

  /* "1000" (5-я кнопка кратности удара) не помещалась в ряд с 1/10/50/100 и переносилась
     отдельной строкой ради одной кнопки — меньшие паддинг/шрифт укладывают все пять в одну. */
  .weapon-multi-row {
    gap: 0.25rem;
    margin-bottom: 0.35rem;
  }

  .weapon-multi-btn {
    padding: 0.22rem 0.45rem;
    font-size: 0.875rem;
  }

  .weapon-repeat-row {
    gap: 0.4rem;
    margin-bottom: 0.4rem;
  }

  .weapon-repeat-stepper .stepper-btn {
    width: 1.6rem;
    height: 1.6rem;
    font-size: 0.875rem;
  }

  .weapon-repeat-input {
    width: 2.5rem;
    font-size: 0.875rem;
  }

  .weapon-repeat-hint {
    font-size: 0.875rem;
  }

  .weapon-strike-btn {
    padding: 0.55rem 0.9rem;
    font-size: 0.875rem;
  }

  .weapon-damage-range {
    font-size: 0.875rem;
    margin-top: 0.3rem;
  }

  .deal-damage-row {
    margin-top: 0.7rem;
    gap: 0.45rem;
  }

  .deal-damage-box {
    padding: 0.5rem 0.6rem;
  }

  .deal-damage-box .button {
    padding: 0.5rem 0.9rem;
    font-size: 0.875rem;
  }

  .boss-battle-card .refresh-btn {
    padding: 0.4rem 0.6rem;
  }

  .leaderboard-rank {
    min-width: 1.3rem;
    font-size: 0.875rem;
  }

  .leaderboard-avatar {
    width: 1.4rem;
    height: 1.4rem;
  }

  .leaderboard-name,
  .leaderboard-damage {
    font-size: 0.875rem;
  }

  /* Вкладка "Таланты" — самый длинный список на странице (39 талантов, ~5400px на 320px).
     Плотнее паддинги/шрифты/иконка ужимают среднюю карточку заметно без потери читаемости. */
  .buff-list, .talent-list {
    gap: 0.4rem;
  }

  .buff-item, .talent-item {
    padding: 0.5rem 0.6rem;
    gap: 0.45rem;
  }

  .buff-icon, .talent-icon {
    width: 2rem;
    height: 2rem;
  }

  .talent-toolbar-actions .button {
    font-size: 0.875rem;
    padding: 0.4rem 0.6rem;
  }

  .buff-title, .talent-title {
    font-size: 0.875rem;
  }

  .buff-desc, .talent-desc {
    font-size: 0.875rem;
  }

  .talent-level {
    font-size: 0.875rem;
  }

  .buff-activate-btn, .talent-upgrade-btn {
    font-size: 0.875rem;
    padding: 0.4rem 0.6rem;
    margin-top: 0.3rem;
  }


  #tab-autoqueue .queue-header-info {
    flex: 1 1 100%;
  }

  #tab-autoqueue .queue-header-actions .button {
    padding: 0.45rem 0.7rem;
    font-size: 0.9rem;
  }

  #tab-autoqueue .toggle-row-form {
    margin-bottom: 0.4rem;
  }

  #tab-autoqueue .queue-quick-row {
    gap: 0.35rem;
  }

  #tab-autoqueue .queue-row,
  #boss-presets-modal .queue-row {
    padding: 0.45rem 0.55rem;
    gap: 0.4rem;
  }

  /* Кнопки строки очереди (✏️˄˅🗑 — до 4 штук) были прямыми флекс-соседями заголовка и не
     сжимались, оставляя названию босса ~45px из 233px строки ("Ст…" вместо "Старшой"). Теперь
     они сгруппированы в .queue-row-actions (см. boss_content_partial.php) — новый класс,
     существует только на этой странице, поэтому переносить его на отдельную строку тут можно
     без риска для .queue-row на других вкладках. */
  #tab-autoqueue .queue-row,
  #boss-presets-modal .queue-row {
    flex-wrap: wrap;
  }

  .queue-row-actions {
    flex: 1 1 100%;
    justify-content: flex-end;
    gap: 0.35rem;
    margin-top: 0.3rem;
  }

  .queue-row-actions .queue-icon-btn {
    width: 1.6rem;
    height: 1.6rem;
    font-size: 0.875rem;
  }

  /* Крупнее, чем остальные иконки-кнопки строки — единственная зона, гарантированно не
     конфликтующая со скроллом (touch-action:none), поэтому целиться в неё пальцем должно быть
     проще, а не так же тесно, как в ✏️˄˅🗑. */
  .queue-row-drag-handle {
    width: 2.2rem;
    height: 2.2rem;
  }

  .queue-row-drag-handle .icon {
    width: 1.6em;
    height: 1.6em;
  }

  #tab-autoqueue .queue-actions {
    gap: 0.4rem;
  }

  #tab-autoqueue .queue-actions .button {
    padding: 0.5rem 0.8rem;
    font-size: 0.875rem;
  }
}

/* Настройки (settings.php) — выбор акцентного цвета кружками-образцами. */
.settings-swatch-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
}

.settings-swatch {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 2px solid transparent;
  padding: 0;
  cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.25);
  overflow: hidden;
}

.settings-swatch.active {
  border-color: var(--text);
}

.settings-swatch--custom {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: conic-gradient(red, yellow, lime, cyan, blue, magenta, red);
}

.settings-swatch--custom input[type="color"] {
  width: 100%;
  height: 100%;
  border: none;
  padding: 0;
  cursor: pointer;
  background: none;
  opacity: 0;
}

/* "Заныканный шмот" (ЗШ) — сетка из 12 слотов экипировки на вкладку, каждый ячейка либо
   заблокирована (замок), либо содержит превью + <select> выбора предмета из инвентаря. */
.zsh-slot-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0.5rem;
}

@media (max-width: 768px) {
  .zsh-slot-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.zsh-slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  padding: 0.4rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
}

.zsh-slot--locked {
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  opacity: 0.85;
}

.zsh-slot--picking {
  border-color: var(--gold);
  box-shadow: 0 0 0 2px var(--gold) inset;
  cursor: pointer;
}

.zsh-slot-index {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--text-muted);
}

.zsh-slot-hint {
  font-size: 0.75rem;
  color: var(--text-muted);
}

.zsh-slot-thumb {
  width: 36px;
  height: 36px;
  object-fit: cover;
  border-radius: 6px;
  background: var(--bg-card);
}

.zsh-slot-thumb--empty {
  border: 1px dashed var(--border);
}

.zsh-slot-select {
  width: 100%;
  font-size: 0.75rem;
}

.zsh-slot-current {
  font-size: 0.7rem;
  font-weight: 500;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

.zsh-slot-current--empty {
  color: var(--text-muted);
  font-weight: 400;
}

.zsh-unlock-btn {
  padding: 0.2rem 0.5rem;
}

.zsh-pick-banner {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  padding: 0.5rem 0.7rem;
  margin-bottom: 0.9rem;
  background: var(--bg-card);
  border: 1px solid var(--gold);
  border-radius: 8px;
  font-weight: 500;
}

/* .zsh-pick-banner{display:flex} бьёт стандартный UA-стиль [hidden]{display:none} — тот же
   баг, что уже был на других страницах (см. tgapp_hidden_vs_display_css_bug). */
.zsh-pick-banner[hidden] {
  display: none;
}

/* Каталог предметов ЗШ — карточки заметно "тяжелее" (превью+бонусы+компоненты крафта+кнопка),
   чем в "Тату и одежде" (.tc-item-grid, 8 колонок), поэтому своя сетка — но само превью маленькое
   (владелец 2026-09-21: большие квадратные картинки "занимают кучу места"), карточка растёт за
   счёт текста/кнопки, не картинки. */
.zsh-item-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
}

@media (max-width: 768px) {
  .zsh-item-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.zsh-item-card {
  flex-direction: row;
  align-items: flex-start;
}

.zsh-item-card .tc-item-thumb-wrap {
  flex: 0 0 auto;
  width: 44px;
  aspect-ratio: unset;
  height: 44px;
  margin: 0.4rem 0 0.4rem 0.4rem;
  border-radius: 6px;
}

.zsh-item-card .tc-item-body {
  gap: 0.25rem;
  padding: 0.4rem;
  flex: 1 1 auto;
  min-width: 0;
}

.zsh-item-qty {
  background: var(--gold);
  color: #1b0f0a;
  width: auto;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  font-size: 0.7rem;
  top: 1px;
  right: 1px;
}

.zsh-craft-need {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  margin: 0.2rem 0;
  font-size: 0.8rem;
}

.zsh-craft-need-title {
  color: var(--text-muted);
  font-weight: 500;
}

.zsh-craft-need-row--short {
  color: #e74c3c;
}

.zsh-log {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  margin-bottom: 0.9rem;
}

.zsh-log-row {
  padding: 0.4rem 0.6rem;
  border-radius: 8px;
  background: var(--bg);
  border: 1px solid var(--border);
  font-size: 0.8125rem;
}

.zsh-log-row--error {
  border-color: #e74c3c;
  color: #e74c3c;
}

.zsh-slot-bonuses {
  display: flex;
  flex-wrap: wrap;
  gap: 0.15rem;
  justify-content: center;
}

.zsh-build-summary {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  font-size: 0.85rem;
}

.zsh-build-summary .tc-bonus-chip {
  margin-left: 0.3rem;
}

.zsh-shop-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  margin-bottom: 0.7rem;
}

.zsh-shop-search {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0.4rem 0.6rem;
  background: var(--bg);
  border: none;
  border-radius: 8px;
  color: var(--text);
  font-size: 0.85rem;
}

.zsh-shop-filter {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.8rem;
  color: var(--text-muted);
  white-space: nowrap;
}

/* "Магазин" (докупка ЗШ у барыги) — ручная покупка с количеством + резерв бумаги для фоновой
   докупки, см. stashgear_content_partial.php. */
.zsh-shop-buy-row {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 0.7rem;
}

.zsh-shop-qty-input {
  width: 4.5rem;
  flex-shrink: 0;
  padding: 0.4rem 0.6rem;
  background: var(--bg);
  border: none;
  border-radius: 8px;
  color: var(--text);
  font-size: 0.9rem;
  text-align: center;
}

.zsh-shop-buy-row .button {
  flex: 1 1 auto;
}

.zsh-shop-reserve-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.zsh-shop-reserve-row input {
  width: 6rem;
  flex-shrink: 0;
  padding: 0.4rem 0.6rem;
  background: var(--bg);
  border: none;
  border-radius: 8px;
  color: var(--text);
  font-size: 0.9rem;
  text-align: center;
}

.zsh-shop-subtitle {
  margin: 0.8rem 0 0.5rem;
  font-size: 0.9rem;
}

.zsh-shop-subtitle:first-child {
  margin-top: 0;
}

.zsh-craft-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.zsh-craft-list .zsh-item-card {
  width: 100%;
}

.zsh-spin-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.7rem;
}

/* "Статистика по боссам" (profile.php, под "Общак") — компактный список раскрывающихся карточек
   по 3 категориям, тот же collapse-приём, что и у ачивок/тату-сетов выше. Владелец прямо просил
   жёлтую рамку НА ВСЮ карточку (не левый акцент, как у .tc-set-card/.ach-group) для босса, у
   которого собраны все сеты по всем боевым режимам сразу. */
.boss-stat-list {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-top: 0.5rem;
}

.boss-stat-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.5rem 0.6rem;
}

.boss-stat-card--done {
  border-color: var(--gold);
}

.boss-stat-head {
  align-items: flex-start;
  gap: 0.5rem;
}

.boss-stat-main {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  text-align: left;
  min-width: 0;
}

.boss-stat-name-row {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.boss-stat-name {
  font-weight: 500;
  font-size: 0.875rem;
}

.boss-stat-solo {
  font-size: 0.75rem;
  color: var(--text-muted);
}

.boss-stat-solo--yes b {
  color: #2ecc71;
}

.boss-stat-combo-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.boss-stat-combo-item {
  display: inline-flex;
  align-items: center;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--text-muted);
}

.boss-stat-side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.2rem;
  font-size: 0.75rem;
  color: var(--text-muted);
  white-space: nowrap;
  flex-shrink: 0;
}

.boss-stat-body {
  margin-top: 0.6rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.boss-stat-body.collapsed {
  display: none;
}

.boss-stat-set-card {
  padding: 0.6rem 0.65rem;
}

.boss-stat-mode-badge {
  font-size: 0.7rem;
  padding: 0.1rem 0.5rem;
}

/* Колонки наследуются от базового .tc-item-grid (8 на десктопе) — владелец явно попросил те же
   8/4, а не свою уменьшенную сетку; переопределяем только мобильную точку (768px и меньше), где
   у .tc-item-grid 3 колонки, а тут нужно 4. */
@media (max-width: 768px) {
  .boss-stat-item-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* "Топ по урону" (#weekly-top-modal, клик по .rating-card) — кнопка "Добавить всех в друзья" +
   счётчики (красный "уже в друзьях" / зелёный "заявка отправлена", владелец: именно эти два цвета,
   третьей корзины не просил). */
.wt-add-all-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  margin: 0.6rem 0;
}

.wt-count {
  font-size: 0.8125rem;
  font-weight: 500;
}

.wt-count--red {
  color: #e74c3c;
}

.wt-count--green {
  color: #2ecc71;
}

.wt-add-all-status {
  margin-top: -0.3rem;
}

/* .leaderboard-list по умолчанию рассчитан на маленькую встроенную панель (max-height:16rem, см.
   "Топ по урону" на бое с боссом) — тут список на 100 строк внутри уже прокручиваемой .modal-body,
   с фиксированной высотой получилась бы неудобная вложенная мини-прокрутка. */
#wt-leaderboard-list {
  max-height: none;
  overflow: visible;
}