/* public/css/layout.css — combats-каркас игровых экранов (ре-скин Фаза 1).
   Грид: тёмная 2-рядная «каменная» шапка во всю ширину · СЛЕВА панель персонажа (папердолл +
   статы + Могущество) · ЦЕНТР — активный экран · СПРАВА панорама города + «кто в городе».
   Внизу (вне каркаса, #dock) — чат + статус-бар. Мобильный — колонкой (контент ведёт).
   Всё на переменных styles.css — темы light «combats classic» / dark «DreamsCity» работают авто.
   Публичные экраны (вход/регистрация/создание) рендерятся БЕЗ каркаса, как раньше. */

/* ЭТАЛОН: страница растянута НА ВСЮ ширину окна (как _ui_project/index.html) — шапка каменной
   полосой от края до края, колонки на сером «рабочем» фоне #dedede, БЕЗ max-width по центру. */
.framewrap { min-height: 100%; }
.frame {
  display: grid;
  gap: var(--et-gap, 10px);
  padding: 10px 12px calc(16px + env(safe-area-inset-bottom));
  background: var(--et-work);
  grid-template-columns: 1fr;
  grid-template-areas: "main" "left" "right";
}
/* ЭТАЛОН (шаги 5, 27): адаптив как в макете — ЕДИНЫЙ порог 1020px. Шире — три колонки
   (кукла 300 · центр · панорама 375, зазоры --et-gap); уже — всё в столбик (контент ведёт,
   кукла 300 по центру, панорама на всю ширину). Промежуточный 2-колоночный режим убран. */
@media (min-width: 1021px) {
  .frame {
    grid-template-columns: var(--et-doll-w, 300px) minmax(0, 1fr) var(--et-pano-w, 375px);
    grid-template-areas:
      "left main right";
  }
}
/* ≤1020 (шаг 27): столбик. Меню БЕЗ смещения (логотип не резервирует колонку куклы,
   плиты 2-го ряда от левого края), кукла 300 по центру, панорама 100% (высота 200 — эталон). */
@media (max-width: 1020px) {
  .frame__brand { width: auto; margin-right: 14px; }
  /* .frame__top — для веса: основное правило subbar стоит НИЖЕ по файлу и иначе перебивало бы это */
  .frame__top .frame__subbar { padding-left: 12px; }
  .frame__citybtn { width: auto; padding: 3px 16px; }
  .frame__left { width: 100%; max-width: var(--et-doll-w, 300px); justify-self: center; }
  .sidep__pano { height: 200px; }
}
.frame__main  {
  grid-area: main;  min-width: 0;
  /* ЭТАЛОН: центр = ЕДИНАЯ светлая «бумага» (одно окно на весь центр, как .paper макета). */
  background: var(--et-paper); border: 1px solid var(--et-paper-edge);
  padding: 12px 16px; min-height: 470px;
  position: relative; /* СТ-19.19: якорь для крупного просмотра образа (.avatar-zoom) */
}
/* СТ-19.19/19.19.1: крупный просмотр образа — ЧЁРНАЯ плашка ТОЛЬКО формата аватарки (3:5,
   от верха до низа центрального окна, по центру); остальной экран не затемняется.
   Невидимый слой во всё окно ловит клик для закрытия. Клик/Esc — закрыть. */
