/* Башня Смерти — стиль эпохи БК 2004: светлый фон, Verdana 12px, синие ссылки,
   серые панели, ретро-кнопки. Собственный CSS, воспроизводящий дух оригинала. */

/* Сетка размеров (09-интерфейс, решение Mike): все размеры пропорциональны
   экрану — горизонтали в vw с пределами читаемости, вертикали текстовых зон
   в em. Картинки рисуются под эти рамки (портрет 2:3 300×450, иконка 96×96,
   тайл клетки 88×88 — исходники 2×). В шаблонах — только эти переменные. */
:root {
  /* размеры сетки: +10% и ещё +10% (решения Mike, 2026-07-18) */
  --кл: clamp(32px, 2.9vw, 53px);      /* клетка карты, 1:1 */
  --икона: clamp(34px, 3.15vw, 53px);  /* иконка предмета / стрелка, 1:1 */
  --слот: clamp(121px, 11.5vw, 179px); /* колонка слотов куклы (W пропорций) */
  --портрет: clamp(117px, 10.9vw, 182px); /* портрет персонажа, 2:3 */
  --шкала: clamp(85px, 9.7vw, 157px);  /* шкала таймера */
  --контент: min(97vw, 1500px);        /* колонка контента */
  /* зона онлайна чата; +15% к исходной (правка Mike 2026-07-20) */
  --онлайн: clamp(127px, 13.8vw, 207px);
}
* { box-sizing: border-box; }
/* шкала прокрутки окна скрыта (правка Mike) — колесо/тачпад работают */
html { scrollbar-width: none; }
html::-webkit-scrollbar, body::-webkit-scrollbar { display: none; }
body {
  background: #e8e3d9; color: #000;
  font: 12px Verdana, Arial, sans-serif; margin: 0; line-height: 1.45;
  /* страница всегда ровно в окно — само окно не скроллится и полос не даёт
     (правка Mike 2026-07-20: двухстрочная шапка распирала 100vh) */
  height: 100vh; display: flex; flex-direction: column; overflow: hidden;
}
a { color: #295fa6; }
a:hover { color: #cc0000; }

/* Каркас как в БК: шапка → контент → чат нижним фреймом на всю ширину */
.top {
  background: #3b3b3b; color: #e8e8e8;
  border-bottom: 2px solid #8a8a8a; padding: 7px 14px;
  display: flex; justify-content: space-between; align-items: center;
}
.top a { color: #ffcc66; text-decoration: none; }
.top a:hover { text-decoration: underline; }
.brand { letter-spacing: 2px; font-weight: bold; color: #cc3322; }
.brand a { color: #cc3322; }
.me { font-size: 11px; }
.top { flex-shrink: 0; }
.layout { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.content { flex: 1; padding: 12px 16px; max-width: var(--контент); overflow-y: auto; width: 100%; margin: 0 auto;
           /* шкала сдвига скрыта — появляясь, дёргала ширину (правка Mike);
              прокрутка колесом/тачпадом работает как раньше */
           scrollbar-width: none;
           /* центрирование рабочей зоны (правка Mike 2026-07-20):
              --Л — левый край колонки инвентаря (третья колонка char-layout),
              --С — сдвиг вправо на половину свободного места справа от зоны
              (ширина зоны = --Л + 578px карточек); размер зоны не меняется */
           --Л: calc(25% + max(205px, 15%) + 2 * clamp(18px, 3vw, 52px));
           --С: max(0px, calc((100% - var(--Л) - 578px) / 2)); }
.content::-webkit-scrollbar { display: none; }
.chat {
  height: clamp(142px, 20vh, 242px); flex-shrink: 0;
  border-top: 2px solid #8a8a8a; background: #f4f0e7;
  padding: 6px 10px 4px;
  font-size: 12px;                  /* текст чата +10% (правка Mike) */
  display: flex; flex-direction: column;
  position: relative;
}
/* утолщение-ручка по центру верхней границы: тянуть вверх/вниз (Mike) */
.chat-ручка {
  position: absolute; top: -5px; left: 50%; transform: translateX(-50%);
  width: 72px; height: 8px; border-radius: 4px;
  background: #8a8a8a; cursor: ns-resize;
}
.chat-ручка:hover { background: #6f6f6f; }
.chat-footer {
  flex-shrink: 0; margin-top: 5px; padding-top: 3px;
  border-top: 1px solid #d9d9d9; color: #a5a5a5;
  font-size: 10px; text-align: center;
}
.chat-footer a { color: #a09a7d; text-decoration: none; }
.chat-footer a:hover { text-decoration: underline; }
.chat .cap { color: #666; font-weight: bold; font-size: 10px; text-transform: uppercase; margin-bottom: 3px; }
.chat .chat-body { flex: 1; display: flex; gap: 8px; min-height: 0; }
.chat .chat-left { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.chat .messages { flex: 1; overflow-y: auto; }
/* зона онлайна справа (09-интерфейс): ЛКМ — профиль, ПКМ — публично/приват */
.chat .online {
  width: var(--онлайн); border-left: 1px solid #d0d0d0;
  padding-left: 8px; overflow-y: auto;
}
.chat .online-list a { display: block; padding: 1px 0; text-decoration: none; }
.chat .online-list a:hover { text-decoration: underline; }
/* окно персонажа внутри игры (решение Mike 2026-07-20) */
.модал-фон {
  position: fixed; inset: 0; z-index: 100; display: none;
  background: rgba(0, 0, 0, .55);
  align-items: center; justify-content: center;
}
.модал {
  width: min(900px, 94vw); height: min(86vh, 680px);
  background: #f4f0e7; border: 2px solid #6b6b5a;
  box-shadow: 0 10px 42px rgba(0, 0, 0, .6);
  display: flex; flex-direction: column;
}
.модал-шапка {
  display: flex; justify-content: space-between; align-items: center;
  background: #3b3b3b; color: #e8e8e8; font-size: 11px;
  padding: 4px 8px; letter-spacing: 1px;
}
.модал-закрыть { cursor: pointer; padding: 0 4px; color: #ffcc66; }
.модал-закрыть:hover { color: #fffdf7; }
.модал-рама { border: 0; flex: 1; width: 100%; background: #fffdf7; }

.chat-menu {
  position: fixed; z-index: 50; background: #fffdf7; border: 1px solid #9a9a9a;
  box-shadow: 2px 2px 4px rgba(0,0,0,.25); font-size: 11px; display: none;
}
.chat-menu div { padding: 4px 14px; cursor: pointer; }
.chat-menu div:hover { background: #efe9dc; }
.chat .msg { padding: 1px 0; }
/* логины в чате обычные (синие); красный — только у обращающегося в приват */
.chat .msg .nick { color: #295fa6; font-weight: bold; }
.chat .msg .nick.private { color: #cc0000; }
.chat .input-row { display: flex; gap: 5px; margin-top: 5px; }
.chat input[type=text] {
  flex: 1; background: #fffdf7; border: 1px solid #7f9db9; color: #000;
  font: 12px Verdana, sans-serif; padding: 3px 6px;
}
.chat .soon { color: #999; }
/* вкладки чата: лёгкая теневая окантовка, ряд прижат вправо до зоны
   онлайна с зазором в 1/10 ширины чата (правки Mike 2026-07-20) */
.chat .chat-tabs-row {
  display: flex; gap: 8px; justify-content: flex-end;
  padding-right: calc(var(--онлайн) + 10%);
}
.chat .chat-tab {
  cursor: pointer; color: #295fa6;
  background: #f0ece3; padding: 2px 10px; border-radius: 3px;
  box-shadow: 0 0 2px rgba(0, 0, 0, .25);
}
.chat .chat-tab.active { color: #000; background: #fffdf7;
                         border-bottom: 2px solid #cc3322; }
/* неактивная вкладка (вне боя): видна, но не кликается */
.chat .chat-tab.выкл { color: #b0b0b0; cursor: default;
                       box-shadow: 0 0 2px rgba(0, 0, 0, .12); }
.chat .msg .nick { text-decoration: none; }
.chat .msg .nick:hover { text-decoration: underline; }

h1 { font-size: 15px; color: #7a1010; letter-spacing: 1px; margin: 0 0 12px; font-weight: bold; }
h2 { font-size: 12px; color: #444; font-weight: bold; text-transform: uppercase; margin: 14px 0 6px; }
.death {
  color: #555; font-style: italic; background: #f4f0e7;
  border: 1px solid #b5b5b5; padding: 8px 10px; margin: 10px 0;
}

/* Меню лобби */
.menu { list-style: none; padding: 0; margin: 0; }
.menu li { padding: 6px 2px; border-bottom: 1px solid #d0d0d0; }
.menu .soon { color: #999; }

/* Панели и «бойцовские» карточки */
.arena { display: flex; gap: 10px; flex-wrap: wrap; }
.fighter {
  flex: 1; min-width: 280px; background: #fffdf7;
  border: 1px solid #9a9a9a; padding: 8px 10px;
}
.fname { font-weight: bold; font-size: 13px; }
.fweap { color: #555; }
.fstat { color: #777; font-size: 11px; }
.panel {
  display: flex; gap: 18px; flex-wrap: wrap; background: #f4f0e7;
  border: 1px solid #9a9a9a; padding: 8px 10px; margin: 10px 0;
}
.col { display: flex; flex-direction: column; gap: 2px; }
.cap { color: #666; font-weight: bold; font-size: 10px; text-transform: uppercase; margin-bottom: 3px; }
label { cursor: pointer; }

/* Кнопки: спокойные, в тон фона, без ретро-объёма — формат кнопки «Удар!»
   на весь проект, чуть ниже и с поджатым текстом (решение Mike) */
/* кнопки: без рамки — мягкий теневой ореол, уходящий в фон
   (правка Mike 2026-07-20) */
button {
  background: #e8e4da; color: #333; font: 11px/1.2 Verdana, sans-serif;
  border: none; border-radius: 4px;
  padding: 3px 13px; cursor: pointer; margin-top: auto;
  box-shadow: 0 0 2px rgba(0, 0, 0, .28);
}
button:hover:not(:disabled) {
  background: #dfdbd1;
  box-shadow: 0 0 3px rgba(0, 0, 0, .34);
}
button:active {
  background: #d4cfc5;
  box-shadow: 0 0 1px rgba(0, 0, 0, .30);
}
button:disabled { color: #999; cursor: default; box-shadow: 0 0 2px rgba(0, 0, 0, .14); }
/* распределение статов: визуально только «+» на общем фоне (решение Mike) */
.plusbtn {
  background: none; border: none; padding: 0 4px; margin: 0;
  font: bold 14px Verdana, sans-serif; color: #295fa6; line-height: 1;
  box-shadow: none;
}
.plusbtn:active { border: none; background: none; }
button.plusbtn:hover { color: #cc0000; background: none; }
/* выброс вещи: неброская текстовая кнопка, красная при наведении */
.dropbtn {
  background: none; border: none; padding: 0; margin: 0;
  font-size: 10px; color: #888; text-decoration: underline;
  box-shadow: none;
}
.dropbtn:active { border: none; background: none; }
button.dropbtn:hover { color: #cc0000; background: none; }
/* выбранные радио/чекбоксы — тёмные, не ярко-синие (решение Mike) */
input[type=radio], input[type=checkbox] { accent-color: #4f545c; }
input[type=text], input[type=password] {
  background: #fffdf7; border: 1px solid #7f9db9; color: #000;
  font: 12px Verdana, sans-serif; padding: 3px 6px;
}

/* «Кукла» персонажа как в БК: колонки слотов по бокам, фигура в центре.
   Пропорции (решение Mike, 2026-07-18, финальные): фигура не меняется,
   её высота H делится на 10 частей:
   лево  = шлем 2 + наручи 1 + оружие 2 + броня 3 + пояс 1 (= 9)
           + 1 часть на 4 отступа (по 0.025H) → ровно H;
   право = амулет 1 + кольца 0.5 (квадраты) + перчатки 1 + оружие2/щит 2
           + поножи 3 + ботинки 1.5 (= 9) + 1 часть на 5 отступов (0.02H) → H.
   Ширина колонок — от ряда колец: 3×0.05H + 2×0.02H = 0.19H, одна для всех. */
.doll { --кукла-h: calc(var(--портрет) * 2);
        /* ячейки слотов на 10% крупнее центральной части (решение Mike):
           все размеры колонок считаются от --ячейка-h = 1.1H */
        --ячейка-h: calc(var(--кукла-h) * 1.1);
        display: flex; gap: 8px;
        align-items: flex-start; }
/* вертикальные зазоры ещё вдвое меньше (решение Mike): лево 0.00625H,
   право 0.005H; между кольцами по горизонтали остаётся 0.01H, чтобы
   визуально не сбить; ширина колонок = 3×0.05H + 2×0.01H = 0.17H */
.slotcol { display: flex; flex-direction: column; flex: 0 0 auto;
           width: calc(var(--ячейка-h) * 0.17); }
.slotcol.левая { gap: calc(var(--ячейка-h) * 0.00625); }
.slotcol:not(.левая) { gap: calc(var(--ячейка-h) * 0.005); }
.slotrow { display: flex; gap: calc(var(--ячейка-h) * 0.01); }
.slotrow .slot {
  flex: 0 0 auto; width: calc(var(--ячейка-h) * 0.05);
  height: calc(var(--ячейка-h) * 0.05); padding: 1px 3px;
}
.slot {
  /* фон ячеек чуть светлее общего фона страницы #e8e3d9 (решение Mike) */
  border: 1px solid #9a9a9a; background: #f4f0e7;
  padding: 2px 6px; font-size: 11px; position: relative; overflow: hidden;
}
.slot-шлем    { height: calc(var(--ячейка-h) * 0.2); }
.slot-наручи  { height: calc(var(--ячейка-h) * 0.1); }
.slot-оружие  { height: calc(var(--ячейка-h) * 0.2); }
.slot-торс    { height: calc(var(--ячейка-h) * 0.3); }
.slot-пояс    { height: calc(var(--ячейка-h) * 0.1); }
.slot-амулет  { height: calc(var(--ячейка-h) * 0.1); }
.slot-перчатки{ height: calc(var(--ячейка-h) * 0.1); }
.slot-щит     { height: calc(var(--ячейка-h) * 0.2); }
.slot-поножи  { height: calc(var(--ячейка-h) * 0.3); }
.slot-сапоги  { height: calc(var(--ячейка-h) * 0.15); }
.slot .sname { color: #999; font-size: 9px; text-transform: uppercase; display: block; }
.slot .iname { color: #000; }
.slot .empty { color: #bbb; }
/* арт вещи в ячейке: вписан без искажений; multiply убирает белый фон
   сгенерированных картинок на любом светлом фоне */
.slot .slot-art { position: absolute; inset: 2px; width: calc(100% - 4px);
                  height: calc(100% - 4px); object-fit: contain;
                  mix-blend-mode: multiply; }
.item-img .item-art { width: 100%; height: 100%; object-fit: contain;
                      mix-blend-mode: multiply; }
/* снятие вещи: вся ячейка — зона кнопки, без видимого крестика (решение Mike) */
.slot .takeoff { position: absolute; inset: 0; margin: 0; }
.slot .takeoff button {
  display: block; width: 100%; height: 100%; padding: 0; margin: 0;
  background: none; border: none; cursor: pointer;
  box-shadow: none; border-radius: 0;
}
.slot .takeoff button:hover { background: rgba(0, 0, 0, 0.06); }
.slot .takeoff button:active { border: none; }
/* колонка фигуры: шкала HP ровно по ширине фигуры, чуть выше неё —
   вне потока, чтобы фигура и ячейки шли вровень по верху (решение Mike) */
.figure-col { flex: 0 0 var(--портрет); display: flex; flex-direction: column;
              position: relative; }
/* шкала чуть выше фигуры, ровно по её ширине; цифры HP выносятся вправо —
   над правую колонку ячеек (решение Mike) */
.hpwrap { position: absolute; bottom: calc(100% + 6px); left: 0; width: 100%; }
.hpwrap .hpnum { position: absolute; left: calc(100% + 6px);
                 top: 50%; transform: translateY(-50%); }
/* логин — на одной линии со шкалой HP, слева от неё, чуть меньше
   (правка Mike 2026-07-20); зеркально цифрам HP */
.hpwrap .hpname { position: absolute; right: calc(100% + 8px);
                  top: 50%; transform: translateY(-50%);
                  font: bold 11px Verdana, sans-serif; white-space: nowrap; }
.hpwrap .hpname .ур { color: #777; font-weight: normal; }
.figure {
  /* центральная кукла не меняется (решение Mike): высота H задаёт пропорции;
     фон — чёрная радиальная виньетка как в БК, силуэт Mike поверх */
  border: 1px solid #9a9a9a;
  background: radial-gradient(ellipse at 50% 42%, #2c2c2c 0%, #101010 62%, #000 100%);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; height: var(--кукла-h); position: relative; overflow: hidden;
}
.figure .silhouette { font-size: calc(var(--портрет) * 0.5); line-height: 1; }
/* силуэт-арт с встроенной виньеткой 1:2 — заполняет ячейку (cover) */
.figure .portrait { position: absolute; inset: 0; width: 100%; height: 100%;
                    object-fit: cover; }
.figure .fname { font-size: 13px; }

/* Страница персонажа как в БК: кукла 1/4 | характеристики | инвентарь
   (доли — решение Mike), остаток пространства уходит в отступы между зонами;
   зона характеристик без фона и рамки */
/* средняя колонка не уже 190px — строки показателей («Мощность крита: ×2.10»)
   не переносятся (решение Mike) */
.char-layout { display: grid; grid-template-columns: 25% minmax(205px, 15%) auto;
               gap: clamp(18px, 3vw, 52px); align-items: start;
               /* сдвиг зоны к центру без изменения её размеров (Mike) */
               position: relative; left: var(--С, 0px); }
.char-left { min-width: 0; }
.char-mid { min-width: 0; }
.char-mid .fighter { min-width: 0; background: none; border: none; padding: 0; }
.req-bad { color: #cc0000 !important; }
.char-right { min-width: 0; }
.char-right .log { max-height: 55vh; }
.effect-line {
  display: flex; justify-content: space-between; gap: 8px;
  font-size: 11px; padding: 1px 0; border-bottom: 1px dotted #e8e4da;
}

/* Карточка вещи в инвентаре — как в БК: картинка слева с кнопкой под ней,
   справа имя и строки-атрибуты (09-интерфейс) */
.item-card {
  /* фон карточек чуть светлее общего фона страницы #e8e3d9 (решение Mike) */
  display: flex; gap: 14px; background: #f4f0e7;
  border: 1px solid #9a9a9a; padding: 8px 10px; margin-bottom: 6px;
  border-radius: 4px;               /* скругление как у вкладок (Mike) */
  /* кнопка под картинкой не вылезает за рамку при коротком описании
     (правка Mike 2026-07-20): минимум — колонка картинки с кнопкой */
  min-height: calc(var(--икона) * 1.7 + 46px);
}
.item-pic { display: flex; flex-direction: column; align-items: center; gap: 5px; }
.item-img {
  width: calc(var(--икона) * 1.7); height: calc(var(--икона) * 1.7);
  /* окантовка вещей в карточках убрана (проба Mike 2026-07-20) */
  border: none; background: none;
  display: flex; align-items: center; justify-content: center;
  font-size: calc(var(--икона) * 0.9);
}
/* ячейка карточки = ячейка куклы по размеру и виду (решение Mike):
   доли от высоты куклы 2.2×портрет, как в .slot-* */
[class*="яч-"] { border: 1px solid #9a9a9a; background: #f4f0e7;
                 width: calc(var(--портрет) * 0.374); }
.яч-шлем, .яч-оружие, .яч-щит { height: calc(var(--портрет) * 0.44); }
.яч-торс, .яч-поножи { height: calc(var(--портрет) * 0.66); }
.яч-сапоги { height: calc(var(--портрет) * 0.33); }
.яч-наручи, .яч-пояс, .яч-амулет, .яч-перчатки { height: calc(var(--портрет) * 0.22); }
.яч-кольцо { width: calc(var(--портрет) * 0.11); height: calc(var(--портрет) * 0.11); }
/* кольцо в КАРТОЧКЕ крупнее ячейки куклы — эмодзи/арт не вылезает за рамку
   (правка Mike 2026-07-19); на кукле ячейка остаётся мелкой */
.item-pic .яч-кольцо { width: calc(var(--портрет) * 0.22);
                       height: calc(var(--портрет) * 0.22);
                       font-size: calc(var(--портрет) * 0.15); }
/* в карточках инвентаря/лавок вещь без окантовки (проба Mike 2026-07-20);
   правило после [class*="яч-"], чтобы перебить рамку ячеек */
.item-pic .item-img { border: none; background: none; }
/* эликсиры/свитки не носятся — квадрат прежнего размера в стиле ячейки */
.яч-иконка { width: calc(var(--икона) * 1.7); height: calc(var(--икона) * 1.7); }
/* надпись строго по центру кнопки (правка Mike 2026-07-20):
   на 5% уже ячейки, симметричные поля, без наследуемого margin-top */
.item-pic button { margin: 0; padding: 2px 0; width: calc(var(--икона) * 1.45);
                   text-align: center; line-height: 1.3; }
/* лут на этаже: вещь сама — кнопка подбора, без надписи «взять» (решение Mike);
   ячейка как в инвентаре, при перезарядке/бое — приглушена */
button.loot-btn { padding: 0; margin: 0; border: 1px solid #c5c5c5; }
button.loot-btn:active { border: 1px solid #c5c5c5; }
button.loot-btn:hover:not(:disabled) { background: #fffbe8; }
button.loot-btn:disabled { opacity: 0.45; }
/* вертикальный разделитель между картинкой и описанием — как линия между
   характеристиками и боевыми показателями (правка Mike 2026-07-20) */
.item-info { flex: 1; font-size: 11px;
             border-left: 1px solid #b9b9b9; padding-left: 14px; }
.item-info .iname-big { font-size: 12px; font-weight: bold; }
.item-info .attr { color: #444; padding: 1px 0; }
.item-info .attr .lbl { color: #888; }

/* Вкладки инвентаря (как в БК) */
.tabs { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: -1px; }
/* верхняя навигация меты выровнена по левому краю колонки инвентаря —
   на одной вертикали с нижними вкладками (правка Mike 2026-07-20);
   формула — третья колонка char-layout: 25% + minmax(205px,15%) + два gap;
   на неширокихэкранах прижимается, чтобы панель (~600px) влезала */
.tabs.нав-мета { width: fit-content; max-width: 100%;
                 margin-left: max(0px, min(
                   calc(var(--Л) + var(--С)),
                   calc(100% - 600px))); }
/* вкладки в стиле кнопок (правка Mike 2026-07-20): без рамки, мягкий
   теневой ореол; снизу тень подрезана — вкладка сливается с листом */
.tab {
  border: none; background: #eae6dc;
  padding: 4px 13px; font-size: 11px; text-decoration: none; color: #295fa6;
  border-radius: 4px 4px 0 0;
  box-shadow: 0 0 2px rgba(0, 0, 0, .28);
  clip-path: inset(-6px -6px 0 -6px);
  white-space: nowrap;               /* вкладки в одну строку (правка Mike) */
}
.tab:hover:not(.active) {
  background: #f3efe6;
  box-shadow: 0 0 3px rgba(0, 0, 0, .34);
}
.tab.active {
  background: #fffdf7; color: #000; font-weight: bold;
  box-shadow: 0 0 3px rgba(0, 0, 0, .32);
}

/* Справочные таблицы (таблица опыта и т.п.) */
.xt { border-collapse: collapse; margin: 10px 0; background: #f4f0e7; }
.xt th, .xt td { border: 1px solid #9a9a9a; padding: 4px 12px; font-size: 12px; text-align: left; }
.xt th { background: #d9d9d9; font-size: 10px; text-transform: uppercase; color: #555; }
.xt .here { background: #f5efc9; }

/* dev-смотровая карты этажа (веха 4): сетка клеток, цвета локаций */
.devmap { border-collapse: collapse; margin: 10px 0; }
.devmap td { width: 22px; height: 22px; font-size: 10px; text-align: center; padding: 0; }
.devmap .c { border: 1px solid #999; cursor: default; }
.devmap .v { border: none; }
.devmap .kor, .devkey.kor { background: #e9e9e9; }
.devmap .tup, .devkey.tup { background: #d9c9a9; }
.devmap .r0, .devkey.r0 { background: #f3c6c6; }
.devmap .r1, .devkey.r1 { background: #c6d6f3; }
.devmap .r2, .devkey.r2 { background: #c9ecc9; }
.devmap .r3, .devkey.r3 { background: #ead9f5; }
.devmap .r4, .devkey.r4 { background: #f5ecc0; }
.devmap .r5, .devkey.r5 { background: #c9e8e8; }
.devmap .r6, .devkey.r6 { background: #f3d9c0; }
.devkey { display: inline-block; width: 11px; height: 11px; border: 1px solid #999;
          vertical-align: -1px; margin-right: 3px; }

/* Экран поединка как в БК: бойцы слева и справа, формы боя между ними;
   бойцы ближе друг к другу — арена собрана к центру, узкая средняя зона
   (решение Mike) */
/* обёртка арена+лог: ширину задаёт арена, лог ложится ровно под ней —
   от левого края первого бойца до правого края второго (решение Mike) */
.duel-wrap { width: fit-content; margin: 0 auto; display: flex;
             flex-direction: column; flex: 1 1 auto; min-height: 0; }
.duel-wrap .log { width: 0; min-width: 100%; max-width: none; }
/* строка сторон под ареной: ниже характеристик, на всю ширину арены,
   при мультибое ложится длинной строкой (решение Mike) */
.sides-line { width: 0; min-width: 100%; text-align: center;
              margin-top: 8px; font-size: 12px; }
/* кнопка удара: тот же формат, но крупнее — главная кнопка боя;
   чуть ниже прежнего, текст поджат (решение Mike) */
.udar-btn {
  background: #d9d9d9; border: 1px solid #a8a8a8; color: #333;
  font: bold 12px/1.2 Verdana, sans-serif; padding: 4px 26px; cursor: pointer;
}
.udar-btn:hover { background: #d4cfc5; }
.udar-btn:active { background: #c9c4ba; border-style: solid; }
.duel-arena { display: flex; align-items: stretch;
              /* арена по ширине содержимого, зазоры равные с обеих сторон */
              width: fit-content; margin: 0 auto; gap: 18px 40px;
              /* узкое окно: карточки переносятся, а не режутся краем
                 (правка Mike 2026-07-20 — «вёрстка поплыла») */
              flex-wrap: wrap; justify-content: center; max-width: 100%; }
.duel-side {
  /* фон общий со страницей, без рамок (решение Mike);
     ширина по кукле (min-content) — строки статов переносятся и не
     распирают карточку, зазоры арены одинаковы с обеих сторон */
  flex: 0 0 auto; background: transparent; border: none;
  /* без горизонтальных полей: край карточки = край ячеек, лог ровно под ними */
  padding: 8px 0; text-align: center; width: min-content;
}
.duel-side .portrait { font-size: calc(var(--портрет) * 0.66); line-height: 1.2; margin: 8px 0; }
.hpbar {
  height: 8px; background: #c03a2b; border: 1px solid #777;
  margin: 0;
}
.hpbar .fill { height: 100%; background: #3f9c35; }
.hpnum { font-size: 9px; color: #444; font-weight: bold; white-space: nowrap; }
.duel-mid {
  /* ширина по содержимому (отступы вокруг ровные), вертикально по центру;
     дополнительный воздух с обеих сторон — в ширину ячейки кольца */
  flex: 0 0 auto; background: transparent; border: none;
  padding: 10px calc(var(--портрет) * 0.11);
  font-size: 12px; align-self: center;
}
/* Кукла внутри боя — компактнее: H меньше, пропорции 10 частей те же */
.duel-side .doll { --кукла-h: calc(var(--портрет) * 1.5);
                   justify-content: center; margin-top: 6px; }
.duel-side .slot { font-size: 10px; }
.duel-side .figure-col { flex: 0 0 calc(var(--портрет) * 0.75); }
.duel-side .figure { min-height: calc(var(--портрет) * 1.125); }
/* шкала HP вне потока — куклам с ней нужен запас сверху (после дуэльных
   правил, чтобы перебить их margin-top) */
.doll.есть-hp { margin-top: 22px; }
.duel-side .figure .silhouette { font-size: calc(var(--портрет) * 0.36); }

/* Газетный лог боя — на общем фоне страницы, без рамки; по центру,
   ровно под рабочей зоной арены (решение Mike) */
.log {
  background: transparent; border: none;
  padding: 6px 0; max-height: 40vh; overflow: auto; font-size: 11px;
  width: 100%; max-width: 1080px; margin-left: auto; margin-right: auto;
}
/* Шкала перезарядки/таймера: ширина от сетки, тонкая линия */
.kd-полоса {
  display: inline-block; width: var(--шкала); height: 0.5em;
  background: #ddd; border: 1px solid #999; vertical-align: middle;
}
.kd-bar { display: block; height: 100%; background: #a00; }
.line { padding: 2px 0; border-bottom: 1px solid #f0ece3; }
.round { color: #888; margin-top: 5px; font-size: 10px; }
.sys { color: #7a1010; font-style: italic; }
.miss { color: #999; }
.block { color: #295fa6; }
.dodge { color: #1a7a8a; }
.crit { color: #cc0000; font-weight: bold; }
.pierce { color: #a06a00; font-weight: bold; }
.hit { color: #000; }
b { color: #000; }
.hint { color: #888; font-size: 11px; margin-top: 12px; }

/* окно вещи (решение Mike 2026-07-19): иконка-ссылка без подчёркивания */
.item-link { text-decoration: none; color: inherit; cursor: pointer; }
.iname-big .item-link:hover { text-decoration: underline; }

/* ── Врата (стартовая, решение Mike 2026-07-19): стилистика стартовой
   combats.com — чёрный экран, всё по центру, линии-разделители ── */
body.врата {
  background: #000; color: #c9c9c9; display: flex; min-height: 100vh;
  align-items: center; justify-content: center; margin: 0;
  font: 12px Verdana, sans-serif;
  /* вратам общий запрет прокрутки не нужен: длинные экраны (регистрация)
     листаются, полоса скрыта общим правилом html */
  height: auto; flex-direction: row; overflow: visible;
}
.врата-центр { text-align: center; max-width: 560px; padding: 24px; }
.врата-лого { display: block; width: 100%; max-width: 470px; margin: 10px auto 4px; }
.врата-линия { border: none; border-top: 1px solid #3a3a2c; margin: 16px 0; }
.врата-цитата { color: #777; font-style: italic; margin: 10px 0 18px; line-height: 1.5; }
body.врата input[type=text], body.врата input[type=password] {
  background: #101010; border: 1px solid #4a4a3a; color: #ddd;
  padding: 5px 7px; width: 210px; font: 12px Verdana, sans-serif;
}
body.врата button {
  background: #22221c; color: #cfc9a6; border: 1px solid #55543f;
  padding: 5px 20px; font: 11px Verdana, sans-serif; cursor: pointer;
}
body.врата button:hover { background: #2e2e24; }
.врата-форма { display: flex; flex-direction: column; gap: 7px; align-items: center; }
.врата-ссылки { margin-top: 4px; color: #555; }
.врата-ссылки a { color: #9a9a7a; text-decoration: none; margin: 0 9px; }
.врата-ссылки a:hover { text-decoration: underline; }
body.врата .sys {
  background: #1a1a14; border: 1px solid #4a4a3a; color: #d3c089;
  padding: 6px 10px; margin-bottom: 12px;
}

/* ── Инфо-блоки в БК-стиле (решение Mike 2026-07-19, по скрину статов БК):
   значения — жирный тёмно-синий, секции разделены серыми линиями,
   ключевой агрегат (опыт — наше «могущество») — зелёный жирный ── */
.fighter b, .item-info .attr b { color: #16168d; }
.fighter .cap { border-top: 1px solid #b9b9b9; padding-top: 6px; }
.fighter .cap:first-child { border-top: none; padding-top: 0; }
.агрегат { color: #0a7a0a !important; }

/* призраки пустых ячеек (решение Mike 2026-07-19, как в БК): бледный
   серый арт-подсказка предназначения; надписей в пустых ячейках нет */
.slot .slot-ghost {
  position: absolute; inset: 2px; width: calc(100% - 4px);
  height: calc(100% - 4px); object-fit: contain;
  mix-blend-mode: multiply; opacity: .22; filter: grayscale(1);
}
.slot .slot-ghost-icon {
  position: absolute; inset: 0; display: flex; align-items: center;
  justify-content: center; opacity: .3; filter: grayscale(1);
}

/* деньги: цифры чёрным жирным везде (правка Mike — не синим) */
.деньги { color: #000 !important; font-weight: bold; }

/* арты врат (генерация Mike по промптам-9) */
.врата-арт { display: block; width: 100%; margin: 0 auto;
             border: 1px solid #2e2e24; }
.врата-арт.квадрат { max-width: 300px; }

/* ── Сцена главной (решение Mike 2026-07-20): арт почти во весь экран без
   рамок, лого вплавлено в верх арта, вход поверх тёмного градиента ── */
.врата-широко { width: 100%; }
.врата-сцена { position: relative; width: min(96vw, 1536px); margin: 0 auto; }
.врата-сцена-арт { display: block; width: 100%; }
.врата-сцена::before, .врата-сцена::after {
  content: ''; position: absolute; left: 0; right: 0;
  pointer-events: none; z-index: 1;
}
/* тьма сверху и снизу — лого и форма замешиваются с рисунком */
.врата-сцена::before { top: 0; height: 30%;
  background: linear-gradient(180deg, rgba(0,0,0,.7) 0%, rgba(0,0,0,0) 100%); }
.врата-сцена::after { bottom: 0; height: 44%;
  background: linear-gradient(0deg, rgba(0,0,0,.78) 0%, rgba(0,0,0,0) 100%); }
.врата-сцена-лого {
  position: absolute; top: 4.5%; left: 50%; transform: translateX(-50%);
  width: 44%; z-index: 2; opacity: .94;
  filter: drop-shadow(0 0 22px rgba(0,0,0,.95));
}
.врата-сцена-низ {
  position: absolute; left: 0; right: 0; bottom: 3.5%;
  z-index: 2; text-align: center;
}
.врата-сцена-низ input[type=text], .врата-сцена-низ input[type=password] {
  background: rgba(10, 10, 8, .62); border-color: rgba(74, 74, 58, .8);
  color: #d3c089;
}
.врата-сцена-низ button {
  background: rgba(34, 34, 28, .72); border-color: rgba(85, 84, 63, .85);
}
.врата-сцена-низ .sys { display: inline-block; }
.врата-широко .врата-ссылки { margin-top: 12px; }
/* автозаполнение браузера красит поля в светлое — гасим */
body.врата input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 100px #101010 inset;
  -webkit-text-fill-color: #ddd;
}
.врата-сцена-низ input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 100px #0d0d0a inset;
  -webkit-text-fill-color: #d3c089;
}
/* квадратные арты (регистрация): размер от высоты окна, лого крупнее */
.врата-сцена.квадрат { width: min(96vw, 78vh); }
.врата-сцена.квадрат .врата-сцена-лого { width: 58%; top: 3%; }
.врата-сцена.квадрат::after { height: 34%; }
/* узкий экран: арту не хватает высоты под форму — вход уходит под рисунок */
@media (max-width: 820px) {
  .врата-сцена-низ { position: static; margin-top: 10px; }
  .врата-сцена::after { display: none; }
  .врата-сцена-лого { width: 60%; }
}