/* ===================================================================
   public/css/style.css — оформление игры «ГЕНЕРАЛЫ»
   Тёмная военная тема: хаки и тёмная зелень на почти чёрном фоне,
   золото для валюты, оранжевые кнопки действий. Мобильная вёрстка,
   колонка до 520px по образцу оригинальной игры.
   =================================================================== */

:root {
  --bg: #0a0d08;            /* фон страницы */
  --panel: #141a0f;         /* фон карточек */
  --panel-2: #1b2314;       /* фон кнопок меню и полей */
  --border: #2c3a1d;        /* основная рамка */
  --border-dim: #222d16;
  --text: #cdd9b4;          /* основной текст, светлый хаки */
  --dim: #7e8b64;           /* приглушённый текст */
  --green: #9ec25b;         /* акцентный зелёный (заголовки, имена) */
  --money: #86d34f;         /* доллары */
  --gold: #e9c75c;          /* золото */
  --hp: #d9544a;            /* здоровье */
  --en: #5fa8dc;            /* энергия */
  --am: #d9a546;            /* боеприпасы */
  --red: #e06c5a;           /* ошибки, урон */
  --orange-1: #c07a16;      /* кнопка действия, верх градиента */
  --orange: var(--orange-1);   /* алиас для var(--orange) — используется в 21 местах JS, ранее была НЕ определена */
  --orange-2: #8e5a0d;      /* кнопка действия, низ градиента */
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body { height: 100%; }

body {
  background: var(--bg);
  /* лёгкая «камуфляжная» текстура из градиентов, без картинок */
  background-image:
    radial-gradient(ellipse 80% 50% at 50% -10%, rgba(70, 90, 40, .18), transparent),
    repeating-linear-gradient(45deg, rgba(255,255,255,.012) 0 2px, transparent 2px 6px);
  color: var(--text);
  font-family: 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-size: 15px;
  line-height: 1.45;
  -webkit-text-size-adjust: 100%;
}

/* Центральная колонка как у мобильной игры */
#wrap { max-width: 520px; margin: 0 auto; min-height: 100vh; background: rgba(8, 11, 6, .6); border-left: 1px solid var(--border-dim); border-right: 1px solid var(--border-dim); }

/* ---------- ПК-РАЗМЕТКА ----------
   На широких экранах расширяем контейнер, увеличиваем шапку и
   ставим меню в 4 колонки — пространство по бокам используется. */
@media (min-width: 900px) {
  #wrap {
    max-width: 920px;
    border-left: 1px solid var(--border-dim);
    border-right: 1px solid var(--border-dim);
    box-shadow: 0 0 40px rgba(0,0,0,.5);
  }
  #header { padding: 16px 26px; }
  .logo { font-size: 23px; letter-spacing: .28em; }
  #content { padding: 22px 26px; }
  /* Главное меню: 3 кнопки в ряд */
  .menu-grid { grid-template-columns: repeat(3, 1fr); gap: 12px; }
  .menu-btn { font-size: 14px; min-height: 60px; padding: 10px 14px; }
  .card { padding: 15px 17px; }
  .name { font-size: 15px; }
  .btn { padding: 11px 20px; font-size: 14px; }
  .btn-orange { padding: 12px 24px; font-size: 15px; }
  .res-row { padding: 8px 0; font-size: 14px; }
  .stat-row { padding: 6px 0; }
}
@media (min-width: 1300px) {
  #wrap { max-width: 1040px; }
  .menu-grid { grid-template-columns: repeat(4, 1fr); }
  #content { padding: 26px 32px; }
}

a { color: var(--green); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---------- ШАПКА ---------- */
#header { border-bottom: 2px solid var(--border); background: linear-gradient(#121810, #0c100a); position: sticky; top: 0; z-index: 20; }

.logo {
  text-align: center; padding: 10px 6px 6px;
  font-weight: 800; font-size: clamp(15px, 5vw, 22px); letter-spacing: .14em; text-transform: uppercase; white-space: nowrap;
  color: #b9cb78; cursor: pointer; user-select: none;
  text-shadow: 0 2px 0 #000, 0 0 14px rgba(150, 180, 70, .25);
}
.logo .star { color: var(--gold); font-size: 16px; letter-spacing: 0; }

.res-row, .stat-row {
  display: flex; border-top: 1px solid var(--border-dim);
}
.res-row > div, .stat-row > div {
  flex: 1; padding: 6px 4px; text-align: center; font-size: 13px;
  border-right: 1px solid var(--border-dim); white-space: nowrap; overflow: hidden;
}
.res-row > div:last-child, .stat-row > div:last-child { border-right: none; }
.res-row .clickable, .stat-row .clickable { cursor: pointer; }
.money { color: var(--money); font-weight: 700; }
.gold { color: var(--gold); font-weight: 700; }
.lvl { color: #f3e36a; font-weight: 700; }
.timer { color: var(--dim); font-size: 11px; }

.stat-hp { color: var(--hp); font-weight: 700; }
.stat-en { color: var(--en); font-weight: 700; }
.stat-am { color: var(--am); font-weight: 700; }

/* ---------- ОСНОВНОЕ СОДЕРЖИМОЕ ---------- */
#content { padding: 10px 10px 40px; }

.title {
  text-align: center; text-transform: uppercase; letter-spacing: .25em;
  color: #d7e2b8; font-weight: 700; font-size: 15px; margin: 12px 0 10px;
}

.card {
  background: var(--panel); border: 1px solid var(--border); border-radius: 6px;
  padding: 10px 12px; margin-bottom: 10px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.03), 0 2px 6px rgba(0,0,0,.35);
}
.card.err { border-color: #5a2c22; color: var(--red); }

.muted { color: var(--dim); font-size: 13px; }
.small { font-size: 12px; }
.center { text-align: center; }
.mt { margin-top: 8px; }
.hr { border: none; border-top: 1px solid var(--border-dim); margin: 8px 0; }

/* Блок Майора (сюжет/обучение) */
.major { display: flex; gap: 10px; align-items: flex-start; }
.major .face {
  flex: 0 0 54px; height: 54px; border: 1px solid var(--border); border-radius: 6px;
  background: var(--panel-2); font-size: 34px; display: flex; align-items: center; justify-content: center;
}
.major b { color: var(--green); }
.major .story { font-style: italic; color: #b9c69b; }

/* ---------- МЕНЮ ГЛАВНОЙ ---------- */
.menu-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 10px 0; }
.menu-btn {
  display: flex; align-items: center; gap: 9px; min-height: 52px; padding: 8px 10px;
  background: linear-gradient(#1d2614, #161e0f);
  border: 1px solid var(--border); border-radius: 6px;
  color: #c4d49a; font-weight: 700; font-size: 13px; letter-spacing: .06em; text-transform: uppercase;
  cursor: pointer; user-select: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}
.menu-btn:hover { background: linear-gradient(#232e18, #1a2312); text-decoration: none; }
.menu-btn .ic { font-size: 20px; }
/* Картинки-иконки меню: фиксированный размер, чтобы не растягивались */
.menu-btn img.ic-menu { width: 40px; height: 40px; object-fit: contain; flex-shrink: 0;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.5)); }
.menu-btn.small-row img.ic-menu { width: 28px; height: 28px; }
.menu-btn.small-row { min-height: 42px; text-transform: none; font-weight: 600; color: var(--text); }
.menu-btn .badge { margin-left: auto; }

.badge {
  background: var(--orange-1); color: #1a1206; font-size: 11px; font-weight: 800;
  border-radius: 9px; padding: 1px 7px;
}
.badge.green { background: var(--green); }
/* Состояния наборов в панели: «срок вышел», «разобран», «ещё не начался» */
.badge.red { background: var(--red); color: #fff; }
.badge.gold { background: var(--gold); color: #1a1206; }
/* Тираж набора разобран — на карточке у игрока */
.offer-soldout { color: var(--red); font-weight: 700; }

/* ---------- КНОПКИ ---------- */
.btn {
  display: inline-block; width: 100%; text-align: center; padding: 9px 12px;
  background: linear-gradient(#222c16, #18200f);
  border: 1px solid var(--border); border-radius: 5px;
  color: var(--text); font-size: 14px; font-weight: 700; cursor: pointer; user-select: none;
}
.btn:hover { filter: brightness(1.12); }
.btn:active { transform: translateY(1px); }
.btn[disabled] { opacity: .45; cursor: default; }

.btn-orange {
  background: linear-gradient(var(--orange-1), var(--orange-2));
  border-color: #5e3c08; color: #fff; text-shadow: 0 1px 0 rgba(0,0,0,.45);
}
.btn-green { background: linear-gradient(#4f7d27, #3a5e1b); border-color: #2d4a13; color: #f1f7e2; }
.btn-red { background: linear-gradient(#8e3326, #6b251b); border-color: #511c14; color: #ffe3dc; }
.btn-inline { width: auto; padding: 7px 14px; }
/* Кнопка входа через ВКонтакте. Синий здесь не от стиля игры, а от
   узнаваемости: кнопку входа люди ищут глазами по цвету сервиса. */
.btn-vk { background: linear-gradient(#5b82b4, #4a76a8); border-color: #38597f; color: #fff; }

/* Кабинет игрока в инструментах «Дозора»: кто ещё на этом логине */
.pf-cabinet { margin: 6px 0; }
.pf-cab-head { font-size: 12px; font-weight: 700; margin-bottom: 3px; }
.pf-cab-row { display: flex; align-items: center; gap: 6px; font-size: 12px; padding: 2px 0; }
.pf-cab-row.is-cur { color: var(--gold); }
.pf-cab-row a { color: inherit; }

/* ── Событие «Военный караван» ─────────────────────────────────────
   Раскладка по описанию владельца: карточка врага слева вверху,
   справа во всю оставшуюся ширину поле фраз, под ним полоса здоровья
   противника. Высота правой колонки привязана к карточке — текст
   внутри прокручивается, но за её границы не выходит. */
/* Сцена: заставка до начала, итог — после боя */
.cv-scene { position: relative; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; margin-bottom: 10px; line-height: 0; }
.cv-scene img { width: 100%; height: auto; display: block; }
.cv-scene-cap {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 22px 12px 10px;
  font-size: 17px; font-weight: 700; text-align: center; line-height: 1.2;
  background: linear-gradient(rgba(6,8,4,0), rgba(6,8,4,.9));
}
.cv-scene-win .cv-scene-cap { color: var(--gold); }
.cv-scene-lose .cv-scene-cap { color: #d98274; }

/* Кнопки боя: удар и смена цели рядом, в одну строку */
.cv-actions { display: flex; gap: 8px; margin: 8px 0; }
.cv-actions .btn { flex: 1 1 0; }

.cv-top { display: flex; gap: 10px; align-items: stretch; height: 212px; }
.cv-card {
  flex: 0 0 168px; position: relative; overflow: hidden;
  border: 1px solid var(--border); border-radius: 8px;
  background: #0a0d07; line-height: 0;
}
.cv-portrait { width: 100%; height: 210px; object-fit: cover; object-position: center top; display: block; }
/* Подпись поверх нижнего края портрета: отдельной строкой она съела бы
   высоту, к которой привязана вся правая колонка */
.cv-card-cap {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 14px 8px 6px; line-height: 1.2;
  background: linear-gradient(rgba(6,8,4,0), rgba(6,8,4,.92));
}
.cv-card-name { font-size: 14px; font-weight: 700; color: var(--gold); }
.cv-card-role { font-size: 11px; color: #a9b394; }
.cv-card-empty { padding: 90px 8px; text-align: center; color: #8d977c; font-size: 12px; line-height: 1.3; }
/* Роль подсвечивается рамкой: офицер и командование видны сразу */
.cv-role-officer { border-color: #9a7b2e; }
.cv-role-boss { border-color: #a33a2a; box-shadow: 0 0 0 1px rgba(163,58,42,.35) inset; }

.cv-right { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.cv-say {
  flex: 1 1 auto; min-height: 0; overflow-y: auto;
  border: 1px solid var(--border); border-radius: 8px;
  background: rgba(233,199,92,.05); padding: 8px 10px;
}
.cv-say-line { font-size: 13px; line-height: 1.35; margin: 0 0 4px; }
.cv-say-line:last-child { margin-bottom: 0; }

.cv-hp { border: 1px solid var(--border); border-radius: 8px; padding: 6px 8px; background: #0e1209; }
.cv-hp-head { display: flex; justify-content: space-between; font-size: 12px; margin-bottom: 4px; }
.cv-bar { height: 12px; border-radius: 6px; background: #1b2113; overflow: hidden; }
.cv-bar-fill { height: 100%; transition: width .3s; }
.cv-bar-foe .cv-bar-fill { background: linear-gradient(#b0432f, #7c2b1e); }
.cv-bar-me .cv-bar-fill { background: linear-gradient(#5f8f34, #3f6321); }
/* Свободное место между карточкой и полосой игрока — так и просил */
.cv-gap { height: 10px; }
.cv-hp-me { margin-bottom: 8px; }

.cv-total { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; margin-bottom: 8px; font-size: 13px; }
.cv-total b { color: var(--gold); font-size: 15px; }

.cv-lists { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 8px; }
.cv-list { border: 1px solid var(--border); border-radius: 8px; background: #0e1209; padding: 6px 8px; }
.cv-list-head { font-size: 12px; font-weight: 700; margin-bottom: 4px; }
.cv-list-body { display: flex; flex-wrap: wrap; gap: 4px 8px; max-height: 92px; overflow-y: auto; }
.cv-name { font-size: 12px; white-space: nowrap; }
.cv-dead { color: #6b7360; text-decoration: line-through; }
.cv-cur { color: var(--gold); font-weight: 700; }
/* По кому можно ударить — строка нажимается; заблокированный босс
   остаётся видимым, но с замком, чтобы правило было понятно без чтения */
.cv-pick { cursor: pointer; text-decoration: underline dotted; text-underline-offset: 2px; }
.cv-pick:hover { color: var(--gold); }
/* Техника на поле отличается цветом от живых бойцов: игрок должен
   с одного взгляда видеть, где мины с запалом, а где сама колонна */
.cv-name.cv-role-mine { color: #d98274; }
.cv-name.cv-role-drone { color: #8fb3d9; }
.cv-name.cv-role-turret { color: #c9a66b; }
.cv-name.cv-role-wall { color: #b0b0b0; }
.cv-fuse { color: #ff8a6a; }
/* Тревога о минах: она перебивает всё остальное в подсказке, потому
   что запал короткий, а взрыв бьёт всех разом */
.cv-say-mine {
  color: #ffb199; font-weight: 600;
  border-left: 3px solid #b0432f; padding-left: 7px;
}
/* Газ химика: здоровье падает само, и без подписи игрок не понимает,
   откуда убыль */
.cv-say-gas {
  color: #b7e08a; font-weight: 600;
  border-left: 3px solid #5f8f34; padding-left: 7px;
}
/* Стена: строка в подсказке, а не отдельная табличка над кнопками.
   Табличка появлялась и пропадала каждые полминуты и каждый раз
   сдвигала «Атаковать» — игрок бил мимо. */
.cv-say-wall {
  color: #d9b08c; font-weight: 600;
  border-left: 3px solid #7a4a3a; padding-left: 7px;
}
.cv-coin { width: 14px; height: 14px; vertical-align: -2px; }
/* ═══ Награда за караван ═══
   Строкой «получено золота 240» игрок не понимает, за что заплатили и
   что упало на склад. Поэтому своя награда разобрана на источники и
   показана картинками из самой игры. */
.cvr-card { border-color: var(--gold); background: rgba(233,199,92,.05); }
.cvr-head { font-size: 16px; font-weight: 700; color: var(--gold); margin-bottom: 8px; }
.cvr-part { border-top: 1px solid var(--border); padding-top: 8px; margin-top: 8px; }
.cvr-part:first-of-type { border-top: 0; padding-top: 0; margin-top: 0; }
.cvr-part-head { font-size: 13px; font-weight: 600; margin-bottom: 4px; }
.cvr-part-top .cvr-part-head { color: var(--gold); }
.cvr-line { display: flex; align-items: center; gap: 6px; font-size: 14px; }
.cvr-line-big { font-size: 20px; font-weight: 700; color: var(--gold); }
.cvr-line-big .ic-gold, .cvr-line-big .ic-dollar { width: 20px; height: 20px; }
.cvr-total {
  border-top: 1px solid var(--border); margin-top: 10px; padding-top: 8px;
  font-size: 14px; font-weight: 600; text-align: center;
}
/* Плитки предметов: картинка крупная, количество углом — игрок должен
   узнать вещь в лицо, а не читать её название */
.cvr-tiles { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.cvr-tile {
  position: relative; width: 78px; text-align: center;
  border: 1px solid var(--border); border-radius: 8px;
  background: #0e1209; padding: 6px 4px 4px;
}
.cvr-tile img { width: 56px; height: 56px; object-fit: contain; display: block; margin: 0 auto; }
.cvr-tile-noimg { font-size: 40px; line-height: 56px; display: block; }
.cvr-tile-qty {
  position: absolute; right: 3px; top: 3px;
  background: rgba(6,8,4,.85); border-radius: 5px; padding: 0 4px;
  font-size: 12px; font-weight: 700; color: var(--gold);
}
.cvr-tile-name {
  display: block; font-size: 10px; line-height: 1.2; color: var(--dim);
  margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Столбец награды в таблице участников. Предметы — картинками из
   игры: значок с числом не говорил, что именно получил игрок. */
.cvr-cell { font-size: 12px; line-height: 1.3; }
.cvr-cell .ic-gold, .cvr-cell .ic-dollar { width: 14px; height: 14px; }
.cvr-cash {
  display: inline-flex; align-items: center; flex-wrap: wrap; gap: 3px;
  vertical-align: middle;
}
.cvr-cash-part { display: inline-flex; align-items: center; gap: 2px; white-space: nowrap; }
.cvr-cash-sep { color: var(--dim); }
.cvr-medal { margin-right: 4px; }
.cvr-chips { display: inline-flex; flex-wrap: wrap; gap: 3px; vertical-align: middle; margin-left: 4px; }
.cvr-chip {
  display: inline-flex; align-items: center; gap: 3px;
  border: 1px solid var(--border); border-radius: 7px;
  /* Светлее фона строки: рисунки предметов тёмные, и на тёмном они
     сливались в чёрные квадраты */
  background: rgba(255,255,255,.06); padding: 2px 5px 2px 3px;
}
.cvr-chip img { width: 28px; height: 28px; object-fit: contain; display: block; }
.cvr-chip-noimg { font-size: 19px; line-height: 28px; }
.cvr-chip b { font-size: 12px; color: var(--gold); }
.cvr-cell-label, .cvr-num-short { display: none; }

/* Урон: на широком экране полностью, на телефоне короткой записью.
   Правило по умолчанию стоит ДО медиазапроса — иначе оно перебьёт его
   и на телефоне не останется ни того ни другого. */
.cv-dmg-short { display: none; }

/* На телефоне награда занимает вторую строку на ВСЮ ширину карточки
   участника. Так картинки не зажаты в узком столбце, а урон и метки
   остаются в одной верхней строке даже на 320 точках. */
@media (max-width: 560px) {
  .cv-col-kills { display: none; }
  .cvr-num-full { display: none; }
  .cvr-num-short { display: inline; white-space: nowrap; }
  .cvr-line-big { font-size: 18px; }
  .cvr-total { line-height: 1.5; }
  .cvr-chip img { width: 22px; height: 22px; }
  .cvr-chip-noimg { font-size: 15px; line-height: 22px; }
  .cvr-chip { padding: 1px 4px 1px 2px; gap: 2px; }
  .cvr-chip b { font-size: 11px; }

  .cv-results-wrap { overflow: visible; margin: 8px 0; }
  .cv-results-wrap .cv-top-table { font-size: 12px; }
  .cv-top-table, .cv-top-table tbody { display: block; width: 100%; }
  .cv-top-table thead { display: none; }
  .cv-top-table tr {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr) auto auto;
    align-items: center; column-gap: 7px; row-gap: 5px;
    padding: 7px 5px; border-bottom: 1px solid var(--border-dim);
  }
  .cv-top-table tbody tr:last-child { border-bottom: 0; }
  .cv-top-table td { display: block; padding: 0; min-width: 0; border: 0; }
  .cv-top-table .cv-col-place {
    text-align: center; color: var(--gold); font-weight: 700; font-size: 13px;
  }
  .cv-top-table .cv-col-player { min-width: 0; line-height: 1.2; }
  .cv-player-name {
    display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-weight: 600;
  }
  .cv-player-level { display: block; font-size: 10px; margin-top: 1px; }
  .cv-top-table .cv-col-damage,
  .cv-top-table .cv-col-coins { font-size: 11.5px; text-align: right; }
  .cv-top-table .cv-col-damage::before {
    content: '⚔'; margin-right: 2px; font-size: 10px; opacity: .65;
  }
  .cv-top-table .cv-col-coins::before {
    content: '●'; margin-right: 3px; color: var(--gold); font-size: 8px;
  }
  .cv-top-table .cvr-cell {
    grid-column: 1 / -1;
    display: flex; align-items: center; flex-wrap: wrap; gap: 4px 6px;
    padding-top: 5px; border-top: 1px dashed rgba(255,255,255,.08);
    font-size: 11px; text-align: left;
  }
  .cvr-cell-label {
    display: inline; flex: 0 0 auto; color: var(--dim);
    font-size: 10px; text-transform: uppercase; letter-spacing: .05em;
  }
  .cvr-medal { margin-right: 0; }
  .cvr-cash { gap: 2px; }
  .cvr-cash-sep { display: none; }
  .cvr-chips { margin-left: 0; flex: 1 1 90px; }
  /* Числа не переносим: «165 4 54 99 4» вместо «165 454 994» читается
     как сбой. Вместо переноса — короткая запись урона. */
  .cv-top-table td.num { white-space: nowrap; }
  .cv-dmg-full { display: none; }
  .cv-dmg-short { display: inline; }
}

.cv-top-table { width: 100%; font-size: 13px; }
.cv-top-table .num { text-align: right; }
.cv-row-me { background: rgba(233,199,92,.1); }
.cv-mine .kv .v.gold { color: var(--gold); }

/* Пять минут после боя: разговор живёт прямо под наградами и топом,
   без отдельного окна. */
.cv-afterparty { border-color: rgba(233,199,92,.55); }
.cv-after-head {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 12px; margin-bottom: 9px;
}
.cv-after-clock {
  flex: 0 0 auto; border: 1px solid var(--border); border-radius: 999px;
  background: rgba(233,199,92,.08); padding: 5px 9px;
  color: var(--dim); font-size: 11px; white-space: nowrap;
}
.cv-after-clock b { color: var(--gold); font-size: 13px; }
.cv-after-chat {
  height: 210px; overflow-y: auto; overscroll-behavior: contain;
  border: 1px solid var(--border); border-radius: 8px;
  background: #0a0d07; padding: 5px 8px;
}
.cv-after-msg { padding: 6px 2px; border-bottom: 1px solid rgba(255,255,255,.06); }
.cv-after-msg:last-child { border-bottom: 0; }
.cv-after-meta { display: flex; align-items: baseline; gap: 5px; min-width: 0; }
.cv-after-who {
  color: var(--gold); font-size: 12px; font-weight: 700;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cv-after-at { margin-left: auto; flex: 0 0 auto; }
.cv-after-text {
  margin-top: 2px; font-size: 13px; line-height: 1.35;
  overflow-wrap: anywhere; white-space: pre-wrap;
}
.cv-after-empty { margin: 78px 8px 0; }
.cv-after-compose {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  align-items: stretch; gap: 7px; margin-top: 8px;
}
.cv-after-compose textarea {
  width: 100%; min-width: 0; resize: vertical; min-height: 54px; max-height: 100px;
  border: 1px solid var(--border); border-radius: 8px;
  background: #0e1209; color: var(--text); padding: 8px;
  font: inherit; font-size: 13px;
}
/* Общая .btn имеет width:100%: без явного auto кнопка вытесняла поле ввода. */
.cv-after-compose .btn { width: auto; min-height: 44px; margin: 0; white-space: nowrap; }
.cv-after-hint { margin-top: 4px; text-align: right; }

.cv-log {
  border: 1px solid var(--border); border-radius: 8px; background: #0a0d07;
  padding: 6px 8px; height: 150px; overflow-y: auto; font-size: 12px;
}
.cv-log-line { line-height: 1.4; padding: 1px 0; }
.cv-log-line .at { color: #7d876c; font-size: 11px; margin-right: 4px; }

@media (max-width: 420px) {
  /* Высота верхнего боя не меняется при появлении стены, газа или мин:
     новые строки прокручиваются внутри подсказки и не дёргают экран. */
  .cv-top { height: 178px; }
  .cv-card { flex-basis: 132px; }
  .cv-portrait { height: 176px; }
  .cv-lists { grid-template-columns: 1fr; }
  .cv-after-head { display: block; }
  .cv-after-clock { display: inline-block; margin-top: 7px; }
  .cv-after-chat { height: 190px; }
  .cv-after-compose { display: grid; grid-template-columns: minmax(0, 1fr) auto; }
  .cv-after-compose .btn { padding-left: 10px; padding-right: 10px; }
}

/* ── Вход и регистрация ────────────────────────────────────────────
   Первый экран должен выглядеть как самостоятельная игровая витрина,
   а не как форма из панели управления. Всё ограничено .auth-view,
   поэтому оформление не затрагивает экраны уже вошедшего игрока. */
body.auth-view {
  min-height: 100%;
  background:
    radial-gradient(circle at 18% 8%, rgba(193, 132, 36, .18), transparent 28%),
    radial-gradient(circle at 88% 28%, rgba(72, 96, 46, .22), transparent 34%),
    linear-gradient(145deg, #080b08 0%, #11170f 50%, #070907 100%);
}
body.auth-view #header,
body.auth-view #pin-news,
body.auth-view #sales-strip { display: none; }
body.auth-view #wrap {
  max-width: 1180px; min-height: auto; margin: 0 auto;
  background: transparent; border: 0; box-shadow: none; overflow: visible;
}
body.auth-view #content { min-height: calc(100dvh - 120px); padding: 18px 18px 30px; }
body.auth-view #site-footer { background: rgba(7, 10, 7, .72); border-top-color: rgba(189, 157, 69, .18); }

.auth-shell {
  width: 100%; max-width: 1120px; margin: 0 auto;
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(390px, .85fr);
  gap: 18px; align-items: start;
}
.auth-hero {
  position: sticky; top: 18px; min-height: min(740px, calc(100dvh - 36px));
  overflow: hidden; isolation: isolate;
  background: #0d120d; border: 1px solid rgba(221, 190, 91, .28); border-radius: 22px;
  box-shadow: 0 26px 70px rgba(0, 0, 0, .48), inset 0 1px 0 rgba(255,255,255,.04);
}
.auth-hero-image {
  position: absolute; z-index: -3; inset: 0 0 auto; width: 100%; height: 48%;
  display: block; object-fit: cover; object-position: 66% center;
  filter: saturate(.92) contrast(1.05);
}
.auth-hero-shade {
  position: absolute; z-index: -2; inset: 0; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(7,9,6,.04) 0%, rgba(7,10,7,.12) 22%, #0d120d 48%, #0a0e0a 100%),
    linear-gradient(90deg, rgba(5,7,5,.4), transparent 62%);
}
.auth-hero::after {
  content: ''; position: absolute; z-index: -1; inset: 0; pointer-events: none;
  background: radial-gradient(circle at 75% 18%, rgba(243, 188, 80, .16), transparent 30%);
}
.auth-hero-content {
  min-height: min(740px, calc(100dvh - 36px));
  padding: clamp(210px, 31vh, 278px) clamp(24px, 4vw, 40px) 142px;
  display: flex; flex-direction: column; justify-content: flex-end;
}
.auth-brand {
  display: flex; align-items: center; gap: 8px; margin-bottom: 10px;
  color: #eef2e8; font-size: 14px; font-weight: 850;
  letter-spacing: .16em; text-transform: uppercase; text-shadow: 0 2px 12px #000;
}
.auth-icon {
  width: 1em; height: 1em; display: inline-block; flex: 0 0 auto;
  fill: none; stroke: currentColor; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
}
.auth-brand-symbol { width: 22px; height: 22px; color: #e8bd52; filter: drop-shadow(0 2px 7px rgba(0,0,0,.7)); }
.auth-kicker {
  align-self: flex-start; margin-bottom: 12px; padding: 5px 10px;
  color: #e4c66d; background: rgba(233,199,92,.09); border: 1px solid rgba(233,199,92,.22);
  border-radius: 999px; font-size: 11px; font-weight: 750; letter-spacing: .08em; text-transform: uppercase;
}
.auth-hero h1 {
  max-width: 610px; margin: 0; color: #f3f5ee;
  font-size: clamp(34px, 4.8vw, 52px); line-height: .98; letter-spacing: -.035em;
  text-wrap: balance; text-shadow: 0 3px 20px rgba(0,0,0,.78);
}
.auth-hero-copy {
  max-width: 590px; margin: 17px 0 0; color: #c7cfbe;
  font-size: 15px; line-height: 1.55; text-wrap: pretty;
}
.auth-hero-actions { display: flex; align-items: center; gap: 14px; margin-top: 20px; }
.auth-hero-primary {
  width: auto; min-width: 218px; min-height: 48px; padding: 12px 20px;
  border-radius: 10px; font-size: 15px; box-shadow: 0 10px 26px rgba(156, 92, 10, .26);
}
.auth-no-card { color: #8f9b87; font-size: 12px; }
.auth-benefits {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 20px;
}
.auth-benefits > div {
  min-width: 0; display: flex; align-items: center; gap: 8px; padding: 9px;
  background: rgba(255,255,255,.035); border: 1px solid rgba(255,255,255,.07); border-radius: 10px;
}
.auth-benefit-icon {
  flex: 0 0 31px; width: 31px; height: 31px; display: grid; place-items: center;
  color: #e5bd57; background: linear-gradient(145deg, rgba(215,178,72,.14), rgba(71,84,46,.13));
  border: 1px solid rgba(218,183,81,.23); border-radius: 9px;
}
.auth-benefit-icon .auth-icon { width: 18px; height: 18px; }
.auth-benefits span { min-width: 0; display: flex; flex-direction: column; }
.auth-benefits strong { color: #dfe6d6; font-size: 11px; line-height: 1.2; }
.auth-benefits small { margin-top: 2px; color: #84907c; font-size: 9.5px; line-height: 1.2; }
.auth-gallery {
  position: absolute; left: clamp(20px, 3vw, 32px); right: clamp(20px, 3vw, 32px); bottom: 24px;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px;
}
.auth-gallery img {
  width: 100%; height: 88px; object-fit: cover; display: block;
  border: 1px solid rgba(225, 206, 137, .16); border-radius: 10px; opacity: .78;
  box-shadow: 0 7px 20px rgba(0,0,0,.28); transition: opacity .2s ease, transform .2s ease;
}
.auth-gallery img:hover { opacity: 1; transform: translateY(-2px); }

.auth-panel {
  padding: 22px; background: linear-gradient(155deg, rgba(25,33,22,.96), rgba(13,18,13,.97));
  border: 1px solid rgba(161, 184, 104, .2); border-radius: 22px;
  box-shadow: 0 24px 60px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.035);
}
.auth-panel-head { display: flex; align-items: center; gap: 12px; margin: 2px 2px 18px; }
.auth-panel-mark {
  flex: 0 0 42px; width: 42px; height: 42px; display: grid; place-items: center;
  color: #181307; background: linear-gradient(145deg, #f0d878, #a97d24);
  border-radius: 12px; box-shadow: 0 8px 20px rgba(177, 128, 34, .2);
}
.auth-panel-mark .auth-icon { width: 23px; height: 23px; stroke-width: 1.9; }
.auth-panel-title { color: #edf2e4; font-size: 19px; font-weight: 800; }
.auth-panel-subtitle { margin-top: 2px; color: #87927e; font-size: 12px; line-height: 1.35; }
.auth-tabs {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px;
  margin-bottom: 14px; padding: 4px; background: rgba(4,7,4,.48);
  border: 1px solid rgba(140,157,101,.14); border-radius: 12px;
}
.auth-tabs .tab {
  min-width: 0; padding: 10px 8px; background: transparent; border: 0; border-radius: 8px;
  color: #87917d; font-size: 13px; letter-spacing: .02em; text-transform: none;
}
.auth-tabs .tab.active {
  color: #fff7df; background: linear-gradient(145deg, #9f6414, #71450d);
  box-shadow: 0 5px 14px rgba(0,0,0,.26);
}
.auth-form.card {
  margin: 0; padding: 2px 0 0; background: transparent; border: 0; border-radius: 0; box-shadow: none;
}
.auth-form-lead { margin: 0 0 14px; color: #aeb9a5; font-size: 13px; line-height: 1.45; }
.auth-form > label { margin-top: 11px; color: #aab5a0; font-size: 12px; font-weight: 650; }
.auth-form input[type=text], .auth-form input[type=password], .auth-form input[type=email], .auth-form select {
  min-height: 47px; padding: 11px 12px; color: #eef2e8;
  background: rgba(5,8,5,.66); border-color: rgba(130,150,92,.23); border-radius: 10px;
  box-shadow: inset 0 1px 5px rgba(0,0,0,.2); transition: border-color .18s ease, box-shadow .18s ease;
}
.auth-form input:focus, .auth-form select:focus {
  border-color: rgba(220,187,82,.62); box-shadow: 0 0 0 3px rgba(220,187,82,.08), inset 0 1px 5px rgba(0,0,0,.2);
}
.auth-primary { min-height: 49px; border-radius: 10px; font-size: 15px; }
.auth-vk-card.card {
  margin-bottom: 14px; padding: 11px; background: rgba(57,91,133,.12);
  border-color: rgba(89,137,193,.32); border-radius: 12px; box-shadow: none;
}
.auth-vk-card .btn-vk { min-height: 45px; border-radius: 9px; }
.auth-vk-card p { padding: 0 3px; color: #8999a9; line-height: 1.4; }
.auth-notice.card { border-radius: 12px; background: rgba(233,199,92,.06); }
.auth-register #rg-country-bonus { border-radius: 11px !important; }
.auth-register #rg-cbonus { display: flex; align-items: flex-start; gap: 6px; }
.auth-inline-message { display: flex; align-items: flex-start; gap: 7px; }
.auth-inline-message > .auth-icon { width: 16px; height: 16px; margin-top: 1px; }
.auth-inline-message > span { min-width: 0; }
.auth-inline-icon { width: 15px; height: 15px; margin-top: 1px; color: #d9b653; }
.auth-register #rg-consents { border-radius: 12px !important; }
.auth-trust {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 7px 12px;
  margin-top: 19px; padding-top: 15px; color: #76816f; border-top: 1px solid rgba(144,160,108,.12);
  font-size: 10.5px;
}
.auth-trust > span { display: inline-flex; align-items: center; gap: 5px; }
.auth-trust .auth-icon { width: 13px; height: 13px; color: #a78e4d; }

@media (max-width: 899px) {
  body.auth-view #content { padding: 12px 12px 24px; }
  .auth-shell { max-width: 680px; grid-template-columns: 1fr; gap: 12px; }
  .auth-hero { position: relative; top: auto; min-height: 590px; }
  .auth-hero-content { min-height: 590px; padding-top: 218px; }
}
@media (max-width: 560px) {
  body.auth-view #content { padding: 0 0 20px; }
  .auth-shell { gap: 0; }
  .auth-hero { min-height: 555px; border-width: 0 0 1px; border-radius: 0 0 24px 24px; }
  .auth-hero-image { height: 43%; object-position: 66% center; }
  .auth-hero-shade {
    background: linear-gradient(180deg, rgba(7,9,6,.02), rgba(8,11,8,.1) 20%, #0d120d 43%, #0a0e0a 100%);
  }
  .auth-hero-content { min-height: 555px; padding: 188px 19px 118px; }
  .auth-brand { margin-bottom: 8px; font-size: 12px; }
  .auth-kicker { margin-bottom: 10px; font-size: 9.5px; }
  .auth-hero h1 { font-size: clamp(31px, 10vw, 40px); line-height: 1.01; }
  .auth-hero-copy { margin-top: 12px; font-size: 13px; line-height: 1.45; }
  .auth-hero-actions { align-items: stretch; flex-direction: column; gap: 7px; margin-top: 15px; }
  .auth-hero-primary { width: 100%; min-height: 48px; }
  .auth-no-card { text-align: center; font-size: 10.5px; }
  .auth-benefits { gap: 5px; margin-top: 13px; }
  .auth-benefits > div { justify-content: center; padding: 7px 4px; text-align: center; }
  .auth-benefit-icon { flex-basis: 34px; width: 34px; height: 34px; }
  .auth-benefits span { display: none; }
  .auth-gallery { left: 14px; right: 14px; bottom: 17px; gap: 6px; }
  .auth-gallery img { height: 76px; border-radius: 8px; }
  .auth-panel { margin: 12px 10px 0; padding: 18px 14px; border-radius: 17px; }
  .auth-panel-head { margin-bottom: 14px; }
  .auth-panel-mark { flex-basis: 38px; width: 38px; height: 38px; border-radius: 10px; }
  .auth-panel-title { font-size: 17px; }
  .auth-panel-subtitle { font-size: 11px; }
  .auth-tabs .tab { padding: 10px 6px; font-size: 12.5px; }
  .auth-form input[type=text], .auth-form input[type=password], .auth-form input[type=email], .auth-form select { min-height: 46px; font-size: 16px; }
  .auth-trust { gap: 6px 9px; font-size: 9.5px; }
}
@media (max-width: 350px) {
  .auth-hero h1 { font-size: 29px; }
  .auth-hero-copy { font-size: 12.5px; }
  .auth-gallery img { height: 68px; }
  .auth-panel { margin-left: 7px; margin-right: 7px; padding-left: 11px; padding-right: 11px; }
}

.btn-row { display: flex; gap: 8px; }
.btn-row .btn { flex: 1; }

/* ---------- ВКЛАДКИ ---------- */
.tabs { display: flex; gap: 6px; margin-bottom: 10px; flex-wrap: wrap; }
.tab {
  flex: 1; min-width: 90px; text-align: center; padding: 8px 6px;
  background: var(--panel-2); border: 1px solid var(--border); border-radius: 5px;
  color: var(--dim); font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  cursor: pointer; user-select: none;
}
.tab.active { background: linear-gradient(var(--orange-1), var(--orange-2)); color: #fff; border-color: #5e3c08; }

/* Вкладки диверсантов — крупнее и заметнее (иконки перенесены в карточку) */.sab-tabs { gap: 7px; }
.sab-tabs .sab-tab {
  flex-basis: 104px; min-width: min-content; justify-content: center;
  padding: 11px 10px; font-size: 13.5px; border-radius: 7px;
}

/* ---------- ИСТОРИЯ РАКЕТ ---------- */
/* Подвкладки внутри раздела — мельче основных, чтобы не спорить с ними */
.rk-log-tabs { gap: 5px; margin-bottom: 8px; }
.rk-log-tabs .rk-log-tab {
  min-width: 0; padding: 6px 8px; font-size: 11.5px; border-radius: 4px;
  letter-spacing: .02em; text-transform: none;
}
.rk-log-list { padding: 4px 0; }
.rk-log-row {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px; border-bottom: 1px solid var(--border);
}
.rk-log-row:last-child { border-bottom: none; }
.rk-log-main { flex: 1; min-width: 0; }
.rk-log-who { font-size: 13.5px; margin-bottom: 2px; }
/* Длинный позывной не должен выдавливать кнопку за край карточки */
.rk-log-who b { overflow-wrap: anywhere; }
/* Итог отдельной строкой: вместе с датой он переносился рваным хвостом */
.rk-log-res { font-size: 12.5px; margin-bottom: 2px; }
.rk-log-btn { flex: 0 0 auto; padding: 6px 10px; font-size: 12px; }
@media (max-width: 420px) {
  .rk-log-row { flex-wrap: wrap; }
  .rk-log-btn { width: 100%; }
}
/* Карточка вида диверсанта — крупнее шапка/иконка, но без перебора */
.sab-head { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.sab-head .ic-sab { width: 156px; height: 156px; }  /* ×3 от прежних 52px */
.sab-head .name { font-size: 17px; }

/* ---------- СПИСКИ И СТРОКИ ---------- */
.list-row {
  display: flex; align-items: center; gap: 8px; padding: 8px 4px;
  border-bottom: 1px solid var(--border-dim);
}
.list-row:last-child { border-bottom: none; }
.list-row .grow { flex: 1; min-width: 0; }
.name { color: var(--green); font-weight: 700; }

/* Пары «ключ — значение» */
.kv { display: flex; justify-content: space-between; gap: 10px; padding: 3px 0; font-size: 14px; }
.kv .k { color: var(--dim); }
.kv .v { font-weight: 700; }

/* ---------- ПРОГРЕСС-БАРЫ ---------- */
.bar {
  position: relative; height: 16px; background: #0e130a; border: 1px solid var(--border);
  border-radius: 4px; overflow: hidden;
}
.bar .fill { position: absolute; inset: 0; width: 0; transition: width .3s; }
.bar .txt {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; color: #e9f0d8; text-shadow: 0 1px 1px #000;
}
.fill.hp { background: linear-gradient(#c4544a, #8e352d); }
.fill.en { background: linear-gradient(#4f93c4, #2d618e); }
.fill.xp { background: linear-gradient(#8db04f, #5d7a2e); }
.fill.gold { background: linear-gradient(#d9b14a, #9c7c27); }

/* ---------- ФОРМЫ ---------- */
input[type=text], input[type=password], input[type=number], input[type=email], input[type=tel], input[type=search], select, textarea {
  width: 100%; padding: 9px 10px; background: #10150b; color: var(--text);
  border: 1px solid var(--border); border-radius: 5px; font-size: 14px; outline: none;
}
input:focus, select:focus, textarea:focus { border-color: #4a6128; }
textarea { resize: vertical; min-height: 70px; }

/* ---------- ПОКАЗАТЬ ПАРОЛЬ ----------
   Значок свой: браузерный есть только в Edge и части десктопных сборок,
   в мобильном его нет — то есть ровно там, где по клавишам промахиваются
   чаще всего. Обёртку и кнопку ставит UI.watchPasswords(). */
.pw-wrap { position: relative; display: block; }
.pw-wrap > input { padding-right: 42px; }
/* Убираем ВСТРОЕННЫЙ значок браузера. Edge рисует свой глаз прямо в поле,
   и рядом с нашим получались два глаза подряд — при этом браузерный
   переключает поле мимо нашей кнопки, и она показывает не то состояние.
   Правило на ВСЕ поля пароля, а не только на обёрнутые: в панели кнопка
   стоит отдельно (.pw-ico), обёртки там нет, а второй глаз есть. */
input[type="password"]::-ms-reveal,
input[type="password"]::-ms-clear { display: none; width: 0; height: 0; }
input[type="password"]::-webkit-credentials-auto-fill-button,
input[type="password"]::-webkit-strong-password-auto-fill-button {
  visibility: hidden; pointer-events: none; width: 0; margin: 0;
}

/* Тот же значок, но кнопкой в ряду, а не поверх поля — так он стоит в
   панели рядом с полем «новый пароль игроку». */
.pw-ico svg {
  width: 18px; height: 18px; vertical-align: -3px;
  fill: none; stroke: currentColor;
  stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}
.pw-ico.on { color: var(--gold); }
.pw-eye {
  position: absolute; top: 50%; right: 4px; transform: translateY(-50%);
  width: 34px; height: 34px; padding: 0; margin: 0;
  display: flex; align-items: center; justify-content: center;
  background: none; border: 0; border-radius: 6px; cursor: pointer;
  color: var(--dim); transition: color .15s ease, background .15s ease;
}
.pw-eye svg {
  width: 20px; height: 20px; fill: none; stroke: currentColor;
  stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}
.pw-eye:hover { color: var(--text); background: rgba(255,255,255,.06); }
.pw-eye.on { color: var(--gold); }
/* Палец на телефоне крупнее курсора: цель не меньше 34 px, но и поле
   при этом не распухает — кнопка лежит поверх, а не в потоке. */
.pw-eye:focus-visible { outline: 1px solid var(--gold); outline-offset: -1px; }
label { display: block; margin: 8px 0 4px; color: var(--dim); font-size: 13px; }
.qty { width: 74px !important; text-align: center; }

.field-row { display: flex; gap: 8px; align-items: center; }

/* ---------- БОЙ ---------- */
.result-title { text-align: center; font-size: 19px; font-weight: 800; letter-spacing: .15em; margin: 4px 0 8px; }
.result-title.win { color: #8fdc55; text-shadow: 0 0 12px rgba(120, 220, 70, .35); }
.result-title.lose { color: var(--red); }
.dmg-deal { color: #8fdc55; font-weight: 700; }
.dmg-take { color: var(--red); font-weight: 700; }

.fatality-card { border-color: #6b251b; background: linear-gradient(#1d120c, #150d09); }

/* ---------- ЧАТ ---------- */
.chat-box { max-height: 52vh; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; padding: 4px 0; }
.chat-msg { font-size: 14px; word-wrap: break-word; }
.chat-msg .who { color: var(--green); font-weight: 700; cursor: pointer; }
.chat-msg .at { color: var(--dim); font-size: 11px; margin-left: 4px; }

/* Кастомные эмодзи чата: военная графика игры вместо системных смайлов.
   В сообщении картинка остаётся компактной, а в панели выбора достаточно
   крупной, чтобы выражение бойца читалось даже на телефоне. */
.chat-compose-with-emoji { position: relative; display: flex; align-items: center; gap: 7px; }
.chat-compose-with-emoji > input { min-width: 0; flex: 1; }
.chat-compose-with-emoji > .btn { flex:0 0 auto; width:auto; }
#lg-chat-input { min-width:0; width:0; direction:ltr; text-align:left; unicode-bidi:isolate; }
#lg-chat-send { width:40px; min-width:40px; padding:8px; }
.amount-unit { width:auto; flex:0 0 64px; }
.field-row:has(>.amount-unit) { flex-wrap:wrap; }
.field-row:has(>.amount-unit)>input { flex:1 1 110px; width:0; min-width:90px; }
.legion-battle-alert { display:flex; align-items:center; gap:10px; border-color:var(--orange); }
.legion-battle-alert .grow { flex:1; min-width:0; }
.chat-text { direction:ltr; unicode-bidi:isolate; overflow-wrap:anywhere; }
.academy-dock-main { position:relative; }
.academy-dock-hide { position:absolute; top:3px; right:3px; border:0; background:none; color:var(--dim); cursor:pointer; padding:6px; }
.chat-emoji-picker { position: relative; flex: 0 0 auto; }
.chat-emoji-toggle,
.chat-emoji-choice {
  display: inline-flex; align-items: center; justify-content: center;
  margin: 0; padding: 0; cursor: pointer;
  color: var(--text); background: linear-gradient(160deg, rgba(53,67,32,.95), rgba(20,27,13,.98));
  border: 1px solid var(--border); border-radius: 8px;
}
.chat-emoji-toggle { width: 40px; height: 40px; }
.chat-emoji-toggle:hover,
.chat-emoji-toggle[aria-expanded="true"] { border-color: var(--gold); box-shadow: 0 0 0 1px rgba(226,184,76,.18); }
.chat-emoji-toggle img { width: 36px; height: 36px; object-fit: contain; }
.chat-emoji-panel {
  position: absolute; z-index: 80; left: 0; bottom: calc(100% + 7px);
  width: 210px; padding: 7px; box-sizing: border-box;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px;
  background: linear-gradient(160deg, #182111, #0d120a);
  border: 1px solid #657a3d; border-radius: 10px;
  box-shadow: 0 10px 28px rgba(0,0,0,.72), inset 0 1px rgba(255,255,255,.04);
}
.chat-emoji-panel[hidden] { display: none; }
.chat-emoji-choice { width: 44px; height: 44px; border-color: rgba(116,139,72,.42); }
.chat-emoji-choice:hover,
.chat-emoji-choice:focus-visible { border-color: var(--gold); background: rgba(129,100,31,.24); transform: translateY(-1px); }
.chat-emoji-choice img { width: 41px; height: 41px; object-fit: contain; pointer-events: none; }
.chat-custom-emoji {
  display: inline-block; width: 160px; height: 160px; max-width:100%; margin: 4px 4px 0;
  object-fit: contain; vertical-align: middle;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.55));
}
/* Когда сообщение начинается с эмодзи, отделяем его от строки с флагом,
   позывным и временем. В середине текста сохраняется обычный компактный
   интервал, поэтому фразы с несколькими эмодзи не расползаются. */
.chat-msg > .chat-text > .chat-custom-emoji:first-child {
  margin-top: 14px;
  margin-left: 18px;
  margin-bottom: 6px;
}
.chat-quote .chat-custom-emoji,
.chat-reply-to .chat-custom-emoji { width: 92px; height: 92px; margin: 3px 3px 0; }

@media (max-width: 620px) {
  .chat-custom-emoji { width: 128px; height: 128px; margin: 2px 3px 0; }
  .chat-msg > .chat-text > .chat-custom-emoji:first-child {
    margin-top: 10px;
    margin-left: 12px;
    margin-bottom: 5px;
  }
  .chat-quote .chat-custom-emoji,
  .chat-reply-to .chat-custom-emoji { width: 46px; height: 46px; margin: 2px 2px 0; }
}

/* ── Академия новобранца ─────────────────────────────────────── */
.academy-hero { position:relative; overflow:hidden; margin-bottom:10px; padding:22px 22px 26px; border:1px solid rgba(224,174,66,.48); border-radius:12px; background:linear-gradient(125deg,rgba(34,48,19,.97),rgba(9,14,7,.98) 62%),url('/img/login/hero.webp') center/cover; box-shadow:0 12px 30px rgba(0,0,0,.28); }
.academy-hero:after { content:''; position:absolute; inset:0; pointer-events:none; background:linear-gradient(90deg,transparent,rgba(224,174,66,.055),transparent); transform:translateX(-100%); animation:academy-scan 8s ease-in-out infinite; }
@keyframes academy-scan { 0%,65%{transform:translateX(-100%)} 90%,100%{transform:translateX(100%)} }
.academy-hero-copy { max-width:720px; }
.academy-overline,.academy-home-kicker,.academy-dock-kicker { color:var(--gold); font-size:10px; font-weight:800; letter-spacing:1.6px; }
.academy-hero h1 { margin:5px 0 7px; color:#f3e8b4; font-size:26px; line-height:1.1; text-transform:uppercase; letter-spacing:2px; }
.academy-hero p { margin:0; max-width:650px; color:var(--muted); font-size:12px; line-height:1.55; }
.academy-total { position:absolute; top:20px; right:22px; display:flex; flex-direction:column; align-items:center; min-width:70px; padding:8px 10px; border:1px solid rgba(224,174,66,.3); border-radius:9px; background:rgba(0,0,0,.34); }
.academy-total b { color:var(--gold); font-size:20px; }
.academy-total span { color:var(--dim); font-size:9px; text-transform:uppercase; }
.academy-main-progress,.academy-dock-progress { overflow:hidden; height:5px; border-radius:5px; background:rgba(255,255,255,.08); }
.academy-main-progress { position:absolute; right:22px; bottom:12px; left:22px; }
.academy-main-progress i,.academy-dock-progress i { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,#69963b,#e0ae42); transition:width .35s ease; }
.academy-next { border-color:rgba(89,151,198,.42); color:#b7c8d3; text-align:center; }
.academy-budget { display:flex; align-items:center; flex-wrap:wrap; gap:6px; }
.academy-budget b { margin-right:5px; color:#f3e8b4; }
.academy-budget span { padding:4px 7px; border:1px solid var(--border-dim); border-radius:6px; color:var(--muted); font-size:10px; background:rgba(255,255,255,.025); }
.academy-chapters { display:grid; gap:10px; margin-top:10px; }
.academy-chapter { overflow:hidden; border:1px solid var(--border); border-radius:11px; background:linear-gradient(145deg,rgba(21,30,13,.96),rgba(8,12,6,.98)); }
.academy-chapter.is-current { border-color:rgba(224,174,66,.7); box-shadow:0 0 0 1px rgba(224,174,66,.12),0 9px 24px rgba(0,0,0,.24); }
.academy-chapter.is-done { border-color:rgba(91,153,78,.45); }
.academy-chapter.is-locked { opacity:.7; }
.academy-chapter-head { display:grid; grid-template-columns:34px 58px minmax(0,1fr) auto; align-items:center; gap:10px; padding:12px 14px 8px; }
.academy-chapter-num { display:flex; align-items:center; justify-content:center; width:30px; height:30px; border:1px solid rgba(224,174,66,.36); border-radius:50%; color:var(--gold); font-size:13px; font-weight:800; background:rgba(224,174,66,.08); }
.academy-chapter.is-done .academy-chapter-num { color:#aee185; border-color:rgba(126,181,79,.55); background:rgba(86,135,52,.16); }
.academy-chapter-title { min-width:0; }
.academy-chapter-title small { color:var(--gold); font-size:9px; letter-spacing:1px; }
.academy-chapter-title h2 { overflow:hidden; margin:2px 0; color:#f1e8b8; font-size:16px; line-height:1.2; text-overflow:ellipsis; white-space:nowrap; }
.academy-chapter-title span { color:var(--dim); font-size:10px; }
.academy-chapter-count { padding:5px 8px; border-radius:7px; color:var(--gold); font-size:11px; font-weight:700; background:rgba(0,0,0,.28); }
.academy-intro { margin:0; padding:0 14px 10px 116px; color:var(--muted); font-size:11px; line-height:1.45; }
.academy-rewards { display:flex; align-items:center; flex-wrap:wrap; gap:5px; padding:9px 14px; border-top:1px solid var(--border-dim); border-bottom:1px solid var(--border-dim); background:rgba(0,0,0,.18); }
.academy-reward-label { margin-right:4px; color:var(--dim); font-size:9px; font-weight:700; text-transform:uppercase; letter-spacing:.8px; }
.academy-reward { padding:3px 6px; border:1px solid rgba(255,255,255,.09); border-radius:6px; color:var(--text); font-size:10px; background:rgba(255,255,255,.035); }
.academy-reward.gold { color:#ffd45f; }.academy-reward.vip { color:#ffda5f; border-color:rgba(255,208,54,.32); }.academy-reward.box { color:#a9d0ec; }.academy-reward.money { color:#9fd37b; }
.academy-tasks { padding:5px 10px 10px; }
.academy-task { display:grid; grid-template-columns:28px minmax(0,1fr); gap:8px; padding:9px 4px; border-bottom:1px solid var(--border-dim); }
.academy-task:last-child { border-bottom:0; }
.academy-task.is-current { margin:5px 0; padding:10px 8px; border:1px solid rgba(224,174,66,.4); border-radius:8px; background:rgba(224,174,66,.055); }
.academy-task-mark { display:flex; align-items:center; justify-content:center; width:24px; height:24px; border:1px solid var(--border); border-radius:50%; color:var(--dim); font-size:10px; font-weight:800; }
.academy-task.is-done .academy-task-mark { color:#b8e78c; border-color:rgba(111,172,67,.5); background:rgba(83,137,47,.16); }
.academy-task.is-current .academy-task-mark { color:#0d1209; border-color:var(--gold); background:var(--gold); }
.academy-task-body { min-width:0; }
.academy-task-top { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.academy-task-top b { color:#e8e3bd; font-size:12px; }.academy-task-top span { color:var(--dim); font-size:9px; white-space:nowrap; }
.academy-task-story { margin-top:3px; color:var(--muted); font-size:10.5px; line-height:1.4; }
.academy-task-goal { margin-top:5px; color:#d9c96f; font-size:10px; font-weight:700; }
.academy-task-reward { margin-top:4px; color:#93c66f; font-size:9.5px; font-weight:700; }
.academy-task-why,.academy-optional { margin-top:3px; color:var(--dim); font-size:9.5px; line-height:1.35; }
.academy-optional { color:#8da6b9; }
.academy-task-btn,.academy-skip { width:auto; margin:8px 6px 0 0; padding:7px 12px; font-size:10px; }
.academy-lock,.academy-outro { margin:10px 14px 14px; padding:9px 10px; border-radius:7px; color:var(--muted); font-size:10px; line-height:1.4; background:rgba(255,255,255,.035); }
.academy-outro { color:#afd083; border-left:2px solid #739d47; }
.academy-home-card { border-color:rgba(224,174,66,.55); background:linear-gradient(135deg,rgba(31,43,18,.98),rgba(10,14,7,.98)); }
.academy-home-kicker { margin-top:9px; }
.academy-home-actions { display:flex; gap:7px; }.academy-home-actions .btn { flex:1; }
.academy-dock { margin-bottom:9px; border:1px solid rgba(224,174,66,.5); border-radius:9px; background:linear-gradient(105deg,rgba(29,41,17,.98),rgba(9,13,7,.98)); box-shadow:0 6px 18px rgba(0,0,0,.2); }
.academy-dock-main { display:grid; grid-template-columns:42px minmax(0,1fr) auto; align-items:start; gap:9px; padding:9px 34px 8px 9px; }
.academy-dock-copy { min-width:0; }.academy-dock-copy > b { display:block; color:#ede4b7; font-size:11px; }
.academy-dock-story { margin-top:4px; color:var(--text); font-size:10px; line-height:1.4; }
.academy-dock-goal,.academy-dock-why { margin-top:4px; color:var(--muted); font-size:9.5px; line-height:1.35; }
.academy-dock-goal { color:#d9c96f; }.academy-dock-goal strong,.academy-dock-why strong { color:inherit; }
.academy-dock-go { width:auto; padding:7px 10px; font-size:9.5px; white-space:nowrap; }
.academy-dock-progress { height:3px; border-radius:0 0 8px 8px; }
.academy-practice-brief { margin-bottom:10px; color:var(--muted); line-height:1.45; }.academy-practice-list { margin:0; padding-left:20px; text-align:left; }.academy-practice-list li { margin:7px 0; line-height:1.4; }

@media (max-width:620px) {
  .academy-hero { padding:17px 14px 24px; }.academy-hero h1 { padding-right:65px; font-size:20px; }.academy-total { top:14px; right:12px; min-width:54px; padding:6px; }.academy-total b { font-size:15px; }
  .academy-budget { align-items:stretch; }.academy-budget b { width:100%; }.academy-budget span { flex:1 1 43%; text-align:center; }
  .academy-chapter-head { grid-template-columns:30px 46px minmax(0,1fr); gap:7px; padding:10px 9px 7px; }.academy-chapter-head .ic-instr { width:46px;height:46px; }.academy-chapter-count { grid-column:3; justify-self:start; padding:2px 6px; }
  .academy-chapter-title h2 { font-size:14px; }.academy-intro { padding:0 10px 9px; }.academy-rewards { padding:8px 10px; }
  .academy-tasks { padding:4px 6px 8px; }.academy-task { grid-template-columns:25px minmax(0,1fr); gap:6px; }.academy-task-top { align-items:flex-start; flex-direction:column; gap:2px; }
  .academy-task-btn,.academy-skip { width:100%; margin-right:0; }.academy-home-actions { display:grid; grid-template-columns:1fr; }
  .academy-dock-main { grid-template-columns:36px minmax(0,1fr); }.academy-dock-main .ic-instr { width:36px;height:36px; }.academy-dock-go { grid-column:1/-1; width:100%; }
}

@media (max-width: 420px) {
  .chat-compose-with-emoji { gap: 5px; }
  .chat-emoji-toggle { width: 36px; height: 36px; }
  .chat-emoji-toggle img { width: 32px; height: 32px; }
  .chat-emoji-panel { width: 194px; padding: 6px; gap: 4px; }
  .chat-emoji-choice { width: 42px; height: 42px; }
  .chat-emoji-choice img { width: 39px; height: 39px; }
}

/* ---------- ДОСТИЖЕНИЯ ---------- */
.stars { letter-spacing: 2px; font-size: 15px; }
.stars .on { color: var(--gold); }
.stars .off { color: #3a4427; }

/* ---------- ВСПЛЫВАЮЩИЕ УВЕДОМЛЕНИЯ ---------- */
#toasts {
  position: fixed; left: 50%; transform: translateX(-50%);
  top: 70px; z-index: 100; width: min(480px, calc(100vw - 20px));
  display: flex; flex-direction: column; gap: 6px; pointer-events: none;
}
.toast {
  background: rgba(20, 27, 13, .96); border: 1px solid #46592a; border-left: 4px solid var(--green);
  color: #dce7c2; padding: 9px 12px; border-radius: 6px; font-size: 13px;
  box-shadow: 0 4px 14px rgba(0,0,0,.5); pointer-events: auto; cursor: pointer;
  animation: toast-in .25s ease;
}
@keyframes toast-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
.toast.toast-out { animation: toast-out .2s ease forwards; }
@keyframes toast-out { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(-8px); } }

/* ---------- ПОДАРОК ОТ АДМИНИСТРАЦИИ ---------- */
#admin-gift-popup {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  padding: 20px; background: rgba(0, 0, 0, .78);
}
.admin-gift-dialog {
  width: min(100%, 420px); max-height: calc(100dvh - 40px); overflow-y: auto;
  padding: 22px; text-align: center; box-sizing: border-box;
  color: var(--text); background: var(--card);
  border: 2px solid var(--gold); border-radius: 14px;
  box-shadow: 0 18px 55px rgba(0, 0, 0, .65);
}
.admin-gift-icon { margin-bottom: 6px; font-size: 38px; line-height: 1; }
.admin-gift-title { color: var(--gold); font-size: 18px; font-weight: 800; }
.admin-gift-items {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px; margin: 14px 0 0;
}
.admin-gift-item {
  min-width: 0; padding: 9px 8px;
  display: flex; align-items: center; justify-content: center;
  color: var(--text); background: rgba(255, 200, 0, .08);
  border: 1px solid rgba(255, 200, 0, .16); border-radius: 8px;
  font-size: 14px; font-weight: 750; line-height: 1.3;
  white-space: normal; overflow-wrap: anywhere; word-break: normal;
}
.admin-gift-item.is-wide { grid-column: 1 / -1; }
.admin-gift-note {
  margin: 12px 0 0; color: var(--text); font-size: 14px;
  white-space: pre-wrap; overflow-wrap: anywhere;
}
.admin-gift-claim { width: 100%; min-height: 46px; margin-top: 18px; font-size: 16px; font-weight: 800; }

@media (max-width: 420px) {
  #admin-gift-popup { padding: 10px; }
  .admin-gift-dialog { max-height: calc(100dvh - 20px); padding: 16px 13px; border-radius: 11px; }
  .admin-gift-icon { font-size: 32px; }
  .admin-gift-title { font-size: 16px; }
  .admin-gift-items { gap: 6px; margin-top: 11px; }
  .admin-gift-item { padding: 8px 6px; font-size: 13px; }
  .admin-gift-claim { margin-top: 14px; }
}

.loading { text-align: center; color: var(--dim); padding: 30px 0; }

/* Узкие экраны */
@media (max-width: 360px) {
  .menu-btn { font-size: 12px; min-height: 48px; }
  body { font-size: 14px; }
}

/* ===================================================================
   АДАПТИВ: защита от «выезда» контента за край экрана на телефонах.
   Длинные числа/слова/значения переносятся, элементы не шире контейнера.
   =================================================================== */
/* overflow-x только у html. Стоял у html И body — и по правилам CSS
   прокручиваться начинало body, а не окно: все window.scrollTo в игре
   (наверх после атаки, возврат к месту после перерисовки) молча не
   работали с 21.07 до 21.09.2026. У одного html запрет уходит окну, и
   окно остаётся тем, что прокручивается. */
html { overflow-x: hidden; }
body { max-width: 100%; }
#wrap { overflow-x: hidden; }
/* Длинные слова/числа/URL переносятся, а не выталкивают строку за экран */
.card, .kv, .title, .name, .list-row, p, .badge, .tab, .menu-btn, td, th,
.result-title, summary, label { overflow-wrap: break-word; word-break: normal; }
/* Строки «ключ — значение»: значение может занять несколько строк, но не
   выезжает вправо. min-width:0 обязателен, иначе flex-элемент не сжимается. */
.kv { align-items: flex-start; }
.kv > * { min-width: 0; }
.kv .v { text-align: right; overflow-wrap: break-word; }
/* Не влезают в одну строку — значение уходит на следующую, а не рвётся
   посреди слова («Зван-ие: Генералисс-имус» в узкой колонке профиля). */
.kv { flex-wrap: wrap; column-gap: 10px; row-gap: 0; }
.kv > * { max-width: 100%; }
.kv .v { margin-left: auto; }
/* Ряд кнопок: не помещаются — переносятся рядом ниже, а не уезжают за
   экран. min-content нужен, чтобы перенос срабатывал при flex:1. */
.btn-row { flex-wrap: wrap; }
.btn-row > * { min-width: min-content; }
/* Вкладки: ширина не меньше надписи — лишние переносятся на новую строку */
.tab { flex: 1 1 90px; min-width: min-content; }
/* Позывной в профиле может быть длинным словом без пробелов */
.pf2-name { overflow-wrap: anywhere; min-width: 0; }
/* Поля ввода/кнопки/картинки/таблицы не шире родителя */
input, select, textarea, button, img, table, pre { max-width: 100%; }
input, select, textarea { box-sizing: border-box; }
/* Заголовки и длинные названия не растягивают контейнер */
.title { overflow-wrap: break-word; }

/* ===================================================================
   ИКОНКА ЗОЛОТА: золотая монета (эмодзи 🪙). Единый значок для шапки
   и всех мест, где упоминается цена в золоте (контейнеры, рынок,
   аукцион, клуб, трофеи).
   =================================================================== */
/* ===================================================================
   ИКОНКИ ОСНОВНЫХ ХАРАКТЕРИСТИК: реальные PNG/WebP-иконки (не эмодзи).
   Единые значки для шапки и всех мест, где упоминается соответствующий
   ресурс (рынок, банк, госпиталь, миссии, бой, почта, уведомления и т.д).
   Размер по умолчанию подогнан под строчный текст (1em с небольшим
   увеличением); при необходимости переопределяется через font-size
   родителя — .ic-* масштабируется вместе с ним (width/height в em).
   =================================================================== */
.ic-gold, .ic-dollar, .ic-health, .ic-energy, .ic-ammo, .ic-mail, .ic-bell,
.ic-crest, .ic-token, .ic-reserve {
  display: inline-block;
  width: 1.15em;
  height: 1.15em;
  vertical-align: -0.22em;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}
.ic-gold   { background-image: url('/img/icons/gold.webp'); }
.ic-dollar { background-image: url('/img/icons/dollar.webp'); }
.ic-health { background-image: url('/img/icons/health.webp'); }
.ic-energy { background-image: url('/img/icons/energy.webp'); }
.ic-ammo   { background-image: url('/img/icons/ammo.webp'); }
.ic-mail   { background-image: url('/img/icons/mail.webp'); }
.ic-bell   { background-image: url('/img/icons/bell.webp'); }
/* Трофеи: герб штаба, жетон перемирия и резерв (РЕЗ) */
.ic-crest   { background-image: url('/img/icons/crest.webp'); }
.ic-token   { background-image: url('/img/icons/truce.webp'); }
.ic-reserve { background-image: url('/img/icons/reserve.webp'); }

/* В темах (кибер/пустыня/нуар/аврора) золото раньше меняло цвет через
   текстовый ::before — с реальной картинкой цвет темы вместо этого
   подсвечивается лёгким свечением вокруг иконки. */
body.theme-cyber   .ic-gold { filter: drop-shadow(0 0 4px #00d4ff); }
body.theme-desert  .ic-gold { filter: sepia(0.3) saturate(1.4); }
body.theme-noir    .ic-gold { filter: grayscale(0.6) contrast(1.2); }
body.theme-aurora  .ic-gold { filter: drop-shadow(0 0 4px #7dffb3); }

/* ===================================================================
   АКЦИОННЫЙ БАННЕР И СТАРАЯ/НОВАЯ ЦЕНА
   =================================================================== */
.sale-banner {
  background: linear-gradient(180deg, rgba(217,165,70,0.18), rgba(217,165,70,0.08));
  border: 1px solid var(--orange-1);
  border-radius: 6px;
  padding: 8px 12px;
  margin-bottom: 10px;
  text-align: center;
  color: #ffeac1;
  font-size: 13px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 2px 6px rgba(0,0,0,.4);
}
.sale-banner b { color: #ffd66e; }
/* Крупная строка «что и на сколько» и отсчёт под ней: раньше акция
   была одной мелкой строкой и терялась среди карточек товара. */
/* Значок-заменитель там, где своей картинки нет: «XP», «★», «Ур».
   Эмодзи в этих местах на части систем рисовались квадратиками. */
/* Галочка «скрыть профиль» в окне бана аккаунта */
.ban-hide { display: flex; align-items: flex-start; gap: 7px; margin-top: 10px; font-size: 12.5px; line-height: 1.35; cursor: pointer; }
.ban-hide input { margin-top: 2px; flex-shrink: 0; }
/* Скрытый профиль заблокированного: только позывной, аватар и причина */
.pf-hidden { text-align: center; padding: 18px 14px; }
.pf-hidden .pf2-avatar { margin: 10px auto; }
.pf-hidden-name { font-size: 18px; font-weight: 700; }
.pf-hidden-note { margin-top: 8px; }
.g-ic-txt {
  display: inline-block; min-width: 20px; padding: 0 4px;
  border: 1px solid var(--border); border-radius: 4px;
  font-size: 10px; font-weight: 700; line-height: 15px; text-align: center;
  color: var(--gold); background: rgba(255,255,255,.04); vertical-align: middle;
}
.news-img-pick { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; flex-wrap: wrap; }
.sab-battle-master {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 11px 12px; border-left: 3px solid var(--green);
}
.sab-battle-master.is-off { border-left-color: var(--red); background: rgba(229,72,77,.06); }
@media (max-width: 600px) {
  .sab-battle-master { align-items: stretch; flex-direction: column; }
  .sab-battle-master .btn { width: 100%; }
}
.news-upload-state {
  margin-top: 12px; padding: 9px 11px; border: 1px solid var(--gold);
  border-radius: 8px; color: var(--gold); background: rgba(240,180,41,.08);
  font-size: 12px; text-align: center;
}
.news-editor-image { margin-top: 6px; }
.news-image-size {
  display: grid; grid-template-columns: auto minmax(140px,1fr) auto;
  gap: 8px; align-items: center; margin-top: 9px; padding: 8px 10px;
  border: 1px solid var(--border); border-radius: 7px; background: rgba(255,255,255,.025);
  font-size: 12px;
}
.news-image-size label { color: var(--text); white-space: nowrap; }
.news-image-size b { color: var(--gold); font-variant-numeric: tabular-nums; }
.news-image-size input[type="range"] { width: 100%; accent-color: var(--gold); cursor: pointer; }
.news-image-error {
  align-items: center; justify-content: center; min-height: 34px;
  margin-top: 7px; padding: 7px 10px; border: 1px dashed var(--red);
  border-radius: 7px; color: var(--red); background: rgba(229,72,77,.07);
  font-size: 12px;
}
.news-image-error.small { min-height: 28px; margin: 0; padding: 4px 7px; }
@media (max-width: 600px) {
  .news-image-size { grid-template-columns: auto 1fr; }
  .news-image-size .small { grid-column: 1 / -1; }
}
.sale-banner-title { font-size: 15px; font-weight: 700; color: #ffd66e; letter-spacing: .2px; }
.sale-banner-left  { margin-top: 3px; font-size: 12px; color: #ffeac1; opacity: .85; }
.sale-banner-left b { font-variant-numeric: tabular-nums; }

/* ── Полоса закреплённой новости над игрой ─────────────────────── */
.pin-news {
  display: flex; align-items: center; gap: 9px;
  margin: 0 0 8px; padding: 8px 10px;
  border: 1px solid var(--gold); border-radius: 8px;
  background: linear-gradient(180deg, rgba(217,165,70,.16), rgba(217,165,70,.05));
  box-shadow: 0 2px 8px rgba(0,0,0,.35);
}
.pin-news-emoji { font-size: 20px; line-height: 1; flex-shrink: 0; }
.pin-news-text  { flex: 1; min-width: 0; cursor: pointer; }
.pin-news-label {
  display: block; font-size: 9px; letter-spacing: 1.2px; text-transform: uppercase;
  color: var(--gold); opacity: .8;
}
.pin-news-title {
  display: block; font-size: 13px; font-weight: 600; color: #ffeac1;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pin-news-x {
  flex-shrink: 0; width: 26px; height: 26px; line-height: 1;
  background: transparent; border: 1px solid var(--border); border-radius: 6px;
  color: var(--dim); font-size: 13px; cursor: pointer;
}
.pin-news-x:hover { color: var(--text); border-color: var(--gold); }

/* ── Плавное проявление экрана сверху вниз ─────────────────────── */
/* На медленной связи раздел собирается кусками: сначала разметка,
   потом картинки. Без проявления это выглядит как рывок. Анимация
   короткая и только на первых блоках — на слабом телефоне длинные
   анимации сами по себе тормозят. */
@media (prefers-reduced-motion: no-preference) {
  .rv-in { animation: rv-in .26s ease-out both; }
  @keyframes rv-in {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: none; }
  }
}
/* ── Витрина действующих акций внизу страницы ──────────────────── */
.sales-strip {
  margin: 14px 0 4px; padding: 10px 12px;
  border: 1px solid var(--orange-1); border-radius: 8px;
  background: rgba(217,165,70,.06);
}
/* Заголовок — он же кнопка: список свёрнут, пока его не раскроют */
.sales-strip-head {
  display: flex; align-items: center; gap: 10px; width: 100%;
  background: none; border: none; padding: 0; margin: 0;
  font: inherit; font-size: 13px; font-weight: 700; color: #ffd66e;
  cursor: pointer; text-align: left;
}
.sales-strip-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sales-strip-more {
  flex-shrink: 0; font-size: 12px; font-weight: 400;
  color: var(--orange-1); border: 1px solid var(--orange-1);
  border-radius: 6px; padding: 2px 8px; white-space: nowrap;
}
.sales-strip-head:hover .sales-strip-more { background: rgba(217,165,70,.14); }
.sales-strip-head:focus-visible { outline: 2px solid var(--orange-1); outline-offset: 2px; }
.sales-strip-list { margin-top: 6px; }
.sales-row {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 0; border-top: 1px solid var(--border-dim); font-size: 12px;
}
.sales-row[data-sale-go] { cursor: pointer; }
.sales-row[data-sale-go]:hover .sales-row-name { color: var(--gold); }
.sales-row-pct {
  flex-shrink: 0; min-width: 46px; text-align: center;
  padding: 2px 6px; border-radius: 5px;
  background: rgba(217,165,70,.18); color: #ffd66e; font-weight: 700;
}
.sales-row-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sales-row-left { flex-shrink: 0; color: var(--dim); font-variant-numeric: tabular-nums; }


.price-old {
  text-decoration: line-through;
  color: var(--dim);
  font-size: 0.9em;
  margin-right: 4px;
}
.price-new { color: var(--money); font-weight: 700; }

/* ===================================================================
   ТЕМА 2: ВОЕННАЯ СТАЛЬ
   Тёмный металл с зернистостью, царапинами и сетчатой подложкой.
   Активируется классом body.theme-steel
   =================================================================== */
body.theme-steel {
  --bg: #15171a;
  --panel: #1c2025;
  --panel-2: #232830;
  --border: #3a4250;
  --border-dim: #2a313c;
  --text: #c9d3df;
  --dim: #7e8896;
  --green: #b6c780;          /* приглушённый хаки на стали */
  --money: #8ed26d;
  --gold: #f1d56a;
  --hp: #d9544a;
  --en: #6cb3df;
  --am: #d9a546;
  --red: #e06c5a;
  --orange-1: #b06b1a;
  --orange: var(--orange-1);   /* алиас для var(--orange) — используется в 21 местах JS, ранее была НЕ определена */
  --orange-2: #7e4b0c;
}

body.theme-steel {
  background-color: #0e1013;
  background-image:
    /* пересечённые царапины (диагональные лёгкие полосы) */
    repeating-linear-gradient(45deg,
      rgba(255,255,255,.018) 0 1px,
      transparent 1px 4px),
    repeating-linear-gradient(-45deg,
      rgba(255,255,255,.012) 0 1px,
      transparent 1px 7px),
    /* зернистость — мелкая клетка из светлых точек */
    radial-gradient(rgba(255,255,255,.025) 1px, transparent 1.5px),
    /* верхний холодный отблеск */
    radial-gradient(ellipse 100% 60% at 50% -20%,
      rgba(120, 150, 180, .12), transparent 70%),
    /* стальная подложка с градиентом */
    linear-gradient(180deg, #1a1d22 0%, #0e1013 100%);
  background-size: auto, auto, 8px 8px, auto, auto;
  background-attachment: fixed;
}

body.theme-steel #wrap {
  background: rgba(20, 23, 27, .72);
  border-left: 1px solid #2c333d;
  border-right: 1px solid #2c333d;
  box-shadow: 0 0 30px rgba(0,0,0,.5);
}

body.theme-steel #header {
  background: linear-gradient(180deg, #232831 0%, #181c22 100%);
  border-bottom: 2px solid #444c5b;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 2px 0 rgba(0,0,0,.4);
}

body.theme-steel .logo {
  color: #d6dfe8;
  text-shadow:
    0 1px 0 rgba(0,0,0,.7),
    0 0 12px rgba(180, 200, 220, .15);
  letter-spacing: .4em;
}

/* Карточки на стальной теме — словно металлические пластины с заклёпками */
body.theme-steel .card {
  background:
    linear-gradient(180deg, rgba(255,255,255,.025) 0%, transparent 30%),
    linear-gradient(180deg, #1f242c, #181c23);
  border: 1px solid #3a4250;
  border-radius: 5px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    inset 0 -1px 0 rgba(0,0,0,.3),
    0 2px 6px rgba(0,0,0,.55);
  position: relative;
}
body.theme-steel .card::before,
body.theme-steel .card::after {
  /* «Заклёпки» по углам — два псевдоэлемента в левом верхнем и правом нижнем */
  content: '';
  position: absolute;
  width: 4px; height: 4px; border-radius: 50%;
  background: radial-gradient(#5a6473 30%, #20252d 80%);
  box-shadow: 0 0 0 1px rgba(0,0,0,.4);
}
body.theme-steel .card::before { top: 5px; left: 5px; }
body.theme-steel .card::after  { bottom: 5px; right: 5px; }

/* Кнопки меню: матовый металл с фаской */
body.theme-steel .menu-btn {
  background:
    linear-gradient(180deg, rgba(255,255,255,.06) 0%, transparent 50%),
    linear-gradient(180deg, #2a313c, #1d222a);
  border: 1px solid #424b59;
  color: #d4dde8;
  text-shadow: 0 1px 0 rgba(0,0,0,.5);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 1px 3px rgba(0,0,0,.5);
}
body.theme-steel .menu-btn:hover {
  background:
    linear-gradient(180deg, rgba(255,255,255,.08) 0%, transparent 50%),
    linear-gradient(180deg, #303843, #232932);
}

body.theme-steel .btn {
  background:
    linear-gradient(180deg, rgba(255,255,255,.06) 0%, transparent 60%),
    linear-gradient(180deg, #2d343f, #1d222a);
  border: 1px solid #424b59;
  text-shadow: 0 1px 0 rgba(0,0,0,.5);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 1px 2px rgba(0,0,0,.5);
}
body.theme-steel .btn-orange {
  background: linear-gradient(180deg, #c47619, #7a4708);
  border-color: #4a2c05;
  color: #fff;
  text-shadow: 0 1px 1px rgba(0,0,0,.5);
}

body.theme-steel .res-row > div,
body.theme-steel .stat-row > div {
  border-right: 1px solid #2a313c;
}

body.theme-steel input,
body.theme-steel select,
body.theme-steel textarea {
  background: #14181d;
  border: 1px solid #353c48;
  color: #d4dde8;
}

body.theme-steel .tab {
  background: #1c2027;
  border-color: #353c48;
  text-shadow: 0 1px 0 rgba(0,0,0,.5);
}
body.theme-steel .tab.active {
  background: linear-gradient(180deg, #b06b1a, #7e4b0c);
}

body.theme-steel .bar {
  background: #0f1216;
  border-color: #353c48;
}

body.theme-steel .toast {
  background: rgba(28, 32, 38, .96);
  border-color: #4c5462;
  border-left-color: #b6c780;
}

/* ===================================================================
   ТЕМА 3: КИБЕР-ВОЙНА (футуристическая военная HUD-стилистика)
   Глубокая синева, неоновый бирюзовый, glassmorphism, угловые рамки.
   Активируется через body.theme-cyber
   =================================================================== */
body.theme-cyber {
  --bg: #040810;
  --panel: #0a1424;
  --panel-2: #0e1d33;
  --border: #1e3a5f;
  --border-dim: #14253d;
  --text: #cbe4ff;
  --dim: #6789a8;
  --green: #00ffd1;          /* неон-зелёный */
  --money: #00ffaa;
  --gold: #ffcd00;
  --hp: #ff3a4d;
  --en: #00d4ff;
  --am: #ffb800;
  --red: #ff4060;
  --orange-1: #00d4ff;       /* акцент на холодных тонах */
  --orange: var(--orange-1);   /* алиас для var(--orange) — используется в 21 местах JS, ранее была НЕ определена */
  --orange-2: #0288d1;
}

body.theme-cyber {
  background-color: #02050a;
  background-image:
    /* HUD-сетка: тонкие линии */
    linear-gradient(rgba(0, 212, 255, .04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 212, 255, .04) 1px, transparent 1px),
    /* свечение по углам */
    radial-gradient(ellipse 60% 40% at 10% 0%, rgba(0, 212, 255, .12), transparent 60%),
    radial-gradient(ellipse 60% 40% at 100% 100%, rgba(0, 255, 209, .08), transparent 60%),
    /* основа */
    linear-gradient(180deg, #061425 0%, #02050a 100%);
  background-size: 32px 32px, 32px 32px, auto, auto, auto;
  background-attachment: fixed;
  font-family: 'Rajdhani', 'Inter', system-ui, -apple-system, sans-serif;
  letter-spacing: 0.02em;
}

body.theme-cyber #wrap {
  background: rgba(6, 16, 32, .65);
  backdrop-filter: blur(8px);
  border-left: 1px solid #1e3a5f;
  border-right: 1px solid #1e3a5f;
  box-shadow: 0 0 40px rgba(0, 212, 255, .15);
}

body.theme-cyber #header {
  background: linear-gradient(135deg, #0e1d33 0%, #061425 100%);
  border-bottom: 1px solid #00d4ff;
  box-shadow: 0 0 20px rgba(0, 212, 255, .25), inset 0 1px 0 rgba(0, 212, 255, .15);
  position: relative;
}
/* Угловые декоративные элементы шапки */
body.theme-cyber #header::before,
body.theme-cyber #header::after {
  content: ''; position: absolute; top: 6px; width: 14px; height: 14px;
  border: 2px solid #00d4ff; opacity: .8;
}
body.theme-cyber #header::before { left: 6px;  border-right: none; border-bottom: none; }
body.theme-cyber #header::after  { right: 6px; border-left: none;  border-bottom: none; }

body.theme-cyber .logo {
  color: #00d4ff;
  text-shadow: 0 0 8px rgba(0, 212, 255, .8), 0 0 18px rgba(0, 212, 255, .35);
  letter-spacing: .5em;
}
body.theme-cyber .logo .star { color: #00ffd1; text-shadow: 0 0 6px #00ffd1; }

/* Карточки: матовое стекло с углами и неоновой полосой сверху */
body.theme-cyber .card {
  background: linear-gradient(180deg, rgba(14, 29, 51, .8), rgba(10, 20, 36, .6));
  border: 1px solid #1e3a5f;
  border-top: 1px solid #00d4ff;
  border-radius: 0;
  position: relative;
  backdrop-filter: blur(4px);
  box-shadow: inset 0 0 30px rgba(0, 212, 255, .04), 0 2px 8px rgba(0, 0, 0, .4);
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
}

/* Кнопки меню: HUD-стиль с угловыми зарубками */
body.theme-cyber .menu-btn {
  background: linear-gradient(180deg, rgba(0, 212, 255, .08), rgba(14, 29, 51, .6));
  border: 1px solid #1e5380;
  color: #cbe4ff;
  border-radius: 0;
  position: relative;
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
  transition: all .15s ease;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 500;
}
body.theme-cyber .menu-btn:hover {
  background: linear-gradient(180deg, rgba(0, 212, 255, .18), rgba(14, 29, 51, .8));
  border-color: #00d4ff;
  color: #ffffff;
  box-shadow: 0 0 16px rgba(0, 212, 255, .35), inset 0 0 12px rgba(0, 212, 255, .15);
}

body.theme-cyber .btn {
  background: linear-gradient(180deg, rgba(0, 212, 255, .12), rgba(14, 29, 51, .6));
  border: 1px solid #1e5380;
  color: #cbe4ff;
  border-radius: 0;
  letter-spacing: 0.06em;
  clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
}
body.theme-cyber .btn:hover:not(:disabled) {
  background: linear-gradient(180deg, rgba(0, 212, 255, .25), rgba(14, 29, 51, .8));
  border-color: #00d4ff;
  box-shadow: 0 0 12px rgba(0, 212, 255, .4);
}
body.theme-cyber .btn-orange {
  background: linear-gradient(180deg, #00d4ff, #0288d1);
  color: #001220;
  border-color: #00ffd1;
  text-shadow: none;
  font-weight: 700;
  box-shadow: 0 0 16px rgba(0, 212, 255, .5);
}
body.theme-cyber .btn-orange:hover {
  background: linear-gradient(180deg, #00ffd1, #00d4ff);
  box-shadow: 0 0 24px rgba(0, 255, 209, .7);
}
body.theme-cyber .btn-green {
  background: linear-gradient(180deg, #00ffd1, #00a880);
  color: #001a14;
  border-color: #00ffd1;
}
body.theme-cyber .btn-red {
  background: linear-gradient(180deg, #ff4060, #c01a3a);
  color: #fff;
  border-color: #ff6080;
}

body.theme-cyber .res-row > div,
body.theme-cyber .stat-row > div {
  border-right: 1px solid #1e3a5f;
}
body.theme-cyber .badge {
  background: rgba(0, 212, 255, .2);
  border: 1px solid #00d4ff;
  color: #00d4ff;
  border-radius: 0;
  text-shadow: 0 0 4px rgba(0, 212, 255, .6);
}
body.theme-cyber .badge.green {
  background: rgba(0, 255, 209, .2);
  border-color: #00ffd1;
  color: #00ffd1;
}

body.theme-cyber input,
body.theme-cyber select,
body.theme-cyber textarea {
  background: #061425;
  border: 1px solid #1e5380;
  color: #cbe4ff;
  border-radius: 0;
}
body.theme-cyber input:focus,
body.theme-cyber select:focus,
body.theme-cyber textarea:focus {
  border-color: #00d4ff;
  box-shadow: 0 0 0 1px #00d4ff, 0 0 8px rgba(0, 212, 255, .3);
}

body.theme-cyber .tab {
  background: rgba(14, 29, 51, .6);
  border: 1px solid #1e3a5f;
  color: #cbe4ff;
  border-radius: 0;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
body.theme-cyber .tab.active {
  background: linear-gradient(180deg, #00d4ff, #0288d1);
  color: #001220;
  border-color: #00ffd1;
  box-shadow: 0 0 12px rgba(0, 212, 255, .4);
}

body.theme-cyber .bar {
  background: #02091a;
  border: 1px solid #1e3a5f;
  border-radius: 0;
}
body.theme-cyber .bar-fill.xp, body.theme-cyber .bar-fill.gold {
  background: linear-gradient(90deg, #00d4ff, #00ffd1);
  box-shadow: 0 0 8px rgba(0, 212, 255, .5);
}
body.theme-cyber .bar-fill.hp { background: linear-gradient(90deg, #ff4060, #ff8090); }
body.theme-cyber .bar-fill.en { background: linear-gradient(90deg, #00d4ff, #0288d1); }
body.theme-cyber .bar-fill.am { background: linear-gradient(90deg, #ffcd00, #ffb800); }

body.theme-cyber .toast {
  background: rgba(6, 16, 32, .96);
  border: 1px solid #00d4ff;
  border-left: 4px solid #00ffd1;
  color: #cbe4ff;
  box-shadow: 0 0 16px rgba(0, 212, 255, .3);
  border-radius: 0;
}

body.theme-cyber .title {
  color: #00d4ff;
  letter-spacing: 0.2em;
  text-shadow: 0 0 6px rgba(0, 212, 255, .4);
  border-bottom: 1px solid rgba(0, 212, 255, .25);
  padding-bottom: 6px;
}

body.theme-cyber .gold { color: #00d4ff; }
body.theme-cyber .name { color: #ffffff; }
body.theme-cyber .money { color: #00ffd1; }


/* ===================================================================
   ТЕМА 3: КИБЕР-ВОЙНА (футуристический военный HUD)
   Голографический интерфейс: тёмно-синяя глубина, неоновое свечение,
   угловые скосы (clip-path) на карточках, тонкий геометрический шрифт.
   Активируется body.theme-cyber
   =================================================================== */
body.theme-cyber {
  --bg: #050810;
  --panel: #0a1320;
  --panel-2: #0f1c2e;
  --border: #1e3a5f;
  --border-dim: #142844;
  --text: #cfe6ff;
  --dim: #5c7da3;
  --green: #00d4ff;        /* основной неоновый бирюзовый */
  --money: #00ffd1;        /* зелёный неон */
  --gold: #ffce47;         /* золото немного приглушённое */
  --hp: #ff3b6b;
  --en: #00b8ff;
  --am: #ffaa00;
  --red: #ff4d6d;
  --orange-1: #00a8d4;     /* у кнопок будет бирюзовый акцент */
  --orange: var(--orange-1);   /* алиас для var(--orange) — используется в 21 местах JS, ранее была НЕ определена */
  --orange-2: #006b8c;
}

body.theme-cyber {
  background-color: #03060e;
  background-image:
    /* лёгкие сканлайны для эффекта монитора */
    repeating-linear-gradient(0deg,
      rgba(0, 212, 255, .025) 0 1px,
      transparent 1px 3px),
    /* тонкая сетка HUD 32x32 */
    linear-gradient(rgba(0, 200, 255, .04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 200, 255, .04) 1px, transparent 1px),
    /* радиальные пятна свечения по углам */
    radial-gradient(ellipse 60% 40% at 10% 5%, rgba(0, 212, 255, .12), transparent 60%),
    radial-gradient(ellipse 60% 40% at 90% 95%, rgba(0, 255, 209, .08), transparent 60%),
    /* основной градиент глубины */
    linear-gradient(180deg, #050a14 0%, #020408 100%);
  background-size: auto, 32px 32px, 32px 32px, auto, auto, auto;
  background-attachment: fixed;
  color: var(--text);
  font-family: 'JetBrains Mono', 'Consolas', 'Menlo', monospace, sans-serif;
  letter-spacing: 0.01em;
}

body.theme-cyber #wrap {
  background: rgba(8, 16, 28, .55);
  border-left: 1px solid #1e3a5f;
  border-right: 1px solid #1e3a5f;
  box-shadow: 0 0 60px rgba(0, 100, 180, .25), inset 0 0 100px rgba(0, 30, 60, .3);
  backdrop-filter: blur(2px);
}

body.theme-cyber #header {
  background: linear-gradient(180deg, #0a1828 0%, #050a14 100%);
  border-bottom: 1px solid #1e3a5f;
  box-shadow: 0 0 20px rgba(0, 212, 255, .15);
  position: relative;
}
/* Угловые HUD-скобки на шапке */
body.theme-cyber #header::before,
body.theme-cyber #header::after {
  content: '';
  position: absolute;
  width: 18px; height: 18px;
  border: 2px solid #00d4ff;
  box-shadow: 0 0 8px rgba(0, 212, 255, .6);
}
body.theme-cyber #header::before { top: 6px; left: 6px; border-right: 0; border-bottom: 0; }
body.theme-cyber #header::after  { bottom: 6px; right: 6px; border-left: 0; border-top: 0; }

body.theme-cyber .logo {
  color: #00d4ff;
  text-shadow: 0 0 12px rgba(0, 212, 255, .8), 0 0 30px rgba(0, 212, 255, .4);
  letter-spacing: .5em;
  font-family: 'Orbitron', 'JetBrains Mono', monospace;
  font-weight: 700;
}

/* Карточки — угловые «дисплеи» с обрезкой углов */
body.theme-cyber .card {
  background:
    linear-gradient(135deg, rgba(0, 212, 255, .04) 0%, transparent 30%),
    linear-gradient(180deg, rgba(20, 40, 65, .85), rgba(10, 20, 35, .9));
  border: 1px solid #1e3a5f;
  border-radius: 0;
  /* Срезы по двум углам — визитная карточка кибер-HUD */
  clip-path: polygon(
    14px 0, 100% 0,
    100% calc(100% - 14px), calc(100% - 14px) 100%,
    0 100%, 0 14px
  );
  position: relative;
  box-shadow: 0 0 12px rgba(0, 180, 255, .1), inset 0 0 30px rgba(0, 60, 100, .15);
}
body.theme-cyber .card::before {
  /* Светящаяся линия слева как индикатор активности */
  content: '';
  position: absolute;
  left: 0; top: 18px; bottom: 18px; width: 2px;
  background: linear-gradient(180deg, transparent, #00d4ff, transparent);
  box-shadow: 0 0 8px rgba(0, 212, 255, .8);
}

/* Кнопки меню — стилизованы под HUD-интерфейс */
body.theme-cyber .menu-btn {
  background:
    linear-gradient(180deg, rgba(0, 212, 255, .08) 0%, transparent 50%),
    linear-gradient(180deg, #0f1c2e, #0a1320);
  border: 1px solid #1e3a5f;
  color: #cfe6ff;
  border-radius: 0;
  clip-path: polygon(
    10px 0, 100% 0,
    100% calc(100% - 10px), calc(100% - 10px) 100%,
    0 100%, 0 10px
  );
  text-shadow: 0 0 6px rgba(0, 212, 255, .3);
  transition: all .15s ease;
  font-family: inherit;
  letter-spacing: 0.05em;
}
body.theme-cyber .menu-btn:hover {
  background:
    linear-gradient(180deg, rgba(0, 212, 255, .18) 0%, transparent 50%),
    linear-gradient(180deg, #14283f, #0d1828);
  box-shadow: 0 0 16px rgba(0, 212, 255, .25), inset 0 0 12px rgba(0, 212, 255, .12);
  border-color: #00d4ff;
}

/* Стандартные кнопки */
body.theme-cyber .btn {
  background: linear-gradient(180deg, #14283f, #0a1320);
  border: 1px solid #1e3a5f;
  color: #cfe6ff;
  border-radius: 0;
  clip-path: polygon(
    8px 0, 100% 0,
    100% calc(100% - 8px), calc(100% - 8px) 100%,
    0 100%, 0 8px
  );
  text-shadow: 0 0 4px rgba(0, 212, 255, .3);
  letter-spacing: 0.04em;
  transition: all .15s ease;
}
body.theme-cyber .btn:hover:not(:disabled) {
  background: linear-gradient(180deg, #1a3552, #0f1c2e);
  box-shadow: 0 0 12px rgba(0, 212, 255, .35);
  border-color: #00d4ff;
}
body.theme-cyber .btn-orange {
  background: linear-gradient(180deg, #00a8d4, #006b8c);
  border-color: #00d4ff;
  color: #fff;
  text-shadow: 0 0 8px rgba(0, 212, 255, .9), 0 1px 0 rgba(0,0,0,.5);
  font-weight: 700;
  box-shadow: 0 0 14px rgba(0, 212, 255, .4);
}
body.theme-cyber .btn-orange:hover:not(:disabled) {
  background: linear-gradient(180deg, #00c8f7, #00829b);
  box-shadow: 0 0 20px rgba(0, 212, 255, .6);
}
body.theme-cyber .btn-green {
  background: linear-gradient(180deg, #00b8a0, #006b5a);
  border-color: #00ffd1;
  color: #fff;
  text-shadow: 0 0 6px rgba(0, 255, 209, .8);
}
body.theme-cyber .btn-red {
  background: linear-gradient(180deg, #cc3355, #8b1b35);
  border-color: #ff4d6d;
  color: #fff;
  text-shadow: 0 0 6px rgba(255, 77, 109, .6);
}

body.theme-cyber input,
body.theme-cyber select,
body.theme-cyber textarea {
  background: rgba(5, 12, 22, .85);
  border: 1px solid #1e3a5f;
  border-radius: 0;
  color: #cfe6ff;
  font-family: inherit;
}
body.theme-cyber input:focus,
body.theme-cyber select:focus,
body.theme-cyber textarea:focus {
  border-color: #00d4ff;
  box-shadow: 0 0 10px rgba(0, 212, 255, .35);
  outline: none;
}

/* Прогресс-бары: неоновое свечение */
body.theme-cyber .bar {
  background: #050a14;
  border: 1px solid #1e3a5f;
  border-radius: 0;
}
body.theme-cyber .bar-fill {
  box-shadow: 0 0 8px currentColor;
}

/* Вкладки */
body.theme-cyber .tab {
  background: rgba(15, 28, 46, .7);
  border: 1px solid #1e3a5f;
  border-radius: 0;
  clip-path: polygon(
    8px 0, calc(100% - 8px) 0,
    100% 100%, 0 100%
  );
  text-shadow: 0 0 4px rgba(0, 212, 255, .3);
}
body.theme-cyber .tab.active {
  background: linear-gradient(180deg, #00a8d4, #006b8c);
  color: #fff;
  text-shadow: 0 0 8px rgba(0, 212, 255, .9);
  box-shadow: 0 0 14px rgba(0, 212, 255, .4);
}

/* Бейджи */
body.theme-cyber .badge {
  background: linear-gradient(180deg, #ffce47, #c89a0e);
  color: #1a1a1a;
  text-shadow: none;
  border-radius: 0;
  font-weight: 700;
  box-shadow: 0 0 8px rgba(255, 206, 71, .4);
}
body.theme-cyber .badge.green {
  background: linear-gradient(180deg, #00ffd1, #008c70);
  color: #001a14;
  box-shadow: 0 0 8px rgba(0, 255, 209, .4);
}

/* Иконки шапки переопределяем под кибер-стиль */

/* Тосты */
body.theme-cyber .toast {
  background: rgba(8, 16, 28, .96);
  border: 1px solid #1e3a5f;
  border-left: 3px solid #00d4ff;
  color: #cfe6ff;
  border-radius: 0;
  text-shadow: 0 0 4px rgba(0, 212, 255, .2);
  box-shadow: 0 0 18px rgba(0, 212, 255, .25), 0 4px 14px rgba(0,0,0,.6);
  clip-path: polygon(
    10px 0, 100% 0,
    100% 100%, 0 100%, 0 10px
  );
}

/* Линии и сепараторы */
body.theme-cyber .hr {
  border-top: 1px solid #1e3a5f;
  background: linear-gradient(90deg, transparent, #00d4ff, transparent);
  height: 1px;
  border: 0;
}

/* Шапка ресурсов — цифровые акценты */
body.theme-cyber .res-row > div,
body.theme-cyber .stat-row > div {
  border-right: 1px solid #142844;
}
body.theme-cyber .money { color: var(--money); text-shadow: 0 0 6px rgba(0, 255, 209, .4); }
body.theme-cyber .gold  { color: var(--gold);  text-shadow: 0 0 6px rgba(255, 206, 71, .4); }

/* Акционный баннер */
body.theme-cyber .sale-banner {
  background: linear-gradient(180deg, rgba(0, 212, 255, .15), rgba(0, 212, 255, .04));
  border: 1px solid #00d4ff;
  color: #cfe6ff;
  border-radius: 0;
  text-shadow: 0 0 6px rgba(0, 212, 255, .4);
  box-shadow: 0 0 18px rgba(0, 212, 255, .25);
}
body.theme-cyber .sale-banner b { color: #00ffd1; }

/* ===================================================================
   ПОЛОСКА ОПЫТА В ШАПКЕ
   =================================================================== */
.xp-strip {
  position: relative;
  height: 18px;
  margin: 2px 0 4px;
  background: rgba(0,0,0,.35);
  border: 1px solid var(--border-dim);
  border-radius: 4px;
  overflow: hidden;
  cursor: pointer;
}
.xp-strip-fill {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  background: linear-gradient(90deg, #3a6b1f, #5b9c2f);
  transition: width .4s ease;
}
.xp-strip-label {
  position: absolute;
  left: 0; right: 0; top: 0; bottom: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px;
  color: #e8f0e0;
  text-shadow: 0 1px 2px rgba(0,0,0,.8);
  z-index: 1;
}
body.theme-steel .xp-strip-fill { background: linear-gradient(90deg, #5a6473, #8a96a8); }
body.theme-cyber .xp-strip {
  border-color: #1e3a5f;
  clip-path: polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%);
}
body.theme-cyber .xp-strip-fill {
  background: linear-gradient(90deg, #006b8c, #00d4ff);
  box-shadow: 0 0 8px rgba(0,212,255,.5);
}

/* Баннер «низкое здоровье» — над контентом */
.low-hp-banner {
  background: linear-gradient(180deg, #c0392b 0%, #922a1f 100%);
  color: #fff;
  padding: 10px 14px;
  text-align: center;
  cursor: pointer;
  font-size: 13px;
  border-top: 1px solid rgba(255,255,255,.15);
  text-shadow: 0 1px 2px rgba(0,0,0,.4);
  box-shadow: 0 2px 8px rgba(192, 57, 43, .4);
  animation: lowhp-pulse 1.6s ease-in-out infinite;
}
.low-hp-banner b { color: #ffd700; }
@keyframes lowhp-pulse {
  0%,100% { box-shadow: 0 2px 8px rgba(192, 57, 43, .4); }
  50%     { box-shadow: 0 2px 18px rgba(255, 64, 50, .8); }
}
body.theme-cyber .low-hp-banner {
  background: linear-gradient(180deg, #ff3b6b 0%, #8b1c3c 100%);
  text-shadow: 0 0 6px rgba(255, 59, 107, .8);
  border-top: 1px solid #ff3b6b;
}

/* ===================================================================
   ТЕМА 4: ПУСТЫННЫЙ ФРОНТ
   Тёплые песочные тона, выгоревший камуфляж, солнечный свет.
   =================================================================== */
body.theme-desert {
  --bg: #1a1308;
  --panel: #2b1e0d;
  --panel-2: #3a2912;
  --border: #6e4f1f;
  --border-dim: #4a3415;
  --text: #f5e9c8;
  --dim: #a89060;
  --green: #c9a44a;        /* выгоревший песочный «зелёный» */
  --money: #d4b454;        /* медно-золотой для денег */
  --gold: #ffd24a;         /* солнечное золото */
  --hp: #d75a3a;
  --en: #ffc658;
  --am: #c98a2c;
  --red: #c25030;
  --orange-1: #d99a3a;
  --orange: var(--orange-1);   /* алиас для var(--orange) — используется в 21 местах JS, ранее была НЕ определена */
  --orange-2: #9a6418;
}

body.theme-desert {
  background-color: #14100a;
  background-image:
    /* мелкая «песочная» зернистость */
    radial-gradient(ellipse 80% 60% at 30% 20%, rgba(255, 200, 100, .12), transparent 60%),
    radial-gradient(ellipse 70% 50% at 80% 90%, rgba(255, 160, 60, .08), transparent 60%),
    /* световые лучи сверху — эффект палящего солнца */
    linear-gradient(180deg, rgba(255, 210, 140, .07) 0%, transparent 35%),
    /* основной градиент глубины (тёплый песочный) */
    linear-gradient(180deg, #261b0c 0%, #14100a 100%);
  background-attachment: fixed;
  color: var(--text);
  font-family: Georgia, 'Times New Roman', serif;
}

body.theme-desert #wrap {
  background: rgba(35, 25, 12, .65);
  border-left: 1px solid #6e4f1f;
  border-right: 1px solid #6e4f1f;
  box-shadow: 0 0 50px rgba(180, 120, 40, .25);
}

body.theme-desert #header {
  background:
    linear-gradient(180deg, rgba(255, 200, 100, .08), transparent 50%),
    linear-gradient(180deg, #3a2912, #251a0a);
  border-bottom: 2px solid #6e4f1f;
  box-shadow: 0 2px 12px rgba(180, 120, 40, .2);
}

body.theme-desert .logo {
  color: #ffd24a;
  text-shadow: 0 0 14px rgba(255, 210, 74, .6), 0 2px 4px rgba(0,0,0,.7);
  letter-spacing: .55em;
}
body.theme-desert .logo .star { color: #ffd24a; }

body.theme-desert .card {
  background:
    linear-gradient(180deg, rgba(110, 79, 31, .12), transparent 60%),
    linear-gradient(180deg, #2e2110, #20170a);
  border: 1px solid #6e4f1f;
  border-radius: 4px;
  box-shadow: 0 2px 6px rgba(0,0,0,.4), inset 0 1px 0 rgba(255, 200, 100, .08);
}

body.theme-desert .menu-btn {
  background: linear-gradient(180deg, #3a2912, #251a0a);
  border: 1px solid #6e4f1f;
  border-radius: 4px;
  color: #f5e9c8;
  text-shadow: 0 1px 2px rgba(0,0,0,.5);
  font-family: inherit;
  letter-spacing: .03em;
}
body.theme-desert .menu-btn:hover {
  background: linear-gradient(180deg, #4a3415, #2e2110);
  border-color: #9a6418;
  box-shadow: 0 0 10px rgba(217, 154, 58, .35);
}

body.theme-desert .btn {
  background: linear-gradient(180deg, #4a3415, #2e2110);
  border: 1px solid #6e4f1f;
  border-radius: 3px;
  color: #f5e9c8;
}
body.theme-desert .btn:hover:not(:disabled) {
  background: linear-gradient(180deg, #5a3f1b, #3a2912);
  border-color: #d99a3a;
}
body.theme-desert .btn-orange {
  background: linear-gradient(180deg, #d99a3a, #9a6418);
  border-color: #ffd24a;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,.6);
  font-weight: 700;
  box-shadow: 0 0 12px rgba(255, 210, 74, .3);
}
body.theme-desert .btn-orange:hover:not(:disabled) {
  background: linear-gradient(180deg, #f0b04a, #b87a20);
  box-shadow: 0 0 18px rgba(255, 210, 74, .55);
}
body.theme-desert .btn-green {
  background: linear-gradient(180deg, #8b7a30, #5a4818);
  color: #fff;
}

body.theme-desert input,
body.theme-desert select,
body.theme-desert textarea {
  background: rgba(20, 15, 8, .85);
  border: 1px solid #6e4f1f;
  border-radius: 3px;
  color: #f5e9c8;
  font-family: inherit;
}
body.theme-desert input:focus,
body.theme-desert select:focus {
  border-color: #ffd24a;
  box-shadow: 0 0 8px rgba(255, 210, 74, .35);
  outline: none;
}

body.theme-desert .bar {
  background: #14100a;
  border: 1px solid #4a3415;
  border-radius: 4px;
}

body.theme-desert .tab {
  background: rgba(35, 25, 12, .7);
  border: 1px solid #6e4f1f;
  border-radius: 4px 4px 0 0;
  color: #d4b454;
}
body.theme-desert .tab.active {
  background: linear-gradient(180deg, #d99a3a, #9a6418);
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,.6);
}

body.theme-desert .badge {
  background: linear-gradient(180deg, #ffd24a, #b87a20);
  color: #1a1308;
  border-radius: 3px;
  font-weight: 700;
}
body.theme-desert .badge.green {
  background: linear-gradient(180deg, #c9a44a, #8b6e20);
  color: #1a1308;
}

body.theme-desert .toast {
  background: rgba(40, 28, 14, .96);
  border: 1px solid #6e4f1f;
  border-left: 3px solid #ffd24a;
  color: #f5e9c8;
  border-radius: 3px;
  box-shadow: 0 4px 16px rgba(0,0,0,.6), 0 0 12px rgba(255, 210, 74, .2);
}

body.theme-desert .hr {
  border-top: 1px solid #4a3415;
  background: linear-gradient(90deg, transparent, #6e4f1f, transparent);
  height: 1px; border: 0;
}

body.theme-desert .money { color: var(--money); }
body.theme-desert .gold  { color: var(--gold); text-shadow: 0 0 6px rgba(255, 210, 74, .4); }

body.theme-desert .xp-strip {
  border-color: #4a3415;
}
body.theme-desert .xp-strip-fill {
  background: linear-gradient(90deg, #8b6e20, #ffd24a);
  box-shadow: 0 0 6px rgba(255, 210, 74, .4);
}

body.theme-desert .sale-banner {
  background: linear-gradient(180deg, rgba(255, 210, 74, .15), rgba(217, 154, 58, .05));
  border: 1px solid #ffd24a;
  color: #f5e9c8;
  border-radius: 4px;
}
body.theme-desert .sale-banner b { color: #ffd24a; }


/* ===================================================================
   ТЕМА 5: ПОЛУНОЧНЫЙ ШТАБ (тёмная, без контрастных цветов)
   Мягкие графитовые серые тона, приглушённый текст, минимум насыщенности.
   Идеально для ночной игры — не режет глаза.
   =================================================================== */
body.theme-noir {
  --bg: #0e0e10;
  --panel: #18181b;
  --panel-2: #1f1f23;
  --border: #2c2c30;
  --border-dim: #232327;
  --text: #c8c8cc;
  --dim: #6e6e74;
  --green: #8a9a85;        /* приглушённый зелёно-серый */
  --money: #b5b5a0;        /* серо-бежевый для денег */
  --gold: #c4b48a;         /* приглушённое золото */
  --hp: #b56565;
  --en: #b59060;
  --am: #8a8590;
  --red: #a85a5a;
  --orange-1: #6a6a72;
  --orange: var(--orange-1);   /* алиас для var(--orange) — используется в 21 местах JS, ранее была НЕ определена */
  --orange-2: #45454c;
}

body.theme-noir {
  background-color: #0a0a0c;
  background-image:
    /* очень слабый шум для текстуры */
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(120, 120, 130, .04), transparent 70%),
    linear-gradient(180deg, #131316 0%, #0a0a0c 100%);
  background-attachment: fixed;
  color: var(--text);
}

body.theme-noir #wrap {
  background: rgba(20, 20, 23, .55);
  border-left: 1px solid #2c2c30;
  border-right: 1px solid #2c2c30;
  box-shadow: 0 0 40px rgba(0,0,0,.6);
}

body.theme-noir #header {
  background: linear-gradient(180deg, #1f1f23, #131316);
  border-bottom: 1px solid #2c2c30;
}

body.theme-noir .logo {
  color: #c4b48a;
  text-shadow: 0 1px 3px rgba(0,0,0,.6);
  letter-spacing: .55em;
}
body.theme-noir .logo .star { color: #b5b5a0; }

body.theme-noir .card {
  background: linear-gradient(180deg, #1c1c20, #18181b);
  border: 1px solid #2c2c30;
  border-radius: 6px;
  box-shadow: 0 2px 6px rgba(0,0,0,.4);
}

body.theme-noir .menu-btn {
  background: linear-gradient(180deg, #1f1f23, #18181b);
  border: 1px solid #2c2c30;
  border-radius: 6px;
  color: #c8c8cc;
}
body.theme-noir .menu-btn:hover {
  background: linear-gradient(180deg, #26262a, #1d1d21);
  border-color: #3a3a40;
}

body.theme-noir .btn {
  background: linear-gradient(180deg, #26262a, #1c1c20);
  border: 1px solid #2c2c30;
  border-radius: 4px;
  color: #c8c8cc;
}
body.theme-noir .btn:hover:not(:disabled) {
  background: linear-gradient(180deg, #2e2e32, #232327);
  border-color: #3a3a40;
}
body.theme-noir .btn-orange {
  background: linear-gradient(180deg, #4a4a52, #2e2e35);
  border-color: #5a5a62;
  color: #e0e0e4;
  font-weight: 600;
}
body.theme-noir .btn-orange:hover:not(:disabled) {
  background: linear-gradient(180deg, #555560, #383840);
  border-color: #6e6e74;
}
body.theme-noir .btn-green {
  background: linear-gradient(180deg, #4a5a4a, #2e3a2e);
  border-color: #5a6a5a;
  color: #d8e0d8;
}
body.theme-noir .btn-red {
  background: linear-gradient(180deg, #5a3a3a, #3a2424);
  border-color: #6e4848;
  color: #d8c8c8;
}

body.theme-noir input,
body.theme-noir select,
body.theme-noir textarea {
  background: rgba(12, 12, 14, .85);
  border: 1px solid #2c2c30;
  border-radius: 4px;
  color: #c8c8cc;
}
body.theme-noir input:focus,
body.theme-noir select:focus {
  border-color: #4a4a52;
  box-shadow: 0 0 6px rgba(120, 120, 130, .2);
  outline: none;
}

body.theme-noir .bar {
  background: #0c0c0e;
  border: 1px solid #232327;
  border-radius: 3px;
}
body.theme-noir .bar-fill {
  filter: saturate(0.5) brightness(0.85); /* приглушаем цвета прогресс-баров */
}

body.theme-noir .tab {
  background: rgba(28, 28, 32, .7);
  border: 1px solid #2c2c30;
  color: #8a8a90;
}
body.theme-noir .tab.active {
  background: linear-gradient(180deg, #45454c, #2e2e35);
  color: #e0e0e4;
}

body.theme-noir .badge {
  background: linear-gradient(180deg, #5a5a62, #38383e);
  color: #e0e0e4;
}
body.theme-noir .badge.green {
  background: linear-gradient(180deg, #4a5a4a, #2e3a2e);
  color: #d8e0d8;
}

body.theme-noir .toast {
  background: rgba(24, 24, 27, .96);
  border: 1px solid #2c2c30;
  border-left: 3px solid #5a5a62;
  color: #c8c8cc;
  border-radius: 4px;
  box-shadow: 0 4px 16px rgba(0,0,0,.7);
}

body.theme-noir .hr {
  border-top: 1px solid #232327;
  background: transparent;
}

body.theme-noir .money { color: var(--money); }
body.theme-noir .gold  { color: var(--gold); }

body.theme-noir .xp-strip { border-color: #2c2c30; }
body.theme-noir .xp-strip-fill {
  background: linear-gradient(90deg, #45454c, #6e6e74);
}

body.theme-noir .sale-banner {
  background: linear-gradient(180deg, rgba(196, 180, 138, .08), rgba(196, 180, 138, .02));
  border: 1px solid #5a5a62;
  color: #c8c8cc;
  border-radius: 4px;
}
body.theme-noir .sale-banner b { color: #c4b48a; }


body.theme-noir .low-hp-banner {
  background: linear-gradient(180deg, #6a3a3a, #4a2424);
  color: #e0d0d0;
  border-top: 1px solid #8a4a4a;
  box-shadow: 0 2px 6px rgba(106, 58, 58, .3);
  animation: none; /* без пульсации — спокойная тема */
}

/* ===================================================================
   ТЕМА 6: АВРОРА (нежно-молочная, мягкий контраст)
   Светлая, но не белая: тёплое топлёное молоко с лёгким бежевым
   подтоном. Контраст намеренно снижен — текст не чёрный, а тёплый
   какао; рамки и тени мягкие, без резких градиентных контуров, чтобы
   интерфейс был светлым и при этом не резал глаза.
   =================================================================== */
body.theme-aurora {
  --bg: #f6f1e7;           /* топлёное молоко */
  --panel: #fdfaf4;        /* карточки — светлее фона, «поднимаются» */
  --panel-2: #f4eee2;      /* поля и кнопки меню */
  --border: #e6dcc9;       /* мягкая тёплая рамка */
  --border-dim: #efe8db;
  --text: #574c3d;         /* тёплое какао вместо чёрного — мягче для глаз */
  --dim: #9b8e7b;
  --green: #7b9663;        /* мягкая олива */
  --money: #6f9a5b;
  --gold: #c19a55;         /* приглушённое тёплое золото */
  --hp: #c47f6c;
  --en: #7ba2bf;
  --am: #c6a463;
  --red: #c07f6c;          /* терракот вместо алого */
  --orange-1: #cf9d5f;     /* мягкая карамель */
  --orange: var(--orange-1);   /* алиас для var(--orange) — используется в 21 местах JS */
  --orange-2: #b5813f;
}

body.theme-aurora {
  background-color: #f6f1e7;
  /* Очень мягкие тёплые пятна: дают глубину, но почти не заметны */
  background-image:
    radial-gradient(ellipse 70% 55% at 12% 0%, rgba(207, 157, 95, .05), transparent 70%),
    radial-gradient(ellipse 60% 50% at 92% 18%, rgba(123, 150, 99, .04), transparent 70%),
    linear-gradient(180deg, #faf6ee 0%, #f2ebdd 100%);
  background-attachment: fixed;
  color: var(--text);
  font-family: 'Segoe UI', -apple-system, system-ui, sans-serif;
}

body.theme-aurora #wrap {
  background: rgba(253, 250, 244, .82);
  border-left: 1px solid var(--border-dim);
  border-right: 1px solid var(--border-dim);
  box-shadow: 0 0 50px rgba(150, 125, 90, .06);
}

body.theme-aurora #header {
  background: rgba(250, 246, 238, .93);
  border-bottom: 1px solid var(--border-dim);
  backdrop-filter: blur(6px);
}

body.theme-aurora .logo {
  color: #a8804a;
  letter-spacing: .5em;
  font-weight: 600;
  text-shadow: none;
}
body.theme-aurora .logo .star { color: var(--gold); }

body.theme-aurora .card {
  background: var(--panel);
  border: 1px solid var(--border-dim);
  border-radius: 14px;
  box-shadow: 0 1px 3px rgba(120, 100, 70, .05), 0 6px 18px rgba(120, 100, 70, .04);
}
body.theme-aurora .card.err { border-color: #e0bdb0; background: #fdf4f0; }

/* Кнопки меню: мягкая молочная плитка без градиентного контура */
body.theme-aurora .menu-btn {
  background: linear-gradient(180deg, #fdfaf4, #f6f0e4);
  border: 1px solid var(--border);
  border-radius: 12px;
  color: var(--text);
  box-shadow: 0 1px 2px rgba(120, 100, 70, .05);
  font-weight: 600;
}
body.theme-aurora .menu-btn::before { content: none; }  /* убран резкий контур */
body.theme-aurora .menu-btn:hover {
  background: linear-gradient(180deg, #fffdf8, #faf4e9);
  border-color: #d9cbb2;
  box-shadow: 0 3px 10px rgba(150, 125, 90, .09);
}

body.theme-aurora .btn {
  background: #fdfaf4;
  border: 1px solid #ddd0b9;
  border-radius: 10px;
  color: var(--text);
  box-shadow: 0 1px 2px rgba(120, 100, 70, .05);
}
body.theme-aurora .btn:hover:not(:disabled) {
  background: #fffdf8;
  border-color: var(--orange-1);
  box-shadow: 0 2px 8px rgba(181, 129, 63, .12);
}
/* Главная кнопка действия — заметная, но пастельная */
body.theme-aurora .btn-orange {
  background: linear-gradient(135deg, #d7a86a, #c08d47);
  border: 1px solid #b5813f;
  color: #fffaf1;
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(181, 129, 63, .2);
}
body.theme-aurora .btn-orange:hover:not(:disabled) {
  background: linear-gradient(135deg, #e0b075, #cb964e);
  box-shadow: 0 3px 12px rgba(181, 129, 63, .28);
}
body.theme-aurora .btn-green {
  background: linear-gradient(135deg, #8aa771, #6f8c58);
  border: 1px solid #668150;
  color: #fbfdf8;
  font-weight: 600;
}
body.theme-aurora .btn-red {
  background: linear-gradient(135deg, #cc8b78, #b3705d);
  border: 1px solid #a36553;
  color: #fff9f6;
  font-weight: 600;
}

/* Поля ввода: молочные, с тёплой подсветкой фокуса */
body.theme-aurora input,
body.theme-aurora select,
body.theme-aurora textarea,
body.theme-aurora .field {
  background: #fffdf8;
  border: 1px solid #e2d7c2;
  border-radius: 10px;
  color: var(--text);
}
body.theme-aurora input:focus,
body.theme-aurora select:focus,
body.theme-aurora textarea:focus,
body.theme-aurora .field:focus {
  border-color: var(--orange-1);
  box-shadow: 0 0 0 3px rgba(207, 157, 95, .16);
  outline: none;
}
body.theme-aurora .field.field-bad  { border-color: var(--red);   box-shadow: 0 0 0 3px rgba(192, 127, 108, .15); }
body.theme-aurora .field.field-good { border-color: var(--money); box-shadow: 0 0 0 3px rgba(111, 154, 91, .15); }
body.theme-aurora .field::placeholder { color: #b3a894; }

body.theme-aurora .bar {
  background: #ece4d6;
  border: 1px solid var(--border-dim);
  border-radius: 8px;
}

body.theme-aurora .tab {
  background: #f7f1e6;
  border: 1px solid var(--border);
  border-radius: 10px 10px 0 0;
  color: var(--dim);
  font-weight: 600;
}
body.theme-aurora .tab.active {
  background: var(--panel);
  border-color: var(--orange-1);
  border-bottom-color: var(--panel);
  color: #a8804a;
}

body.theme-aurora .badge {
  background: linear-gradient(135deg, #d3ab6a, #c19a55);
  color: #fffaf1;
  border-radius: 8px;
  font-weight: 600;
}
body.theme-aurora .badge.green {
  background: linear-gradient(135deg, #8aa771, #6f8c58);
}

body.theme-aurora .toast {
  background: #fdfaf4;
  border: 1px solid var(--border);
  border-left: 3px solid var(--orange-1);
  color: var(--text);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(120, 100, 70, .1);
}

body.theme-aurora .hr {
  border-top: 1px solid var(--border-dim);
  background: transparent;
}

body.theme-aurora .money { color: var(--money); font-weight: 600; }
body.theme-aurora .gold  { color: #b08a45; font-weight: 600; }
body.theme-aurora .muted { color: var(--dim); }

body.theme-aurora .xp-strip {
  background: #ece4d6;
  border: 1px solid var(--border-dim);
  border-radius: 8px;
}
body.theme-aurora .xp-strip-fill {
  background: linear-gradient(90deg, #d7a86a, #8aa771);
}
body.theme-aurora .xp-strip-label {
  color: var(--text);
  text-shadow: none;
}

body.theme-aurora .sale-banner {
  background: rgba(207, 157, 95, .09);
  border: 1px solid #e0cba7;
  color: var(--text);
  border-radius: 10px;
}
body.theme-aurora .sale-banner b { color: #a8804a; }

body.theme-aurora .low-hp-banner {
  background: linear-gradient(135deg, #cc8b78, #b3705d);
  color: #fff9f6;
  border-top: 1px solid #a36553;
}
body.theme-aurora .low-hp-banner b { color: #fff2ec; }

/* Профиль v2 и попапы в молочной теме */
body.theme-aurora .events-popup,
body.theme-aurora .ach-popup,
body.theme-aurora .game-dialog {
  background: var(--panel);
  border-color: var(--border);
  color: var(--text);
  box-shadow: 0 12px 40px rgba(120, 100, 70, .14);
}
body.theme-aurora .pf2-avatar { background-color: var(--panel-2); border-color: var(--border); }

/* ===================================================================
   РАМКИ ДЛЯ КАРТИНОК (контейнеры, секретные разработки)
   Универсальный стиль, не зависящий от темы: лёгкий полупрозрачный фон
   + тонкая обводка с акцентным цветом темы, чтобы изображение с
   прозрачным WebP-фоном не сливалось ни со светлым, ни с тёмным фоном.
   Работает одинаково на всех 6 темах.
   =================================================================== */
.img-frame {
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(ellipse at center, rgba(127, 127, 127, .14), rgba(127, 127, 127, .05));
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: inset 0 0 12px rgba(0, 0, 0, .12), 0 1px 3px rgba(0, 0, 0, .08);
  flex-shrink: 0;
  overflow: hidden;
}
.img-frame img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}
.img-frame-xs { width: 32px; height: 32px; border-radius: 6px; }
.img-frame-sm { width: 64px; height: 64px; }
.img-frame-row {
  width: clamp(96px, 26vw, 192px);
  height: clamp(96px, 26vw, 192px);
  padding: 10px;
} /* секретка в строке (слева от текста) — увеличено x2 на широких экранах, адаптивно на мобильных */
.img-frame-lg  { width: 100%; height: 192px; padding: 14px; }  /* контейнер — крупная картинка сверху — увеличено на 20% */

/* Сверхсекретная разработка — рамка с золотым свечением, чтобы выделялась */
.img-frame-super {
  border-color: var(--gold);
  box-shadow: inset 0 0 14px rgba(232, 184, 90, .18), 0 0 10px rgba(232, 184, 90, .25);
}

/* ---------- Карточка контейнера чёрного рынка (крупная, заметная) ---------- */
.container-card {
  padding: 0;
  overflow: hidden;
}
.container-card .img-frame-lg {
  border-radius: 12px 12px 0 0;
  border-left: none; border-right: none; border-top: none;
}
.container-card-body { padding: 14px 16px; text-align: left; }
.container-card-body .name { font-size: 16px; }

/* ---------- Секретные разработки: каждая занимает ОДНУ полную строку,
   слева крупная картинка, справа название + характеристики + кол-во ---------- */
.secret-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px;
  border-radius: 12px;
  background: rgba(127, 127, 127, .05);
  border: 1px solid var(--border-dim);
  margin-bottom: 10px;
}
.secret-row:last-child { margin-bottom: 0; }
.secret-row-empty { opacity: .55; }
.secret-row-empty .img-frame { filter: grayscale(1); opacity: .5; }
.secret-row-info { flex: 1; min-width: 0; }
.secret-row-name { font-weight: 700; font-size: 14px; margin-bottom: 4px; hyphens: auto; }
/* Узкий телефон: картинка 96px и отступы оставляли названию ~80px, и
   «Межконтинентальный» рвался на три куска. Картинку и поля ужимаем. */
@media (max-width: 400px) {
  .secret-row { gap: 8px; padding: 8px; }
  .secret-row .img-frame-row { width: 64px; height: 64px; padding: 6px; flex-shrink: 0; }
  .secret-row-name { font-size: 13px; }
  .secret-row-count { min-width: 32px; font-size: 16px; }
}
@media (max-width: 350px) {
  .secret-row-name { font-size: 12px; }
}
.secret-row-stats { font-size: 13px; }
.secret-row-count {
  font-size: 18px; font-weight: 800;
  min-width: 44px; text-align: right; flex-shrink: 0;
}
.secret-row-super {
  border-color: var(--gold);
  background: rgba(232, 184, 90, .06);
}

/* Темнее/контрастнее рамка на очень светлых темах (Аврора), чтобы
   изображение не «терялось» на бежевом/белом фоне */
body.theme-aurora .img-frame {
  background: radial-gradient(ellipse at center, rgba(61, 50, 37, .08), rgba(61, 50, 37, .02));
  border: 1.5px solid #c9b896;
  box-shadow: inset 0 0 10px rgba(61, 50, 37, .08), 0 1px 4px rgba(61, 50, 37, .1);
}
body.theme-aurora .secret-row {
  background: rgba(61, 50, 37, .03);
  border: 1px solid #ddd0b8;
}

/* На кибер-теме — рамка со свечением в духе HUD */
body.theme-cyber .img-frame {
  background: radial-gradient(ellipse at center, rgba(0, 212, 255, .08), rgba(0, 212, 255, .02));
  border: 1px solid #1e3a5f;
  box-shadow: inset 0 0 14px rgba(0, 212, 255, .1), 0 0 6px rgba(0, 212, 255, .15);
}

/* ---------- История открытий контейнеров: чисто вертикальная карточка,
   чтобы длинный список добычи не наезжал на дату/название ---------- */
.history-row {
  padding: 10px 0;
  border-bottom: 1px solid var(--border-dim);
}
.history-row:last-child { border-bottom: none; }
.history-row-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 2px;
}

/* Сворачиваемый блок построек защиты в окне атаки */
.def-buildings summary::-webkit-details-marker { display: none; }
.def-buildings summary { user-select: none; }
.def-buildings[open] .def-toggle::after { content: "Свернуть"; }
.def-buildings:not([open]) .def-toggle::after { content: "Показать"; }
.def-buildings .def-toggle::after { font-size: 13px; }

/* ========== Игровые диалоги (confirm/prompt) ========== */
.game-dialog-overlay {
  position: fixed; inset: 0;
  background: rgba(5, 8, 4, 0.82);
  backdrop-filter: blur(3px);
  z-index: 10050;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  animation: gd-fade 0.18s ease;
}
@keyframes gd-fade { from { opacity: 0; } to { opacity: 1; } }
.game-dialog {
  background: linear-gradient(160deg, #1a2310, #11160b);
  border: 1px solid var(--orange-1);
  border-radius: 14px;
  max-width: 380px; width: 100%;
  padding: 22px 20px 18px;
  box-shadow: 0 10px 40px rgba(0,0,0,0.6), inset 0 1px 0 rgba(233,199,92,0.08);
  animation: gd-pop 0.22s cubic-bezier(0.2, 0.9, 0.3, 1.2);
  position: relative;
}
@keyframes gd-pop { from { transform: scale(0.92) translateY(8px); opacity: 0; } to { transform: scale(1) translateY(0); opacity: 1; } }
.game-dialog::before {
  content: ""; position: absolute; inset: 0;
  border-radius: 14px; padding: 1px; pointer-events: none;
  background: linear-gradient(160deg, rgba(233,199,92,0.25), transparent 40%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
.game-dialog-icon {
  font-size: 38px; text-align: center; margin-bottom: 8px;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.5));
}
.game-dialog-title {
  font-size: 17px; font-weight: bold; text-align: center;
  color: var(--gold); margin-bottom: 10px;
  letter-spacing: 0.3px;
}
.game-dialog-body {
  font-size: 14px; color: var(--text); text-align: center;
  line-height: 1.5; margin-bottom: 14px;
}
/* ═══ Окно выдачи награды ═══
   Выигрыш, показанный всплывающей подсказкой, проходит мимо: она живёт
   пару секунд и тонет в перерисовке страницы. Окно закрывают руками. */
.reward-dialog { max-width: 320px; }
.reward-dialog-icon { animation: rw-pop .4s cubic-bezier(.2,.9,.3,1.6); }
@keyframes rw-pop { from { transform: scale(.4) rotate(-12deg); } to { transform: scale(1) rotate(0); } }
.reward-lines {
  display: flex; flex-direction: column; gap: 4px; align-items: center;
  margin-bottom: 12px;
}
.reward-line {
  display: flex; align-items: center; gap: 6px;
  font-size: 13px; color: var(--dim); text-align: center;
}
.reward-line-big {
  font-size: 26px; font-weight: 700; color: var(--gold);
  margin-bottom: 2px; text-shadow: 0 2px 8px rgba(233,199,92,.25);
}
.reward-line-big .ic-gold { width: 24px; height: 24px; }
.reward-line-ico { display: inline-flex; align-items: center; }
.reward-note {
  font-size: 12px; line-height: 1.35; color: var(--dim); text-align: center;
  border-top: 1px solid var(--border); padding-top: 8px; margin-bottom: 12px;
}

.game-dialog-input {
  width: 100%; box-sizing: border-box;
  padding: 11px 12px; margin-bottom: 4px;
  background: rgba(0,0,0,0.35);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text); font-size: 15px;
  font-family: inherit;
  transition: border-color 0.15s, box-shadow 0.15s;
  resize: vertical;
}
.game-dialog-input:focus {
  outline: none;
  border-color: var(--orange-1);
  box-shadow: 0 0 0 3px rgba(192,122,22,0.15);
}
.game-dialog-hint {
  font-size: 12px; color: var(--dim, #8a9472);
  margin: 4px 2px 0; text-align: left;
}
.game-dialog-actions {
  display: flex; gap: 10px; margin-top: 16px;
}
.game-dialog-actions .btn { flex: 1; padding: 12px; }

/* ===== Клуб офицеров: минное поле ===== */

/* ===== Косметика профиля: рамки аватара ===== */
.pf-avatar {
  width: 64px; height: 64px;
  position: relative;
  display: flex; align-items: center; justify-content: center;
  font-size: 34px; border-radius: 50%;
  background: rgba(255,255,255,.04);
  box-sizing: border-box;
}
.pf-avatar.has-photo { background-size: cover; background-position: center; }

/* Маленький аватар-портрет в углу шапки профиля. Формат 3:5 — родной для
   фото (480×800), поэтому cover заполняет рамку целиком: без обрезки и без
   тёмных полей. Размер 72×120 — крупнее прежнего и соразмерен блоку текста. */
.pf-avatar-sm {
  position: relative;
  width: 72px;
  height: 120px;              /* 3:5 портрет (родной формат фото) */
  flex-shrink: 0;
  border-radius: 8px;
  background-size: cover;     /* фото заполняет рамку целиком, без тёмных краёв */
  background-position: center;
  border: 1px solid var(--border);
  box-shadow: 0 2px 8px rgba(0,0,0,.4);
}
.pf-avatar-sm .pf-online-dot { position: absolute; bottom: 2px; right: 2px; font-size: 12px;
  background: rgba(0,0,0,.55); border-radius: 50%; padding: 0 2px; }
.pf-avatar-sm .pf-avatar-edit { position: absolute; top: -6px; right: -6px; width: 24px; height: 24px; font-size: 12px; }

/* Крупный вертикальный аватар-портрет (родной формат 3:5, cover) */
.pf-avatar-big {
  position: relative;
  width: 100%;
  max-width: 260px;
  aspect-ratio: 3 / 5;
  margin: 0 auto 12px;
  border-radius: 14px;
  background-size: cover;     /* фото заполняет рамку целиком, без тёмных краёв */
  background-position: center;
  border: 2px solid var(--border);
  box-shadow: 0 6px 20px rgba(0,0,0,.45);
}
.pf-avatar-big .pf-online-dot { position: absolute; bottom: 8px; right: 8px; font-size: 18px;
  background: rgba(0,0,0,.55); border-radius: 50%; padding: 2px 4px; }
.pf-avatar-big .pf-avatar-edit { position: absolute; top: 8px; right: 8px; width: 34px; height: 34px;
  font-size: 16px; }
.pf-online-dot { position: absolute; bottom: -2px; right: -2px; font-size: 13px; line-height: 1;
  background: var(--card); border-radius: 50%; padding: 1px; }
.pf-avatar-edit { position: absolute; top: -4px; right: -4px; width: 24px; height: 24px;
  border-radius: 50%; border: 1px solid var(--border); background: var(--card); color: var(--fg);
  font-size: 12px; cursor: pointer; padding: 0; display: flex; align-items: center; justify-content: center; }
.pf-avatar-edit:hover { background: var(--orange); }

/* Окно выбора аватара */
.avatar-group-label { font-weight: 700; color: var(--gold); margin: 10px 0 6px; font-size: 13px; }
.avatar-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.avatar-cell { padding: 0; border: 2px solid var(--border); border-radius: 10px; overflow: hidden;
  cursor: pointer; background: var(--bg); aspect-ratio: 3 / 5; }
.avatar-cell img { width: 100%; height: 100%; object-fit: cover; display: block; }
.avatar-cell.sel { border-color: var(--gold); box-shadow: 0 0 8px rgba(233,199,92,.6); }
.avatar-cell:hover { border-color: var(--orange); }

/* Карточка наёмника аукциона */
.merc-img { display: block; width: 100%; max-width: 220px; margin: 0 auto 8px; aspect-ratio: 2 / 3;
  object-fit: cover; border-radius: 10px; border: 1px solid var(--border); }
.merc-card .name { text-align: center; }
.merc-contract-open { width:100%; }
.merc-contract-dialog { width:min(560px,calc(100vw - 24px)); max-width:560px; max-height:calc(100dvh - 40px); overflow-y:auto; box-sizing:border-box; }
.merc-contract-heading { display:flex; align-items:center; gap:14px; margin:14px 0; }
.merc-contract-heading>img { width:68px; height:86px; object-fit:cover; border-radius:8px; border:1px solid var(--border); }
.merc-contract-options { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; padding:8px 0; margin:12px 0; border:0; min-width:0; }
.merc-contract-options legend { padding:0 0 8px; font-size:13px; }
.merc-contract-option { --contract-color:#b77b48; display:flex; flex-direction:column; align-items:center; position:relative; gap:4px; padding:8px 4px; border:1px solid var(--contract-color); border-radius:10px; background:rgba(0,0,0,.22); cursor:pointer; min-width:0; }
.merc-contract-silver { --contract-color:#91b9d2; }
.merc-contract-gold { --contract-color:#e2bc52; }
.merc-contract-option:has(input:checked) { outline:2px solid var(--contract-color); background:rgba(206,172,81,.13); }
.merc-contract-option:focus-within { outline:2px solid white; }
.merc-contract-option.is-empty { opacity:.45; cursor:default; }
.merc-contract-option input { position:absolute; top:8px; left:8px; margin:0; z-index:1; accent-color:var(--contract-color); }
.merc-contract-art { width:100%; aspect-ratio:1; position:relative; display:block; }
.merc-contract-art>img { width:100%; height:100%; object-fit:contain; }
.merc-contract-tier { position:absolute; right:3px; bottom:0; display:grid; place-items:center; width:24px; height:24px; border-radius:50%; background:#13180f; color:var(--contract-color); border:1px solid currentColor; font-weight:700; }
.merc-contract-option>strong { color:var(--contract-color); font-size:18px; }
.merc-contract-option>.small { text-align:center; overflow-wrap:anywhere; font-size:11px; }
.merc-contract-error { color:#f58b80; }
@media(max-width:380px){.merc-contract-dialog{padding:14px 10px}.merc-contract-options{gap:6px}.merc-contract-heading{gap:10px}.merc-contract-option{padding:7px 2px}}

/* Флаги стран (картинки вместо эмодзи) */
.flag-img { display: inline-block; height: 14px; width: auto; vertical-align: -2px;
  border-radius: 2px; margin-right: 2px; }
.flag-img.big { height: 40px; vertical-align: middle; border-radius: 4px;
  border: 1px solid var(--border); }
.flag-img.mid { height: 20px; vertical-align: -4px; border-radius: 3px; }

/* Онлайн-точки в списке целей войны (яркие зелёная/красная) */
.online-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%;
  margin-left: 6px; vertical-align: middle; }
.online-dot.on  { background: #22e04a; box-shadow: 0 0 6px #22e04a, 0 0 2px #22e04a; }
.online-dot.off { background: #ff2e2e; box-shadow: 0 0 6px #ff2e2e, 0 0 2px #ff2e2e; }

/* Модалки фаталити (взятие в плен → выбор → результат) */
.breach-overlay { position: fixed; inset: 0; z-index: 10005; display: flex;
  align-items: center; justify-content: center; padding: 16px;
  background: rgba(0,0,0,.9); animation: toast-in .2s ease; }
.breach-modal { background: var(--card); border: 2px solid var(--red); border-radius: 14px;
  max-width: 460px; width: 100%; max-height: 90vh; overflow-y: auto; padding: 16px; text-align: center; }
.breach-photo { display: block; width: 100%; border-radius: 10px; margin-bottom: 12px;
  border: 1px solid var(--border); }
.breach-title { font-size: 20px; font-weight: 800; margin-bottom: 6px; }
.breach-choices { display: flex; gap: 12px; margin-top: 14px; }
.breach-choice { flex: 1; padding: 8px; border-radius: 10px; cursor: pointer;
  background: var(--bg); border: 2px solid var(--border); display: flex; flex-direction: column;
  align-items: center; gap: 6px; color: var(--fg); font-weight: 700; font-size: 13px; }
.breach-choice img { width: 100%; border-radius: 8px; aspect-ratio: 16/9; object-fit: cover; }
.breach-choice.cut:hover { border-color: var(--red); }
.breach-choice.pardon:hover { border-color: var(--green); }

.pf-avatar.frame_gold   { border: 3px solid #e9c75c; box-shadow: 0 0 8px rgba(233,199,92,.6); }
.pf-avatar.frame_steel  { border: 3px solid #8c9aa8; box-shadow: 0 0 6px rgba(140,154,168,.5); }
.pf-avatar.frame_blood  { border: 3px solid #b3262b; box-shadow: 0 0 8px rgba(179,38,43,.6); }

/* Фоны профиля — накладываются на верхнюю карточку профиля */
.pf-card.bg_camo    { background: repeating-linear-gradient(45deg,#243018,#243018 12px,#2f3d20 12px,#2f3d20 24px); }
.pf-card.bg_war     { background: linear-gradient(135deg,#3a1f1f,#1a0f0f); }
.pf-card.bg_command { background: linear-gradient(135deg,#16243a,#0d1726); }

/* Титул под именем */
.pf-title {
  display: inline-block; margin-top: 2px;
  font-size: 12px; font-weight: 700; color: #e9c75c;
  text-shadow: 0 0 4px rgba(233,199,92,.4);
}

/* ==================== БОЕВОЕ ОКНО ЛЕГИОНА ==================== */
/* Оверлей на весь экран, но контент — центрированная колонка (иначе на ПК
   всё растягивается на всю ширину монитора). Компактные отступы + адаптив. */
#battle-window { font-size: 13.5px; }
.bw-inner { max-width: 600px; margin: 0 auto; padding-bottom: 12px; }
.bw-head {
  position: sticky; top: 0; z-index: 10;
  background: var(--bg, #0a0f1a); border-bottom: 2px solid var(--border);
  padding: 7px 12px;
}
.bw-head>div { flex-wrap:wrap; gap:5px; }
.bw-body { padding: 8px 12px; }
.bw-card { border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; margin-bottom: 8px; }
.bw-card.tight { padding: 6px 10px; }

.bw-me-res { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12.5px; color: var(--dim); margin-top: 5px; }
.bw-me-res b { color: var(--text); }

.bb-locked { opacity: .6; }
.bb-locked .name { color: var(--dim); }


/* ── Картинки легиона: роли, предметы арсенала, постройки ────────── */
/* Иконки ролей — маленькие, выравниваются по тексту */
.ic-role { vertical-align: -4px; object-fit: contain; flex-shrink: 0; }
/* Предметы арсенала */
.ic-item { object-fit: contain; flex-shrink: 0;
  border: 1px solid #000; border-radius: 6px; background: rgba(0,0,0,.25); }
.item-row { display: flex; align-items: center; gap: 10px; }
.item-row .grow { min-width: 0; }
.item-card .name { margin: 0; }
/* Картинка постройки: небольшая, в тонкой чёрной рамке */
.bb-img { display: block; width: 100%; max-width: 320px; aspect-ratio: 16 / 9;
  object-fit: cover; border: 1px solid #000; border-radius: 6px;
  margin: 0 auto 8px; background: #000; }
/* Название боевой постройки — под картинкой, по центру */
.bb-title { text-align: center; font-weight: 800; font-size: 15px;
  margin: 2px 0 8px; }
.bb-title .muted { font-weight: 600; font-size: 12px; }
/* Разбивка заказчиков санкции */
.sanc-toggle { color: var(--gold); }
.sanc-breakdown { margin-top: 6px; border-top: 1px solid var(--border-dim); padding-top: 5px; }
.sanc-b-head { font-size: 10px; color: var(--dim); text-transform: uppercase;
  letter-spacing: .03em; margin-bottom: 4px; }
.sanc-b-row { display: flex; align-items: center; gap: 8px; font-size: 12px; padding: 2px 0; }
.sanc-b-row.me { color: var(--gold); }
.sanc-b-row .grow { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sanc-b-amt { white-space: nowrap; font-weight: 700; }
/* Предмет в слоте арсенала боя */
.bw-slot .ic-item { margin: 0 auto 2px; display: block; }


/* ── Послебоевое окно: «лучшие» одной колонкой ─────────────────── */
.bw-best-col { display: flex; flex-direction: column; gap: 6px; }
.bw-best-row { display: flex; align-items: center; gap: 9px; padding: 7px 8px;
  border: 1px solid var(--border); border-left: 3px solid var(--top-c);
  border-radius: 8px; background: rgba(255,255,255,.02); }
.bw-best-t { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.bw-best-t b { font-size: 10px; text-transform: uppercase; letter-spacing: .04em; }
.bw-best-n { font-size: 12.5px; font-weight: 700; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.bw-best-v { font-weight: 800; font-size: 12.5px; white-space: nowrap; }
.bw-clan-m { font-size: 12px; padding: 3px 0; border-top: 1px solid var(--border-dim); }

/* ── История боёв: компактные карточки ─────────────────────────── */
.bh-row { border: 1px solid var(--border); border-radius: 8px; padding: 7px 9px; margin-top: 7px; }
.bh-row.win  { border-left: 3px solid var(--green); }
.bh-row.loss { border-left: 3px solid var(--red); }
.bh-top { display: flex; align-items: center; gap: 6px; font-size: 12px; }
.bh-side { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; max-width: 30%; }
.bh-side.ally { color: var(--text); }
.bh-side.foe  { color: var(--text); }
.bh-res { font-weight: 800; font-size: 11px; text-transform: uppercase; letter-spacing: .03em; }
.bh-res.win  { color: #2ecc40; }
.bh-res.loss { color: #ff4d4d; }
.bh-loot { margin-left: auto; color: #e9c75c; font-weight: 800; white-space: nowrap; }
.bh-bot { display: flex; align-items: center; justify-content: space-between; margin-top: 5px; gap: 8px; }
.bh-more { padding: 3px 10px; font-size: 11px; min-height: 0; }
.bh-det { margin-top: 6px; border-top: 1px solid var(--border-dim); padding-top: 5px; }
.bh-best-h { font-size: 10px; color: var(--dim); text-transform: uppercase;
  letter-spacing: .04em; margin: 6px 0 3px; }
.bh-best { display: flex; align-items: center; gap: 6px; font-size: 11.5px; padding: 2px 0; }
.bh-best .grow { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.fat-loot { display: flex; justify-content: center; gap: 14px; margin-top: 8px;
  font-weight: 800; font-size: 15px; color: var(--gold); }

.ic-sab { object-fit: contain; flex-shrink: 0; border: 0; background: transparent;
  vertical-align: middle; filter: drop-shadow(0 2px 2px rgba(0,0,0,.72)); }
/* Вкладка диверсантов с иконкой */
.sab-tab { display: inline-flex; align-items: center; gap: 5px; }
.sab-tab img.ic-sab { width: 20px; height: 20px; border: none; background: none; }
/* Шапка карточки диверсантов */
.sab-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.sab-head .ic-sab { filter: drop-shadow(0 7px 8px rgba(0,0,0,.58)); }
.sab-head .name { margin: 0; }

/* Панель разведки в подготовке */
.bw-intel { border-color: var(--en) !important; }
.bw-intel-line { font-size: 12px; margin-top: 4px; }
.bw-intel-names { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.bw-intel-chip { font-size: 10.5px; padding: 2px 6px; border-radius: 10px;
  background: rgba(255,255,255,.06); border: 1px solid var(--border-dim); }
.bw-intel-block { margin-top: 6px; border-top: 1px solid var(--border-dim); padding-top: 4px; }
.bw-intel-h { font-size: 10px; color: var(--dim); text-transform: uppercase;
  letter-spacing: .04em; margin-bottom: 3px; }
.bw-intel-dir, .bw-intel-stat { display: flex; align-items: baseline; gap: 6px;
  font-size: 11.5px; padding: 2px 0; }
.bw-intel-dir .grow, .bw-intel-stat .grow { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Рейтинг вкладов в казну легиона и лента истории */
.contrib-head { display: flex; align-items: center; gap: 6px; font-size: 10px; color: var(--dim);
  text-transform: uppercase; letter-spacing: .04em; padding: 4px 0; border-bottom: 1px solid var(--border); }
.contrib-head > span:not(.grow) { width: 52px; text-align: right; }
.contrib-row { display: flex; align-items: center; gap: 6px; font-size: 12px; padding: 5px 0;
  border-bottom: 1px solid var(--border-dim); }
.contrib-row.first { font-weight: 800; }
.contrib-pos { width: 20px; flex-shrink: 0; }
.contrib-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.contrib-v { width: 52px; text-align: right; color: var(--text); font-weight: 700; }
.hist-row { display: flex; align-items: baseline; gap: 8px; font-size: 12px; padding: 5px 0;
  border-bottom: 1px solid var(--border-dim); }
.hist-row .grow { overflow: hidden; text-overflow: ellipsis; }
.treasury-history-card { padding-top:9px; padding-bottom:8px; }
.treasury-history-head { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:3px; }
.treasury-history-row { display:flex; align-items:center; justify-content:space-between; gap:10px;
  min-height:32px; padding:4px 0; border-bottom:1px solid var(--border-dim); font-size:12px; }
.treasury-history-who { min-width:0; display:flex; flex-direction:column; line-height:1.2; }
.treasury-history-who > span:first-child { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:700; }
.treasury-history-who small { color:var(--dim); font-size:10px; margin-top:2px; }
.treasury-history-values { flex-shrink:0; display:flex; align-items:center; gap:4px; white-space:nowrap; }
.treasury-history-values i { color:var(--dim); font-style:normal; font-size:10px; }
.treasury-history-pager { display:flex; justify-content:center; align-items:center; gap:9px; margin-top:8px; }
.treasury-history-pager .btn { min-width:34px; padding:3px 8px; min-height:0; }
.treasury-history-note { margin:7px 0 0; text-align:center; }
@media (max-width:480px) {
  .treasury-history-row { gap:6px; }
  .treasury-history-values { gap:2px; font-size:11px; }
}

/* Компактные блоки фазы подготовки */
.bw-prep-box { background: rgba(255,150,0,.08); border: 1px solid var(--orange);
  border-radius: 8px; padding: 7px 8px; margin-bottom: 6px; }
.bw-prep-box.ok  { background: rgba(0,200,0,.07); border-color: var(--green); }
.bw-prep-box.dim { background: rgba(255,150,0,.04); border-color: var(--border); }
.bw-prep-h { margin: 0 0 5px; font-size: 11.5px; font-weight: 700; }
.bw-prep-row { display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 5px; font-size: 12.5px; }
.bw-roles { display: flex; flex-direction: column; gap: 4px; }
.bw-role-btn { width: 100%; padding: 7px 9px; text-align: left; font-size: 12px; min-height: 0; line-height: 1.25; }
.bw-role-btn .small { font-size: 10px; }
.bw-ready-btn { width: 100%; padding: 8px; font-size: 12.5px; min-height: 0; }

/* Ресурсы в подготовке: компактные плитки с полоской и кнопкой восстановления */
.bw-restore { border: 1px solid var(--border); border-radius: 8px; padding: 7px; margin-bottom: 6px; }
.bw-res-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.bw-res { padding: 5px 4px; border-radius: 6px; background: rgba(255,255,255,.03); text-align: center; }
.bw-res-top { display: flex; align-items: baseline; justify-content: center; gap: 3px; font-size: 12px; }
.bw-res-top b { color: var(--text); font-size: 13px; font-weight: 800; }
.bw-res-max { color: var(--dim); font-size: 10px; }
.bw-res-bar { height: 3px; border-radius: 2px; background: rgba(255,255,255,.08); margin: 3px 0 2px; overflow: hidden; }
.bw-res-bar i { display: block; height: 100%; }
.bw-res-l { font-size: 9px; color: var(--dim); text-transform: uppercase; letter-spacing: .03em; }
.bw-res-full { font-size: 9px; color: var(--green); margin-top: 3px; }
.bw-res-btn { width: 100%; margin-top: 3px; padding: 3px 2px; font-size: 10px; min-height: 0; line-height: 1.3; }
/* Характеристики игрока в подготовке — компактно, 2 колонки */
.bw-stats { border: 1px solid var(--border); border-radius: 8px; padding: 7px 9px; margin-bottom: 6px; }
.bw-stats-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2px 10px; }
.bw-stats-grid > div { display: flex; justify-content: space-between; align-items: baseline;
  font-size: 11.5px; padding: 2px 0; }
.bw-stats-grid > div span { color: var(--dim); }
.bw-stats-grid > div b { color: var(--text); font-weight: 800; }
/* Лог боя: базовый цвет по теме (бело/чёрный), спаны имён/урона красят сами себя */
.bw-log-line { color: var(--text); }
/* Компактные кнопки боевого пояса/арсенала в бою */
.bw-belt .bw-slot { padding: 6px 4px; min-height: 0; }
.bw-belt .bw-slot .nm { font-size: 11px; line-height: 1.1; }
.bw-belt .bw-slot .btn { padding: 5px 4px; font-size: 11px; margin-top: 4px; }
.bw-belt .bw-slot.empty { min-height: 46px; }
.bw-belt .bw-slot.empty .btn { font-size: 11px; padding: 4px; }
/* Экран итогов боя */
.bw-result-hero { text-align: center; padding: 26px 16px 20px; border-radius: 0 0 16px 16px; margin-bottom: 4px; }
.bw-result-hero.win  { background: linear-gradient(160deg, rgba(46,204,64,.22), rgba(46,204,64,.04)); box-shadow: inset 0 -1px 0 rgba(46,204,64,.4); }
.bw-result-hero.loss { background: linear-gradient(160deg, rgba(255,77,77,.20), rgba(255,77,77,.04)); box-shadow: inset 0 -1px 0 rgba(255,77,77,.4); }
.bw-result-emoji { font-size: 52px; line-height: 1; filter: drop-shadow(0 3px 6px rgba(0,0,0,.4)); }
.bw-result-title { font-size: 24px; font-weight: 900; letter-spacing: .06em; margin-top: 6px; }
.bw-result-hero.win  .bw-result-title { color: #2ecc40; text-shadow: 0 0 16px rgba(46,204,64,.5); }
.bw-result-hero.loss .bw-result-title { color: #ff4d4d; text-shadow: 0 0 16px rgba(255,77,77,.5); }
.bw-result-score { display: flex; justify-content: center; gap: 18px; align-items: baseline; margin-top: 12px; font-size: 20px; font-weight: 800; }
.bw-result-vs { color: var(--dim); font-size: 13px; font-weight: 600; }
.bw-result-section { border: 1px solid var(--border); border-radius: 10px; padding: 10px; margin-bottom: 10px; }
.bw-result-h { font-weight: 800; margin: 0 0 8px; font-size: 14px; }
.bw-result-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.bw-tile { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 10px 4px;
  border-radius: 10px; background: rgba(255,255,255,.04); border: 1px solid var(--border-dim); }
.bw-tile-v { font-weight: 900; font-size: 17px; color: var(--text); }
.bw-tile-l { font-size: 10px; color: var(--dim); text-align: center; }
/* Топ-3 боя: каждая номинация — отдельная карточка со своим цветом */
.bw-top-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.bw-top-card { border: 1px solid var(--border); border-left: 3px solid var(--top-c);
  border-radius: 8px; padding: 7px 8px; background: rgba(255,255,255,.02); }
.bw-top-h { font-size: 11.5px; font-weight: 800; color: var(--top-c);
  display: flex; align-items: center; gap: 5px; margin-bottom: 4px;
  text-transform: uppercase; letter-spacing: .03em; }
.bw-top-row { display: flex; align-items: baseline; gap: 5px; font-size: 11.5px; padding: 2px 0; }
.bw-top-row.first { font-weight: 800; }
.bw-top-row + .bw-top-row { border-top: 1px solid var(--border-dim); }
.bw-top-pos { width: 15px; flex-shrink: 0; }
.bw-top-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
.bw-top-val { color: var(--text); font-weight: 800; margin-left: auto; }
@media (max-width: 420px) { .bw-top-grid { grid-template-columns: 1fr; } }
/* Направления — компактная сетка чипов */
.bw-dirs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 8px; }
.bw-dir {
  padding: 7px 4px; border-radius: 7px; text-align: center; font-size: 12px;
  border: 1px solid var(--border); cursor: pointer; background: rgba(255,255,255,.02);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bw-dir.sel { border: 2px solid var(--green); background: rgba(0,150,90,.12); }
/* Плитка направления во время кулдауна перехода */
.bw-dir.cd { opacity: .5; cursor: default; }
.bw-dir-cd { display: block; font-size: 10px; color: var(--orange); font-weight: 700; margin-top: 2px; }
.bw-dir .cnt { display: block; font-size: 11px; margin-top: 2px; }
/* Строки бойцов (враги/союзники) — плотные */
.bw-fighter { padding: 7px 0; border-bottom: 1px solid var(--border-dim); }
.bw-fighter:last-child { border-bottom: none; }
.bw-fighter-head { display: flex; align-items: center; gap: 6px; font-size: 13px; }
.bw-fighter-acts { display: flex; gap: 6px; margin-top: 5px; flex-wrap: wrap; }
.bw-fighter-acts .btn { flex: 1; padding: 7px; font-size: 12.5px; min-width: 90px; }
/* Боевой пояс — приметный, крупные кнопки */
.bw-belt { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.bw-slot {
  border: 2px solid var(--orange); border-radius: 9px; padding: 8px 6px; text-align: center;
  background: rgba(255,150,0,.1); display: flex; flex-direction: column; gap: 6px;
  box-shadow: 0 0 0 1px rgba(255,150,0,.15) inset;
}
.bw-slot .nm { font-size: 12.5px; font-weight: 700; line-height: 1.15; }
.bw-slot .btn { padding: 8px 4px; font-size: 12.5px; }
.bw-slot.empty { border: 1px dashed var(--border); background: none; box-shadow: none; min-height: 60px; align-items: center; justify-content: center; }
.bw-armed-banner {
  background: rgba(255,200,0,.12); border: 1px solid var(--gold); border-radius: 8px;
  padding: 8px 10px; margin-bottom: 8px; display: flex; align-items: center; justify-content: space-between; gap: 8px;
  font-size: 13px;
}
/* Планка ролей/направлений в подготовке — тоже компактнее */
@media (min-width: 760px) {
  .bw-inner { max-width: 680px; }
  #battle-window { font-size: 14px; }
}

/* ==================== НОВОСТИ ==================== */
.news-card { border:1px solid var(--border); border-radius:10px; padding:12px 14px; margin-bottom:10px; cursor:pointer; transition:border-color .15s, background .15s; background:rgba(255,255,255,.015); }
.news-card:hover { border-color:var(--gold); background:rgba(255,180,0,.04); }
.news-card-head { display:flex; gap:10px; align-items:flex-start; }
.news-emoji { font-size:26px; line-height:1; }
.news-title { font-weight:bold; font-size:15px; line-height:1.25; }
.news-meta { margin-top:3px; display:flex; align-items:center; flex-wrap:wrap; gap:2px; }
.news-preview { margin-top:8px; max-height:110px; overflow:hidden; position:relative; -webkit-mask-image:linear-gradient(180deg,#000 60%,transparent); mask-image:linear-gradient(180deg,#000 60%,transparent); font-size:13px; }
.news-preview p, .news-preview div { margin-top:2px; }
.news-more { margin-top:6px; color:var(--gold); display:flex; justify-content:space-between; gap:8px; }
.news-talk-count { color:var(--dim); }

/* ═══ Обсуждение под новостью ═══
   Отдельная карточка под статьёй: пост читают все, а спорят внизу.
   Закрыть обсуждение может тот, кто ведёт новости, — комментарии при
   этом остаются: закрыть спор и стереть спор разные решения. */
.ntalk-title { font-weight:700; font-size:15px; margin-bottom:8px; }
.ntalk-list { max-height:340px; overflow-y:auto; display:flex; flex-direction:column; gap:8px; }
.ntalk-msg { border-left:2px solid var(--border); padding-left:8px; }
.ntalk-head { display:flex; align-items:center; gap:6px; flex-wrap:wrap; font-size:12px; }
.ntalk-who { font-weight:600; cursor:pointer; }
.ntalk-who:hover { color:var(--gold); }
.ntalk-head .at { color:var(--dim); margin-left:auto; }
.ntalk-text { font-size:14px; line-height:1.4; word-wrap:break-word; margin-top:2px; }
.ntalk-del { opacity:.55; }
.ntalk-del .ntalk-text { font-style:italic; }
.ntalk-x {
  background:none; border:none; cursor:pointer; color:var(--dim);
  font-size:12px; padding:0 3px; line-height:1;
}
.ntalk-x:hover { color:var(--red); }
/* Статья целиком */
.news-article { border:1px solid var(--border); border-radius:12px; padding:16px 16px 20px; background:rgba(255,255,255,.015); }
.news-article-head { display:flex; gap:12px; align-items:center; padding-bottom:12px; border-bottom:1px solid var(--border-dim); margin-bottom:12px; }
.news-article-title { font-weight:bold; font-size:19px; line-height:1.2; }
.news-article-body { font-size:14px; }
.news-article-body a { color:var(--gold); text-decoration:underline; }
.news-article-body mark { background:rgba(255,200,0,.28); color:inherit; padding:0 3px; border-radius:3px; }
.news-article-body img { box-shadow:0 2px 10px rgba(0,0,0,.4); }
/* Редактор */
.news-lbl { display:block; font-size:12px; color:var(--dim); margin-bottom:4px; font-weight:600; }
.news-lbl.mt { margin-top:10px; }
.news-input { width:100%; padding:9px 11px; border:1px solid var(--border); border-radius:7px; background:var(--bg); color:var(--text); font-size:14px; font-family:inherit; }
.news-input:focus { outline:none; border-color:var(--gold); }
textarea.news-input { resize:vertical; line-height:1.4; }
.news-emoji-row { display:flex; gap:5px; flex-wrap:wrap; align-items:center; }
.news-emoji-btn { width:38px; height:38px; border:1px solid var(--border); border-radius:8px; background:rgba(255,255,255,.02); font-size:19px; cursor:pointer; }
.news-emoji-btn.sel { border:2px solid var(--gold); background:rgba(255,180,0,.12); }
.news-emoji-input { width:52px !important; text-align:center; }
.news-tools { display:grid; grid-template-columns:repeat(2,1fr); gap:6px; }
.news-add-btn { padding:9px 6px; font-size:13px; text-align:left; }
.news-block { border:1px solid var(--border); border-radius:9px; padding:10px 12px 12px; margin-bottom:9px; background:rgba(255,255,255,.02); position:relative; }
.news-block-label { font-size:11px; color:var(--gold); font-weight:700; margin-bottom:6px; text-transform:uppercase; letter-spacing:.03em; }
.news-block-ctl { position:absolute; top:8px; right:8px; display:flex; gap:3px; }
.news-mini { width:26px; height:26px; border:1px solid var(--border); border-radius:6px; background:rgba(255,255,255,.03); color:var(--text); cursor:pointer; font-size:12px; line-height:1; }
.news-mini:disabled { opacity:.3; cursor:default; }
.news-mini-del { color:var(--red); border-color:rgba(220,60,60,.4); }
.news-lvl.sel, .news-color.sel { outline:2px solid var(--gold); }
.news-color { width:26px; height:26px; border:1px solid rgba(255,255,255,.2); border-radius:6px; cursor:pointer; }
/* Палитра и панель форматирования редактора новостей (20.09.2026):
   раньше разметка в новостях была, но кнопок к ней не было — и писали
   голым текстом, не зная про жирный, цвета и ссылки. */
.news-palette { display:flex; gap:5px; margin-top:6px; flex-wrap:wrap; align-items:center; }
.news-palette .muted { width:100%; margin-bottom:2px; }
.news-tools { display:flex; gap:4px; flex-wrap:wrap; align-items:center; margin:4px 0 6px; }
.news-tool { min-width:30px; padding:3px 7px; font-size:13px; }
.news-tools-colors { display:flex; gap:3px; flex-wrap:wrap; margin-left:4px; }
.news-color-sm { width:18px; height:18px; border-radius:4px; }
.news-add-btn:active { transform:scale(.97); }
@media (min-width: 760px) { .news-tools { grid-template-columns:repeat(5,1fr); } }

/* Строки новостей на главной */
.news-home-row { display:flex; align-items:center; gap:10px; padding:8px 4px; border-top:1px solid var(--border-dim); cursor:pointer; }
.news-home-row:first-of-type { border-top:none; }
.news-home-row:hover { background:rgba(255,255,255,.03); border-radius:6px; }

/* ── Полевой справочник для новичков ────────────────────────────── */
.guide-home-entry { position:relative; display:block; overflow:hidden; width:100%; min-height:116px; margin:10px 0 12px; padding:0; border:1px solid rgba(221,174,63,.55); border-radius:12px; color:inherit; text-align:left; cursor:pointer; background:#0b1008; box-shadow:0 10px 28px rgba(0,0,0,.25); }
.guide-home-entry>img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 44%; opacity:.62; transition:transform .35s ease,opacity .35s ease; }
.guide-home-entry:hover>img { transform:scale(1.025); opacity:.73; }
.guide-home-entry-shade { position:absolute; inset:0; background:linear-gradient(90deg,rgba(5,9,4,.98) 0%,rgba(5,9,4,.8) 46%,rgba(5,9,4,.22) 100%); }
.guide-home-entry-copy { position:relative; z-index:1; display:flex; flex-direction:column; align-items:flex-start; max-width:72%; padding:19px 58px 18px 20px; }
.guide-home-entry-copy small,.guide-overline { color:#e4ba53; font-size:9px; font-style:normal; font-weight:900; letter-spacing:1.8px; }
.guide-home-entry-copy b { margin-top:4px; color:#f3e9ba; font-size:20px; line-height:1.1; letter-spacing:.3px; }
.guide-home-entry-copy em { margin-top:7px; color:#bec7ae; font-size:11px; font-style:normal; line-height:1.35; }
.guide-home-entry-arrow { position:absolute; z-index:2; top:50%; right:18px; display:flex; align-items:center; justify-content:center; width:32px; height:32px; border:1px solid rgba(230,190,78,.45); border-radius:50%; color:#efd16c; font-size:18px; background:rgba(7,11,5,.68); transform:translateY(-50%); }

.guide-main-hero { position:relative; overflow:hidden; min-height:250px; margin-bottom:10px; border:1px solid rgba(221,174,63,.52); border-radius:13px; background:#080c07; box-shadow:0 12px 30px rgba(0,0,0,.3); }
.guide-main-hero>img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 34%; opacity:.72; }
.guide-main-overlay { position:absolute; inset:0; background:linear-gradient(90deg,rgba(4,8,4,.99),rgba(5,9,4,.86) 48%,rgba(5,9,4,.25)),linear-gradient(0deg,rgba(4,7,3,.65),transparent 55%); }
.guide-main-copy { position:relative; z-index:1; width:min(620px,76%); padding:30px 28px 26px; }
.guide-main-copy h1 { margin:6px 0 8px; color:#f3e8b5; font-size:30px; line-height:1.05; text-transform:uppercase; letter-spacing:1.7px; }
.guide-main-copy>p { max-width:560px; margin:0; color:#c3ccb6; font-size:12px; line-height:1.55; }
.guide-search-box { display:block; margin-top:20px; }
.guide-search-box>span { display:block; margin-bottom:5px; color:#aeb99e; font-size:9px; font-weight:800; letter-spacing:.9px; text-transform:uppercase; }
.guide-search-box input { width:100%; height:42px; box-sizing:border-box; padding:0 14px; border:1px solid rgba(227,187,80,.48); border-radius:8px; outline:none; color:#eef2e6; font:inherit; background:rgba(3,7,3,.78); box-shadow:inset 0 0 0 1px rgba(0,0,0,.25); }
.guide-search-box input:focus { border-color:#e7bd52; box-shadow:0 0 0 2px rgba(225,178,55,.13); }
.guide-search-box input::placeholder { color:#728066; }
.guide-search-results { position:relative; z-index:3; display:grid; gap:5px; margin:-4px 8px 10px; padding:8px; border:1px solid var(--border); border-radius:9px; background:rgba(7,11,5,.98); box-shadow:0 10px 24px rgba(0,0,0,.32); }
.guide-search-results[hidden] { display:none; }
.guide-search-result { display:grid; grid-template-columns:34px minmax(0,1fr) 18px; align-items:center; gap:9px; width:100%; padding:7px 9px; border:0; border-radius:7px; color:var(--text); text-align:left; cursor:pointer; background:rgba(255,255,255,.025); }
.guide-search-result:hover { background:rgba(224,174,66,.09); }
.guide-search-result span b,.guide-search-result span small { display:block; }.guide-search-result span small { margin-top:2px; color:var(--muted); }.guide-search-result i { color:var(--gold); font-style:normal; }
.guide-search-icon { width:32px; height:32px; border-radius:6px; object-fit:cover; }
.guide-search-empty { padding:14px; color:var(--muted); text-align:center; }

.guide-tabs { display:flex; gap:6px; overflow-x:auto; margin:0 0 10px; padding:7px 2px 9px; scrollbar-width:thin; scroll-snap-type:x proximity; }
.guide-tab { display:flex; flex:0 0 auto; align-items:center; gap:6px; min-height:40px; padding:5px 10px 5px 6px; border:1px solid var(--border); border-radius:8px; color:var(--muted); white-space:nowrap; cursor:pointer; background:linear-gradient(180deg,rgba(27,38,18,.96),rgba(10,15,8,.98)); scroll-snap-align:center; }
.guide-tab:hover { border-color:rgba(218,177,69,.46); color:#e8e5ca; }.guide-tab.active { border-color:#d9ab3d; color:#f3df96; box-shadow:inset 0 0 0 1px rgba(229,183,66,.16); background:linear-gradient(180deg,rgba(77,71,22,.48),rgba(18,24,11,.98)); }
.guide-tab-icon { width:28px; height:28px; border-radius:6px; object-fit:cover; background:#11180d; }
.guide-tab span { font-size:10px; font-weight:800; }

.guide-article { overflow:hidden; border:1px solid var(--border); border-radius:13px; background:linear-gradient(145deg,rgba(15,22,11,.99),rgba(7,11,6,.99)); box-shadow:0 12px 30px rgba(0,0,0,.22); }
.guide-topic-hero { position:relative; overflow:hidden; min-height:270px; border-bottom:1px solid rgba(220,174,61,.25); }
.guide-topic-hero>img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; opacity:.7; }
.guide-topic-shade { position:absolute; inset:0; background:linear-gradient(90deg,rgba(5,8,4,.99),rgba(5,8,4,.83) 52%,rgba(5,8,4,.18)),linear-gradient(0deg,rgba(5,8,4,.84),transparent 58%); }
.guide-topic-copy { position:relative; z-index:1; width:min(650px,75%); padding:36px 30px 30px; }
.guide-topic-copy h1 { margin:5px 0 9px; color:#f3e8b5; font-size:28px; line-height:1.08; }.guide-topic-copy p { margin:0; color:#c4ccb8; font-size:12px; line-height:1.6; }
.guide-action { width:auto; margin-top:17px; padding:9px 16px; }
.guide-reading { max-width:900px; margin:0 auto; padding:20px 22px 24px; }
.guide-block { display:grid; grid-template-columns:44px minmax(0,1fr); gap:12px; padding:16px 0; border-bottom:1px solid var(--border-dim); }
.guide-block-num { display:flex; align-items:center; justify-content:center; width:38px; height:38px; border:1px solid rgba(221,174,63,.35); border-radius:50%; color:#dcb04a; font-size:11px; font-weight:900; background:rgba(221,174,63,.06); }
.guide-block-body h2,.guide-faq-list>h2 { margin:0 0 8px; color:#eee6bd; font-size:15px; }.guide-block-body ul { margin:0; padding:0; list-style:none; }.guide-block-body li { position:relative; margin:7px 0; padding-left:17px; color:#b9c2ad; font-size:11px; line-height:1.5; }.guide-block-body li:before { content:''; position:absolute; top:.58em; left:1px; width:6px; height:6px; border:1px solid #bd9331; transform:rotate(45deg); }
.guide-tips { margin-top:18px; padding:13px 15px; border:1px solid rgba(211,170,60,.34); border-left:3px solid #c89b32; border-radius:8px; background:rgba(202,156,43,.055); }.guide-tips>b { color:#e8c660; font-size:10px; letter-spacing:1px; text-transform:uppercase; }.guide-tips p { margin:7px 0 0; color:#bdc6b1; font-size:10.5px; line-height:1.45; }
.guide-faq-list { padding-top:14px; }.guide-faq { margin:6px 0; border:1px solid var(--border-dim); border-radius:8px; background:rgba(255,255,255,.018); }.guide-faq summary { padding:11px 34px 11px 12px; color:#e7e1b8; font-size:11px; font-weight:800; cursor:pointer; }.guide-faq>div { padding:0 12px 12px; color:#b8c2ad; font-size:10.5px; line-height:1.55; }
.guide-prev-next { display:grid; grid-template-columns:1fr 1fr; gap:1px; border-top:1px solid var(--border); background:var(--border); }.guide-prev-next button { display:flex; flex-direction:column; align-items:flex-start; min-height:62px; padding:11px 16px; border:0; color:var(--muted); text-align:left; cursor:pointer; background:#0b1008; }.guide-prev-next button:last-child { align-items:flex-end; text-align:right; }.guide-prev-next button:hover { background:#11190c; }.guide-prev-next span { color:var(--dim); font-size:9px; text-transform:uppercase; }.guide-prev-next b { margin-top:4px; color:#ddd9b7; font-size:11px; }

@media (max-width:600px) {
  .guide-home-entry { min-height:126px; }.guide-home-entry-copy { max-width:82%; padding:17px 46px 16px 14px; }.guide-home-entry-copy b { font-size:17px; }.guide-home-entry-copy em { font-size:10px; }
  .guide-main-hero { min-height:292px; }.guide-main-copy { width:auto; padding:24px 14px 18px; }.guide-main-copy h1 { font-size:23px; }.guide-main-overlay { background:linear-gradient(90deg,rgba(4,8,4,.97),rgba(4,8,4,.74)),linear-gradient(0deg,rgba(4,8,4,.87),transparent); }
  .guide-topic-hero { min-height:295px; }.guide-topic-copy { width:auto; padding:30px 14px 20px; }.guide-topic-copy h1 { font-size:23px; }.guide-topic-shade { background:linear-gradient(90deg,rgba(5,8,4,.95),rgba(5,8,4,.7)),linear-gradient(0deg,rgba(5,8,4,.92),transparent); }
  .guide-reading { padding:10px 12px 18px; }.guide-block { grid-template-columns:32px minmax(0,1fr); gap:8px; padding:14px 0; }.guide-block-num { width:28px; height:28px; font-size:9px; }.guide-block-body h2 { font-size:13px; }.guide-block-body li { font-size:10.5px; }
  .guide-prev-next button { padding:10px; }.guide-prev-next b { font-size:10px; }
}

/* Картинки предметов чёрного рынка (допинг/падлянки/мины) — вместо надписей.
   Крупные, на всю ширину карточки, соотношение 16:9, скруглённые. */
.market-img {
  display: block;
  width: 100%;
  max-width: 240px;
  margin: 0 auto;
  aspect-ratio: 16 / 9;
  object-fit: contain;
  background: transparent;
}
/* Картинки эффектов/наёмников/подлянок в ПРОФИЛЕ — маленькие, 150×150 */
/* Активные эффекты в профиле — строкой.
   Было: картинка 150×150 по центру, подпись под ней. Четыре допинга
   занимали больше экрана, чем вся боевая статистика, и ради них
   приходилось листать. Стало: значок слева, название и описание
   справа, срок в конце строки. */
.pf-eff {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 0; border-bottom: 1px solid var(--border-dim);
}
.pf-eff:last-child { border-bottom: 0; }
.pf-effect-img {
  flex: 0 0 auto;
  width: 54px; height: 54px;
  object-fit: contain;
  border-radius: 6px;
  background: transparent;
}
/* Заглушка того же размера: без картинки строки прыгали бы по высоте */
.pf-eff-mark {
  flex: 0 0 auto; width: 54px; height: 54px;
  display: flex; align-items: center; justify-content: center;
  font-size: 26px;
}
/* min-width:0 обязателен: без него длинное описание распирает строку
   и выталкивает срок за край экрана */
.pf-eff-body { flex: 1 1 auto; min-width: 0; }
.pf-eff-name { font-size: 13px; font-weight: 700; line-height: 1.25; }
.pf-eff-desc { line-height: 1.3; }
.pf-eff-time { flex: 0 0 auto; color: var(--gold); font-size: 12px; white-space: nowrap; }

/* ============ Ассеты: инструкторы, достижения, трофеи, вкладки ============ */
.ic-instr { border-radius: 10px; object-fit: cover; border: 1px solid var(--border); background: var(--panel-2); flex-shrink: 0; }
.ic-trophy { border-radius: 8px; object-fit: contain; vertical-align: middle; }
.ic-tab { vertical-align: middle; object-fit: contain; margin-right: 4px; }
/* Достижения: ряд из 5 иконок уровней */
.ic-ach { border-radius: 8px; object-fit: contain; transition: filter .2s;
  width: 46px; height: 46px; }
.ic-ach-dim { filter: grayscale(1) brightness(.45) opacity(.7); } /* не достигнуто — тускло/ч-б */
.ach-levels { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin: 8px 0; }
.ach-lvl { text-align: center; min-width: 62px; max-width: 110px; padding: 6px 4px; border-radius: 8px; }
.ach-lvl .req { font-size: 11px; font-weight: 700; color: var(--dim); margin-bottom: 2px; }
.ach-lvl .req.reached { color: var(--money); }
.ach-lvl .ach-reward { min-height: 34px; margin: 4px 0; color: var(--gold); font-size: 9px; line-height: 1.25; }
.ach-lvl .ach-reward.locked { color: var(--dim); opacity: .72; }
/* Название титула конкретного уровня */
.ach-title { font-size: 11px; font-weight: 600; line-height: 1.2; margin: 4px 0 5px;
  overflow-wrap: break-word; hyphens: auto; }
.ach-title.locked { color: var(--dim); opacity: .7; }
.ach-lvl .ach-pick { font-size: 10px; padding: 3px 7px; width: 100%; }
/* Активный титул — подсветка блока уровня */
.ach-lvl-active { background: rgba(255,160,40,.10); box-shadow: inset 0 0 0 1px var(--orange-1); }

/* ПК / широкий экран: иконки достижений заметно крупнее */
@media (min-width: 900px) {
  .ic-ach { width: 92px; height: 92px; border-radius: 12px; }
  .ach-levels { gap: 14px; }
  .ach-lvl { min-width: 116px; max-width: 160px; padding: 8px 6px; }
  .ach-lvl .req { font-size: 14px; margin-bottom: 4px; }
  .ach-lvl .ach-reward { min-height: 48px; font-size: 11px; }
  .ach-title { font-size: 13px; margin: 6px 0 7px; }
  .ach-lvl .ach-pick { font-size: 12px; padding: 5px 10px; }
}
@media (min-width: 1280px) {
  .ic-ach { width: 112px; height: 112px; }
  .ach-lvl { min-width: 138px; max-width: 180px; }
  .ach-title { font-size: 14px; }
}
/* Заголовок заказчика ежедневных поручений */
.quest-giver { display: flex; align-items: center; gap: 12px; padding-bottom: 8px; border-bottom: 1px solid var(--border); margin-bottom: 4px; }
.quest-giver .qg-name { font-weight: 800; font-size: 16px; }
.quest-giver .qg-role { font-size: 12px; color: var(--dim); }
.quest-giver .qg-intro { font-size: 12px; color: var(--text); font-style: italic; margin-top: 3px; }
/* Обучающее окно: портрет генерала */
.tutor-head { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.tutor-head .th-name { font-weight: 800; }
.tutor-head .th-role { font-size: 11px; color: var(--dim); }

/* ============ Баннеры спецопераций ============ */
.conf-card { overflow: hidden; }
/* Картинка показывается ЦЕЛИКОМ, без обрезки: ширина по карточке,
   высота — пропорционально (никаких max-height/object-fit:cover). */
.conf-banner {
  display: block; width: calc(100% + 24px); margin: -10px -12px 10px;
  height: auto; border-radius: 8px 8px 0 0;
}
.conf-locked { filter: grayscale(.8) brightness(.55); }

/* ============ Видимый фокус для работы с клавиатуры ============ */
/* Раньше системная обводка фокуса гасилась общими стилями кнопок, и
   человек, идущий по панели Tab'ом, не видел, где находится. Для
   сотрудника это означало, что панелью нельзя пользоваться без мыши.
   :focus-visible показывает обводку только при клавиатурной навигации —
   при клике мышью она не появляется и вид не меняется. */
:focus-visible {
  outline: 2px solid var(--orange-1);
  outline-offset: 2px;
  border-radius: 4px;
}
/* В модальных окнах фон тёмный — обводка нужна поконтрастнее */
.game-dialog :focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}
/* Элементы, которые ведут себя как кнопки, но кнопками не являются:
   с role="button" и tabindex они попадают в обход Tab'ом */
[role="button"] { cursor: pointer; }

/* ============ Админ-панель: вкладки, разложенные по группам ============ */
/* Тринадцать кнопок подряд читались как сплошная лента. Теперь они
   собраны в три подписанные группы: «Люди», «Игра», «Служебное». */
.adm-tabs {
  display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-start;
  padding: 10px 16px 8px; position: sticky; top: 0; z-index: 10;
  background: var(--bg); border-bottom: 1px solid var(--border);
}
.adm-tabgroup { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.adm-tabgroup + .adm-tabgroup { border-left: 1px solid var(--border); padding-left: 14px; }
.adm-tabgroup-name {
  font-size: 10px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--dim); margin-right: 2px; white-space: nowrap;
}
/* На телефоне разделители между группами мешают переносу — подпись
   уходит на свою строку и работает как заголовок */
@media (max-width: 760px) {
  .adm-tabs { gap: 8px; }
  .adm-tabgroup { width: 100%; }
  .adm-tabgroup + .adm-tabgroup { border-left: none; padding-left: 0; }
  .adm-tabgroup-name { width: 100%; margin: 4px 0 0; }
}

/* ==================== АДМИН-ПАНЕЛЬ: адаптив под телефоны ==================== */
/* Таблица игроков на широком экране остаётся таблицей; на узком превращается
   в карточки — иначе колонки и кнопки («бан», «обнулить») уезжают за экран. */
.adm-players-wrap { overflow-x: auto; }           /* страховка на планшетах */

@media (max-width: 760px) {
  .adm-players-wrap { overflow-x: visible; }
  .adm-players, .adm-players tbody, .adm-players tr, .adm-players td { display: block; width: 100%; }
  .adm-players thead { display: none; }           /* шапка не нужна — есть подписи */
  .adm-players tr {
    border: 1px solid var(--border) !important; border-radius: 8px;
    margin: 8px; padding: 6px 8px; background: var(--panel-2);
  }
  .adm-players td { padding: 4px 2px !important; text-align: left !important; border: none; }
  /* Имя игрока — крупнее и с переносом длинных ID */
  .adm-players .adm-p-name { font-size: 14px; overflow-wrap: break-word; }
  /* Ресурсы: подпись + значение в строку, компактной сеткой */
  .adm-players .adm-stat {
    display: inline-block; width: auto; min-width: 74px; margin-right: 6px;
    font-size: 12px !important; color: var(--text);
  }
  .adm-players .adm-stat::before {
    content: attr(data-l) ' '; color: var(--dim); font-size: 11px;
  }
  /* Кнопки действий: переносятся, а не уезжают вправо */
  .adm-players .adm-acts { white-space: normal !important; display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
  .adm-players .adm-acts .btn { flex: 1 1 auto; min-width: 76px; font-size: 12px; padding: 7px 8px; }
}

/* Прочие широкие блоки админки на телефоне */
@media (max-width: 760px) {
  /* Журнал действий — горизонтальная прокрутка вместо выезда за экран */
  .adm-log-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .adm-log-wrap table { min-width: 560px; }
  /* Поля ввода и селекты не шире экрана */
  #content input, #content select, #content textarea { max-width: 100%; box-sizing: border-box; }
  /* Вкладки админки — компактнее, переносятся */
  #content .tabs, #content .tab-nav { gap: 5px; }
}

/* Инлайновые flex-ряды и гриды в админке на телефоне: переносим вместо выезда */
@media (max-width: 760px) {
  #content [style*="display:flex"]:not([style*="flex-direction:column"]) { flex-wrap: wrap; }
  /* кроме журнала — там своя горизонтальная прокрутка, переносы там вредны */
  #content :not(.adm-log-wrap) > [style*="white-space:nowrap"],
  #content [style*="white-space:nowrap"]:not(.adm-log-wrap *) { white-space: normal; }
}
@media (max-width: 480px) {
  /* Трёхколоночные блоки полей — в две колонки, двухколоночные — в одну */
  #content [style*="grid-template-columns:1fr 1fr 1fr"] { grid-template-columns: 1fr 1fr !important; }
  #content [style*="grid-template-columns:1fr 1fr"]:not([style*="1fr 1fr 1fr"]) { grid-template-columns: 1fr !important; }
}

/* ==================== Босс: фото и реплика ==================== */
/* Единое КВАДРАТНОЕ поле фото босса: 300x300, на узких экранах сжимается,
   но остаётся квадратом. Картинка любого размера вписывается по центру. */
.boss-photo {
  /* Картинка приводится к 400×400 при загрузке в панели; здесь ограничиваем
     показ на случай, если ссылка ведёт на чужое изображение большего размера */
  display: block; width: 300px; max-width: min(100%, 400px);
  aspect-ratio: 1 / 1; height: auto;
  object-fit: cover; object-position: center;
  margin: 0 auto 10px; border-radius: 10px;
  border: 1px solid var(--border); background: var(--panel-2);
}
/* Превью в админке — та же квадратная рамка, но компактнее */
.boss-photo-preview {
  display: block; width: 220px; max-width: 100%;
  aspect-ratio: 1 / 1; height: auto; object-fit: cover;
  margin: 8px auto; border-radius: 10px; border: 1px solid var(--border);
}
/* Небольшое поле под фото, где босс «говорит» */
.boss-say {
  margin: 0 -12px 10px; padding: 8px 12px;
  background: rgba(255,60,60,.08); border-left: 3px solid var(--red);
  font-size: 13px; font-style: italic; line-height: 1.35;
  overflow-wrap: break-word;
}
@media (min-width: 900px) { .boss-say { font-size: 15px; padding: 10px 14px; } }

/* ============ Кликабельные задания (переход к месту выполнения) ============ */
.quest-clickable { cursor: pointer; transition: background .15s; border-radius: 6px; }
.quest-clickable:hover { background: rgba(255,160,40,.07); }
.quest-clickable:active { background: rgba(255,160,40,.14); }
.quest-go { color: var(--orange-1); margin-top: 5px; font-weight: 600; }
/* Кнопки внутри кликабельного задания кликаются сами по себе */
.quest-clickable .btn { cursor: pointer; }

/* ============ Клуб офицеров: военные кости ============ */
.dice-row { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.dice-cube {
  width: 54px; height: 54px; font-size: 34px; line-height: 1;
  background: var(--panel-2); border: 2px solid var(--border); border-radius: 10px;
  color: var(--text); cursor: pointer; transition: all .15s;
}
.dice-cube:hover { border-color: var(--orange-1); }
/* Отмеченный кубик = оставляем при перебросе */
.dice-cube.dice-keep { border-color: var(--orange-1); background: rgba(255,160,40,.16); box-shadow: 0 0 0 2px rgba(255,160,40,.25); }
@media (min-width: 900px) { .dice-cube { width: 68px; height: 68px; font-size: 44px; } }

/* Значок союзника (игрок состоит в вашем личном альянсе) */
.ally-star { color: var(--gold, #ffc93c); font-size: .95em; }

/* Требования спецоперации по родам войск */
.req-units { display: inline-flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.req-unit { display: inline-flex; align-items: center; gap: 3px; font-weight: 700; }

/* ═══ Профиль v2: шапка по макету (имя+титул, Ур./Ал./Рейтинг, аватар слева, статистика справа) ═══ */
.pf2-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.pf2-name { color: var(--green); font-weight: 700; font-size: 17px; text-decoration: underline; text-underline-offset: 3px; }
.pf2-title { font-weight: 700; font-size: 15px; color: var(--text); }
.pf2-meta { margin-top: 4px; display: flex; gap: 16px; font-size: 13.5px; color: var(--dim); }
.pf2-meta b { color: var(--green); font-weight: 700; }
.pf2-status { margin-top: 6px; }
.pf2-edit-status { color: var(--green); text-decoration: underline; text-underline-offset: 2px; }
/* Обращение под именем: мелко и негромко — это подпись, а не звание */
.pf2-gender {
  margin-top: 2px; font-size: 11.5px; letter-spacing: .3px;
  color: var(--dim); text-transform: none;
}
.pf2-row { display: flex; gap: 12px; margin-top: 10px; align-items: stretch; }
/* Колонка с аватаркой: сама картинка + кнопка под ней. Без обёртки
   кнопка становилась соседом аватарки в строке и растягивалась во всю
   высоту, а аватарка тянулась по высоте всей карточки. */
.pf2-avatar-col {
  flex: 0 0 148px; display: flex; flex-direction: column; gap: 6px;
  align-self: flex-start;
}
.pf2-avatar-col .pf-avatar-change { width: 100%; margin: 0; }

.pf2-avatar {
  position: relative; width: 100%; aspect-ratio: 3 / 4; min-height: 0;
  border: 1px solid var(--border); border-radius: 6px;
  background-color: var(--panel-2);
  background-size: cover; background-position: top center;
  display: flex; align-items: center; justify-content: center;
}
.pf2-avatar-stub { font-size: 46px; opacity: .5; }
@media (max-width: 420px) {
  .pf2-avatar-col { flex: 0 0 108px; }
  .pf2-avatar-stub { font-size: 34px; }
  .pf2-avatar-col .pf-avatar-change { font-size: 10.5px; padding: 4px 6px; }
}
.pf2-avatar .pf-online-dot { position: absolute; top: 4px; left: 6px; font-size: 11px; }
.pf2-avatar .pf-avatar-edit { position: absolute; bottom: 4px; right: 6px; }
.pf2-info { flex: 1; min-width: 0; }
.pf2-stats-label { margin: 8px 0 2px; font-weight: 600; color: var(--dim); }
.pf2-vip { margin-top: 14px; text-align: center; }
.pf2-vip-note { font-size: 14px; margin-bottom: 8px; }
/* Кнопка в профиле раньше была заглушкой — отсюда приглушённость и
   курсор «не нажимается». Теперь подписка покупается, кнопка живая. */
.pf2-vip-btn { width: 100%; cursor: pointer; }
.pf2-vip-more { display: block; margin-top: 8px; color: var(--gold); font-size: 13px; }
.pf2-be { margin-top: 14px; border-top: 1px solid var(--border-dim); padding-top: 10px; }
.pf2-be-title { font-weight: 600; margin-bottom: 6px; }
.pf2-be-grid { display: grid; grid-template-columns: auto 1fr auto auto; gap: 4px 12px; font-size: 13px; align-items: baseline; }
.pf2-be-grid .k { color: var(--dim); }
.pf2-be-val { color: var(--green); font-weight: 700; }
/* Размер портрета задаёт колонка и единое 3:4, не исходный файл/редкость. */

/* ═══ Окно «События» — сводка за время отсутствия ═══ */
.events-popup {
  background: linear-gradient(160deg, #1a2310, #11160b);
  border: 1px solid var(--border); border-radius: 10px;
  max-width: 430px; width: 100%; max-height: 88vh; overflow-y: auto;
  padding: 16px 16px 14px;
  box-shadow: 0 10px 40px rgba(0,0,0,.6);
}
.events-popup-title { text-align: center; font-size: 17px; font-weight: 700; }
.events-popup-section { text-align: center; font-size: 15px; font-weight: 700; margin: 12px 0 6px; }
.events-red { color: var(--red); font-size: 13px; margin-top: 3px; }

/* ═══ Окно нового достижения ═══ */
.ach-popup {
  position: relative;
  background: linear-gradient(160deg, #1a2310, #11160b);
  border: 1px solid var(--green); border-radius: 10px;
  max-width: 380px; width: 100%; padding: 16px 16px 14px;
  box-shadow: 0 10px 40px rgba(0,0,0,.6);
}
.ach-popup-x {
  position: absolute; top: 6px; right: 10px;
  background: none; border: none; color: var(--dim);
  font-size: 15px; cursor: pointer; padding: 4px;
}
.ach-popup-head { text-align: center; font-weight: 700; font-size: 14px; }
.ach-popup-name { text-align: center; font-weight: 700; color: var(--gold); font-size: 16px; margin-top: 2px; }
.ach-popup-desc { text-align: center; font-size: 13px; margin-top: 8px; color: var(--text); }
.ach-popup-img { display: flex; justify-content: center; margin: 12px 0 8px; }
.ach-popup-img img {
  width: 84px; height: 84px; border-radius: 50%;
  border: 2px solid var(--border); object-fit: cover; background: var(--panel-2);
}
.ach-popup-show { display: block; text-align: center; color: var(--green); text-decoration: underline; text-underline-offset: 2px; font-size: 14px; }

/* ═══ Окно оплаченной покупки ═══ */
.buy-popup { border-color: var(--gold); }
.buy-popup-img { display: flex; justify-content: center; margin: 10px 0 2px; }
.buy-popup-img img { width: 96px; height: 96px; object-fit: contain; }
/* Большой набор не должен выталкивать кнопку «Забрать» за край экрана */
.buy-popup .offer-items { max-height: 45vh; overflow-y: auto; }
.receipt-lines { margin-top: 6px; }

/* ═══ Сброшенный позывной ═══ */
.nr-form { margin-top: 10px; }
.nr-lead { font-size: 13px; margin: 0; }
.nr-reason { font-size: 13px; color: var(--orange-1); margin: 6px 0; }
.nr-err { color: var(--red); font-size: 12.5px; min-height: 16px; margin: 6px 0 0; }
.name-reset-bar { border-color: var(--orange-1); }

/* ═══ Пояснение к оплате ═══ */
.pay-note p { margin: 0; }

/* ═══ Бонусы к покупкам ═══ */
.promo-banner.is-used { opacity: .55; }
.promo-line { margin-top: 2px; }

/* ═══════════════════════════════════════════════════════════════════
   КАСТОМНЫЕ ПОЛЯ ВВОДА (.field) — единый компонент формы
   Используется в смене пароля и техническом разделе админки. Базовый
   вид — под классическую тему; ниже каждая тема переопределяет фон,
   рамку и подсветку фокуса, чтобы поле выглядело «своим» в любой теме.
   =================================================================== */
.field {
  width: 100%;
  padding: 11px 12px;
  background: #0d1208;
  color: var(--text);
  border: 1.5px solid var(--border);
  border-radius: 8px;
  font-size: 14.5px;
  outline: none;
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.field::placeholder { color: var(--dim); opacity: .7; }
.field:focus {
  border-color: var(--orange-1);
  box-shadow: 0 0 0 3px rgba(192, 122, 22, .18);
}
.field:disabled { opacity: .5; cursor: not-allowed; }
/* Состояния валидации: подсвечиваем поле, не дожидаясь отправки формы */
.field.field-bad   { border-color: var(--red); box-shadow: 0 0 0 3px rgba(224, 108, 90, .16); }
.field.field-good  { border-color: var(--money); box-shadow: 0 0 0 3px rgba(134, 211, 79, .14); }

.field-label {
  display: block;
  margin: 12px 0 5px;
  color: var(--dim);
  font-size: 12.5px;
  letter-spacing: .02em;
}
.field-hint { margin-top: 8px; font-size: 12.5px; min-height: 16px; color: var(--dim); }
.field-hint-bad  { color: var(--red); }
.field-hint-good { color: var(--money); }

/* ── Поля под каждую тему ─────────────────────────────────────────── */

/* Военная сталь: холодный металл, жёсткая рамка */
body.theme-steel .field {
  background: #1a1d1f;
  border: 1.5px solid #3a4044;
  border-radius: 3px;
  color: #c3c8cb;
}
body.theme-steel .field:focus {
  border-color: #7d8a91;
  box-shadow: inset 0 0 0 1px rgba(125, 138, 145, .25);
}
body.theme-steel .field-label { text-transform: uppercase; font-size: 11px; letter-spacing: .1em; }

/* Кибер-война: неон, свечение, тонкая рамка */
body.theme-cyber .field {
  background: rgba(8, 20, 28, .75);
  border: 1px solid rgba(0, 212, 255, .35);
  border-radius: 4px;
  color: #d6f4ff;
  backdrop-filter: blur(4px);
}
body.theme-cyber .field:focus {
  border-color: #00d4ff;
  box-shadow: 0 0 12px rgba(0, 212, 255, .35), inset 0 0 8px rgba(0, 212, 255, .08);
}
body.theme-cyber .field.field-bad  { border-color: #ff5d73; box-shadow: 0 0 12px rgba(255, 93, 115, .3); }
body.theme-cyber .field.field-good { border-color: #4dffb8; box-shadow: 0 0 12px rgba(77, 255, 184, .3); }
body.theme-cyber .field-label { text-transform: uppercase; font-size: 11px; letter-spacing: .14em; color: #6ec8e0; }

/* Пустынный фронт: песок и выгоревший камуфляж */
body.theme-desert .field {
  background: #3a2f1e;
  border: 1.5px solid #6b5734;
  border-radius: 6px;
  color: #f0e2c4;
}
body.theme-desert .field:focus {
  border-color: #d9a441;
  box-shadow: 0 0 0 3px rgba(217, 164, 65, .2);
}

/* Полуночный штаб: мягкий графит, минимум контраста */
body.theme-noir .field {
  background: #1c1c1e;
  border: 1px solid #34343a;
  border-radius: 10px;
  color: #cfcfd4;
}
body.theme-noir .field:focus {
  border-color: #6e6e78;
  box-shadow: 0 0 0 3px rgba(110, 110, 120, .18);
}
body.theme-noir .field-hint { color: #8a8a92; }

/* ═══ Окно докупки техники для шага спецоперации ═══════════════════
   Раньше эта разметка уходила в UI.confirm без опции html, и игрок видел
   сырые HTML-теги. Теперь — карточки с картинкой техники, количеством,
   ценой за единицу и итоговой суммой снизу. */
.buy-units-head { font-size: 13px; margin-bottom: 8px; }
.buy-units-list { max-height: 46vh; overflow-y: auto; margin-bottom: 10px; }
.buy-units-row {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 0; border-bottom: 1px solid var(--border-dim);
  text-align: left;
}
.buy-units-img {
  width: 54px; height: 40px; object-fit: cover; flex: 0 0 54px;
  border: 1px solid var(--border); border-radius: 5px; background: var(--panel-2);
}
.buy-units-stub {
  width: 54px; height: 40px; flex: 0 0 54px; display: flex;
  align-items: center; justify-content: center; font-size: 20px;
  border: 1px solid var(--border); border-radius: 5px; background: var(--panel-2);
}
.buy-units-info { flex: 1; min-width: 0; }
.buy-units-name { font-weight: 600; font-size: 13.5px; }
.buy-units-num { text-align: right; flex: 0 0 auto; }
.buy-units-count { font-weight: 700; color: var(--gold); font-size: 15px; }
.buy-units-total {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 8px; padding-top: 8px; border-top: 1px solid var(--border);
  font-size: 14px;
}
.buy-units-total b { font-size: 16px; }

/* Поручение не принято — прогресс-бар заменён пояснением */
.quest-not-accepted {
  padding: 5px 8px; border: 1px dashed var(--border);
  border-radius: 6px; font-style: italic;
}

/* Заглушка портрета заказчика, если файла картинки нет */
.ic-instr-stub {
  display: inline-flex; align-items: center; justify-content: center;
  width: 58px; height: 58px; font-size: 26px;
  border: 1px solid var(--border); border-radius: 8px; background: var(--panel-2);
}

/* ═══ Чат: союзники по личному альянсу и кнопка «Ответить» ═══ */
.chat-msg-ally { border-left: 2px solid var(--gold); padding-left: 6px; }
.chat-ally-star { font-size: 11px; margin-right: 2px; }
.chat-reply {
  background: none; border: none; cursor: pointer;
  color: var(--dim); font-size: 13px; padding: 0 4px; line-height: 1;
}
.chat-reply:hover { color: var(--orange-1); }

/* Цитата ответа. Без неё в потоке не понять, кто кому отвечает:
   обращение «Позывной, …» в начале строки терялось среди чужих
   реплик (просьба игрока 24.09.2026). */
.chat-quote {
  border-left: 3px solid var(--dim); padding: 2px 0 2px 7px; margin: 2px 0 3px;
  font-size: 12px; line-height: 1.3; color: var(--dim);
  overflow: hidden; text-overflow: ellipsis; display: -webkit-box;
  -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.chat-quote-who { font-weight: 600; color: var(--gold); margin-right: 5px; }
.chat-quote-del { font-style: italic; opacity: .7; }

/* Полоска «отвечаете такому-то» над полем ввода */
.chat-reply-bar {
  display: flex; align-items: center; gap: 6px; margin-top: 6px;
  border: 1px solid var(--border); border-left: 3px solid var(--gold);
  border-radius: 6px; padding: 4px 6px; font-size: 12px; background: var(--panel-2);
}
.chat-reply-ico { color: var(--gold); }
.chat-reply-to { flex: 1 1 auto; min-width: 0; color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-reply-to b { color: var(--text); margin-right: 5px; }
.chat-reply-x {
  background: none; border: none; cursor: pointer; color: var(--dim);
  font-size: 13px; padding: 0 3px; line-height: 1;
}
.chat-reply-x:hover { color: var(--red); }

/* ═══ Окно награды за вход («довольствие от штаба») ═══ */
.login-reward {
  background: linear-gradient(160deg, #1a2310, #11160b);
  border: 1px solid var(--gold); border-radius: 12px;
  max-width: 380px; width: 100%; padding: 18px 16px 14px;
  box-shadow: 0 12px 40px rgba(0,0,0,.6); text-align: center;
}
.login-reward-title { font-size: 17px; font-weight: 700; color: var(--gold); }
.login-reward-day { font-size: 12.5px; color: var(--dim); margin-top: 2px; }
.login-reward-text { font-size: 13.5px; font-style: italic; margin: 12px 0; line-height: 1.5; }
.login-reward-sum {
  display: flex; justify-content: center; gap: 18px; flex-wrap: wrap;
  padding: 10px 0; border-top: 1px solid var(--border-dim); border-bottom: 1px solid var(--border-dim);
}
.reward-line { font-size: 17px; }

/* Результат взлома сейфа в окне */
.safe-result { text-align: center; font-size: 13.5px; line-height: 1.5; }
.safe-sum { margin-top: 10px; font-size: 20px; }

/* Заказчик в карточке контракта */
.contract-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.contract-head-info { flex: 1; min-width: 0; }

/* Номер места в рейтинге — раньше первые три строки показывали ТОЛЬКО
   медаль без номера, и такие же медали были в блоке «итоги прошлой недели».
   Из-за этого один игрок читался как занимающий сразу несколько мест. */
.rank-num { display: inline-block; min-width: 22px; color: var(--dim); font-variant-numeric: tabular-nums; }

/* Портрет заказчика в строке названия поручения (вместо эмодзи-иконки):
   выравниваем по тексту, чуть меньше скругление под маленький размер */
.name > .ic-instr { vertical-align: -6px; border-radius: 6px; }

/* ═══ Окно «Пока вас не было»: подробная сводка ущерба ═══════════════ */
.wr-popup { max-width: 460px; max-height: 82vh; overflow-y: auto; text-align: left; }
.wr-since { text-align: center; margin-bottom: 10px; }
.wr-bad { color: var(--red); }
.wr-good { color: var(--money); }

/* Три крупных числа: атак / отбито / поражений */
.wr-stats { display: flex; gap: 8px; margin-bottom: 6px; }
.wr-stat {
  flex: 1; text-align: center; padding: 8px 4px;
  background: var(--panel-2); border: 1px solid var(--border-dim); border-radius: 8px;
}
.wr-stat-num { font-size: 22px; font-weight: 700; line-height: 1.1; }
.wr-stat-cap { font-size: 11px; color: var(--dim); margin-top: 2px; }

.wr-damage { padding: 2px 0; }
.wr-row {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 8px; padding: 4px 0; font-size: 13.5px;
}

/* Карточка нападавшего */
.wr-attacker {
  padding: 7px 0; border-bottom: 1px solid var(--border-dim);
}
.wr-attacker:last-of-type { border-bottom: none; }
.wr-attacker-main { display: flex; align-items: center; gap: 6px; }
.wr-name { color: var(--orange-1); font-weight: 600; text-decoration: none; }
.wr-name:hover { text-decoration: underline; }
.wr-times {
  margin-left: auto; font-weight: 700; color: var(--red);
  background: rgba(220,60,60,.12); border-radius: 5px; padding: 1px 7px; font-size: 13px;
}
.wr-attacker-detail { margin-top: 2px; }

/* Ракетный удар */
.wr-rocket {
  padding: 7px 9px; margin: 6px 0;
  border: 1px solid var(--border); border-left: 3px solid var(--red);
  border-radius: 6px; background: var(--panel-2);
}
.wr-rocket-head { font-size: 13.5px; margin-bottom: 3px; }
.wr-rocket-body div { padding: 1px 0; }

/* ═══ Прокрутка к результату боя ═════════════════════════════════════
   scroll-margin-top не даёт блоку уехать под шапку, а вспышка помогает
   сразу найти взглядом, чем кончилась атака. */
#battle-result, #war-encounter { scroll-margin-top: 12px; }

@keyframes scrollFlash {
  0%   { box-shadow: 0 0 0 0 rgba(255, 176, 60, .0); }
  15%  { box-shadow: 0 0 0 3px rgba(255, 176, 60, .55); }
  100% { box-shadow: 0 0 0 0 rgba(255, 176, 60, 0); }
}
.scroll-flash { animation: scrollFlash 1.5s ease-out; }

/* ═══ Подвал сайта: правовые документы ═══════════════════════════════ */
#site-footer {
  max-width: 560px; margin: 26px auto 18px; padding: 14px 16px 0;
  border-top: 1px solid var(--border-dim);
  text-align: center; font-size: 12.5px; color: var(--dim);
}
#site-footer a { color: var(--dim); text-decoration: none; }
#site-footer a:hover { color: var(--orange-1); text-decoration: underline; }
.footer-sep { margin: 0 6px; opacity: .5; }
.footer-moscow-time { display:flex; align-items:center; justify-content:center; gap:8px; margin-top:13px; color:#89927c; font-size:11px; letter-spacing:.04em; text-transform:uppercase; }
.footer-moscow-time b { min-width:68px; color:var(--gold); font-size:12px; font-variant-numeric:tabular-nums; letter-spacing:.09em; }
.footer-socials { margin-top: 14px; }
.footer-socials-title {
  display: block; margin-bottom: 8px; color: #89927c;
  font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
}
.footer-socials-row { display: flex; justify-content: center; gap: 10px; }
#site-footer .footer-social {
  display: inline-grid; place-items: center; width: 32px; height: 32px;
  overflow: hidden; border: 1px solid rgba(255,255,255,.13); border-radius: 10px;
  color: #fff; text-decoration: none; box-shadow: 0 3px 10px rgba(0,0,0,.24);
  transition: transform .16s ease, filter .16s ease, box-shadow .16s ease;
}
#site-footer .footer-social:hover {
  color: #fff; text-decoration: none; transform: translateY(-2px);
  filter: brightness(1.1); box-shadow: 0 6px 14px rgba(0,0,0,.32);
}
#site-footer .footer-social:focus-visible {
  outline: 2px solid var(--gold); outline-offset: 3px;
}
.footer-social svg {
  width: 23px; height: 23px; display: block;
  transform: scale(1.4); transform-origin: center;
}
.footer-social-vk { background: linear-gradient(145deg, #3189df, #1769aa); }
.footer-social-vk text {
  fill: currentColor; font: 800 16px Arial, sans-serif; letter-spacing: -1px;
  transform: scale(.5); transform-origin: 12px 12px;
}
.footer-social-tg { background: linear-gradient(145deg, #35afe4, #1687bd); }
.footer-social-tg path { fill: currentColor; }
.footer-social-ig { background: linear-gradient(145deg, #7b3fba 5%, #d63878 48%, #f08a32 100%); }
.footer-social-ig rect, .footer-social-ig circle {
  fill: none; stroke: currentColor; stroke-width: 1.8;
}
.footer-social-ig .footer-social-dot { fill: currentColor; stroke: none; }
@media (max-width: 420px) {
  #site-footer { margin-bottom: 14px; }
  #site-footer .footer-social { width: 35px; height: 35px; border-radius: 10px; }
  .footer-socials-row { gap: 12px; }
}

/* ═══ Роли: значки в чате и окно блокировки ══════════════════════════ */
.chat-staff {
  font-size: 10.5px; font-weight: 700; text-transform: uppercase;
  padding: 1px 6px; border-radius: 4px; letter-spacing: .3px;
}
.chat-staff-moderator { background: rgba(60,190,240,.20); color: #6fdcff; border: 1px solid #3fa8cc; }
.chat-staff-admin     { background: rgba(200,120,40,.18); color: var(--orange-1); border: 1px solid #96602d; }
.chat-staff-owner     { background: rgba(200,170,60,.18); color: var(--gold); border: 1px solid #8d7526; }

.chat-mute {
  background: none; border: none; cursor: pointer;
  color: var(--dim); font-size: 12px; padding: 0 3px;
}
.chat-mute:hover { color: var(--red); }

.ban-dialog { text-align: left; }
.ban-target { font-size: 14px; margin-bottom: 10px; }
.ban-label { font-size: 12px; color: var(--dim); margin: 10px 0 5px; }
.ban-grid { display: flex; flex-wrap: wrap; gap: 5px; }
.ban-opt {
  background: var(--panel-2); border: 1px solid var(--border); color: var(--fg);
  border-radius: 6px; padding: 5px 9px; font-size: 12.5px; cursor: pointer;
}
.ban-opt:hover { border-color: var(--orange-1); }
.ban-opt.active { background: rgba(200,120,40,.2); border-color: var(--orange-1); color: var(--orange-1); }
.ban-reasons .ban-opt { font-size: 12px; }

/* ═══ Экран блокировки аккаунта ══════════════════════════════════════ */
#ban-screen {
  position: fixed; inset: 0; z-index: 20000;
  display: flex; align-items: center; justify-content: center;
  background: rgba(8, 10, 6, .97); padding: 16px;
}
.ban-screen-box {
  max-width: 360px; width: 100%; text-align: center;
  background: linear-gradient(160deg, #241111, #140b0b);
  border: 1px solid #6b2a2a; border-radius: 14px;
  padding: 22px 18px 16px; box-shadow: 0 14px 50px rgba(0,0,0,.7);
}
.ban-screen-icon { font-size: 40px; line-height: 1; }
.ban-screen-title { font-size: 19px; font-weight: 700; color: #e56a6a; margin-top: 8px; }
.ban-screen-who { font-size: 13px; color: var(--dim); margin-top: 2px; }
.ban-screen-reason {
  margin-top: 14px; padding: 9px 11px; text-align: left;
  background: rgba(0,0,0,.3); border: 1px solid #4a2020; border-radius: 8px;
}
.ban-screen-label { font-size: 11px; color: var(--dim); text-transform: uppercase; letter-spacing: .4px; }
.ban-screen-value { font-size: 15px; margin-top: 2px; word-break: break-word; }
.ban-left { color: var(--orange-1); font-weight: 700; }
.ban-forever { color: #e56a6a; font-weight: 700; }
.ban-screen-date { font-size: 11.5px; color: var(--dim); margin-top: 10px; }
.ban-screen-note { font-size: 12.5px; color: var(--dim); margin-top: 12px; line-height: 1.5; }

/* ═══ Баннер результата боя ══════════════════════════════════════════
   Вместо текстовой надписи «ПОБЕДА»/«ПОРАЖЕНИЕ» — картинка на всю
   ширину карточки. Текстовый вариант остаётся запасным, если файл
   почему-то не загрузится. */
/* Вдвое меньше прежнего (решение владельца 22.09.2026): на всю ширину
   баннер занимал полэкрана, и сами цифры боя уезжали вниз. Теперь
   половина ширины по центру — высота уменьшается вдвое вместе с ней. */
.result-banner {
  display: block; width: 50%; margin: 0 auto 8px;
  max-width: none; height: auto; border-radius: 8px;
}

/* На телефоне результат боя занимает всю внутреннюю ширину карточки.
   Высота растёт вместе с шириной изображения, без обрезки и искажения
   пропорций; боковые поля карточки компенсируются отрицательным отступом. */
@media (max-width: 620px) {
  #battle-result .result-banner {
    width: calc(100% + 24px); margin: -12px -12px 10px;
    height: auto; border-radius: 6px 6px 0 0;
  }
}

/* ═══ Узкие экраны (от 320px): кнопки не должны вылезать за край ═══ */
@media (max-width: 380px) {
  /* Текст в кнопках меню переносится, а не обрезается */
  .menu-btn {
    font-size: 11.5px; letter-spacing: .02em; padding: 8px 8px;
    gap: 6px; min-height: 56px; line-height: 1.25;
    word-break: break-word; hyphens: auto;
  }
  .menu-btn img.ic-menu { width: 30px; height: 30px; }
  .menu-grid { gap: 6px; }
  /* Вкладки и кнопки внутри карточек */
  .tabs { gap: 4px; }
  .tab { padding: 6px 8px; font-size: 12px; }
  .btn { padding: 9px 12px; font-size: 13px; }
  .btn-inline { padding: 5px 8px; font-size: 12px; }
  .card { padding: 12px; }
  .title { font-size: 17px; }
  /* Значки-счётчики не растягивают кнопку */
  .badge { font-size: 10px; padding: 1px 5px; }
}
@media (max-width: 340px) {
  .menu-btn { font-size: 10.5px; min-height: 52px; }
  .menu-btn img.ic-menu { width: 26px; height: 26px; }
}

/* ═══ Баннеры взлома хранилища ═══════════════════════════════════════
   Появляются при обнаружении сейфа и в окне результата взлома. */
.safe-banner {
  display: block; width: calc(100% + 34px); margin: -15px -17px 10px;
  height: auto; border-radius: 8px 8px 0 0;
}
/* В диалоговом окне баннер идёт под заголовком, поэтому верхний отступ
   не убираем — компенсируем только боковые поля (.game-dialog padding 20px) */
.safe-banner-dialog {
  width: calc(100% + 40px); margin: 0 -20px 12px; border-radius: 0;
}
@media (max-width: 400px) {
  .safe-banner { width: calc(100% + 24px); margin: -12px -12px 8px; }
  .safe-banner-dialog { width: calc(100% + 32px); margin: 0 -16px 10px; }
}

/* ═══ Баннеры минного поля ═══════════════════════════════════════════
   Показываются при нарыве на поле и при подрыве. Успешное
   разминирование картинки не имеет — игрок просто продолжает атаки. */
.mine-banner {
  display: block; width: calc(100% + 34px); margin: -15px -17px 10px;
  height: auto; border-radius: 8px 8px 0 0;
}
.mine-banner-dialog {
  width: calc(100% + 40px); margin: 0 -20px 12px; border-radius: 0;
}
.mine-result { text-align: center; font-size: 13.5px; line-height: 1.5; }
.mine-result p { margin: 6px 0; }
@media (max-width: 400px) {
  .mine-banner { width: calc(100% + 24px); margin: -12px -12px 8px; }
  .mine-banner-dialog { width: calc(100% + 32px); margin: 0 -16px 10px; }
}

/* ═══ Настройка возможностей ролей ═══════════════════════════════════ */
.perm-role { padding: 10px 0; border-bottom: 1px solid var(--border-dim); }
.perm-role:last-child { border-bottom: none; }
.perm-role-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.perm-role-head button { margin-left: auto; }
.perm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; }
.perm-item {
  display: flex; align-items: center; gap: 6px; cursor: pointer;
  padding: 6px 9px; border: 1px solid var(--border); border-radius: 6px;
  background: var(--panel-2); font-size: 12.5px; user-select: none;
}
.perm-item:hover { border-color: var(--orange-1); }
.perm-item.on { background: rgba(90,150,70,.14); border-color: #4d7a3d; color: #b8d9a8; }
.perm-item input { accent-color: var(--orange-1); cursor: pointer; }
@media (max-width: 380px) {
  .perm-grid { grid-template-columns: 1fr 1fr; }
  .perm-item { font-size: 11.5px; padding: 5px 7px; }
}

/* ═══ Модерация чата: цвета, метки, правила ══════════════════════════ */
/* Сообщения сотрудников: выделяется только САМ ТЕКСТ, чтобы требования
   не терялись в потоке. Имя, флаг и фон строки остаются обычными —
   подсветка всей строки перегружала ленту. Роль и так видна по значку. */
.chat-msg-staff { padding-left: 0; }
.chat-msg-moderator .chat-text { color: #6fdcff; }
.chat-msg-admin .chat-text     { color: var(--orange-1); }
.chat-msg-owner .chat-text     { color: var(--gold); }

/* Игрок под блокировкой — видно только сотрудникам */
.chat-msg-banned { opacity: .72; }
.chat-banned-mark { font-size: 11px; opacity: .8; }

/* Выбор каналов в окне блокировки */
.ban-scopes { margin-bottom: 4px; }
.ban-scope-all {
  background: rgba(200,120,40,.14); border-color: var(--orange-1); color: var(--orange-1);
}
.ban-status {
  border: 1px solid var(--border); border-radius: 8px; padding: 9px 11px;
  background: var(--panel-2); font-size: 13.5px; line-height: 1.6;
}

/* Инструменты модератора в профиле */
.pf-mod-block {
  border: 1px solid #3d6f96; border-radius: 8px; padding: 10px 12px;
  background: rgba(70,140,200,.06);
}
.pf-mod-title { font-weight: 700; color: #7fc0ea; font-size: 13.5px; margin-bottom: 4px; }

/* Правила общения */
.chat-rules { text-align: left; max-height: 60vh; overflow-y: auto; }
.chat-rule { display: flex; gap: 9px; padding: 7px 0; border-bottom: 1px solid var(--border-dim); }
.chat-rule:last-of-type { border-bottom: none; }
.chat-rule-num {
  flex: 0 0 22px; height: 22px; border-radius: 50%; background: var(--panel-2);
  border: 1px solid var(--border); display: flex; align-items: center;
  justify-content: center; font-size: 12px; font-weight: 700; color: var(--orange-1);
}
.chat-foot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.chat-foot-hint { margin-left: auto; }

/* ═══ Плашка блокировки аккаунта в профиле ═══════════════════════════
   Стоит в самом верху, чтобы наказание было видно сразу. Время
   пересчитывается при открытии страницы, без тиканья секунд. */
.pf-ban-banner {
  border: 1px solid #6b2a2a; border-left: 3px solid var(--red);
  background: linear-gradient(160deg, rgba(90,25,25,.5), rgba(40,15,15,.35));
  border-radius: 10px; padding: 11px 13px; margin-bottom: 10px;
}
.pf-ban-head { font-weight: 700; color: #e56a6a; font-size: 15px; margin-bottom: 6px; }
.pf-ban-row {
  display: flex; justify-content: space-between; gap: 10px;
  font-size: 13.5px; padding: 2px 0;
}
.pf-ban-row span { color: var(--dim); }
.pf-ban-left { color: var(--orange-1); }

/* ═══ Удалённые сообщения ════════════════════════════════════════════
   Видны только администрации и владельцу — чтобы можно было проверить,
   за что наказан игрок. Для остальных сообщение просто исчезает. */
.chat-msg-deleted {
  opacity: .55;
  background: repeating-linear-gradient(45deg,
    rgba(220,60,60,.05) 0 8px, transparent 8px 16px);
  border-left: 2px solid rgba(220,60,60,.4);
  padding-left: 6px;
}
.chat-msg-deleted .who { text-decoration: line-through; }
.chat-deleted-mark {
  font-size: 10.5px; color: #e07a7a; background: rgba(220,60,60,.12);
  border: 1px solid rgba(220,60,60,.3); border-radius: 4px; padding: 1px 5px;
}

/* Галочка удаления в окне блокировки */
.ban-purge {
  display: flex; align-items: flex-start; gap: 7px; cursor: pointer;
  margin: 12px 0 4px; padding: 8px 10px; font-size: 12.5px;
  border: 1px solid var(--border); border-radius: 6px; background: var(--panel-2);
}
.ban-purge input { margin-top: 2px; accent-color: var(--orange-1); cursor: pointer; }

/* Заглушка на месте удалённого сообщения — видна всем игрокам */
.chat-msg-tomb { opacity: .6; }
.chat-msg-tomb .who { color: var(--dim); }
.chat-tomb-text { font-style: italic; color: var(--dim); font-size: 12.5px; }

/* ═══ Метки сотрудников проекта ══════════════════════════════════════ */
/* Короткая буква в списках, где нет места на полную подпись роли */
.staff-mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; border-radius: 50%;
  font-size: 10.5px; font-weight: 700; line-height: 1;
  vertical-align: middle; margin-left: 3px;
}
.staff-mark-moderator { background: rgba(60,190,240,.18); color: #6fdcff; border: 1px solid #3fa8cc; }
.staff-mark-admin     { background: rgba(200,120,40,.18); color: var(--orange-1); border: 1px solid #96602d; }
.staff-mark-owner     { background: rgba(200,170,60,.18); color: var(--gold); border: 1px solid #8d7526; }

/* Полная подпись роли в профиле */
.pf-staff-badge {
  display: inline-block; margin-left: 6px; padding: 2px 8px;
  border-radius: 5px; font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .4px; vertical-align: middle;
}
.pf-staff-moderator { background: rgba(60,190,240,.18); color: #6fdcff; border: 1px solid #3fa8cc; }
.pf-staff-admin     { background: rgba(200,120,40,.18); color: var(--orange-1); border: 1px solid #96602d; }
.pf-staff-owner     { background: rgba(200,170,60,.18); color: var(--gold); border: 1px solid #8d7526; }

/* ═══ Рабочий стол администратора ════════════════════════════════════
   Панель владельца — про настройку игры, панель администратора — про
   ежедневную работу с людьми. Отсюда другой первый экран: не список
   вкладок, а сводка «что требует внимания сейчас». */
.adm-hello {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
  background: linear-gradient(135deg, rgba(60,110,60,.16), rgba(30,40,25,.4));
  border: 1px solid var(--border); border-radius: 10px;
  padding: 12px 15px; margin-bottom: 10px;
}
.adm-hello-name { font-size: 17px; font-weight: 700; color: var(--gold); }
.adm-hello-stats { display: flex; gap: 16px; }
.adm-hello-stats div { text-align: center; }
.adm-hello-stats b { display: block; font-size: 18px; color: var(--fg); }
.adm-hello-stats span { font-size: 10.5px; color: var(--dim); }

.adm-alert {
  display: flex; align-items: center; gap: 9px;
  padding: 9px 11px; margin-top: 7px; border-radius: 8px;
  border: 1px solid var(--border); background: var(--panel-2); font-size: 13.5px;
}
.adm-alert-hot  { border-color: #8b3a3a; background: rgba(150,50,50,.12); }
.adm-alert-warn { border-color: #8a6b2a; background: rgba(190,140,40,.10); }
.adm-alert-icon { font-size: 17px; }

.adm-measure {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 0; border-bottom: 1px solid var(--border-dim); font-size: 13px;
}
.adm-measure:last-child { border-bottom: none; }
.adm-measure-tag {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  padding: 1px 6px; border-radius: 4px; background: var(--panel-2);
  border: 1px solid var(--border); color: var(--dim);
}
.adm-tag-ban  { background: rgba(200,60,60,.16); border-color: #8b3a3a; color: #e07a7a; }
.adm-tag-mute { background: rgba(60,190,240,.14); border-color: #3fa8cc; color: #6fdcff; }
.adm-measure-left { color: var(--orange-1); font-size: 12px; white-space: nowrap; }
.adm-link { color: var(--orange-1); text-decoration: none; font-weight: 600; }
.adm-link:hover { text-decoration: underline; }

.adm-act {
  display: flex; gap: 9px; padding: 4px 0; font-size: 12.5px;
  border-bottom: 1px solid var(--border-dim);
}
.adm-act:last-child { border-bottom: none; }

/* Карточка игрока */
.adm-card { text-align: left; }
.adm-card-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.adm-card-rows { display: grid; grid-template-columns: 1fr 1fr; gap: 5px 12px; font-size: 13px; }
.adm-card-rows div { display: flex; justify-content: space-between; gap: 8px; }
.adm-card-rows span { color: var(--dim); }
.adm-card-warn {
  margin-top: 9px; padding: 8px 10px; border-radius: 7px; font-size: 13px;
  border: 1px solid #8b3a3a; background: rgba(150,50,50,.12);
}
.adm-card-acts { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 11px; }
.adm-card-log { margin-top: 11px; border-top: 1px solid var(--border-dim); padding-top: 8px; }
@media (max-width: 420px) {
  .adm-card-rows { grid-template-columns: 1fr; }
  .adm-hello-stats { gap: 12px; }
}

/* Закрепление обращений за сотрудником */
.sup-owner { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sup-tag {
  font-size: 10.5px; font-weight: 700; text-transform: uppercase;
  padding: 2px 7px; border-radius: 4px; letter-spacing: .3px;
}
.sup-free  { background: rgba(90,150,70,.16); color: #a8d18f; border: 1px solid #4d7a3d; }
.sup-mine  { background: rgba(200,120,40,.18); color: var(--orange-1); border: 1px solid #96602d; }
.sup-taken { background: rgba(120,120,120,.15); color: var(--dim); border: 1px solid var(--border); }
.adm-log-who { color: var(--orange-1); font-size: 12px; white-space: nowrap; }

/* ═══ Приписка роли: маленьким шрифтом по верхней линии имени ════════
   Раньше роль выводилась полным словом в рамке и перегружала строку.
   Теперь это короткий надстрочный тег — как сноска у имени. */
.role-tag {
  font-size: 9px; font-weight: 700; letter-spacing: .3px;
  vertical-align: super; line-height: 1; margin-left: 2px;
  text-transform: lowercase; opacity: .95; white-space: nowrap;
}
.role-tag-owner     { color: var(--gold); }
.role-tag-admin     { color: var(--orange-1); }
.role-tag-commissar { color: #4fd6b8; }
.role-tag-moderator { color: #6fdcff; }

/* Цвет текста сообщений по роли */
.chat-msg-commissar .chat-text { color: #4fd6b8; }

/* Счётчик онлайна в подвале */
.online-counter {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; color: var(--dim); margin-bottom: 6px;
}
.online-dot {
  width: 7px; height: 7px; border-radius: 50%; background: #5fbf4a;
  box-shadow: 0 0 6px rgba(95,191,74,.7); animation: onlinePulse 2.4s ease-in-out infinite;
}
@keyframes onlinePulse { 0%,100% { opacity: 1; } 50% { opacity: .45; } }
#online-num { color: #8fd47a; font-weight: 700; }
/* Счётчик нажимается — открывает список игроков */
#online-counter { cursor: pointer; border-bottom: 1px dashed transparent; }
#online-counter:hover, #online-counter:focus-visible { color: var(--text); border-bottom-color: var(--dim); outline: none; }

/* Листалка списка игроков */
.players-pager {
  display: flex; align-items: center; justify-content: center;
  gap: 6px; flex-wrap: wrap; margin: 10px 0;
}
.players-pager .btn[disabled] { opacity: .4; cursor: default; }

/* Журнал начислений золота */
.gold-src { display: flex; flex-wrap: wrap; gap: 5px; }
.gold-src-tag {
  font-size: 10px; padding: 1px 6px; border-radius: 4px; white-space: nowrap;
  background: rgba(200,170,60,.14); color: var(--gold); border: 1px solid #8d7526;
}

/* ═══ Форум ══════════════════════════════════════════════════════════ */
.comm-tabs { margin-bottom: 6px; }
.comm-subtabs { margin-bottom: 8px; }
.comm-subtabs .tab { font-size: 12.5px; padding: 5px 10px; }

.forum-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.forum-row {
  display: flex; gap: 10px; padding: 9px 0;
  border-bottom: 1px solid var(--border-dim);
}
.forum-row:last-child { border-bottom: none; }
/* Темы сотрудников выделены: объявления не должны теряться */
.forum-row-staff {
  background: linear-gradient(90deg, rgba(200,170,60,.07), transparent);
  border-left: 2px solid var(--gold); padding-left: 8px; margin-left: -8px;
}
.forum-title { color: var(--fg); text-decoration: none; font-size: 14.5px; }
.forum-title:hover { color: var(--orange-1); }
.forum-title-staff { font-weight: 700; color: var(--gold); }
.forum-meta { margin-top: 3px; }
.forum-closed { color: var(--red); margin-left: 6px; }

.forum-topic-title { font-size: 17px; font-weight: 700; margin-bottom: 3px; }
.forum-text { margin-top: 10px; font-size: 14px; line-height: 1.6; word-break: break-word; }
/* Картинка темы: 70% ширины основной области, но не шире оригинала */
.forum-img {
  display: block; width: 70%; max-width: 100%; height: auto;
  margin: 12px auto; border-radius: 8px; border: 1px solid var(--border);
}
/* Предпросмотр в окне создания темы: ограничиваем ВЫСОТУ, иначе
   вертикальный скриншот с телефона выталкивает кнопку «Создать»
   за пределы окна */
.forum-img-preview {
  width: auto; max-width: 60%; max-height: 150px;
  object-fit: contain; margin: 8px auto 0;
}
/* Окно создания темы не должно вырастать выше экрана */
.forum-new { max-height: 62vh; overflow-y: auto; }
.forum-acts { display: flex; gap: 6px; flex-wrap: wrap; }

.forum-comment { padding: 8px 0; border-bottom: 1px solid var(--border-dim); }
.forum-comment:last-child { border-bottom: none; }
.forum-comment-head { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.forum-comment-text { margin-top: 3px; font-size: 13.5px; line-height: 1.55; word-break: break-word; }
.forum-comment-deleted { opacity: .6; }

.forum-pages { display: flex; gap: 4px; justify-content: center; flex-wrap: wrap; margin-top: 12px; }
.forum-page { min-width: 32px; }
.forum-dots { color: var(--dim); padding: 0 2px; align-self: center; }
.forum-ban-note { border-color: #8b3a3a; background: rgba(150,50,50,.10); }
.forum-new .field { width: 100%; box-sizing: border-box; }
.forum-new-img { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
@media (max-width: 420px) {
  .forum-img { width: 92%; }
  .forum-img-preview { width: 80%; }
}

/* ═══ Панель: компактный вид ═════════════════════════════════════════
   Вкладок много, поэтому они мельче и плотнее — иначе шапка занимает
   треть экрана и до содержимого приходится листать. */
#tab-content .card { padding: 11px 13px; margin-bottom: 8px; }
#tab-content .name { font-size: 14px; }
#tab-content .card > p.muted.small { margin-top: 3px; line-height: 1.45; }

/* Выдача ресурсов прямо под строкой игрока */
.grant-row td { padding: 0 !important; background: rgba(200,120,40,.05); }
.grant-panel {
  border: 1px solid var(--orange-1); border-radius: 8px;
  padding: 10px 12px; margin: 4px 0;
  background: linear-gradient(160deg, rgba(60,45,20,.35), rgba(25,25,18,.3));
}
.grant-head { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-bottom: 8px; }
.grant-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 6px;
}
.grant-grid label { display: flex; flex-direction: column; gap: 2px; }
.grant-grid label span { font-size: 10.5px; color: var(--dim); }
.grant-grid input { padding: 5px 7px; font-size: 13px; }
.grant-quick { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; margin-top: 8px; }
.grant-more { margin-top: 8px; }
.grant-more summary { cursor: pointer; font-size: 12.5px; color: var(--orange-1); }
.grant-btns { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 9px; }
.grant-reward {
  margin-top: 9px; padding-top: 9px; border-top: 1px solid var(--border-dim);
}
.grant-reward input { width: 100%; box-sizing: border-box; }

/* Блок базы данных в «Технике» */
.db-line { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.db-ok { color: #8fd47a; font-size: 12px; }
.db-more summary { cursor: pointer; font-size: 12.5px; color: var(--orange-1); }
/* История сохранений базы: список копий вместо одного лишь их числа */

.bk-list { max-height: 220px; overflow-y: auto; }
.bk-row {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 8px; border-bottom: 1px solid var(--border-dim); font-size: 12px;
}
.bk-row:last-child { border-bottom: none; }
.bk-kind { flex: 0 0 auto; font-size: 13px; }
.bk-when { font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Сверка с копией: что было у игрока до сбоя */
.rec-form { display: flex; gap: 6px; flex-wrap: wrap; }
.rec-form > select, .rec-form > input { flex: 1 1 140px; min-width: 0; width: auto; }
.rec-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 6px; }
.rec-table { border: 1px solid var(--border); border-radius: 6px; overflow: hidden; }
.rec-row {
  display: grid; grid-template-columns: 96px 1fr 16px 1fr 88px;
  gap: 6px; align-items: center; padding: 5px 8px; font-size: 12px;
  border-bottom: 1px solid var(--border-dim);
}
.rec-row:last-child { border-bottom: none; }
.rec-l { color: var(--dim); }
.rec-was, .rec-now { font-variant-numeric: tabular-nums; text-align: right; }
.rec-arrow { color: var(--dim); text-align: center; }
.rec-d { font-variant-numeric: tabular-nums; text-align: right; font-weight: 700; }
/* Строка, где стало МЕНЬШЕ, — это и есть кандидат на возврат */
.rec-row.rec-lost { background: rgba(200,60,60,.10); }
.rec-row.rec-lost .rec-d { color: #ff6b6b; }
.rec-sub { font-size: 12px; }
.rec-chip {
  display: inline-block; margin: 3px 3px 0 0; padding: 2px 7px;
  border-radius: 4px; background: var(--panel-2); border: 1px solid var(--border);
  font-size: 11px;
}
.rec-gone { color: var(--orange-1); font-size: 12.5px; }
@media (max-width: 480px) {
  .rec-row { grid-template-columns: 76px 1fr 12px 1fr 70px; font-size: 11px; }
}

@media (max-width: 480px) {
  .grant-grid { grid-template-columns: 1fr 1fr; }
  #tab-content .card { padding: 9px 10px; }
}

/* Кнопка смены аватара — под самой аватаркой.
   Значок фотоаппарата поверх изображения перекрывал лицо и на мелких
   экранах попадал под палец мимо. */
.pf-avatar-change {
  display: block; margin: 6px auto 0; font-size: 11.5px; padding: 4px 10px;
  white-space: nowrap;
}

/* ═══ Значок VIP ═════════════════════════════════════════════════════ */
.vip-mark {
  display: inline-block; margin-left: 4px; padding: 0 5px;
  font-size: 9.5px; font-weight: 800; letter-spacing: .5px;
  color: #1a1408; background: linear-gradient(150deg, #f3d27a, #c9a227);
  border-radius: 3px; vertical-align: middle; line-height: 15px;
  box-shadow: 0 0 5px rgba(220,180,70,.4);
}

/* Страница VIP */
.vip-head { text-align: center; }
.vip-head-on { border-color: var(--gold); background: linear-gradient(160deg, rgba(120,95,25,.22), rgba(30,25,12,.3)); }
.vip-head-title { font-size: 18px; font-weight: 700; color: var(--gold); }
.vip-left { display: flex; justify-content: center; gap: 20px; }
.vip-left div { text-align: center; }
.vip-left b { display: block; font-size: 20px; color: var(--gold); }
.vip-left span { font-size: 10.5px; color: var(--dim); }
.vip-list { display: grid; gap: 8px; }
.vip-item { display: flex; gap: 10px; align-items: flex-start; padding: 7px 0; border-bottom: 1px solid var(--border-dim); }
.vip-item:last-child { border-bottom: none; }
.vip-item-icon { font-size: 19px; flex: 0 0 24px; text-align: center; }
.pf2-vip-active { border-color: var(--gold); }

/* Массовые действия с поручениями (VIP) */
.quest-bulk {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  margin: 8px 0; padding: 7px 10px; border-radius: 8px;
  border: 1px solid rgba(200,170,60,.35); background: rgba(200,170,60,.07);
}

/* Массовые действия VIP в поручениях */
.vip-bulk {
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  padding: 8px 10px; margin: 8px 0; border-radius: 8px;
  border: 1px solid #b8952f; background: rgba(220,180,70,.07);
}
.q-reroll { padding: 3px 7px; font-size: 12px; }

/* ═══ Лоты дня ═══════════════════════════════════════════════════════ */
.lots-head { border-color: var(--gold); }
.lot-row {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 10px 0; border-bottom: 1px solid var(--border-dim);
}
.lot-row:last-child { border-bottom: none; }
.lot-leading { background: linear-gradient(90deg, rgba(90,150,70,.10), transparent); }
.lot-out { opacity: .5; }
.lot-actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.lot-input { width: 84px; padding: 5px 7px; font-size: 13px; }
.lot-bid-info { margin-top: 4px; font-size: 13px; }
.lot-mine { color: var(--orange-1); font-size: 12.5px; margin-top: 2px; }
.lot-price { text-align: right; line-height: 1.3; }
.lot-disc {
  font-size: 10.5px; font-weight: 700; padding: 1px 5px; border-radius: 4px;
  background: rgba(90,150,70,.18); color: #a8d18f; border: 1px solid #4d7a3d;
}
@media (max-width: 460px) {
  .lot-row { flex-direction: column; }
  .lot-actions { width: 100%; }
}

/* Фото босса в панели: предпросмотр рядом с полем ссылки */
.boss-img-row { display: flex; gap: 10px; align-items: flex-start; margin-top: 7px; }
.boss-img-preview {
  width: 92px; height: 92px; flex: 0 0 92px;
  border: 1px solid var(--border); border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; background: var(--panel-2);
}
.boss-img-preview img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 420px) {
  .boss-img-row { flex-direction: column; }
  .boss-img-preview { width: 100%; height: 140px; flex: none; }
}

/* Инструменты картинки босса в панели */
.boss-img-tools { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

/* ═══ Лоты дня: карточки ═════════════════════════════════════════════ */
.lots-meta {
  display: flex; gap: 16px; flex-wrap: wrap; margin-top: 8px;
  font-size: 13.5px;
}
.lot-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 10px; margin-top: 10px;
}
.lot-card {
  display: flex; flex-direction: column;
  border: 1px solid var(--border); border-radius: 10px; overflow: hidden;
  background: var(--panel-2);
}
.lot-card.lot-leading { border-color: #4d7a3d; box-shadow: 0 0 0 1px rgba(90,150,70,.35) inset; }
.lot-card.lot-out { opacity: .55; }
.lot-card-img {
  position: relative; aspect-ratio: 16 / 10; display: flex;
  align-items: center; justify-content: center; overflow: hidden;
}
.lot-card-img img { width: 100%; height: 100%; object-fit: cover; }
.lot-noimg { font-size: 40px; opacity: .5; }
.lot-card-body { padding: 9px 11px 11px; display: flex; flex-direction: column; gap: 5px; }
.lot-card-name { font-weight: 700; font-size: 13.5px; line-height: 1.25; hyphens: auto; }
.lot-desc { line-height: 1.4; min-height: 2.6em; }
.lot-stats { display: flex; gap: 12px; font-size: 12.5px; color: var(--dim); }
.lot-top { font-size: 12.5px; }
.lot-top-gold { font-size: 14px; color: var(--gold); }
.lot-mine { color: var(--orange-1); font-size: 12px; }
.lot-bid-info { min-height: 34px; }
.lot-disc {
  position: absolute; top: 6px; right: 6px;
  font-size: 11px; font-weight: 700; padding: 2px 6px; border-radius: 5px;
  background: rgba(20,40,15,.85); color: #a8d18f; border: 1px solid #4d7a3d;
}
.lot-stock-bar {
  height: 5px; border-radius: 3px; background: rgba(255,255,255,.08);
  overflow: hidden; margin-bottom: 3px;
}
.lot-stock-bar i { display: block; height: 100%; background: linear-gradient(90deg, #5fbf4a, #8fd47a); }
.lot-price { display: flex; align-items: baseline; gap: 8px; font-size: 15px; }
.lot-price s { font-size: 12px; }
.lot-actions { display: flex; gap: 6px; margin-top: 2px; }
.lot-actions .lot-input { flex: 1; min-width: 0; }
.lot-sold { text-align: center; color: var(--red); font-size: 13px; padding: 6px 0; }
@media (max-width: 420px) {
  .lot-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .lot-card-name { font-size: 12.5px; }
  .lot-desc { display: none; }
}
/* Две колонки по ~130px не вмещают длинные названия — одна колонка */
@media (max-width: 360px) {
  .lot-grid { grid-template-columns: 1fr; }
}

/* ═══ Кнопка покупки VIP ═════════════════════════════════════════════
   Объёмная, с фактурой и бликом. Собрана слоями:
     • фон — вертикальный градиент от блика к тёмной базе плюс
       диагональная штриховка: она и даёт ощущение металла;
     • inset-тени — светлая полоса сверху, тёмная снизу: выпуклость;
     • нижняя сплошная тень — «толщина» кнопки, при нажатии убирается;
     • ::before — медленный бегущий блик;
     • ::after — тонкая фаска по краю.
   Цвета заданы переменными, у каждой темы свой набор. Намеренно без
   color-mix(): он не работает в старых мобильных браузерах, а игра
   открывается с любых телефонов. */
.btn.vip-buy, .vip-buy {
  --vip-deep: #3d2b06;   /* самая тёмная кромка */
  --vip-a: #6b4e12;      /* тёмная база */
  --vip-b: #c9a227;      /* основное золото */
  --vip-c: #f7e08a;      /* блик */
  --vip-ink: #2a1e05;    /* текст */

  position: relative; overflow: hidden;
  width: 100%; padding: 11px 14px;
  font-weight: 800; font-size: 15px; letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--vip-ink) !important;
  border: 1px solid var(--vip-deep) !important;
  border-radius: 10px;
  cursor: pointer;
  text-shadow: 0 1px 0 rgba(255,255,255,.35);
  background:
    repeating-linear-gradient(135deg,
      rgba(255,255,255,.08) 0 2px, rgba(0,0,0,.06) 2px 4px),
    linear-gradient(180deg,
      var(--vip-c) 0%, var(--vip-b) 40%,
      var(--vip-b) 55%, var(--vip-a) 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.55),
    inset 0 -2px 0 rgba(0,0,0,.35),
    inset 0 0 14px rgba(255,255,255,.18),
    0 4px 0 var(--vip-deep),
    0 8px 18px rgba(0,0,0,.45);
  transition: transform .08s ease, box-shadow .12s ease, filter .12s ease;
}

/* Фаска по краю — та самая «структурность» */
.btn.vip-buy::after, .vip-buy::after {
  content: ''; position: absolute; inset: 1px;
  border-radius: 9px; pointer-events: none;
  border: 1px solid rgba(255,255,255,.28);
  border-bottom-color: rgba(0,0,0,.35);
}

/* Бегущий блик: медленный и с паузой — быстрый отвлекал бы от игры */
.btn.vip-buy::before, .vip-buy::before {
  content: ''; position: absolute; top: 0; bottom: 0; left: -60%;
  width: 45%; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.45), transparent);
  transform: skewX(-18deg);
  animation: vipShine 5.5s ease-in-out infinite;
}
@keyframes vipShine {
  0%, 62% { left: -60%; }
  85%, 100% { left: 125%; }
}

.btn.vip-buy:hover, .vip-buy:hover {
  filter: brightness(1.08);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.65),
    inset 0 -2px 0 rgba(0,0,0,.35),
    inset 0 0 18px rgba(255,255,255,.25),
    0 5px 0 var(--vip-deep),
    0 10px 22px rgba(0,0,0,.5);
}
/* Нажатие вдавливает кнопку: опускаем и убираем нижнюю «толщину» */
.btn.vip-buy:active, .vip-buy:active {
  transform: translateY(3px);
  box-shadow:
    inset 0 2px 7px rgba(0,0,0,.45),
    inset 0 -1px 0 rgba(255,255,255,.15),
    0 1px 0 var(--vip-deep),
    0 2px 6px rgba(0,0,0,.4);
}
.btn.vip-buy:disabled, .vip-buy:disabled {
  filter: grayscale(.5) brightness(.8); cursor: default; transform: none;
}
.btn.vip-buy:disabled::before, .vip-buy:disabled::before { animation: none; opacity: 0; }

/* ── Свой оттенок для каждого оформления ──
   Подобраны под палитру темы: в «Кибере» холодная бирюза, в «Нуаре»
   тусклое серебро, в «Пустыне» раскалённая бронза. */
body.theme-cyber .vip-buy {
  --vip-deep: #052832; --vip-a: #0a3d4a; --vip-b: #00b8d4; --vip-c: #9df6ff; --vip-ink: #01222a;
}
body.theme-aurora .vip-buy {
  --vip-deep: #2b1a38; --vip-a: #4a2f5e; --vip-b: #a978d4; --vip-c: #ecd6ff; --vip-ink: #21102e;
}
body.theme-noir .vip-buy {
  --vip-deep: #222226; --vip-a: #3a3a3f; --vip-b: #9a9aa4; --vip-c: #eaeaef; --vip-ink: #14141a;
}
body.theme-steel .vip-buy {
  --vip-deep: #172833; --vip-a: #2f4657; --vip-b: #7fa3bd; --vip-c: #ddf1ff; --vip-ink: #0e1b24;
}
body.theme-desert .vip-buy {
  --vip-deep: #452106; --vip-a: #7a3f10; --vip-b: #e08c2a; --vip-c: #ffe0b0; --vip-ink: #2e1503;
}
/* Светлые оформления: тёмная кнопка со светлым золотом — на белом фоне
   золото по золоту не читалось бы */
body.theme-light .vip-buy,
body.theme-paper .vip-buy,
body.theme-sand .vip-buy {
  --vip-deep: #0d0a05; --vip-a: #17130a; --vip-b: #3a2f16; --vip-c: #6b5a24; --vip-ink: #f6e2a4;
}
body.theme-light .btn.vip-buy, body.theme-light .vip-buy,
body.theme-paper .btn.vip-buy, body.theme-paper .vip-buy,
body.theme-sand .btn.vip-buy, body.theme-sand .vip-buy {
  color: var(--vip-ink) !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.55);
}
body.theme-light .btn.vip-buy::after, body.theme-light .vip-buy::after,
body.theme-paper .btn.vip-buy::after, body.theme-paper .vip-buy::after,
body.theme-sand .btn.vip-buy::after, body.theme-sand .vip-buy::after {
  border-color: rgba(217,181,82,.45);
  border-bottom-color: rgba(0,0,0,.5);
}

/* Мелкие экраны: та же кнопка, но скромнее */
@media (max-width: 400px) {
  .btn.vip-buy, .vip-buy { font-size: 13.5px; padding: 10px 12px; letter-spacing: .3px; }
}
/* Уважаем системную настройку «меньше движения» */
@media (prefers-reduced-motion: reduce) {
  .btn.vip-buy::before, .vip-buy::before { animation: none; opacity: 0; }
}

.vip-price { font-size: 19px; }
.vip-price b { color: var(--gold); }

/* Список преимуществ: цифры золотом */
.vip-num { color: var(--gold); font-weight: 700; }
.vip-item-title { font-size: 14px; }
.vip-item-text { line-height: 1.5; margin-top: 2px; }
.vip-item {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 9px 0; border-bottom: 1px solid var(--border-dim);
}
.vip-item:last-child { border-bottom: none; }
.vip-item-icon { font-size: 19px; flex: 0 0 24px; text-align: center; }

/* Журнал золота в панели */
.gold-totals { display: flex; gap: 20px; flex-wrap: wrap; }
.gold-totals div { display: flex; flex-direction: column; }
.gold-totals b { font-size: 16px; }
.gold-sel-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.gold-player {
  display: flex; align-items: center; gap: 10px; cursor: pointer;
  padding: 7px 8px; border-bottom: 1px solid var(--border-dim); border-radius: 6px;
}
.gold-player:hover { background: var(--panel-2); }
.gold-player:last-child { border-bottom: none; }
.gold-player-nums { display: flex; gap: 10px; font-size: 12.5px; white-space: nowrap; }
.gold-op {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 0; border-bottom: 1px solid var(--border-dim); font-size: 13px;
}
.gold-op:last-child { border-bottom: none; }
.gold-op-date { white-space: nowrap; }
.gold-op-sum { white-space: nowrap; }
@media (max-width: 460px) {
  .gold-player { flex-wrap: wrap; }
  .gold-op { flex-wrap: wrap; gap: 4px 10px; }
}

/* Таблицы журнала золота */
.table-wrap { overflow-x: auto; }
.gold-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.gold-table th {
  text-align: left; font-weight: 600; color: var(--dim); font-size: 11.5px;
  text-transform: uppercase; letter-spacing: .3px;
  padding: 5px 8px; border-bottom: 1px solid var(--border);
}
.gold-table td { padding: 6px 8px; border-bottom: 1px solid var(--border-dim); vertical-align: top; }
.gold-table tbody tr:last-child td { border-bottom: none; }
.gold-table .num { text-align: right; white-space: nowrap; }
.gold-table .nowrap { white-space: nowrap; }
.gold-table tbody tr[data-gp] { cursor: pointer; }
.gold-table tbody tr[data-gp]:hover { background: var(--panel-2); }
.gold-group td { background: rgba(255,255,255,.03); }
.gold-sub td:first-child { padding-left: 20px; }
.gold-detail td { padding-top: 2px; padding-bottom: 2px; font-size: 12px; }
.gold-detail td:first-child { padding-left: 34px; color: var(--dim); }

/* Инструменты VIP в профиле */
.pf2-vip-tools { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.pf2-vip-tools .btn { font-size: 12px; }

/* Полная статистика */
.stats-full { text-align: left; max-height: 62vh; overflow-y: auto; }
.stats-sec { margin-bottom: 12px; }
.stats-title {
  font-weight: 700; color: var(--orange-1); font-size: 13.5px;
  margin-bottom: 4px; padding-bottom: 3px; border-bottom: 1px solid var(--border-dim);
}
.stats-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.stats-table td { padding: 3px 6px; border-bottom: 1px solid rgba(255,255,255,.04); }
.stats-table td.num { text-align: right; white-space: nowrap; }
.stats-table tr:last-child td { border-bottom: none; }

/* Кто разведал */
.spied-list { text-align: left; }
.spied-row {
  display: flex; justify-content: space-between; gap: 10px;
  padding: 6px 0; border-bottom: 1px solid var(--border-dim);
}
.spied-row:last-of-type { border-bottom: none; }
.rename-box { text-align: left; }
.rename-box .field { width: 100%; box-sizing: border-box; }

/* Входы, устройства, адреса */
.access-box { text-align: left; max-height: 64vh; overflow-y: auto; }
.access-sec { margin-bottom: 12px; }
.access-title {
  font-weight: 700; color: var(--orange-1); font-size: 13.5px;
  margin-bottom: 4px; padding-bottom: 3px; border-bottom: 1px solid var(--border-dim);
}
.access-mail { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13.5px; }
.access-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.access-table th {
  text-align: left; font-size: 11px; color: var(--dim); text-transform: uppercase;
  padding: 3px 6px; border-bottom: 1px solid var(--border);
}
.access-table td { padding: 3px 6px; border-bottom: 1px solid rgba(255,255,255,.04); }
.access-table td.num { text-align: right; }
.access-table .mono { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12px; }
.access-table .nowrap { white-space: nowrap; }

/* Карточка устройства в разделе «Входы и устройства».
   Отдельная рамка, а не строка таблицы: у устройства есть свой список
   адресов и своя кнопка, и в таблице это разъезжается на телефоне. */
.access-dev {
  border: 1px solid var(--border); border-radius: 8px;
  padding: 8px 10px; margin-bottom: 8px;
  background: rgba(255,255,255,.02);
}
.access-dev-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.access-dev .mono { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12px; }

/* Несколько аккаунтов с одного адреса */
.mc-group { padding: 7px 0; border-bottom: 1px solid var(--border-dim); }
.mc-group:last-child { border-bottom: none; }
.mc-ip { font-size: 13px; margin-bottom: 3px; }
.mc-ip .mono { font-family: ui-monospace, Menlo, Consolas, monospace; color: var(--orange-1); }
.mc-players { display: flex; gap: 6px; flex-wrap: wrap; }
.mc-player {
  font-size: 12px; padding: 2px 7px; border-radius: 5px;
  background: var(--panel-2); border: 1px solid var(--border);
}

/* ═══ Шапка на узких экранах ═════════════════════════════════════════
   На 320 точках пять колонок не помещались, и overflow:hidden просто
   обрезал суммы и уровень. Уменьшаем шрифт и отступы, а сами суммы
   теперь короче за счёт продолженной шкалы (Qd, Qn, Sx). */
@media (max-width: 400px) {
  .res-row > div, .stat-row > div {
    padding: 5px 2px; font-size: 11.5px; letter-spacing: -0.2px;
  }
  .res-row .ic-dollar, .res-row .ic-gold,
  .stat-row .ic-dollar, .stat-row .ic-gold { transform: scale(.85); }
  .timer { font-size: 9.5px; }
}
@media (max-width: 340px) {
  .res-row > div, .stat-row > div { padding: 4px 1px; font-size: 10.5px; }
  /* Даём длинным суммам ужаться, а не обрезаться */
  .res-row .money, .res-row .gold, .stat-row .money, .stat-row .gold {
    display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis;
  }
}

/* ═══ Кабинет: карточки персонажей ═══════════════════════════════════ */
.cabinet-btn {
  display: block; margin: 0 auto 8px; padding: 6px 14px;
  background: var(--panel-2); border: 1px solid var(--border);
  border-radius: 8px; color: var(--fg); font-size: 12.5px; cursor: pointer;
}
.cabinet-btn:hover { border-color: var(--orange-1); color: var(--orange-1); }

.cab-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px; margin-top: 10px;
}
.cab-card {
  display: flex; flex-direction: column;
  border: 1px solid var(--border); border-radius: 10px; overflow: hidden;
  background: var(--panel-2);
}
.cab-current { border-color: var(--orange-1); box-shadow: 0 0 0 1px rgba(200,120,40,.25) inset; }
.cab-banned { opacity: .6; }
/* Аватарка в кабинете. Раньше стояло cover — картинка растягивалась на
   всю рамку и обрезалась по краям, у портретов срезало лицо. Теперь
   contain: изображение помещается целиком, а пустоту по бокам закрывает
   размытая копия того же снимка, чтобы карточка не выглядела дырявой. */
.cab-ava {
  position: relative; height: 150px; background: var(--panel);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.cab-ava::before {
  content: ''; position: absolute; inset: 0;
  background-image: inherit; background-size: cover; background-position: center;
  filter: blur(14px) brightness(.45); transform: scale(1.15);
}
/* Сама карточка показывает картинку целиком поверх размытого фона.
   Слой ::before идёт под ней, потому что у него нет z-index, а фон
   элемента рисуется ниже псевдоэлемента — поэтому поднимаем картинку
   отдельным слоем ::after. */
.cab-ava.has-photo::after {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background-image: inherit; background-size: contain;
  background-position: center; background-repeat: no-repeat;
}
.cab-ava-stub { position: relative; z-index: 1; font-size: 40px; opacity: .4; }
.cab-body { padding: 9px 11px 11px; }
.cab-name { font-weight: 700; font-size: 14px; display: flex; align-items: center; gap: 4px; flex-wrap: wrap;
  overflow-wrap: anywhere; min-width: 0; }  /* позывной в 16 широких букв шире карточки */
.cab-rows { margin-top: 6px; font-size: 12.5px; }
.cab-rows div { display: flex; justify-content: space-between; gap: 8px; padding: 1px 0; }
.cab-rows span { color: var(--dim); }
/* Название легиона/альянса может быть одним длинным словом */
.cab-rows b { min-width: 0; overflow-wrap: anywhere; text-align: right; }
.cab-here { margin-top: 8px; text-align: center; font-size: 12.5px; color: var(--orange-1); }
.cab-ban { margin-top: 8px; text-align: center; font-size: 12.5px; color: var(--red); }
.cab-new { cursor: pointer; border-style: dashed; }
.cab-new:hover { border-color: var(--orange-1); }
.cab-new-inner {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px; height: 100%; min-height: 210px; text-align: center; color: var(--dim);
}
.cab-new-plus { font-size: 38px; color: var(--orange-1); line-height: 1; }
.cab-create .field { width: 100%; box-sizing: border-box; }
@media (max-width: 420px) {
  .cab-grid { grid-template-columns: 1fr; }
  .cab-ava { height: 130px; }
}

/* Отметка нераспределённых очков навыков.
   Раньше рядом с уровнем стоял значок с числом («+31») — на узких
   экранах колонка не вмещала и его обрезало. Точка занимает несколько
   точек ширины, а точное число видно в подсказке и на самом экране
   навыков, куда ведёт нажатие. */

.sp-dot {
  display: inline-block; margin-left: 3px; vertical-align: super;
  font-size: 9px; line-height: 1; color: var(--orange-1);
  animation: spPulse 2s ease-in-out infinite;
}
@keyframes spPulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

/* ═══ Арена ══════════════════════════════════════════════════════════ */
.arena-head { text-align: center; border-color: var(--orange-1); }
.arena-banner { width: 100%; max-height: 180px; object-fit: cover; border-radius: 8px; }
.arena-title { font-size: 22px; font-weight: 800; letter-spacing: 2px; color: var(--gold); margin-top: 8px; }
.arena-rules { margin: 8px 0 0 18px; padding: 0; font-size: 13px; line-height: 1.65; color: var(--fg); }
.arena-rules li { margin-bottom: 5px; }
.arena-next { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.arena-timer { font-size: 28px; font-weight: 800; color: var(--orange-1); line-height: 1.1; }
.arena-pot { text-align: right; }
.arena-pot-val { font-size: 22px; font-weight: 800; color: var(--gold); }
.arena-call { border-color: var(--green); animation: arenaPulse 1.4s ease-in-out infinite; }
@keyframes arenaPulse { 0%,100% { box-shadow: 0 0 0 rgba(95,191,74,0); } 50% { box-shadow: 0 0 16px rgba(95,191,74,.35); } }
.arena-list { max-height: 260px; overflow-y: auto; }
.arena-row {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 0; border-bottom: 1px solid var(--border-dim); font-size: 13px;
}
.arena-row:last-child { border-bottom: none; }
.arena-row-me { background: rgba(200,120,40,.10); border-radius: 5px; padding-left: 5px; }
.arena-num { color: var(--dim); font-size: 11px; min-width: 18px; }
.arena-total { display: flex; align-items: center; padding-top: 8px; border-top: 1px solid var(--border); font-size: 14px; }

/* Боевое окно */
.arena-fight { border-color: var(--orange-1); }
.arena-fight-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 13px; }
.arena-log {
  height: 96px; overflow-y: auto; margin-top: 8px; padding: 6px 8px;
  background: var(--panel); border: 1px solid var(--border-dim); border-radius: 6px;
  font-size: 12px; line-height: 1.5;
}
.arena-hunted {
  margin-top: 8px; padding: 5px 9px; border-radius: 6px; text-align: center; font-size: 13px;
  background: rgba(180,50,50,.15); color: #ff9a9a; border: 1px solid #7a2e2e;
}
.arena-safe { margin-top: 8px; text-align: center; font-size: 12px; color: var(--dim); }
.arena-card {
  margin-top: 8px; padding: 9px 11px; border-radius: 8px;
  border: 1px solid var(--border); background: var(--panel-2);
}
.arena-card-me { border-color: #4d7a3d; }
.arena-card-foe { border-color: #7a2e2e; }
.arena-card-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.arena-hp { height: 12px; border-radius: 6px; background: rgba(0,0,0,.35); overflow: hidden; margin-top: 6px; }
.arena-hp i { display: block; height: 100%; background: linear-gradient(90deg, #5fbf4a, #8fd47a); transition: width .2s; }
.arena-hp-foe i { background: linear-gradient(90deg, #bf4a4a, #d47a7a); }
.arena-hp-num { text-align: right; font-size: 11.5px; color: var(--dim); margin-top: 2px; }
.arena-vs { text-align: center; color: var(--dim); font-size: 11px; margin-top: 6px; }
.arena-buffs { display: flex; gap: 6px; margin-top: 5px; flex-wrap: wrap; }
.arena-buff { font-size: 11px; padding: 1px 6px; border-radius: 4px; background: rgba(200,170,60,.15); color: var(--gold); }
.arena-acts { display: grid; grid-template-columns: 2fr 1fr; gap: 6px; margin-top: 10px; }
.arena-skills { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; margin-top: 6px; }
.arena-skill { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 6px 2px; }
.arena-skill-icon { font-size: 17px; }
.arena-skill-name { font-size: 10px; }
.arena-skill-left { font-size: 10px; color: var(--gold); font-weight: 700; }
.arena-mini-hp { width: 60px; height: 6px; border-radius: 3px; background: rgba(0,0,0,.35); overflow: hidden; }
.arena-mini-hp i { display: block; height: 100%; background: linear-gradient(90deg, #5fbf4a, #8fd47a); }
@media (max-width: 400px) {
  .arena-timer { font-size: 22px; }
  .arena-pot-val { font-size: 18px; }
  .arena-skill-name { font-size: 9px; }
}

/* Дивизионы арены */
.arena-divs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 8px; }
.arena-div {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 9px 6px; border-radius: 9px; cursor: pointer;
  border: 1px solid var(--border); background: var(--panel-2); color: var(--fg);
}
.arena-div.active { border-color: var(--gold); background: rgba(200,170,60,.10); }
.arena-div-icon { font-size: 19px; }
.arena-div-name { font-size: 13px; font-weight: 700; }
.arena-div-fee { font-size: 11.5px; color: var(--dim); }
.arena-div.active .arena-div-fee { color: var(--gold); }

/* Итоги боя */
.arena-res-head { border-color: var(--gold); }
.arena-res-pot { margin-top: 6px; font-size: 15px; }
.arena-res-mine {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
  margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border-dim);
}
.arena-res-mine div { display: flex; flex-direction: column; }
.arena-res-mine b { font-size: 15px; }
.arena-res-table td { vertical-align: middle; }
.arena-res-win td { background: rgba(200,170,60,.08); }
.arena-res-minus { color: #d98a8a; }
.arena-rt { white-space: nowrap; font-size: 11.5px; }
.arena-rt b { margin-left: 4px; font-size: 13px; }
.arena-rt span { opacity: .75; }
.arena-fav { color: var(--gold); margin-left: 3px; }
.arena-fav-kill {
  font-size: 10px; padding: 0 4px; border-radius: 3px; margin-left: 3px;
  background: rgba(200,170,60,.2); color: var(--gold);
}
@media (max-width: 420px) {
  .arena-res-mine { grid-template-columns: 1fr 1fr; }
  .arena-rt { font-size: 10.5px; }
  .arena-res-table { font-size: 11.5px; }
}

/* ═══ Групповые бои ══════════════════════════════════════════════════ */
.gb-head { text-align: center; border-color: var(--orange-1); }
.gb-roles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.gb-role {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 9px 6px; border-radius: 9px; cursor: pointer; text-align: center;
  border: 1px solid var(--border); background: var(--panel-2); color: var(--fg);
}
.gb-role.active { border-color: var(--orange-1); background: rgba(200,120,40,.10); }
/* Значок роли: раньше это был эмодзи и размер задавался шрифтом. Теперь
   картинка, как в боях легиона — держим строку по высоте иконки, иначе
   имя бойца прыгает относительно значка. */
.gb-role-icon { font-size: 19px; display: inline-flex; align-items: center; }
.gb-role-pic { vertical-align: middle; display: inline-block; }
.gb-role-name { font-size: 13px; font-weight: 700; }
.gb-role-desc { font-size: 10.5px; color: var(--dim); line-height: 1.35; }
.gb-role-tag {
  font-size: 10.5px; padding: 1px 6px; border-radius: 4px;
  background: var(--panel); border: 1px solid var(--border); color: var(--dim);
}

.gb-fight { border-color: var(--orange-1); }
.gb-fight-head { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; }
/* Переключатель порядка блоков (противники / своя команда) — прижат
   вправо, чтобы не мешать взгляду, идущему по бойцам сверху вниз */
.gb-order-row { display: flex; justify-content: flex-end; margin: 0 0 6px; }
.gb-order-btn { padding: 5px 10px; font-size: 11.5px; opacity: .85; }
.gb-order-btn:active { opacity: 1; }
.gb-log-attack { color: #e0b0b0; }
.gb-log-heal { color: #a8d18f; }
.gb-log-guard { color: #9ec8e8; }
.gb-log-kill { color: #ff9a9a; font-weight: 700; }
.gb-log-system { color: var(--gold); }

.gb-self { margin-top: 9px; padding: 9px 11px; border-radius: 8px; background: var(--panel-2); border: 1px solid var(--border); }
.gb-self-top { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.gb-bars { margin-top: 7px; display: flex; flex-direction: column; gap: 5px; }
.gb-bar { display: grid; grid-template-columns: 84px 1fr auto; gap: 7px; align-items: center; font-size: 11.5px; }
.gb-bar-l { color: var(--dim); }
.gb-bar-t { height: 10px; border-radius: 5px; background: rgba(0,0,0,.35); overflow: hidden; }
.gb-bar-t i { display: block; height: 100%; transition: width .2s; }
.gb-bar-hp { background: linear-gradient(90deg, #bf4a4a, #e07a7a); }
.gb-bar-en { background: linear-gradient(90deg, #3f7fbf, #7fb0e0); }
.gb-bar-am { background: linear-gradient(90deg, #bf9a3f, #e0c47a); }
.gb-bar-n { color: var(--dim); white-space: nowrap; }
.gb-cd { margin-top: 6px; text-align: center; font-size: 11.5px; color: var(--orange-1); }

/* ---------- СВОИ ХАРАКТЕРИСТИКИ В КОМНАТЕ ПОДГОТОВКИ ---------- */
/* Итог крупно, под ним слагаемые: видно, что дала прокачка, а что роль */
.gbs-rolenote { margin: 2px 0 0; }
.gbs-rows { display: flex; flex-direction: column; gap: 10px; }
.gbs-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.gbs-title { font-size: 12.5px; color: var(--dim); }
.gbs-total { font-size: 17px; font-weight: 800; }
.gbs-bar { margin: 4px 0 5px; }
.gbs-parts { display: flex; flex-wrap: wrap; gap: 5px; }
.gbs-part {
  font-size: 10.5px; padding: 2px 7px; border-radius: 4px;
  background: var(--panel-2); border: 1px solid var(--border); color: var(--dim);
}
.gbs-part b { color: var(--fg); }
/* Источник прибавки различается цветом: прокачка, снабжение, роль */
.gbs-up   { border-color: #4d7a3d; }
.gbs-up b { color: #5fbf4a; }
.gbs-sup   { border-color: #3f6f9f; }
.gbs-sup b { color: #7fb0e0; }
.gbs-role   { border-color: #8a6a2a; }
.gbs-role b { color: var(--gold, #e0c47a); }
/* Боевые проценты — плитками, чтобы не мешались с запасами */
.gbs-chips {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
  gap: 5px; margin-top: 11px; padding-top: 10px; border-top: 1px solid var(--border);
}
.gbs-chip {
  display: flex; justify-content: space-between; align-items: baseline; gap: 5px;
  font-size: 11px; padding: 5px 8px; border-radius: 5px;
  background: var(--panel-2); border: 1px solid var(--border);
}
.gbs-chip-l { color: var(--dim); }
.gbs-chip b { font-size: 12.5px; }
@media (max-width: 380px) {
  .gbs-chips { grid-template-columns: 1fr 1fr; }
}

.gb-row { display: flex; align-items: center; gap: 7px; padding: 6px 0; border-bottom: 1px solid var(--border-dim); font-size: 13px; }
.gb-row:last-child { border-bottom: none; }
.gb-dead { opacity: .45; }
.gb-me { background: rgba(95,191,74,.08); border-radius: 5px; padding-left: 5px; }
.gb-target { box-shadow: inset 2px 0 0 var(--orange-1); }
.gb-hp { display: block; height: 5px; border-radius: 3px; background: rgba(0,0,0,.35); overflow: hidden; margin-top: 3px; }
.gb-hp i { display: block; height: 100%; background: linear-gradient(90deg, #5fbf4a, #8fd47a); }
.gb-hp-num { white-space: nowrap; min-width: 42px; text-align: right; }
.gb-guarded { color: #9ec8e8; margin-left: 3px; }
.gb-acts { display: flex; gap: 4px; }
.gb-act { padding: 3px 8px; font-size: 13px; }
@media (max-width: 420px) {
  .gb-roles { grid-template-columns: 1fr; }
  .gb-role { flex-direction: row; gap: 8px; text-align: left; }
  .gb-bar { grid-template-columns: 68px 1fr auto; font-size: 10.5px; }
}

/* Ранги и разделы групповых боёв */
.gb-my-rank { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.gb-my-rank .right { text-align: right; }
.gb-rank-name { font-size: 17px; font-weight: 800; color: var(--gold); }
.gb-rank-pts { font-size: 20px; font-weight: 800; color: var(--gold); }
.gb-rank-bar { height: 8px; border-radius: 4px; background: rgba(0,0,0,.35); overflow: hidden; }
.gb-rank-bar i { display: block; height: 100%; background: linear-gradient(90deg, #c9a227, #f3d27a); }
.gb-sections { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.gb-section.active { border-color: var(--orange-1); color: var(--orange-1); }
.gb-section-body {
  padding: 10px 11px; border-radius: 8px;
  border: 1px solid var(--border); background: var(--panel-2);
}
.gb-ranks { display: flex; flex-direction: column; gap: 5px; }
.gb-rank {
  display: flex; align-items: center; gap: 9px;
  padding: 8px 10px; border-radius: 7px;
  border: 1px solid var(--border); background: var(--panel);
}
.gb-rank.locked { opacity: .55; cursor: not-allowed; }
.gb-rank:not(.locked) { border-color: #b8952f; }
.gb-rank-icon { font-size: 17px; }
.gb-rank .grow { display: flex; flex-direction: column; }
@media (max-width: 420px) {
  .gb-sections { grid-template-columns: 1fr; }
  .gb-rank-pts { font-size: 17px; }
}

.gb-best { margin-left: 3px; color: var(--gold); font-size: 12px; }

/* Павший наблюдает за боем */
.gb-dead-panel {
  margin-top: 8px; padding: 9px 11px; border-radius: 8px; text-align: center;
  background: rgba(180,50,50,.12); border: 1px solid #7a2e2e;
}
.gb-dead-title { font-weight: 700; color: #ff9a9a; }
.gb-watch { display: flex; gap: 5px; flex-wrap: wrap; justify-content: center; }
.gb-watch-btn { font-size: 11.5px; padding: 3px 8px; }
.gb-watch-btn.active { border-color: var(--orange-1); color: var(--orange-1); }
.gb-watch-btn.dead { opacity: .5; }
.gb-watching {
  margin-top: 8px; padding: 5px 9px; border-radius: 6px; font-size: 12.5px; text-align: center;
  background: rgba(200,120,40,.12); border: 1px solid var(--orange-1);
}

/* Картинки групповых боёв */
.gb-banner {
  display: block; width: 100%; border-radius: 8px;
  aspect-ratio: 900 / 507; object-fit: cover;
}
.gb-head .gb-banner { margin-bottom: 8px; }
.gb-result-head { padding-top: 0; overflow: hidden; }
.gb-result-banner { margin: 0 0 10px; border-radius: 8px 8px 0 0; }
.arena-res-head { padding-top: 0; overflow: hidden; }
.arena-res-banner { margin: 0 0 10px; border-radius: 8px 8px 0 0; }
.gb-win-title { color: var(--gold); text-shadow: 0 0 14px rgba(220,180,70,.4); }
.gb-lose-title { color: #d98a8a; }

/* Улучшения групповых боёв */
.gb-wallet {
  display: flex; gap: 14px; flex-wrap: wrap; justify-content: center;
  padding: 7px 10px; border-radius: 7px;
  background: var(--panel); border: 1px solid var(--border); font-size: 13px;
}
.gb-skills { display: flex; flex-direction: column; gap: 8px; }
.gb-skill {
  padding: 9px 11px; border-radius: 8px;
  border: 1px solid var(--border); background: var(--panel);
}
.gb-skill.maxed { border-color: #b8952f; }
.gb-skill-top { display: flex; align-items: flex-start; gap: 8px; }
.gb-skill-top .grow { display: flex; flex-direction: column; }
.gb-skill-icon { font-size: 18px; }
.gb-skill-lvl { font-weight: 700; white-space: nowrap; }
.gb-skill-bar { height: 5px; border-radius: 3px; background: rgba(0,0,0,.35); overflow: hidden; margin-top: 6px; }
.gb-skill-bar i { display: block; height: 100%; background: linear-gradient(90deg, #c9a227, #f3d27a); }
.gb-skill-now { margin-top: 5px; font-size: 12.5px; }
.gb-skill-buy { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 6px; flex-wrap: wrap; }
.gb-skill-max { margin-top: 6px; text-align: center; font-size: 12.5px; color: var(--gold); }
.gb-cost { font-size: 12.5px; white-space: nowrap; }
.gb-cost-sep { color: var(--dim); margin: 0 2px; }
.gb-stats-now { padding-top: 9px; border-top: 1px solid var(--border-dim); }
.gb-stats-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 3px 10px;
  margin-top: 5px; font-size: 12.5px;
}
@media (max-width: 420px) {
  .gb-skill-buy { flex-direction: column; align-items: stretch; }
  .gb-stats-grid { grid-template-columns: 1fr; }
}

/* Полоса «вышло обновление» */
.update-bar {
  position: fixed; left: 50%; bottom: 14px; transform: translateX(-50%);
  z-index: 19000; display: flex; align-items: center; gap: 8px;
  padding: 8px 12px; border-radius: 10px; font-size: 13px;
  background: var(--panel-2); border: 1px solid var(--orange-1);
  box-shadow: 0 6px 20px rgba(0,0,0,.45);
  max-width: calc(100vw - 24px);
}
.update-bar .btn { padding: 4px 10px; font-size: 12px; }

/* Предупреждение «вы ещё не в бою» */
.gb-enter-now {
  margin-top: 8px; padding: 10px 12px; border-radius: 8px; text-align: center;
  background: rgba(200,120,40,.15); border: 1px solid var(--orange-1);
  animation: arenaPulse 1.2s ease-in-out infinite;
}
.gb-enter-title { font-weight: 700; color: var(--orange-1); }

/* ═══ Плашка боя поверх всех экранов ═════════════════════════════════ */
/* Плашка боя. По центру и с ограниченной шириной: растянутая во весь
   экран на широких мониторах смотрелась чужеродно, а текст уезжал к
   левому краю. */
.combat-bar {
  position: fixed; top: 8px; left: 50%; transform: translateX(-50%);
  z-index: 18000;
  display: flex; align-items: center; gap: 10px;
  width: max-content; max-width: calc(100vw - 20px);
  padding: 7px 14px; font-size: 13px;
  border-radius: 10px;
  background: linear-gradient(180deg, #2a2416, #1a1610);
  border: 1px solid var(--gold);
  box-shadow: 0 4px 16px rgba(0,0,0,.55);
}
.combat-bar.fighting {
  background: linear-gradient(180deg, #3a1d1d, #241111);
  border-color: #b04a4a;
}
.combat-bar .grow { flex: 1; }
.combat-bar .btn { padding: 3px 10px; font-size: 12px; }
.cb-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--gold); animation: cbPulse 1.2s ease-in-out infinite;
}
.combat-bar.fighting .cb-dot { background: #ff6b6b; }
@keyframes cbPulse { 0%,100% { opacity: 1; } 50% { opacity: .3; } }
body:has(#combat-bar) { padding-top: 46px; }
@media (max-width: 480px) {
  .combat-bar { font-size: 12px; padding: 6px 10px; gap: 7px; }
  .combat-bar .btn { padding: 3px 8px; font-size: 11.5px; }
}

/* Полосы здоровья во всю ширину — так виднее, кто на грани */
.arena-hp, .gb-hp { height: 14px; border-radius: 7px; }
.gb-hp { height: 10px; }
.arena-row .arena-mini-hp { flex: 1; width: auto; min-width: 60px; height: 10px; border-radius: 5px; }
.arena-row { gap: 10px; }

/* Рейтинг рядом с именем */
.rt-badge {
  display: inline-block; margin-left: 5px; padding: 0 5px;
  border-radius: 4px; font-size: 10.5px; font-weight: 700;
  background: rgba(200,170,60,.16); color: var(--gold);
}
.arena-row-name, .gb-row-name { display: block; }

/* Комната подготовки */
.prep-card { border-color: var(--orange-1); }
.prep-timer { font-size: 46px; font-weight: 800; color: var(--orange-1); line-height: 1.1; }
.prep-team { margin-bottom: 12px; }
.prep-team:last-child { margin-bottom: 0; }
.prep-team-title { font-weight: 700; font-size: 13px; margin-bottom: 5px; }
.prep-row {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 8px; margin-bottom: 4px; border-radius: 6px;
  background: var(--panel); border: 1px solid var(--border-dim); font-size: 13px;
}
.prep-ally .prep-row { border-left: 3px solid #4d7a3d; }
.prep-foe .prep-row { border-left: 3px solid #7a2e2e; }

/* Активное умение на арене */
.arena-skill.skill-active { border-color: var(--gold); background: rgba(200,170,60,.12); }

/* ═══ Ступени улучшений: цвет ранга ══════════════════════════════════ */
.tier-card { border-left: 3px solid var(--tier); }
.tier-card.locked { opacity: .6; }
.tier-head { display: flex; align-items: center; gap: 9px; }
.tier-head .grow { display: flex; flex-direction: column; }
.tier-dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--tier); box-shadow: 0 0 8px var(--tier);
}
/* Название навыка и цифры красятся цветом ступени */
.tier-card .tier-name { color: var(--tier); }
.tier-card.locked .tier-dot { background: var(--dim); box-shadow: none; }

/* Свёрнутые правила */
.rules-card { padding-top: 8px; padding-bottom: 8px; }
.rules-toggle {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; padding: 4px 0; cursor: pointer;
  background: none; border: none; color: var(--fg);
  font-size: 15px; font-weight: 600; text-align: left;
}
.rules-toggle:hover { color: var(--orange-1); }
.rules-arrow { color: var(--dim); font-size: 12px; }
.rules-toggle.open .rules-arrow { color: var(--orange-1); }
.rules-card .arena-rules { margin-top: 8px; }

/* ═══ База снабжения ═════════════════════════════════════════════════ */
.sup-trader { border-left: 3px solid var(--gold); }
.sup-trader.locked { border-left-color: var(--border); opacity: .65; }
.sup-head { display: flex; align-items: flex-start; gap: 10px; }
.sup-head .grow { display: flex; flex-direction: column; }
.sup-face { font-size: 26px; line-height: 1.1; }
.sup-items { display: flex; flex-direction: column; gap: 6px; }
.sup-item {
  display: flex; align-items: center; gap: 9px;
  padding: 8px 10px; border-radius: 7px;
  background: var(--panel); border: 1px solid var(--border-dim);
}
.sup-item .grow { display: flex; flex-direction: column; }
.sup-icon { font-size: 18px; }
.sup-buy { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.sup-price { font-size: 12.5px; color: var(--gold); white-space: nowrap; }
.sup-note { font-size: 10.5px; color: var(--orange-1); }
.sup-active-card { border-color: var(--green); }
.sup-active {
  display: flex; align-items: center; gap: 9px;
  padding: 7px 9px; margin-bottom: 5px; border-radius: 7px;
  background: rgba(95,191,74,.10); border: 1px solid #4d7a3d;
}
.sup-active:last-child { margin-bottom: 0; }
.sup-left { font-weight: 700; color: var(--green); white-space: nowrap; }
.nowrap { white-space: nowrap; }
@media (max-width: 420px) {
  .sup-item { flex-wrap: wrap; }
  .sup-buy { flex-direction: row; align-items: center; width: 100%; justify-content: space-between; }
}

/* ═══ Полноэкранный режим боя ════════════════════════════════════════
   Пока идёт бой, прячем всё, кроме самого боя: шапку с ресурсами,
   меню, подвал. Уйти всё равно нельзя, а лишние кнопки только
   отвлекают и провоцируют попытки. */
body.combat-fullscreen #header,
body.combat-fullscreen #site-footer,
body.combat-fullscreen .tabs,
body.combat-fullscreen .title,
body.combat-fullscreen #cabinet-btn { display: none !important; }
body.combat-fullscreen #content { padding-top: 10px; }
body.combat-fullscreen { padding-top: 0 !important; }

/* Плашка «пора в комнату» */
.combat-bar.calling {
  background: linear-gradient(180deg, #3a2a12, #241a0c);
  border-color: var(--orange-1);
}
.combat-bar.calling .cb-dot { background: var(--orange-1); }

/* ═══ Карточка бойца в групповом бою ═════════════════════════════════ */
.gb-card {
  padding: 6px 9px; margin-bottom: 5px; border-radius: 7px;
  border: 1px solid var(--border); background: var(--panel);
}
.gb-card:last-child { margin-bottom: 0; }
.gb-card.gb-dead { opacity: .45; }
.gb-card.gb-me { border-color: #4d7a3d; background: rgba(95,191,74,.07); }
.gb-card.gb-target { box-shadow: inset 3px 0 0 var(--orange-1); }
.gb-card-top { display: flex; align-items: center; gap: 7px; font-size: 12.5px; }
.gb-card-name { font-weight: 600; }
.gb-card-hp { color: var(--dim); font-size: 12px; white-space: nowrap; }
/* Полоса здоровья: у своих зелёная, у врагов красная — на глаз видно,
   кого можно бить, а кого лечить. Раньше все были зелёными, и в спешке
   игроки путали союзников с противниками. */
.gb-hp-wide { height: 10px; border-radius: 5px; margin-top: 5px; }
.gb-card-foe .gb-hp i { background: linear-gradient(90deg, #bf4a4a, #e07a7a); }
.gb-card-ally .gb-hp i { background: linear-gradient(90deg, #5fbf4a, #8fd47a); }
.gb-card-foe { border-left: 3px solid #a83c3c; }
.gb-card-ally { border-left: 3px solid #4d7a3d; }
.gb-card-acts { display: flex; gap: 5px; margin-top: 5px; }
.gb-act-wide { flex: 1; padding: 4px 8px; font-size: 12px; }
.gb-card-dead { margin-top: 6px; text-align: center; font-size: 12px; color: var(--dim); }

/* Раскрывающиеся ступени улучшений */
.tier-head {
  display: flex; align-items: center; gap: 9px; width: 100%;
  background: none; border: none; color: var(--fg);
  padding: 2px 0; cursor: pointer; text-align: left;
}
.tier-head .grow { display: flex; flex-direction: column; }
.tier-head:hover .tier-name { filter: brightness(1.2); }

/* История боёв */
.hist-row {
  display: flex; align-items: center; gap: 9px;
  padding: 6px 9px; margin-bottom: 4px; border-radius: 6px;
  background: var(--panel); border: 1px solid var(--border-dim); font-size: 12.5px;
}
.hist-row:last-child { margin-bottom: 0; }
.hist-win { border-left: 3px solid #4d7a3d; }
.hist-lose { border-left: 3px solid #a83c3c; }
.hist-forfeit { border-left: 3px solid var(--dim); opacity: .7; }
.hist-res { font-weight: 700; white-space: nowrap; }
.hist-rew { display: flex; gap: 8px; white-space: nowrap; font-size: 12px; }
@media (max-width: 420px) {
  .hist-row { flex-wrap: wrap; }
  .hist-rew { width: 100%; justify-content: flex-end; }
}

/* Свои и чужие: цвет полосы здоровья и рамки */
.gb-hp i.hp-ally { background: linear-gradient(90deg, #5fbf4a, #8fd47a); }
.gb-hp i.hp-foe  { background: linear-gradient(90deg, #bf4a4a, #e07a7a); }
.gb-card-ally { border-left: 3px solid #4d7a3d; }
.gb-card-foe  { border-left: 3px solid #7a2e2e; }

/* Компактнее: игроки жаловались, что всё крупное */
.gb-card { padding: 7px 9px; margin-bottom: 5px; }
.gb-card-top { font-size: 12.5px; gap: 6px; }
.gb-hp-wide { height: 11px; margin-top: 5px; }
.gb-card-acts { margin-top: 5px; gap: 5px; }
.gb-act-wide { padding: 5px 8px; font-size: 12px; }
.gb-card-hp { font-size: 11px; }
.gb-role-icon { font-size: 15px; }

/* Свёрнутые ступени улучшений */
.tier-toggle {
  width: 100%; background: none; border: none; cursor: pointer;
  color: var(--fg); text-align: left; padding: 2px 0;
}
.tier-toggle .rules-arrow { margin-left: 6px; }

/* История боёв */
.hist-row {
  display: flex; align-items: center; gap: 9px;
  padding: 7px 9px; margin-bottom: 5px; border-radius: 7px;
  background: var(--panel); border: 1px solid var(--border-dim); font-size: 13px;
}
.hist-row:last-child { margin-bottom: 0; }
.hist-row .grow { display: flex; flex-direction: column; }
.hist-win { border-left: 3px solid #4d7a3d; }
.hist-lose { border-left: 3px solid #7a2e2e; }
.hist-mark { font-size: 17px; }
.hist-rew { display: flex; flex-direction: column; align-items: flex-end; font-size: 12px; white-space: nowrap; }

/* ═══ Сообщения VIP в чате ═══════════════════════════════════════════
   Цвет по той же схеме, что у персонала: красится текст, а не фон —
   иначе лента пестрит и читать тяжело. Оттенок сиреневый: золото уже
   занято владельцем, оранжевый — администрацией. */
.chat-msg-vip .chat-text { color: #c9a0ff; }
.chat-msg-vip .who { color: #d9bcff; }
.chat-msg-vip {
  border-left: 2px solid #8b5fd6;
  padding-left: 6px;
  background: linear-gradient(90deg, rgba(139,95,214,.10), transparent 60%);
  border-radius: 4px;
}
/* У персонала свой цвет — он важнее и перебивает VIP */
.chat-msg-vip.chat-msg-staff .chat-text { color: inherit; }
.chat-msg-moderator .chat-text { color: #6fdcff !important; }
.chat-msg-admin .chat-text     { color: var(--orange-1) !important; }
.chat-msg-owner .chat-text     { color: var(--gold) !important; }

/* Позывной над сообщением в переписке. Раньше здесь печаталась заглушка
   «(без темы)» — интерфейс писем тему не спрашивает, поэтому она была
   пустой у всех, и строка только мешала. */
.ml-who { font-size: 11px; font-weight: 700; opacity: .75; margin-bottom: 3px; }

/* ---------- ИСТОРИЯ СЕЙФА (банк) ---------- */
.bh-tabs { gap: 5px; margin-bottom: 8px; }
.bh-tabs .bh-tab {
  min-width: 0; padding: 6px 8px; font-size: 11.5px; border-radius: 4px;
  letter-spacing: .02em; text-transform: none;
}
.bh-list { padding: 4px 0; }
.bh-row { padding: 8px 12px; border-bottom: 1px solid var(--border); }
.bh-row:last-child { border-bottom: none; }
.bh-main { min-width: 0; }
.bh-who { font-size: 13.5px; margin-bottom: 2px; }
.bh-who b { overflow-wrap: anywhere; }
.bh-res { font-size: 12.5px; margin-bottom: 2px; }

/* ═══════════════════════════════════════════════════════════════════
   УРОВНИ МОДЕРНИЗАЦИИ ТЕХНИКИ (Mk0 / Mk1 / Mk2)
   Раньше это была одна серая строка «Mk0: 12 · Mk1: 3», из которой не
   видно ни разницы в силе, ни того, что модернизация вообще что-то
   даёт. Теперь каждый уровень — отдельная строка со своим цветом:
   обычная техника серая, Mk1 стальной-синий, Mk2 золотой.
   Цвет несёт смысл, а не украшает: по нему видно, чего в стеке больше.
   =================================================================== */
.mk-rows { display: flex; flex-direction: column; gap: 4px; }
.mk-row {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  font-size: 12px; padding: 4px 8px; border-radius: 6px;
  border-left: 3px solid var(--border);
  background: rgba(255, 255, 255, .03);
}
.mk-row .mk-tag { font-weight: 700; letter-spacing: .04em; }
.mk-row .mk-count { color: var(--text); font-weight: 700; }
.mk-row .mk-stats { color: var(--dim); }
.mk-row .mk-stats b { color: var(--text); }
.mk-row .mk-bonus {
  margin-left: auto; font-weight: 700; white-space: nowrap;
  padding: 1px 6px; border-radius: 9px; font-size: 11px;
}

/* Без модернизации — нарочно тусклая: это точка отсчёта */
.mk-row.mk-0 { border-left-color: var(--border); }
.mk-row.mk-0 .mk-tag { color: var(--dim); font-weight: 600; }

/* Mk1 — сталь */
.mk-row.mk-1 { border-left-color: #6fa8dc; background: rgba(111, 168, 220, .08); }
.mk-row.mk-1 .mk-tag { color: #8ec4f0; }
.mk-row.mk-1 .mk-bonus { color: #8ec4f0; border: 1px solid #6fa8dc; }

/* Mk2 — золото: верхний уровень должен читаться с одного взгляда */
.mk-row.mk-2 { border-left-color: var(--gold); background: rgba(233, 199, 92, .10); }
.mk-row.mk-2 .mk-tag { color: var(--gold); }
.mk-row.mk-2 .mk-bonus { color: var(--gold); border: 1px solid var(--gold); }

.mk-total { font-size: 11px; color: var(--dim); padding: 2px 8px; }
.mk-total b { color: var(--green); }

@media (max-width: 480px) {
  .mk-row .mk-stats { width: 100%; order: 3; }
  .mk-row .mk-bonus { margin-left: 0; }
}

/* ── Визуальный редактор письма (панель → «Письма») ───────────────
   Владелец правит письмо как обычный текст, а не разметку: теги руками
   приводили к выдуманным подстановкам, из-за которых почтовый сервис
   отклонял письмо целиком. */
.mail-subject-row { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin: 4px 0 10px; }
.mail-subject-row .tpl-subject {
  flex: 1 1 260px; box-sizing: border-box; padding: 7px 10px;
  background: var(--bg); color: var(--text);
  border: 1px solid var(--border); border-radius: 8px;
}

.mail-toolbar {
  display: flex; flex-wrap: wrap; gap: 4px; align-items: center;
  padding: 6px; margin: 4px 0 0;
  background: rgba(255, 255, 255, .04);
  border: 1px solid var(--border); border-bottom: none;
  border-radius: 8px 8px 0 0;
}
.mail-tb {
  padding: 5px 9px; font-size: 13px; line-height: 1;
  background: var(--bg); color: var(--text);
  border: 1px solid var(--border); border-radius: 6px; cursor: pointer;
}
.mail-tb:hover { background: rgba(255, 255, 255, .08); }
.mail-tb:active { transform: translateY(1px); }
.mail-tb-sep { width: 1px; align-self: stretch; margin: 2px 4px; background: var(--border); }

/* Метка-подстановка: сразу видно, что это не текст, а подставляемое
   значение — и что редактировать её посимвольно бессмысленно. */
.mail-varbtn {
  padding: 4px 9px; font-size: 12px; line-height: 1; cursor: pointer;
  color: #1a1a1a; background: #d9a546;
  border: 1px solid #b8892f; border-radius: 999px;
}
.mail-varbtn::before { content: '+ '; opacity: .7; }
.mail-varbtn:hover { filter: brightness(1.1); }

.mail-editor {
  min-height: 190px; padding: 12px 14px;
  background: #fff; color: #222;               /* письмо белое — показываем как есть */
  border: 1px solid var(--border); border-radius: 0 0 8px 8px;
  overflow-wrap: anywhere; line-height: 1.5;
}
.mail-editor:focus { outline: 2px solid #d9a546; outline-offset: -2px; }
.mail-editor h2 { margin: 0 0 8px; font-size: 20px; color: #2e5b1f; }
.mail-editor p { margin: 0 0 10px; }
.mail-editor a { color: #1a5fb4; }

.mail-editor .mail-var,
.a2-card .mail-var {
  display: inline-block; padding: 1px 8px; margin: 0 1px;
  font-size: 12px; font-weight: 700; white-space: nowrap;
  color: #1a1a1a; background: #f2d492;
  border: 1px solid #b8892f; border-radius: 999px;
  user-select: none;
}
.mail-editor .mail-var::before { content: '{'; opacity: .45; margin-right: 2px; }
.mail-editor .mail-var::after { content: '}'; opacity: .45; margin-left: 2px; }

.mail-code {
  width: 100%; box-sizing: border-box; padding: 10px 12px;
  background: var(--bg); color: var(--text);
  border: 1px solid var(--border); border-radius: 0 0 8px 8px;
  font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12px;
}

@media (max-width: 560px) {
  .mail-tb, .mail-varbtn { font-size: 12px; padding: 5px 7px; }
  .mail-tb-sep { display: none; }
}

/* ── Отметки согласий в форме регистрации ─────────────────────────
   Крупная область нажатия: галку ставят пальцем на телефоне, а
   промах по чекбоксу 13×13 читается как «форма не работает».
   Текст не выделяется при двойном тапе — иначе на мобильном вместо
   отметки подсвечивается абзац. */
.rg-check {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 7px 0; cursor: pointer; line-height: 1.35;
  -webkit-user-select: none; user-select: none;
}
/* Свой значок вместо системного. accent-color красит системную галочку
   лишь частично и по-разному в каждом браузере: на iOS она остаётся
   синей, в старом Android — квадратной и серой. Здесь рисуем сами, и
   выглядит одинаково везде. Сам input остаётся на месте — с ним
   работают клавиатура, чтение с экрана и клик по подписи. */
.rg-check input[type="checkbox"] {
  -webkit-appearance: none; appearance: none;
  flex: 0 0 auto; width: 22px; height: 22px; margin: 0;
  position: relative; cursor: pointer;
  background: #10150b; border: 1.5px solid var(--border); border-radius: 6px;
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.rg-check input[type="checkbox"]:hover { border-color: var(--gold); }
.rg-check input[type="checkbox"]:checked {
  background: linear-gradient(160deg, var(--gold), #b8912f);
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(233, 199, 92, .14);
  animation: rg-pop .18s ease-out;
}
/* Галочка — две линии на псевдоэлементе, а не символ шрифта: символ в
   разных шрифтах смещается по-своему и на телефоне уезжал за рамку. */
.rg-check input[type="checkbox"]:checked::after {
  content: ''; position: absolute; left: 7px; top: 3px;
  width: 5px; height: 10px;
  border: solid #17140a; border-width: 0 2.5px 2.5px 0;
  transform: rotate(43deg);
}
.rg-check input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--gold); outline-offset: 2px;
}
@keyframes rg-pop {
  0% { transform: scale(.82); } 60% { transform: scale(1.09); } 100% { transform: scale(1); }
}
.rg-check span { flex: 1; font-size: 14px; color: var(--text); }
.rg-check.small span { font-size: 13px; color: var(--muted); }
.rg-check a { color: var(--gold); text-decoration: underline; }
.rg-check a:hover { opacity: .85; }

/* ── Окно подтверждения согласий ──────────────────────────────────
   Закрывает игру целиком для тех, кто регистрировался до появления
   отметок: согласий у них нет, и продолжать обработку «по умолчанию»
   нельзя. Прокрутка внутри окна — текста тут больше, чем в окне
   блокировки, а на телефоне кнопка «Принять» обязана оставаться
   достижимой. */
#consent-gate, #name-gate {
  position: fixed; inset: 0; z-index: 20000;
  display: flex; align-items: flex-start; justify-content: center;
  background: rgba(8, 10, 6, .97); padding: 16px;
  overflow-y: auto; -webkit-overflow-scrolling: touch;
}
.cg-box {
  max-width: 400px; width: 100%; margin: auto;
  background: linear-gradient(160deg, #1c1a12, #0f0d0a);
  border: 1px solid var(--gold); border-radius: 14px;
  padding: 16px 16px 14px; box-shadow: 0 14px 50px rgba(0,0,0,.7);
}
/* Значок свой, а не эмодзи: эмодзи рисуется шрифтом системы и на каждой
   выглядит иначе — на одной цветная бумажка, на другой чёрный контур. */
.cg-icon { line-height: 0; text-align: center; }
.cg-icon svg {
  width: 40px; height: 40px; fill: none; stroke: var(--gold);
  stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
}
.cg-title {
  font-size: 17px; font-weight: 700; color: var(--gold);
  margin-top: 8px; text-align: center;
}
.cg-lead { font-size: 13px; color: var(--muted); margin-top: 8px; line-height: 1.45; }
.cg-note { font-size: 12px; color: var(--dim); margin-top: 8px; line-height: 1.45; }
.cg-list { margin: 12px 0 4px; }
.cg-sep { border: none; border-top: 1px solid var(--border-dim); margin: 10px 0 4px; }

/* Обязательное отделено от необязательного рамкой, а не только словами:
   человек проглядывает окно за пару секунд и по тексту «необязательно»
   не всегда понимает, к чему оно относится — к строке выше или ниже. */
.cg-req {
  border: 1px solid var(--border); border-radius: 10px;
  padding: 4px 10px; background: rgba(233, 199, 92, .04);
}
.cg-opt { padding: 0 10px; }
.cg-opt .rg-check span { color: var(--muted); font-size: 13px; }
/* В окне строки плотнее, чем в форме регистрации: там их пять на весь
   экран, здесь — пять в коробке, которую надо пролистать на телефоне. */
.cg-box .rg-check { padding: 5px 0; }
.cg-box .rg-check span { font-size: 13px; }
.cg-head-small { font-size: 11.5px; color: var(--dim); margin: 10px 0 4px; letter-spacing: .3px; }
.cg-out {
  display: block; text-align: center; margin-top: 10px;
  font-size: 12.5px; color: var(--dim); text-decoration: underline; cursor: pointer;
}

/* ── Экран обновления ─────────────────────────────────────────────
   Закрывает игру целиком на время выката. Спокойный, без красного:
   это не поломка и не наказание, а плановая работа — и человек должен
   уйти с ощущением «подожду», а не «всё сломалось». */
#maint-screen {
  position: fixed; inset: 0; z-index: 20000;
  display: flex; align-items: center; justify-content: center;
  background: rgba(8, 10, 6, .97); padding: 16px;
}
/* Ширина средняя, не во весь экран: на широком мониторе строка в
   полтора метра нечитаема, а окно на 380 px не вмещает ни картинку, ни
   текст владельца в несколько абзацев. 620 px — это примерно 70 знаков
   в строке, то есть нормальная колонка. */
.maint-box {
  max-width: 620px; width: 100%; text-align: center;
  background: linear-gradient(160deg, #1b1a14, #100e0b);
  border: 1px solid var(--border-dim); border-radius: 14px;
  padding: 0 0 20px; box-shadow: 0 14px 50px rgba(0,0,0,.7);
  overflow: hidden;
  max-height: calc(100vh - 32px); overflow-y: auto;
}
.maint-pad { padding: 0 22px; }
.maint-icon { font-size: 38px; line-height: 1; margin-top: 22px; }
.maint-title { font-size: 20px; font-weight: 700; color: var(--gold); margin-top: 8px; }
/* Текст владельца многострочный: pre-line сохраняет его абзацы, но не
   схлопывает вёрстку, как это сделал бы <pre>. */
.maint-reason {
  font-size: 14.5px; color: var(--text); margin-top: 10px; line-height: 1.55;
  white-space: pre-line; word-break: break-word;
}
.maint-left { font-size: 13.5px; color: var(--orange-1); margin-top: 10px; }
.maint-note { font-size: 12.5px; color: var(--dim); margin-top: 12px; line-height: 1.5; }

/* ── Карусель ─────────────────────────────────────────────────────
   Ждать полчаса перед пустой заглушкой скучно; картинки дают понять,
   что за работа идёт. Соотношение задано жёстко, чтобы окно не прыгало
   в высоту при смене кадра, и место под картинку резервируется до её
   загрузки — иначе на медленной связи текст подскакивал бы вверх. */
.maint-slides {
  position: relative; width: 100%; aspect-ratio: 16 / 9;
  background: #0c0d0a; margin-top: 16px; overflow: hidden;
}
.maint-slides img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: 0; transition: opacity .6s ease;
}
.maint-slides img.on { opacity: 1; }
/* Низ кадра затемняем: под ним идёт заголовок, и светлая картинка
   встык с текстом читается как оборванная. */
.maint-slides::after {
  content: ''; position: absolute; inset: auto 0 0 0; height: 40%;
  background: linear-gradient(to bottom, transparent, #100e0b);
  pointer-events: none;
}
.maint-pips { margin-top: 10px; display: flex; gap: 5px; justify-content: center; }
.maint-pips i {
  width: 16px; height: 3px; border-radius: 2px; background: var(--gold);
  opacity: .22; transition: opacity .4s ease;
}
.maint-pips i.on { opacity: .85; }

.maint-stale {
  margin-top: 10px; font-size: 12px; color: var(--orange-1); line-height: 1.45;
}

.maint-again {
  margin-top: 14px; background: none; border: 1px solid var(--border-dim);
  color: var(--dim); font: inherit; font-size: 12.5px; cursor: pointer;
  padding: 6px 14px; border-radius: 8px;
}
.maint-again:hover { color: var(--text); border-color: var(--gold); }

.maint-dots { margin-top: 16px; display: flex; gap: 6px; justify-content: center; }
.maint-dots span {
  width: 7px; height: 7px; border-radius: 50%; background: var(--gold);
  opacity: .3; animation: maint-pulse 1.4s infinite;
}
.maint-dots span:nth-child(2) { animation-delay: .2s; }
.maint-dots span:nth-child(3) { animation-delay: .4s; }
@keyframes maint-pulse { 0%,100% { opacity: .25 } 50% { opacity: 1 } }

@media (max-width: 520px) {
  .maint-pad { padding: 0 16px; }
  .maint-icon { font-size: 32px; margin-top: 16px; }
  .maint-title { font-size: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .maint-slides img { transition: none; }
}

/* ── Полоса «скоро обновление» ────────────────────────────────────
   Назначенное, но ещё не наступившее окно. Игра работает, поэтому это
   именно полоса, а не запертая дверь: человеку надо дать доиграть бой
   и не начинать долгую постройку, а не выбросить его из игры заранее.
   Полосу можно закрыть крестиком — она вернётся сама за пять минут до
   начала, когда предупреждение снова становится важным. */
#maint-soon {
  position: fixed; left: 0; right: 0; z-index: 29000;
  background: linear-gradient(180deg, #6b4a10, #4a3208);
  border-bottom: 1px solid var(--border-dim);
  color: #ffe6b0; font-size: 12.5px; text-align: center;
  padding: 5px 34px 5px 10px; line-height: 1.35;
  text-shadow: 0 1px 2px rgba(0,0,0,.6);
}
#maint-soon b { color: #fff; }
#maint-soon.is-near { background: linear-gradient(180deg, #8a3a12, #5c2409); }
#maint-soon .ms-x {
  position: absolute; top: 2px; right: 6px; cursor: pointer;
  font-size: 15px; line-height: 1; color: #ffd9a0; opacity: .7;
  padding: 2px 5px; background: none; border: 0;
}
#maint-soon .ms-x:hover { opacity: 1; }
body.has-maint-soon { padding-top: 26px; }
body.is-test-world.has-maint-soon { padding-top: 48px; }

/* ── Полоса тестового мира ────────────────────────────────────────
   Висит поверх всего и всегда. Перепутать тестовое окно с боевым и
   раздать награды не тем людям — ошибка, которая случается один раз. */
#test-world-bar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 30000;
  background: repeating-linear-gradient(45deg, #7a4a12, #7a4a12 12px, #8f5715 12px, #8f5715 24px);
  color: #fff; font-size: 12px; font-weight: 700; letter-spacing: .3px;
  text-align: center; padding: 4px 8px; pointer-events: none;
  text-shadow: 0 1px 2px rgba(0,0,0,.6);
}
body.is-test-world { padding-top: 22px; }

/* ---------- СВЁРНУТЫЕ БЛОКИ НАСТРОЕК ----------
   Логин и пароль меняют раз в год, а семь полей стояли развёрнутыми
   всегда — экран настроек начинался с длинной формы, и всё остальное
   оказывалось под ней. Кнопка вместо формы: поля появляются по нажатию.
   Сделано на <details>, поэтому клавиатура и чтение с экрана работают
   без единой строки своего кода. */
.acc-fold { border: 1px solid var(--border); border-radius: 8px; margin-top: 8px; }
.acc-fold[open] { background: rgba(255, 255, 255, .02); }
.acc-fold > .acc-sum {
  list-style: none; cursor: pointer; user-select: none;
  padding: 11px 12px; font-weight: 700; font-size: 14px; color: var(--text);
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.acc-fold > .acc-sum::-webkit-details-marker { display: none; }
/* Стрелка своя: системный треугольник в каждом браузере свой и на
   телефоне почти не виден. */
.acc-fold > .acc-sum::after {
  content: '▾'; color: var(--dim); font-size: 12px; transition: transform .15s ease;
}
.acc-fold[open] > .acc-sum::after { transform: rotate(180deg); }
.acc-fold > .acc-sum:hover { color: var(--gold); }
.acc-fold > *:not(.acc-sum) { margin-left: 12px; margin-right: 12px; }
.acc-fold > *:last-child { margin-bottom: 12px; }

/* ---------- КЛУБ: СУТОЧНЫЙ ПРЕДЕЛ И БАНК ТИРАЖА ----------
   Полоса нужна, чтобы предел читался взглядом, а не вычитанием двух
   чисел: «85 из 100» и полная полоса доходят по-разному. */
.cap-bar {
  height: 6px; border-radius: 3px; overflow: hidden;
  background: rgba(255,255,255,.08); border: 1px solid var(--border);
}
.cap-bar > i { display: block; height: 100%; background: var(--gold); transition: width .3s ease; }

.lot-pot { text-align: center; padding: 10px 0 4px; }
.lot-pot-num {
  font-size: 30px; font-weight: 800; color: var(--gold);
  line-height: 1.1; letter-spacing: .02em;
}

/* ---------- ОБЩИЙ СЕЙФ ----------
   Маска — главное на экране: это счёт всего мира, а не личный прогресс.
   Поэтому крупно, моноширинно и с явной разницей между открытой цифрой
   и звёздочкой: издалека должно быть видно, близко ли к вскрытию. */
.sf-mask {
  display: flex; justify-content: center; gap: 6px;
  padding: 12px 0 8px; flex-wrap: wrap;
}
.sf-d {
  min-width: 34px; padding: 6px 4px; text-align: center;
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: 26px; font-weight: 800; line-height: 1;
  color: var(--gold); background: rgba(255,255,255,.05);
  border: 1px solid var(--border); border-radius: 6px;
}
.sf-d.sf-hidden { color: var(--dim); opacity: .5; }
.sf-row { padding: 2px 0; border-bottom: 1px solid var(--border); }
.sf-row:last-child { border-bottom: 0; }
.sf-guess {
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  letter-spacing: 3px;
}
.sf-input {
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  letter-spacing: 6px; text-align: center; font-size: 18px;
}

/* ---------- КАРТЫ: ВОЕННЫЙ ПРЕФЕРАНС ----------
   Картинки 200×300, показываем их мелко и по ширине экрана. Рука не
   переносится на вторую строку, а прокручивается вбок: пять карт на
   телефоне иначе схлопывались бы в нечитаемые полоски. */
.pf-side { margin-top: 6px; }
.pf-who {
  display: flex; align-items: baseline; gap: 8px;
  font-size: 13px; color: var(--dim); margin-bottom: 4px;
}
.pf-who b { font-size: 17px; }
.pf-hand {
  display: flex; gap: 6px; overflow-x: auto; padding: 2px 0 6px;
  min-height: 92px; scrollbar-width: thin;
}
/* Игральная карта преферанса. Класс намеренно НЕ .pf-card: так уже
   называется карточка «Личного дела», и общий класс ломал профиль —
   он схлопывался до 60 пикселей и прятал всё, включая кнопку аватара. */
.pref-card {
  position: relative; flex: 0 0 auto;
  width: 60px; aspect-ratio: 2 / 3;
  border-radius: 6px; overflow: hidden;
  border: 1px solid var(--border);
  box-shadow: 0 2px 6px rgba(0,0,0,.35);
  background: #efe9dc;                       /* цвет рубашки, пока грузится */
}
.pref-card img { width: 100%; height: 100%; display: block; object-fit: cover; }

/* Рубашка лежит поверх лица и уезжает при раздаче. Сделано именно так,
   а не переворотом контейнера: если анимация не отработает (старый
   браузер, отключённое движение), карта останется ЛИЦОМ вверх, а не
   рубашкой — то есть худший случай всё равно играбелен. */
.pf-back {
  position: absolute; inset: 0; display: block; opacity: 0;
  background: url('/img/cards/card-back.webp') center/cover no-repeat;
}
.pref-card.pf-deal { animation: pf-in .34s cubic-bezier(.2,.9,.3,1.2) both; }
.pref-card.pf-deal .pf-back { animation: pf-flip .34s ease-in both; }
@keyframes pf-in {
  from { opacity: 0; transform: translate(26px, -34px) rotate(9deg) scale(.86); }
  to   { opacity: 1; transform: none; }
}
@keyframes pf-flip { from { opacity: 1; } 70% { opacity: 1; } to { opacity: 0; } }

.pf-result {
  text-align: center; font-weight: 700; padding: 6px 8px;
  border-radius: 6px; border: 1px solid var(--border); margin-bottom: 4px;
}
.pf-result.pf-win  { color: var(--gold); border-color: #4d7a3d; }
.pf-result.pf-lose { color: var(--dim); }

/* Кому движение мешает — карты просто появляются на месте, лицом вверх */
@media (prefers-reduced-motion: reduce) {
  .pref-card.pf-deal { animation: none; }
  .pref-card.pf-deal .pf-back { animation: none; opacity: 0; }
}
@media (min-width: 520px) { .pref-card { width: 72px; } }

/* Ранг и масть поверх угла карты. На рисунке они есть, но при ширине
   карты в 72 px занимают около шести пикселей — формально видно, на
   деле не читается. Метка небольшая и не закрывает лицо. */
.pf-rank {
  position: absolute; top: 2px; left: 2px; z-index: 2;
  min-width: 17px; padding: 0 3px; border-radius: 4px;
  font-size: 12px; line-height: 16px; font-weight: 800; text-align: center;
  color: #1a1a1a; background: rgba(245, 241, 230, .93);
  box-shadow: 0 1px 2px rgba(0,0,0,.4);
  pointer-events: none;
}
.pf-rank.pf-red { color: #b3261e; }

/* ---------- КЛУБ: КНОПКИ ИГР ----------
   Вход в клуб — выбор, а не простыня из семи игр. Кнопка показывает
   состояние своей игры (таймер, счёт, банк), чтобы не заходить внутрь
   ради проверки. */
.club-btn {
  display: flex; align-items: center; gap: 10px;
  text-decoration: none; color: var(--text);
  transition: border-color .15s ease, background .15s ease;
}
.club-btn:hover { border-color: var(--gold); }
.club-ico { font-size: 24px; line-height: 1; min-width: 30px; text-align: center; flex: 0 0 auto; }
.club-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.club-txt b { font-size: 15px; }
.club-txt .small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.club-arrow { color: var(--dim); font-size: 22px; flex: 0 0 auto; }

/* Стоимости карт — компактной сеткой, чтобы правила читались целиком */
/* Девять достоинств должны встать одним рядом: перенос разрывает
   таблицу и туз оказывается сиротой на второй строке. */
.pref-vals { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 4px; }
/* Достоинства карт: маленькая карта и её цена под ней. Настоящая
   картинка вместо буквы — игрок видит ту же карту, что придёт в руку. */
.pref-val {
  display: inline-flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 3px; border-radius: 6px;
  border: 1px solid var(--border); background: rgba(255,255,255,.04);
  font-size: 11px; color: var(--dim);
}
.pref-val img { width: 30px; height: auto; display: block; border-radius: 3px; }
.pref-val b { color: var(--gold); font-size: 13px; line-height: 1; }

.pref-stake {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 0; border-bottom: 1px solid var(--border); font-size: 14px;
}
.pref-stake:last-of-type { border-bottom: 0; }

/* ---------- КЛУБ: КАРТИНКА В ШАПКЕ ----------
   Ширина по контейнеру, высота ограничена: на телефоне картинка не должна
   съедать экран так, чтобы кнопки игр ушли за сгиб. object-fit: cover
   обрезает по краям, а не плющит — иначе арт выглядел бы растянутым. */
.club-hero {
  margin: 0 0 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  line-height: 0;
  background: rgba(0,0,0,.25);
}
.club-hero img {
  width: 100%;
  aspect-ratio: 21 / 9;
  height: auto;
  object-fit: cover;
  object-position: center 42%;   /* центр сцены — столы и бар, а не потолок */
  display: block;
}
/* Совсем старым браузерам без aspect-ratio оставляем прежнюю высоту */
@supports not (aspect-ratio: 1) {
  .club-hero img { height: 150px; }
}

/* ---------- ВЫБОР ПОЛА ----------
   Две кнопки вместо списка: вариантов два, и выпадающий список ради них
   добавлял бы лишнее нажатие. Выбранный вариант виден рамкой, а не
   галочкой — на телефоне так заметнее. */
.rg-g.on, .gender-cur {
  border-color: var(--gold);
  color: var(--gold);
  background: rgba(233,199,92,.08);
}
.gender-cur { opacity: .75; cursor: default; }

/* ── Радиоперехват: две сетки квадратов, укрытие и наводки ── */
.ic-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 4px; }
/* Клетка — кусок той же карты, что на картинке игры: разложена
   сеткой через background-size/position, поэтому шесть квадратов
   складываются в одну карту, а не в шесть одинаковых плиток. */
.ic-cell {
  position: relative; aspect-ratio: 1.5 / 1;
  border: 1px solid var(--border); border-radius: 8px; overflow: hidden;
  background-image: url(/img/club/intercept.webp);
  background-size: 440% 444%;
  color: var(--text); cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease, transform .1s ease;
}
.ic-cell::after {
  content: ''; position: absolute; inset: 0;
  background: rgba(8,10,6,.55); transition: background .15s ease;
}
.ic-cell .ic-name {
  position: absolute; left: 6px; bottom: 4px; z-index: 2;
  font-size: 13px; font-weight: 700; letter-spacing: .5px;
  color: #e8e2cf; text-shadow: 0 1px 3px #000;
}
.ic-cell .ic-mark {
  position: absolute; right: 5px; top: 3px; z-index: 2;
  font-size: 15px; opacity: 0; transform: scale(.6);
  transition: opacity .15s ease, transform .15s ease;
}
.ic-cell:hover { border-color: var(--gold); transform: translateY(-1px); }
.ic-cell:hover::after { background: rgba(8,10,6,.38); }
.ic-cell.on {
  border-color: var(--orange);
  box-shadow: 0 0 0 1px var(--orange) inset, 0 0 14px rgba(214,138,46,.35);
}
.ic-cell.on::after { background: rgba(214,138,46,.28); }
.ic-cell.on .ic-name { color: #ffe9b8; }
.ic-cell.on .ic-mark { opacity: 1; transform: scale(1); }

/* Тактическая дуэль: наставление и выбор рода войск картинками */
/* height:auto обязателен: у картинки есть атрибуты width/height, и без
   него ширина тянется по карточке, а высота остаётся 900 — наставление
   растягивается вдвое. */
.tac-rules { width: 100%; height: auto; border-radius: 10px; display: block; }
.tac-kinds { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.tac-kinds .tactic-kind {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 8px 4px 6px; border: 1px solid var(--border); border-radius: 10px;
  background: rgba(255,255,255,.02); color: var(--text); cursor: pointer;
  transition: border-color .15s ease, transform .1s ease;
}
.tac-kinds .tactic-kind img { width: 100%; max-width: 84px; height: 62px; object-fit: contain; }
.tac-kinds .tactic-kind span { font-size: 12px; font-weight: 600; }
.tac-kinds .tactic-kind:hover { border-color: var(--gold); transform: translateY(-2px); }
.kind-mini { width: 22px; height: 18px; object-fit: contain; vertical-align: middle; }
.tac-row { align-items: center; }

/* Военный займ: билет с числом в углу */
.lot-mine { display: flex; align-items: center; gap: 12px; }
/* Пачка билетов: чем больше куплено, тем толще стопка — один слой до
   пяти билетов, два до двадцати, три дальше. Точное число всё равно
   стоит в углу, стопка нужна, чтобы разницу было видно не читая. */
.lot-ticket { position: relative; flex: none; display: block; width: 108px; }
.lot-ticket img { width: 108px; height: auto; display: block; }
.lot-ticket img:not(:first-child) {
  position: absolute; left: 0; top: 0;
  box-shadow: -2px -2px 6px rgba(0,0,0,.45);
}
.lot-ticket-2 { padding: 5px 5px 0 0; }
.lot-ticket-2 img:nth-child(2) { transform: translate(5px, -5px); }
.lot-ticket-3 { padding: 10px 10px 0 0; }
.lot-ticket-3 img:nth-child(2) { transform: translate(5px, -5px); }
.lot-ticket-3 img:nth-child(3) { transform: translate(10px, -10px); }
.lot-ticket-num {
  position: absolute; right: -6px; top: -8px; min-width: 28px; padding: 2px 7px;
  border-radius: 999px; background: var(--orange); color: #1a1206;
  font-size: 13px; font-weight: 800; font-style: normal; text-align: center;
  border: 1px solid rgba(0,0,0,.35);
  box-shadow: 0 1px 6px rgba(0,0,0,.5);
}

/* Картинка игры в шапке её страницы: чуть выше, чем баннер клуба, и по
   центру кадра — сюжет у всех семи картинок именно там. */
.club-hero.game-hero img { aspect-ratio: 16 / 7; object-position: center 45%; }

/* ── Снайперская дуэль: два стрелка и журнал ── */
.sn-duel {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin: 10px 0 6px;
}
.sn-side { display: flex; flex-direction: column; align-items: center; gap: 2px; flex: 1; }
.sn-side b { font-size: 22px; }
.sn-side b.sn-sure { color: var(--red); }
.sn-vs { font-size: 20px; opacity: .7; }
.sn-log {
  border: 1px solid var(--border); border-radius: 8px; padding: 6px 8px;
  font-size: 12px; color: var(--muted); max-height: 120px; overflow-y: auto;
}
.sn-log b { color: var(--gold); }

/* ── Напёрстки: три котелка ── */
.th-row { display: flex; gap: 8px; }
.th-pot {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 14px 0 10px; border: 1px solid var(--border); border-radius: 10px;
  background: rgba(255,255,255,.02); color: var(--text); font-size: 30px; cursor: pointer;
  transition: border-color .15s ease, transform .1s ease;
}
.th-pot span { font-size: 12px; color: var(--muted); }
.th-pot:hover { border-color: var(--gold); transform: translateY(-2px); }
.th-pot.th-win { border-color: var(--green); background: rgba(90,180,90,.12); }
.th-pot.th-lose { border-color: var(--red); background: rgba(180,70,60,.10); }

/* ── Полоска клуба: игрок в очереди или в бою ──
   Липнет к самому верху, а шапка при этом опускается под неё: перекрыть
   ресурсы игрока полоска не должна. */
.club-live {
  position: sticky; top: 0; z-index: 21;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 7px 12px; font-size: 12.5px; color: #fff; cursor: pointer;
  background: linear-gradient(90deg, #6b4a1b, #8a5f22);
  border-bottom: 1px solid rgba(0,0,0,.4);
}
.club-live b { color: #ffe08a; }
.club-live.act { background: linear-gradient(90deg, #8e3326, #a8452e); }
.club-live.act b { color: #ffd7c2; }
body.has-club-bar #header { top: 32px; }

/* ══════ КОНТРАКТЫ: НАРЯД СНАБЖЕНИЯ ══════
   Раньше контракт выглядел как обычное поручение — та же карточка, тот
   же портрет заказчика, — и на экране «Поручения штаба» два раздела
   отличались только заголовком. Теперь это бланк наряда: полоса с
   номером, задача, отгрузка техникой и подпись внизу. */
.ct-card {
  border: 1px solid var(--border); border-radius: 10px;
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(0,0,0,.12));
  margin-bottom: 10px; overflow: hidden;
}
.menu-btn.menu-attention { border-color:var(--orange);background:rgba(224,164,43,.13);box-shadow:0 0 12px rgba(224,164,43,.22); }
.ct-card.ct-ready { border-color: var(--green); }
.ct-card.ct-done  { opacity: .62; }
.ct-card.ct-done:has(.ct-report) { opacity: 1; }
.ct-report { margin-top:10px;padding:10px;border:1px solid var(--green);border-radius:8px;background:rgba(83,120,43,.08); }
.ct-report>b { display:block;color:var(--green);font-size:13px; }
.ct-report .ct-rewards { margin-top:8px; }
.ct-report p { margin:8px 0;font-size:12px;line-height:1.5; }
.ct-report-failed { border-color:#be6756;background:rgba(150,50,30,.08); }
.ct-report-failed>b,.ct-stamp-failed { color:#ef9987;border-color:#be6756; }
.ct-card.ct-elite { border-color: #8d3030; box-shadow: inset 0 0 24px rgba(150,28,28,.08); }
.ct-strip {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 10px; border-bottom: 1px solid var(--border);
  background: repeating-linear-gradient(135deg, rgba(233,199,92,.06) 0 8px, transparent 8px 16px);
}
.ct-no {
  font-size: 10.5px; letter-spacing: 1.2px; color: var(--dim);
  border: 1px solid var(--border); border-radius: 4px; padding: 1px 5px;
}
.ct-name { font-weight: 700; font-size: 14px; color: var(--gold); flex: 1; }
.ct-stamp {
  font-size: 10.5px; letter-spacing: 1.5px; font-weight: 800;
  color: var(--dim); border: 1.5px solid var(--dim); border-radius: 4px;
  padding: 1px 6px; transform: rotate(-4deg);
}
.ct-stamp-ok { color: var(--green); border-color: var(--green); }
.ct-body { padding: 8px 10px 10px; }
.ct-task { font-size: 13px; margin-bottom: 6px; }
.ct-difficulty {
  display: inline-block; margin-bottom: 6px; padding: 2px 7px;
  border: 1px solid var(--border); border-radius: 999px; color: var(--orange-1); font-size: 11px;
}
.ct-difficulty.elite { color: #ff7b68; border-color: #8d3030; font-weight: 800; }
.ct-req-title { margin-top: 8px; color: var(--dim); font-size: 11px; text-transform: uppercase; letter-spacing: .7px; }
.ct-reqs { display: grid; grid-template-columns: repeat(auto-fit,minmax(190px,1fr)); gap: 5px; margin-top: 5px; }
.ct-req-row {
  min-height: 31px; display: flex; align-items: center; gap: 6px; padding: 4px 7px;
  border: 1px solid var(--border); border-radius: 7px; background: rgba(255,255,255,.018); font-size: 11.5px;
}
.ct-req-row img { width: 28px !important; height: 28px !important; object-fit: contain; }
.ct-req-row span { flex: 1; }
.ct-req-row b { white-space: nowrap; }
.ct-req-row.ok b { color: var(--green); }
.ct-req-row.bad b { color: #e47a6b; }
.ct-missing { margin-top: 6px; color: #e47a6b; font-size: 11px; }
.ct-pay { margin-top: 8px; border-top: 1px dashed var(--border); padding-top: 7px; }
.ct-pay-head { font-size: 12px; color: var(--dim); margin-bottom: 6px; }
.ct-pay-head b { color: var(--gold); }
.ct-rewards { display: flex; flex-wrap: wrap; gap: 5px; }
.ct-rewards > span { border: 1px solid var(--border); border-radius: 6px; padding: 4px 7px; font-size: 11.5px; color: var(--gold); }
.ct-rewards .ct-box { border-color: #8d3030; color: #ff9d83; font-weight: 800; }
.ct-units { display: flex; gap: 8px; flex-wrap: wrap; }
.ct-unit {
  flex: 1 1 90px; min-width: 90px; text-align: center;
  border: 1px solid var(--border); border-radius: 8px; padding: 6px 4px;
  background: rgba(255,255,255,.02);
}
.ct-unit img { display: block; margin: 0 auto; }
.ct-unit-n { display: block; font-weight: 800; font-size: 13px; color: var(--gold); margin-top: 2px; }
.ct-unit-name { display: block; font-size: 10.5px; color: var(--dim); line-height: 1.15; margin-top: 1px; }
.ct-sign {
  display: flex; align-items: center; gap: 7px;
  padding: 6px 10px; border-top: 1px solid var(--border);
  font-size: 11.5px; color: var(--dim); background: rgba(0,0,0,.14);
}
.ct-sign img { border-radius: 50%; }

/* ══════ СПЕЦПРЕДЛОЖЕНИЯ: наборы в банке ══════
   Карточка набора — витрина, а не список: сперва что внутри, потом
   цена. Состав приходит с сервера уже разобранным, здесь только показ. */
.offer-card { border-color: var(--gold); }
.offer-head { display: flex; align-items: flex-start; gap: 8px; }
.offer-emoji { font-size: 26px; line-height: 1; }
.offer-timer {
  flex: 0 0 auto; font-size: 11.5px; color: var(--orange-1);
  border: 1px solid var(--border); border-radius: 999px; padding: 2px 8px;
}
.offer-items {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 6px; margin-top: 8px;
}
.offer-item {
  display: flex; align-items: center; gap: 6px;
  border: 1px solid var(--border); border-radius: 8px; padding: 5px 7px;
  font-size: 12px; background: rgba(255,255,255,.02);
}
.offer-item img { width: 28px; height: 28px; object-fit: contain; flex: 0 0 auto; }
.offer-buy { display: flex; gap: 8px; }
.offer-buy .btn { width: auto; }
.offer-buy s { font-size: 11px; }
/* Предпросмотр набора в панели: ширина как у колонки игры — иначе
   карточка растягивается на весь экран и врёт про то, как она
   ляжет у игрока на телефоне. */
.of-preview { max-width: 460px; }
.of-preview .offer-card { pointer-events: none; }
.of-preview .offer-buy .btn { opacity: .9; }

/* ═══ Добыча из контейнера: разработки картинками ═══ */
.loot-devs { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; margin-bottom: 8px; }
.loot-dev { text-align: center; }
.loot-dev .img-frame { margin: 0 auto 4px; width: 64px; height: 64px; }
.loot-dev-name { line-height: 1.15; }

/* ═══ Плашка с наградой (раздачи к праздникам) ═══ */
.gw-bar { border-color: var(--money); }
.gw-items { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 3px; }
.gw-item { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; color: var(--text); }
.gw-item img { width: 18px; height: 18px; object-fit: contain; }
.gw-when { display: block; margin-top: 2px; }
.gw-kv-icon { width: 20px; height: 20px; object-fit: contain; vertical-align: middle; }

/* ═══ Диверсанты в добыче из контейнера ═══ */
.loot-sabs { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; justify-content: center; }
.loot-sab { text-align: center; }
.loot-sab .ic-sab { display: block; margin: 0 auto 2px; }

/* ═══ Окно обновления (пост «показать окном») ═══ */
.news-popup-box { max-width: 560px; width: 94vw; max-height: 86vh; display: flex; flex-direction: column; }
.news-popup-head { display: flex; gap: 10px; align-items: center; padding-bottom: 8px;
  border-bottom: 1px solid var(--border); }
.news-popup-title { font-weight: 700; font-size: 16px; color: var(--gold); }
.news-popup-body { overflow-y: auto; text-align: left; padding: 6px 2px 2px; flex: 1; }
/* Баннер внутри окна не должен занимать весь экран: окно — анонс, а не галерея */
.news-popup-body img { max-height: 42vh; object-fit: contain; }

/* ═══ Шкала заданий приглашений ═══ */
/* Десять баллов во всю ширину: полоса заполнения, под ней иконки наград.
   На узком экране ряд прокручивается вбок — ужимать иконки до нечитаемых
   точек хуже, чем дать провести пальцем. */
.rq-card { padding-bottom: 10px; }
.rq-head { font-size: 13px; margin: 2px 0 6px; }
.rq-bar { height: 10px; border-radius: 6px; background: rgba(255,255,255,.08);
  border: 1px solid var(--border); overflow: hidden; }
.rq-fill { height: 100%; background: linear-gradient(90deg, var(--orange), var(--gold));
  transition: width .4s ease; }
.rq-steps { display: flex; gap: 4px; margin-top: 6px; overflow-x: auto; padding-bottom: 4px; }
.rq-step { flex: 1 0 auto; min-width: 44px; text-align: center; cursor: pointer;
  border: 1px solid var(--border); border-radius: 8px; padding: 4px 2px;
  background: rgba(255,255,255,.03); position: relative; }
.rq-step.is-ready { border-color: var(--gold); box-shadow: 0 0 6px rgba(255,200,80,.35); }
.rq-step.is-claimed { opacity: .55; }
.rq-ic { font-size: 18px; line-height: 1.1; }
.rq-num { font-size: 10px; color: var(--dim); }
.rq-tick { position: absolute; top: -6px; right: -4px; font-size: 12px; color: var(--green); }
.rq-hint { margin-top: 4px; min-height: 16px; }
.rq-tasks { margin-top: 8px; border-top: 1px solid var(--border); padding-top: 6px; }
.rq-share { display: flex; gap: 6px; margin-top: 8px; }
.rq-share-step { flex: 1; text-align: center; border: 1px solid var(--border);
  border-radius: 8px; padding: 6px 2px; background: rgba(255,255,255,.03); }
.rq-share-step.is-ready { border-color: var(--gold); color: var(--gold); }

/* Баннер раздела приглашений: во всю ширину карточки, край в край.
   Снизу затемнение — иначе светлый закат на картинке упирается в
   текст и он теряется. */
.ref-hero { position: relative; margin: -10px -12px 10px; overflow: hidden;
  border-radius: 6px 6px 0 0; line-height: 0; }
.ref-hero img { width: 100%; height: auto; display: block; }
.ref-hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 45%; background: linear-gradient(180deg, transparent, var(--panel)); pointer-events: none; }
.ref-hero-cap { position: absolute; left: 0; right: 0; bottom: 6px; z-index: 1;
  text-align: center; font-size: 13px; line-height: 1.2; letter-spacing: .5px;
  color: var(--gold); text-shadow: 0 2px 6px rgba(0,0,0,.8); }
/* ═══ Приглашения: ссылка и QR ═══ */
/* Карточка «поделиться» собрана в один блок: QR сверху, под ним ссылка
   и кнопки. Раньше ссылка, код и QR стояли тремя отдельными карточками
   и экран разъезжался. */
.ref-share { text-align: center; }
.ref-qr { display: flex; justify-content: center; margin-bottom: 10px; }
.ref-qr-img { width: 180px; height: 180px; image-rendering: pixelated; border-radius: 10px;
  border: 4px solid #fff; background: #fff; }
.ref-share input { text-align: center; font-size: 12px; }
/* Иконка награды: картинки предметов крупные, монета и купюра — обычные */
.rq-img { object-fit: contain; vertical-align: middle; }
.rq-emoji { font-size: 22px; line-height: 1; }
/* У VIP картинки в игре нет — золотая надпись вместо неё */
.rq-badge { display: inline-block; padding: 2px 8px; border: 1px solid var(--gold);
  border-radius: 6px; color: var(--gold); font-weight: 700; font-size: 13px; letter-spacing: 1px; }

/* ═══ Карточка задания ═══ */
/* Каждое задание — в своей рамке, с полосой прогресса: списком в столбик
   они сливались в сплошную простыню, и понять, где кончается одно и
   начинается другое, было нельзя. */
.rq-item { border: 1px solid var(--border); border-radius: 10px; padding: 8px 10px;
  margin-top: 8px; background: rgba(255,255,255,.03); }
.rq-item.is-done { border-color: rgba(255,200,80,.45); }
.rq-item-head { display: flex; align-items: center; gap: 6px; }
.rq-item-name { font-size: 15px; font-weight: 600; line-height: 1.25; }
.rq-item.is-done .rq-item-name { color: var(--gold); }
.rq-item-note { font-size: 12.5px; color: var(--dim); margin-top: 2px; }
.rq-item-reward { display: flex; align-items: center; gap: 8px; margin-top: 8px;
  padding-top: 6px; border-top: 1px dashed rgba(255,255,255,.08); font-size: 13.5px; }

/* Полоса прогресса внутри задания */
.rq-line { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.rq-line-who { flex: 0 0 auto; min-width: 74px; font-size: 12.5px; color: var(--dim);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rq-line-bar { flex: 1; height: 8px; border-radius: 5px; background: rgba(255,255,255,.08);
  border: 1px solid var(--border); overflow: hidden; }
.rq-line-fill { height: 100%; background: linear-gradient(90deg, var(--orange), var(--gold)); }
.rq-line-fill.is-done { background: var(--green, #2ecc40); }
.rq-line-num { flex: 0 0 auto; font-size: 12.5px; white-space: nowrap; color: var(--dim); }

/* ═══ Чат: обращение ко мне и листалка истории ═══ */
/* Игрок не должен вычитывать своё имя в потоке чужих реплик: сообщение
   с обращением к нему подсвечено полосой, а сам позывной — цветом. */
.chat-msg-tome {
  border-left: 2px solid var(--orange-1);
  padding-left: 6px;
  background: rgba(192, 122, 22, .07);
  border-radius: 6px;
}
.chat-me {
  color: var(--orange-1);
  font-weight: bold;
  background: rgba(192, 122, 22, .14);
  border-radius: 4px;
  padding: 0 3px;
}
.chat-mention-tools { display:flex; justify-content:flex-end; }
.chat-mention-jump { min-height:44px; max-width:100%; margin-bottom:8px; white-space:normal; border-color:var(--gold); color:var(--gold); }
.chat-mention-jump[hidden] { display:none; }
.chat-msg-found { outline:2px solid var(--gold); outline-offset:-2px; background:rgba(192,122,22,.16); scroll-margin-block:12px; }
.chat-pager {
  display: flex; flex-wrap: wrap; gap: 4px; align-items: center;
  justify-content: center;
}
.chat-page { min-width: 30px; padding: 3px 7px; font-size: 13px; }
.chat-page-note { margin-left: 6px; white-space: nowrap; }

/* ── Цели: союзник из вашего альянса ───────────────────────────── */
/* Ник чуть другого, спокойного цвета — отличим, но не кричит. */
.opp-ally { color: #9fd39a; }

/* ── Социальные отметки игроков ────────────────────────────────── */
.relation-badge {
  display:inline-flex; align-items:center; margin-left:5px; padding:1px 5px;
  border-radius:4px; font-size:9px; line-height:1.4; font-weight:800;
  letter-spacing:.08em; vertical-align:middle; border:1px solid currentColor;
}
.relation-friend { color:#79d9cb; background:rgba(57,177,159,.12); }
.relation-blocked { color:#ff7468; background:rgba(210,53,45,.13); }
.relation-name-friend { color:#a8e9df !important; }
.relation-name-blocked { color:#d88982 !important; text-decoration:line-through; text-decoration-thickness:1px; }
.relation-row-friend { border-left:3px solid #4cb6a7; }
.relation-row-blocked { border-left:3px solid #d54a42; background:rgba(180,42,35,.05); }
.social-list-tabs { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:10px 0; }

/* ── Личный блокнот ────────────────────────────────────────────── */
.notebook-compose textarea { width:100%; min-height:130px; box-sizing:border-box; resize:vertical; }
.note-compose-actions { display:flex; flex-wrap:wrap; gap:8px; }
.note-color-label { display:flex; align-items:center; gap:10px; margin:10px 0 7px; color:var(--dim); font-size:13px; }
.note-color-label select { flex:1; }
.notebook-list-head { display:flex; align-items:center; justify-content:space-between; margin:14px 3px 7px; }
.note-entry { position:relative; overflow:hidden; }
.note-entry::before { content:""; position:absolute; inset:0 auto 0 0; width:3px; background:currentColor; opacity:.8; }
.note-entry-head { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:7px; }
.note-entry-date { min-width:0; color:var(--dim); font-size:11px; }
.note-entry-text { white-space:pre-wrap; overflow-wrap:anywhere; line-height:1.5; }
.note-entry-actions { flex:none; display:flex; align-items:center; gap:5px; }
.note-icon-btn {
  display:inline-grid; place-items:center; width:27px; height:27px; padding:0;
  border:1px solid rgba(218,180,72,.3); border-radius:7px; cursor:pointer;
  color:#d8bd69; background:linear-gradient(145deg,rgba(52,64,36,.92),rgba(21,28,17,.96));
  box-shadow:inset 0 1px rgba(255,255,255,.04); transition:border-color .15s, transform .15s, background .15s;
}
.note-icon-btn svg { width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.note-icon-btn:hover { transform:translateY(-1px); border-color:var(--gold); background:rgba(218,180,72,.14); }
.note-icon-btn:focus-visible { outline:2px solid var(--gold); outline-offset:2px; }
.note-icon-btn:disabled { opacity:.45; cursor:default; transform:none; }
.note-icon-delete { color:#f07a70; border-color:rgba(218,75,66,.32); }
.note-icon-delete:hover { border-color:#e45b51; background:rgba(218,75,66,.14); }
.note-white { color:#f3f3ea; }
.note-black { color:#181818 !important; background:#eee7d7 !important; }
.note-black .note-entry-date { color:#665f54; }
.note-blue { color:#79bfff; background:linear-gradient(90deg,rgba(39,111,172,.12),var(--card)); }
.note-red { color:#ff8178; background:linear-gradient(90deg,rgba(172,52,46,.12),var(--card)); }
.note-green { color:#86dc80; background:linear-gradient(90deg,rgba(58,137,54,.12),var(--card)); }
.note-editor.note-black { color:#181818 !important; background:#eee7d7 !important; }
.notebook-pager, .hall-pager { display:flex; justify-content:center; align-items:center; gap:10px; margin:12px 0; }

/* ── Зал Славы легионов ───────────────────────────────────────── */
.hall-sort { display:flex; align-items:center; justify-content:flex-end; gap:8px; margin:10px 0; color:var(--dim); font-size:12px; }
.hall-head { display:grid; grid-template-columns:1fr 1fr; gap:8px; color:var(--dim); font-size:10px; text-transform:uppercase; letter-spacing:.08em; padding:0 10px 5px 48px; }
.hall-head span:last-child { text-align:right; }
.hall-row { width:100%; display:grid; grid-template-columns:34px minmax(0,1fr) minmax(170px,1fr); gap:8px; align-items:center;
  text-align:left; color:var(--text); background:rgba(255,255,255,.025); border:1px solid var(--border); border-radius:8px; padding:8px; margin:5px 0; cursor:pointer; }
.hall-row:hover { border-color:var(--gold); background:rgba(220,177,73,.07); }
.hall-place { display:grid; place-items:center; width:28px; height:28px; border:1px solid var(--gold); border-radius:50%; color:var(--gold); font-weight:800; }
.hall-main, .hall-stats { min-width:0; display:flex; flex-direction:column; gap:2px; }
.hall-main b { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--gold); }
.hall-main small, .hall-stats small { color:var(--dim); }
.hall-stats { text-align:right; }
.legion-sanctions-info { border-color:rgba(214,174,69,.55); background:linear-gradient(135deg,rgba(214,174,69,.08),var(--card)); }
.legion-sanction-row { border-left:3px solid var(--gold); }
.legion-sanction-row .sanc-toggle { cursor:pointer; text-decoration:underline; color:var(--orange-1); }
.legion-member-link {
  display:inline; margin:0; padding:0; border:0; color:inherit; background:none;
  font:inherit; text-align:left; cursor:pointer; text-decoration:none;
}
.legion-member-link:hover { color:var(--gold); text-decoration:underline; }
.legion-member-link:focus-visible { outline:1px solid var(--gold); outline-offset:2px; border-radius:2px; }
.legion-public-member .k { min-width:0; }
.legion-public-pager { display:flex; align-items:center; justify-content:center; gap:9px; margin-top:9px; padding-top:8px; border-top:1px solid var(--border-dim); }
.legion-public-pager .btn { min-width:34px; padding:5px 10px; }
@media (max-width:560px) {
  .hall-head { display:none; }
  .hall-row { grid-template-columns:30px minmax(0,1fr); }
  .hall-stats { grid-column:2; text-align:left; }
  .social-list-tabs { grid-template-columns:1fr; }
}

/* Плашка согласия на счётчик VK Рекламы (public/js/pixel.js). Внизу
   экрана и не модальная: игра под ней работает, отказ ничего не ломает. */
.pix-consent {
  position: fixed; left: 50%; bottom: 10px; transform: translateX(-50%); z-index: 90;
  width: min(560px, calc(100vw - 20px)); padding: 10px 12px; border-radius: 10px;
  background: rgba(20, 27, 13, .97); border: 1px solid var(--border);
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between;
  font-size: 12.5px; color: var(--dim); box-shadow: 0 4px 18px rgba(0,0,0,.5);
}
.pix-consent a { color: var(--orange-1); }
.pix-consent-btns { display: flex; gap: 6px; }

/* Передышка между волнами: заметный блок, его легко пропустить
   в горячке боя, а решение о лечении надо принять за полминуты */
.cv-pause {
  border: 1px solid var(--gold); border-radius: 8px;
  background: rgba(233,199,92,.1); padding: 8px 10px; margin: 8px 0;
}
.cv-pause-head { font-size: 14px; font-weight: 700; color: var(--gold); }
/* Кнопки лечения НЕ должны выглядеть как «Атаковать»: раньше это был
   тот же .cv-actions — два одинаковых ряда во всю ширину один под
   другим, и промах стоил десять золота */
/* Картинка затишья — ЦЕЛИКОМ, без обрезки. Раньше ей задавалась
   жёсткая высота и object-fit: cover, и от кадра оставалась полоса:
   разведка на гребне обрезана по пояс, колонна уехала за край.
   Вместо подрезки ограничиваем ШИРИНУ — картинка уменьшается вся,
   сохраняя кадр, и не занимает пол-экрана на десктопе. */
.cv-wait-pic {
  margin: 8px auto; border-radius: 8px; overflow: hidden; line-height: 0;
  max-width: 560px;
}
.cv-wait-pic img { width: 100%; height: auto; display: block; }
.cv-heal { display: flex; gap: 8px; flex-wrap: wrap; }
.cv-heal .btn { flex: 0 1 auto; }
/* Мина в списке — самой яркой строкой: её надо заметить и выбрать
   вручную, автоматически цель на неё не переводится */
.cv-name.cv-role-mine {
  color: #ff7a5c; font-weight: 700;
  text-shadow: 0 0 6px rgba(255,90,60,.5);
}

/* ── Нападение террористов: карта секторов ─────────────────────── */
.ta-head { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.ta-event-title { display:flex; align-items:center; gap:10px; min-width:0; }
.ta-event-title > img { width:44px; height:44px; flex:0 0 44px; object-fit:contain; }
.ta-event-title > div { min-width:0; }
.ta-sector-status { border-color:rgba(99,165,72,.42); background:linear-gradient(145deg,rgba(43,76,31,.18),var(--card)); }
.ta-sector-status-head { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.ta-event-token { display:flex; align-items:center; gap:6px; padding:5px 9px; border:1px solid rgba(233,199,92,.35); border-radius:9px; background:rgba(233,199,92,.07); color:var(--gold); }
.ta-token-icon { width:24px; height:24px; object-fit:contain; vertical-align:middle; }
.ta-self-status { display:grid; grid-template-columns:54px minmax(0,1fr); align-items:center; gap:10px; margin-top:10px; padding:9px; border:1px solid rgba(108,196,80,.3); border-radius:9px; background:rgba(35,75,27,.18); }
.ta-self-main { min-width:0; }
.ta-self-main > b,.ta-self-main > small { display:block; }
.ta-self-main > small { margin-top:5px; color:var(--muted); }
.ta-resource-line { display:flex; align-items:center; flex-wrap:wrap; gap:7px 16px; margin-top:4px; font-size:12px; }
.ta-resource-line > span { display:inline-flex; align-items:center; gap:4px; }
.ta-resource-line .ic-health,.ta-resource-line .ic-ammo { width:18px; height:18px; flex:0 0 18px; }
.ta-allies-title { display:flex; align-items:center; gap:7px; margin-top:11px; font-size:12px; color:var(--muted); }
.ta-allies-title > span { min-width:21px; padding:1px 6px; border-radius:10px; text-align:center; background:rgba(108,196,80,.16); color:#b9e99d; }
.ta-alone { grid-column:1 / -1; margin:4px 0; text-align:center; }
.ta-map-card {
  position:relative; left:50%; transform:translateX(-50%);
  width:min(1050px, calc(100vw - 32px));
  margin:10px 0; overflow:hidden; border-radius:12px;
  border:1px solid rgba(190,158,83,.48); background:#11160f;
  box-shadow:0 12px 34px rgba(0,0,0,.32);
}
.ta-map { position:relative; width:100%; aspect-ratio:1 / 1; line-height:0; user-select:none; }
.ta-map-bg { display:block; width:100%; height:100%; object-fit:cover; }
.ta-zone {
  position:absolute; z-index:2; display:block; pointer-events:none;
  border-radius:46%; box-sizing:border-box;
  background:radial-gradient(ellipse, rgba(255,255,255,.12), transparent 68%);
}
.ta-zone-entry { border:3px solid rgba(255,66,55,.9); box-shadow:inset 0 0 24px rgba(255,45,35,.38), 0 0 15px rgba(255,45,35,.8); }
.ta-zone-base { border:3px solid rgba(65,221,121,.9); box-shadow:inset 0 0 24px rgba(45,220,110,.32), 0 0 15px rgba(45,220,110,.75); }
.ta-zone-current { border:3px solid rgba(255,212,95,.95); box-shadow:inset 0 0 28px rgba(255,212,95,.38), 0 0 17px rgba(255,212,95,.85); animation:ta-current 1.5s ease-in-out infinite; }
@keyframes ta-current { 50% { filter:brightness(1.35); } }
.ta-enemy-routes { position:absolute; inset:0; z-index:3; width:100%; height:100%; pointer-events:none; overflow:visible; }
.ta-enemy-route line {
  stroke:#ff332d; stroke-width:7; stroke-linecap:round; stroke-dasharray:15 10;
  opacity:.96;
}
.ta-enemy-route path { fill:#ff332d; }
.ta-enemy-route text {
  fill:#fff; stroke:#6d0906; stroke-width:5; paint-order:stroke fill;
  font:bold 25px sans-serif; text-anchor:middle; dominant-baseline:central;
}
.ta-arrow-key { color:#ff615b; font-weight:700; }
.ta-legend {
  position:absolute; z-index:6; top:8px; left:8px; display:flex; gap:8px;
  padding:5px 7px; border-radius:8px; background:rgba(8,11,8,.82);
  font-size:11px; color:#e8e4d7; backdrop-filter:blur(3px);
}
.ta-legend span { white-space:nowrap; }
.ta-dot { display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:3px; }
.ta-dot.current { background:#ffd45f; box-shadow:0 0 6px #ffd45f; }
.ta-dot.entry { background:#ff4a41; box-shadow:0 0 6px #ff4a41; }
.ta-dot.base { background:#41dd79; box-shadow:0 0 6px #41dd79; }
.ta-label {
  position:absolute; z-index:4; transform:translate(-50%,-50%); min-width:70px;
  max-width:118px; padding:4px 5px; border:1px solid rgba(255,255,255,.18);
  border-radius:7px; color:#f4f0df; background:rgba(11,15,11,.78);
  font:inherit; line-height:1.12; text-align:center; cursor:default;
  text-shadow:0 1px 2px #000; box-shadow:0 2px 7px rgba(0,0,0,.38);
}
.ta-label b { display:block; font-size:11px; }
.ta-label span { display:block; margin-top:2px; font-size:10px; color:#d8d5ca; }
.ta-bosses { display:flex; justify-content:center; gap:2px; margin-top:3px; }
.ta-bosses img {
  width:24px; height:24px; object-fit:contain; border:1px solid #f4b83f;
  border-radius:50%; background:rgba(35,15,5,.92); box-shadow:0 0 7px rgba(255,81,53,.9);
}
.ta-label:disabled { opacity:.84; }
.ta-label.is-current { border-color:#ffd45f; box-shadow:0 0 10px rgba(255,212,95,.72); }
.ta-label.is-entry { border-color:#ff554c; }
.ta-label.is-base { border-color:#45db7b; }
.ta-label.is-neighbor {
  cursor:pointer; border-color:#66b9ff; background:rgba(15,47,67,.9);
  animation:ta-neighbor 1.7s ease-in-out infinite;
}
@keyframes ta-neighbor { 50% { box-shadow:0 0 11px rgba(78,177,255,.68); } }
.ta-orders .name { margin-bottom:7px; }
.ta-moves { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin-top:8px; }
.ta-move-btn { display:flex; align-items:center; gap:8px; text-align:left; min-width:0; }
.ta-move-btn > span:last-child { min-width:0; }
.ta-move-btn b, .ta-move-btn small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ta-move-btn small { margin-top:3px; color:var(--muted); }
.ta-arrow { color:#6fc5ff; font-size:20px; }
.ta-moving { display:grid; grid-template-columns:auto minmax(70px,1fr) auto; gap:9px; align-items:center; font-size:12px; }
.ta-progress { height:9px; overflow:hidden; border-radius:8px; background:rgba(255,255,255,.1); }
.ta-progress i { display:block; width:0; height:100%; background:linear-gradient(90deg,#66b9ff,#ffd45f); transition:width .12s linear; }
.ta-rule { margin-top:10px; padding:7px 9px; border-left:3px solid #df4b41; background:rgba(160,35,30,.12); color:#f0b4ae; font-size:12px; }
.ta-log { max-height:180px; overflow:auto; margin-top:7px; font-size:12px; line-height:1.45; }
.ta-log span { color:#778070; margin-right:5px; }
.ta-hp { height:8px; overflow:hidden; border-radius:8px; background:rgba(255,255,255,.1); margin-top:4px; }
.ta-hp i { display:block; height:100%; background:linear-gradient(90deg,#bf2f2a,#ef6a43); transition:width .2s ease; }
.ta-hp i.ally { background:linear-gradient(90deg,#419c3c,#82d855); }
.ta-hp i.base { background:linear-gradient(90deg,#4d86bc,#75cce8); }
.ta-battle { border-color:rgba(206,63,47,.55); background:linear-gradient(180deg,rgba(55,18,13,.24),rgba(10,15,9,.96)); }
.ta-battle-title { display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:12px; }
.ta-battle-title b,.ta-battle-title small { display:block; }
.ta-battle-title small { color:var(--muted); margin-top:3px; }
.ta-me-combat { display:grid; grid-template-columns:54px minmax(0,1fr); align-items:center; gap:10px; padding:9px; border:1px solid rgba(108,196,80,.3); border-radius:9px; background:rgba(35,75,27,.18); }
.ta-me-combat b,.ta-me-combat span,.ta-me-combat small { display:block; }
.ta-me-combat small { margin-top:4px; color:var(--muted); }
.ta-avatar { display:block; width:46px; height:46px; border-radius:50%; background-position:center; background-size:cover; border:2px solid #71bd55; }
.ta-avatar-letter { display:grid; place-items:center; background:#26351f; color:#dff5cb; font-weight:800; font-style:normal; font-size:20px; }
.ta-targets { display:grid; grid-template-columns:repeat(auto-fill,minmax(170px,1fr)); gap:8px; margin:12px 0; }
.ta-target { display:grid; grid-template-columns:58px minmax(0,1fr); align-items:center; gap:8px; padding:7px; border:1px solid rgba(196,73,57,.35); border-radius:9px; color:var(--text); background:rgba(38,18,14,.72); text-align:left; cursor:pointer; }
.ta-target:hover,.ta-target.is-selected { border-color:#ffbd4a; box-shadow:0 0 10px rgba(255,108,57,.35); }
.ta-target img { width:58px; height:58px; object-fit:contain; }
.ta-target b,.ta-target small { display:block; }
.ta-target small { color:var(--muted); margin-top:3px; }
.ta-target-count { display:inline-block; margin-left:4px; padding:1px 6px; border-radius:10px;
  color:#ffe28b; background:rgba(190,90,28,.38); border:1px solid rgba(255,190,74,.45);
  font-style:normal; white-space:nowrap; }
.ta-fire { width:100%; min-height:44px; }
.ta-allies { display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:7px; margin-top:7px; }
.ta-ally { display:grid; grid-template-columns:38px minmax(0,1fr); align-items:center; gap:7px; padding:6px; border-radius:8px; background:rgba(35,75,27,.16); }
.ta-ally .ta-avatar { width:34px; height:34px; }
.ta-ally b,.ta-ally small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ta-ally small { color:var(--muted); }
.ta-shop-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:8px; margin-top:9px; }
.ta-shop-item { display:grid; grid-template-columns:52px minmax(0,1fr); align-items:center; gap:8px; padding:7px; border:1px solid var(--border); border-radius:9px; color:var(--text); background:var(--card2); text-align:left; cursor:pointer; }
.ta-shop-item:disabled { opacity:.55; cursor:default; }
.ta-shop-item img { width:52px; height:52px; object-fit:contain; }
.ta-shop-item b,.ta-shop-item small { display:block; }
.ta-shop-item small { color:var(--gold); margin-top:3px; }
.ta-shop-service { cursor:default; }
.ta-shop-pay { display:flex; flex-wrap:wrap; gap:6px; margin-top:7px; }
.ta-shop-pay .btn { min-height:32px; padding:5px 9px; font-size:12px; }
.ta-shop-balance { display:flex; align-items:center; flex-wrap:wrap; gap:5px; }
.ta-shop-balance .ta-token-icon,.ta-shop-balance .ic-dollar { width:19px; height:19px; }
.ta-respawn { padding:30px 12px; border-color:rgba(190,52,44,.45); }
.ta-respawn-icon,.ta-event-closed > img { display:block; width:62px; height:62px; margin:0 auto 8px; object-fit:contain; }

/* Итоги нападения доступны десять минут: этого хватает забрать и
   обсудить результат, но завершённое событие не висит в разделе вечно. */
.ta-result-scene { position:relative; overflow:hidden; margin-bottom:10px; border-radius:12px; border:1px solid var(--border); }
.ta-result-scene img { display:block; width:100%; max-height:360px; object-fit:cover; }
.ta-result-scene > div { position:absolute; inset:auto 0 0; padding:28px 14px 13px; text-align:center; background:linear-gradient(transparent,rgba(5,8,4,.94)); }
.ta-result-scene b,.ta-result-scene span { display:block; }
.ta-result-scene b { font-size:22px; letter-spacing:.04em; color:#f2d06b; text-shadow:0 2px 5px #000; }
.ta-result-scene span { margin-top:3px; font-size:12px; color:#eee; }
.ta-result-scene.is-loss b { color:#ff7a68; }
.ta-result-time { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:4px 8px; text-align:center; border-color:rgba(233,199,92,.38); }
.ta-result-time b { color:var(--gold); }
.ta-result-time small { color:var(--muted); }
.ta-result-summary { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:7px; }
.ta-result-summary > span { min-width:0; padding:8px 5px; text-align:center; border-radius:8px; background:rgba(255,255,255,.035); }
.ta-result-summary small,.ta-result-summary b { display:block; }
.ta-result-summary small { color:var(--dim); font-size:10px; }
.ta-result-summary b { margin-top:3px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--gold); }
.ta-result-mine > div:nth-child(2) { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px; margin-top:8px; }
.ta-result-mine > div:nth-child(2) > span { padding:7px 5px; text-align:center; border-radius:7px; background:rgba(255,255,255,.035); font-size:12px; }
.ta-result-mine b { display:block; margin-top:2px; color:var(--gold); }
.ta-result-reward { border-color:var(--gold); background:rgba(233,199,92,.05); }
.ta-reward-sources { display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:8px; margin-top:9px; }
.ta-reward-source { min-width:0; padding:9px; border:1px solid var(--border); border-radius:9px; background:rgba(8,12,7,.58); }
.ta-reward-top { border-color:rgba(233,199,92,.52); background:rgba(233,199,92,.06); }
.ta-reward-source-head b,.ta-reward-source-head small { display:block; }
.ta-reward-source-head b { color:var(--gold); }
.ta-reward-source-head small { margin-top:2px; color:var(--muted); }
.ta-result-currencies { display:flex; flex-wrap:wrap; gap:7px; margin-top:9px; }
.ta-result-currency { display:inline-flex; align-items:center; gap:4px; min-width:0; white-space:nowrap; }
.ta-result-currencies > .ta-result-currency { padding:8px 10px; border:1px solid var(--border); border-radius:8px; background:#0e1209; }
.ta-result-currency .ic-gold,.ta-result-currency .ic-dollar,.ta-result-currency .ic-crest,.ta-result-currency .ic-token { width:18px; height:18px; flex:0 0 18px; }
.ta-result-currency b { overflow:hidden; text-overflow:ellipsis; color:var(--gold); }
.ta-result-items { display:flex; flex-wrap:wrap; gap:7px; margin-top:9px; }
.ta-result-item { position:relative; width:74px; padding:5px 4px 4px; text-align:center; border:1px solid var(--border); border-radius:8px; background:#0e1209; }
.ta-result-item img,.ta-result-item > i { display:block; width:52px; height:52px; margin:auto; object-fit:contain; font-size:34px; line-height:52px; font-style:normal; }
.ta-result-item > b { position:absolute; top:3px; right:3px; padding:0 4px; border-radius:5px; background:rgba(5,8,4,.88); color:var(--gold); font-size:11px; }
.ta-result-item small { display:block; overflow:hidden; margin-top:2px; color:var(--dim); font-size:9px; text-overflow:ellipsis; white-space:nowrap; }
.ta-result-list { margin-top:8px; }
.ta-result-row { display:grid; grid-template-columns:28px minmax(100px,1fr) auto auto minmax(150px,1.35fr); align-items:center; gap:7px; padding:7px 5px; border-top:1px solid var(--border-dim); }
.ta-result-row:first-child { border-top:0; }
.ta-result-row.is-me { background:rgba(233,199,92,.08); }
.ta-result-place { text-align:center; color:var(--gold); font-weight:800; }
.ta-result-player { min-width:0; }
.ta-result-player b,.ta-result-player small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ta-result-player small { color:var(--dim); font-size:10px; }
.ta-result-stat { white-space:nowrap; font-size:12px; text-align:right; }
.ta-result-row-reward { display:flex; align-items:center; flex-wrap:wrap; gap:3px; min-width:0; }
.ta-row-reward-source { display:flex; align-items:center; flex-wrap:wrap; gap:3px; min-width:0; padding:3px 5px; border:1px solid rgba(255,255,255,.08); border-radius:6px; background:rgba(255,255,255,.025); }
.ta-row-reward-source > small { width:100%; color:var(--gold); font-size:9px; }
.ta-result-row-reward .ta-result-currency { font-size:11px; }
.ta-result-row-reward .ta-result-currency .ic-gold,.ta-result-row-reward .ta-result-currency .ic-dollar,
.ta-result-row-reward .ta-result-currency .ic-crest,.ta-result-row-reward .ta-result-currency .ic-token { width:14px; height:14px; flex-basis:14px; }
.ta-result-medal { margin-right:2px; }
.ta-result-chips { display:inline-flex; flex-wrap:wrap; gap:3px; }
.ta-result-chip { display:inline-flex; align-items:center; gap:2px; padding:1px 4px 1px 2px; border:1px solid var(--border); border-radius:6px; background:rgba(255,255,255,.055); }
.ta-result-chip img,.ta-result-chip > i { width:24px; height:24px; object-fit:contain; font-size:16px; line-height:24px; font-style:normal; text-align:center; }
.ta-result-chip b { color:var(--gold); font-size:10px; }
.ta-result-breakdown { display:flex; flex-wrap:wrap; gap:5px; margin-top:8px; }
.ta-result-enemy { display:inline-flex; align-items:center; gap:5px; min-width:0; padding:3px 6px 3px 3px; border:1px solid var(--border); border-radius:7px; background:rgba(255,255,255,.035); }
.ta-result-enemy.is-boss { border-color:rgba(224,174,66,.5); background:rgba(224,174,66,.07); }
.ta-result-enemy > img,.ta-result-enemy > i { width:34px; height:34px; flex:0 0 34px; object-fit:contain; font-style:normal; line-height:34px; text-align:center; }
.ta-result-enemy > span { min-width:0; }
.ta-result-enemy b,.ta-result-enemy small { display:block; white-space:nowrap; }
.ta-result-enemy b { overflow:hidden; max-width:125px; color:var(--text); font-size:10px; text-overflow:ellipsis; }
.ta-result-enemy small { color:var(--dim); font-size:9px; }
.ta-result-row-breakdown { display:flex; grid-column:2 / -1; flex-wrap:wrap; gap:3px; min-width:0; padding-bottom:2px; }
.ta-result-row-breakdown .ta-result-enemy { padding:1px 4px 1px 1px; }
.ta-result-row-breakdown .ta-result-enemy > img,.ta-result-row-breakdown .ta-result-enemy > i { width:24px; height:24px; flex-basis:24px; line-height:24px; }
.ta-result-row-breakdown .ta-result-enemy small { font-size:8.5px; }
.ta-chat { margin-top:10px; border-color:rgba(82,146,190,.38); }
.ta-chat-head { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:7px; }
.ta-chat-head > img { width:32px; height:32px; object-fit:contain; }
.ta-chat-box { min-height:150px; max-height:310px; }
.ta-chat-compose { margin-top:7px; }
.ta-chat-reply { width:auto; margin-left:5px; padding:1px 5px; font-size:10px; }
.ta-chat .chat-reply-x { width:auto; padding:3px 7px; font-size:10px; }
.ta-chat .chat-pager { margin-top:6px; }

@media (max-width: 620px) {
  .ta-head { align-items:flex-start; }
  .ta-head .btn { padding:7px 9px; }
  .ta-map-card { width:calc(100vw - 8px); border-radius:9px; }
  .ta-label { min-width:48px; max-width:68px; padding:2px 2px; }
  .ta-label b { font-size:7.5px; }
  .ta-label span { font-size:7px; }
  .ta-bosses { margin-top:1px; }
  .ta-bosses img { width:16px; height:16px; }
  .ta-legend { top:4px; left:4px; right:4px; gap:4px; font-size:8px; flex-wrap:wrap; width:max-content; max-width:calc(100% - 8px); }
  .ta-enemy-route line { stroke-width:9; }
  .ta-enemy-route text { font-size:29px; stroke-width:7; }
  .ta-moves { grid-template-columns:1fr; }
  .ta-moving { grid-template-columns:1fr; text-align:center; }
  .ta-progress { order:3; }
  .ta-targets,.ta-allies,.ta-shop-grid { grid-template-columns:1fr; }
  .ta-battle-title { align-items:flex-start; }
  .ta-result-scene { margin-left:-4px; margin-right:-4px; border-radius:8px; }
  .ta-result-scene img { max-height:245px; }
  .ta-result-scene b { font-size:18px; }
  .ta-result-summary { grid-template-columns:repeat(2,minmax(0,1fr)); gap:5px; }
  .ta-result-mine > div:nth-child(2) { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .ta-result-currencies { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:5px; }
  .ta-result-currencies > .ta-result-currency { padding:6px; }
  .ta-result-item { width:64px; }
  .ta-result-item img,.ta-result-item > i { width:44px; height:44px; line-height:44px; }
  .ta-result-row { grid-template-columns:22px minmax(0,1fr) auto auto; gap:5px; padding:7px 2px; }
  .ta-result-stat { font-size:10.5px; }
  .ta-result-row-reward { grid-column:1 / -1; padding:5px 0 0 27px; border-top:1px dashed rgba(255,255,255,.07); }
  .ta-result-row-breakdown { grid-column:1 / -1; padding-left:27px; }
  .ta-result-breakdown { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
  .ta-result-enemy { width:100%; padding-right:3px; }
  .ta-result-enemy > img,.ta-result-enemy > i { width:30px; height:30px; flex-basis:30px; line-height:30px; }
  .ta-result-enemy b { max-width:105px; }
  .ta-result-row-breakdown { display:flex; }
  .ta-result-row-breakdown .ta-result-enemy { width:auto; }
  .ta-result-chip img,.ta-result-chip > i { width:21px; height:21px; line-height:21px; }
  .ta-event-title > img { width:34px; height:34px; flex-basis:34px; }
  .ta-sector-status-head { align-items:flex-start; }
  .ta-self-status { grid-template-columns:42px minmax(0,1fr); padding:7px; }
  .ta-self-status .ta-avatar { width:38px; height:38px; }
  .ta-resource-line { gap:5px 10px; font-size:10.5px; }
  .ta-self-main > small { font-size:9.5px; }
  .ta-reward-sources { grid-template-columns:1fr; }
  .ta-chat-compose { display:grid; grid-template-columns:auto minmax(0,1fr) auto; }
}
/* ═══ БОЕВЫЕ ВЫЛАЗКИ ═══════════════════════════════════════════════ */
.sorties-shell{display:flex;flex-direction:column;gap:10px}.sorties-hero{min-height:190px;border:1px solid #72651e;border-radius:10px;background-size:cover;background-position:center 60%;padding:24px;display:flex;align-items:flex-end;justify-content:space-between;gap:18px;box-shadow:inset 0 -80px 90px rgba(0,0,0,.45)}
.sorties-hero h2,.sorties-hq-title h3,.sorties-building-detail h3,.sorties-run-head h3,.sorties-create h3{margin:3px 0 5px;color:#f4e7aa;text-transform:uppercase;letter-spacing:.055em}.sorties-hero h2{font-size:28px}.sorties-hero p,.sorties-hq-title p,.sorties-building-detail p,.sorties-run-head p,.sorties-create p{margin:0;color:#c0c8ad;max-width:720px}.sorties-kicker{font-size:11px;font-weight:800;letter-spacing:.16em;color:#d6b840}.sorties-design-note{padding:10px 13px;border:1px solid rgba(211,177,45,.35);border-radius:8px;background:rgba(81,70,20,.16);color:#aeb794;font-size:12px}.sorties-design-note b{color:#e2ca68}
.sorties-create{display:grid;grid-template-columns:minmax(0,1fr) minmax(220px,320px) auto;align-items:end;gap:14px}.sorties-create label,.sorties-leader-tools label{display:flex;flex-direction:column;gap:5px;color:#b1bd9d;font-size:12px}.sorties-create select,.sorties-leader-tools select{margin:0}.sorties-section-title{display:flex;justify-content:space-between;align-items:center;margin:8px 2px}.sorties-section-title b{color:#e8da94;text-transform:uppercase;letter-spacing:.06em}.sorties-section-title span,.sorties-seats{min-width:28px;text-align:center;border-radius:999px;padding:3px 8px;background:#292f16;color:#e9ce59;font-weight:800;font-size:12px}
.sorties-squad-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.sorties-squad{border:1px solid #293719;border-radius:9px;padding:11px;background:linear-gradient(135deg,rgba(20,29,14,.98),rgba(9,13,8,.96));box-shadow:inset 0 1px rgba(255,255,255,.025)}.sorties-squad.is-mine{border-color:#8e7722}.sorties-squad-head{display:flex;justify-content:space-between;gap:8px;align-items:flex-start;padding-bottom:8px;border-bottom:1px solid rgba(139,157,92,.15)}.sorties-squad-head b{color:#f0df95}.sorties-squad-head small{display:block;margin-top:3px;color:#8f9c79}.sorties-roster{display:flex;flex-direction:column;gap:5px;margin:8px 0}.sorties-person{min-height:28px;display:flex;align-items:center;gap:6px;color:#d3d9c3}.sorties-person a{color:#dbe993;text-decoration:none;font-weight:700}.sorties-person a:hover{text-decoration:underline}.sorties-person small{color:#7f8d70}.sorties-person-flag{width:22px;text-align:center}.sorties-leader{margin-left:auto;border-radius:10px;background:#936c18;color:#fff0af;font-size:9px;padding:2px 6px;text-transform:uppercase}.sorties-online{width:7px;height:7px;border-radius:50%;background:#68c851;box-shadow:0 0 6px #68c851}.sorties-apply{width:100%}
.sorties-invites{display:flex;flex-direction:column;gap:7px}.sorties-invite{display:flex;gap:8px;align-items:center;border:1px solid #537d2e;border-radius:8px;padding:9px;background:rgba(42,73,25,.24)}.sorties-invite>div{flex:1}.sorties-invite b{color:#ccec9b}.sorties-invite small{display:block;color:#8fa47b;margin-top:3px}.sorties-leader-tools{display:grid;grid-template-columns:minmax(240px,1fr) auto auto;gap:9px;align-items:end}.sorties-online-list>div:not(.sorties-section-title),.sorties-applications>div:not(.sorties-section-title){display:flex;align-items:center;gap:8px;padding:6px 0;border-top:1px solid rgba(139,157,92,.12)}.sorties-online-list .sorties-person,.sorties-applications .sorties-person{flex:1}.sorties-leave{opacity:.7;align-self:flex-start}
.sorties-hq-shell{border:1px solid #35451e;border-radius:10px;background:linear-gradient(180deg,rgba(17,25,12,.98),rgba(7,11,7,.98));padding:12px}.sorties-hq-title{display:flex;justify-content:space-between;gap:18px;align-items:flex-start;padding:5px 5px 12px}.sorties-hq-title>span{border:1px solid #665a20;border-radius:8px;padding:7px 10px;color:#c0ad61;font-size:11px;background:rgba(80,66,15,.14)}.sorties-buildings{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}.sorties-building{appearance:none;border:1px solid #32431e;border-radius:8px;padding:0 0 9px;overflow:hidden;background:#10170c;color:#dde4cf;text-align:left;cursor:pointer;transition:.16s transform,.16s border-color,.16s filter}.sorties-building:hover{transform:translateY(-2px);border-color:#af8d23;filter:brightness(1.08)}.sorties-building-img{display:block;width:100%;aspect-ratio:1/1;background-repeat:no-repeat}.sorties-building b,.sorties-building small{display:block;padding:0 9px}.sorties-building b{color:#eddb91;margin-top:8px}.sorties-building small{margin-top:4px;color:#829073;line-height:1.35}.sorties-back-hq{margin-bottom:10px}.sorties-building-detail{display:grid;grid-template-columns:minmax(230px,38%) 1fr;gap:16px;align-items:center}.sorties-building-detail-img{aspect-ratio:1/1;border-radius:9px;background-repeat:no-repeat;border:1px solid #4c552c}.sorties-plans{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:11px}.sorties-plans>div{border:1px solid #2d3c1d;background:#0d130a;border-radius:7px;padding:10px}.sorties-plans b,.sorties-plans span{display:block}.sorties-plans b{color:#dacc82}.sorties-plans span{color:#758169;font-size:11px;margin-top:4px}.sorties-vehicles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:10px}.sorties-vehicle{border:1px solid #33441f;border-radius:8px;overflow:hidden;background:#0e140b;padding-bottom:9px}.sorties-vehicle-img{aspect-ratio:1/1;background-repeat:no-repeat}.sorties-vehicle b,.sorties-vehicle small,.sorties-vehicle span{display:block;padding:0 9px}.sorties-vehicle b{color:#eddb91;margin-top:7px}.sorties-vehicle small{color:#98a487;margin-top:3px}.sorties-vehicle span{color:#82743a;font-size:10px;margin-top:6px}
.sorties-run{border:1px solid #36451f;border-radius:10px;overflow:hidden;background:#090d08}.sorties-run-head{display:flex;justify-content:space-between;gap:15px;align-items:center;padding:13px;background:linear-gradient(90deg,#151e10,#0c110a)}.sorties-resource-grid{display:grid;grid-template-columns:repeat(2,minmax(125px,1fr));gap:6px;min-width:330px}.sorties-resource-grid span{border:1px solid #34431f;border-radius:6px;padding:6px 8px;background:#0b1008}.sorties-resource-grid b,.sorties-resource-grid em{display:block}.sorties-resource-grid b{font-size:10px;text-transform:uppercase;color:#93a17e}.sorties-resource-grid em{font-style:normal;color:#e0ce7e;margin-top:2px}.sorties-live-layout{display:grid;grid-template-columns:minmax(0,1fr) 320px;align-items:start}.sorties-map-frame{max-height:66vh;overflow:auto;background:#050705;padding:8px;scrollbar-color:#6d6228 #10150d}.sorties-map{--sorties-cell:clamp(42px,5vw,62px);display:grid;grid-template-columns:repeat(var(--sorties-cols),var(--sorties-cell));grid-template-rows:repeat(var(--sorties-rows),var(--sorties-cell));width:max-content;min-width:100%;background-size:100% 100%;background-repeat:no-repeat;background-position:center;border:1px solid #4a4c2a;box-shadow:0 0 30px rgba(0,0,0,.65);position:relative}.sorties-cell{position:relative;border:1px solid rgba(218,202,127,.17);background:rgba(7,11,7,.12);overflow:visible}.sorties-cell.is-fog{background:rgba(2,3,2,.91);box-shadow:inset 0 0 16px #000}.sorties-cell.is-fog>*{display:none}.sorties-cell.is-visible:not(.is-visited){background:rgba(8,12,8,.47)}.sorties-cell.is-visited{background:rgba(169,151,65,.06);border-color:rgba(231,207,96,.25)}.sorties-event-pin{position:absolute;inset:7%;border-radius:50%;background-repeat:no-repeat;box-shadow:0 2px 8px #000,0 0 0 2px rgba(217,190,76,.65);z-index:2}.sorties-start,.sorties-command,.sorties-evac{position:absolute;left:4px;bottom:3px;z-index:3;font-size:13px;text-shadow:0 1px 3px #000}.sorties-start{color:#71b7e8}.sorties-command{color:#ffd95b}.sorties-evac{color:#b9f3ac;border:1px solid #b9f3ac;border-radius:50%;width:19px;height:19px;text-align:center;line-height:17px;font-weight:900}.sorties-markers{position:absolute;inset:-13% -12%;display:flex;align-items:end;justify-content:center;z-index:5;pointer-events:none}.sorties-markers img{width:58%;height:74%;object-fit:contain;filter:drop-shadow(0 2px 3px #000)}.sorties-markers img+img{width:45%;height:58%;margin-left:-22%;transform:translateX(18%)}
.sorties-route-panel{padding:12px;border-left:1px solid #2d391d;max-height:66vh;overflow:auto}.sorties-move-title{text-align:center;color:#decc7e;font-weight:800;text-transform:uppercase;font-size:11px;letter-spacing:.08em}.sorties-dpad{display:grid;grid-template-columns:repeat(3,46px);grid-template-rows:repeat(3,40px);justify-content:center;margin:8px auto}.sorties-dpad button{border:1px solid #75641f;background:linear-gradient(#313c1b,#18200f);color:#f1da72;font-size:24px;border-radius:7px;cursor:pointer}.sorties-dpad button:hover{filter:brightness(1.2)}.sorties-dpad button:disabled{opacity:.28;cursor:not-allowed}.sorties-dpad button:first-child{grid-column:2}.sorties-dpad button:nth-child(2){grid-column:1;grid-row:2}.sorties-dpad span{grid-column:2;grid-row:2;text-align:center;line-height:40px;color:#52613b}.sorties-dpad button:nth-child(4){grid-column:3;grid-row:2}.sorties-dpad button:last-child{grid-column:2;grid-row:3}.sorties-risk-legend{display:flex;flex-wrap:wrap;gap:4px;margin:9px 0}.sorties-risk-legend span{padding:3px 6px;border-radius:8px;font-size:9px;text-transform:uppercase;font-weight:800}.risk-safe{background:#284a22;color:#b9e2a6}.risk-danger{background:#5a241b;color:#f2a38d}.risk-unknown{background:#4a421e;color:#ead682}.risk-scouted{background:#1d4053;color:#9edaf2}.sorties-encounter-now{border:1px solid #725d1e;border-radius:8px;overflow:hidden;background:#12170d}.sorties-event-thumb{aspect-ratio:3/2;background-repeat:no-repeat}.sorties-encounter-now>div:last-child{padding:8px}.sorties-encounter-now b{color:#efd97d}.sorties-encounter-now p{margin:4px 0;color:#aab397;font-size:11px}.sorties-encounter-now span{color:#86773b;font-size:10px}.sorties-log{margin-top:10px;display:flex;flex-direction:column;gap:4px}.sorties-log>div{font-size:10px;color:#8e9a7e;border-top:1px solid rgba(130,145,91,.1);padding-top:4px}.sorties-log time{color:#c1ae5f;margin-right:6px}
@media(max-width:780px){.sorties-hero{min-height:155px;padding:15px;align-items:flex-start;flex-direction:column;justify-content:flex-end}.sorties-hero h2{font-size:23px}.sorties-create{grid-template-columns:1fr}.sorties-squad-list{grid-template-columns:1fr}.sorties-leader-tools{grid-template-columns:1fr}.sorties-buildings{grid-template-columns:repeat(2,minmax(0,1fr))}.sorties-building-detail{grid-template-columns:1fr}.sorties-building-detail-img{max-width:320px;width:100%;margin:auto}.sorties-plans{grid-template-columns:1fr}.sorties-vehicles{grid-template-columns:repeat(2,minmax(0,1fr))}.sorties-run-head{align-items:stretch;flex-direction:column}.sorties-resource-grid{min-width:0}.sorties-live-layout{grid-template-columns:1fr}.sorties-map-frame{max-height:58vh}.sorties-map{--sorties-cell:44px;min-width:0}.sorties-route-panel{border-left:0;border-top:1px solid #2d391d;max-height:none}.sorties-hq-title{flex-direction:column}.sorties-invite{align-items:stretch;flex-wrap:wrap}.sorties-invite>div{flex-basis:100%}}

/* Интерьер занимает доступную ширину, но не обрезается и не растягивает мобильную страницу. */
.sorties-building-detail-with-interior{grid-template-columns:88px minmax(0,1fr);gap:12px}
.sorties-building-detail-with-interior .sorties-building-detail-img{width:88px;max-width:88px;margin:0}
.sorties-building-detail-with-interior h3{overflow-wrap:anywhere}
.sorties-building-interior{max-width:780px;margin:14px auto 0;border:1px solid #46532a;border-radius:9px;overflow:hidden;background:#070b06}
.sorties-building-interior img{display:block;width:100%;height:auto;max-height:520px;object-fit:contain;background:#070b06}
.sorties-building-interior figcaption{padding:10px 12px;border-top:1px solid #34421f;background:#11180d}
.sorties-building-interior figcaption b,.sorties-building-interior figcaption span{display:block}
.sorties-building-interior figcaption b{color:#e6d58e;font-size:14px}
.sorties-building-interior figcaption span{margin-top:4px;color:#a7b296;font-size:12px;line-height:1.45}
.sorties-upgrades-title{margin:16px 0 0;color:#dccc82;font-size:14px}
@media(max-width:480px){.sorties-building-detail-with-interior{grid-template-columns:64px minmax(0,1fr);gap:9px}.sorties-building-detail-with-interior .sorties-building-detail-img{width:64px;max-width:64px}.sorties-building-detail-with-interior h3{font-size:16px}.sorties-building-detail-with-interior p{font-size:12px}.sorties-building-interior img{max-height:none}.sorties-building-interior figcaption{padding:9px}}

/* Риск показывается непосредственно на каждой доступной развилке. */
.sorties-map{min-width:0;margin:0 auto}
.sorties-dpad{grid-template-columns:repeat(3,88px);grid-template-rows:repeat(3,64px);gap:4px}
.sorties-dpad button{font-size:inherit;line-height:1;padding:4px;overflow:hidden}
.sorties-dpad button strong,.sorties-dpad button small,.sorties-dpad button em{display:block}
.sorties-dpad button strong{font-size:22px}
.sorties-dpad button small{font-size:8px;margin-top:2px;text-transform:uppercase}
.sorties-dpad button em{font-size:8px;font-style:normal;margin-top:3px;color:#fff;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}
.sorties-dpad span{line-height:64px}
.sorties-dpad .risk-safe{background:#284a22;color:#b9e2a6}
.sorties-dpad .risk-danger{background:#5a241b;color:#f2a38d}
.sorties-dpad .risk-unknown{background:#4a421e;color:#ead682}
.sorties-dpad .risk-scouted{background:#1d4053;color:#9edaf2}
@media(max-width:420px){.sorties-dpad{grid-template-columns:repeat(3,76px)}}
.sorties-abort{width:100%;margin-top:12px;opacity:.72}

/* Крупная прокручиваемая тактическая карта: она больше не ужимается
   целиком до ширины экрана, поэтому строения остаются различимыми. */
.sorties-map-frame{max-height:74vh;overflow:auto;padding:12px;background:#030503}
.sorties-map{--sorties-cell:86px;background-color:#080b07}
.sorties-live-layout{grid-template-columns:1fr}
.sorties-route-panel{border-left:0;border-top:1px solid #2d391d;max-height:none;overflow:visible}
.sorties-cell{box-sizing:border-box;border:2px solid rgba(0,0,0,.92);overflow:hidden}
.sorties-cell::after{content:attr(data-coord);position:absolute;left:4px;top:3px;z-index:9;padding:1px 4px;border-radius:3px;background:rgba(0,0,0,.72);color:#eee4b1;font:800 9px/1.35 Arial,sans-serif;text-shadow:0 1px #000;pointer-events:none}
.sorties-cell.is-visible:not(.is-visited){background:rgba(8,12,8,.28)}
.sorties-cell.is-current{outline:4px solid rgba(244,210,73,.92);outline-offset:-4px;z-index:10}
.sorties-cell.is-fog{background:radial-gradient(circle at 48% 44%,rgba(23,29,21,.94),rgba(0,0,0,.985) 72%);box-shadow:inset 0 0 22px #000}
.sorties-cell.is-fog::before{content:"";position:absolute;inset:-25%;background:radial-gradient(ellipse,rgba(82,91,73,.12),transparent 62%);filter:blur(8px)}
.sorties-landmark{position:absolute;z-index:7;inset:12%;display:flex;align-items:center;justify-content:center;border:3px solid #111;border-radius:9px;box-shadow:0 4px 9px #000;background:#30352d}
.sorties-landmark b{font:900 13px/1 Arial,sans-serif;color:#fff;text-shadow:0 1px 2px #000}
.sorties-landmark.landmark-power{background:linear-gradient(135deg,#e7bf25,#725b08)}
.sorties-landmark.landmark-radio,.sorties-landmark.landmark-comms{background:linear-gradient(135deg,#368ac1,#163f61)}
.sorties-landmark.landmark-gate{inset:20% 4%;background:linear-gradient(#3c4348,#11181d);border-radius:3px}
.sorties-blocker{position:absolute;z-index:4;inset:5%;pointer-events:none}
.sorties-blocker.blocker-wall{background:repeating-linear-gradient(90deg,#262a2c 0 12px,#080a0b 12px 15px);border:2px solid #000;box-shadow:0 3px 7px #000}
.sorties-blocker.blocker-mine{background:repeating-radial-gradient(circle at 25% 45%,#b51f17 0 2px,transparent 3px 14px);border-top:3px dashed #a42019;border-bottom:3px dashed #a42019}
.sorties-objectives{display:flex;flex-direction:column;gap:5px;margin:10px 0;padding:9px;border:1px solid #374524;border-radius:7px;background:#0b1108}
.sorties-objectives>b{color:#d9c66b;font-size:10px;text-transform:uppercase;letter-spacing:.08em}
.sorties-objectives>span{color:#d58a6e;font-size:10px}
.sorties-objectives>span.done{color:#8bc779}
@media(max-width:780px){.sorties-map{--sorties-cell:72px}.sorties-map-frame{max-height:66vh;padding:7px}.sorties-cell::after{font-size:8px}}

/* Реальные многоклеточные строения, а не увеличенная иконка события.
   Каждый фрагмент обрезан своей клеткой: туман не выдаёт скрытые части. */
.sorties-object-piece{position:absolute;z-index:1;pointer-events:none;background-size:contain;background-position:center;background-repeat:no-repeat;filter:drop-shadow(0 2px 2px #000)}
.sorties-object-label{position:absolute;left:3px;right:3px;bottom:3px;z-index:3;padding:2px 3px;background:rgba(0,0,0,.85);border:1px solid #a8a077;border-radius:3px;color:#f4e6b0;font:700 9px/1.2 Arial,sans-serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:center}
.sorties-map-toolbar{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:9px 12px;background:#11180e;border-bottom:1px solid #39492a;color:#cbd2b8;font-size:11px}
.sorties-map-toolbar>div{display:flex;gap:6px;flex-shrink:0}
.sorties-zoom.is-selected{border-color:#c7a946;background:#473c19;color:#fff0ab}
.sorties-map.is-overview{--sorties-cell:30px}
.sorties-map.is-overview .sorties-cell{border-width:1px}
.sorties-map.is-overview .sorties-cell::after{font-size:6px;padding:0 1px;left:1px;top:0;background:transparent;opacity:.55}
.sorties-map.is-overview .sorties-cell:hover::after,.sorties-map.is-overview .sorties-cell.is-current::after{opacity:1;background:#000}
.sorties-map.is-overview .sorties-object-label{display:none}
.sorties-map.is-overview .sorties-event-pin{box-shadow:0 0 0 1px #d2b55a}
@media(max-width:780px){.sorties-map-toolbar{align-items:flex-start;flex-direction:column}.sorties-map.is-overview{--sorties-cell:24px}.sorties-object-label{font-size:8px}.sorties-map-toolbar .btn{font-size:11px;padding:6px 10px}}

/* Деталь берём из отдельных 512px текстур, а не из увеличенного обзора.
   Полупрозрачный исходный сектор сохраняет очертания дорог и районов. */
.sorties-ground{position:absolute;inset:0;z-index:0;pointer-events:none;background-image:var(--sorties-terrain);background-size:300% 200%;background-repeat:no-repeat}
.sorties-ground::after{content:"";position:absolute;inset:0;background-image:var(--sorties-source);background-size:calc(var(--sorties-cols)*100%) calc(var(--sorties-rows)*100%);background-position:var(--source-x) var(--source-y);background-repeat:no-repeat;opacity:.42}
.sorties-cell.is-visible:not(.is-visited) .sorties-ground{filter:brightness(.83)}
.sorties-map.is-overview .sorties-ground,.sorties-cell.is-fog .sorties-ground{display:none}
.sorties-event-art{display:block;width:100%;max-width:768px;margin:0 auto;height:auto;aspect-ratio:3/2;object-fit:contain}
.sorties-event-thumb{width:100%;max-width:384px;margin:0 auto}

/* Обзор помещает район целиком; крупный план прокручивается внутри
   карты, не растягивая экран телефона вместе с кнопками и докладом. */
.sorties-shell,.sorties-live-layout,.sorties-map-frame,.sorties-route-panel{min-width:0;max-width:100%;box-sizing:border-box}
.sorties-live-layout{grid-template-columns:minmax(0,1fr)}
.sorties-map.is-overview{--sorties-cell:var(--sorties-fit-cell,24px)}
.sorties-map.is-overview.is-tiny-overview .sorties-cell::after{display:none}
.sorties-map.is-overview.is-tiny-overview .sorties-markers{inset:0}
.sorties-map.is-overview.is-tiny-overview .sorties-cell.is-current{outline-width:2px}
.sorties-operation-note{display:flex;flex-direction:column;gap:5px;min-width:0}
.sorties-operation-note b{color:#ead589}.sorties-operation-note span{font-size:12px;color:#a8b696;overflow-wrap:anywhere}
.sorties-campaign-progress{display:flex;gap:5px;margin-top:10px}
.sorties-campaign-progress span{display:grid;place-items:center;width:25px;height:25px;border:1px solid #455032;border-radius:50%;color:#7d8b6d;font-size:11px}
.sorties-campaign-progress .done{background:#284a22;color:#b9e2a6}.sorties-campaign-progress .current{border-color:#e1be52;color:#f0d67b;background:#473c19}
.sorties-report-open{width:100%;white-space:normal;overflow-wrap:anywhere;text-align:left;margin-bottom:10px}
.sorties-stage-exit{padding:12px;margin-bottom:12px;border:1px solid #a38630;border-radius:8px;background:#242b14}.sorties-stage-exit p{font-size:12px;color:#bac5a6}.sorties-stage-exit .btn{width:100%}
.sorties-radio-overlay{position:fixed;inset:0;z-index:10050;background:rgba(0,0,0,.78);display:flex;align-items:center;justify-content:center;padding:14px;box-sizing:border-box}
.sorties-radio-dialog{width:100%;max-width:540px;max-height:calc(100dvh - 28px);overflow:auto;box-sizing:border-box;border:1px solid #ad8d37;border-radius:12px;padding:18px;background:linear-gradient(135deg,#202b18,#0b1109);color:#e1e7ce;box-shadow:0 12px 50px #000;overflow-wrap:anywhere}
.sorties-radio-head{display:flex;align-items:center;gap:12px;border-bottom:1px solid #455032;padding-bottom:12px}.sorties-radio-head img{object-fit:cover;border-radius:8px;border:1px solid #777046;flex-shrink:0}.sorties-radio-head div{display:flex;flex-direction:column;gap:5px;min-width:0}.sorties-radio-head small{font-size:9px;color:#c8ae63;letter-spacing:.12em}.sorties-radio-head b{color:#eddf9a}.sorties-radio-head span{font-size:11px;color:#a4b591}
.sorties-radio-dialog h3{color:#f2dd95;font-size:18px;margin:16px 0 10px}.sorties-radio-text{font-size:14px;line-height:1.65;white-space:pre-wrap}
.sorties-radio-hint{border:1px solid #465c2b;border-radius:8px;background:#111b0c;padding:11px;margin:12px 0 16px}.sorties-radio-hint b{font-size:11px;color:#bbd896;text-transform:uppercase}.sorties-radio-hint p{font-size:13px;line-height:1.55;margin:6px 0 0;white-space:pre-wrap}.sorties-radio-dialog>.btn{width:100%}
@media(max-width:780px){.sorties-shell .btn{max-width:100%;box-sizing:border-box;white-space:normal}.sorties-create,.sorties-leader-tools{grid-template-columns:minmax(0,1fr)}.sorties-person{min-width:0;flex-wrap:wrap}.sorties-person a{overflow-wrap:anywhere}.sorties-online-list>div,.sorties-applications>div{flex-wrap:wrap}.sorties-map-toolbar>div{flex-wrap:wrap;max-width:100%}.sorties-resource-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.sorties-radio-dialog{padding:14px}.sorties-radio-head img{width:58px;height:58px}.sorties-radio-dialog h3{font-size:16px}.sorties-radio-text{font-size:13px}}
.sm-editor-frame{max-width:100%;overflow:auto;max-height:440px;margin:12px 0;border:1px solid #66704a;background:#11180e}
.sm-editor-map{display:block;cursor:crosshair;max-width:none;touch-action:pan-x pan-y}
.sm-placement{border:1px solid #424b2c;border-radius:8px;padding:12px;margin:10px 0;min-width:0}
.sm-placement summary{cursor:pointer;color:#e3cb71}
.sm-content{border-top:1px solid #394125;margin-top:10px;padding-top:8px}
.sm-content h4{margin:18px 0 10px}
.sm-content label{display:flex;flex-direction:column;gap:6px;max-width:100%;min-width:0;flex:1 1 145px}
.sm-content .field{max-width:100%;min-width:0;width:100%;box-sizing:border-box}
.sm-enemy,.sm-reward-item{padding:8px;background:#171d12;margin:8px 0}
.sm-loot-settings{display:flex;align-items:center;gap:16px;margin:10px 0}
.sm-loot-preview{width:140px;height:130px;object-fit:contain}
.sm-object-preview{display:block;width:120px;height:100px;max-width:100%;object-fit:contain;margin:8px 0}
.sm-loot-settings>div{flex:1;min-width:0}
.sorties-object-status{position:absolute;right:1px;top:14px;color:#fff0b3;background:#3e241de8;border:1px solid #a38449;font-size:8px;z-index:4;padding:1px 3px;pointer-events:none}
.sorties-point-card,.sorties-loot-history{background:#10180e;border:1px solid #5d6237;border-radius:10px;padding:14px;min-width:0;margin:12px 0}
.sorties-point-head{display:flex;align-items:center;gap:14px}
.sorties-point-head>img{width:160px;max-width:35%;height:130px;object-fit:contain}
.sorties-point-head>div,.sorties-enemy-row>div{min-width:0;flex:1}
.sorties-point-card p{color:#b7bca1;line-height:1.5;margin:8px 0;font-size:13px}
.sorties-point-card h3{margin:5px 0;color:#ebd270;font-size:17px;overflow-wrap:anywhere}
.sorties-point-vehicle{display:flex;align-items:center;gap:12px;margin:12px 0}
.sorties-point-vehicle .sorties-vehicle-image{width:80px;height:72px;flex-shrink:0;background-repeat:no-repeat}
.sorties-enemy-list{border-top:1px solid #3a4127;padding-top:12px;margin-top:12px}
.sorties-enemy-row{display:flex;align-items:center;gap:12px;margin:12px 0;padding:10px;background:#181f12;border-radius:6px}
.sorties-enemy-row>img{width:76px;height:68px;object-fit:contain}
.sorties-enemy-row small{display:block;color:#a8b18c;margin:5px 0;font-size:12px}
.sorties-enemy-hp{height:8px;background:#392520;overflow:hidden;border-radius:4px}
.sorties-enemy-hp>span{display:block;height:100%;background:#a6b955}
.sorties-loot-rules{border-top:1px solid #3a4127;padding-top:12px;margin-top:12px}
.sorties-contributions{display:grid;gap:6px;border-top:1px solid #3a4127;padding-top:12px;margin-top:12px;font-size:12px;color:#b7bca1;overflow-wrap:anywhere}.sorties-contributions>b{color:#e4d28b}.sm-resource-settings{padding:10px;margin:10px 0;border:1px solid #58663a;border-radius:6px;background:#121b0d}
.sorties-reward-lines{display:flex;gap:6px;flex-wrap:wrap;margin:12px 0}
.sorties-reward-lines span{background:#1d2513;border:1px solid #46502d;padding:7px 10px;border-radius:5px;font-size:13px;color:#e4d28b;overflow-wrap:anywhere}
.sorties-loot-history h3{font-size:15px;color:#e4d28b;margin:0 0 10px}
.sorties-loot-history details{padding:10px;border-bottom:1px solid #394328}
.sorties-loot-history summary{cursor:pointer;font-size:13px;overflow-wrap:anywhere}
.sorties-loot-share{display:grid;gap:4px;padding:8px 0;font-size:13px;overflow-wrap:anywhere}
.sorties-loot-share>b{color:#e4d28b}.sorties-loot-share small{color:#a7c382}
.sorties-resource-grid b{display:flex;align-items:center;gap:5px}.sorties-resource-grid b img{width:18px;height:18px;object-fit:contain}
.sorties-map.is-tiny-overview .sorties-object-status{display:none}
@media(max-width:560px){.sm-loot-settings{gap:8px}.sm-loot-preview{width:90px;height:90px}.sorties-point-card,.sorties-loot-history{padding:10px}.sorties-point-head{gap:8px}.sorties-point-head>img{height:95px}.sorties-enemy-row{padding:8px;gap:8px}.sorties-enemy-row>img{width:54px;height:54px}.sorties-point-card .btn{white-space:normal;max-width:100%}}
.sorties-object-loot{position:absolute;right:0;bottom:12px;z-index:4;width:40%;height:35%;object-fit:contain;pointer-events:none;filter:drop-shadow(0 0 2px #000)}
.sorties-object-vehicle{position:absolute;left:0;bottom:12px;z-index:4;width:42%;height:40%;background-repeat:no-repeat;pointer-events:none;filter:drop-shadow(0 0 2px #000)}
.sorties-map.is-tiny-overview .sorties-object-loot,.sorties-map.is-tiny-overview .sorties-object-vehicle{display:none}
.sorties-coming-soon{width:100%;min-width:0;overflow:hidden;border:1px solid #72651e;border-radius:10px;background:#10160c}
.sorties-coming-soon>img{display:block;width:100%;max-width:100%;height:auto}
.sorties-coming-soon-footer{padding:14px;display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center}.sorties-coming-soon-footer .btn{width:100%;max-width:320px;min-height:44px}.sorties-coming-soon-footer .btn:disabled{opacity:.75;cursor:not-allowed}.sorties-base-soon{color:#e6cc71;font-size:12px;font-weight:bold}.sorties-coming-soon-footer p{margin:0;max-width:640px;color:#a8b18e;font-size:13px;line-height:1.5}
.sm-editor-tools{display:flex;align-items:end;flex-wrap:wrap;gap:12px}.sm-editor-tools label{display:grid;gap:6px;min-width:0;max-width:100%}.sm-editor-tools .field{max-width:100%;box-sizing:border-box}.sm-kill-toggle{flex-direction:row!important;align-items:center;margin:12px 0}.sm-kill-settings{border-left:3px solid #986d34;padding:10px;background:#10160c}.sm-kill-settings>.sm-reward-item{background:#1c2516}
.sorties-preview{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px;padding:14px;border:1px solid #59612c;border-radius:10px;background:#10160c;min-width:0}
.sorties-preview figure{margin:0;min-width:0;align-self:start}.sorties-preview figure img{display:block;width:100%;height:auto;max-height:420px;object-fit:contain;border-radius:7px;background:#080c06}.sorties-preview figcaption{padding-top:8px;color:#a3af91;font-size:11px;line-height:1.5}
.sorties-preview-brief{min-width:0;overflow-wrap:anywhere}.sorties-preview h3{margin:5px 0 8px;color:#efe0a2}.sorties-preview p{margin:0;font-size:13px;line-height:1.55;color:#c0c8ad}
.sorties-preview-stages{list-style:none;margin:12px 0;padding:0;display:grid;gap:8px}.sorties-preview-stages li{display:flex;gap:10px;align-items:center}.sorties-preview-stages li>span{flex:0 0 26px;line-height:26px;text-align:center;border:1px solid #686732;border-radius:5px;color:#e6cc71;background:#252d15}.sorties-preview-stages b,.sorties-preview-stages small{display:block}.sorties-preview-stages b{font-size:13px;color:#e1e6ca}.sorties-preview-stages small{font-size:11px;color:#a6b491;margin-top:3px}.sorties-preview p.sorties-preview-tip{padding:9px;border-left:2px solid #b69d38;background:#1b230f;font-size:12px}
@media(max-width:780px){.sorties-preview{grid-template-columns:minmax(0,1fr);padding:10px;gap:12px}.sorties-preview figure img{max-height:300px}.sorties-preview-stages{gap:10px}}
/* Компактные подсказки главной на мобильном экране. */
@media(max-width:600px) {
  .home-secondary-prompts {display:none}
  .academy-home-card .tutor-head,.academy-home-card .academy-task-why {display:none}
  .academy-home-card {padding:10px}
  .academy-home-card p {font-size:12px}
}
.cv-hub-summary{display:flex;align-items:center;justify-content:space-between;gap:12px}
.cv-hub-summary p{margin:4px 0 0}.cv-hub-wallet{display:flex;align-items:center;gap:6px;white-space:nowrap;font-size:20px}
.cv-hub-wallet img{width:26px;height:26px;object-fit:contain}
.cv-hub-cover{border:1px solid var(--line);border-radius:8px;overflow:hidden}
.cv-hub-cover img{display:block;width:100%;aspect-ratio:5/2;height:auto;max-height:320px;object-fit:cover}
.cv-hub-coin{width:22px;height:22px;object-fit:contain;vertical-align:middle;margin-left:3px}
.cv-hub-progress{height:10px;margin:10px 0 12px;border:1px solid var(--line);border-radius:6px;background:rgba(0,0,0,.45);overflow:hidden}
.cv-hub-progress span{display:block;height:100%;background:linear-gradient(90deg,var(--orange),var(--gold));transition:width .2s ease}
.cv-hub-progress.complete span{background:var(--green)}
.cv-hub-nav{display:flex;justify-content:space-between;gap:10px;margin-bottom:10px}
.cv-hub-nav .btn{width:auto;min-height:44px;white-space:normal;flex:1;max-width:360px}
.cv-hub-scene{border:1px solid var(--line);border-radius:8px;overflow:hidden}
.cv-hub-scene img{display:block;width:100%;height:auto}
.cv-hub-status{margin-top:10px}.cv-hub-status p{margin:8px 0 0}
.cv-hub-contacts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:12px 0}
.cv-hub-contact{width:100%;margin:0;display:grid;grid-template-columns:96px minmax(0,1fr);gap:12px;align-items:center;text-align:left;font:inherit;color:inherit;cursor:pointer;min-width:0}
.cv-hub-contact img{width:96px;height:120px;object-fit:cover;border-radius:6px}
.cv-hub-contact strong,.cv-hub-contact span span{display:block}.cv-hub-contact span span{margin-top:8px;line-height:1.5}
.cv-hub-contact:hover:not(:disabled),.cv-hub-contact:focus-visible{border-color:var(--gold);outline:2px solid var(--gold);outline-offset:2px}
.cv-hub-contact:disabled{opacity:.55;cursor:not-allowed}
.cv-hub-intro{margin-top:10px}.cv-hub-intro p{margin:8px 0;line-height:1.5}
@media(max-width:650px){.cv-hub-contacts{grid-template-columns:minmax(0,1fr)}}
@media(max-width:520px){.cv-hub-nav .btn{padding:10px 8px;font-size:12px}.cv-hub-contact{grid-template-columns:80px minmax(0,1fr);gap:10px}.cv-hub-contact img{width:80px;height:100px}}
.cv-hub-items{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.cv-hub-item{margin:0;min-width:0;display:flex;flex-direction:column;gap:6px}
.cv-hub-item p{margin:0}.cv-hub-item-img{width:100%;height:136px;object-fit:contain}
.cv-hub-actions{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;margin-top:auto;padding-top:8px}
.cv-hub-actions .btn{white-space:normal;min-height:44px}.cv-hub-quest-footer{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.cv-hub-quest-footer .btn{width:auto;min-height:44px;flex-shrink:0}
@media(max-width:520px){.cv-hub-items{grid-template-columns:minmax(0,1fr)}.cv-hub-actions{grid-template-columns:minmax(0,1fr) auto}.cv-hub-wallet{font-size:17px}.cv-hub-summary{gap:8px}}
.sm-location-preview { display:block; width:min(100%,420px); height:auto; border-radius:8px; margin:12px 0; }
.sm-location-settings,.sm-support-offer { border:1px solid #424b28; border-radius:8px; padding:12px; margin:12px 0; }
.sm-location-settings .a2-row label:has(input[type="checkbox"]) { flex-direction:row; align-items:center; }
.sm-support-catalog .a2-row { flex-wrap:wrap; gap:12px; }
.sm-support-catalog .a2-row label { flex:1 1 180px; min-width:0; }
.sm-support-catalog input,.sm-support-catalog select { max-width:100%; }
.sorties-location-scene { display:block; width:100%; height:auto; border-radius:8px; margin-bottom:12px; }
.sorties-support,.sorties-support-groups { padding:12px; margin:12px 0; border:1px solid #424b28; border-radius:8px; }
.sorties-support label { display:block; margin:10px 0; }
.sorties-support select { width:100%; max-width:100%; }
.sorties-support .btn { width:100%; margin-top:8px; white-space:normal; }
.sorties-support-offer,.sorties-support-groups>div { display:grid; gap:6px; padding:10px 0; border-bottom:1px solid #424b28; }
.sorties-support-offer p { margin:0; }
.sorties-support-groups span,.sorties-support-groups small { display:block; }
.sm-operation { border-top:1px solid #424b28; padding:12px 0; }
.sm-operation .sm-resource-settings { display:none; }
.sm-completion-settings { padding:12px; background:#10180e; border:1px solid #424b28; border-radius:8px; margin-top:12px; }
.sorties-completion-reward { border:1px solid #877533; border-radius:8px; padding:12px; margin:12px 0; }
.sorties-completion-reward span { display:block; margin:6px 0; }
.sm-support-look { display:flex; gap:18px; align-items:start; flex-wrap:wrap; margin:12px 0; }
.sm-support-look>label { display:grid; gap:8px; flex:1 1 260px; }
.sm-fighter-preview { margin:0; width:220px; max-width:100%; }
.sm-fighter-preview img { display:block; width:100%; height:auto; border-radius:8px; }
.sm-fighter-preview figcaption { display:grid; gap:6px; margin-top:7px; color:#afbd9a; font-size:12px; }
.sorties-fighter-card { position:relative; margin:0; width:72px; height:72px; max-width:100%; }
.sorties-fighter-card img { display:block; width:100%; height:100%; object-fit:cover; object-position:center 15%; border:1px solid #59643a; border-radius:8px; }
.sorties-fighter-card figcaption { position:absolute; inset:0; pointer-events:none; }
.sorties-fighter-card .sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.sorties-fighter-card.is-compact { width:48px; height:48px; }
.sorties-fighter-leader { display:inline-block; width:fit-content; background:#3b351b; border:1px solid #87723a; border-radius:5px; color:#f1d179; padding:2px 7px; font-size:11px; }
.sorties-fighter-card .sorties-fighter-leader { position:absolute; right:-4px; bottom:-4px; padding:0 4px; font-size:12px; line-height:18px; }
.sorties-support-offer:has(.sorties-fighter-card) { grid-template-columns:72px minmax(0,1fr); column-gap:12px; align-items:start; }
.sorties-support-offer>.sorties-fighter-card { grid-row:1 / span 3; }
.sorties-support-offer:has(.sorties-fighter-card)>:not(.sorties-fighter-card) { grid-column:2; }
.sorties-support-offer:has(.sorties-fighter-card)>.btn { grid-column:1 / -1; }
.sorties-support-groups>div:has(.sorties-fighter-card) { grid-template-columns:48px minmax(0,1fr); column-gap:10px; }
.sorties-support-groups .sorties-fighter-card { grid-row:1 / span 3; }
.sorties-support-groups>div:has(.sorties-fighter-card)>:not(.sorties-fighter-card) { grid-column:2; }
@media(max-width:560px){.sorties-support-offer:has(.sorties-fighter-card){grid-template-columns:64px minmax(0,1fr);column-gap:10px}.sorties-support-offer>.sorties-fighter-card{width:64px;height:64px}}
.sm-scene-preview { display:flex; gap:10px; margin:8px 0; max-width:420px; align-items:center; }
.sm-scene-preview img,.sorties-interaction-look img { width:72px; height:72px; object-fit:cover; border:1px solid #59643a; border-radius:8px; flex-shrink:0; }
.sm-enemy-preview img { object-position:center 15%; }
.sm-enemy-drops { margin:10px 0; padding:12px; border:1px solid #687443; border-radius:8px; }
.sm-enemy-drops h4 { margin:0 0 6px; }
.sm-enemy-drop { display:flex; align-items:center; flex-wrap:wrap; gap:10px; padding:10px 0; border-top:1px solid #3e492c; margin-top:10px; }
.sm-enemy-drop>img { object-fit:contain; flex-shrink:0; }
.sm-enemy-drop>div { flex:1; min-width:160px; overflow-wrap:anywhere; }
.sm-enemy-drop p { margin:5px 0; }
.sm-scene-preview figcaption { min-width:0; display:grid; gap:5px; }
.sm-scene-preview small { color:#afbd9a; font-size:12px; }
.sorties-enemy-row img.sorties-enemy-portrait { width:72px; height:72px; object-fit:cover; object-position:center 15%; border-radius:8px; flex-shrink:0; }
.sorties-enemy-row>div { min-width:0; overflow-wrap:anywhere; }
.sorties-interaction-look,.sorties-contact-status { display:flex; align-items:center; gap:12px; margin:10px 0; }
.sorties-interaction-look>div,.sorties-contact-status>div { min-width:0; overflow-wrap:anywhere; }
.sorties-contact-status small { display:block; margin-top:5px; }
.sorties-contact-icon { width:48px; height:48px; object-fit:cover; border:1px solid #59643a; border-radius:8px; flex-shrink:0; }
@media(max-width:560px){.sorties-enemy-row img.sorties-enemy-portrait,.sorties-interaction-look img{width:64px;height:64px}}
.sorties-schedule{margin:12px 0;padding:12px;border:1px solid #877533;border-radius:8px}.sorties-schedule p{margin:6px 0}
.sorties-instance{position:fixed;inset:0;z-index:10000;overflow:auto;background:#0b1008;color:var(--text)}.sorties-instance-inner{max-width:1180px;margin:auto;padding:16px;box-sizing:border-box}.sorties-exit-menu{display:block;width:100%;margin-top:22px}.sorties-wallet-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}.sorties-wallet-grid .card{display:grid;gap:8px;justify-items:center;text-align:center}.sorties-wallet-grid img{object-fit:contain}.sorties-reward-icon{display:inline-flex;align-items:center;gap:8px;padding:6px 9px;border:1px solid #49532d;border-radius:6px}.sorties-reward-icon img{object-fit:contain;flex:none}.sorties-after-scene{display:block;width:100%;max-height:460px;object-fit:cover;border-radius:10px}.sorties-after-stats{display:flex;flex-wrap:wrap;gap:12px;margin:14px 0}.sorties-after-player{padding:12px 0;border-bottom:1px solid #49532d;display:grid;gap:8px}.sorties-after-player .btn{justify-self:start;opacity:1}.sorties-history{padding:15px 0}.sorties-history details{margin:8px 0;padding:12px;border:1px solid #49532d;border-radius:8px}.sorties-history summary{cursor:pointer}.sorties-after-overlay{position:fixed;inset:0;z-index:10060;background:rgba(0,0,0,.88);padding:18px;overflow:auto}.sorties-after-overlay>div{max-width:960px;margin:auto;padding:18px;background:#131b0e;border:1px solid #7a7936;border-radius:12px}.sorties-after-report{overflow-wrap:anywhere}.sorties-after-report .btn{margin:6px 5px 6px 0}@media(max-width:600px){.sorties-instance-inner{padding:8px}.sorties-after-overlay{padding:6px}.sorties-after-overlay>div{padding:10px}.sorties-after-scene{max-height:240px}}
.sorties-after-report .sorties-after-scene{height:auto;max-height:none;object-fit:contain}
.sorties-crate{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin:12px 0;padding:12px;border:1px solid #49532d;border-radius:8px;background:#131b0e}.sorties-crate h4{flex-basis:100%;margin:0}.sorties-crate>img{width:140px;height:110px;object-fit:contain}.sorties-crate .btn{width:auto;min-width:140px}.sorties-crate .sorties-reward-lines{flex-basis:100%}.sorties-crew-player{display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding:9px 0;border-top:1px solid #49532d}.sorties-crew-player b{flex:1 1 200px}.sorties-crew-player .btn{width:auto}.sorties-loot-history>summary{cursor:pointer;font-weight:bold;padding:12px;border:1px solid #49532d;border-radius:8px}
/* Позицию при обновлении боя сохраняет клиент, без второй коррекции браузером. */
.sorties-instance{overflow-anchor:none}
.sorties-crate-policy{display:block;flex-basis:100%;font-size:11px;line-height:1.5;color:#a5b58c}
.sorties-move-countdown{margin:10px auto;text-align:center;padding:10px;border:1px solid #d9b94d;border-radius:8px;background:#2a3016;color:#ffe17f;font-size:16px;max-width:420px}.sorties-move-countdown strong{font-size:26px;font-variant-numeric:tabular-nums}.sorties-move-countdown small{display:block;font-size:11px;color:#c2bb8b}.sorties-dpad button.is-moving:disabled{opacity:1;background:#64551b;border:2px solid #ffdb5b;box-shadow:0 0 12px #b19739;color:#fff3b0}.sorties-marker-names{position:absolute;left:-18%;right:-18%;bottom:1px;z-index:8;display:grid;gap:1px;pointer-events:none}.sorties-marker-names b{display:block;max-width:100%;text-align:center;background:#060b04e8;color:#f3e5aa;font-size:10px;line-height:13px;overflow-wrap:anywhere;border-radius:3px;text-shadow:0 1px #000}.sorties-cell:has(.sorties-marker-names){z-index:7}
.sorties-crew-compact{padding:10px;margin:12px 0;background:#11190d;border:1px solid #3c4828;border-radius:8px}.sorties-own-resources{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}.sorties-stat-bar{height:22px;position:relative;border:1px solid #526238;border-radius:4px;overflow:hidden;background:#070c05;font-size:11px;text-align:center}.sorties-stat-bar i{display:block;height:100%;background:#45733b}.sorties-stat-bar.energy i{background:#776528}.sorties-stat-bar.ammo i{background:#365d6f}.sorties-stat-bar span{position:absolute;inset:0;line-height:20px;color:#f5edd3;text-shadow:1px 1px 2px #000;font-variant-numeric:tabular-nums;white-space:nowrap}.sorties-team-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:6px;margin-top:8px}.sorties-team-card{display:grid;grid-template-columns:40px minmax(0,1fr);gap:6px;align-items:center;padding:6px;background:#0b1008;border:1px solid #323d25;border-radius:6px;min-width:0}.sorties-team-card.is-self{border-color:#a88d32}.sorties-team-card>img{width:40px;height:40px;object-fit:cover;border-radius:5px}.sorties-team-card b,.sorties-team-card small{display:block;overflow-wrap:anywhere;font-size:11px}.sorties-team-card small{font-size:10px;color:#9aa884;margin:2px 0}.sorties-team-card .btn{grid-column:1/-1;padding:5px;font-size:11px}.sorties-rescue{padding:8px;background:#412d1c;color:#f7d49f}
.sorties-recon>img{width:100%;height:auto;max-height:420px;object-fit:cover;border-radius:8px}.sorties-recon{margin:12px 0}.sorties-recon>div{display:flex;gap:8px;flex-wrap:wrap}.sorties-recon>div>.btn{flex:1}.sorties-enemy-card-art{position:relative;align-self:start;min-width:72px}.sorties-enemy-count{position:absolute;top:0;right:0;background:#672c19;border:1px solid #f1b956;border-radius:4px;padding:3px 6px;color:#fff;font-size:14px}.sorties-point-clear{display:block;border-radius:4px;background:#102b0ddf;color:#d7ffd0;font-size:10px;padding:3px;position:absolute;left:0;right:0;bottom:0;z-index:5;text-align:center}.sorties-point-clear.has-loot{background:#4b3b0ae8;color:#ffe399}
.sorties-chat{margin:16px 0;padding:12px;background:#10170c;border:1px solid #4a5531;border-radius:8px}.sorties-chat article{padding:7px 0;border-bottom:1px solid #303e24;overflow-wrap:anywhere}.sorties-chat article b{color:#d6d69b;font-size:12px}.sorties-chat article time{margin-left:8px;font-size:10px;color:#85976f}.sorties-chat article p{margin:5px 0;white-space:pre-wrap}.sorties-chat nav{display:flex;justify-content:space-between;align-items:center;gap:8px;margin:8px 0}.sorties-chat-form{display:flex;gap:8px;margin-top:10px}.sorties-chat-form textarea{min-width:0;flex:1;resize:vertical;background:#060b04;color:var(--text);border:1px solid #61703c;border-radius:6px;padding:9px;font:inherit}.sorties-chat-form .btn{width:auto;flex:0 0 auto}.sorties-chat small{color:#899977;font-size:10px}
@media(max-width:600px){.sorties-crew-compact{padding:6px}.sorties-team-cards{grid-template-columns:repeat(2,minmax(0,1fr))}.sorties-team-card{grid-template-columns:30px minmax(0,1fr);padding:4px}.sorties-team-card>img{width:30px;height:30px}.sorties-team-card .sorties-stat-bar{height:18px;font-size:9px}.sorties-team-card .sorties-stat-bar span{line-height:16px}.sorties-own-resources{gap:3px}.sorties-own-resources .sorties-stat-bar{font-size:9px}.sorties-recon>img{max-height:250px}.sorties-chat-form{flex-wrap:wrap}.sorties-chat-form textarea{flex-basis:100%}.sorties-chat-form .btn{width:100%}.sorties-marker-names b{font-size:9px;line-height:11px}}
.sorties-location-screen{max-width:980px;margin:auto}.sorties-point-focused{padding:12px}.sorties-point-focused>header{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:10px}.sorties-point-focused h3,.sorties-point-focused h4{margin:0}.sorties-location-hero,.sorties-loot-scene{display:block;width:100%;height:auto;max-height:340px;object-fit:cover;border-radius:8px;aspect-ratio:16/9}.sorties-location-actions{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0}.sorties-location-actions>.btn{flex:1;min-width:140px}.sorties-location-vitals{display:flex;justify-content:space-around;gap:8px;padding:8px;border:1px solid var(--border);border-radius:6px;font-size:12px}.sorties-location-crew,.sorties-communications>details{margin-top:8px;border:1px solid var(--border);border-radius:6px;padding:8px}.sorties-location-crew>summary,.sorties-communications summary{cursor:pointer;font-weight:700}.sorties-location-screen .sorties-loot-history{margin:8px 0}.sorties-communications .sorties-chat{margin:0;border:0;padding:6px 0 0}.sorties-communications .sorties-chat-feed{max-height:250px;overflow:auto;overflow-anchor:none}.sorties-communications .sorties-chat article{padding:5px 0}.sorties-communications .sorties-chat article p{margin:3px 0}.sorties-communications .sorties-log{max-height:180px;overflow:auto}.sorties-deck-nav{display:flex;justify-content:space-between;align-items:center;gap:8px;margin:10px 0}.sorties-loot-deck>.sorties-crate{display:block;padding:0;border:0;background:none}.sorties-loot-deck .sorties-loot-scene{max-width:none;margin:10px 0}.sorties-loot-deck .sorties-crate>.btn{width:100%;margin:8px 0}.sorties-loot-deck .sorties-crate-policy{margin-top:8px}.sorties-enemy-tabs{display:flex;gap:6px;overflow-x:auto;padding:5px 0}.sorties-enemy-tabs>.btn{display:flex;align-items:center;gap:5px;white-space:nowrap;flex-shrink:0}.sorties-enemy-tabs>.is-selected{border-color:#d5b749;background:#45401f}.sorties-enemy-tabs img{object-fit:cover;border-radius:4px}.sorties-point-focused .sorties-enemy-row{margin-top:8px}.sorties-return-map{margin:8px 0}.sorties-location-screen .sorties-location-scene{display:none}@media(max-width:600px){.sorties-point-focused{padding:8px}.sorties-location-hero,.sorties-loot-scene{max-height:200px}.sorties-location-actions{gap:5px}.sorties-location-actions>.btn{min-width:100px;font-size:12px;padding:10px 5px}.sorties-communications .sorties-chat-feed{max-height:210px}.sorties-point-focused>header{gap:4px}.sorties-point-focused>header h3{font-size:15px}.sorties-point-focused .sorties-enemy-row{padding:8px}.sorties-location-screen .sorties-loot-history{padding:8px}}
.sorties-loot-deck .sorties-loot-scene{width:100%;height:auto;object-fit:cover}
.sorties-location-hero,.sorties-loot-deck .sorties-loot-scene{object-fit:contain;background:#080b07}
/* Личная база и ангар: компактные ресурсы и явное включение транспорта. */
.sorties-recon-countdown,.sorties-sector-battle{padding:10px;margin:10px 0;border:1px solid #8d873e;border-radius:7px;background:#242b12;color:#eee1a0;line-height:1.5}.sorties-recon-countdown small{display:block;margin-top:4px;color:#bcc6a1}.sorties-recon-countdown [data-sorties-countdown]{font-variant-numeric:tabular-nums;font-size:19px}.sorties-sector-battle{border-color:#a86136;background:#302215;color:#f2c79b}
.sorties-base-nav{display:flex;align-items:center;gap:12px;margin-bottom:10px}.sorties-base-nav h2{margin:0}.sorties-base-nav .btn{width:auto}
.sorties-base-resources{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0}.sorties-base-resources>div{display:flex;align-items:center;gap:6px;flex:1 1 130px;min-width:0;padding:7px;background:#141d0e;border:1px solid #414c2b;border-radius:6px}.sorties-base-resources img{object-fit:contain;flex:none}.sorties-base-resources small,.sorties-base-resources b{display:block}.sorties-base-resources small{font-size:10px;color:#a6b28e}.sorties-base-resources b{font-size:13px;font-variant-numeric:tabular-nums}
.sorties-base-hero{display:block;width:100%;height:auto;border-radius:10px}.sorties-base-npc{display:flex;align-items:flex-start;gap:12px;padding:12px;margin:10px 0;background:#141c10;border:1px solid #414c2b;border-radius:8px}.sorties-base-npc>img{flex:none;border-radius:8px;object-fit:cover}.sorties-base-npc p{margin:6px 0;line-height:1.5}.sorties-base-npc small{display:block;color:#acb897}
.sorties-base-buildings,.sorties-garage-catalog{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.sorties-base-building{position:relative;display:grid;gap:6px;justify-items:center;text-align:center;min-width:0;color:inherit}.sorties-base-building-art img{max-width:100%;object-fit:contain}.sorties-base-building.is-locked .sorties-base-building-art{filter:blur(4px);opacity:.45}.sorties-base-building:disabled{opacity:1}.sorties-base-building small{display:flex;align-items:center;gap:5px}.sorties-base-building small img{border-radius:50%;object-fit:cover}.sorties-base-building h3{margin:0}
.sorties-garage-vehicle{display:flex;flex-direction:column;gap:9px;min-width:0}.sorties-garage-art{height:auto;width:100%;aspect-ratio:1/1;flex-shrink:0;background-repeat:no-repeat;border-radius:6px}.sorties-garage-vehicle h3,.sorties-garage-vehicle p{margin:0}.sorties-vehicle-spec{display:flex;flex-wrap:wrap;gap:8px;font-size:12px}.sorties-vehicle-actions{display:flex;flex-wrap:wrap;gap:6px}.sorties-vehicle-actions .btn{flex:1;min-width:110px}.sorties-vehicle-tank{display:grid;gap:5px}.sorties-vehicle-tank progress{width:100%;height:12px;accent-color:#adc452}.sorties-garage-vehicle small{line-height:1.45;color:#adb596}.sorties-garage-vehicle>.btn,.sorties-garage-vehicle>.sorties-vehicle-purchase{margin-top:auto}.sorties-vehicle-purchase{display:grid;gap:6px}.sorties-vehicle-purchase>span{text-align:center;font-size:12px;color:#adb596}.sorties-vehicle-purchase .btn{white-space:normal;display:flex;align-items:center;justify-content:center;gap:6px}.sorties-base-welcome{position:fixed;inset:0;z-index:10070;background:#000c;overflow:auto;padding:20px}.sorties-base-welcome>section{max-width:700px;margin:4vh auto}
.sorties-stat-bar.armor i{background:#647b94}.sorties-own-resources:has(.armor){grid-template-columns:repeat(2,minmax(0,1fr))}.sorties-location-vitals{flex-wrap:wrap}.sorties-hangar-gold{font-size:12px;color:#c7bc82}@media(min-width:1100px){.sorties-garage-catalog{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:600px){.sorties-base-npc{gap:8px;padding:8px}.sorties-base-npc>img{width:64px;height:64px}.sorties-base-npc p{font-size:12px}.sorties-base-resources>div{flex-basis:95px;padding:5px}.sorties-base-buildings{gap:6px}.sorties-base-building{padding:8px}.sorties-base-building h3{font-size:13px}.sorties-garage-catalog{grid-template-columns:minmax(0,1fr)}.sorties-base-welcome{padding:6px}.sorties-base-nav h2{font-size:18px}}
.war-halloween-icon{display:inline-block;width:30px;height:30px;flex:none;vertical-align:middle;border:1px solid #a88a4c;border-radius:6px;background-size:200% 100%;background-position:0 50%;background-repeat:no-repeat;margin-right:4px}.war-halloween-result-art{width:min(100%,640px);aspect-ratio:1;margin:0 auto 12px;border-radius:8px;background-size:200% 100%;background-position:0 50%;background-repeat:no-repeat}.war-halloween-result-art.is-defeated{background-position:100% 50%}#war-list .list-row .grow{min-width:0;overflow-wrap:anywhere}#war-list .list-row .btn{min-height:44px;flex:none}
.war-halloween-supply:not([hidden]){display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.war-halloween-supply>div{min-width:0}.war-halloween-supply .btn{width:100%;min-height:44px;white-space:normal}.war-halloween-supply small{display:block;margin-top:6px;color:var(--muted);overflow-wrap:anywhere}@media(max-width:480px){.war-halloween-supply:not([hidden]){grid-template-columns:1fr}}
.chat-sticker-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:8px;margin:10px 0 18px}
.chat-sticker-choice{min-width:0;border:1px solid var(--border);border-radius:8px;background:rgba(0,0,0,.18);padding:6px;cursor:pointer}.chat-sticker-choice img{display:block;width:100%;height:100px;object-fit:contain}.chat-event-sticker{display:block;width:160px;height:160px;max-width:100%;object-fit:contain;object-position:left center;margin-top:7px}
.chat-sticker-toggle{display:inline-flex;align-items:center;justify-content:center;flex:0 0 44px;width:44px;height:44px;padding:2px;border:1px solid var(--border);border-radius:8px;background:linear-gradient(160deg,#354320,#141b0d);cursor:pointer}.chat-sticker-toggle img{width:38px;height:38px;object-fit:contain}.chat-sticker-toggle:hover,.chat-sticker-toggle[aria-expanded="true"]{border-color:var(--gold)}
.chat-sticker-dialog{width:min(580px,100%);max-width:580px;max-height:88dvh;overflow-y:auto;overscroll-behavior:contain;box-sizing:border-box;text-align:left}.chat-sticker-dialog header{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}.chat-sticker-dialog h2{font-size:19px;line-height:1.35;margin:4px 0 12px;overflow-wrap:anywhere}.chat-sticker-dialog .chat-picker-close{flex:none;width:44px;min-height:44px;padding:6px}.chat-picker-back{min-height:44px}
.chat-pack-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.chat-pack-choice{display:flex;flex-direction:column;align-items:center;gap:8px;min-width:0;padding:12px 8px;border:1px solid var(--border);border-radius:9px;background:#1a2514;color:var(--text);cursor:pointer}.chat-pack-choice:hover,.chat-sticker-choice:hover{border-color:var(--gold)}.chat-pack-choice img{display:block;width:100%;height:100px;object-fit:contain}.chat-pack-choice b{font-size:13px;overflow-wrap:anywhere}.chat-pack-choice small{font-size:11px;color:var(--dim)}
@media(max-width:620px){.chat-event-sticker{width:128px;height:128px}.chat-sticker-dialog{padding:13px;max-height:92dvh}.chat-sticker-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}.chat-sticker-choice img{height:82px}}
.hw-mission-guide{border:1px solid #68764a;background:linear-gradient(120deg,#18271c,#10190f);padding:14px;overflow-wrap:anywhere}
.hw-mission-guide>small{color:#badb8c;letter-spacing:.12em;font-weight:700}
.hw-mission-guide h3{margin:7px 0;color:#dcf3b8}
.hw-mission-guide p{margin:8px 0;line-height:1.5}
.hw-mission-guide ol{padding-left:22px;line-height:1.6}
.hw-guide-next{border-left:3px solid #b4dc72;background:#090f0a88;padding:10px 12px;margin:12px 0}
.hw-guide-next small{display:block;color:#c1cbb6;margin-bottom:10px}
.hw-guide-next .btn{width:100%;white-space:normal}
.hw-object-help{color:#c8d2be;font-size:13px;line-height:1.5;margin:8px 0}
.hw-depth-cell.hw-guide-path{box-shadow:inset 0 0 0 2px #bcdf8a77}
.hw-depth-cell.hw-goal-cell{background-color:#4f5c23!important;box-shadow:inset 0 0 0 3px #f3d57d;opacity:1;z-index:1}
.hw-depth-cell.hw-goal-cell:after{content:'';position:absolute;inset:12%;border:1px solid #fff2b0;pointer-events:none}
.hw-home .hw-home-countdown{color:#d8edaa;font-weight:700;margin-top:5px;font-variant-numeric:tabular-nums}
/* Шахты: прокручивается страница, а не вложенный #wrap (hidden + auto). */
#wrap:has(.mines-screen){overflow-x:clip;overflow-y:visible}
.mines-screen{min-width:0;overflow:visible}
.mines-screen>.card{min-width:0;overflow:visible}
.mines-screen .btn{max-width:100%;white-space:normal;overflow-wrap:anywhere;min-height:44px}
.mines-screen .field-row{flex-wrap:wrap}
.mines-screen .field-row select{flex:1 1 90px;min-width:0}
.trophy-coupon-stock>div:not(.name){display:flex;gap:12px;flex-wrap:wrap}.trophy-coupon-stock figure{margin:8px 0;text-align:center;flex:0 1 160px;min-width:0}.trophy-coupon-stock img{display:block;width:100%;height:80px;object-fit:contain}.trophy-coupon-stock figcaption{font-size:12px;color:var(--gold)}
.trophy-coupon-option{padding:12px;border:1px solid #736544;border-radius:8px;background:#241f1744}.trophy-coupon-option label{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.trophy-coupon-option select{max-width:100%;min-height:40px}.trophy-coupon-option small{display:block;margin-top:8px;line-height:1.5}.trophy-coupon-option .btn{white-space:normal;overflow-wrap:anywhere;min-height:44px}