.avatar-zoom {
  position: absolute; inset: 0; z-index: 6;
  background: transparent; display: flex; align-items: center; justify-content: center;
  cursor: zoom-out;
}
.avatar-zoom--fixed { position: fixed; }
.avatar-zoom .avatar-svg { height: 100%; width: auto; max-width: 100%; background: #000; }
.avatar-zoom .fig-bg { fill: #000; }
/* Панели внутри бумаги — БЕЗ своих рамок/фонов: секции листа, разделённые тонкой линией (hr.sep
   эталона). Заголовок секции — серый Georgia h2 эталона; красная бумага-панель больше не нужна. */
.frame__main .panel { background: none; border: 0; box-shadow: none; border-radius: 0; margin: 0; overflow: visible; }
.frame__main .panel + .panel, .frame__main .panel ~ .panel { border-top: 1px solid #c4c4c4; margin-top: 9px; }
.frame__main .panel__title {
  font: 700 13px var(--et-font-display); letter-spacing: .5px; color: #5a5a5a;
  background: none; border: 0; padding: 9px 0 4px;
}
.frame__main .panel__body { padding: 2px 0 8px; }
/* Заголовок экрана — красный Georgia по центру (h1 эталона «Анкета персонажа»). */
.frame__main .et-h1 {
  font: 700 17px var(--et-font-display); letter-spacing: 1px; color: var(--et-head);
  text-align: center; margin: 2px 0 10px;
}
.frame__main .et-flavor { text-align: center; color: #555; font-size: 11px; margin: 0 0 4px; }
.frame__main .et-centerline { text-align: center; font-size: 12px; margin: 0 0 6px; display: flex; justify-content: center; align-items: center; gap: 8px; flex-wrap: wrap; }

/* === ФИКСИРОВАННЫЙ каркас (просьба пользователя, 2026-07-14): страница НЕ прокручивается —
   шапка, кукла слева, город справа и чат внизу стоят на месте; ЛИСТАЕТСЯ ТОЛЬКО ЦЕНТР
   (анкета/арена/лавка…) своей внутренней прокруткой. Работает на широком экране при видимом
   нижнем чате (body.has-dock задаёт запас под него: 196px, свёрнут — 52px). На узких экранах
   колонки в столбик — там остаётся обычная прокрутка страницы. Порог = 1021px (шаг 27),
   в ногу с трёхколоночным гридом выше: фикс-каркас живёт ТОЛЬКО при трёх колонках. */
@media (min-width: 1021px) {
  body.has-dock { overflow: hidden; }
  body.has-dock .framewrap {
    display: flex; flex-direction: column;
    height: calc(100vh - 196px); height: calc(100dvh - 196px);
    min-height: 0;
  }
  body.has-dock.dock-min .framewrap { height: calc(100vh - 52px); height: calc(100dvh - 52px); }
  /* СТ-15: увеличенный чат (+65%) — центр и правая колонка поджимаются вверх вслед за ним. */
  body.has-dock.dock-tall .framewrap { height: calc(100vh - 323px); height: calc(100dvh - 323px); }
  /* Единственный грид-ряд = ровно высота каркаса (иначе ряд растёт по контенту и центр не листается). */
  body.has-dock .framewrap .frame { flex: 1 1 auto; min-height: 0; overflow: hidden; grid-template-rows: minmax(0, 1fr); }
  /* СТ-54: scrollbar-gutter — место под полосу прокрутки зарезервировано ВСЕГДА: контент не
     сужается на её ширину, когда страница подрастает (жалоба «окно сузилось на 5–10%»). */
  body.has-dock .frame__main { overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-gutter: stable; min-height: 0; }
  /* Кукла короткая — но на низких окнах пусть тоже листается внутри, а не режется. */
  body.has-dock .frame__left { align-self: stretch; overflow-y: auto; scrollbar-width: thin; min-height: 0; }
  /* Правая колонка: панорама/подпись фиксированы, внутри листается только список «кто на площади». */
  body.has-dock .frame__right { min-height: 0; overflow: hidden; }
  body.has-dock .sidep__side { min-height: 0; }
  body.has-dock .sidep__court { flex: 1 1 auto; min-height: 0; overflow-y: auto; scrollbar-width: thin; }
}

/* === ЭТАЛОН (шаг 3): каменная 2-рядная шапка «Камень+Золото» === */
/* СТАТИЧНАЯ шапка (просьба пользователя): прилипает к верху окна и НИКОГДА не уходит под другие
   панели — z-index выше контента (ниже дока 45 и модалок 50+); в фикс-каркасе и так не движется,
   sticky страхует узкие экраны и любые сценарии с прокруткой страницы. */
.frame__top {
  position: sticky; top: 0; z-index: 40;
  flex: 0 0 auto;   /* в фикс-каркасе шапку не сжимать при нехватке высоты */
  display: flex; flex-direction: column;
  background: var(--et-stone);
  border: 0; border-top: 1px solid var(--et-stone-edge-top); border-bottom: 2px solid var(--et-stone-edge-bot);
  border-radius: 0; overflow: hidden;
  box-shadow: var(--et-stone-shadow);
}
/* Ряд 1: золотой логотип (ширина = колонка куклы) + разделы, смещённые влево над центром.
   Т1 (2026-07-22): левый отступ ряда = отступу грида (12px), зазор бренд↔меню убран — ЛЕВАЯ
   кромка первой кнопки разделов ложится ровно на левую грань центрального окна (12+кукла+gap). */
.frame__bar {
  display: flex; align-items: center; gap: 3px 0; flex-wrap: wrap;
  padding: 6px 36px 2px 12px;   /* справа — место под фиксированный колокольчик #bell (СТ-15: компактный 24px) */
}
/* Логотип: ширина = колонка куклы + зазор (310px эталона). Кегль/разрядка уменьшены, чтобы
   ДЛИННОЕ название варианта («Тени Восточной Империи») ВМЕЩАЛОСЬ и не наезжало на меню. */
.frame__brand { display: flex; align-items: center; gap: 8px; white-space: nowrap; padding: 1px 6px 1px 0; width: calc(var(--et-doll-w, 300px) + var(--et-gap, 10px)); flex: none; min-width: 0; overflow: hidden; }
.frame__brand-mark { display: none; }  /* эталон: чистый золотой текст-логотип без квадратика */
.frame__brand-title {
  font-family: var(--et-font-display); font-weight: 700; font-size: 15px; letter-spacing: 1.5px; text-transform: uppercase;
  background: linear-gradient(var(--et-gold-hi), var(--et-gold-mid) 60%, var(--et-gold-lo));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.55));
}
.frame__nav { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.frame__navlink {
  appearance: none; cursor: pointer; font: 700 13px var(--et-font-display); letter-spacing: 1px;
  padding: 4px 8px; border-radius: 2px; white-space: nowrap;
  color: var(--et-stone-ink); background: transparent; border: 1px solid transparent;
  text-shadow: var(--et-stone-ink-glow);
  transition: color .12s, background .12s;
}
.frame__navlink:hover { color: #000; background: rgba(255,255,255,.18); }
.frame__navlink.is-active { color: #000; background: rgba(255,255,255,.24); box-shadow: inset 0 0 0 1px rgba(0,0,0,.25); }
.frame__navlink:focus-visible { outline: 2px solid var(--et-gold-lo); outline-offset: 1px; }
/* «Выход» — пункт-действие: тёплый оттенок. */
.frame__navlink--exit { color: #5c1f1f; }
.frame__navlink--exit:hover { background: rgba(200,80,80,.22); color: #3a0f0f; }

/* СТ-42 (заказчик 2026-08-12): служебные кнопки админа — отдельный ряд СЛЕВА, ПОД НАЗВАНИЕМ ИГРЫ
   (левая кромка = кромке логотипа, 12px). Видит только админ (layout.js). */
.frame__adminbar { display: flex; align-items: center; gap: 3px; flex-wrap: wrap; padding: 0 12px 3px; }

/* Ряд 2: кнопки-плиты, начинаются НАД вкладками контента (смещение = колонка куклы).
   Т1 (2026-07-22): левая кромка плит = ЛЕВАЯ грань центрального окна (12px грида + кукла + gap) —
   ровно под кнопками разделов ряда 1. */
.frame__subbar {
  display: flex; align-items: center; gap: 3px; flex-wrap: wrap; min-width: 0;
  padding: 3px 12px 7px; padding-left: calc(12px + var(--et-doll-w, 300px) + var(--et-gap, 10px));
  background: transparent; border-top: 0;
}
/* Т1: VIP-магазин — отдельная плита, прижатая к ПРАВОЙ грани центрального окна (правее — только
   кнопка города шириной панорамы; зазор до неё = колоночный gap, за вычетом flex-gap 3px).
   СТ-41 (заказчик 2026-08-10): плита — НАСТОЯЩЕЕ золото (рецепт «шёлка» плашки Банка), значок-звезда —
   в собственной золотой рамке (.frame__vipstar, ставится в layout.js). */
.frame__subtab--vip {
  margin-left: auto;
  color: #241600; font-weight: 800;
  background:
    linear-gradient(115deg, rgba(255,255,255,.5) 0%, rgba(255,255,255,0) 28%, rgba(255,255,255,.22) 46%, rgba(255,255,255,0) 62%, rgba(255,255,255,.32) 100%),
    linear-gradient(160deg, #ffe08a 0%, #cf9a22 55%, #9a6d10 100%);
  border: 1px solid rgba(0,0,0,.45);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 1px 2px rgba(0,0,0,.35);
  text-shadow: 0 1px 0 rgba(255,255,255,.35);
}
.frame__subtab--vip:hover { filter: brightness(1.07); }
.frame__subtab--vip.is-active { filter: brightness(1.12); color: #1c1200; }
.frame__vipstar {
  display: inline-block; min-width: 1.15em; text-align: center;
  margin-right: 2px; padding: 0 2px; border-radius: 3px; line-height: 1.25;
  color: #6b4e10; background: #fff7e0;
  border: 1px solid var(--et-gold-lo, #c9a94e);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6);
}

/* СТ-9: «Вернуться в бой!» — красная плита с ЖИРНОЙ красной линией, только когда идёт бой (layout.js).
   СТ-10: своя auto-маржа слева — вместе с auto у VIP свободное место делится пополам, и кнопка встаёт
   ПО СЕРЕДИНЕ между левой группой вкладок («…Смотреть бои») и плитой VIP (просьба заказчика). */
.frame__subtab--return {
  margin-left: auto;
  color: #fff; font-weight: 800; letter-spacing: .6px;
  background: linear-gradient(#d0402f, #9e2519);
  border: 2px solid #7a1a12;
  box-shadow: 0 0 0 1px rgba(0,0,0,.15), inset 0 1px 0 rgba(255,255,255,.25);
  text-shadow: 0 1px 1px rgba(0,0,0,.35);
}
.frame__subtab--return:hover { background: linear-gradient(#e04a37, #ad2b1d); }
.frame__subtab--return:focus-visible { outline: 2px solid #ffd1c7; outline-offset: 1px; }
/* СТ-87: обёртка кнопок раздела (layout.js) вне грида «Города» невидима для раскладки — ряд плит прежний.
   Стоит ДО медиа-блока: у .frame__tabs--city та же специфичность, побеждает порядок. */
.frame__tabs { display: contents; }
@media (min-width: 1021px) {
  /* СТ-42 (заказчик 2026-08-12): кнопка-название города ЗАКРЕПЛЕНА справа над панорамой города —
     независимо от переносов ряда вкладок (после СТ-32 вкладок столько, что flex-перенос утаскивал
     кнопку влево на новую строку). Ряд резервирует ей место padding-right'ом; min-height держит
     высоту ряда, когда кроме города в нём ничего нет (шапка режет overflow'ом). */
  .frame__subbar { position: relative; padding-right: calc(12px + var(--et-pano-w, 375px) + var(--et-gap, 10px)); min-height: 32px; }
  .frame__citybtn { position: absolute; right: 12px; top: 3px; margin-left: 0; }
  /* СТ-87 (заказчик 2026-09-08, по копии «вариант GPT»): кнопки «Города» — СЕТКОЙ 6 в ряд (6/6/5) над
     центральным окном, VIP — под названием города. Столбцы minmax(0,auto): узкие берут своё, широкие
     делят остаток (при 1440px всё помещается на 11px; уже ~1400px самые длинные подписи режутся «…»). */
  .frame__tabs--city { display: grid; grid-template-columns: repeat(6, minmax(0, auto)); gap: 3px; flex: 1 1 100%; min-width: 0; }
  .frame__tabs--city .frame__subtab { min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: 11px; letter-spacing: 0; padding: 3px 4px; }
  .frame__tabs--city ~ .frame__subtab--vip { position: absolute; right: 12px; top: 34px; margin-left: 0; }
}
/* СТ-87: ноутбук 1366px — центр 647px: на 11px шесть подписей режутся, на 10px/3px помещаются все. */
@media (min-width: 1021px) and (max-width: 1439px) {
  .frame__tabs--city .frame__subtab { font-size: 10px; padding: 3px 3px; }
}
.frame__subtab {
  appearance: none; cursor: pointer; font: 700 12px var(--et-font-display); letter-spacing: .5px;
  padding: 3px 12px; border-radius: 2px; white-space: nowrap;
  color: var(--et-stone-ink);
  background: linear-gradient(var(--et-plate-1), var(--et-plate-2));
  border: 1px solid var(--et-plate-edge);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35);
  text-shadow: 0 1px 0 rgba(255,255,255,.3);
  transition: background .12s;
}
.frame__subtab:hover { background: linear-gradient(var(--et-plate-1-h), var(--et-plate-2-h)); }
.frame__subtab.is-active { background: linear-gradient(#fff, #e4e9ee); color: var(--et-head); }
.frame__subtab:focus-visible { outline: 2px solid var(--et-gold-lo); outline-offset: 1px; }
/* Название города — АКТИВНАЯ тёмная плита с золотом, по центру над окном города (клик = картина на весь экран). */
.frame__citybtn {
  appearance: none; cursor: pointer; margin-left: auto;
  width: var(--et-pano-w, 375px); text-align: center; padding: 3px 0;
  font: 700 14px var(--et-font-display); letter-spacing: 2px;
  color: var(--et-gold-ink);
  background: linear-gradient(var(--et-dark-1), var(--et-dark-2));
  border: 1px solid var(--et-dark-edge); border-radius: 2px;
  box-shadow: inset 0 1px 0 rgba(255,230,170,.15), 0 1px 3px rgba(0,0,0,.5);
  text-shadow: 0 -1px 1px #000;
}
.frame__citybtn:hover { background: linear-gradient(var(--et-dark-1-h), var(--et-dark-2-h)); color: var(--et-gold-ink-hover); }
.frame__citybtn:focus-visible { outline: 2px solid var(--et-gold-mid); outline-offset: 1px; }

/* Полноэкранная картина города (клик по названию). Панорама-SVG кадрируется slice'ом.
   СТ-42: у города с фото — большое фото во весь экран (cover, клик по нему закрывает). */
.cityfull { position: fixed; inset: 0; z-index: 90; background: #0b1017; display: flex; }
.cityfull .city-pano, .cityfull svg { width: 100%; height: 100%; display: block; }
/* contain, не cover: на фото — карта города с подписями по краям, кадрировать её нельзя. */
.cityfull__photo { width: 100%; height: 100%; object-fit: contain; display: block; cursor: zoom-out; }
.cityfull__name {
  position: absolute; top: 26px; left: 0; right: 0; margin: 0; text-align: center;
  font: 700 30px var(--et-font-display); letter-spacing: 4px; text-transform: uppercase;
  color: var(--et-gold-ink); text-shadow: 0 0 22px rgba(240,200,110,.55), 0 2px 4px #000;
}
.cityfull__sub {
  position: absolute; top: 70px; left: 0; right: 0; margin: 0; text-align: center;
  font: italic 14px var(--et-font-display); color: #c9d6e2; text-shadow: 0 1px 3px #000;
}
.cityfull__close {
  position: absolute; top: 16px; right: 20px; cursor: pointer;
  font: 700 13px var(--et-font-display); color: var(--et-gold-ink-dim);
  background: linear-gradient(var(--et-dark-1), var(--et-dark-2));
  border: 1px solid var(--et-dark-edge); border-radius: 2px; padding: 5px 18px;
}
.cityfull__close:hover { color: var(--et-gold-ink-hover); }

/* === ЭТАЛОН (шаги 6–7): ЛЕВАЯ панель — кукла «Камень+Золото» === */
/* Эталон: левая колонка БЕЗ рамки-панели — имя, полосы и кукла лежат прямо на сером фоне. */
.frame__left {
  grid-area: left; min-width: 0; align-self: start;
  background: none; border: 0; box-shadow: none; padding: 0;
}
.frame__left .charp__who { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; margin: 0 2px 5px; }
.frame__left .charp__name { font: 700 15px var(--et-font-display); letter-spacing: .5px; color: var(--text); overflow-wrap: anywhere; }
.charp__lvl { color: #555; font-size: 12px; font-weight: 700; }
.charp__info {
  appearance: none; cursor: pointer; border: 0; background: none; padding: 0 2px;
  color: var(--et-link); font: 700 12px var(--et-font-body);
}
.charp__info:hover { text-decoration: underline; }
/* Полоса HP — ВО ВСЮ ШИРИНУ куклы (от слота шлема до ювелирного блока), НАД сеткой.
   Синяя полоса опыта эталона убрана (СТ-5: читалась «маной», а маны в игре нет). */
/* СТ-16/17: рекорды под куклой — счёт одной строкой (В зелёным / П приглушённо-красным / Н серым +
   винрейт), группы разделены неприметной линией; пустые группы не рисуются (charpanel.recordsBox). */
.charp__records { margin: 8px 2px 4px; font-size: 12px; line-height: 1.45; }
.charp__rec-line { display: flex; flex-wrap: wrap; gap: 1px 8px; }
.charp__rec-seg b { font-variant-numeric: tabular-nums; }
.charp__rec--w { color: #2e7d32; }
.charp__rec--l { color: #a4433f; }   /* красный, но не яркий */
.charp__rec--d { color: #777; }
.charp__rec--wr { color: #555; }
.charp__rec-mode { margin-top: 6px; padding-top: 5px; border-top: 1px solid rgba(0,0,0,.14); font-weight: 700; font-size: 11px; }

.charp__bars { border: 1px solid var(--et-bars-edge); border-bottom: none; background: #111; }
.charp__bar { height: 13px; position: relative; background: #222; border-bottom: 1px solid #000; }
.charp__bar:last-child { border-bottom: none; }
.charp__bar i { position: absolute; inset: 1px auto 1px 1px; background: linear-gradient(var(--et-hp-1), var(--et-hp-2)); }
/* Полоса ВЫНОСЛИВОСТИ (Ф3, STAMINA_ENABLED): СТ-82 (заказчик 2026-09-04) — ВТОРОЙ полосой ПОД HP в той же
   рамке над куклой; голубой градиент, отличимый от зелёной HP. Рисуется только когда сервер прислал stamina. */
.charp__bar--stam i { background: linear-gradient(var(--et-stam-1), var(--et-stam-2)); }
/* СТ-82 (заказчик 2026-09-05): под куклой (где была выносливость) — полоса ОПЫТА в стиле HP/выносливости
   (та же рамка и высота), светло-фиолетовая заливка, подпись — только % текущего уровня; клик → «Прогресс». */
.charp__bars--xp { border: 1px solid var(--et-bars-edge); border-top: none; cursor: pointer; }
.charp__bar--xp i { background: linear-gradient(#c9a7f5, #8b5cf6); }
/* СТ-82: слот «Экипировки» с эмодзи отдела (пока у товара нет картинки); кнопки выбора товара в окне слота. */
.edoll__emoji { font-size: 26px; line-height: 1; pointer-events: none; }
.gear__pick { display: block; width: 100%; margin: 4px 0; text-align: left; }
/* СТ-84: панель экипировки в бою — кнопки как у приёмов; список моих допингов (откат — красным). */
.fight__effects { margin-top: 4px; font-size: 12px; line-height: 1.4; }
.fight__effect.is-debuff { color: #a4433f; }
.fight__items-passive { margin-top: 4px; gap: 4px; }
/* СТ-83: кнопка во время обратного отсчёта («7 · Продать городу…») — тревожный цвет + пульс; клик по ней = отмена. */
.btn.is-arming { background: linear-gradient(#e0574a, #a4302a) !important; color: #fff !important; border-color: #6e1d19 !important; animation: cd-arm 1s steps(2, start) infinite; }
@keyframes cd-arm { 50% { filter: brightness(1.2); } }
.charp__bar span {
  position: absolute; inset: 0; font: 700 10px var(--et-font-body); color: #fff;
  text-align: center; line-height: 13px; text-shadow: 0 1px 1px #000;
}
/* Кукла эталона: слоты 58px ВПЛОТНУЮ, портрет = высоте колонок (5×58), верхние слоты касаются полос. */
.edoll { display: grid; grid-template-columns: var(--et-slot, 58px) 1fr var(--et-slot, 58px); grid-template-rows: var(--et-doll-h, 290px); gap: 0; }
.edoll__col { display: grid; grid-template-rows: repeat(5, var(--et-slot, 58px)); gap: 0; min-width: 0; }
.edoll__slot {
  appearance: none; margin: 0; padding: 0; min-height: 0; font: inherit; cursor: pointer;
  border: 1px solid var(--et-slot-edge); background: linear-gradient(var(--et-slot-1), var(--et-slot-2));
  display: flex; align-items: center; justify-content: center; color: var(--et-slot-ico);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5);
}
.edoll__slot .icon, .edoll__slot svg { width: 26px; height: 26px; }
.edoll__slot.is-filled { color: #3f5a86; background: linear-gradient(#e2e6ee, #c8cfdc); }
.edoll__slot.is-broken { color: var(--danger); }
.edoll__slot:hover { outline: 2px solid var(--et-gold-mid); outline-offset: -2px; }
.edoll__slot:focus-visible { outline: 2px solid var(--et-gold-lo); outline-offset: -2px; }
/* схлопнутые границы: вертикальный стык = одна линия; бок к портрету отдаёт линию портрету */
.edoll__col > * { border-bottom: none; }
.edoll__col > :last-child { border-bottom: 1px solid var(--et-slot-edge); }
.edoll__col--l > * { border-right: none; }
.edoll__col--r > * { border-left: none; }
/* портрет: тёмная комната, образ прижат к низу */
.edoll__portrait {
  position: relative; border: 1px solid var(--et-portrait-edge); background: var(--et-portrait-bg);
  display: flex; align-items: flex-end; justify-content: center; overflow: hidden; min-width: 0;
}
.edoll__portrait .avatar-frame { border: 0; border-radius: 0; background: transparent; display: flex; align-items: flex-end; padding: 0; }
/* Косметическая «рамка образа» (§27) в тёмной комнате куклы гасится: без скругления/подложки/свечения. */
.edoll__portrait .avatar-svg { border: 0; border-radius: 0; box-shadow: none; background: transparent; max-width: 100%; }
/* ювелирный блок: серьги/ожерелье/2 кольца — сплюснутые ряды одного слота */
.edoll__jewel {
  border: 1px solid var(--et-slot-edge); background: linear-gradient(var(--et-slot-1), var(--et-slot-2));
  display: grid; grid-template-rows: 1fr 1fr 1fr; box-shadow: inset 0 1px 0 rgba(255,255,255,.5); min-height: 0;
}
.edoll__jrow, .edoll__ring {
  appearance: none; margin: 0; padding: 0; min-height: 0; font: inherit; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  border: 0; background: none; color: var(--et-slot-ico);
}
.edoll__jrow { border-bottom: 1px solid #9a9a9a; }
.edoll__jrow:last-child { border-bottom: none; }
.edoll__jrow:hover, .edoll__ring:hover { background: rgba(255,255,255,.45); }
.edoll__jrow .icon, .edoll__jrow svg, .edoll__ring .icon, .edoll__ring svg { width: 13px; height: 13px; }
.edoll__jrow.is-filled, .edoll__ring.is-filled { color: #3f5a86; }
.edoll__rings { display: grid; grid-template-columns: 1fr 1fr; min-height: 0; }
.edoll__ring:first-child { border-right: 1px solid #9a9a9a; }

/* === СТ-40: вкладки куклы «Экипировка / Приёмы» + кукла в режиме приёмов ======================
   Решение заказчика 2026-08-10 (вариант «а»): те же ячейки, две вкладки. На вкладке «Приёмы»
   ювелирный блок СЛИТ в одну обычную ячейку 58×58 («Приём 6», как «Шлем»); экипировка живёт
   на своей вкладке нетронутой. Ячейки соперника в бою НЕ рисуются вовсе (раздел G). */
.charp__dolltabs { display: flex; }
.charp__dolltab {
  flex: 1; appearance: none; margin: 0; cursor: pointer; font: 700 11px var(--et-font-body);
  padding: 4px 0; border: 1px solid var(--et-bars-edge); border-bottom: none;
  background: #1c1c1c; color: #9a9a9a; text-transform: uppercase; letter-spacing: .04em;
}
.charp__dolltab + .charp__dolltab { border-left: none; }
.charp__dolltab.is-active { background: #2e2a20; color: var(--et-gold-mid); }
.edoll__slot--tech { position: relative; }
.edoll__slot--tech.is-locked { cursor: default; opacity: .55; }
.edoll__slot--tech.is-locked:hover { outline: none; }
.edoll__icon--ghost { opacity: .3; }
.edoll__techstar { position: absolute; right: 3px; top: 3px; color: #d4a017; }
.edoll__slot--tech .edoll__techstar { width: 12px; height: 12px; }
/* СТ-42: аватарка приёма — на весь слот куклы (звезда эксклюзива остаётся поверх). */
.edoll__techimg { width: 100%; height: 100%; object-fit: cover; display: block; }
/* СТ-42.2: слот с аватаркой кликом УВЕЛИЧИВАЕТ картинку — курсор-лупа подсказывает. */
.edoll__slot--zoom { cursor: zoom-in; }
.charp__stats { margin-top: 2px; }
.charp__stat { display: flex; justify-content: space-between; gap: 8px; padding: 2px 1px; font-variant-numeric: tabular-nums; }
.charp__stat b { font-weight: 700; }
.charp__might { display: flex; justify-content: space-between; align-items: baseline; margin: 6px 0 2px; padding: 5px 8px; background: var(--panel-2); border: 1px solid var(--border); border-radius: 6px; }
.charp__might-l, .charp__might-v { color: var(--might); font-weight: 800; }
.charp__might-v { font-size: 1.1rem; font-variant-numeric: tabular-nums; }
.charp__sep { height: 1px; background: var(--border); margin: 7px 0; opacity: .6; }
.charp__sub { color: var(--muted); font-size: .82rem; }
.charp__sub b { color: var(--text); font-weight: 700; }
.charp__skel { color: var(--muted); text-align: center; padding: 22px 8px; }

/* === ЭТАЛОН (шаг 8): ПРАВАЯ колонка — панорама 375×255 + «кто на площади» до низа === */
.frame__right { grid-area: right; min-width: 0; align-self: stretch; display: flex; flex-direction: column; gap: 8px; }
/* окно «кто на площади» растянуто вниз до уровня низа контента (как в эталоне) */
.frame__right > .panel { flex: 1; }
/* строка-подпись прирастает к панораме (гасим flex-gap колонки) */
.frame__right > .sidep__capbar { margin-top: -8px; }
.sidep__pano { border: 1px solid #4e4e4e; border-radius: 0; overflow: hidden; position: relative; height: var(--et-pano-h, 255px); background: #0e1620; }
/* СТ-42: фото города (реестр cityPhotos.js) заполняет окно панорамы целиком. */
.sidep__photo { width: 100%; height: 100%; object-fit: cover; display: block; }
/* === Ночная панорама эталона (В2): небо-градиент, луна, силуэты домов, тёплые окна, уголки === */
.npn { position: absolute; inset: 0; }
.npn__sky { position: absolute; inset: 0; background: linear-gradient(var(--et-sky-1, #233a52) 40%, var(--et-sky-2, #0e1620)); }
.npn__moon {
  position: absolute; top: 14px; right: 26px; width: 22px; height: 22px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #fdf6d8, #c8b878);
  box-shadow: 0 0 14px rgba(250,240,190,.6);
}
.npn__b { position: absolute; bottom: 0; background: #060a10; }
.npn__w { position: absolute; width: 3px; height: 4px; background: #ffd76a; box-shadow: 0 0 4px #ffb52e; }
/* уголки-стрелки панорамы (декор эталона) */
.npn__c { position: absolute; width: 0; height: 0; border: 11px solid transparent; opacity: .85; }
.npn__c--t { top: 3px; left: 50%; margin-left: -11px; border-bottom-color: #d8d8d8; border-top: none; }
.npn__c--b { bottom: 3px; left: 50%; margin-left: -11px; border-top-color: #d8d8d8; border-bottom: none; }
.npn__c--l { left: 3px; top: 50%; margin-top: -11px; border-right-color: #d8d8d8; border-left: none; }
.npn__c--r { right: 3px; top: 50%; margin-top: -11px; border-left-color: #d8d8d8; border-right: none; }
/* Полноэкранная картина: та же ночь, крупная луна и большие окна. */
.npn--xl .npn__moon { top: 8%; right: 12%; width: 76px; height: 76px; box-shadow: 0 0 60px 12px rgba(250,240,190,.45); }
.npn--xl .npn__w { width: 7px; height: 9px; box-shadow: 0 0 10px 2px #ffb52e; }
.npn--xl .npn__c { display: none; }
/* строка-подпись под панорамой (Возврат·Форум·Подсказка — навигация, как в эталоне) */
.sidep__capbar {
  display: flex; justify-content: space-between; gap: 4px; padding: 2px 8px;
  background: linear-gradient(var(--et-panocap-1), var(--et-panocap-2));
  border: 1px solid var(--et-panocap-edge); border-top: none;
}
.sidep__caplink {
  appearance: none; border: 0; background: none; cursor: pointer; padding: 1px 2px;
  font: 700 10px var(--et-font-display); color: var(--et-link-2); letter-spacing: .4px;
}
.sidep__caplink:hover { text-decoration: underline; }
/* Окно «кто на площади» — светлая карточка эталона (.side): красный Georgia-заголовок с числом,
   «Обновить» справа, строки-ники, галочка автообновления внизу; тянется вниз (flex:1). */
.sidep__side { margin-top: 0; background: var(--et-paper); border: 1px solid var(--et-paper-edge); padding: 6px 8px; font-size: 11px; flex: 1; display: flex; flex-direction: column; }
.sidep__h3 { display: flex; align-items: baseline; gap: 8px; font: 700 12px var(--et-font-display); color: var(--et-head); margin: 0 0 4px; }
.sidep__h3 span:first-child { flex: 1 1 auto; min-width: 0; }
/* СТ-45 (заказчик 2026-08-16): «Обновить» — кнопка со скруглёнными углами, нейтральный светло-серый. */
.sidep__refresh { appearance: none; cursor: pointer; font: 400 10px var(--et-font-body); color: #2b2b2b;
  background: #d9d9d9; border: 1px solid #bfbfbf; border-radius: 8px; padding: 2px 9px; }
.sidep__refresh:hover { background: #e6e6e6; }
/* СТ-8 (просьба заказчика): галочка «Обновлять автомат.» раньше сливалась — обводим её рамкой-плашкой,
   чтобы сразу считывалась как отдельный переключатель. */
.sidep__auto {
  display: flex; align-items: center; gap: 6px; cursor: pointer;
  color: var(--text); font-size: 11px;
  border: 1px solid var(--et-paper-edge, #b8a98a); border-radius: 3px;
  background: rgba(0,0,0,.03);
  padding: 4px 7px; margin-top: 8px;   /* небольшой отступ от списка; авто-прижатие к низу больше не нужно */
}
.sidep__auto:hover { background: rgba(0,0,0,.06); }
.sidep__auto input { flex: none; }
/* СТ-7: комнаты полны ботами-«присутствием» — двор скроллится и без нижнего дока (страховка). */
.sidep__court { display: flex; flex-direction: column; max-height: 72vh; overflow-y: auto; scrollbar-width: thin; }
.sidep__row {
  display: flex; align-items: center; gap: 6px; width: 100%;
  padding: 3px 4px; border: 0; border-bottom: 1px dotted var(--border);
  background: none; cursor: pointer; font: inherit; color: var(--link); text-align: left;
}
.sidep__row:last-child { border-bottom: 0; }
.sidep__row:hover .sidep__nick { text-decoration: underline; }
.sidep__row:focus-visible { outline: 2px solid var(--accent-2); outline-offset: -2px; border-radius: 4px; }
/* combats (Фаза 6): синий квадратик ⓘ у ника «кто в городе». */
.sidep__sq { flex: none; width: 14px; height: 14px; border-radius: 2px; background: var(--link); color: #fff; font-size: 9px; font-weight: 700; line-height: 14px; text-align: center; }
.sidep__nick { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidep__row .charp__sub { margin-left: auto; color: var(--muted); text-decoration: none; }
.sidep__more { color: var(--muted); font-size: .82rem; padding-top: 5px; }

/* === Инвентарь (ре-скин Фаза 4): «Надетое» списком — папердолл живёт в левой панели каркаса === */
.worn { display: flex; flex-direction: column; }
.worn__row { display: grid; grid-template-columns: 20px 84px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 5px 4px; border-bottom: 1px dotted var(--border); }
.worn__row:last-child { border-bottom: 0; }
.worn__row.is-broken .worn__name { color: var(--danger); }
.worn__icon { width: 18px; height: 18px; color: var(--muted); }   /* combats (Фаза 6): тип слота */
.worn__slot { color: var(--muted); font-size: .76rem; text-transform: uppercase; letter-spacing: .3px; }
.worn__name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.worn__btn { min-height: auto; padding: 4px 10px; }

/* В каркасе экран не сужает себя до мобильной колонки — ширину задаёт .frame__main. */
.frame .screen { max-width: none; margin: 0; padding: 0; }
.frame .screen--auth { padding-top: 0; }

/* Телефон/планшет: разделы и подвкладки — прокручиваемые ленты, всё остаётся доступным. */
@media (max-width: 900px) {
  .frame__nav, .frame__subbar {
    flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin;
  }
  .frame__navlink { font-size: .86rem; padding: 4px 9px; }
  .frame__subtab { font-size: .8rem; padding: 4px 9px; }
}

/* ==================== СТ-76: экран «БОНУСЫ» (screens/bonuses.js) ==================== */
/* СТ-76: обычная подвкладка «Персонажа» по центру (тумблер-окно СТ-75 отменено заказчиком). */
.bonuses__h { margin: 8px 0 4px; font-size: .92rem; opacity: .85; }
.bonuses__empty { margin: 2px 0 6px; }

/* ==================== СТ-78: экран «ПРОГРЕСС» (screens/progress.js) ==================== */
.prog__bar { height: 10px; border-radius: 5px; background: var(--panel-2, #10131a); border: 1px solid var(--border, #2a2f3a); overflow: hidden; margin: 6px 0 10px; }
.prog__fill { height: 100%; background: var(--accent, #d9a62e); }
.prog__wrap { max-height: 52vh; overflow-y: auto; border: 1px solid var(--border, #2a2f3a); border-radius: 8px; }
.prog__table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.prog__table th { position: sticky; top: 0; background: var(--panel, #171b24); text-align: left; padding: 6px 10px; border-bottom: 1px solid var(--border, #2a2f3a); }
.prog__table td { padding: 4px 10px; border-bottom: 1px dashed var(--border, #2a2f3a); }
.prog__table tr.is-current td { background: rgba(217, 166, 46, .14); font-weight: 700; }

/* ==================== СТ-80: барахолка товаров (screens/flea.js renderGoods) ==================== */
.goods__form { margin-bottom: 10px; }
.goods__formrow { flex-wrap: wrap; align-items: flex-end; gap: 8px; }
.goods__select { min-width: 180px; max-width: 100%; }
.buffrow { padding: 5px 0; border-bottom: 1px dashed var(--border, #2a2f3a); display: flex; flex-direction: column; gap: 2px; }
.buffrow:last-child { border-bottom: none; }
.buffrow.is-neg .buffrow__text { color: var(--danger, #c6414a); }
.buffrow__left { font-size: .85em; }