/* ═══════════════════════════════════════════════════════════
   ЭПОХА · game.css — одностраничный игровой экран (UI-A, чистовой вид)
   Базовые токены и элементы (кнопки, поля, экраны входа/создания) — в
   style.css. Здесь: раскладка, стекло/золото панелей, трёхсегментный
   топбар, объёмные полоски, карта, фон-слайдшоу. Часть токенов уводим
   в золото прямо здесь (game.css грузится после style.css).
   ═══════════════════════════════════════════════════════════ */

:root{
  --gold:#e2b75e;            /* теплее золота, чем базовый */
  --muted:#a5906b;
  --rim:#3a2a12;             /* тёмно-коричневый тонкий кант */
  --shadow:0 18px 44px rgba(0,0,0,.5);

  --panel-alpha:.30;                                   /* прозрачность панелей одним рычагом */
  /* Вуаль ЛЮБОГО попапа игры — одной ручкой (0.68.2, решение автора: экран
     должен затемняться сильно, уведомление остаётся единственным акцентом).
     На неё обязаны ссылаться все всплывающие окна: .modal-veil, .bldb-modal,
     .cbt-outcome — и любое будущее. Точечных значений быть не должно. */
  --veil-alpha:.85;
  --veil: rgba(8,5,2, var(--veil-alpha));
  --panel-glass: rgba(74,60,30, var(--panel-alpha));
  --panel-glass-2: rgba(96,78,40, calc(var(--panel-alpha) + .12));
  --bar-glass: rgba(44,34,16, calc(var(--panel-alpha) + .12));
  --edge-glass: rgba(226,183,94,.42);
  --gold-sheen: linear-gradient(158deg, rgba(226,183,94,.12), rgba(226,183,94,0) 44%);

  --grad-stat: linear-gradient(90deg,#ece0cc 0%,#e6c079 32%,#cf6a3c 60%,#8c1e18 82%,#560f0f 100%);
  --grad-exp:  linear-gradient(90deg,#fff8ec 0%,#f2ddab 48%,#e2b75e 100%);

  --cols:300px minmax(0,1fr) 348px;   /* общая сетка топбара и доски */
  --col-gap:22px;

  /* Единый скроллбар всей игры одной ручкой (0.70.0). Раньше золотой ползунок
     навешивался точечно ~девятью почти одинаковыми копиями — новые зоны
     (окно города, вики, журнал) получали системный виндовый скролл. Теперь
     вид задаётся глобально (см. блок ниже), значения — отсюда. */
  --sb-thumb: rgba(226,183,94,.38);
  --sb-thumb-hover: rgba(226,183,94,.62);
}

/* hidden всегда прячет — иначе id-правило #mod-map{display:flex} перебьёт
   атрибут hidden и скрытые модули останутся видимыми. */
[hidden]{display:none !important;}

/* ── Экран создания · карусель классов ── */
#screen-create.screen--center{overflow-y:auto; align-items:flex-start; padding:24px 16px;}
.create-carousel{width:min(96vw, 1040px); margin:auto;
  background:var(--gold-sheen), var(--panel-glass);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border:1px solid var(--edge-glass); border-radius:var(--r); box-shadow:var(--shadow); padding:22px 28px;}
.create-carousel .section-title{font-family:var(--f-display); color:var(--gold); font-size:1.5rem; margin:0 0 4px;}
.create-carousel .hint{font-family:var(--f-data); color:var(--muted); font-size:.85rem; margin:0 0 16px;}
.cc-stage{display:flex; gap:28px; align-items:stretch;}
.cc-desc{flex:1; min-width:0; display:flex; flex-direction:column;}
.cc-title{font-family:var(--f-display); color:var(--ink); font-size:1.9rem; letter-spacing:.02em; line-height:1.1;}
.cc-tag{font-family:var(--f-data); color:var(--gold); font-size:.9rem; margin:3px 0 14px;}
.cc-bonus{font-family:var(--f-data); font-size:.9rem; color:var(--ink); background:rgba(226,183,94,.12); border:1px solid var(--edge-glass); border-radius:var(--r-sm); padding:10px 12px; margin-bottom:14px; line-height:1.45;}
.cc-bonus--none{color:var(--muted); background:rgba(120,110,95,.1);}
.cc-bonus-label{display:block; font-size:.64rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin-bottom:3px;}
.cc-text{font-family:var(--f-body); color:var(--ink-soft); font-size:.98rem; line-height:1.6; margin:0;}
.cc-art-col{flex:none; width:320px; display:flex; flex-direction:column; gap:12px;}
.cc-art{width:320px; height:min(430px, calc(100vh - 300px)); border-radius:var(--r); border:1px solid var(--edge-glass); background-size:cover; background-position:center; background-color:rgba(18,12,6,.3); box-shadow:var(--shadow);}
.cc-nav{display:flex; align-items:center; justify-content:center; gap:18px;}
.cc-arrow{width:48px; height:48px; border-radius:50%; border:1px solid var(--rim); background:linear-gradient(180deg,#f4d27d,#c9992f); color:var(--rim); font-size:1.5rem; line-height:1; cursor:pointer; box-shadow:inset 0 1px 0 rgba(255,255,255,.6), 0 2px 4px rgba(0,0,0,.4);}
.cc-arrow:hover{filter:brightness(1.07);}
.cc-arrow:active{transform:translateY(1px);}
.cc-count{font-family:var(--f-data); color:var(--muted); font-size:.9rem; min-width:56px; text-align:center;}
.cc-foot{margin-top:22px;}
.cc-foot .field--name{max-width:340px;}
@media (max-width:820px){
  .cc-stage{flex-direction:column; align-items:center;}
  .cc-art-col{width:min(100%, 320px);}
  .cc-art{width:100%; height:auto; aspect-ratio:3/4;}
  .cc-desc{order:2;}
}

/* ── Фон-слайдшоу (под всеми экранами) ── */
.bg-stage{position:fixed; inset:0; z-index:0; overflow:hidden; pointer-events:none;}
.bg-layer{position:absolute; inset:0; background-size:cover; background-position:center; opacity:0; transition:opacity 2.4s ease; will-change:opacity; transform:scale(1.06);}
.bg-layer.is-active{opacity:1;}
.bg-veil{position:fixed; inset:0; z-index:1; pointer-events:none;
  background:
    radial-gradient(120% 90% at 50% 0%, transparent 42%, rgba(15,10,6,.5) 100%),
    linear-gradient(180deg, rgba(20,14,9,.28), rgba(20,14,9,.5));}
/* Экраны — над фоном. */
.screen{position:relative; z-index:2;}

/* ═══ Каркас игрового экрана ═══ */
#screen-game.screen--game{
  max-width:none; margin:0; padding:0; height:100vh;
  display:flex; flex-direction:column; overflow:hidden;
}

/* ── Топбар: 3 сегмента по сетке колонок ── */
#screen-game .topbar{
  display:grid; grid-template-columns:var(--cols); gap:var(--col-gap); align-items:stretch;
  margin:18px 20px 0; padding:0; border:none; background:none; flex:none;
}
.tb-seg{
  background:var(--gold-sheen), var(--bar-glass);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border:1px solid var(--edge-glass); border-radius:var(--r); box-shadow:var(--shadow);
  display:flex; align-items:center; padding:8px 16px; height:64px;
  /* 0.44.0: грид-элемент по умолчанию не уже своего содержимого — с ростом
     числа вкладок ряд выдавливал колонку и ложился ПОД правый сегмент
     (последняя вкладка переставала кликаться). min-width:0 разрешает
     колонке быть уже содержимого, вкладки при этом сжимаются. */
  min-width:0;
}
/* сегмент 1 — бренд + состояние мира (текст слева, dev-кнопки справа) */
.tb-left{gap:12px; justify-content:space-between;}
.tb-left-text{display:flex; flex-direction:column; gap:3px; min-width:0;}
/* Название и версия в одной строке по базовой линии: версия — приписка к
   бренду, а не самостоятельная строка (0.88.3). */
.brand-row{display:flex; align-items:baseline; gap:8px; min-width:0;}
.app-ver{font-family:var(--f-data); font-size:.72rem; color:var(--muted); white-space:nowrap; flex:none;}
.brand{font-family:var(--f-display); color:var(--gold); font-size:1.2rem; letter-spacing:.06em; line-height:1.05;}
.world-line{font-family:var(--f-data); font-size:.76rem; color:var(--muted); white-space:nowrap;}
.world-line b{color:var(--ink-soft);}
.devtime{display:flex; gap:5px; flex:none;}
/* Правый край первого сегмента: кольцо тика + (в деве) кнопки времени. */
.tb-left-side{display:flex; align-items:center; gap:10px; flex:none;}
/* ── Кольцо тика (0.86.0) ───────────────────────────────────
   Дуга заполняется по ходу минуты и краснеет к самому тику. Отсчёт
   ведёт topbar.js от серверного срока (store.tickDeadline) — здесь
   только вид. Плавность даёт CSS-переход по dashoffset: перерисовка
   идёт раз в секунду, а глаз видит непрерывное движение. */
.tick-ring{width:30px; height:30px; flex:none; line-height:0;}
.tick-ring svg{width:100%; height:100%; transform:rotate(-90deg);} /* старт с 12 часов */
.tick-ring circle{fill:none; stroke-width:3; stroke-linecap:round;}
.tick-ring .tr-track{stroke:rgba(255,255,255,.10);}
.tick-ring .tr-fill{
  stroke:var(--gold);
  stroke-dasharray:94.25;  /* 2πr при r=15 */
  stroke-dashoffset:94.25; /* пусто до первого ответа сервера */
  transition:stroke-dashoffset .95s linear, stroke .6s ease;
}
/* Последние секунды — тот же красный, что у рамки длительной стройки. */
.tick-ring.is-soon .tr-fill{stroke:rgba(200,64,45,.9);}
/* Мира нет (обслуживание / автотик выключен): кольцо погашено. */
.tick-ring.is-off{opacity:.35;}
.tick-ring.is-off .tr-fill{stroke:var(--muted); stroke-dashoffset:94.25; transition:none;}
/* Переход через границу тика: дуга сбрасывается мгновенно, без обратной
   перемотки на полный круг (иначе каждый тик выглядел бы как рывок назад). */
.tick-ring.is-reset .tr-fill{transition:none;}
.btn--xs{padding:3px 8px; font-size:.72rem;}
/* сегмент 2 — вкладки во всю ширину */
/* Корешки — сами себе карточки, поэтому у сегмента коробки больше нет.
   overflow:visible обязателен: хвост активного корешка вылезает вниз. */
.tb-center{padding:0; background:none; border:none; box-shadow:none;
  align-items:flex-end; overflow:visible;}
/* ВКЛАДКИ ПО СОДЕРЖИМОМУ, А НЕ ПОРОВНУ (0.88.2). Раньше стояло flex:1 1 0 —
   все восемь получали строго одинаковую ширину независимо от длины подписи.
   На ширине окна ~1480 это 87 px на вкладку, а самой длинной подписи
   («Экипировка») нужно 87.7 — промах МЕНЬШЕ ПИКСЕЛЯ, и она резалась
   многоточием, пока «Карта» держала пустоту. Отсюда же «в деве целая, в
   проде обрезана»: появившегося вертикального скроллбара хватало, чтобы
   перевалить порог.
   Теперь вкладка занимает свою ширину и сжимается только когда места
   действительно нет: запас на том же экране ~110 px вместо −0.7. Многоточие
   и min-width:0 оставлены осознанно — это последний рубеж на узких окнах,
   а не рабочий режим. */
/* ── ЗАКЛАДКИ (1.0.0-rc16) ───────────────────────────────────────────
   Вкладки были пилюлями внутри стеклянной коробки — «панель внутри
   панели». Стали корешками книги: занимают сегмент В ПОЛНУЮ ВЫСОТУ
   (верх вровень с соседними карточками — иначе над ними оставалась
   полоса, сквозь которую просвечивал фон), а активный корешок ХВОСТОМ
   перекрывает зазор доски и накрывает верхнюю границу центрального
   модуля: закладка и страница читаются одним листом.
   Зазор доски — 22px (padding .game-board), хвост 24px: 2px нахлёста
   на границу модуля, иначе на стыке видна линия. */
.nav-tabs{display:flex; align-items:flex-end; width:100%; height:100%; min-width:0; gap:3px;}
.nav-tab{
  /* flex-basis по СОДЕРЖИМОМУ, а не 0 (правка сразу после замера, см. ниже):
     при равных долях «Карта» и «Крафт» держали столько же места, сколько
     «Экипировка», и длинные подписи обрезались раньше времени. Теперь
     основа — своя ширина каждой подписи, свободное место делится поровну,
     а сжимается ряд пропорционально длине: короткие остаются целыми. */
  position:relative; flex:1 1 auto; min-width:0; height:100%;
  display:flex; align-items:center; justify-content:center; padding:0 9px;
  font-family:var(--f-display); font-size:.95rem; letter-spacing:.03em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  color:var(--ink-soft); cursor:pointer; transition:color .12s ease;
  background:linear-gradient(180deg,rgba(48,39,29,.86),rgba(38,30,22,.9));
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border:1px solid var(--edge-glass); border-bottom:none; border-radius:9px 9px 0 0;
  box-shadow:inset 0 1px 0 rgba(216,173,85,.07), 0 -6px 14px rgba(0,0,0,.28);
}
.nav-tab:hover{color:var(--ink);}
/* Активный корешок красится цветом ЦЕНТРАЛЬНОЙ ПАНЕЛИ и берёт то же
   стекло: без одинакового blur полупрозрачный фон читается по-разному
   и на стыке виден шов. */
.nav-tab.is-active{
  color:var(--gold); z-index:4; height:calc(100% + 4px);
  background:var(--gold-sheen), rgba(61,50,38,.72);
  box-shadow:inset 0 1px 0 rgba(216,173,85,.16), 0 -8px 18px rgba(0,0,0,.32);
}
.nav-tab.is-active::after{
  content:''; position:absolute; left:-1px; right:-1px; top:100%; height:24px;
  background:var(--gold-sheen), rgba(61,50,38,.72);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border-left:1px solid var(--edge-glass); border-right:1px solid var(--edge-glass);
}
/* сегмент 3 — действие + уведомления */
.tb-right{gap:12px;}
.act-icon{width:40px; height:40px; flex:none; border-radius:8px; border:1px solid var(--rim); background:rgba(18,12,6,.4); box-shadow:inset 0 1px 0 rgba(255,255,255,.06), inset 0 -3px 6px rgba(0,0,0,.35); background-size:cover; background-position:center;}
.act-text{line-height:1.15; min-width:0;}
.act-name{font-family:var(--f-body); color:var(--ink); font-size:1rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.act-steps{font-family:var(--f-data); color:var(--muted); font-size:.78rem; margin-top:2px;}
.act-steps b{color:var(--gold);}
.notif{margin-left:auto; position:relative; flex:none;}
.bell{width:40px; height:40px; border-radius:10px; border:1px solid var(--edge-glass); background:rgba(255,255,255,.04); display:grid; place-items:center; cursor:pointer;}
.bell:hover{background:rgba(255,255,255,.08);}
.bell svg{width:19px; height:19px; stroke:var(--ink-soft); fill:none; stroke-width:1.6;}
.badge{position:absolute; top:-6px; right:-6px; min-width:19px; height:19px; padding:0 5px; border-radius:999px; background:var(--ember); color:#fff4ec; font-family:var(--f-data); font-size:.68rem; font-weight:700; display:grid; place-items:center; border:1px solid rgba(0,0,0,.35); box-shadow:0 1px 3px rgba(0,0,0,.4);}
.tb-right .btn{flex:none;}

/* ── Доска: 3 колонки одной высоты ── */
.game-board{position:relative; flex:1; min-height:0; display:grid; grid-template-columns:var(--cols); grid-template-rows:minmax(0,1fr); gap:var(--col-gap); padding:22px 20px 22px; overflow:hidden;}
.col{min-height:0; height:100%; overflow:hidden; display:flex; flex-direction:column; gap:18px;}
.col > .panel{flex:1; min-height:0; overflow:auto;}

/* Панель / модуль — полупрозрачное золотистое стекло. */
.panel,
.module{
  background:var(--gold-sheen), var(--panel-glass);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border:1px solid var(--edge-glass); border-radius:var(--r);
  padding:16px; box-shadow:var(--shadow);
}
/* Центральная область — контейнер модулей; активный модуль заполняет высоту.
   Верхних скруглений у модуля нет: он не отдельная карточка, а страница,
   продолжающая активную закладку. */
#centerArea{overflow:hidden;}
.col--center > .panel, .module{border-top-left-radius:0; border-top-right-radius:0;}
.module{flex:1; min-height:0; overflow:auto;}
#mod-map{overflow:hidden; display:flex; flex-direction:column;}

.panel-eyebrow, .module-title{font-family:var(--f-display); margin:0 0 5px;}
.panel-eyebrow{color:var(--ink-soft); font-size:.7rem; letter-spacing:.14em; text-transform:uppercase;}
.module-title{color:var(--gold); font-size:1.15rem; letter-spacing:.03em;}
.empty{color:var(--muted); font-family:var(--f-data); font-size:.86rem; line-height:1.5;}
.muted{color:var(--muted);}

/* ── Левая панель игрока ── */
.char-head{margin-bottom:2px;}
.char-name{font-family:var(--f-display); color:var(--ink); font-size:1.05rem; letter-spacing:.03em;}
.char-class{font-family:var(--f-data); color:var(--muted); font-size:.76rem; margin-top:1px;}

/* Объёмные полоски: HP, опыт, статы. */
.bars{display:flex; flex-direction:column; gap:1px; margin-top:3px;}
.stat-head{display:flex; justify-content:space-between; align-items:center; font-family:var(--f-data); font-size:.76rem; margin-bottom:1px;}
.st-name{color:var(--ink-soft);}
.st-val{color:var(--ink); display:inline-flex; align-items:center; gap:9px;}
.st-buff{color:var(--ok);}
.sbar{position:relative; height:7px; border-radius:999px; overflow:hidden; background:var(--grad-stat); border:1px solid rgba(0,0,0,.4); box-shadow:inset 0 2px 3px rgba(255,255,255,.35), inset 0 -4px 7px rgba(0,0,0,.4);}
.sbar--exp{background:var(--grad-exp);}
.sbar-mute{position:absolute; top:0; bottom:0; right:0; width:calc(100% - var(--w)); background:linear-gradient(90deg, rgba(16,11,6,.72), rgba(16,11,6,.6));}
.sbar-mute::before{content:''; position:absolute; left:0; top:0; bottom:0; width:2px; background:rgba(255,240,214,.5); box-shadow:0 0 5px rgba(255,220,160,.5);}
.sbar-gloss{position:absolute; inset:0; pointer-events:none; background:linear-gradient(180deg, rgba(255,255,255,.34), rgba(255,255,255,0) 46%, rgba(0,0,0,.14));}

/* Объёмная золотая «+» с тёмно-коричневым кантом. */
.st-plus{width:23px; height:23px; line-height:1; border-radius:50%; border:1px solid var(--rim); background:linear-gradient(180deg,#f4d27d,#c9992f); color:var(--rim); font-size:1.05rem; font-weight:700; cursor:pointer; box-shadow:inset 0 1px 0 rgba(255,255,255,.6), inset 0 -2px 3px rgba(120,80,20,.55), 0 1px 2px rgba(0,0,0,.45);}
.st-plus:hover{filter:brightness(1.06);}
.st-plus:active{transform:translateY(1px);}
.points-note{font-family:var(--f-data); font-size:.8rem; color:var(--muted); margin:6px 0 0;}
.points-note b{color:var(--gold);}
.pts-badge{font-family:var(--f-data); font-size:.62rem; color:var(--gold); background:rgba(226,183,94,.14); border:1px solid rgba(226,183,94,.4); border-radius:999px; padding:1px 7px; letter-spacing:.04em; margin-left:6px; vertical-align:middle;}

/* Разделитель «Основные / Дополнительные» характеристики. */
.stat-divider{display:flex; align-items:center; gap:10px; margin:5px 0 2px; font-family:var(--f-data); font-size:.64rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted);}
.stat-divider::before, .stat-divider::after{content:''; height:1px; background:var(--edge-glass); flex:1;}

.chip-grid{display:flex; flex-wrap:wrap; gap:6px; margin-top:4px;}
.chip{font-family:var(--f-data); font-size:.76rem; color:var(--ink-soft); background:rgba(226,183,94,.12); border:1px solid var(--edge-glass); border-radius:999px; padding:3px 10px;}
.chip b{color:var(--gold);}

/* ── УСТАЛОСТЬ И ГНЕВ (0.88.0): малые кольца с цифрой, в ряду кошелька ──
   Компактные (30px), чтобы панель НЕ получила скролл даже с доп. кнопкой
   Фермера/Жреца. Цвет заполнения — по ярусу: усталость тускнеет к серому,
   гнев наливается багровым. Подпись под кольцом — мелкая, в стиле панели. */
.chip-grid--wallet{align-items:center;}
.morale-cluster{margin-left:auto; display:inline-flex; gap:8px;}
.mgauge{position:relative; width:34px; display:inline-flex; flex-direction:column; align-items:center; gap:1px; margin-left:2px; cursor:default;}
.mgauge svg{width:30px; height:30px; transform:rotate(-90deg); display:block;}
.mgauge .mg-bg{fill:rgba(0,0,0,.45); stroke:rgba(226,183,94,.18); stroke-width:3;}
.mgauge .mg-fill{fill:none; stroke-width:3; stroke-linecap:round; transition:stroke-dashoffset .4s ease, stroke .4s ease;}
.mgauge .mg-num{position:absolute; top:15px; left:50%; transform:translate(-50%,-50%); font-family:var(--f-data); font-size:.72rem; color:var(--ink); line-height:1;}
.mgauge .mg-label{position:static; font-style:normal; font-family:var(--f-data); font-size:.56rem; letter-spacing:.02em; color:var(--ink-soft); opacity:.75; line-height:1;}
.mgauge--fatigue .mg-fill{stroke:#b7a05e;}
.mgauge--fatigue.is-tier1 .mg-fill{stroke:#96854f;}
.mgauge--fatigue.is-tier2 .mg-fill{stroke:#6f6a58;}
.mgauge--fatigue.is-tier2 .mg-num{color:#cfc9b4;}
.mgauge--anger .mg-fill{stroke:#8a5a3a;}
.mgauge--anger.is-tier1 .mg-fill{stroke:#a5462e;}
.mgauge--anger.is-tier2 .mg-fill{stroke:#c22f22;}
.mgauge--anger.is-tier2 .mg-num{color:#e07a6a;}
.mgauge--anger.is-tier2 svg{filter:drop-shadow(0 0 4px rgba(194,47,34,.5));}

/* ── Центр · карта — переехала в map.css (0.66.0): у карты появились
   состояния клеток, постоянный маркер и слой эффектов ── */

/* ── Правая панель клетки ── */
.cell-head{margin-bottom:12px;}
.cell-coords{display:flex; align-items:center; gap:9px; font-family:var(--f-body); font-size:1rem; color:var(--ink); margin-top:4px;}
.cell-coords .sw{width:13px; height:13px; border-radius:4px; border:1px solid rgba(0,0,0,.4); flex:none;}
.cell-action{margin-top:10px; padding-top:10px; border-top:1px solid var(--edge-glass); font-family:var(--f-data); font-size:.83rem; color:var(--muted);}
.cell-action b{color:var(--ink-soft);}
.obj-list{display:flex; flex-direction:column; gap:12px; margin-top:16px;}
.obj-card{display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:12px; background:var(--panel-glass-2); border:1px solid var(--edge-glass); border-radius:var(--r-sm); padding:13px 14px;}
.obj-dot{width:11px; height:11px; border-radius:3px; align-self:start; margin-top:4px;}
.obj-dot--gathering{background:#4aa08a;} .obj-dot--lair{background:#7a4a2a;} .obj-dot--building{background:#9a9488;} .obj-dot--container{background:var(--gold);} .obj-dot--unknown{background:var(--muted);}
/* Карточка входа в поселение — как кнопка: бевел-выпуклость + маркер-слот под картинку. */
.obj-card--settlement{cursor:pointer; transition:transform .1s ease, box-shadow .12s ease;
  box-shadow:inset 0 2px 0 rgba(255,240,205,.22), inset 0 -10px 18px rgba(0,0,0,.4), 0 5px 12px rgba(0,0,0,.45);}
.obj-card--settlement:hover{transform:translateY(-1px);
  box-shadow:inset 0 2px 0 rgba(255,240,205,.3), inset 0 -10px 18px rgba(0,0,0,.4), 0 8px 16px rgba(0,0,0,.5);}
.obj-dot--settlement{width:44px; height:44px; border-radius:var(--r-sm); margin-top:0; align-self:center; overflow:hidden;
  background:rgba(20,13,6,.5); background-size:cover; background-position:center;
  box-shadow:inset 0 2px 0 rgba(255,240,205,.28), inset 0 -12px 20px rgba(0,0,0,.5), inset 0 0 0 1px rgba(255,235,190,.07), 0 5px 12px rgba(0,0,0,.5);}
.obj-body{min-width:0;}
.obj-name{font-family:var(--f-body); font-size:1rem; color:var(--ink);}
.obj-type{font-family:var(--f-data); font-size:.7rem; color:var(--muted); text-transform:uppercase; letter-spacing:.07em; margin-top:2px;}
.obj-hint{font-family:var(--f-data); font-size:.78rem; color:var(--ink-soft); margin-top:5px; line-height:1.45;}
.obj-btn{font-family:var(--f-data); font-size:.84rem; white-space:nowrap; padding:8px 14px; border-radius:var(--r-sm); cursor:pointer; background:linear-gradient(180deg,var(--gold),var(--gold-deep)); color:#2a1e0c; border:none;}
.obj-btn:hover:not(:disabled){filter:brightness(1.07);}
.obj-btn:disabled{background:rgba(45,36,26,.55); color:var(--muted); border:1px solid var(--edge-glass); cursor:default;}
.cell-rest{margin-top:18px; width:100%;}

/* ── Экипировка · кукла (paper-doll) ── */
#mod-equipment{display:flex; flex-direction:column;}
.equip-doll{position:relative; width:min(100%, 560px, calc(100vh - 210px)); aspect-ratio:1/1; margin:auto; overflow:visible;}
.doll-figure{position:absolute; top:4%; bottom:4%; left:50%; transform:translateX(-50%); aspect-ratio:3/4;
  background-size:cover; background-position:center; background-repeat:no-repeat;
  background-color:rgba(18,12,6,.2); border:1px solid var(--edge-soft); border-radius:var(--r);}
.doll-slot{position:absolute; transform:translate(-50%,-50%); width:96px; height:96px; border-radius:14px;
  display:grid; place-items:center; font-family:var(--f-data); font-size:1.15rem;}
.doll-slot.is-empty{border:1px dashed var(--edge-glass); background:rgba(18,12,6,.4); color:var(--muted); cursor:pointer;}
.doll-slot.is-empty:hover{background:rgba(226,183,94,.12); color:var(--ink-soft);}
.doll-slot.is-filled{border:1px solid var(--gold); background:linear-gradient(180deg, rgba(226,183,94,.3), rgba(120,80,20,.3)); color:var(--ink); cursor:pointer; box-shadow:0 2px 6px rgba(0,0,0,.45);}
.doll-slot.is-filled:hover{filter:brightness(1.1);}
.ds-label{pointer-events:none;}
.doll-extra{display:flex; gap:10px; flex-wrap:wrap; justify-content:center; margin-top:14px;}
.doll-extra .doll-slot{position:static; transform:none;}

/* Выпадающее меню слота (надеть/снять). */
.slot-menu{position:absolute; z-index:20; min-width:170px; max-width:230px;
  background:var(--panel-2); border:1px solid var(--edge-glass); border-radius:var(--r-sm);
  box-shadow:var(--shadow); padding:8px; display:flex; flex-direction:column; gap:5px;}
.sm-head{font-family:var(--f-display); color:var(--ink-soft); font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; padding:2px 4px 4px;}
.sm-current{font-family:var(--f-data); font-size:.8rem; color:var(--muted); padding:0 4px 4px;}
.sm-current b{color:var(--ink);}
.sm-item{font-family:var(--f-data); font-size:.84rem; text-align:left; color:var(--ink); background:rgba(255,255,255,.03); border:1px solid var(--edge-soft); border-radius:var(--r-sm); padding:7px 10px; cursor:pointer;}
.sm-item:hover{background:rgba(226,183,94,.14); border-color:var(--edge-glass);}
.sm-remove{color:var(--err);}
.sm-empty{font-family:var(--f-data); font-size:.8rem; color:var(--muted); padding:4px;}

/* ── Инвентарь / экипировка / рецепты / журнал ── */
.inv-tabs{display:flex; flex-wrap:wrap; gap:6px; margin-bottom:10px;}
.inv-tab{font-family:var(--f-data); font-size:.84rem; color:var(--ink-soft); background:transparent; border:1px solid var(--edge-glass); border-radius:999px; padding:6px 13px; cursor:pointer; transition:.15s;}
.inv-tab:hover{background:rgba(255,255,255,.05); color:var(--ink);}
.inv-tab.is-active{color:#2a1e0c; background:linear-gradient(180deg,var(--gold),var(--gold-deep)); border-color:transparent; font-weight:700;}
.inv-subtabs{display:flex; flex-wrap:wrap; gap:5px; margin-bottom:12px;}
.inv-subtab{font-family:var(--f-data); font-size:.78rem; color:var(--muted); background:transparent; border:1px solid var(--edge-soft); border-radius:999px; padding:4px 11px; cursor:pointer; transition:.15s;}
.inv-subtab:hover{color:var(--ink);}
.inv-subtab.is-active{color:var(--gold); background:rgba(226,183,94,.14); border-color:var(--edge-glass);}
.inv-cat{font-size:.68rem; color:var(--muted); margin-left:4px;}
/* Иконка-заглушка предмета/рецепта/ресурса (public/js/core/icon.js).
   Пустая тёмная плашка с тёплой кромкой — держит место под будущий арт,
   выглядит намеренной деталью, а не «не доделали». Буквы/текста внутри нет.
   Не сжимается в тесных строках (flex-shrink:0). */
.item-icon{flex:0 0 auto; width:34px; height:34px; border-radius:var(--r-sm);
  border:1px solid var(--edge-glass); background:var(--gold-sheen), rgba(24,18,8,.55);
  background-size:cover; background-position:center;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.25);}
.item-icon.is-empty{opacity:.9;}

.inv-grid{display:flex; flex-direction:column; gap:5px;}
.inv-row, .equip-list-row{display:flex; justify-content:space-between; align-items:center; gap:10px; font-family:var(--f-data); font-size:.9rem; padding:8px 11px; background:var(--panel-glass-2); border:1px solid var(--edge-glass); border-radius:var(--r-sm);}
.inv-name{color:var(--ink); display:inline-flex; align-items:center; gap:8px; flex-wrap:wrap;}
.inv-amt{color:var(--gold); font-weight:700;}
.q-badge{font-size:.68rem; color:var(--ink-soft); background:rgba(226,183,94,.12); border:1px solid var(--edge-glass); border-radius:999px; padding:1px 7px;}
.inv-enhanced{font-size:.66rem; color:var(--gold); background:rgba(226,183,94,.16); border:1px solid rgba(226,183,94,.4); border-radius:999px; padding:1px 7px; margin-left:4px; font-weight:700;}
.inv-right{display:flex; align-items:center; gap:10px;}
.inv-consume{font-family:var(--f-data); font-size:.78rem; color:var(--ink); background:rgba(226,183,94,.1); border:1px solid var(--edge-glass); border-radius:var(--r-sm); padding:3px 10px; cursor:pointer;}
.inv-consume:hover{background:rgba(226,183,94,.22); border-color:rgba(226,183,94,.5);}
/* ── ЯЧЕЙКА ЭФФЕКТА — ОДНА НА ВСЮ ИГРУ (1.0.0-rc16) ──────────────────
   Раньше в панели это был ПУСТОЙ чёрный квадрат с цветной рамкой и
   нативным title («заглушки, иконки придут при шлифовке UI»), а в бою —
   полноценный значок с буквой, цветом и полоской остатка. Теперь значок
   один: разметку даёт core/effect-cell.js, вид — эти правила.
   Цвет приходит переменной --fx-c: он у каждого эффекта свой. */
.fx-cell{
  position:relative; width:var(--fx-size,28px); height:var(--fx-size,28px);
  border-radius:5px; display:grid; place-items:center;
  font-family:var(--f-display); line-height:1; font-size:calc(var(--fx-size,28px) * .34);
  color:var(--fx-c); background:rgba(16,12,7,.82);
  border:1px solid var(--fx-b);
  box-shadow:0 3px 8px rgba(0,0,0,.5);
}
/* «Усилено Алхимиком» было золотой рамкой — признак нельзя терять при
   переезде на цвет характеристики, поэтому он стал золотым ободком
   ПОВЕРХ цветной рамки. */
.fx-cell--enhanced{box-shadow:0 0 0 1px rgba(226,183,94,.75), 0 3px 8px rgba(0,0,0,.5);}
.fx-letter{pointer-events:none;}
.fx-bar{position:absolute; left:3px; right:3px; bottom:2px; height:2px;
  border-radius:2px; background:rgba(255,255,255,.14); overflow:hidden;}
.fx-bar i{display:block; height:100%; border-radius:2px; background:var(--fx-c);}
.fx-tip{position:absolute; white-space:nowrap; font-family:var(--f-data);
  font-size:.74rem; color:var(--ink-soft); background:rgba(12,9,5,.96);
  border:1px solid rgba(226,183,94,.3); border-radius:4px; padding:3px 8px;
  opacity:0; pointer-events:none; transition:opacity .12s; z-index:30;}
.fx-tip--up{bottom:calc(100% + 6px); left:50%; transform:translateX(-50%);}
/* В панели столбец жмётся к левому краю — сверху места нет, подсказка
   уходит вправо. */
.fx-tip--right{left:calc(100% + 7px); top:50%; transform:translateY(-50%);}
.fx-cell:hover .fx-tip{opacity:1;}

/* Экран сна (0.47.0): панель игрока схлопывается — жать больше нечего. */
.sleep-box{margin-top:14px; padding:14px; border:1px solid var(--edge-glass); border-radius:var(--r-sm);
  background:var(--panel-glass-2); text-align:center;}
.sleep-title{font-family:var(--f-display); font-size:1.25rem; color:var(--gold); letter-spacing:.06em; margin-bottom:8px;}
.sleep-text{font-size:.9rem; line-height:1.45; margin:0 0 8px;}
.sleep-box .pa-btn.danger{width:100%; margin-top:6px; border-color:rgba(163,50,38,.6); color:#e8b3ad;}
.sleep-box .pa-btn.danger:hover{background:rgba(163,50,38,.18);}
.equip-slots{display:flex; flex-direction:column; gap:6px; margin-bottom:14px;}
.equip-slot{display:flex; justify-content:space-between; align-items:center; gap:10px; padding:9px 11px; border:1px solid var(--edge-glass); border-radius:var(--r-sm); background:var(--panel-glass-2);}
.equip-slot.is-empty{opacity:.6;}
.es-line{display:inline-flex; align-items:center; gap:10px; font-family:var(--f-data); font-size:.9rem; flex-wrap:wrap;}
.es-slot{color:var(--muted); text-transform:uppercase; font-size:.72rem; letter-spacing:.06em;}
.es-item{color:var(--ink); display:inline-flex; align-items:center; gap:6px;}
.es-empty{color:var(--muted); font-style:italic;}
.el-type{color:var(--muted); font-size:.74rem; margin-left:6px;}
.equip-list-row{margin-bottom:6px;}
.craft-cells{font-family:var(--f-data); font-size:.86rem; color:var(--ink-soft); margin:0 0 14px;}
.craft-cells b{color:var(--gold);}
.craft-cells-row{display:flex; gap:6px; margin:4px 0 6px; flex-wrap:wrap;}
.craft-cell{width:46px; height:46px; border-radius:8px; border:1px solid var(--edge-soft); display:grid; place-items:center; font-family:var(--f-data); font-size:.72rem; padding:0;}
.craft-cell.is-on{background:rgba(226,183,94,.1); border-color:var(--edge-glass);}
.craft-cell.is-empty{color:var(--muted); font-size:1.2rem;}
.craft-cell.is-set{background:linear-gradient(180deg, rgba(226,183,94,.5), rgba(120,80,20,.4)); border-color:var(--gold); color:var(--ink); cursor:pointer; box-shadow:inset 0 1px 0 rgba(255,255,255,.4);}
.craft-cell.is-set:hover{filter:brightness(1.1);}
.craft-cell.is-set span{pointer-events:none;}
/* НЕАКТИВНЫЕ ЯЧЕЙКИ — ЯВНО ГЛУШЕ (1.0.0-rc15). Прежде разница с активной
   была четыре сотых прозрачности и оттенок рамки: на тёмном фоне строка из
   десяти читалась как «десять доступных», хотя доступна одна. Теперь фон
   темнее подложки, рамки почти нет, внутренняя тень даёт «вдавленность». */
.craft-cell.is-off{background:rgba(20,15,8,.55); border-color:rgba(255,255,255,.05);
  box-shadow:inset 0 2px 5px rgba(0,0,0,.45); opacity:.5;}
.craft-cells-note{font-family:var(--f-data); font-size:.8rem; color:var(--muted); margin:0 0 6px;}
/* Ряд «Начать крафт» слипался со вкладками снизу: у .btn-row (style.css)
   полей нет вовсе, у .inv-tabs только нижнее. Разводим в области крафта. */
.btn-row.craft-start{margin:10px 0 16px;}
.craft-cells-note b{color:var(--gold);}
.recipe-detail{margin:12px 0;}
.recipe-out{font-family:var(--f-body); font-size:.98rem; color:var(--ink); margin-bottom:10px; display:flex; align-items:center; gap:10px; flex-wrap:wrap;}
.ro-status{font-family:var(--f-data); font-size:.78rem; padding:2px 9px; border-radius:999px; border:1px solid var(--edge-glass);}
.ro-status.is-ok{color:var(--ok);} .ro-status.is-block{color:var(--err);}
.ing-row{display:flex; justify-content:space-between; align-items:center; gap:10px; font-family:var(--f-data); font-size:.86rem; padding:5px 0; border-bottom:1px solid rgba(255,255,255,.03);}
.ing-name{color:var(--ink-soft);} .ing-need{color:var(--muted);} .ing-need.is-short{color:var(--err);}
.ing-row select{max-width:55%;}
.log{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:5px;}
.log li{font-family:var(--f-data); font-size:.86rem; color:var(--ink-soft); padding:8px 11px; background:var(--panel-glass-2); border:1px solid var(--edge-glass); border-radius:var(--r-sm);}
.lg-tick{color:var(--muted); font-size:.72rem; margin-right:8px;}

/* ── Колода (боевой набор карт) ── */
.card-cap{font-family:var(--f-data); font-size:.95rem; color:var(--ink-soft); margin-bottom:4px;}
.card-cap b{color:var(--gold); font-size:1.05rem;}
.card-cap.is-full b{color:var(--err);}
.card-hint{font-family:var(--f-data); font-size:.8rem; color:var(--muted); margin:0 0 14px;}

/* ── ЛИЦЕВАЯ СТОРОНА КАРТЫ (0.83.0) ───────────────────────────
   Общий вид для всех плашек карты — рука в бою, слот на столе, колода, запас.
   Картинку ставит JS инлайном (файл зависит от редкости, см. core/card-art.js),
   здесь — только посадка: вписать целиком (contain), не обрезать. Обрезка
   недопустима именно из-за редкой карты: у неё щиты торчат по бокам, и cover
   срезал бы ровно то, чем она отличается от остальных.
   Ни рамки, ни подложки: рамка нарисована в самом арте, рваный край живёт
   в альфе. Прежние градиентные плашки сняты здесь и в combat.css.

   ОТСТУПЫ ТЕКСТА задаются в процентах — работают на плашке любого размера.
   Класс редкости на месте (0.85.0: арт один на всех, редкости различал
   прежний набор из трёх лицевых сторон). */
.card-face{position:relative; background-repeat:no-repeat; background-position:center; background-size:contain;
  border:0 !important; box-shadow:none !important;}
.card-face.is-rar-common{--card-pad-x:10%; --card-pad-y:8%;}
/* Название лежит в поле пергамента АБСОЛЮТНО, а не отступами-padding.
   Процент в padding считается от ширины РОДИТЕЛЯ (и по вертикали тоже — от
   ширины!), поэтому карта в руке раздувалась и уезжала из карусели. У
   абсолютных отступов процент считается от самой карты — как и задумано.
   Цвет — тёмная тушь: светлый интерфейсный текст по пергаменту не читается. */
.card-face .cc-name, .card-face .ls-name{
  position:absolute; left:var(--card-pad-x); right:var(--card-pad-x);
  top:var(--card-pad-y); bottom:var(--card-pad-y);
  display:flex; align-items:center; justify-content:center; text-align:center;
  overflow:hidden; color:#33260f; text-shadow:0 1px 0 rgba(255,255,255,.35);}

/* Верх: слоты боевого набора — крупные прямоугольники-карты, по центру.
   Размеры плашек (0.83.0) приведены к пропорции арта 0.668 — иначе при
   вписывании по краям оставались бы поля, и рамка карты не совпадала бы
   с рамкой выделения. */
.loadout-slots{display:flex; flex-wrap:wrap; gap:10px; justify-content:center;}
.load-slot{width:88px; height:132px; border-radius:10px; display:grid; place-items:center; padding:6px; text-align:center;}
.load-slot.is-empty{border:1px dashed var(--edge-glass); background:rgba(18,12,6,.35);}
.load-slot.is-filled{cursor:grab; padding:0;}
.load-slot.is-filled:hover{filter:brightness(1.08);}
.ls-name{font-family:var(--f-body); font-size:.78rem; color:var(--ink); line-height:1.15; pointer-events:none;}

/* Низ: ячейки коллекции — как инвентарь, маленькие карты со стопкой.
   ВНИМАНИЕ: процентные отступы редкостей здесь НЕ применяются — ячейка
   58px шириной, и поле пергамента редкой карты (23% с каждой стороны)
   оставило бы под название 32 пикселя. Имя должно читаться в запасе: без
   него все карты в сетке выглядят одинаково. */
.coll-cells{display:flex; flex-wrap:wrap; gap:7px; justify-content:center;}
.coll-cell{position:relative; width:58px; height:87px; border-radius:8px; display:grid; place-items:center; padding:4px; text-align:center;}
.coll-cell.is-empty{border:1px solid var(--edge-soft); background:rgba(120,110,95,.1);}
.coll-cell.is-filled{cursor:grab; padding:0;}
.coll-cell.is-filled:hover{filter:brightness(1.1);}
.cc-name{font-family:var(--f-data); font-size:.6rem; color:var(--ink-soft); line-height:1.1; pointer-events:none;}
.coll-cell .cc-name{left:5px; right:5px; top:9px; bottom:9px;}
.cc-count{position:absolute; right:-4px; bottom:-4px; min-width:18px; height:18px; padding:0 4px; border-radius:999px; background:linear-gradient(180deg,var(--gold),var(--gold-deep)); color:#2a1e0c; font-family:var(--f-data); font-size:.66rem; font-weight:700; display:grid; place-items:center; border:1px solid var(--rim); pointer-events:none;}
.is-dragging{opacity:.4;}

/* ── Тосты ── */
.toast-root{position:fixed; bottom:20px; left:50%; transform:translateX(-50%); display:flex; flex-direction:column; gap:8px; z-index:60; pointer-events:none;}
/* 0.88.2: без max-width длинная ошибка (например, запрет по ярости —
   полторы сотни знаков) растягивалась в одну строку через весь экран и
   уезжала за края: тост центрирован через translateX(-50%), и лишнее
   вылезает с ОБЕИХ сторон. Ширина + межстрочный интервал чинят вид всех
   длинных сообщений разом. */
.toast{font-family:var(--f-data); font-size:.9rem; line-height:1.35; max-width:min(560px, calc(100vw - 40px)); padding:10px 16px; border-radius:var(--r-sm); box-shadow:var(--shadow); opacity:0; transform:translateY(8px); transition:opacity .24s, transform .24s; border:1px solid var(--edge);}
.toast.is-in{opacity:1; transform:translateY(0);}
.toast--ok{background:#34412a; color:var(--ok); border-color:#4a5a3a;}
.toast--err{background:#4a2f26; color:var(--err); border-color:#6a4436;}

/* ── Модалка (засада и пр.) ── */
.modal-veil{position:fixed; inset:0; background:var(--veil); backdrop-filter:blur(2px); -webkit-backdrop-filter:blur(2px); display:flex; align-items:center; justify-content:center; z-index:70; padding:20px;}
.modal{background:var(--panel); border:1px solid var(--edge); border-radius:var(--r); padding:22px; max-width:400px; width:100%; box-shadow:var(--shadow);}
.modal-title{font-family:var(--f-display); color:var(--gold); font-size:1.3rem; margin:0 0 10px;}
.modal-body{font-family:var(--f-body); color:var(--ink); font-size:.98rem; margin:0 0 16px; line-height:1.5;}
.modal-note{font-family:var(--f-data); color:var(--muted); font-size:.78rem; margin:12px 0 0;}

/* ── Панель настроек (0.78.3): Звук / Чат / Аккаунт ── */
.modal--settings{max-width:460px;}
.set-tabs{margin:2px 0 16px;}
.set-body{min-height:210px;}
.set-empty{font-family:var(--f-data); font-size:.86rem; color:var(--muted); text-align:center; padding:16px 0;}

/* Звук — строка: подпись | ползунок | процент */
.snd-row{display:grid; grid-template-columns:70px 1fr 46px; align-items:center; gap:12px; margin:0 0 16px; cursor:pointer;}
.snd-label{font-family:var(--f-data); font-size:.82rem; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-soft);}
.snd-pct{font-family:var(--f-data); font-size:.86rem; color:var(--gold); text-align:right;}
.snd-range{-webkit-appearance:none; appearance:none; width:100%; height:6px; border-radius:999px; background:var(--bg-2); border:1px solid var(--edge-soft); outline:none;}
.snd-range::-webkit-slider-thumb{-webkit-appearance:none; appearance:none; width:18px; height:18px; border-radius:50%;
  background:linear-gradient(180deg,var(--gold),var(--gold-deep)); border:1px solid var(--rim); cursor:pointer; box-shadow:0 2px 6px rgba(0,0,0,.4);}
.snd-range::-moz-range-thumb{width:18px; height:18px; border-radius:50%;
  background:linear-gradient(180deg,var(--gold),var(--gold-deep)); border:1px solid var(--rim); cursor:pointer;}
.snd-range:focus-visible{border-color:var(--gold);}

/* Чат — игнор-лист */
.ign-add{display:flex; gap:8px; margin:0 0 14px;}
.ign-add .ign-name{flex:1; padding:10px 12px; background:var(--bg-2); border:1px solid var(--edge-soft); border-radius:var(--r-sm);
  color:var(--ink); font-family:var(--f-data); font-size:.95rem;}
.ign-add .ign-name:focus{outline:none; border-color:var(--gold); box-shadow:0 0 0 3px rgba(216,173,85,.16);}
.ign-add .ign-add-btn{flex:none;}
.ign-head{display:flex; align-items:center; justify-content:space-between; margin:0 0 8px;
  font-family:var(--f-data); font-size:.74rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted);}
.ign-count{color:var(--ink-soft);}
.ign-list{max-height:210px; overflow:auto;}
.ign-item{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:8px 4px; border-top:1px solid var(--edge-soft);}
.ign-item-name{font-family:var(--f-body); font-size:.98rem; color:var(--ink); min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.ign-rm{flex:none;}

/* Аккаунт — смена пароля + выход */
.pw-form .field{margin:0 0 12px;}
.pw-form .pw-submit{width:100%; margin-top:2px;}
.pw-msg{font-family:var(--f-data); font-size:.85rem; margin:0 0 12px; padding:9px 11px; border-radius:var(--r-sm);}
.pw-msg--err{color:var(--err); background:rgba(221,139,108,.1); border:1px solid rgba(221,139,108,.35);}
.pw-msg--ok{color:var(--ok); background:rgba(157,187,122,.1); border:1px solid rgba(157,187,122,.35);}
.set-logout{margin-top:18px; padding-top:16px; border-top:1px solid var(--edge-soft);}
.set-logout-btn{width:100%;}

/* Единый золотой скроллбар на всю игру. Firefox — наследуемые scrollbar-*
   на корне; WebKit — потомковый псевдоэлемент. Любая прокручиваемая зона
   (панели, модули, окно города, вики, журнал, чат, торговец, обмен, бой,
   всплывающие меню) получает вид сама — точечных правил больше нет. */
body{scrollbar-width:thin; scrollbar-color:var(--sb-thumb) transparent;}
body ::-webkit-scrollbar{width:8px; height:8px;}
body ::-webkit-scrollbar-track{background:transparent;}
body ::-webkit-scrollbar-thumb{background:var(--sb-thumb); border-radius:999px;}
body ::-webkit-scrollbar-thumb:hover{background:var(--sb-thumb-hover);}

/* ── Адаптив ── */
/* Точка перелома ряда закладок (1.0.0-rc16.1). Замер: при девяти подписях
   сегменту нужно ~765px обычным кеглем, а на 1366 ему достаётся 634 — то
   есть арифметика, а не вёрстка. Поджимаем кегль, разрядку и отступы; этого
   хватает до 1366 включительно. Ниже подписи физически не помещаются —
   решение (короткие имена / два ряда / список переполнения) за автором. */
@media (max-width:1500px){
  .nav-tabs{gap:2px;}
  .nav-tab{font-size:.84rem; letter-spacing:0; padding:0 5px;}
}
@media (max-width:1080px){
  :root{--cols:232px minmax(0,1fr) 300px;}
  /* На узкой сетке центральному сегменту достаётся ~450 px, а восьми
     подписям при обычном кегле нужно ~570. Поджимаем кегль и отступы —
     этого хватает, чтобы обрезалась в худшем случае одна самая длинная
     подпись, а не половина ряда. */
  .nav-tabs{gap:2px;}
  .nav-tab{font-size:.84rem; padding:0 5px; letter-spacing:0;}
}
@media (max-width:900px){
  #screen-game.screen--game{height:auto; min-height:100vh; overflow:visible;}
  #screen-game .topbar, .game-board{grid-template-columns:1fr; overflow:visible;}
  .col{height:auto; overflow:visible;}
}

/* ── Дуэли (UI-C): колокол входящих, модалка вызова, соседи на клетке ── */
.duel-menu{position:fixed; z-index:90; min-width:260px; max-width:320px; max-height:60vh; overflow:auto;
  background:var(--panel-2); border:1px solid var(--edge-glass); border-radius:var(--r-sm); box-shadow:var(--shadow); padding:10px;}
.duel-menu-head{font-family:var(--f-display); color:var(--ink-soft); font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; padding:2px 4px 8px;}
.duel-menu-empty{font-family:var(--f-data); font-size:.84rem; color:var(--muted); padding:4px 4px 6px;}
.duel-row{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:8px; border-top:1px solid var(--edge-soft);}
.duel-row-body{min-width:0;}
.duel-who{font-family:var(--f-body); font-size:.95rem; color:var(--ink);}
.duel-meta{font-family:var(--f-data); font-size:.74rem; color:var(--muted); margin-top:1px;}
.duel-meta.is-lethal{color:var(--err);}
.duel-row-btns{display:flex; gap:5px; flex:none;}

.modal--duel .duel-type{display:flex; gap:8px; margin:4px 0 12px;}
.duel-type-btn{flex:1; font-family:var(--f-data); font-size:.86rem; color:var(--ink-soft); background:transparent;
  border:1px solid var(--edge-glass); border-radius:999px; padding:8px 10px; cursor:pointer; transition:.15s;}
.duel-type-btn:hover{background:rgba(255,255,255,.05); color:var(--ink);}
.duel-type-btn.is-on{color:#2a1e0c; background:linear-gradient(180deg,var(--gold),var(--gold-deep)); border-color:transparent; font-weight:700;}
.duel-warn{font-family:var(--f-data); font-size:.82rem; color:var(--err); background:rgba(192,90,62,.12);
  border:1px solid rgba(192,90,62,.4); border-radius:var(--r-sm); padding:9px 11px; margin:0 0 14px; line-height:1.45;}

/* Секция «Игроки здесь» в панели клетки. */
/* Надгробия на клетке (Блок 14.3): мелкие квадратики 32×32, тултип по наведению.
   Плейсхолдер — тёмный камень; иконку автор подставит позже (background-image). */
/* Панель клетки — колонка: шапка+объекты сверху, список игроков растягивается
   и скроллит внутри себя, кладбище прижато к низу (микро-пасхалка). */
#cellPanel{display:flex; flex-direction:column; overflow:hidden;}

/* Надгробия: мелкие прозрачные иконки, прижаты к низу, без заголовка и черты. */
.corpses-sec{flex:none; margin-top:10px;}
.corpses-grid{display:flex; flex-wrap:wrap; gap:5px;}
/* Прозрачная иконка — без подложки, рамки и тени (требование автора). */
.corpse-mark{width:17px; height:17px; flex:none; object-fit:contain; display:block;
  cursor:default; opacity:.85; transition:transform .12s ease, filter .12s ease, opacity .12s ease;}
.corpse-mark:hover{transform:translateY(-1px); filter:brightness(1.4); opacity:1;}

/* Секция «Игроки здесь» — flex:1, держит кладбище у низа даже без игроков. */
.nearby-sec{flex:1 1 auto; min-height:0; display:flex; flex-direction:column; margin-top:16px;}
.nearby-head{flex:none; font-family:var(--f-display); color:var(--gold); font-size:.75rem; letter-spacing:.1em; text-transform:uppercase; margin-bottom:10px; padding-top:14px; border-top:1px solid var(--edge-glass);}

/* Прокручиваемый список игроков (скроллбар — из единого блока выше). */
.nearby-scroll{flex:1 1 auto; min-height:0; overflow-y:auto; padding-right:4px;}

/* Карточка соседа — кликабельна целиком (аккордеон). */
.nearby-row{display:flex; align-items:center; gap:10px; padding:8px 12px; margin-bottom:8px;
  background:var(--panel-glass-2); border:1px solid var(--edge-glass); border-radius:var(--r-sm);
  cursor:pointer; user-select:none; transition:border-color .12s ease, background .12s ease;}
.nearby-row:hover{border-color:rgba(226,183,94,.4);}
.nearby-body{flex:1 1 auto; min-width:0;}
.nearby-name{font-family:var(--f-body); font-size:1rem; color:var(--ink); line-height:1.15; min-width:0;}
.nearby-meta{font-family:var(--f-data); font-size:.74rem; color:var(--muted); margin-top:1px;}
.nearby-caret{flex:none; color:var(--muted); font-size:.72rem; margin-left:6px;}

/* Активный исходящий вызов — тонкий кроваво-красный кант. */
.nearby-row--pending{border-color:#a01d1d; box-shadow:0 0 0 1px rgba(160,29,29,.35);}
.nearby-row--pending:hover{border-color:#c02525;}

/* Открытая карточка стыкуется с под-блоком (без нижнего скругления и отступа). */
.nearby-row--open{margin-bottom:0; border-bottom-left-radius:0; border-bottom-right-radius:0; border-bottom-color:transparent;}

/* Выезжающий под-блок с действиями — та же стилистика, крепится под карточку. */
.nearby-expand{background:var(--panel-glass-2); border:1px solid var(--edge-glass); border-top:none;
  border-radius:0 0 var(--r-sm) var(--r-sm); padding:8px; margin-bottom:8px;
  display:flex; flex-direction:column; gap:6px; overflow:hidden;}
.nearby-expand.is-anim{animation:nb-expand .18s ease;}
@keyframes nb-expand{from{opacity:.2; max-height:0;} to{opacity:1; max-height:220px;}}
@media (prefers-reduced-motion: reduce){ .nearby-expand.is-anim{animation:none;} }

/* Кнопки под-блока — столбиком, на всю ширину. */
.nb-act{width:100%; font-family:var(--f-data); font-size:.86rem; padding:8px 12px; cursor:pointer;
  color:var(--ink-soft); background:rgba(255,255,255,.03); border:1px solid var(--edge-glass);
  border-radius:var(--r-sm); transition:background .12s ease, color .12s ease, border-color .12s ease;}
.nb-act:hover:not(:disabled){background:rgba(226,183,94,.12); color:var(--ink); border-color:rgba(226,183,94,.4);}
.nb-act:disabled{opacity:.45; cursor:default;}
.nb-act--danger{color:#e6a3a3; border-color:rgba(160,29,29,.6);}
.nb-act--danger:hover{background:rgba(160,29,29,.18); color:#ffe9e9; border-color:#c02525;}

/* Пульсирующая зелёная точка «в сети». */
.presence-dot{flex:none; width:9px; height:9px; border-radius:50%; background:#57d06a;
  box-shadow:0 0 0 0 rgba(87,208,106,.55); animation:presence-pulse 1.8s ease-out infinite;}
@keyframes presence-pulse{
  0%{box-shadow:0 0 0 0 rgba(87,208,106,.5);}
  70%{box-shadow:0 0 0 6px rgba(87,208,106,0);}
  100%{box-shadow:0 0 0 0 rgba(87,208,106,0);}
}
@media (prefers-reduced-motion: reduce){ .presence-dot{animation:none;} }

/* Спящий сосед (0.55.0): виден на клетке даже вне сети — он законная добыча
   вора. Точка не пульсирует и не зелёная: это не присутствие, а беспомощность. */
.presence-dot--asleep{background:#6a6f86; box-shadow:none; animation:none; opacity:.75;}

/* Левая панель — колонка; группа действий прижата к низу (не к валютам). */
#playerPanel{display:flex; flex-direction:column;}
.cell-acts{display:flex; flex-direction:column; gap:4px; margin-top:auto;}
.pa-btn{width:100%; font-family:var(--f-data); font-size:.82rem; padding:5px 12px; cursor:pointer;
  color:var(--ink-soft); background:rgba(255,255,255,.03); border:1px solid var(--edge-glass);
  border-radius:var(--r-sm); transition:background .12s ease, color .12s ease, border-color .12s ease;}
.pa-btn:hover{background:rgba(226,183,94,.12); color:var(--ink); border-color:rgba(226,183,94,.4);}
.pa-btn:active{transform:translateY(1px);}

/* ══════════════ Окно контейнера (город/деревня/ферма) ══════════════ */
/* Оверлей на месте центр+право (левая панель игрока остаётся). Спан по
   колонкам 2–4 сетки доски + z-index — окно точь-в-точь накрывает центр и
   право теми же габаритами. */
.city-overlay{grid-column:2 / 4; grid-row:1; z-index:5; min-height:0;
  background:var(--gold-sheen), var(--panel-glass); border:1px solid var(--edge-glass);
  border-radius:var(--r); box-shadow:var(--shadow); overflow:hidden; display:flex; flex-direction:column;}
/* Режим города: доска = 2 блока (панель игрока слева + окно города на месте
   центра+права). Прячем центр и правую колонку физически — иначе грид
   выталкивает их в неявную строку 2 ПОД окном города (панель клетки снизу). */
.game-board.is-city > .col--center,
.game-board.is-city > .col--right{display:none;}
.cw-head{display:flex; align-items:center; gap:15px; padding:15px 20px; background:var(--bar-glass); border-bottom:1px solid var(--edge-glass);}
.cw-head--art{position:relative; background-size:cover; background-position:center 40%; isolation:isolate;}
.cw-head--art::before{content:""; position:absolute; inset:0; z-index:-1;
  /* затемнение слева направо: под гербом/именем плотнее, справа арт дышит */
  background:linear-gradient(90deg, rgba(12,8,4,.78), rgba(12,8,4,.45) 55%, rgba(12,8,4,.6));}
.cw-head--art .cw-name, .cw-head--art .cw-kind{text-shadow:0 1px 3px rgba(0,0,0,.8);}
.cw-crest.is-art{background-size:cover; background-position:center; color:transparent;}
.cw-crest{width:44px; height:44px; flex:none; border-radius:var(--r-sm); border:1px solid var(--rim);
  overflow:hidden; display:grid; place-items:center; color:rgba(255,244,222,.4); font-size:1.3rem;
  /* заготовка под будущую картинку поселения (как у кнопок зданий → фон-<img>) */
  background:rgba(20,13,6,.5); background-size:cover; background-position:center;
  /* полупрозрачная теневая ВЫПУКЛОСТЬ поверх картинки (тот же приём, что .bld-btn) */
  box-shadow:inset 0 2px 0 rgba(255,240,205,.28), inset 0 -12px 20px rgba(0,0,0,.5), inset 0 0 0 1px rgba(255,235,190,.07), 0 5px 12px rgba(0,0,0,.5);}
.cw-name{font-family:var(--f-display); font-size:1.45rem; color:var(--ink); letter-spacing:.03em; line-height:1.05;}
.cw-kind{font-family:var(--f-data); font-size:.74rem; color:var(--gold); letter-spacing:.14em; text-transform:uppercase; margin-top:1px;}
.cw-leave{font-family:var(--f-data); font-size:.85rem; color:var(--ink-soft); background:transparent;
  border:1px solid var(--edge-glass); border-radius:999px; padding:8px 15px; cursor:pointer; margin-left:auto; transition:.15s;}
.cw-leave:hover{background:rgba(255,255,255,.05); color:var(--ink);}
.cw-body{display:grid; grid-template-columns:minmax(0,1fr) 360px; flex:1; min-height:0;}
.cw-col{padding:20px 22px; overflow:auto;}
.cw-col--right{border-left:1px solid var(--edge-glass); background:rgba(20,14,7,.16);}
/* Левая колонка — flex-столбец, чтобы блок рынка/торговца тянулся на всю
   высоту окна поселения (иначе снизу торчало пустое тёмное поле). */
.cw-col--left{display:flex; flex-direction:column;}
.cw-col--left .mkt-host{flex:1; min-height:0; display:flex; flex-direction:column;}
.mkt-host .mkt-pane{flex:1; min-height:0;}
.mkt-host .mkt-pane[hidden]{display:none;}          /* атрибут hidden не должен перебиваться flex */
.mkt-host .mkt-pane:not([hidden])[data-pane="trader"]{display:flex;}

/* Рынок — заглушка */
.mk-bar{display:flex; gap:10px; align-items:center; margin-bottom:14px;}
.mk-search{flex:1; font-family:var(--f-data); font-size:.9rem; color:var(--muted); background:var(--panel-glass-2); border:1px solid var(--edge-glass); border-radius:var(--r-sm); padding:9px 12px;}
.mk-tab{font-family:var(--f-data); font-size:.82rem; color:var(--ink-soft); background:transparent; border:1px solid var(--edge-glass); border-radius:999px; padding:7px 13px; cursor:default;}
.mk-tab.is-active{background:rgba(226,183,94,.16); color:var(--ink); border-color:rgba(226,183,94,.5);}
.mk-placeholder{margin-top:18px; text-align:center; font-family:var(--f-data); font-size:.84rem; color:var(--muted); line-height:1.6;}
.mk-placeholder b{color:var(--ink-soft);}

/* Здания: объёмные кнопки. БЕЗ цвета — только заготовка под картинку + полупрозрачная теневая выпуклость поверх. */
.cw-blds{display:flex; flex-direction:column; gap:12px; align-items:stretch; max-width:326px;}
.bld{border-radius:var(--r-sm);}
.bld-btn{position:relative; display:flex; align-items:flex-end; width:100%; height:74px; cursor:pointer; text-align:left;
  padding:0; border:1px solid var(--rim); border-radius:var(--r-sm); color:inherit; overflow:hidden;
  /* фон — арт здания (city-window.js подставляет inline background-image);
     цвет-подложка остаётся на случай отсутствия файла (fail-closed) */
  background:rgba(20,13,6,.5); background-size:cover; background-position:center;
  /* полупрозрачная теневая ВЫПУКЛОСТЬ поверх картинки */
  box-shadow:inset 0 2px 0 rgba(255,240,205,.28), inset 0 -12px 20px rgba(0,0,0,.5), inset 0 0 0 1px rgba(255,235,190,.07), 0 5px 12px rgba(0,0,0,.5);
  transition:transform .1s ease, box-shadow .12s ease;}
.bld-btn:hover{transform:translateY(-1px); box-shadow:inset 0 2px 0 rgba(255,240,205,.36), inset 0 -12px 20px rgba(0,0,0,.5), inset 0 0 0 1px rgba(255,235,190,.11), 0 8px 16px rgba(0,0,0,.55);}
.bld-btn:active{transform:translateY(1px); box-shadow:inset 0 2px 6px rgba(0,0,0,.5), 0 2px 6px rgba(0,0,0,.5);}
.bld-art-tag{position:absolute; top:7px; left:9px; font-family:var(--f-data); font-size:.6rem; letter-spacing:.08em; text-transform:uppercase; color:rgba(255,244,222,.4);}
.bld-plate{position:relative; width:100%; padding:9px 12px; background:linear-gradient(180deg, rgba(20,13,6,0), rgba(16,10,5,.72) 55%); display:flex; align-items:center; gap:8px;}
.bld-name{flex:1; font-family:var(--f-display); font-size:1.02rem; color:#fff6e6; letter-spacing:.02em; text-shadow:0 1px 3px rgba(0,0,0,.7); line-height:1.05;}
.bld-count{font-family:var(--f-data); font-size:.68rem; color:var(--gold); background:rgba(20,13,6,.6); border:1px solid rgba(226,183,94,.4); border-radius:999px; padding:2px 8px; white-space:nowrap;}
.bld-count.is-none{color:var(--muted); border-color:rgba(150,130,100,.4);}
.bld-chev{width:16px; height:16px; flex:none; stroke:#fff6e6; fill:none; stroke-width:2; transition:transform .18s; filter:drop-shadow(0 1px 2px rgba(0,0,0,.7));}
.bld.is-open .bld-chev{transform:rotate(90deg); stroke:var(--gold);}
.bld-actions{border:1px solid var(--edge-glass); border-top:0; border-radius:0 0 var(--r-sm) var(--r-sm); background:rgba(18,12,6,.9); padding:6px; margin-top:-2px; display:none;}
.bld.is-open .bld-actions{display:block;}
.act{display:flex; align-items:center; gap:10px; width:100%; text-align:left; cursor:pointer; background:transparent; border:0; border-radius:var(--r-sm); padding:9px 11px; color:inherit;}
.act:hover{background:rgba(226,183,94,.12);}
.act-dot{width:5px; height:5px; border-radius:50%; background:var(--gold); flex:none;}
.act-name{flex:1; font-family:var(--f-body); font-size:.95rem; color:var(--ink);}
.act-meta{font-family:var(--f-data); font-size:.73rem; color:var(--muted);}
.act-empty{font-family:var(--f-data); font-size:.82rem; color:var(--muted); padding:10px 11px; line-height:1.5;}

/* Фермерская сторона окна */
.farm-box{background:var(--panel-glass-2); border:1px solid var(--edge-glass); border-radius:var(--r-sm); padding:14px; margin-bottom:12px;}
.farm-bal{font-family:var(--f-display); color:var(--gold); font-size:1.6rem;}
.farm-line{font-family:var(--f-data); font-size:.82rem; color:var(--muted); margin-top:3px;}
.farm-line.arrears{color:var(--ember);}
.farm-btns{display:flex; gap:8px; margin-top:12px;}
.farm-btn{flex:1; font-family:var(--f-data); font-size:.86rem; color:var(--ink); background:rgba(226,183,94,.12); border:1px solid var(--edge-glass); border-radius:var(--r-sm); padding:9px 10px; cursor:pointer;}
.farm-btn:hover{background:rgba(226,183,94,.22);}
.farm-prod{display:flex; justify-content:space-between; font-family:var(--f-body); font-size:.92rem; color:var(--ink); padding:7px 2px; border-bottom:1px solid rgba(226,183,94,.14);}
.farm-prod .amt{font-family:var(--f-data); color:var(--gold);}
/* Кнопки постройки/сноса модуля в окне фермы (правая колонка). */
.farm-modbuild{width:100%; margin-top:8px; font-family:var(--f-data); font-size:.84rem; color:#2a1e0c; background:linear-gradient(180deg,var(--gold),var(--gold-deep)); border:1px solid rgba(226,183,94,.5); border-radius:var(--r-sm); padding:8px 10px; cursor:pointer;}
.farm-modbuild:hover:not(:disabled){filter:brightness(1.07);}
.farm-modbuild:disabled{opacity:.45; cursor:default; background:rgba(226,183,94,.12); color:var(--ink-soft);}
.farm-demolish{width:100%; margin-top:8px; font-family:var(--f-data); font-size:.82rem; color:#e8b6ac; background:rgba(150,44,32,.16); border:1px solid rgba(178,54,40,.5); border-radius:var(--r-sm); padding:7px 10px; cursor:pointer;}
.farm-demolish:hover{background:rgba(150,44,32,.28);}
.bldb-danger{background:linear-gradient(180deg,#a23a2a,#7c2418)!important; color:#f3d9d2!important; border-color:rgba(178,54,40,.6)!important;}

/* ── Рынок / Торговец: тумблер вкладок ─────────────────────── */
.mkt-switch{display:flex; gap:8px; margin-bottom:16px;}
.mkt-tab{font-family:var(--f-data); font-size:.84rem; color:var(--ink-soft); background:transparent; border:1px solid var(--edge-glass); border-radius:999px; padding:7px 16px; cursor:pointer; transition:.15s;}
.mkt-tab:hover{background:rgba(226,183,94,.10);}
.mkt-tab.is-active{background:rgba(226,183,94,.16); color:var(--ink); border-color:rgba(226,183,94,.5);}

/* ── Вкладка Торговец: арт справа 2/3 (фон), колонки слева поверх ── */
/* display:flex тянет .tr-list на всю высоту блока (align-items:stretch по
   умолчанию): иначе под коротким содержимым — например пустой скупкой —
   снизу торчал светлый арт, подложка обрывалась по высоте текста. .tr-art
   абсолютный → в раскладку flex не входит, остаётся на всю высоту. */
/* flex:1 тянет .tr-pane на всю высоту левой колонки (min-height — нижний пол,
   чтобы на коротком контенте панель не схлопывалась). */
.tr-pane{position:relative; flex:1; min-height:340px; display:flex;}
/* 0.81.0: арт квадратный (1024×1024), а панель высокая и узкая — по cover он
   резался по голове, а обрезка слева ещё и съедала запечённый в альфу
   градиент. Поэтому contain по всей ширине блока и прижим к правому нижнему
   углу: фигура видна целиком, затухание попадает ровно под колонки. */
.tr-art{position:absolute; top:0; right:0; bottom:0; left:0; z-index:0;
  background-size:contain; background-position:bottom right; background-repeat:no-repeat;
  border-radius:var(--r-sm); opacity:.95;
  /* CSS-маски здесь НЕТ: затухание левого края запечено в альфе самого
     torgovets.png. Вторая маска поверх дала бы двойное затухание. */}
.tr-list{position:relative; z-index:1; width:72%; display:flex; flex-direction:column;
  /* лёгкая подложка под колонками — арт «немного заходит» справа.
     Подложка идёт от самого края блока, а содержимое отступает слева
     (padding-left), чтобы не липло к затемнению. Верхний отступ — чтобы
     подвкладки «Продажа/Покупка» не липли к началу затемнения. */
  background:linear-gradient(90deg, rgba(20,14,7,.86) 82%, rgba(20,14,7,0));
  padding:16px 10px 14px 20px;}

/* Пустое состояние скупки — по левому краю, как заголовок и таблица (в
   глобальном .mk-placeholder текст центрирован; здесь равняем под колонки). */
.tr-body .mk-placeholder{text-align:left;}

/* Единый grid: все строки делят одни треки → ячейки выровнены вертикально. */
.tr-grid{display:grid; align-items:center;
  grid-template-columns:minmax(78px,1.1fr) 46px 54px 44px 60px 52px auto;
  column-gap:8px; row-gap:2px;}
.tr-h{font-family:var(--f-data); font-size:.64rem; letter-spacing:.05em; text-transform:uppercase; color:var(--muted); padding-bottom:6px; border-bottom:1px solid rgba(226,183,94,.16);}
.tr-c{text-align:center;}
.tr-grid > div:not(.tr-h){padding:6px 0; border-bottom:1px solid rgba(226,183,94,.10);}
.tr-name{font-family:var(--f-body); font-size:.94rem; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.tr-have{font-family:var(--f-data); font-size:.9rem; color:var(--ink-soft);}
.tr-c:not(.tr-have):not(.tr-h){font-family:var(--f-data); font-size:.88rem; color:var(--muted);}
.tr-units{color:var(--ink-soft)!important;}
.tr-price{color:var(--gold)!important; font-weight:600;}

/* Вертикальный степпер стопок: ▲ / число / ▼ */
.tr-step{display:flex; flex-direction:column; align-items:center; gap:1px;}
.tr-step.is-off{color:var(--muted); font-family:var(--f-data);}
.tr-arrow{font-size:.6rem; line-height:1; color:var(--gold); background:rgba(226,183,94,.10); border:1px solid var(--edge-glass); border-radius:5px; width:26px; height:16px; cursor:pointer; padding:0; display:flex; align-items:center; justify-content:center;}
.tr-arrow:hover{background:rgba(226,183,94,.24);}
.tr-arrow:active{transform:translateY(1px);}
.tr-num{font-family:var(--f-data); font-size:1rem; color:var(--ink); min-width:26px; text-align:center; padding:1px 0;}

.tr-sell{font-family:var(--f-data); font-size:.82rem; color:var(--ink); background:rgba(226,183,94,.14); border:1px solid var(--edge-glass); border-radius:var(--r-sm); padding:7px 12px; cursor:pointer; white-space:nowrap;}
.tr-sell:hover{background:rgba(226,183,94,.26);}
.tr-sell:disabled{opacity:.5; cursor:default;}
.tr-hint{font-family:var(--f-data); font-size:.7rem; color:var(--muted); white-space:nowrap;}

/* ── Рынок: лицевая вкладка (арт на всё окно + 2 золотые кнопки) ── */
.mkt-face{position:relative; min-height:360px; border-radius:var(--r-sm); overflow:hidden;}
.mkt-face-btns{position:absolute; inset:0; z-index:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:20px;}
.mkt-big{font-family:var(--f-display); font-size:1.5rem; letter-spacing:.04em; color:#fff6e6; cursor:pointer; min-width:230px; padding:20px 28px; border-radius:var(--r-sm);
  background:linear-gradient(180deg, rgba(226,183,94,.34), rgba(150,110,40,.30));
  border:1px solid rgba(255,235,190,.5);
  box-shadow:inset 0 2px 0 rgba(255,240,205,.4), inset 0 -14px 24px rgba(0,0,0,.5), 0 10px 22px rgba(0,0,0,.55);
  text-shadow:0 1px 4px rgba(0,0,0,.7); transition:transform .12s;}
.mkt-big:hover{transform:translateY(-2px); background:linear-gradient(180deg, rgba(226,183,94,.46), rgba(150,110,40,.36));}
.mkt-big:active{transform:translateY(1px); box-shadow:inset 0 2px 8px rgba(0,0,0,.55), 0 3px 8px rgba(0,0,0,.5);}

/* ── Рынок: покупка/продажа — строки как мини-инвентарь ── */
.mkt-sub-head{display:flex; align-items:center; gap:12px; margin-bottom:14px;}
.mkt-back{font-family:var(--f-data); font-size:.84rem; color:var(--gold); background:rgba(226,183,94,.10); border:1px solid var(--edge-glass); border-radius:999px; padding:6px 13px; cursor:pointer;}
.mkt-back:hover{background:rgba(226,183,94,.22);}
.mkt-rows{display:grid; grid-template-columns:minmax(90px,1.3fr) 44px 58px 66px 56px auto; align-items:center; column-gap:8px; row-gap:2px;}
.mkt-row{display:contents;}
.mkt-row > *{padding:7px 0; border-bottom:1px solid rgba(226,183,94,.10);}
.mkt-row--h > *{font-family:var(--f-data); font-size:.64rem; letter-spacing:.05em; text-transform:uppercase; color:var(--muted); border-bottom:1px solid rgba(226,183,94,.18);}
.mkt-c{text-align:center; font-family:var(--f-data); font-size:.86rem; color:var(--muted);}
.mkt-name{font-family:var(--f-body); font-size:.92rem; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.mkt-have{color:var(--ink-soft)!important;}
.mkt-unit, .mkt-cost{color:var(--gold)!important; font-weight:600;}
.mkt-in{width:52px; font-family:var(--f-data); font-size:.86rem; color:var(--ink); text-align:center; background:rgba(18,12,6,.5); border:1px solid var(--edge-glass); border-radius:6px; padding:4px 4px;}
.mkt-in::-webkit-inner-spin-button{opacity:.5;}
.mkt-do{font-family:var(--f-data); font-size:.8rem; color:var(--ink); background:rgba(226,183,94,.16); border:1px solid var(--edge-glass); border-radius:var(--r-sm); padding:6px 10px; cursor:pointer; white-space:nowrap;}
.mkt-do:hover{background:rgba(226,183,94,.28);}
.mkt-do:disabled{opacity:.5; cursor:default;}
.mkt-cancel{background:rgba(150,60,40,.18);}
.mkt-cancel:hover{background:rgba(180,70,45,.3);}
.mkt-badge{font-family:var(--f-data); font-size:.6rem; letter-spacing:.04em; color:var(--gold); border:1px solid rgba(226,183,94,.45); border-radius:999px; padding:1px 6px; vertical-align:middle;}
.mkt-badge.mine{color:var(--muted); border-color:rgba(150,130,100,.45);}
.mkt-seller{font-family:var(--f-data); font-size:.72rem; color:var(--muted);}
.mkt-row.is-mine .mkt-name{color:var(--ink-soft);}
.mkt-sort{display:flex; align-items:center; gap:8px; margin-bottom:12px; font-family:var(--f-data); font-size:.78rem; color:var(--muted);}
.mkt-sortsel{font-family:var(--f-data); font-size:.82rem; color:var(--ink); background:rgba(18,12,6,.55); border:1px solid var(--edge-glass); border-radius:var(--r-sm); padding:5px 9px; cursor:pointer;}

/* Продажа: подвкладки Выставить | Мои лоты */
.mkt-subswitch{display:flex; gap:8px; margin-bottom:14px;}
.mkt-subtab{font-family:var(--f-data); font-size:.8rem; color:var(--ink-soft); background:transparent; border:1px solid var(--edge-glass); border-radius:999px; padding:6px 14px; cursor:pointer;}
.mkt-subtab:hover{background:rgba(226,183,94,.10);}
.mkt-subtab.is-active{background:rgba(226,183,94,.16); color:var(--ink); border-color:rgba(226,183,94,.5);}

/* Мои лоты: строки name | остаток | цена/шт | Вернуть */
.mkt-mine-rows{display:grid; grid-template-columns:minmax(120px,1fr) 92px 78px auto; align-items:center; column-gap:8px; row-gap:2px;}
.mkt-mine-row{display:contents;}
.mkt-mine-row > *{padding:8px 0; border-bottom:1px solid rgba(226,183,94,.10);}
.mkt-mine-row.mkt-row--h > *{font-family:var(--f-data); font-size:.64rem; letter-spacing:.05em; text-transform:uppercase; color:var(--muted); border-bottom:1px solid rgba(226,183,94,.18);}

/* Покупка: панель поиск + категория + сортировка */
.mkt-filters{display:flex; gap:8px; align-items:center; margin-bottom:12px; flex-wrap:wrap;}
.mkt-search{flex:1; min-width:130px; font-family:var(--f-data); font-size:.84rem; color:var(--ink); background:rgba(18,12,6,.55); border:1px solid var(--edge-glass); border-radius:var(--r-sm); padding:7px 11px;}
.mkt-search::placeholder{color:var(--muted);}
.mkt-catsel{font-family:var(--f-data); font-size:.82rem; color:var(--ink); background:rgba(18,12,6,.55); border:1px solid var(--edge-glass); border-radius:var(--r-sm); padding:6px 9px; cursor:pointer;}

/* ── Модуль «Строить» ─────────────────────────────────────── */
.bldb-note{font-family:var(--f-data); font-size:.86rem; color:var(--muted); margin:0 0 14px;}
.bldb-note.is-bad{color:var(--ember);}
.bldb-list{display:flex; flex-direction:column; gap:10px;}
.bldb-row{display:flex; align-items:center; gap:12px; padding:11px 13px; background:var(--panel-glass); border:1px solid var(--edge-glass); border-radius:var(--r-sm);}
.bldb-info{flex:1; min-width:0;}
.bldb-name{font-family:var(--f-display); font-size:1.05rem; color:var(--ink);}
.bldb-meta{font-family:var(--f-data); font-size:.75rem; color:var(--muted); margin-top:2px;}
.bldb-costs{display:flex; flex-wrap:wrap; gap:6px 12px; margin-top:7px;}
.bldb-cost{font-family:var(--f-data); font-size:.8rem; color:var(--ink-soft);}
.bldb-cost.is-short{color:var(--ember);}
.bldb-do{flex:none;}
.bldb-do:disabled{opacity:.5; cursor:default;}

/* Попап-предупреждение перед стройкой */
.bldb-modal{position:fixed; inset:0; z-index:1000; display:flex; align-items:center; justify-content:center; background:var(--veil); backdrop-filter:blur(2px); -webkit-backdrop-filter:blur(2px);}
.bldb-dialog{max-width:420px; width:calc(100% - 40px); background:linear-gradient(180deg, rgba(40,30,15,.98), rgba(28,20,10,.98)); border:1px solid var(--edge-glass); border-radius:var(--r-md, 12px); box-shadow:var(--shadow); padding:22px;}
.bldb-dtitle{font-family:var(--f-display); font-size:1.25rem; color:var(--ink); margin-bottom:10px;}
.bldb-dtext{font-family:var(--f-body); font-size:.95rem; color:var(--ink-soft); line-height:1.55; margin:0 0 18px;}
.bldb-dtext b{color:var(--ember);}
.bldb-dbtns{display:flex; justify-content:flex-end; gap:10px;}

/* ── Топбар: стройка идёт — красная рамка + метка «осталось N» ── */
.tb-seg.is-building{position:relative; border-radius:10px; box-shadow:inset 0 0 0 2px rgba(200,64,45,.85);}
.act-build-badge{position:absolute; top:-10px; left:50%; transform:translateX(-50%); z-index:2;
  font-family:var(--f-data); font-size:.68rem; letter-spacing:.03em; color:#ffd9cf;
  background:rgba(150,34,22,.95); border:1px solid rgba(220,90,70,.95); border-radius:999px; padding:2px 10px; white-space:nowrap;
  box-shadow:0 2px 8px rgba(0,0,0,.5);}

/* ══════════════ Очный обмен (окно в центральной области) ══════════════ */
.exch{display:flex; flex-direction:column; height:100%; min-height:0; gap:12px;}
.exch-head{display:flex; align-items:center; justify-content:space-between; flex:none;}
.exch-head .module-title{margin:0;}
.exch-close{font-family:var(--f-data); font-size:.82rem; color:var(--ink-soft); background:rgba(255,255,255,.03); border:1px solid var(--edge-glass); border-radius:var(--r-sm); padding:6px 12px; cursor:pointer;}
.exch-close:hover{background:rgba(226,183,94,.12); color:var(--ink);}
.exch-inv{flex:4 1 0; min-height:0; display:flex; flex-direction:column; gap:10px; background:var(--panel-glass-2); border:1px solid var(--edge-glass); border-radius:var(--r-sm); padding:12px;}
.exch-inv-title{font-family:var(--f-display); color:var(--gold); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; flex:none;}
.exch-filters{display:flex; gap:6px; flex-wrap:wrap; flex:none;}
.exch-tab{font-family:var(--f-data); font-size:.8rem; color:var(--ink-soft); background:transparent; border:1px solid var(--edge-glass); border-radius:999px; padding:5px 13px; cursor:pointer;}
.exch-tab.is-on{color:#2a1e0c; background:linear-gradient(180deg,var(--gold),var(--gold-deep)); border-color:transparent; font-weight:700;}
.exch-inv-scroll{flex:1 1 auto; min-height:0; overflow-y:auto; padding-right:4px;}
.exch-row{display:grid; grid-template-columns:38px 1fr 62px auto; align-items:center; gap:10px; padding:7px 4px; border-bottom:1px solid rgba(226,183,94,.10);}
.exch-ico{width:36px; height:36px; border-radius:8px; border:1px solid var(--rim); background:rgba(18,12,6,.4); box-shadow:inset 0 1px 0 rgba(255,255,255,.06), inset 0 -3px 6px rgba(0,0,0,.35); display:grid; place-items:center; font-size:1.05rem;}
.exch-nm{min-width:0;}
.exch-nm .n{font-family:var(--f-body); font-size:.95rem; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.exch-nm .m{font-family:var(--f-data); font-size:.72rem; color:var(--muted); margin-top:1px;}
.exch-badge{font-family:var(--f-data); font-size:.6rem; color:var(--gold); background:rgba(226,183,94,.14); border:1px solid var(--edge-glass); border-radius:999px; padding:1px 6px; margin-left:6px; vertical-align:middle;}
.exch-qty{width:56px; font-family:var(--f-data); font-size:.85rem; text-align:center; color:var(--ink); background:rgba(18,12,6,.35); border:1px solid var(--edge-glass); border-radius:6px; padding:5px 4px;}
.exch-give{font-family:var(--f-data); font-size:.8rem; white-space:nowrap; padding:6px 12px; border-radius:var(--r-sm); cursor:pointer; background:linear-gradient(180deg,var(--gold),var(--gold-deep)); color:#2a1e0c; border:none;}
.exch-give:hover{filter:brightness(1.07);}
.exch-empty{font-family:var(--f-data); font-size:.82rem; color:var(--muted); text-align:center; padding:14px 0;}
.exch-offers{flex:3 1 0; min-height:0; display:grid; grid-template-columns:1fr 1fr; gap:12px;}
.exch-side{position:relative; display:flex; flex-direction:column; min-height:0; gap:8px; background:var(--panel-glass-2); border:1px solid var(--edge-glass); border-radius:var(--r-sm); padding:12px;}
.exch-side-head{font-family:var(--f-display); color:var(--gold); font-size:.74rem; letter-spacing:.08em; text-transform:uppercase; flex:none;}
.exch-side-head b{color:var(--ink);}
.exch-side-body{flex:1 1 auto; min-height:0; display:flex; flex-direction:column; gap:8px; transition:.15s;}
.exch-offer-list{flex:1 1 auto; min-height:0; overflow-y:auto; display:flex; flex-direction:column; gap:6px; padding-right:4px;}
.exch-offer{display:flex; align-items:center; gap:8px; padding:6px 8px; background:rgba(18,12,6,.28); border:1px solid var(--edge-glass); border-radius:8px;}
.exch-offer .oi{width:26px; height:26px; flex:none; border-radius:6px; border:1px solid var(--rim); background:rgba(18,12,6,.4); display:grid; place-items:center; font-size:.85rem;}
.exch-offer .on{flex:1; min-width:0; font-family:var(--f-body); font-size:.9rem; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.exch-offer .oq{font-family:var(--f-data); font-size:.82rem; color:var(--gold);}
.exch-x{width:22px; height:22px; flex:none; border-radius:6px; border:1px solid rgba(160,29,29,.5); background:rgba(160,29,29,.14); color:#e6a3a3; cursor:pointer; font-size:.85rem; line-height:1;}
.exch-x:hover{background:rgba(160,29,29,.28);}
.exch-coins{display:flex; align-items:center; gap:8px; flex:none; font-family:var(--f-data); font-size:.85rem; color:var(--ink-soft);}
.exch-coins .lbl{margin-right:auto;}
.exch-coins input{width:96px; font-family:var(--f-data); text-align:right; color:var(--gold); background:rgba(18,12,6,.35); border:1px solid var(--edge-glass); border-radius:6px; padding:5px 8px;}
.exch-coins .val{color:var(--gold); font-weight:700;}
.exch-confirm{flex:none; font-family:var(--f-display); font-size:.95rem; padding:9px; border-radius:var(--r-sm); cursor:pointer; background:linear-gradient(180deg,var(--gold),var(--gold-deep)); color:#2a1e0c; border:none;}
.exch-confirm:hover{filter:brightness(1.06);}
.exch-confirm--wait{background:rgba(255,255,255,.04); border:1px solid var(--edge-glass); color:var(--muted); cursor:default; filter:none;}
.exch-confirm--ready{background:rgba(157,187,122,.18); border:1px solid rgba(157,187,122,.6); color:#cfe0b6; filter:none;}
.exch-side.is-locked .exch-side-body{opacity:.4; filter:grayscale(.5); pointer-events:none;}
.exch-ribbon{position:absolute; top:44px; left:12px; right:12px; z-index:2; display:grid; place-items:center; pointer-events:none;}
.exch-ribbon span{font-family:var(--f-display); color:var(--ok); font-size:.9rem; background:rgba(20,18,14,.82); border:1px solid rgba(157,187,122,.55); border-radius:999px; padding:6px 16px;}

/* ═══════════ ЧАТ (Блок 16) ═══════════ */

/* Центр — трек из двух этажей одинаковой высоты: модули сверху, чат снизу.
   Скролла как элемента нет: выезд — плавный сдвиг всего трека вверх. Модуль
   под чатом остаётся смонтированным (его состояние и опрос живут). */
.col--center{overflow:hidden;}
.center-track{flex:1; min-height:0; display:flex; flex-direction:column; gap:0;
  transform:translateY(0); transition:transform .42s cubic-bezier(.6,.02,.2,1); will-change:transform;}
.center-track.is-chat{transform:translateY(-100%);}
/* Этаж = ровно высота колонки; их два → трек вдвое выше, лишнее срезано. */
.ct-floor{flex:none; height:100%; min-height:0; display:flex; flex-direction:column;}
@media (prefers-reduced-motion: reduce){ .center-track{transition:none;} }

/* Блок чата — тот же «стеклянный» модуль, что и любая вкладка. */
.chat{flex:1; min-height:0; display:flex; flex-direction:column; padding:0; overflow:hidden;}

/* Вкладки-комнаты: Общий · Группа · Клан · приватные (закрываемые). */
.chat-tabs{flex:none; display:flex; align-items:center; gap:6px; padding:12px 14px 10px;
  border-bottom:1px solid var(--edge-glass); overflow-x:auto;}
.chat-tab{flex:none; display:inline-flex; align-items:center; gap:6px; font-family:var(--f-data);
  font-size:.82rem; color:var(--ink-soft); background:transparent; border:1px solid var(--edge-glass);
  border-radius:999px; padding:6px 13px; cursor:pointer; transition:.15s; white-space:nowrap;}
.chat-tab:hover{color:var(--ink); background:rgba(255,255,255,.05);}
.chat-tab.is-active{color:var(--gold); background:rgba(226,183,94,.16); border-color:var(--edge-glass);}
.chat-tab.is-stub{opacity:.55;}
/* Цветная метка канала на вкладке — та же палитра, что у индикатора. */
.chat-tab::before{content:''; width:7px; height:7px; border-radius:50%; background:var(--ch-c, transparent); flex:none;}
.chat-tab--obshiy{--ch-c:var(--ch-obshiy);}
.chat-tab--group{--ch-c:var(--ch-group);}
.chat-tab--clan{--ch-c:var(--ch-clan);}
.chat-tab--pm{--ch-c:var(--ch-pm);}
/* Непрочитанное во вкладке — счётчик. */
.chat-tab-badge{min-width:17px; height:17px; padding:0 4px; border-radius:999px; background:var(--ember);
  color:#fff4ec; font-size:.64rem; font-weight:700; display:grid; place-items:center;}
.chat-tab-x{margin-left:2px; color:var(--muted); font-size:.9rem; line-height:1; padding:0 1px; border-radius:3px;}
.chat-tab-x:hover{color:#ffd9d9; background:rgba(160,29,29,.35);}

/* Лента. */
.chat-feed{flex:1 1 auto; min-height:0; overflow-y:auto; padding:12px 14px; display:flex; flex-direction:column; gap:5px;}
.chat-line{font-family:var(--f-body); font-size:.92rem; line-height:1.4; color:var(--ink); word-break:break-word;}
.chat-line--obshiy{color:var(--ch-obshiy-text);}
.chat-line--pm{color:var(--ch-pm);}
.chat-line--sys{color:var(--muted); font-style:italic;}
/* Ник — кликабелен: открывает приватную вкладку с этим игроком. */
.chat-nick{cursor:pointer; font-weight:700; color:inherit; text-decoration:none;}
.chat-nick:hover{text-decoration:underline;}
.chat-tick{font-family:var(--f-data); font-size:.66rem; color:var(--muted); margin-right:6px;}
.chat-empty{color:var(--muted); font-size:.88rem; padding:6px 2px;}

/* Ввод. */
.chat-input-row{flex:none; display:flex; gap:8px; padding:10px 14px 12px; border-top:1px solid var(--edge-glass);}
.chat-input{flex:1 1 auto; min-width:0; font-family:var(--f-body); font-size:.92rem; color:var(--ink);
  background:rgba(18,12,6,.45); border:1px solid var(--edge-glass); border-radius:var(--r-sm);
  padding:9px 12px; outline:none;}
.chat-input:focus{border-color:rgba(226,183,94,.5);}
.chat-input:disabled{opacity:.5;}
.chat-hint{flex:none; font-family:var(--f-data); font-size:.66rem; color:var(--muted); padding:0 14px 10px;}

/* ── Индикатор чата (кружок в правом верхнем углу левой панели) ──
   Окантовка есть всегда. Непрочитанного нет → заливка прозрачная, пульса нет.
   Есть → заливка цветом канала + пульс; цвета каналов с непрочитанным
   перебираются ПО ОЧЕРЕДИ (цикл ведёт chat-indicator.js). */
:root{
  --ch-obshiy:#9aa0a6;       /* общий  — серый */
  --ch-obshiy-text:#e8e0d2;  /* текст общего канала: читаемый, не серый в ноль */
  --ch-group:#57d06a;        /* группа — зелёный */
  --ch-clan:#4a90d9;         /* клан   — синий */
  --ch-pm:#a86fe0;           /* личка  — фиолетовый */
}
.col--left{position:relative;}

/* ── ПОДСВЕТКА ЗАКЛАДКИ ЧАТА (1.0.0-rc16) ────────────────────────────
   Прежний кружок в углу панели убран. Непрочитанное показывает полоска
   цвета канала вдоль нижней кромки корешка — «свет из-под двери». Она
   шире точки, поэтому цвет канала виден боковым зрением; цвета каналов
   с непрочитанным перебирает по очереди chat-indicator.js (приоритета
   между каналами нет — решение автора).
   У АКТИВНОЙ закладки полоски нет по определению: открыли чат —
   непрочитанное обнулилось, а низ корешка занят хвостом-стыком. */
.nav-tab--chat.has-unread:not(.is-active)::before{
  content:''; position:absolute; left:10px; right:10px; bottom:0; height:3px;
  border-radius:2px 2px 0 0; background:var(--ch, var(--gold));
  box-shadow:0 0 11px 1px var(--chg, rgba(216,173,85,.55));
  animation:chat-tab-breathe 2.2s ease-in-out infinite;
}
@keyframes chat-tab-breathe{0%,100%{opacity:.32;} 50%{opacity:1;}}
@media (prefers-reduced-motion: reduce){
  .nav-tab--chat.has-unread:not(.is-active)::before{animation:none; opacity:.9;}
}

/* ── Торговец: подвкладка «Покупка» (0.43.0) ──
   Колонок шесть (без «у вас»): склад торговца бесконечен, а свои остатки
   игрок видит в инвентаре. Ассортимент — все 62 позиции, поэтому список
   обязан скроллиться внутри блока, а не растягивать окно поселения. */
.tr-grid--buy{grid-template-columns:minmax(78px,1.2fr) 54px 44px 60px 52px auto;}
/* flex:1 — лента заполняет высоту .tr-list (дотянута до низа блока) и
   скроллится внутри себя; фиксированный потолок высоты больше не нужен. */
.tr-body{flex:1; min-height:0; overflow-y:auto; padding-right:6px;}
/* Заголовки грида липнут к верху при прокрутке — иначе на 62 строках
   непонятно, какая колонка есть какая. */
.tr-body .tr-h{position:sticky; top:0; z-index:1; background:rgba(18,12,6,.92);}

/* ── Снос фермы целиком (0.44.0) ──
   Разрушающее действие отделено от обычных кнопок фермы чертой и покрашено
   в опасный — чтобы не жалось по инерции следом за «Внести средства». */
.farm-danger{margin-top:14px; padding-top:12px; border-top:1px solid rgba(178,54,40,.28);}
.farm-btn--danger{width:100%; background:rgba(160,29,29,.16); border-color:rgba(178,54,40,.5); color:#e6b3ab;}
.farm-btn--danger:hover{background:rgba(178,54,40,.3); color:#ffe4de; border-color:#c02525;}

/* Список потерь в попапе сноса: перечисляем поимённо, а не общими словами. */
.bldb-dlist{margin:0 0 16px; padding-left:20px; font-family:var(--f-body); font-size:.9rem;
  color:var(--ink-soft); line-height:1.6;}
.bldb-dlist li{margin-bottom:5px;}
.bldb-dlist b{color:var(--ember);}

/* Поле подтверждения словом: кнопка сноса оживает только на точном вводе. */
.bldb-dinput{width:100%; box-sizing:border-box; font-family:var(--f-data); font-size:.92rem;
  letter-spacing:.08em; text-align:center; color:var(--ink); background:rgba(18,12,6,.5);
  border:1px solid rgba(178,54,40,.45); border-radius:var(--r-sm); padding:10px 12px;
  margin:0 0 16px; outline:none;}
.bldb-dinput:focus{border-color:#c02525;}
.bldb-danger:disabled{opacity:.4; cursor:not-allowed; filter:saturate(.5);}


/* ── Панель игрока: плотная посадка (0.51.1) ──────────────────────────────
   Содержимое (имя, 2 полосы, 5 характеристик, 4 производных, эффекты,
   кошелёк, 2–3 кнопки) не помещалось в 720p и панель уходила в скролл.
   Жмём отступы и служебные пустоты — размеры шрифтов уже подтянуты выше. */
#playerPanel{padding:12px 14px; overflow:hidden;}
#playerPanel .panel-eyebrow{margin-top:4px !important;}   /* было 8px инлайном */
#playerPanel .msg:empty{display:none; margin:0;}          /* пустая строка сообщения не держит место */
/* Блок .buff-grid убран в 1.0.0-rc16: эффекты переехали на портрет. */
/* Группа действий прижата к низу панели (margin-top:auto из базового правила);
   здесь лишь минимальный зазор сверху, чтобы при высоком содержимом кнопки
   не слипались с кошельком. Раньше тут стоял фиксированный margin-top:10px —
   он перебивал auto, и кнопки липли к валютам, а не к нижней границе. */
#playerPanel .cell-acts{margin-top:auto; padding-top:10px;}


/* ══ Разведка и вкладки Журнала (0.56.0) ═══════════════════════════════════
   Журнал получил вторую вкладку. Донесение — снимок на один тик, поэтому
   верстается как «карточка допроса»: шапка с именем и жизненными
   показателями, затем сворачиваемые секции. */
.jr-tabs{display:flex; gap:8px; margin:0 0 12px;}
.jr-tab{font-family:var(--f-data); font-size:.86rem; letter-spacing:.04em; color:var(--ink-soft);
  background:rgba(255,255,255,.04); border:1px solid var(--edge-glass); border-radius:var(--r-sm);
  padding:6px 14px; cursor:pointer;}
.jr-tab:hover{background:rgba(255,255,255,.08);}
.jr-tab.is-on{color:var(--gold); background:rgba(226,183,94,.14); border-color:var(--gold);}

/* Журнал во всю высоту: тело занимает остаток модуля, список сообщений
   растягивается на весь блок и скроллится внутри себя (а не обрывается на
   220px, оставляя пустоту под собой). */
#mod-journal{display:flex; flex-direction:column; overflow:hidden;}
#mod-journal .jr-body{flex:1; min-height:0; display:flex; flex-direction:column;}
#mod-journal .log{flex:1; min-height:0; max-height:none; overflow-y:auto;}

.scout-head{border:1px solid var(--edge-glass); border-radius:var(--r-sm);
  background:var(--gold-sheen), rgba(18,12,6,.42); padding:12px 14px; margin-bottom:10px;}
.scout-who{font-family:var(--f-display); font-size:1.32rem; color:var(--gold); line-height:1.2;}
.scout-sub{font-family:var(--f-data); font-size:.88rem; color:var(--ink-soft); margin-top:2px;}
.scout-vitals{display:flex; flex-wrap:wrap; gap:8px; margin-top:10px;}
.scout-chip{font-family:var(--f-data); font-size:.84rem; color:var(--ink);
  background:rgba(255,255,255,.05); border:1px solid var(--edge-glass);
  border-radius:999px; padding:3px 11px;}
.scout-chip--gold{color:var(--gold); border-color:var(--gold);}
.scout-statuses{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:10px;}

.scout-toggles{display:flex; flex-wrap:wrap; gap:6px; margin-bottom:12px;}
.scout-tgl{font-family:var(--f-data); font-size:.8rem; color:var(--ink-soft);
  background:rgba(255,255,255,.04); border:1px solid var(--edge-glass);
  border-radius:999px; padding:4px 12px; cursor:pointer;}
.scout-tgl:hover{background:rgba(255,255,255,.08);}
.scout-tgl.is-on{color:var(--gold); background:rgba(226,183,94,.12); border-color:var(--gold);}

.scout-body{display:flex; flex-direction:column; gap:12px;}
.scout-sec{border:1px solid var(--edge-glass); border-radius:var(--r-sm);
  background:rgba(18,12,6,.35); padding:10px 14px;}
.scout-sec-title{font-family:var(--f-display); font-size:1rem; color:var(--gold); margin-bottom:6px;}
.scout-list{list-style:none; margin:0; padding:0; font-family:var(--f-data); font-size:.88rem;}
.scout-list li{display:flex; justify-content:space-between; gap:12px; padding:3px 0;
  border-bottom:1px dashed rgba(226,183,94,.14);}
.scout-list li:last-child{border-bottom:0;}
.scout-k{color:var(--ink-soft);}
.scout-v{color:var(--ink); font-variant-numeric:tabular-nums;}
.scout-doing{margin:0; font-family:var(--f-data); font-size:.9rem; color:var(--ink);}
.scout-note{margin:12px 0 0; font-family:var(--f-data); font-size:.78rem; color:var(--ink-soft); opacity:.8;}

/* Провал: цель заметила. Кровь, а не золото — это плохая новость. */
.scout-fail{border:1px solid rgba(178,54,40,.55); border-radius:var(--r-sm);
  background:rgba(70,16,12,.28); padding:14px 16px;}
.scout-fail-title{font-family:var(--f-display); font-size:1.2rem; color:#e0685a; margin-bottom:6px;}
.scout-fail p{margin:0; font-family:var(--f-data); font-size:.9rem; color:var(--ink); line-height:1.5;}

/* ============================================================
   ОБЪЯВЛЕНИЯ ВЕДУЩЕГО И ОБСЛУЖИВАНИЕ (0.59.0, Блок 20.3)

   Плашка — единственный элемент интерфейса, который говорит ГОЛОСОМ ВЕДУЩЕГО,
   а не голосом мира. Поэтому она намеренно выбивается из фэнтезийного строя:
   ровная полоса поверх всего, без текстур и завитков. Игрок должен понять за
   долю секунды, что это не часть игры, а сообщение от людей, её делающих.
   ============================================================ */

#announcements {
  position: sticky;
  top: 0;
  z-index: 500;
}

.announce {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 16px;
  font-family: 'PT Sans', system-ui, sans-serif;
  font-size: 14px;
  letter-spacing: 0.01em;
  color: #14100a;
  background: #c9a227;              /* золото, но ПЛОСКОЕ — не «игровое» */
  border-bottom: 1px solid #7a6115;
}
.announce-warn   { background: #d98324; }
.announce-danger { background: #b4372f; color: #f4ece0; border-bottom-color: #5d1c17; }

.announce-close {
  margin-left: auto;
  background: none;
  border: 0;
  color: inherit;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  opacity: 0.7;
  padding: 0 4px;
}
.announce-close:hover { opacity: 1; }
.announce-close:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

/* 0.97.1: кнопка «Обновить» на плашке смены версии (update-banner.js).
   Тон плашки, но выделена рамкой: это ЕДИНСТВЕННОЕ действие на ней —
   крестика нет нарочно, устаревшую страницу не «закрыть». */
.announce-reload {
  margin-left: auto;
  background: rgba(20, 16, 10, 0.14);
  border: 1px solid rgba(20, 16, 10, 0.45);
  border-radius: 3px;
  color: inherit;
  font: inherit;
  padding: 3px 12px;
  cursor: pointer;
}
.announce-reload:hover { background: rgba(20, 16, 10, 0.24); }
.announce-reload:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

/* 0.93.1: строка «Ещё N объявлений» — свёрнутый хвост за потолком видимых.
   Нарочно тише самих плашек: тёмная, в цвет рамы, не спорит с золотом. */
.announce-more {
  width: 100%;
  justify-content: center;
  background: #241c10;
  color: #c9b98a;
  border: 0;
  border-bottom: 1px solid #45381e;
  cursor: pointer;
  font-size: 13px;
}
.announce-more:hover { color: #e8dcb8; }

/* Экран обслуживания: мир остановлен. Ничего, кроме сообщения. */
#maintenance-screen {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(8, 6, 4, 0.97);
}
.mnt-box {
  max-width: 520px;
  padding: 32px 36px;
  text-align: center;
  border: 1px solid #4a3a17;
  background: #12100c;
}
.mnt-title {
  font-family: 'Alegreya SC', serif;
  font-size: 26px;
  letter-spacing: 0.06em;
  color: #c9a227;
  margin-bottom: 14px;
}
.mnt-msg { color: #ddd3c4; font-size: 16px; line-height: 1.5; }
.mnt-hint { color: #7d7364; font-size: 13px; margin-top: 18px; }

/* ── Модерация чата (0.60.0, Блок 20.4) ────────────────────────
   Удалённое сообщение остаётся в ленте — но гаснет. Разговор без дыр читается
   честнее, а участники видят, что вмешательство было.
   Кнопка жалобы намеренно неприметна: она зовёт живого человека разбираться,
   и жать её случайно быть не должно. */
.chat-line--deleted { color: #6b6154; font-style: italic; }
.chat-line--deleted .chat-nick { color: #6b6154; }

.chat-report {
  margin-left: 6px;
  padding: 0 5px;
  background: none;
  border: 1px solid transparent;
  color: #6b6154;
  font-size: 11px;
  line-height: 1.4;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.12s;
}
.chat-line:hover .chat-report { opacity: 1; }
.chat-report:hover { color: #b4372f; border-color: #4a2320; }
.chat-report:focus-visible { opacity: 1; outline: 2px solid #c9a227; }


/* ── Вкладка «Бордель» (0.88.0) ── */
.brothel-face{display:flex; flex-direction:column; gap:8px; padding:6px 2px; height:100%;}
/* Арт тянется на всю свободную высоту блока (0.88.1, решение автора). */
.brothel-art{position:relative; flex:1 1 auto; min-height:300px; border:1px solid var(--edge-glass); border-radius:8px;
  background:#0c0a08 url('img/npcs/bordel.jpg') center/cover no-repeat;}
.brothel-note{font-size:.82rem; color:var(--ink-soft); margin:0; line-height:1.45;}
.brothel-note b{color:var(--gold);}
.brothel-btn{align-self:flex-start;}
.brothel-btn:disabled{opacity:.45; cursor:default;}
.mkt-pane[data-pane="brothel"]{height:100%; display:flex; flex-direction:column;}

/* ── Отряд в панели клетки (0.89.0) ───────────────────────── */
.group-sec{margin:10px 0 4px;}
.group-row{display:flex; align-items:center; gap:8px; padding:5px 8px;
  border:1px solid rgba(131,192,126,.22); border-radius:8px; margin-bottom:5px;
  background:rgba(46,92,51,.10);}
.group-row--off{opacity:.6;}
.group-dot{flex:none; width:9px; height:9px; border-radius:50%; background:#4a5164;}
.group-dot.is-on{background:#57d06a; box-shadow:0 0 6px rgba(87,208,106,.55);}
.group-name{flex:1; font-family:var(--f-data); color:var(--ink-soft); font-size:.92rem;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.group-lvl{color:var(--muted); font-size:.8rem; font-family:var(--f-data);}
.group-leave{margin-top:2px;}

/* ═══════════════════════════════════════════════════════════
   ЗАТОЧКА КРИСТАЛЛОМ (0.95.0)

   ЦВЕТА РЕДКОСТИ — ОДНО МЕСТО НА ВСЮ ИГРУ. Их читают рюкзак,
   снаряжение, лот рынка, досье разведки и экран заточки. Разъедутся
   значения — один и тот же меч окажется разного цвета в двух окнах, и
   игрок решит, что это разные вещи. Значения совпадают с rarities.color
   в данных: правка цвета — правка в ДВУХ местах, и это осознанно
   (данные красят серверные ответы, CSS — витрины).
   ═══════════════════════════════════════════════════════════ */
:root{
  --r-common:#9E9E9E;
  --r-uncommon:#4CAF50;
  --r-rare:#2196F3;
  --r-legendary:#FF9800;
  --r-epic:#9C27B0;
}
.r-common{color:var(--r-common);}
.r-uncommon{color:var(--r-uncommon);}
.r-rare{color:var(--r-rare);}
.r-legendary{color:var(--r-legendary);}
.r-epic{color:var(--r-epic);}

/* Прибавки заточки строкой под именем — в рюкзаке, слоте и лоте. */
.inv-ench,.mkt-ench,.sm-ench{
  display:block; margin-top:3px; font-size:.74rem; color:var(--muted); line-height:1.35;
}
.inv-ench b,.mkt-ench b,.sm-ench b{color:var(--gold); font-weight:600;}
.mkt-badge.r-uncommon{color:var(--r-uncommon); border-color:currentColor;}
.mkt-badge.r-rare{color:var(--r-rare); border-color:currentColor;}
.mkt-badge.r-legendary{color:var(--r-legendary); border-color:currentColor;}
.mkt-badge.r-epic{color:var(--r-epic); border-color:currentColor;}
/* Второе нажатие на покупке уникальной вещи. */
.mkt-do.is-armed{background:linear-gradient(158deg,#e08a5a,#c05a3e); color:#2a1e0c; border-color:#8a4a2f;}

/* ── экран заточки ── */
.ench-wrap{display:flex; gap:20px; align-items:flex-start; flex-wrap:wrap; padding:4px 2px 10px;}
.ench-shelf{flex:1 1 340px; min-width:300px;}
.ench-head{
  display:flex; align-items:center; gap:10px; padding:0 4px 9px;
  font-size:.8rem; color:var(--muted);
}
.ench-crystals{margin-left:auto; color:var(--gold);}
.ench-crystals b{font-weight:600;}

.ench-rows{display:flex; flex-direction:column; gap:6px;}
.ench-row{
  display:flex; align-items:center; gap:10px; padding:8px 11px; cursor:pointer;
  border:1px solid var(--rim); border-radius:9px; background:var(--panel-glass);
  transition:border-color .12s, transform .12s;
}
.ench-row:hover{border-color:var(--edge-glass); transform:translateX(2px);}
.ench-row.is-picked{border-color:var(--gold); box-shadow:0 0 12px rgba(226,183,94,.2);}
.ench-row.is-capped{opacity:.6; cursor:default;}
.ench-row.is-capped:hover{transform:none; border-color:var(--rim);}
.ench-row-body{flex:1; min-width:0;}
.ench-row-name{display:block; font-size:.86rem; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.ench-row-stats{display:block; margin-top:2px; font-size:.74rem; color:var(--muted);}
.ench-row-stats b{color:var(--gold); font-weight:600;}
.ench-cap{color:var(--gold);}
.ench-pill{flex:none; font-size:.68rem; padding:2px 8px; border-radius:20px; border:1px solid currentColor;}
.ench-note{margin-top:10px; font-size:.75rem; color:var(--muted); line-height:1.5;}

.ench-anvil{
  flex:1 1 340px; min-width:300px; padding:16px 17px 15px;
  border:1px solid var(--rim); border-radius:12px; background:var(--panel-glass-2);
  box-shadow:var(--shadow);
}
.ench-anvil-title{font-size:1.02rem; color:var(--gold); letter-spacing:.03em;}
.ench-anvil-item{margin:3px 0 13px; font-size:.92rem; font-weight:600;}

.ench-bar{display:flex; height:8px; border-radius:4px; overflow:hidden; background:rgba(10,7,4,.85); margin-bottom:12px;}
.ench-bar i.is-win{background:linear-gradient(90deg,#4a6b31,#79a24a);}
.ench-bar i.is-lose{background:linear-gradient(90deg,#7d2f24,#c05a3e);}

.ench-scales{display:flex; gap:10px; margin-bottom:13px;}
.ench-scale{flex:1; padding:9px 10px; border-radius:9px; border:1px solid var(--rim); background:rgba(14,10,6,.45);}
.ench-scale-cap{font-size:.68rem; color:var(--muted); text-transform:uppercase; letter-spacing:.03em;}
.ench-scale-val{font-size:1.28rem; margin-top:2px;}
.ench-scale.is-win .ench-scale-val{color:#79a24a;}
.ench-scale.is-lose .ench-scale-val{color:var(--ember);}
.ench-scale-hint{margin-top:4px; font-size:.7rem; color:var(--muted); line-height:1.4;}

.ench-go{
  display:block; width:100%; padding:10px; border-radius:9px; cursor:pointer;
  font-size:.95rem; letter-spacing:.03em; color:#2a1e0c; border:1px solid #8a6a2f;
  background:linear-gradient(158deg,#f6d885 4%,#dcac52 52%,#bd8a2c 96%);
  box-shadow:inset 0 1px 0 rgba(255,246,220,.5), 0 2px 8px rgba(0,0,0,.4);
}
.ench-go:hover:not(:disabled){filter:brightness(1.07);}
.ench-go:disabled{background:#3a3226; color:#7a6f5c; border-color:#4a4234; box-shadow:none; cursor:default;}

.ench-result{
  margin-top:13px; padding:12px 13px; border-radius:9px; min-height:56px;
  border:1px solid var(--rim); background:rgba(14,10,6,.4);
  font-size:.8rem; line-height:1.5; color:var(--ink-soft);
}
.ench-result.is-win{border-color:rgba(121,162,74,.5);}
.ench-result.is-lose{border-color:rgba(192,90,62,.5);}
.ench-res-head{font-size:.95rem; margin-bottom:4px;}
.ench-result.is-win .ench-res-head{color:#8fbb59;}
.ench-result.is-lose .ench-res-head{color:var(--ember);}
.ench-res-item{font-weight:600; margin-bottom:8px;}
.ench-dim{color:var(--muted);}

/* БЫЛО → СТАЛО. Одно число «сумма прибавок» игроку ничего не говорит,
   а перекат по каждому стату — говорит: видно, что именно ушло. */
.ench-diff{width:100%; border-collapse:collapse; font-size:.78rem;}
.ench-diff th{font-weight:400; font-size:.68rem; color:var(--muted); text-align:right; padding:0 6px 3px; text-transform:lowercase;}
.ench-diff th:first-child{text-align:left;}
.ench-diff td{padding:2px 6px; border-top:1px solid rgba(90,72,52,.35);}
.ench-d-name{color:var(--ink-soft);}
.ench-d-was{text-align:right; color:var(--muted); white-space:nowrap;}
.ench-d-arr{color:var(--muted); text-align:center; width:18px;}
.ench-d-now{text-align:right; white-space:nowrap; color:var(--ink-soft);}
.ench-d-now.is-up{color:#8fbb59;}
.ench-d-now.is-down{color:var(--ember);}
.ench-d-now.is-gone{color:#7a6f5c;}

/* Прибавки заточки в очном обмене (0.95.2) — обе стороны видят, что меняют. */
.exch-ench{
  display:block; margin-top:2px; font-size:.72rem; color:var(--muted); line-height:1.35;
}
.exch-ench b{color:var(--gold); font-weight:600;}


/* ═══════════ КНИГА РЕЦЕПТОВ (крафт, 1.0.0-rc15) ═══════════
   Заменила выпадающий список: поиск по изделию, список слева, состав
   справа. Покраска состава в ТРИ состояния — хватает / есть, но мало /
   нет вовсе — единственное, ради чего всё и затевалось: прежний экран
   отвечал «можно или нельзя» и молчал о том, чего не хватает. */
.rb{margin-top:2px;}
.rb-search{position:relative; margin-bottom:10px;}
.rb-search input{width:100%; padding:9px 12px 9px 34px; border-radius:8px;
  background:var(--bar-glass); border:1px solid var(--edge-soft);
  color:var(--ink); font-family:var(--f-data); font-size:.9rem;}
.rb-search input:focus{outline:none; border-color:var(--edge-glass);}
.rb-search svg{position:absolute; left:11px; top:50%; transform:translateY(-50%); opacity:.5;}
.rb-count{font-family:var(--f-data); font-size:.78rem; color:var(--muted); margin:0 0 8px;}

.rb-body{display:grid; grid-template-columns:1fr 1fr; gap:12px; align-items:start;}
.rb-list{max-height:360px; overflow:auto; padding-right:4px;
  border:1px solid var(--edge-soft); border-radius:10px; background:rgba(20,15,8,.28);}
.rb-item{display:flex; align-items:center; gap:8px; width:100%; text-align:left;
  padding:8px 10px; background:none; border:0; border-bottom:1px solid rgba(255,255,255,.04);
  color:var(--ink-soft); font-family:var(--f-body); font-size:.92rem; cursor:pointer;}
.rb-item:last-child{border-bottom:0;}
.rb-item:hover{background:rgba(226,183,94,.07);}
.rb-item.is-picked{background:rgba(226,183,94,.14); color:var(--ink);}
.rb-item.is-blocked{color:var(--muted);}
.rb-dot{width:7px; height:7px; border-radius:50%; flex:0 0 auto; background:var(--muted);}
.rb-dot.is-ok{background:var(--ok); box-shadow:0 0 6px rgba(157,187,122,.5);}
.rb-dot.is-short{background:var(--gold);}
.rb-dot.is-block{background:#8a5a4a;}
.rb-nm{flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.rb-xn{font-family:var(--f-data); font-size:.76rem; color:var(--muted); flex:0 0 auto;}

.rb-card{border:1px solid var(--edge-soft); border-radius:10px; padding:12px 14px;
  background:var(--panel-glass); background-image:var(--gold-sheen);}
.rb-out{font-family:var(--f-display); font-size:1.05rem; color:var(--ink); margin:0 0 2px;}
.rb-out b{color:var(--gold);}
.rb-req{font-family:var(--f-data); font-size:.8rem; color:var(--muted); margin:0 0 10px;}
.rb-req .is-miss{color:var(--err);}
.rb-h{font-family:var(--f-data); font-size:.72rem; letter-spacing:.09em; text-transform:uppercase;
  color:var(--muted); margin:12px 0 6px;}
.rb-ing{display:flex; justify-content:space-between; align-items:baseline; gap:10px;
  font-family:var(--f-data); font-size:.86rem; padding:5px 0;
  border-bottom:1px solid rgba(255,255,255,.03);}
.rb-ing-n{color:var(--ink-soft);}
.rb-ing-q{white-space:nowrap;}
.rb-ing.is-enough .rb-ing-n{color:#b6d193;}
.rb-ing.is-enough .rb-ing-q{color:var(--ok);}
.rb-ing.is-some .rb-ing-q{color:var(--gold);}
.rb-ing.is-none .rb-ing-q{color:var(--err);}
/* Прочие варианты группового ингредиента. Кликабельны: раньше на их месте
   стоял <select>, и выбор материала терять нельзя. */
.rb-alt{font-family:var(--f-data); font-size:.78rem; color:var(--muted);
  padding:2px 0 4px 14px; border-left:2px solid rgba(226,183,94,.2); margin:0 0 4px 4px;}
.rb-alt-pick{background:none; border:0; padding:0; cursor:pointer;
  font:inherit; color:var(--ink-soft); text-decoration:underline dotted; text-underline-offset:3px;}
.rb-alt-pick:hover{color:var(--gold);}
.rb-why{font-family:var(--f-data); font-size:.8rem; color:var(--err); margin:10px 0 0;}
.rb-go{margin-top:12px;}
.rb-empty{padding:26px 12px; text-align:center; color:var(--muted);
  font-family:var(--f-data); font-size:.86rem; line-height:1.6;}


/* ══ ЛЕВАЯ ПАНЕЛЬ: ПОРТРЕТ · РУНЫ · ТРИ ЭТАЖА (1.0.0-rc16) ═════════════
   Раньше панель была одним потоком в скроллящейся коробке: на низком окне
   уезжало всё разом, вместе с лицом героя и кнопкой «Отдыхать». Стало три
   этажа — портрет сверху и кнопки снизу прибиты, едет только середина.
   Замерено при 768: середина переливается на 71px, и это должна быть
   именно она, а не панель целиком.

   Высота портрета привязана к окну: 26vh с потолком 286 и полом 190 —
   281px на 1080, 247 на 950, 200 на 768. Иначе на ноутбуке портрет
   съедал бы всю панель.                                                */
:root{ --pa-art-h:clamp(190px, 26vh, 286px); --fx-size:28px; }

#playerPanel{display:flex; flex-direction:column; gap:0;}
/* Портрет вылезает под кромку панели отрицательными полями — он должен
   идти встык с рамкой, а не висеть картинкой с отступом. */
.pa-portrait{position:relative; flex:none; margin:-12px -14px 10px;
  border-radius:var(--r) var(--r) 0 0; overflow:hidden;}
.pa-art{width:100%; height:var(--pa-art-h);
  background-size:cover; background-position:center 30%; background-repeat:no-repeat;}
.pa-portrait::after{content:''; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:linear-gradient(90deg,transparent,var(--edge),transparent);}

/* Имя поверх арта на градиенте: строка «Воин · уровень 1» из панели ушла,
   класс теперь подписан здесь, уровень — значком. */
.pa-plate{position:absolute; inset:auto 0 0 0; padding:44px 14px 10px;
  background:linear-gradient(180deg,rgba(27,20,13,0) 0%,rgba(27,20,13,.72) 55%,rgba(27,20,13,.94) 100%);}
.pa-name{font-family:var(--f-display); color:var(--ink); font-size:1.5rem;
  letter-spacing:.03em; line-height:1.1; text-shadow:0 2px 10px rgba(0,0,0,.8);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.pa-class{font-family:var(--f-data); color:var(--ink-soft); font-size:.78rem; opacity:.85;}
.pa-lvl{position:absolute; top:12px; right:12px; z-index:4;
  font-family:var(--f-data); font-size:.72rem; font-weight:700; color:#2a1f10;
  background:linear-gradient(180deg,var(--gold),var(--gold-deep));
  border-radius:999px; padding:3px 10px; box-shadow:0 3px 10px rgba(0,0,0,.5);}

/* СОН (вариант «а», решение автора): портрет остаётся, но приглушён вуалью
   со значком — герой виден, состояние читается сразу. Ячейки эффектов во
   сне не показываем: применить их всё равно нечем, а с вуалью они спорят. */
.pa-portrait.is-asleep .pa-art{filter:grayscale(.55) brightness(.5);}
.pa-sleep-veil{position:absolute; inset:0; display:grid; place-items:center;
  background:radial-gradient(70% 60% at 50% 45%, rgba(20,26,44,.35), rgba(10,8,5,.62));}
.pa-sleep-mark{font-size:2.4rem; color:rgba(226,214,190,.8);
  text-shadow:0 0 18px rgba(120,150,220,.55);}

/* Столбец эффектов поверх портрета. Идёт СВЕРХУ ВНИЗ одной вертикалью и
   переносится во второй столбец, только когда упёрся; число рядов считает
   player-panel.js от реальной высоты арта с защитной зоной под имя. */
.pa-fx{position:absolute; top:12px; left:12px; z-index:3;
  display:grid; gap:5px; align-content:start;
  grid-auto-flow:column; grid-template-rows:repeat(var(--fx-rows,6), var(--fx-size));}

/* Середина — единственный скроллящийся этаж. Полоса прокрутки узкая и
   тёплая, чтобы не выглядеть системной деталью поверх пергамента. */
.pa-scroll{flex:1; min-height:0; overflow-y:auto; overflow-x:hidden;
  margin:0 -4px; padding:0 4px;}
.pa-scroll::-webkit-scrollbar{width:6px;}
.pa-scroll::-webkit-scrollbar-track{background:transparent;}
.pa-scroll::-webkit-scrollbar-thumb{background:var(--edge-soft); border-radius:3px;}
.pa-scroll{scrollbar-width:thin; scrollbar-color:var(--edge-soft) transparent;}

/* HP остался единственной полосой в панели, поэтому он толще прежнего и
   слегка светится: вес достаётся тому, на что смотрят каждую секунду. */
#playerPanel .sbar{height:11px;}
#playerPanel .sbar--exp{height:7px;}

/* ── Руны вместо полосок у характеристик ── */
.runes{display:flex; flex-direction:column; gap:5px; margin-top:4px;}
.rune{display:flex; align-items:center; gap:10px;}
.rune-nm{flex:1; min-width:0; font-family:var(--f-data); font-size:.84rem;
  color:var(--ink-soft); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.rune-vl{width:34px; height:30px; flex:none; display:grid; place-items:center;
  font-family:var(--f-data); font-size:1rem; font-weight:700; color:var(--ink);
  background:linear-gradient(180deg,rgba(74,60,44,.9),rgba(38,30,22,.95));
  border:1px solid var(--edge); border-radius:var(--r-sm);
  box-shadow:inset 0 1px 0 rgba(216,173,85,.12), 0 2px 6px rgba(0,0,0,.35);}
/* База не влезает в рамку 34px — она в подсказке, а рамка подсвечивается:
   игрок видит, что число не «своё», и может уточнить наведением. */
.rune-vl.is-buffed{color:var(--gold); border-color:rgba(226,183,94,.55);}
.rune-plus{width:20px; height:20px; flex:none; border-radius:50%; cursor:pointer;
  border:none; background:linear-gradient(180deg,var(--gold),var(--gold-deep));
  color:#2a1f10; font-family:var(--f-data); font-weight:700; font-size:.76rem;
  line-height:1; display:grid; place-items:center;}
.rune-plus:hover{filter:brightness(1.1);}
.rune-plus:active{transform:translateY(1px);}
/* Когда вкладывать нечего, «+» нет — но место под него держим, иначе ряд
   рун дёргается вбок в момент получения уровня. */
.rune-plus-gap{width:20px; height:20px; flex:none;}

/* ── Сворачиваемые «Дополнительные» ── */
.fold{margin-top:12px;}
.fold-head{display:flex; align-items:center; gap:8px; width:100%; padding:0;
  background:none; border:none; cursor:pointer; text-align:left;
  font-family:var(--f-display); font-size:.66rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted);}
.fold-head:hover{color:var(--ink-soft);}
.fold-head span{flex:none;}
.fold-head::after{content:''; flex:1; height:1px; background:var(--edge-soft);}
.fold-caret{flex:none; width:0; height:0; border:4px solid transparent;
  border-top-color:var(--gold); margin-top:3px; transition:transform .14s ease;}
.fold.is-folded .fold-caret{transform:rotate(-90deg); margin-top:0;}
.fold-body{margin-top:6px;}
.fold.is-folded .fold-body{display:none;}
.ex{display:flex; justify-content:space-between; gap:8px;
  font-family:var(--f-data); font-size:.78rem; padding:2px 0;}
.ex-n{color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.ex-v{color:var(--ink-soft); flex:none;}

/* Кнопки действий — третий этаж, прибит снизу. Их всегда две или три:
   «Исцелить себя» есть только у Жреца, «Построить ферму» — только у
   Земледельца, других классовых кнопок в игре нет. */
#playerPanel .cell-acts{flex:none; margin-top:0; padding-top:10px;}


/* ══ ЛЕНТА ЗДОРОВЬЯ В ПЛАШКЕ ИМЕНИ (1.0.0-rc18) ═══════════════════════
   HP было первой строкой середины панели — строкой таблицы среди других
   строк. Стало лентой прямо под именем героя, на портрете. Довод виден
   на низком здоровье: «9 / 60» в списке надо прочитать, а тлеющая
   красная полоса под лицом замечается боковым зрением.
   Плашка получила больший нижний отступ — иначе лента поджимала имя
   (ровно то, чем этот вариант и был рискован).                        */
.pa-plate{padding-bottom:13px;}
.pa-hp{position:relative; height:9px; margin-top:7px; border-radius:3px; overflow:hidden;
  background:linear-gradient(180deg,rgba(0,0,0,.55),rgba(0,0,0,.42));
  box-shadow:inset 0 1px 2px rgba(0,0,0,.6);}
.pa-hp i{display:block; height:100%;
  background:linear-gradient(180deg,#d4694a,#a03d28);
  box-shadow:0 0 10px rgba(212,105,74,.55); transition:width .35s ease;}
.pa-hp b{position:absolute; right:6px; top:50%; transform:translateY(-50%);
  font-family:var(--f-data); font-size:.66rem; font-weight:700; color:var(--ink);
  text-shadow:0 1px 4px rgba(0,0,0,.9); letter-spacing:.02em;}
/* Низкое здоровье (порог в player-panel.js, HP_LOW_PCT) — второе состояние,
   ради которого перенос и делался. */
.pa-hp.is-low i{background:linear-gradient(180deg,#e2503a,#8d2318);
  animation:pa-hp-breathe 1.6s ease-in-out infinite;}
@keyframes pa-hp-breathe{0%,100%{filter:brightness(1);} 50%{filter:brightness(1.35);}}
@media (prefers-reduced-motion:reduce){ .pa-hp.is-low i{animation:none;} }

/* ══ ОКНА: ПЕРГАМЕНТ (1.0.0-rc18, решение автора) ═════════════════════
   Тёплое свечение внутрь, глубокая внутренняя тень, почти прямые углы и
   вторая тонкая рамка по периметру. Красится ОБЩИЙ .modal — то есть все
   обычные диалоги разом (подтверждения, настройки, дуэль, снос фермы) и
   будущие тоже. Сцена волшебника НАМЕРЕННО не трогается (решение автора):
   там арт во весь блок, и рамка с внутренней тенью с ним спорит.       */
.modal{
  border:1px solid #6b563c; border-radius:3px;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(216,173,85,.10), rgba(216,173,85,0) 55%),
    linear-gradient(180deg,rgba(63,51,38,.98),rgba(43,34,25,.99));
  box-shadow:var(--shadow), inset 0 0 26px rgba(0,0,0,.55), inset 0 1px 0 rgba(216,173,85,.14);
}
/* Вторая рамка — отдельным слоем поверх, чтобы не спорить с прокруткой
   содержимого у высоких окон (настройки, снос фермы со списком потерь). */
.modal{position:relative;}
.modal::before{content:''; position:absolute; inset:6px; pointer-events:none;
  border:1px solid rgba(122,98,68,.35); border-radius:2px;}