/* ═══════════════════════════════════════════════════
   ECHOSWEEPER — Prototype v0.4  (dark ocean)
═══════════════════════════════════════════════════ */
:root {
  --bg:       #060b18;
  --surface:  #0d1b2a;
  --panel:    #091421;
  --border:   #1a3a5c;
  --teal:     #4ecdc4;
  --green:    #2ecc71;
  --yellow:   #f39c12;
  --red:      #e74c3c;
  --gold:     #f0d060;
  --purple:   #9b59b6;
  --text:     #c8e8f6;
  --dim:      #7aa4c2;
  /* Android demo: tunable sizes via vars. JS may override --cell-size at runtime. */
  --cell-size: 46px;
  --btn-min-h: 32px;
  /* Edge-to-edge (Android immersive): отступы под системные панели. На десктопе/в
     обычном браузере env() = 0 → не влияет. На Android status bar виден (контент под
     ним → компенсируем сверху), nav bar скрыта (снизу остаётся лишь жестовый inset). */
  --safe-top:    env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left:   env(safe-area-inset-left, 0px);
  --safe-right:  env(safe-area-inset-right, 0px);
}
* { box-sizing: border-box; margin: 0; padding: 0; caret-color: transparent; }
.hidden { display: none !important; }
/* Tach-устройства: убираем 300ms задержку перед click для всех интерактивных элементов. */
button, .cell, .card-slot, .org-tab, .shop-org-tab, .sp-tab, .archive-tab,
.main-menu-btn, .ach-item, .inv-slot, .btn-shop, #btn-archive, #btn-help,
#btn-sidepanel, #sp-close, .btn-equip-buy, .btn-overlay-action {
  touch-action: manipulation;
}
/* Grid целиком — без жестов, чтобы pinch-zoom не мешал. */
#grid, #grid-wrap { touch-action: manipulation; }
/* Горизонтальный свайп — наш жест (СКАНЕР), а не «назад/вперёд» браузера. */
html, body { overscroll-behavior-x: none; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Courier New', monospace;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  padding: 14px 16px;
  user-select: none;
}
input, textarea { user-select: text; caret-color: auto; }
#app { width: 1060px; max-width: 100%; }

/* ─── ПОЛОСЫ ПРОКРУТКИ ───────────────────────────────────────────
   Chrome и Windows по умолчанию рисуют светло-серую полосу: на почти чёрном
   фоне это яркая лента вдоль журнала, СКАНЕРа и всей страницы, которая спорит
   с содержимым и первой ловит взгляд. Красим в цвета панелей — чуть светлее
   фона, так что прокрутка читается, но перестаёт быть контрастной полосой.
   Правило глобальное (без селектора), поэтому накрывает и журнал, и Атлас,
   и магазин — везде, где что-то прокручивается.
   scrollbar-color/scrollbar-width — для Firefox, ::-webkit-* — для Chrome и
   Safari; обе записи нужны, одна другую не заменяет. */
html { scrollbar-color: #16273a transparent; scrollbar-width: thin; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
/* Кнопки-стрелки на концах: к кастомной полосе Chrome дорисовывает их сам, и
   они остаются светлыми — теми самыми контрастными точками, ради которых всё
   и затевалось. Убираем совсем. */
::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
::-webkit-scrollbar-thumb {
  background: #16273a;
  border: 2px solid transparent;
  background-clip: content-box;   /* прозрачная рамка вокруг ползунка — воздух, а не толстая полоса */
  border-radius: 5px;
}
::-webkit-scrollbar-thumb:hover { background: #23405f; background-clip: content-box; }
::-webkit-scrollbar-corner { background: transparent; }

/* ─── RESOURCES BAR ─────────────────────────────── */
#res-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px 16px;
  margin-bottom: 10px;
  font-size: 20px;
}
/* На десктопе обёртки .res-bar-row «исчезают»: их дети становятся прямыми flex-детьми #res-bar,
   как было до разделения на два ряда. На мобильном этот display переопределяется в @media. */
.res-bar-row { display: contents; }
.res-item {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: default;
  position: relative;
  white-space: nowrap;
}
.res-item svg { flex-shrink: 0; width: 27px; height: 27px; }
.res-item[data-tip]:hover::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: #0a1520;
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 3px 8px;
  font-size: 15px;
  color: var(--text);
  white-space: nowrap;
  pointer-events: none;
  z-index: 50;
}
.res-divider { width: 1px; height: 26px; background: var(--border); margin: 0 4px; }
.res-divider.flex-grow { flex: 1; width: auto; background: none; }
#turn-label { font-size: 17px; color: var(--dim); letter-spacing: 1px; }
/* Счётчик на время «набегания» суммы: подсвечен, чтобы прирост было видно. */
.counting {
  color: var(--gold) !important;
  text-shadow: 0 0 8px rgba(240,208,96,.85);
  animation: counting-pulse .38s ease-in-out infinite alternate;
}
@keyframes counting-pulse {
  from { transform: scale(1); }
  to   { transform: scale(1.16); }
}

/* ─── GAME AREA ──────────────────────────────────── */
#game-area {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  position: relative;   /* система координат для #power-rig */
}

/* ─── ЭНЕРГОСХЕМА: рамка батареи + кабели к инструментам ──────────
   Показывает, куда сейчас уходит энергия: рамка вокруг батареи горит цветом
   активного инструмента, а два кабеля идут вниз к Локатору (бирюзовый) и
   Эхолучу (золотой).

   Кабели НЕ перекрашиваются — это схема питания, а не индикатор: перекрашивай
   мы их, игрок каждый раз перечитывал бы, куда какой идёт. Активный кабель
   ярче и светится, спящий приглушён — и рамка называет активный цветом.

   Слой прозрачный для мыши: он лежит поверх колонок и не должен перехватывать
   клики по сетке и карточкам.

   z-index 0 (а НЕ 1) — принципиально: карточки слотов позиционированы
   (position:relative) и стоят в разметке ПОЗЖЕ, поэтому рисуются поверх этого
   слоя. Именно так «верстак» уходит под слоты, а наружу торчит только его край.
   С z-index:1 планка легла бы поверх карточек и закрыла их. */
#power-rig {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 0;
  overflow: visible;
}
.rig-frame {
  fill: none;
  stroke-width: 2;
  transition: stroke .25s, filter .25s;
}
.rig-cable {
  fill: none;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: opacity .25s, filter .25s;
}
/* Спящий кабель виден, но не спорит с активным. */
.rig-cable.rig-idle   { opacity: .22; }
.rig-cable.rig-active { opacity: .95; }
/* Наконечники-стрелки удалены вместе с узлами: кабель просто заходит в
   торчащий край верстака и там кончается (см. buildPowerRig). */
/* Искра: бежит по кабелю (animateMotion), удаляется по завершении из JS. */
.rig-spark { pointer-events: none; }

/* ─── BATTERY (left vertical) ───────────────────── */
#battery-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  width: 40px;
  flex-shrink: 0;
}
#bat-label { font-size: 14px; color: var(--dim); letter-spacing: 1px; }
#bat-pips {
  display: flex;
  flex-direction: column-reverse; /* bottom fills first */
  gap: 2px;
}
.bat-pip {
  width: 28px;
  height: 44px;
  border-radius: 3px;
  transition: background 0.15s, box-shadow 0.15s;
}
.bat-pip.empty   { background: #0c1e2e; border: 1px solid #14293d; }
.bat-pip.full    { background: var(--teal); box-shadow: 0 0 5px rgba(78,205,196,0.5); }
.bat-pip.warn    { background: var(--red) !important; box-shadow: 0 0 8px rgba(231,76,60,0.7) !important; }
#bat-val { font-size: 14px; color: var(--dim); }

/* ─── CENTER COLUMN ─────────────────────────────── */
#center-col { flex: 0 0 auto; display: flex; flex-direction: column; gap: 8px; }

/* ─── ЗАГОЛОВОК СЛОЯ ────────────────────────────
   Плашка «Сейчас: ЛОКАТОР» заменена на заголовок: слева «Слой 7 (Слепая
   борозда)», справа «Рекорд: 1240». Активный инструмент и так виден по
   подсветке карточки, а место над сеткой ценнее занять тем, где игрок
   находится и что здесь можно побить.

   ГЛАВНОЕ ТРЕБОВАНИЕ: строка всегда одна, за рамку не выходит.
   Держится на трёх вещах — nowrap запрещает перенос, min-width:0 разрешает
   flex-элементу сжиматься ниже своего текста (без него ellipsis не сработает
   никогда), а ellipsis обрезает название, если места совсем нет. Рекорд
   не сжимается (flex-shrink:0): цифру нельзя показать «наполовину». */
#layer-title, #layer-title-mobile {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 10px;
  border-radius: 5px;
  background: var(--panel);
  border: 1px solid var(--border);
  font-size: 14px;
  letter-spacing: 1px;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
}
#layer-title .lt-name, #layer-title-mobile .lt-name {
  font-weight: bold;
  color: var(--teal);
  text-shadow: 0 0 8px rgba(78,205,196,.35);
  min-width: 0;                /* без этого flex не даст тексту сжаться, и ellipsis не сработает */
  overflow: hidden;
  text-overflow: ellipsis;
}
#layer-title .lt-rec, #layer-title-mobile .lt-rec {
  color: var(--gold);
  font-size: 12px;
  flex: 0 0 auto;              /* цифра рекорда не сжимается и не обрезается */
}
/* Слой босса — золотая рамка: она же цвет опасности в остальном интерфейсе. */
#layer-title.lt-boss, #layer-title-mobile.lt-boss { border-color: var(--gold); }
#layer-title.lt-boss .lt-name, #layer-title-mobile.lt-boss .lt-name {
  color: var(--gold); text-shadow: 0 0 8px rgba(240,208,96,.4);
}
/* Мобильный дубль внутри #tool-section — виден только через @media,
   на десктопе работает верхний. */
#layer-title-mobile { display: none; }

/* ─── GRID ───────────────────────────────────────── */
#grid-wrap { position: relative; border-radius: 4px; }
@keyframes freeze-snow {
  0%   { box-shadow: 0 0 0 3px rgba(160,220,255,.35), 0 0 18px 4px rgba(100,180,255,.15); border-color: rgba(140,210,255,.4); }
  50%  { box-shadow: 0 0 0 4px rgba(200,240,255,.7),  0 0 28px 8px rgba(140,210,255,.3);  border-color: rgba(200,240,255,.85); }
  100% { box-shadow: 0 0 0 3px rgba(160,220,255,.35), 0 0 18px 4px rgba(100,180,255,.15); border-color: rgba(140,210,255,.4); }
}
#grid-wrap.freeze-active {
  border: 2px solid rgba(140,210,255,.5);
  animation: freeze-snow 1.8s ease-in-out infinite;
  border-radius: 4px;
}
@keyframes contrascan-pulse {
  0%   { box-shadow: 0 0 0 3px rgba(240,208,96,.35), 0 0 18px 4px rgba(240,176,32,.18); border-color: rgba(240,208,96,.5); }
  50%  { box-shadow: 0 0 0 4px rgba(255,228,140,.75), 0 0 28px 8px rgba(240,200,80,.35); border-color: rgba(255,228,140,.95); }
  100% { box-shadow: 0 0 0 3px rgba(240,208,96,.35), 0 0 18px 4px rgba(240,176,32,.18); border-color: rgba(240,208,96,.5); }
}
#grid-wrap.contrascan-active {
  border: 2px solid rgba(240,208,96,.7);
  animation: contrascan-pulse .4s ease-in-out infinite;
  border-radius: 4px;
}
#grid {
  display: grid;
  grid-template-columns: repeat(10, var(--cell-size)); /* overridden by JS for boss room */
  grid-template-rows: repeat(10, var(--cell-size));
  gap: 2px;
  background: #020608;
  padding: 4px;
  border: 1px solid var(--border);
  border-radius: 5px;
}

/* ─── CELLS ─────────────────────────────────────── */
.cell {
  width: var(--cell-size); height: var(--cell-size);
  display: flex; align-items: center; justify-content: center;
  /* размер шрифта задаётся инлайн в renderGrid (зависит от cs); здесь только жирность.
     На мобильном жирность повышается до 800 (см. @media) — на десктопе как было. */
  font-size: calc(var(--cell-size) / 2); font-weight: bold;
  border-radius: 3px; cursor: pointer;
  user-select: none;
  transition: background .08s, box-shadow .08s;
  position: relative;
}
.cell-hidden { background: #0d1b2a; border: 1px solid #14283d; }
.tool-equip-pending .cell-hidden { cursor: crosshair; }
/* Cell-hover показываем только на устройствах с реальным курсором — на таче залипает после тапа. */
@media (hover: hover) {
  .tool-locator   .cell-hidden:hover { background: #122234; border-color: var(--teal); box-shadow: 0 0 9px rgba(78,205,196,.35); }
  .tool-echobeamer .cell-hidden:hover { background: #18180a; border-color: var(--gold); box-shadow: 0 0 9px rgba(240,208,96,.35); }
  .tool-equip-pending .cell-hidden:hover { background: #1a1400; border-color: #f0d060; box-shadow: 0 0 9px rgba(240,208,96,.5); }
}
/* Тап-фидбек: короткая pulse-анимация цвета активного инструмента (заменяет hover на тач-устройствах). */
@keyframes cell-tap-pulse-teal {
  0%   { background: #0d1b2a; box-shadow: 0 0 0 0 rgba(78,205,196,0); }
  35%  { background: #1a4555; box-shadow: 0 0 14px 4px rgba(78,205,196,.55); }
  100% { background: #0d1b2a; box-shadow: 0 0 0 0 rgba(78,205,196,0); }
}
@keyframes cell-tap-pulse-gold {
  0%   { background: #0d1b2a; box-shadow: 0 0 0 0 rgba(240,208,96,0); }
  35%  { background: #3a3010; box-shadow: 0 0 14px 4px rgba(240,208,96,.55); }
  100% { background: #0d1b2a; box-shadow: 0 0 0 0 rgba(240,208,96,0); }
}
.tool-locator   .cell-tapped { animation: cell-tap-pulse-teal .25s ease-out; }
.tool-echobeamer .cell-tapped { animation: cell-tap-pulse-gold .25s ease-out; }
.tool-equip-pending .cell-tapped { animation: cell-tap-pulse-gold .25s ease-out; }
.cell-empty  { background: #040a12; border: 1px solid #08111c; cursor: default; }
.cell-number { background: #060e1c; border: 1px solid #0c1e2e; cursor: default; }
.num-1{color:#4ecdc4}.num-2{color:#2ecc71}.num-3{color:#f39c12}
.num-4{color:#e74c3c}.num-5{color:#9b59b6}.num-6{color:#1abc9c}
.num-7{color:#e91e63}.num-8{color:#fff}
.cell-open  { cursor: default; }
.open-green  { background:rgba(46,204,113,.12); border:1px solid rgba(46,204,113,.3); color:rgba(46,204,113,.5); }
.open-yellow { background:rgba(243,156,18,.12); border:1px solid rgba(243,156,18,.3); color:rgba(243,156,18,.5); }
.open-red    { background:rgba(231,76,60,.12);  border:1px solid rgba(231,76,60,.3);  color:rgba(231,76,60,.5); }
.open-blue   { background:rgba(52,152,219,.12); border:1px solid rgba(52,152,219,.3); color:rgba(52,152,219,.5); }
.open-purple { background:rgba(155,89,182,.12); border:1px solid rgba(155,89,182,.3); color:rgba(155,89,182,.5); }
/* Раскрытый Локатором сегмент эфемера: иконка Эхолуча «бей сюда».
   #177: мигает ровно 5 раз (5.5 с) и остаётся стоять непрозрачной. Анимация
   висит НЕ на самой иконке, а на классе-модификаторе .cell-beam-blink, который
   renderGrid снимает по истечении срока: иначе после конца анимации иконка
   вернулась бы к первому кадру (opacity .22) и стала бы еле видна.
   Длительность продублирована в game.js (флаг c.beamBlinkDone) — менять вместе. */
.cell-beam-hint .beam-hint-svg { width: 74%; height: 74%; pointer-events: none; filter: drop-shadow(0 0 3px rgba(240,208,96,.7)); }
.cell-beam-blink .beam-hint-svg,
.cell-beam-blink .mem-unknown-svg { animation: beam-hint-blink 1.1s ease-in-out 5; }
@keyframes beam-hint-blink { 0%,100% { opacity: .22; } 50% { opacity: 1; } }
/* #176: мембрана, найденная Локатором в лёгком режиме, — пучок «???».
   Крупнее иконки Эхолуча: три знака в клетке 46px должны читаться. */
.cell-membrane-unknown .mem-unknown-svg { width: 86%; height: 86%; pointer-events: none; filter: drop-shadow(0 0 3px rgba(240,208,96,.7)); }
.cell-scanned { cursor: default; }
.scanned-green  { background:rgba(46,204,113,.25); border:1px solid rgba(46,204,113,.6); color:var(--green); box-shadow:0 0 10px rgba(46,204,113,.4); }
.scanned-yellow { background:rgba(243,156,18,.25); border:1px solid rgba(243,156,18,.6); color:var(--yellow); box-shadow:0 0 10px rgba(243,156,18,.4); }
/* ─── ЦВЕТНЫЕ ТЕРМИНЫ В ТЕКСТАХ (#178) ───────────────────────────────
   Название цвета эфемера пишется цветом этого эфемера; АГРЕССИЯ — красным,
   СТРАХ — синим (см. colorizeTerms в game.js). Значения те же, что у клеток и
   плашек эфемеров: цвет слова обязан совпадать с цветом тела на сетке, иначе
   подсказка начнёт спорить с тем, что игрок видит.
   font-weight здесь намеренно: на тёмном фоне тонкий цветной шрифт читается
   хуже белого, и без утолщения выделение выглядело бы блёклым, а не акцентом. */
.term-green  { color: #2ecc71; font-weight: bold; }
.term-yellow { color: #f39c12; font-weight: bold; }
.term-red    { color: #e74c3c; font-weight: bold; }
.term-blue   { color: #4ecdc4; font-weight: bold; }
/* Фиолетовый — единственное отступление от палитры клеток: #9b59b6 на почти
   чёрном фоне читается тяжело (тёмное на тёмном), поэтому в ТЕКСТЕ он взят
   светлее. На сетке и в плашках остаётся прежний #9b59b6 — там под ним заливка. */
.term-purple { color: #b07cd0; font-weight: bold; }

/* ─── ИКОНКИ МЕМБРАН (#177) ──────────────────────────────────────────
   Двенадцать рисунков вместо юникод-символов, которые сливались в клетке
   (◎ ⊕ ⊙ — круги, ✦ ✸ — звёзды, ◈ ◇ — ромбы). Файлы: img/membranes/M-NN.svg,
   game-icons.net, CC BY 3.0, авторы — docs/credits.md.

   Рисуем МАСКОЙ, а не <img>: маска заливается currentColor, поэтому один файл
   работает во всех состояниях — фиолетовым на клетке, золотым у сработавшей
   мембраны (.membrane-triggered ниже), бирюзовым в СКАНЕРе. Через <img> цвет
   пришлось бы вшить в файл и держать по копии на каждый случай.
   -webkit-mask-* нужен Safari и старому Chrome; без префикса там пустое место. */
/* Рисунок ВСТРОЕН в разметку (MEMBRANE_ICONS в game.js) — здесь только размер
   и выравнивание. Прежняя версия рисовала маской (mask-image + url на файл),
   и у заказчика иконки не появлялись вовсе: маске нужны и поддержка браузера,
   и загруженный файл, и верный MIME, и отсутствие filter на элементе. Теперь
   ни одной такой зависимости — цвет берётся из currentColor самим SVG. */
.mem-ic {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.15em; height: 1.15em;
  vertical-align: -0.2em;
  line-height: 1;
}
.mem-ic > svg { width: 100%; height: 100%; display: block; }
/* Запасной вариант — юникод-символ вместо рисунка (карта не сгенерирована).
   Ему нужен нормальный кегль, иначе символ окажется мельче своей клетки. */
.mem-ic-text { font-size: 1em; }
/* В клетке слоя иконка крупнее относительно кегля: рисунок должен читаться
   там, где раньше стоял один жирный символ. */
.cell .mem-ic { width: 1.35em; height: 1.35em; vertical-align: -0.3em; }
.mem-sym-lg { width: 1.3em !important; height: 1.3em !important; }

/* Сработавшая мембрана: только золотой цвет, без свечения на самой иконке.
   Тут был `filter: drop-shadow()` на .mem-ic — и это единственное место, где
   сработавшая мембрана отличалась от прочих. Заказчик видел её пустой, тогда
   как остальные рисовались: filter поверх CSS-маски — известная больная точка
   движков (элемент получает свой слой композитинга, и в ряде сборок WebKit/Blink
   замаскированный элемент пропадает целиком). Свечение декоративно, различение
   даёт цвет — поэтому убрано, а не «починено» подпорками. */
.membrane-triggered { color: var(--gold) !important; text-shadow: 0 0 10px rgba(240,208,96,.9); }

/* ── ЗАВЕРШЁННЫЙ ЭФЕМЕР ─────────────────────────────
   Тело, с которым уже нечего делать, гасится: свечение снимается, заливка
   темнеет, символ — крест. Но КОНТУР сохраняет цвет эфемера — по нему на
   сетке читается, кто здесь лежал, даже когда работа закончена.
   Раньше здесь стоял серый border-color с !important — он бил по всем цветам
   и обесцвечивал завершённые тела.
   ВНИМАНИЕ: не писать в комментарии последовательность звёздочка-слэш —
   она закрывает комментарий досрочно и ломает следующее правило. */
.cell-eph-done {
  box-shadow: none !important;
  border-style: dashed !important;
  background: rgba(255,255,255,.035) !important;
  opacity: .72;
  font-weight: bold;
}
/* Контур задаём явно и одинаково ярко для обоих состояний сегмента: у клеток,
   вскрытых Локатором (open-), собственная рамка всего .3 альфы, и после
   приглушения opacity она пропадала вовсе. Цвет — единственное, что осталось
   от эфемера на сетке, поэтому он должен читаться. */
.cell-eph-done.open-green,  .cell-eph-done.scanned-green  { border-color: rgba(46,204,113,.8) !important; }
.cell-eph-done.open-yellow, .cell-eph-done.scanned-yellow { border-color: rgba(243,156,18,.8) !important; }
.cell-eph-done.open-red,    .cell-eph-done.scanned-red    { border-color: rgba(231,76,60,.8)  !important; }
.cell-eph-done.open-blue,   .cell-eph-done.scanned-blue   { border-color: rgba(59,130,246,.8) !important; }
.cell-eph-done.open-purple, .cell-eph-done.scanned-purple { border-color: rgba(155,89,182,.8) !important; }
/* Крест рисуем крупнее точки — он и есть «зачёркнутая» клетка */
.cell-eph-done:not(.cell-eye):not(.membrane-triggered) { letter-spacing: 0; }
@keyframes flash-red { 0%,100%{opacity:1} 50%{background:rgba(231,76,60,.5);opacity:.8} }
.flash { animation: flash-red .35s ease; }

/* Цифра рядом со скрытой мембраной.
   Пять вспышек по 0.5 с = 2.5 с (было три / 1.5 с): сигнал легко пропустить,
   если взгляд в этот момент в другой части сетки. Длительность продублирована
   в game.js (сброс флага c.membraneNear) — менять только вместе. */
.cell-membrane-near { animation: membrane-near-blink .5s ease-in-out 5; }
/* #175, лёгкий режим: тот же сигнал, но без счёта вспышек — мигает, пока
   мембрана рядом не вскрыта. Останавливает его не таймер, а сама игра:
   renderGrid перестаёт вешать класс, когда мембрана становится видимой.
   Оттого и infinite: конца у анимации быть не должно. */
.cell-membrane-near-easy { animation: membrane-near-blink .5s ease-in-out infinite; }
@keyframes membrane-near-blink {
  0%, 100% { background: transparent; box-shadow: none; }
  50% {
    background: rgba(240,208,96,.42);
    box-shadow: 0 0 12px 2px rgba(240,208,96,.75) inset;
    color: #fff8dc;
  }
}

/* Sonar ping */
@keyframes sonar-ping { 0%{transform:scale(.4);opacity:.8} 100%{transform:scale(2);opacity:0} }
.sonar-ping {
  position: absolute; width: 100%; height: 100%;
  border-radius: 50%; border: 2px solid var(--teal);
  animation: sonar-ping .45s ease-out forwards;
  pointer-events: none;
}

/* ─── TOOL SECTION (hints row + cards row share one grid) ── */
#tool-section {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  column-gap: 7px;
  row-gap: 5px;
  /* default align-items: stretch — все слоты в одной строке одинаковой высоты */
}
.slot-key-hint { text-align: center; font-size: 14px; color: var(--dim); align-self: center; }
kbd { background: var(--surface); border: 1px solid var(--border); border-radius: 3px; padding: 1px 5px; font-family: 'Courier New', monospace; font-size: 13px; }
/* ─── COMBO LAMPS ────────────────────────────────── */
/* На локаторе нет card-cost — лампочки занимают её место (в потоке) */
#combo-lamps {
  display: flex;
  justify-content: center;
  gap: 4px;
  margin-top: 2px;
}
.combo-lamp {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: #0c1e2e;
  border: 1px solid #1a3a5c;
  transition: background .1s, box-shadow .1s;
}
.combo-lamp.lit {
  background: var(--teal);
  box-shadow: 0 0 5px rgba(78,205,196,.7);
  border-color: var(--teal);
}

#btn-exit-room {
  grid-column: 3 / 5;
  justify-self: end;
  align-self: center;
  background: none; border: 1px solid var(--red); color: var(--red);
  padding: 4px 12px; font-family: 'Courier New', monospace; font-size: 14px;
  letter-spacing: 1px; border-radius: 3px; cursor: pointer; transition: all .15s;
}
#btn-exit-room:hover { background: rgba(231,76,60,.12); }

/* ─── TOOL CARDS ─────────────────────────────────── */
.card-slot {
  position: relative;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 6px;
  cursor: pointer;
  transition: all .15s;
  overflow: hidden;
  position: relative;
  user-select: none;
  outline: none;
  caret-color: transparent;
  /* ПРАВИЛО: все слоты одинаковой высоты, контент не растягивает строку */
  height: 134px;
  min-width: 0;
  max-width: 100%;
}
.card-slot:hover:not(.empty) { border-color: var(--dim); }
.card-slot.sel-locator    { border-color: var(--teal); box-shadow: 0 0 12px rgba(78,205,196,.3); background: rgba(78,205,196,.06); }
.card-slot.sel-echobeamer { border-color: var(--gold); box-shadow: 0 0 12px rgba(240,208,96,.3); background: rgba(240,208,96,.06); }
.card-slot.boss-invert-active { border-color: #9b59b6 !important; box-shadow: 0 0 14px rgba(155,89,182,.45) !important; background: rgba(155,89,182,.07) !important; }
#boss-invert-pips { display: none; gap: 4px; justify-content: center; margin-top: 3px; }
.inv-pip { width: 8px; height: 8px; border-radius: 50%; }
.inv-pip-lit  { background: #9b59b6; box-shadow: 0 0 7px rgba(155,89,182,.9); }
.inv-pip-dark { background: rgba(155,89,182,.15); border: 1px solid rgba(155,89,182,.3); }
.card-slot.empty      { cursor: default; border-style: dashed; opacity: .4; }
.card-slot.slot-locked { cursor: default; border-style: dashed; opacity: .35; background: rgba(30,10,10,.3); }
.card-slot.slot-locked .locked-icon { font-size: 20px; margin-top: 24px; opacity: .5; }
.card-slot.consumable-shield   { border-color: #4ecdc4; box-shadow: 0 0 10px rgba(78,205,196,.25); cursor: pointer; }
.card-slot.consumable-shield.shield-cracked { border-color: #e7943c; box-shadow: 0 0 10px rgba(231,148,60,.35); }
.card-slot.consumable-powerbank { border-color: #f0d060; box-shadow: 0 0 10px rgba(240,208,96,.25); cursor: pointer; }
.card-slot.consumable-shield:hover   { border-color: #7eeee7; box-shadow: 0 0 14px rgba(78,205,196,.4); }
.card-slot.consumable-shield.shield-cracked:hover { border-color: #ffb060; }
.card-slot.consumable-powerbank:hover { border-color: #ffe080; box-shadow: 0 0 14px rgba(240,208,96,.4); }
.card-slot.equip-slot {
  cursor: pointer;
  display: flex;
  flex-direction: column;
  border-width: 2px;
  padding: 0;
  overflow: hidden;
}
.card-slot.equip-slot:hover { filter: brightness(1.08); }
.equip-type-badge { font-size: 8px; color: var(--dim); text-transform: uppercase; letter-spacing: .5px; margin-top: 6px; }
.card-slot.chaos-shield-slot { border-color: #ff6b35; box-shadow: 0 0 10px rgba(255,107,53,.25); cursor: default; }
.card-slot.chaos-shield-slot:hover { border-color: #ff9060; box-shadow: 0 0 14px rgba(255,107,53,.4); }
@keyframes chaos-trigger-flash {
  0%   { box-shadow: 0 0 0 0 rgba(255,107,53,0); background: var(--panel); }
  20%  { box-shadow: 0 0 24px 10px rgba(255,107,53,.85); background: rgba(255,107,53,.3); border-color: #ffcc99 !important; }
  55%  { box-shadow: 0 0 16px 5px rgba(255,107,53,.5); background: rgba(255,107,53,.15); }
  100% { box-shadow: 0 0 10px rgba(255,107,53,.25); background: var(--panel); }
}
.card-slot.chaos-flash { animation: chaos-trigger-flash 2.5s ease-out forwards !important; }

/* ─── ТИПОВАЯ ПОЛОСА-ШАПКА ───────────────────────────── */
.eq-strip {
  flex-shrink: 0;
  width: 100%;
  font-size: 9px;
  font-weight: bold;
  letter-spacing: 1.5px;
  text-align: center;
  padding: 5px 0 4px;
  border-bottom: 1px solid;
  text-transform: uppercase;
}

/* ─── ТЕЛО КАРТОЧКИ ──────────────────────────────────── */
.eq-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 4px 4px 16px;
  gap: 3px;
}
.eq-id {
  font-size: 9px;
  color: var(--dim);
  letter-spacing: 1px;
}
.eq-name {
  font-size: 11px;
  font-weight: bold;
  color: var(--text);
  text-align: center;
  word-break: break-word;
  line-height: 1.3;
}
.eq-status {
  font-size: 10px;
  letter-spacing: 0.5px;
}

/* ─── ИНСТРУМЕНТЫ — teal сканлайны ──────────────────── */
.eq-tool {
  background-image: repeating-linear-gradient(
    0deg, transparent, transparent 11px,
    rgba(78,205,196,0.05) 11px, rgba(78,205,196,0.05) 12px
  );
}
.eq-tool-strip {
  background: #051c1c;
  color: #4ecdc4;
  border-bottom-color: rgba(78,205,196,.4);
}
.eq-tool.equip-pending .eq-strip { background: #1a1200; color: #f0d060; border-bottom-color: rgba(240,208,96,.4); }

/* ─── ПАССИВЫ — фиолетовое свечение ─────────────────── */
.eq-passive {
  background-image: radial-gradient(ellipse at 50% 65%, rgba(155,89,182,.13) 0%, transparent 72%);
  animation: passive-breathe 3s ease-in-out infinite;
}
@keyframes passive-breathe {
  0%,100% { box-shadow: 0 0 5px rgba(155,89,182,.2); }
  50%      { box-shadow: 0 0 14px rgba(155,89,182,.5); }
}
.eq-passive-strip {
  background: #0f0618;
  color: #b07dce;
  border-bottom-color: rgba(155,89,182,.4);
}

/* ─── РАСХОДНИКИ — оранжевая штриховка ──────────────── */
.eq-consumable {
  background-image: repeating-linear-gradient(
    -45deg,
    transparent, transparent 9px,
    rgba(230,126,34,.08) 9px, rgba(230,126,34,.08) 10px
  );
  border-style: dashed !important;
}
.eq-consumable-strip {
  background: #1a0d00;
  color: #e67e22;
  border-bottom-color: rgba(230,126,34,.4);
  border-style: solid;
}
@keyframes emi-block-pulse { 0%,100%{box-shadow:0 0 0 0 rgba(231,76,60,0)} 50%{box-shadow:0 0 10px 4px rgba(231,76,60,.65)} }
.card-slot.slot-blocked {
  border-color: rgba(231,76,60,.9) !important;
  background: rgba(231,76,60,.10) !important;
  opacity: 0.7;
  cursor: not-allowed !important;
  position: relative;
  animation: emi-block-pulse 0.8s ease-in-out infinite;
}
.card-slot.slot-blocked::after {
  content: '☠';
  position: absolute;
  top: 4px; right: 6px;
  font-size: 17px;
  color: #e74c3c;
  text-shadow: 0 0 6px rgba(231,76,60,.9);
  pointer-events: none;
}
.emi-turns-badge {
  position: absolute;
  bottom: 3px; left: 50%;
  transform: translateX(-50%);
  font-size: 10px; font-weight: bold;
  color: #e74c3c;
  pointer-events: none;
  white-space: nowrap;
  text-shadow: 0 0 4px rgba(0,0,0,.8);
}
.card-inner {
  display: flex; flex-direction: column; align-items: center;
  padding: 10px 4px 8px;
  gap: 5px;
}
.card-art { width: 64px; height: 64px; }
/* Equipment art (AI-generated icons). Toggle via [data-equipment-art="on"] on <html>. */
.card-art-img {
  display: none;
  width: 64px; height: 64px;
  object-fit: contain;
  border-radius: 4px;
}
[data-equipment-art="on"] .card-art { display: none; }
[data-equipment-art="on"] .card-art-img { display: block; }
.card-name { font-size: 14px; letter-spacing: 2px; color: var(--text); font-weight: bold; word-break: break-word; overflow-wrap: break-word; }
.card-cost { font-size: 14px; }
.card-cost.teal { color: var(--teal); }
.card-cost.gold { color: var(--gold); }
.empty-inner { justify-content: center; min-height: 120px; }
.empty-plus  { font-size: 33px; color: var(--dim); opacity: .8; }
.empty-label { font-size: 14px; color: var(--dim); letter-spacing: 1px; opacity: .8; }

/* ─── INFO COLUMN ────────────────────────────────── */
#info-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 160px; /* ПРАВИЛО: правая панель не сжимается ниже 160px никогда */
  overflow: hidden;
}
.panel { background: var(--panel); border: 1px solid var(--border); border-radius: 5px; padding: 10px 12px; }
.panel-title { font-size: 14px; letter-spacing: 2px; color: var(--dim); text-transform: uppercase; margin-bottom: 8px; padding-bottom: 5px; border-bottom: 1px solid var(--border); }

/* HP */
#hp-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
#hp-display { display: flex; gap: 7px; }
/* Потолок слоя: сколько энергии и ОИ он способен отдать (считается на входе) */
#layer-potential, #sp-layer-potential { display: flex; gap: 10px; align-items: center; }
.lp-item {
  display: flex; align-items: baseline; gap: 4px;
  font-size: 16px; letter-spacing: .5px;
  padding: 2px 7px; border-radius: 4px;
  border: 1px solid var(--border); background: rgba(255,255,255,.02);
}
.lp-ico { font-size: 13px; opacity: .85; }
/* Значок ОИ — копия иконки из шапки ресурсов (currentColor берёт цвет .lp-oi) */
.lp-ico-svg { flex-shrink: 0; align-self: center; opacity: .9; }
/* Подпись ресурса: без неё значки читались как деньги */
.lp-cap { font-size: 10px; letter-spacing: 1px; opacity: .7; }
/* Вторая цифра в скобках — доля остатка, лежащая в клетках сетки (пустые клетки
   для энергии, цифры для ОИ). Раньше её жали до 12px и гасили до .6 «как
   уточнение» — в результате она просто не читалась. Кегль теперь общий с главной
   цифрой; роль второстепенной держат только скобки и лёгкое приглушение. */
.lp-sub { font-size: inherit; opacity: .85; margin-left: -1px; }

/* Цвета панелей (ТЗ): у ОИ синий значок и белый текст, у Энергии — жёлтый значок
   и синий текст. Цвет на .lp-item задаёт ТЕКСТ (цифры и подпись), значку цвет
   назначается отдельно: SVG радара рисуется currentColor, а ⚡ — эмодзи, и на
   большинстве платформ оно и так жёлтое, но там, где шрифт даёт его контуром,
   правило ниже красит его явно. */
.lp-oi     { color: #ffffff; }
.lp-oi .lp-ico-svg { color: var(--teal); }
.lp-energy { color: var(--teal); }
.lp-energy .lp-ico { color: var(--yellow); }
/* Запас исчерпан: в слое этого ресурса больше нет. Гасим, чтобы «0» читался
   как состояние, а не как очередная цифра. */
.lp-drained { opacity: .35; text-decoration: line-through; }
.heart { font-size: 33px; }
.heart.full  { color: var(--red); text-shadow: 0 0 8px rgba(231,76,60,.7); }
.heart.empty { color: #1a2e2e; }
/* Кинематографичная гибель: последнее сердце мигает 3 раза и гаснет. */
.heart.heart-dying {
  color: var(--red);
  animation: heart-die 1.1s ease forwards;
  transform-origin: center;
}
@keyframes heart-die {
  0%   { opacity: 1;  transform: scale(1);    text-shadow: 0 0 8px rgba(231,76,60,.7); }
  15%  { opacity: .15;transform: scale(1.25); }
  30%  { opacity: 1;  transform: scale(1);    text-shadow: 0 0 16px rgba(231,76,60,1); }
  45%  { opacity: .15;transform: scale(1.25); }
  60%  { opacity: 1;  transform: scale(1);    text-shadow: 0 0 16px rgba(231,76,60,1); }
  75%  { opacity: .15;transform: scale(1.3); }
  100% { opacity: 0;  transform: scale(.2);   text-shadow: none; }
}
/* Смертельная засветка сегмента крестом (Локатор по Эфемеру). */
.cell.cell-lethal-cross {
  color: #ff4d4d !important;
  box-shadow: 0 0 14px 3px rgba(231,76,60,.85) inset, 0 0 10px 2px rgba(231,76,60,.7);
  animation: lethal-cross-flash .5s ease 2;
}
@keyframes lethal-cross-flash {
  0%,100% { background: rgba(231,76,60,.25); }
  50%     { background: rgba(231,76,60,.6); }
}
/* Мигание кнопки выхода при появлении (открылся выход из слоя). */
#btn-exit-room.exit-appear-blink { animation: exit-appear-blink 1.6s ease 2; }
/* #179: «зов на выход» — слой зачищен, игрок досматривает поле. Пульс раз в 2 с
   и бесконечно: это приглашение, а не уведомление, и смолкнуть оно не должно,
   пока игрок не ушёл. Отдельная анимация, а не exit-appear-blink с другим
   таймингом: у той ровно два цикла, и `infinite` пришлось бы навязывать
   поверх — правило стало бы зависеть от порядка объявления. */
#btn-exit-room.exit-call-blink { animation: exit-call-blink 2s ease-in-out infinite; }
@keyframes exit-call-blink {
  0%, 100% { box-shadow: 0 0 0 0 rgba(78,205,196,0);      background: rgba(78,205,196,.08); }
  50%      { box-shadow: 0 0 16px 5px rgba(78,205,196,.9); background: rgba(78,205,196,.26); }
}
@keyframes exit-appear-blink {
  0%,100% { box-shadow: 0 0 0 0 rgba(78,205,196,0); }
  50%     { box-shadow: 0 0 14px 4px rgba(78,205,196,.95); background: rgba(78,205,196,.22); }
}

/* ─── EPHEMER TRACKER ────────────────────────────── */
/* Список эфемеров тоже прокручивается сам: при ограниченной высоте #info-col он
   не должен выдавливать журнал за нижнюю линию слотов. */
/* Трекер не отдаёт место журналу (flex-shrink:0), но и не съедает колонку целиком:
   выше 55% высоты список прокручивается сам. */
#eph-panel { display: flex; flex-direction: column; min-height: 0; flex: 0 0 auto; max-height: 55%; }
#eph-list { display: flex; flex-direction: column; gap: 7px; min-height: 0; overflow-y: auto; }

.eph-card {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 4px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.02);
  cursor: pointer;
  transition: border-color .15s;
  user-select: none;
}
.eph-card.unknown { opacity: .6; cursor: default; }
/* #155: вид опознан с первого сегмента (сигнатура расшифрована) — плашка
   мигает три раза, чтобы игрок увидел отдачу от вложенных в дешифровку ОИ. */
@keyframes eph-card-flash-kf {
  0%, 100% { background: rgba(255,255,255,.02); border-color: var(--border); }
  50%      { background: rgba(78,205,196,.22);  border-color: var(--teal); box-shadow: 0 0 12px rgba(78,205,196,.45); }
}
.eph-card-flash { animation: eph-card-flash-kf .5s ease-in-out 3; }
.eph-card.green-eph  { border-color: rgba(46,204,113,.4); }
.eph-card.yellow-eph { border-color: rgba(243,156,18,.4); }
.eph-card.done-eph   { opacity: .7; }
.eph-card:not(.unknown):hover { border-color: var(--teal); }

.eph-icon {
  width: 36px; height: 36px;
  border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
  font-size: 23px;
  flex-shrink: 0;
}
.eph-icon.unknown-icon { background: #0d1b2a; color: var(--dim); font-size: 27px; }
.eph-icon.green-icon  { background: rgba(46,204,113,.2);  color: var(--green); }
.eph-icon.yellow-icon { background: rgba(243,156,18,.2);  color: var(--yellow); }

.eph-info { flex: 1; min-width: 0; }
/* #130: первая строка не переносится и не растит высоту плашки; имя — с многоточием. */
.eph-name-row { display: flex; align-items: center; gap: 5px; flex-wrap: nowrap; overflow: hidden; }
.eph-name  { font-size: 15px; color: var(--text); letter-spacing: 1px; }
.eph-name-row .eph-name { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.eph-name-row .timer-badge,
.eph-name-row .mem-activated-check { flex-shrink: 0; }
.eph-prog  { font-size: 14px; color: var(--dim); margin-top: 2px; }
/* #130: статус мембраны — строго одна строка с многоточием. */
.eph-mem   { font-size: 14px; color: var(--gold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.eph-mem .mem-sym { color: var(--teal); font-weight: bold; margin-right: 2px; }
/* #130: жёлтая галочка = мембрана активирована (заменяет слово «активирована»). */
.mem-activated-check { color: var(--gold); font-weight: bold; font-size: 14px; margin-left: 3px; }
.timer-badge {
  display: inline-block;
  font-size: 12px;
  font-weight: bold;
  padding: 1px 5px;
  border-radius: 3px;
  color: #fff;
  line-height: 1.4;
}
.red-badge  { background: #c0392b; }
.blue-badge { background: #2563eb; }
.mem-type-badge {
  font-size: 12px;
  color: var(--teal);
  opacity: .75;
  margin-left: 4px;
}

/* ─── LOG ────────────────────────────────────────── */
/* #119: журнал прокручивается — глубокая история действий помещается в панель.
   Десктоп: высоту #info-col ограничивает JS (syncInfoColHeight) по нижней линии
   слотов, поэтому журнал не может уползти ниже центральной колонки и за экран —
   лишние строки уходят в собственную прокрутку #log-entries. */
#log-panel { flex: 1 1 auto; min-height: 120px; display: flex; flex-direction: column; }
#log-entries { display: flex; flex-direction: column; gap: 3px; flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.log-line { font-size: 15px; line-height: 1.4; padding: 2px 0; border-bottom: 1px solid #09121c; white-space: pre-wrap; word-break: break-word; overflow-wrap: break-word; }
.log-info    { color: var(--dim); }
.log-ok      { color: var(--green); }
.log-warn    { color: var(--yellow); }
.log-err     { color: var(--red); }
.log-trigger { color: var(--gold); font-weight: bold; }
.log-dim     { color: #2a4a6a; letter-spacing: 4px; text-align: center; }

/* ─── ENCYCLOPEDIA POPUP ─────────────────────────── */
#ency-popup {
  position: fixed; inset: 0;
  background: rgba(3,7,16,.7);
  display: flex; align-items: center; justify-content: center;
  z-index: 200;
}
#ency-popup.hidden { display: none; }
#ency-box {
  background: var(--panel);
  border: 1px solid var(--teal);
  border-radius: 8px;
  width: 400px;
  box-shadow: 0 0 30px rgba(78,205,196,.2);
}
#ency-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
}
#ency-title { font-size: 20px; letter-spacing: 2px; color: var(--teal); }
#ency-close { background: none; border: none; color: var(--dim); cursor: pointer; font-size: 21px; padding: 0 4px; }
#ency-close:hover { color: var(--text); }
#ency-body { padding: 18px; font-size: 17px; line-height: 1.8; }
.ency-row { display: flex; justify-content: space-between; padding: 3px 0; border-bottom: 1px solid #0a1520; }
.ency-key { color: var(--dim); }
.ency-val { color: var(--text); }
.ency-empty { color: var(--dim); font-style: italic; margin-top: 8px; }

/* ─── PHASE BAR ──────────────────────────────────── */
#phase-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: 8px;
  font-size: 15px;
  letter-spacing: 1px;
}
.phase-step {
  padding: 3px 10px;
  border-radius: 12px;
  border: 1px solid var(--border);
  transition: all .2s;
  white-space: nowrap;
}
.phase-step.active   { background: rgba(78,205,196,.15); border-color: var(--teal); color: var(--teal); }
.phase-step.done     { background: rgba(78,205,196,.06); border-color: rgba(78,205,196,.3); color: rgba(78,205,196,.5); }
.phase-step.upcoming { color: var(--border); }
.phase-arrow         { color: var(--border); font-size: 14px; }
.loop-bar-label      { color: #9b59b6; font-weight: bold; font-size: 13px; margin-right: 6px; }
.loop-victory-hint   { margin-left: 10px; color: #f0d060; font-size: 11px; font-style: italic; white-space: nowrap; }

/* ─── VICTORY UNLOCKS (экран Победы за Институт) ── */
.victory-unlocks  { margin-top: 14px; padding-top: 10px; border-top: 1px solid #2a2a2a; }
.unlock-title     { color: var(--teal); font-size: 12px; letter-spacing: 1px; margin-bottom: 6px; }
.unlock-done      { color: #4ecdc4; font-size: 13px; margin-bottom: 4px; }
.unlock-todo      { color: #444; font-size: 13px; margin-bottom: 4px; }
.wip              { color: #383838; font-style: italic; }

/* ─── BOSS BAR ───────────────────────────────────── */
#boss-bar {
  display: flex;
  flex-wrap: wrap;           /* ПРАВИЛО: не расширять #center-col — перенос вместо overflow */
  gap: 6px 14px;
  align-items: center;
  justify-content: center;
  background: rgba(231,76,60,.08);
  border: 1px solid rgba(231,76,60,.3);
  border-radius: 4px;
  padding: 6px 12px;
  font-size: 13px;
  letter-spacing: 1px;
  width: 100%;               /* ПРАВИЛО: занимать ширину #center-col, не свою собственную */
  box-sizing: border-box;
  overflow: hidden;
}
#boss-bar.hidden { display: none; }
/* #125 (мобильный): та же боевая инфо Босса, но во вкладке СКАНЕР. На десктопе
   этот узел не показывается (renderBossBar пишет в оба, видимость решает @media). */
#sp-boss-combat {
  display: flex;
  flex-wrap: wrap;
  gap: 5px 12px;
  align-items: center;
  justify-content: center;
  background: rgba(231,76,60,.08);
  border: 1px solid rgba(231,76,60,.3);
  border-radius: 4px;
  padding: 6px 10px;
  font-size: 13px;
  letter-spacing: 0.5px;
  margin: 4px 0;
  box-sizing: border-box;
}
#sp-boss-combat.hidden { display: none; }

/* #125 (мобильный): панель «ГЛАЗА X/X» на месте кнопки выхода, пока Босс не
   нейтрализован (та же grid-ячейка и высота). На десктопе кнопка выхода
   остаётся как была — панель скрыта. */
#boss-eyes-panel {
  display: none;
  grid-column: 3 / 5;
  justify-self: end;
  align-self: center;
  align-items: center;
  gap: 6px;
  background: rgba(240,208,96,.08);
  border: 1px solid rgba(240,208,96,.45);
  color: #f0d060;
  padding: 4px 12px;
  font-family: 'Courier New', monospace;
  font-size: 14px;
  letter-spacing: 1px;
  border-radius: 3px;
  white-space: nowrap;
}
#boss-eyes-panel .bep-val { font-weight: bold; font-size: 16px; }

.boss-stat { display: flex; gap: 4px; align-items: center; }
.boss-val  { font-size: 17px; font-weight: bold; color: var(--text); }
.boss-unit { color: var(--dim); font-size: 12px; }
.boss-warp-btn {
  margin-left: auto;
  background: rgba(155,89,182,.2); border: 1px solid rgba(155,89,182,.6);
  color: #c8a0e0; font-family: inherit; font-size: 13px; letter-spacing: 1px;
  padding: 4px 14px; border-radius: 4px; cursor: pointer; transition: all .15s;
}
.boss-warp-btn:hover { background: rgba(155,89,182,.4); border-color: #9b59b6; color: #e0c0ff; }

/* ─── HOSTILE CELLS ──────────────────────────────── */
@keyframes drone-hint-pulse { 0%,100%{box-shadow:0 0 4px 1px rgba(78,205,196,.3);border-color:rgba(78,205,196,.5)} 50%{box-shadow:0 0 10px 3px rgba(78,205,196,.8);border-color:#4ecdc4} }
.cell-drone-hint {
  border-color: rgba(78,205,196,.5) !important;
  background: rgba(78,205,196,.07) !important;
  animation: drone-hint-pulse 1.2s ease-in-out infinite;
}
/* H-04 Сканер угроз: 800мс «подсмотр» цвета сегмента до перехода в droneHint-метку */
@keyframes threat-peek-flash { 0%{transform:scale(.85);opacity:0} 30%{transform:scale(1.05);opacity:1} 100%{transform:scale(1);opacity:1} }
.cell-threat-peek {
  animation: threat-peek-flash .25s ease-out forwards;
  box-shadow: 0 0 12px 2px rgba(255,255,255,.35) !important;
}
.cell-threat-peek.peek-green   { background: rgba(46,204,113,.45) !important; border-color: rgba(46,204,113,.85) !important; }
.cell-threat-peek.peek-yellow  { background: rgba(243,156,18,.45) !important; border-color: rgba(243,156,18,.85) !important; }
.cell-threat-peek.peek-red     { background: rgba(231,76,60,.45)  !important; border-color: rgba(231,76,60,.85)  !important; }
.cell-threat-peek.peek-blue    { background: rgba(59,130,246,.45) !important; border-color: rgba(59,130,246,.85) !important; }
.cell-threat-peek.peek-purple  { background: rgba(155,89,182,.45) !important; border-color: rgba(155,89,182,.85) !important; }
.cell-threat-peek.peek-boss    { background: rgba(155,89,182,.45) !important; border-color: rgba(155,89,182,.85) !important; }
@keyframes neural-hint-pulse { 0%,100%{box-shadow:0 0 0 0 rgba(86,174,200,0)} 50%{box-shadow:0 0 8px 2px rgba(86,174,200,.55)} }
.cell-neural-hint {
  border-color: rgba(86,174,200,.75) !important;
  background: rgba(86,174,200,.12) !important;
  color: #56aec8 !important;
  font-weight: bold;
  animation: neural-hint-pulse 1.4s ease-in-out infinite;
}
@keyframes hostile-pulse { 0%,100%{box-shadow:0 0 0 0 rgba(231,76,60,0)} 50%{box-shadow:0 0 10px 3px rgba(231,76,60,.7)} }
.cell-hostile {
  border-color: rgba(231,76,60,.9) !important;
  background: rgba(231,76,60,.18) !important;
  color: #e74c3c !important;
  font-size: 20px !important;
  animation: hostile-pulse 0.8s ease-in-out infinite;
  cursor: not-allowed !important;
}
@keyframes neighbor-warn { 0%,100%{border-color:#1a3a5c} 50%{border-color:rgba(231,76,60,.45)} }
.cell-hostile-neighbor {
  background: rgba(231,76,60,.05) !important;
  border-color: rgba(231,76,60,.3) !important;
  animation: neighbor-warn 1.2s ease-in-out infinite;
}
/* ─── EMPTY CELL LIGHTNING ANIMATION ─────────────── */
@keyframes lightning-reveal {
  0%   { background: #aaffee; box-shadow: 0 0 18px #4ecdc4; }
  35%  { background: #4ecdc4; box-shadow: 0 0 10px #4ecdc4; }
  70%  { background: #081820; box-shadow: 0 0 3px rgba(78,205,196,.2); }
  100% { background: #040a12; box-shadow: none; }
}
.cell-empty-anim {
  animation: lightning-reveal 0.55s ease-out forwards !important;
}

/* ─── BOSS EYE CELLS ─────────────────────────────── */
.cell-eye { color: var(--gold) !important; text-shadow: 0 0 12px rgba(240,208,96,1); }
.open-boss  { background: rgba(155,89,182,.15); border: 1px solid rgba(155,89,182,.4); color: rgba(155,89,182,.5); }
.scanned-boss { background: rgba(155,89,182,.25); border: 1px solid rgba(155,89,182,.6); color: var(--purple); box-shadow: 0 0 10px rgba(155,89,182,.4); }

/* ─── BOSS EPHEMER CARD ───────────────────────────── */
.eph-card.boss-eph {
  border-color: rgba(231,76,60,.5);
  background: rgba(231,76,60,.05);
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  padding: 10px;
  min-height: 220px;
}
.eph-icon.boss-icon { background: rgba(231,76,60,.2); color: var(--red); font-size: 27px; }
.boss-eph .boss-portrait {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 4px;
  border: 1px solid rgba(231,76,60,.35);
  background: #0d1b2a;
  display: block;
}
.boss-eph .boss-fallback-icon {
  display: none;
  width: 100%;
  aspect-ratio: 16 / 9;
  align-items: center;
  justify-content: center;
  font-size: 56px;
  color: var(--red);
  background: rgba(231,76,60,.12);
  border: 1px dashed rgba(231,76,60,.35);
  border-radius: 4px;
}
/* If portrait fails to load (display:none via onerror), show the fallback */
.boss-eph .boss-portrait[style*="display: none"] + .boss-fallback-icon { display: flex; }
.boss-eph .eph-info { flex: 1 1 auto; }
.boss-eph .eph-name { font-size: 14px; line-height: 1.25; letter-spacing: 1px; }
.shield-badge { font-size: 21px; margin-left: 4px; }

/* ─── OVERLAY ────────────────────────────────────── */
#overlay { position: fixed; inset: 0; background: rgba(3,7,16,.88); display: flex; align-items: center; justify-content: center; z-index: 100; }
#overlay.hidden { display: none; }
/* max-width обязателен: причина гибели — одна длинная фраза в #overlay-sub, она
   не переносилась и растягивала окно на весь экран (1275px против 667px у «Слой
   очищен»). С потолком все итоговые окна держатся в одном габарите. */
#overlay-box { background: var(--panel); border: 1px solid var(--teal); border-radius: 8px; padding: 44px 52px; text-align: center; box-shadow: 0 0 50px rgba(78,205,196,.25); min-width: 400px; max-width: 700px; }
/* #145: узкий вариант для туториального итога — там нет таблицы рапорта,
   только одна фраза, и без потолка окно растягивалось на весь экран. */
#overlay-box.overlay-narrow { max-width: 520px; }
#overlay-title { font-size: 36px; letter-spacing: 3px; margin-bottom: 14px; }
#overlay-sub   { color: var(--dim); font-size: 18px; margin-bottom: 12px; }
#overlay-stats { color: var(--teal); font-size: 17px; margin-bottom: 24px; text-align: left; }
.report-section { color: var(--border); font-size: 14px; letter-spacing: 1px; padding: 4px 0 2px; border-top: 1px solid #0d1e2e; margin-top: 4px; }
.report-gap     { height: 6px; }
.report-row     { display: flex; justify-content: space-between; gap: 20px; padding: 2px 0; }
.report-key     { color: var(--dim); }
.report-val     { color: var(--text); font-weight: bold; }
#btn-overlay-action { background: var(--teal); color: var(--bg); border: none; padding: 14px 40px; font-family: 'Courier New', monospace; font-size: 18px; letter-spacing: 2px; border-radius: 4px; cursor: pointer; font-weight: bold; transition: opacity .15s; }
#btn-overlay-action:hover { opacity: .85; }

/* ─── SHOP OVERLAY ───────────────────────────────── */
#shop-overlay {
  position: fixed; inset: 0;
  background: rgba(3,7,16,.94);
  display: flex; align-items: center; justify-content: center;
  z-index: 150;
  overflow-y: auto;
  padding: 20px;
}
#shop-overlay.hidden { display: none; }
#shop-box {
  background: var(--panel);
  border: 1px solid var(--teal);
  border-radius: 10px;
  width: 1100px; max-width: 100%;
  padding: 28px 32px;
  box-shadow: 0 0 60px rgba(78,205,196,.2);
}
#shop-header { text-align: center; margin-bottom: 16px; }
#shop-title  { font-size: 30px; letter-spacing: 4px; color: var(--teal); }
#shop-subtitle { font-size: 17px; color: var(--dim); margin-top: 4px; letter-spacing: 1px; }
/* Подзаголовок появляется только перед Боссом — пустой не занимает место. */
#shop-subtitle:empty { display: none; }

/* На десктопе обёртки .sres-row «исчезают» — все .sres остаются прямыми flex-детьми
   #shop-res, как было до разбиения на ряды. На мобильном переопределяется в @media. */
.sres-row { display: contents; }

#shop-res {
  display: flex; gap: 14px; flex-wrap: wrap; justify-content: center;
  margin-bottom: 12px;
  background: rgba(78,205,196,.05);
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 10px 18px;
  font-size: 18px;
}
.sres { display: flex; gap: 5px; align-items: center; }
.sres.teal   { color: var(--teal); }
.sres.green  { color: var(--green); }
.sres.yellow { color: var(--yellow); }
.sres.gold   { color: var(--gold); }
.sres.red    { color: var(--red); }

.shop-msg { text-align: center; font-size: 17px; min-height: 22px; margin-bottom: 12px; letter-spacing: .5px; }
.shop-msg.ok  { color: var(--green); }
.shop-msg.err { color: var(--red); }

#shop-panels {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 20px;
}
.org-panel {
  background: rgba(255,255,255,.02);
  border: 1px solid var(--border);
  border-radius: 7px;
  padding: 16px;
  position: relative;
}
[data-equipment-art="on"] .org-panel { isolation: isolate; }
#org-hospital  { border-color: rgba(46,204,113,.3); }
#org-institute { border-color: rgba(78,205,196,.3); }
#org-market    { border-color: rgba(243,156,18,.3); }

.org-title { font-size: 18px; letter-spacing: 2px; margin-bottom: 4px; }
#org-hospital  .org-title { color: var(--green); }
#org-institute .org-title { color: var(--teal); }
#org-market    .org-title { color: var(--yellow); }

/* Org emblem (AI-generated coat-of-arms). Toggle via [data-equipment-art="on"].
   Sits as a decorative background in the panel's top-right corner, overflowing
   the top border by ~14% of its size. Tabs (incl. "Возврат") sit above the
   emblem via z-index:1. The mask fades the top-right corner into the page. */
.org-emblem {
  display: none;
  position: absolute;
  top: -32px;
  right: -6px;
  width: 122px;
  height: 122px;
  border-radius: 50%;
  /* Кликабельна ради чита тест-режима (10 нажатий по эмблеме ЧР). Контент панели
     лежит выше (z-index:1), поэтому обычные клики по кнопкам эмблема не перехватывает. */
  pointer-events: auto;
  z-index: 0;
  opacity: .85;
  -webkit-mask-image: linear-gradient(45deg, rgba(0,0,0,1) 45%, rgba(0,0,0,.15) 100%);
          mask-image: linear-gradient(45deg, rgba(0,0,0,1) 45%, rgba(0,0,0,.15) 100%);
}
[data-equipment-art="on"] .org-emblem { display: block; }
[data-equipment-art="on"] .org-emoji { display: none; }
[data-equipment-art="on"] .org-panel > .org-title,
[data-equipment-art="on"] .org-panel > .org-desc,
[data-equipment-art="on"] .org-panel > .org-tabs,
[data-equipment-art="on"] .org-panel > .shop-items { position: relative; z-index: 1; }
/* Tabs (incl. "Возврат") need an opaque backdrop so the emblem behind doesn't bleed through. */
[data-equipment-art="on"] .org-tab { background: rgba(9,20,33,.92); }
[data-equipment-art="on"] .org-tab.tab-locked {
  opacity: .55;
  background: rgba(9,20,33,.6);
  color: rgba(155,177,196,.6);
  border-color: rgba(26,58,92,.55);
}

.org-desc  { font-size: 14px; color: var(--dim); margin-bottom: 14px; letter-spacing: 1px; }
.shop-items { display: flex; flex-direction: column; gap: 10px; }

/* ─── ORG TABS ───────────────────────────────────── */
.org-tabs { display: flex; gap: 6px; margin-bottom: 10px; }
.org-tab {
  background: transparent; border: 1px solid var(--border);
  color: var(--dim); font-family: inherit; font-size: 11px;
  padding: 4px 10px; border-radius: 3px; cursor: pointer;
  letter-spacing: .5px; transition: all .15s;
}
.org-tab:hover { border-color: var(--teal); color: var(--teal); }
.org-tab.active { border-color: var(--teal); color: var(--teal); background: rgba(78,205,196,.08); }
.org-tab.tab-locked { opacity: .3; cursor: not-allowed; }
.org-tab.tab-locked:hover { border-color: var(--border); color: var(--dim); background: transparent; }
/* #80: мигание кнопки «Эксклюзивы» при первом доступе к ним */
@keyframes tab-blink-kf {
  0%, 100% { box-shadow: 0 0 0 0 rgba(78,205,196,0); }
  50%      { box-shadow: 0 0 12px 2px rgba(78,205,196,.9); background: rgba(78,205,196,.22); }
}
.org-tab.tab-blink { animation: tab-blink-kf .45s ease-in-out 3; }

/* ─── FULL SLOTS MODAL ───────────────────────────────────────── */
/* z-index 9600 — вровень с generic-confirm и ВЫШЕ Профиля (9250).
   Было 2100: предупреждение открывалось под окном Профиля, и игрок видел его
   только после выхода оттуда — то есть в момент, когда оно уже ни к чему.
   Модалка вызывается из Профиля (попытка забрать премию в занятые слоты) и из
   Организаций, поэтому обязана перекрывать оба. */
#full-slots-modal {
  position: fixed; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.72); z-index: 9600;
}
#full-slots-modal.hidden { display: none; }
#fsm-box {
  background: var(--panel); border: 1px solid rgba(231,76,60,.5);
  border-radius: 8px; max-width: 380px; width: 90%; padding: 0;
  overflow: hidden; box-shadow: 0 0 30px rgba(231,76,60,.2);
}
#fsm-header {
  padding: 12px 16px; background: rgba(231,76,60,.1);
  border-bottom: 1px solid rgba(231,76,60,.3);
  font-size: 14px; font-weight: bold; color: #ffaaaa; letter-spacing: 1px;
}
#fsm-body {
  padding: 16px; font-size: 13px; color: var(--text); line-height: 1.65;
}
#fsm-body strong { color: var(--teal); }
#fsm-close {
  display: block; width: calc(100% - 32px); margin: 0 16px 16px;
  padding: 9px; background: rgba(78,205,196,.12);
  border: 1px solid rgba(78,205,196,.4); color: var(--teal);
  border-radius: 4px; cursor: pointer; font-family: inherit;
  font-size: 13px; letter-spacing: 1px;
}
#fsm-close:hover { background: rgba(78,205,196,.22); }

/* ─── EQUIP ITEMS IN SHOP ────────────────────────── */
.equip-item {
  background: rgba(155,89,182,.05); border: 1px solid rgba(155,89,182,.25);
  border-radius: 6px; padding: 8px 10px;
}
.equip-item.equip-locked { opacity: .4; }
.equip-item .item-name { font-size: 13px; color: #c8a0e0; margin-bottom: 2px; }
.equip-item .item-id { font-size: 10px; color: var(--dim); }
.equip-item .item-desc { font-size: 11px; color: var(--text); margin: 4px 0; }
.equip-item .item-cost { font-size: 12px; color: var(--gold); }
.equip-item .equip-type { font-size: 10px; color: var(--dim); margin-bottom: 4px; }
/* Equipment thumbnail — only visible when art flag is on */
.equip-item .equip-art { display: none; }
[data-equipment-art="on"] .equip-item {
  display: grid;
  grid-template-columns: 56px 1fr;
  grid-template-areas:
    "art type"
    "art name"
    "art cost"
    "btn btn";
  gap: 4px 10px;
  align-items: center;
}
[data-equipment-art="on"] .equip-item .equip-art {
  display: block;
  grid-area: art;
  width: 56px; height: 56px;
  border-radius: 5px;
  align-self: start;
  background: #0a1428;
}
[data-equipment-art="on"] .equip-item .equip-type { grid-area: type; margin: 0; }
[data-equipment-art="on"] .equip-item .item-name  { grid-area: name; margin: 0; }
[data-equipment-art="on"] .equip-item .item-cost  { grid-area: cost; }
[data-equipment-art="on"] .equip-item .btn-equip-buy { grid-area: btn; margin-top: 4px; justify-self: start; }

/* Standard-shop-items (shield / powerbank) thumbnail under the same flag */
.shop-item-art { display: none; }
[data-equipment-art="on"] .shop-item:has(.shop-item-art) {
  display: grid;
  grid-template-columns: 56px 1fr;
  grid-template-areas:
    "art name"
    "art hint"
    "art cost"
    "btn btn";
  gap: 4px 10px;
  align-items: center;
}
[data-equipment-art="on"] .shop-item .shop-item-art {
  display: block;
  grid-area: art;
  width: 56px; height: 56px;
  border-radius: 5px;
  align-self: start;
  background: #0a1428;
}
[data-equipment-art="on"] .shop-item:has(.shop-item-art) .item-name { grid-area: name; margin: 0; }
[data-equipment-art="on"] .shop-item:has(.shop-item-art) .item-win-hint { grid-area: hint; margin: 0; }
[data-equipment-art="on"] .shop-item:has(.shop-item-art) .item-cost { grid-area: cost; }
[data-equipment-art="on"] .shop-item:has(.shop-item-art) .btn-shop { grid-area: btn; margin-top: 4px; justify-self: start; }
[data-equipment-art="on"] .shop-item:has(.shop-item-art) .item-badge { display: none; }
/* У карточек с картинкой бейджа нет — отступ под него не нужен (иначе название
   вроде «Резонансный щит (2 удара)» зря переносится на вторую строку). */
[data-equipment-art="on"] .shop-item:has(.shop-item-art) .item-name { padding-right: 0; }
.equip-unlock-hint { font-size: 10px; color: var(--yellow); opacity: .7; margin-top: 2px; }
.btn-equip-buy {
  margin-top: 6px; background: rgba(155,89,182,.2); border: 1px solid rgba(155,89,182,.5);
  color: #c8a0e0; font-family: inherit; font-size: 11px;
  padding: 3px 10px; border-radius: 3px; cursor: pointer;
}
.btn-equip-buy:hover:not(:disabled) { background: rgba(155,89,182,.4); }
.btn-equip-buy:disabled { opacity: .35; cursor: default; }

/* Стили вкладки «Возврат» удалены вместе с самой вкладкой (#160): продажа
   оборудования живёт в окне «ПРОФИЛЬ», см. .pcard-slot-sellable. */

.btn-equip-reveal {
  width: 100%; margin-top: 10px; padding: 8px 12px;
  background: rgba(231,76,60,.12); border: 1px dashed rgba(231,76,60,.5);
  color: #e7a0a0; font-family: inherit; font-size: 12px; letter-spacing: .5px;
  border-radius: 4px; cursor: pointer; transition: all .15s;
}
.btn-equip-reveal:hover:not(:disabled) { background: rgba(231,76,60,.25); border-color: #e74c3c; color: #ffb0b0; }
.btn-equip-reveal.disabled, .btn-equip-reveal:disabled { opacity: .4; cursor: default; }

.shop-item {
  background: rgba(255,255,255,.02);
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 10px 12px;
  display: flex; flex-direction: column; gap: 5px;
}
/* padding-right — под бейдж в правом верхнем углу (♥/⚡/💰): без него длинные
   названия Госпиталя заезжали под иконку. Названия и размер шрифта не трогаем. */
/* padding-right — под бейдж в правом верхнем углу (♥/⚡/💰): без него длинные
   названия Госпиталя заезжали под иконку. Шрифт 17→15px, чтобы самые длинные
   («Регенерация эссенцией +1 HP») по-прежнему влезали в ОДНУ строку. */
.item-name { font-size: 15px; color: var(--text); padding-right: 28px; }
.item-win-hint { font-size: 13px; font-weight: bold; color: #f0c030; letter-spacing: .5px; }
.item-cost { font-size: 15px; color: #7ab8d8; }

/* ─── SHOP ITEM BADGE ────────────────────────────── */
.shop-item { position: relative; }
.item-badge {
  position: absolute;
  top: 7px; right: 9px;
  /* 18→24px: сердечки/молнии в углу карточек были слишком мелкими */
  font-size: 24px;
  opacity: .9;
  pointer-events: none;
  line-height: 1;
}
/* #19: число выручки рядом с мешочком */
.item-badge.sell-payout {
  font-size: 14px;
  font-weight: bold;
  color: var(--gold);
  opacity: 1;
  white-space: nowrap;
}
/* #4: универсальное подтверждение */
#generic-confirm-overlay {
  position: fixed; inset: 0;
  background: rgba(4,10,20,.78);
  display: flex; align-items: center; justify-content: center;
  z-index: 9600;
  font-family: 'Courier New', monospace;
}
#generic-confirm-overlay.hidden { display: none; }
#generic-confirm-box {
  width: clamp(260px, 80vmin, 400px);
  background: #061726;
  border: 2px solid rgba(78,205,196,.5);
  border-radius: 10px;
  padding: 24px 26px;
  text-align: center;
  box-shadow: 0 0 36px rgba(78,205,196,.2);
}
/* pre-line: сообщения из нескольких абзацев (протокол идентификации в Атласе)
   разделяются \n прямо в тексте — иначе всё склеивается в один ком. */
#generic-confirm-text { color: var(--text); font-size: 17px; line-height: 1.5; margin-bottom: 20px; white-space: pre-line; }
/* «Не показывать этот отчёт» — та же галочка, что у подсказок (#hint-no-more),
   но в универсальном окне. Метка кликабельна целиком: в 16px квадратик пальцем
   на телефоне не попасть. */
#generic-confirm-nomore {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin: -8px 0 16px;
  font-size: 13px; color: var(--dim); letter-spacing: .5px;
  cursor: pointer; user-select: none;
}
#generic-confirm-nomore.hidden { display: none; }
#generic-confirm-nomore input[type=checkbox] {
  width: 16px; height: 16px; accent-color: var(--teal); cursor: pointer; flex: 0 0 auto;
}
#generic-confirm-btns { display: flex; gap: 14px; justify-content: center; }
#generic-confirm-btns button {
  font-family: 'Courier New', monospace;
  font-size: 16px; font-weight: bold;
  padding: 10px 30px; border-radius: 5px; cursor: pointer;
  border: 2px solid rgba(78,205,196,.55);
  background: rgba(78,205,196,.1); color: var(--teal);
}
#btn-generic-yes { border-color: rgba(231,76,60,.6); color: #ff8a7a; background: rgba(231,76,60,.12); }

/* ─── EPHEMER EFFECT LINE ────────────────────────── */
.eph-effect {
  font-size: 13px;
  margin-top: 3px;
  opacity: .85;
  font-style: italic;
}
.btn-shop {
  background: none;
  border: 1px solid var(--border);
  color: var(--text);
  padding: 5px 12px;
  font-family: 'Courier New', monospace;
  font-size: 14px;
  letter-spacing: 1px;
  border-radius: 3px;
  cursor: pointer;
  transition: all .15s;
  align-self: flex-start;
  margin-top: 2px;
}
.btn-shop:hover { border-color: var(--teal); color: var(--teal); background: rgba(78,205,196,.08); }
/* #61: кнопка продажи во всю ширину, выручка (💰 N) внутри неё — не накрывает название */
.btn-sell { align-self: stretch; width: 100%; text-align: center; }
.btn-sell .sell-payout { color: var(--gold); font-weight: bold; margin-left: 4px; white-space: nowrap; }

/* #140: предупреждение возврата в Эфир — центрированный модал (стандартное окно), НЕ плашка снизу.
   Карточный фон/рамку даёт .hint-box.hint-normal; здесь — оверлей-подложка, размеры и кнопки. */
#shop-confirm {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(4,10,18,.72);
  z-index: 9000;
  padding: 16px;
}
.shop-confirm-box {
  width: 520px;
  max-width: 95vw;
  text-align: center;
}
.shop-confirm-label {
  font-size: 20px; font-weight: bold; letter-spacing: 2px;
  text-transform: uppercase; color: #e74c3c;
}
#shop-confirm-text {
  font-size: 22px;
  color: var(--text);
  line-height: 1.6;
}
.confirm-warn {
  display: block;
  margin-top: 12px;
  color: #e74c3c;
  font-size: 22px;
  letter-spacing: .5px;
}
#shop-confirm-btns { display: flex; gap: 10px; justify-content: center; }
#btn-confirm-yes {
  background: rgba(231,76,60,.2); border: 1px solid rgba(231,76,60,.6);
  color: #ffaaaa; font-family: inherit; font-size: 22px; letter-spacing: 1px;
  padding: 11px 34px; border-radius: 4px; cursor: pointer;
}
#btn-confirm-yes:hover { background: rgba(231,76,60,.4); }
#btn-confirm-no {
  background: rgba(78,205,196,.1); border: 1px solid rgba(78,205,196,.4);
  color: var(--teal); font-family: inherit; font-size: 22px; letter-spacing: 1px;
  padding: 11px 34px; border-radius: 4px; cursor: pointer;
}
#btn-confirm-no:hover { background: rgba(78,205,196,.2); }

/* ─── EQUIP BUY CONFIRM MODAL ────────────────────────────────── */
#equip-buy-modal {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,.72);
  /* 9600 — вровень с generic-confirm и выше Профиля (9250): это же окно
     показывает карточку ПРЕМИИ, которую открывают из Профиля. На прежних 2000
     оно пряталось под ним, как и предупреждение о слотах. */
  z-index: 9600;
}
#equip-buy-modal.hidden { display: none; }
#ebm-box {
  background: var(--panel);
  border: 1px solid rgba(78,205,196,.5);
  border-radius: 8px;
  max-width: 460px;
  width: 90%;
  overflow: hidden;
  box-shadow: 0 0 40px rgba(78,205,196,.18), 0 8px 32px rgba(0,0,0,.5);
}
#ebm-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 14px 8px;
  background: rgba(78,205,196,.07);
  border-bottom: 1px solid rgba(78,205,196,.2);
}
#ebm-type-badge {
  font-size: 11px;
  font-weight: bold;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #4ecdc4;
}
#ebm-close {
  background: none; border: none; color: var(--dim);
  cursor: pointer; font-size: 15px; line-height: 1; padding: 2px 4px;
}
#ebm-close:hover { color: var(--text); }
#ebm-name-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 14px 16px 6px;
  gap: 10px;
}
#ebm-name {
  font-size: 17px;
  font-weight: bold;
  color: var(--text);
  letter-spacing: 0.8px;
}
#ebm-price-badge {
  font-size: 13px;
  color: #f0d060;
  background: rgba(240,208,96,.1);
  border: 1px solid rgba(240,208,96,.3);
  border-radius: 4px;
  padding: 2px 10px;
  white-space: nowrap;
}
#ebm-desc {
  padding: 4px 16px 20px;
  font-size: 14px;
  color: var(--text);
  line-height: 1.75;
}
#ebm-note {
  margin: 0 16px 10px;
  padding: 7px 10px;
  font-size: 12px;
  color: #ffaaaa;
  background: rgba(231,76,60,.1);
  border: 1px solid rgba(231,76,60,.3);
  border-radius: 4px;
  line-height: 1.5;
}
#ebm-footer {
  display: flex;
  gap: 10px;
  padding: 12px 16px;
  border-top: 1px solid var(--border);
  background: rgba(0,0,0,.18);
}
#ebm-cancel {
  flex: 1;
  padding: 9px;
  background: none;
  border: 1px solid var(--border);
  color: var(--dim);
  border-radius: 4px;
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
  letter-spacing: 0.8px;
}
#ebm-cancel:hover { border-color: var(--dim); color: var(--text); }
#ebm-confirm {
  flex: 1.5;
  padding: 9px;
  background: rgba(78,205,196,.12);
  border: 1px solid rgba(78,205,196,.5);
  color: var(--teal);
  border-radius: 4px;
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
  letter-spacing: 0.8px;
  font-weight: bold;
}
#ebm-confirm:hover { background: rgba(78,205,196,.22); border-color: var(--teal); }

#btn-shop-continue {
  display: block;
  width: 100%;
  background: var(--teal);
  color: var(--bg);
  border: none;
  padding: 15px;
  font-family: 'Courier New', monospace;
  font-size: 20px;
  letter-spacing: 3px;
  border-radius: 5px;
  cursor: pointer;
  font-weight: bold;
  transition: opacity .15s;
}
#btn-shop-continue:hover { opacity: .85; }

/* #162: подвал Организаций — Атлас / Профиль / следующий слой в одном ряду.
   Главная кнопка (переход дальше) шире боковых и сохраняет прежний вид:
   ширину ей задаёт flex, а не width:100%, поэтому правило выше не трогаем. */
/* Три равные колонки: «Атлас», «Профиль» и переход в слой одной ширины —
   grid держит её независимо от длины подписи (у слоя она ещё и меняется). */
#shop-footer { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; align-items: stretch; }
#shop-footer #btn-shop-continue { width: auto; }
.shop-footer-side {
  background: rgba(78,205,196,.08);
  color: var(--teal);
  border: 1px solid var(--teal);
  padding: 15px 20px;
  font-family: 'Courier New', monospace;
  font-size: 17px;
  letter-spacing: 2px;
  border-radius: 5px;
  cursor: pointer;
  font-weight: bold;
  transition: background .15s;
}
.shop-footer-side:hover { background: rgba(78,205,196,.2); }
/* Пока висит предупреждение о возврате в Эфир (#140), главная кнопка прячется из
   JS — боковые обязаны уйти вместе с ней, иначе подвал остаётся с двумя кнопками
   и дырой посередине. #shop-confirm стоит в разметке перед #shop-footer, поэтому
   хватает соседского комбинатора: трогать четыре места в JS не нужно. */
#shop-confirm:not(.hidden) ~ #shop-footer .shop-footer-side { display: none; }

/* ─── MINI SHAPE GRID ────────────────────────────── */
.mini-shape {
  display: grid;
  grid-template-columns: repeat(5, 10px);
  grid-template-rows: repeat(5, 10px);
  gap: 1px;
}
.ms-cell { width: 10px; height: 10px; border-radius: 1px; background: transparent; }
.ms-cell.seg-green  { background: rgba(46,204,113,.7); }
.ms-cell.seg-yellow { background: rgba(243,156,18,.7); }
.ms-cell.seg-red    { background: rgba(231,76,60,.7); }
.ms-cell.seg-blue   { background: rgba(59,130,246,.7); }
.ms-cell.seg-mem    { background: var(--gold); }

/* ─── RED EPHEMERS ───────────────────────────────── */
.open-red   { background:rgba(231,76,60,.12); border:1px solid rgba(231,76,60,.3); color:rgba(231,76,60,.5); }
.scanned-red { background:rgba(231,76,60,.25); border:1px solid rgba(231,76,60,.6); color:var(--red); box-shadow:0 0 10px rgba(231,76,60,.4); }
.eph-card.red-eph  { border-color: rgba(231,76,60,.4); }
.eph-icon.red-icon { background: rgba(231,76,60,.2); color: var(--red); }

/* ─── BLUE EPHEMERS ──────────────────────────────── */
.open-blue   { background:rgba(59,130,246,.12); border:1px solid rgba(59,130,246,.3); color:rgba(59,130,246,.5); }
.scanned-blue { background:rgba(59,130,246,.25); border:1px solid rgba(59,130,246,.6); color:#3b82f6; box-shadow:0 0 10px rgba(59,130,246,.4); }
.eph-card.blue-eph  { border-color: rgba(59,130,246,.4); }
.eph-icon.blue-icon { background: rgba(59,130,246,.2); color: #3b82f6; }

/* ─── PURPLE EPHEMERS (Варп / Проклятые) ─────────── */
.open-purple   { background:rgba(155,89,182,.12); border:1px solid rgba(155,89,182,.3); color:rgba(155,89,182,.5); }
.scanned-purple { background:rgba(155,89,182,.25); border:1px solid rgba(155,89,182,.6); color:var(--purple); box-shadow:0 0 10px rgba(155,89,182,.4); }
.eph-card.purple-eph  { border-color: rgba(155,89,182,.4); }
.eph-icon.purple-icon { background: rgba(155,89,182,.2); color: var(--purple); }
.ms-cell.seg-purple   { background: rgba(155,89,182,.7); }

/* Combo-лампочки при инверсии */
.combo-lamp.invert { background: var(--purple) !important; box-shadow: 0 0 6px rgba(155,89,182,.8) !important; }

/* ─── M-02 ВОЛНА — wave animation ───────────────────── */
@keyframes wave-flash {
  0%   { background: rgba(78,205,196,.85); box-shadow: 0 0 12px rgba(78,205,196,.9); }
  60%  { background: rgba(78,205,196,.25); }
  100% { background: inherit; box-shadow: none; }
}
.cell-wave-anim {
  animation: wave-flash 0.55s ease-out both;
  animation-delay: calc(var(--wave-col, 0) * 65ms);
}

/* ─── M-04 УСИЛЕНИЕ — Amplify active state ──────────── */
@keyframes amplify-shimmer {
  0%   { box-shadow: 0 0 6px 1px rgba(231,76,60,.4), inset 0 0 8px rgba(231,76,60,.1); border-color: rgba(231,76,60,.7); }
  50%  { box-shadow: 0 0 14px 3px rgba(231,76,60,.8), inset 0 0 14px rgba(231,76,60,.25); border-color: #e74c3c; }
  100% { box-shadow: 0 0 6px 1px rgba(231,76,60,.4), inset 0 0 8px rgba(231,76,60,.1); border-color: rgba(231,76,60,.7); }
}
.card-slot.amplify-active {
  animation: amplify-shimmer 0.9s ease-in-out infinite;
  border-color: rgba(231,76,60,.7) !important;
}
.amplify-badge {
  position: absolute;
  top: 4px; right: 5px;
  font-size: 11px;
  color: #ff7070;
  font-weight: bold;
  text-shadow: 0 0 6px rgba(231,76,60,.9);
  pointer-events: none;
}

/* ─── M-06 ЗАЩИТА — protection bubble on HP ─────────── */
.heart.protection-bubble {
  font-size: 20px;
  margin-left: 2px;
  animation: bubble-pulse 1.4s ease-in-out infinite;
  cursor: default;
}
@keyframes bubble-pulse {
  0%,100% { opacity: 0.7; transform: scale(1); }
  50%      { opacity: 1;   transform: scale(1.15); }
}

/* ─── WIP equipment badge ───────────────────────────── */
.equip-wip-badge {
  display: inline-block;
  margin-left: 8px;
  background: rgba(231,76,60,.15);
  border: 1px solid var(--red);
  color: var(--red);
  font-size: 10px;
  letter-spacing: 1px;
  padding: 1px 5px;
  border-radius: 2px;
  vertical-align: middle;
}
.equip-wip { opacity: 0.55; }
.equip-wip .btn-equip-buy { cursor: not-allowed; }

/* ─── Кнопка Варп (в keys-bar) ──────────────────────── */
#btn-warp {
  background: rgba(155,89,182,.15);
  border: 1px solid var(--purple);
  color: var(--purple);
  padding: 4px 12px;
  cursor: pointer;
  font-family: 'Courier New', monospace;
  font-size: 14px;
  border-radius: 3px;
  margin-left: 8px;
}
#btn-warp:hover { background: rgba(155,89,182,.3); }
#btn-warp.hidden { display: none; }

/* Варп-эссенция в res-bar */
#res-warp { transition: opacity 0.2s; }
#res-warp.hidden { display: none; }

/* ─── HINT TOGGLE + ARCHIVE BTN (res-bar) ──────────── */
.hint-toggle-wrap {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  color: var(--dim);
  cursor: pointer;
  white-space: nowrap;
  user-select: none;
}
.hint-toggle-wrap input[type=checkbox] {
  cursor: pointer;
  accent-color: var(--teal);
  width: 14px; height: 14px;
}
#btn-archive {
  background: rgba(78,205,196,.08);
  border: 1px solid rgba(78,205,196,.55);
  color: var(--teal);
  cursor: pointer;
  font-size: 13px;
  font-weight: bold;
  letter-spacing: 1.5px;
  padding: 4px 10px;
  border-radius: 4px;
  line-height: 1.4;
  font-family: 'Courier New', monospace;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.btn-archive-icon { font-size: 16px; }
.btn-archive-label { font-size: 12px; }
#btn-help {
  background: rgba(160,180,200,.08);
  border: 1px solid rgba(160,180,200,.45);
  color: var(--text);
  cursor: pointer;
  font-size: 14px;
  font-weight: bold;
  padding: 4px 8px;
  border-radius: 4px;
  font-family: 'Courier New', monospace;
  line-height: 1;
}
#btn-archive:hover {
  background: rgba(78,205,196,.18);
  border-color: var(--teal);
  color: #b6f1eb;
}
/* Кнопка ⚙ в шапке — тот же язык, что у Архива, но иконка без подписи. */
#btn-settings {
  background: rgba(78,205,196,.08);
  border: 1px solid rgba(78,205,196,.45);
  color: var(--teal);
  cursor: pointer;
  font-size: 16px;
  padding: 4px 9px;
  border-radius: 4px;
  line-height: 1.4;
  font-family: 'Courier New', monospace;
}
#btn-settings:hover {
  background: rgba(78,205,196,.18);
  border-color: var(--teal);
  color: #b6f1eb;
}

/* ─── НАСТРОЙКИ (малое меню) ─────────────────────────────────────
   z-index 9300: выше Атласа (9200), ниже профилей (9500) и generic-confirm
   (9600) — подтверждение выхода обязано лечь поверх этого окна. */
#settings-overlay {
  position: fixed; inset: 0;
  background: rgba(3,7,16,.86);
  display: flex; align-items: center; justify-content: center;
  z-index: 9300;
  padding: 20px;
}
#settings-overlay.hidden { display: none; }
#settings-box {
  background: var(--panel);
  border: 1px solid var(--teal);
  border-radius: 10px;
  width: 360px; max-width: 100%;
  padding: 20px 22px;
  box-shadow: 0 0 50px rgba(78,205,196,.2);
  display: flex; flex-direction: column; gap: 18px;
}
#settings-header {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 10px;
}
#settings-title { font-size: 18px; letter-spacing: 3px; color: var(--teal); }
#settings-close {
  background: none; border: none; color: var(--teal);
  font-size: 18px; cursor: pointer; line-height: 1;
}
.settings-row { display: flex; flex-direction: column; gap: 7px; }
.settings-row-top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.settings-label { font-size: 13px; letter-spacing: 1px; color: var(--text); }
.settings-val { font-size: 13px; color: var(--teal); font-variant-numeric: tabular-nums; }
/* Ползунок: appearance:none обязателен — иначе Chrome/Safari рисуют системный
   светлый трек, который в тёмной панели читается как чужеродная белая полоса. */
.settings-range {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 6px; margin: 0;
  background: rgba(78,205,196,.18);
  border: 1px solid var(--border);
  border-radius: 3px;
  cursor: pointer;
}
.settings-range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--teal); border: none; cursor: pointer;
  box-shadow: 0 0 8px rgba(78,205,196,.5);
}
.settings-range::-moz-range-thumb {
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--teal); border: none; cursor: pointer;
}
#btn-settings-quit {
  font-family: 'Courier New', monospace;
  font-size: 14px; letter-spacing: 1.5px; font-weight: bold;
  color: var(--red);
  background: rgba(231,76,60,.1);
  border: 1px solid rgba(231,76,60,.55);
  border-radius: 5px;
  padding: 11px;
  cursor: pointer;
}
#btn-settings-quit:hover { background: rgba(231,76,60,.2); border-color: var(--red); }
/* #181: служебная кнопка в «Настройках» («Показывать скрытые сообщения»).
   Спокойный бирюзовый, а не красный «Завершить игру»: действие безобидное и
   обратимое, и оно не должно выглядеть тревожнее выхода из игры. */
.settings-plain-btn {
  font-family: 'Courier New', monospace;
  font-size: 12px; letter-spacing: 1px;
  color: var(--teal);
  background: rgba(78,205,196,.08);
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 10px;
  cursor: pointer;
  text-align: center;
}
.settings-plain-btn:hover { background: rgba(78,205,196,.18); border-color: var(--teal); }
/* Галочка-тумблер в «Настройках» (АР). Метка кликабельна целиком — в 18px
   квадратик пальцем на телефоне не попасть. */
.settings-check-row {
  display: flex; align-items: center; gap: 10px;
  cursor: pointer; user-select: none;
}
.settings-check-row input[type=checkbox] {
  width: 18px; height: 18px;
  accent-color: var(--teal);
  cursor: pointer;
  flex: 0 0 auto;
}

/* Перенос прогресса: служебный блок, отделён чертой и приглушён — он не должен
   спорить за внимание с громкостью, ради которой окно открывают обычно.
   Две кнопки в ряд, на узком экране переносятся (flex-wrap). */
.settings-transfer {
  border-top: 1px solid var(--border);
  padding-top: 14px;
}
.settings-transfer-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.settings-transfer-btns button {
  flex: 1 1 120px;
  font-family: 'Courier New', monospace;
  font-size: 12px; letter-spacing: 1px;
  color: var(--teal);
  background: rgba(78,205,196,.08);
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 9px 8px;
  cursor: pointer;
}
.settings-transfer-btns button:hover {
  background: rgba(78,205,196,.18);
  border-color: var(--teal);
}
.settings-hint {
  font-size: 11px; line-height: 1.45;
  color: var(--dim, #7c8a99);
  letter-spacing: .3px;
}
/* Пояснение под галочкой (#175): выровнено по её тексту, а не по краю окна —
   иначе читается как отдельный абзац, а не как расшифровка настройки. */
.settings-hint-under { margin: -4px 0 2px 28px; }

/* ─── АР: анимация получения ресурсов ────────────────────────────
   Правый нижний угол ИГРОВОГО ОКНА, а не экрана: слой ложится ВНУТРЬ правого
   нижнего угла ЖУРНАЛА (см. positionResAnimLayer в game.js), поэтому right/top
   здесь — лишь запасные значения на случай, если якорь не найден.
   В слое всегда ровно один значок: когда монеты и ОИ приходят разом, второй
   ждёт очереди и выходит на то же место (showNextResourceAnim).
   position:fixed сохранён намеренно: монета за продажу на Чёрном рынке обязана
   быть видна поверх окна магазина, а absolute внутри #app ушёл бы под него.
   z-index 9400 — поверх Атласа (9200) и «Настроек» (9300), но ниже профилей
   (9500) и generic-confirm (9600): подтверждения обязаны лечь сверху. Выше
   «Настроек» специально — включил галочку и тут же увидел образец.
   pointer-events:none — слой ничего не перехватывает, игрок продолжает
   кликать по сетке, пока монета крутится. */
#res-anim-layer {
  position: fixed;
  right: 18px; top: 18px;
  z-index: 9400;
  pointer-events: none;
  display: flex; align-items: center; justify-content: center;
}
/* Диаметр приходит из JS (--ar-size ≈ две клетки сетки), длительность —
   тоже (--ar-dur: деньги 3 с, ОИ 1,5 с). */
.res-anim {
  width: var(--ar-size, 92px); height: var(--ar-size, 92px);
  perspective: 420px;
  animation: ar-inout var(--ar-dur, 3000ms) ease-in-out forwards;
}
.res-anim-face {
  width: 100%; height: 100%;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  animation: ar-spin 950ms linear infinite;
}
.res-anim.money .res-anim-face {
  background: radial-gradient(circle at 34% 28%, #fff6cf 0%, #f0d060 45%, #a9821a 100%);
  border: 2px solid #7d600f;
  box-shadow: 0 0 26px rgba(240,208,96,.55);
  color: #6b5210;
  font-family: 'Courier New', monospace;
  font-weight: bold;
  font-size: calc(var(--ar-size, 92px) * .42);
  line-height: 1;
}
.res-anim.oi .res-anim-face {
  background: radial-gradient(circle at 34% 28%, #79d8ff 0%, #2b7fd4 48%, #123a6b 100%);
  border: 2px solid #0d2a4d;
  box-shadow: 0 0 26px rgba(60,150,230,.55);
}
.res-anim.oi svg { width: 62%; height: 62%; display: block; }

@keyframes ar-spin {
  from { transform: rotateY(0deg); }
  to   { transform: rotateY(360deg); }
}
/* Появление снизу и уход вверх: начисление читается как «прилетело в копилку». */
@keyframes ar-inout {
  0%   { opacity: 0; transform: translateY(16px) scale(.7); }
  12%  { opacity: 1; transform: translateY(0)    scale(1); }
  82%  { opacity: 1; transform: translateY(0)    scale(1); }
  100% { opacity: 0; transform: translateY(-12px) scale(.9); }
}

/* Стили видимого чекбокса тест-режима удалены вместе с самим чекбоксом —
   режим включается только читом (10 нажатий по Чёрному рынку). */

/* ─── HINT MODAL ────────────────────────────────────── */
/* #166: z-index 9350 — выше Атласа (9200), Профиля (9250) и «Настроек» (9300).
   Было 300: сообщение «АТЛАС ЭФЕМЕРОВ» открывалось ПОД самим Атласом, и игрок
   видел его только после того, как Атлас закрывал — то есть уже не понимая,
   к чему оно относится. Ниже остаются res-anim (9400), экран профилей (9500)
   и generic-confirm (9600) — подтверждения обязаны перекрывать подсказку. */
#hint-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,5,12,.78);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9350;
}
.hint-box {
  width: 700px;
  max-width: 95vw;
  border-radius: 4px;
  font-family: 'Courier New', monospace;
  position: relative;
  overflow: hidden;
}
.hint-header {
  padding: 14px 22px 12px;
  border-bottom: 1px solid;
}
.hint-header-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  letter-spacing: 1.5px;
  margin-bottom: 8px;
  text-transform: uppercase;
}
#hint-label {
  font-size: 18px;
  font-weight: bold;
  letter-spacing: 2px;
  text-transform: uppercase;
}
.hint-body {
  padding: 22px 22px 18px;
  font-size: 20px;
  line-height: 1.7;
  min-height: 80px;
}
.hint-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 22px;
  border-top: 1px solid;
  font-size: 16px;
  gap: 12px;
  flex-wrap: wrap;
}
.hint-check {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  flex-shrink: 1;
  min-width: 0;
}
.hint-check input { cursor: pointer; accent-color: var(--teal); width: 16px; height: 16px; }
#hint-close {
  background: none;
  border: 1px solid;
  padding: 7px 24px;
  cursor: pointer;
  font-family: 'Courier New', monospace;
  font-size: 20px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  white-space: nowrap;
}
/* normal (teal) */
.hint-normal {
  background: #070f1a;
  border: 1px solid var(--teal);
  color: var(--text);
}
.hint-normal .hint-header         { border-color: rgba(78,205,196,.4); }
.hint-normal .hint-header-top     { color: rgba(78,205,196,.55); }
.hint-normal #hint-label          { color: var(--teal); }
.hint-normal #hint-clearance      { color: rgba(78,205,196,.7); }
.hint-normal .hint-footer         { border-color: var(--border); color: var(--dim); }
.hint-normal #hint-close          { border-color: var(--teal); color: var(--teal); }
.hint-normal #hint-close:hover    { background: rgba(78,205,196,.1); }

/* classified (amber) */
.hint-classified {
  background: #100900;
  border: 1px solid #c8960f;
  color: #e0c06a;
}
.hint-classified .hint-header      { border-color: rgba(200,150,15,.45); background: rgba(200,150,15,.05); }
.hint-classified .hint-header-top  { color: rgba(200,150,15,.6); }
.hint-classified #hint-label       { color: #c8960f; }
.hint-classified #hint-clearance   { color: #c8960f; }
.hint-classified .hint-footer      { border-color: rgba(200,150,15,.3); color: rgba(200,150,15,.6); }
.hint-classified #hint-close       { border-color: #c8960f; color: #c8960f; }
.hint-classified #hint-close:hover { background: rgba(200,150,15,.1); }
.hint-classified .hint-check input { accent-color: #c8960f; }
.hint-censor {
  display: inline-block;
  background: #c8960f;
  color: #c8960f;
  border-radius: 2px;
  padding: 1px 3px;
  letter-spacing: 1px;
  user-select: none;
  font-size: 10px;
  vertical-align: middle;
}

/* glitch (boss — red/error) */
.hint-glitch {
  background: #080000;
  border: 1px solid var(--red);
  color: #ff7070;
  animation: hg-flicker 2.5s infinite;
}
.hint-glitch .hint-header      { border-color: rgba(231,76,60,.4); background: rgba(231,76,60,.04); }
.hint-glitch .hint-header-top  { color: rgba(231,76,60,.65); }
.hint-glitch #hint-label       { color: var(--red); letter-spacing: 3px; }
.hint-glitch #hint-clearance   { display: none !important; }
.hint-glitch .hint-footer      { border-color: rgba(231,76,60,.3); color: rgba(231,76,60,.6); }
.hint-glitch #hint-close       { border-color: var(--red); color: var(--red); }
.hint-glitch #hint-close:hover { background: rgba(231,76,60,.1); }
.hint-glitch .hint-check input { accent-color: var(--red); }
/* scanline overlay */
.hint-glitch::after {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 3px,
    rgba(0,0,0,.12) 3px,
    rgba(0,0,0,.12) 4px
  );
  pointer-events: none;
}
@keyframes hg-flicker {
  0%,89%,91%,93%,100% { border-color: var(--red); }
  90%,92%             { border-color: transparent; }
}
.glitch-line { display: inline; }

/* ─── ARCHIVE MODAL ─────────────────────────────────── */
#archive-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,4,12,.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 310;
}
#archive-box {
  width: 620px;
  max-width: 94vw;
  max-height: 80vh;
  background: #060d18;
  border: 1px solid var(--border);
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  font-family: 'Courier New', monospace;
}
#archive-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 18px;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
  letter-spacing: 2px;
  color: var(--teal);
  text-transform: uppercase;
  flex-shrink: 0;
}
#archive-close {
  background: none;
  border: none;
  color: var(--dim);
  cursor: pointer;
  font-size: 20px;
  line-height: 1;
  padding: 0 2px;
}
#archive-close:hover { color: var(--text); }
#archive-list {
  overflow-y: auto;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.archive-item {
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 10px 14px;
}
.archive-item-hdr {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}
.archive-item-title {
  font-size: 14px;
  letter-spacing: 1.5px;
  color: var(--teal);
  text-transform: uppercase;
}
.archive-item-ud {
  font-size: 12px;
  color: var(--dim);
}
.archive-ud-err { color: var(--red) !important; }
.archive-item-body {
  font-size: 15px;
  line-height: 1.6;
  color: var(--text);
}
.archive-item.arc-locked {
  opacity: .35;
  border-style: dashed;
}
.archive-item.arc-locked .archive-item-title { color: var(--dim); }
.archive-item-locked-text { font-style: italic; color: var(--dim); }

/* ─── ARCHIVE TABS ─────────────────────────────────── */
#archive-tabs {
  display: flex;
  gap: 4px;
  padding: 8px 14px 0;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.archive-tab {
  background: rgba(78,205,196,.04);
  border: 1px solid rgba(78,205,196,.25);
  border-bottom: none;
  color: var(--dim);
  padding: 8px 14px;
  font-family: 'Courier New', monospace;
  font-size: 12px;
  letter-spacing: 1.5px;
  cursor: pointer;
  border-radius: 4px 4px 0 0;
  margin-bottom: -1px;
  transition: background .15s, color .15s;
}
.archive-tab:hover { color: var(--teal); background: rgba(78,205,196,.08); }
.archive-tab.active {
  background: #060d18;
  color: var(--teal);
  border-color: rgba(78,205,196,.55);
  border-bottom: 1px solid #060d18;
}

/* ─── ARCHIVE: HELP TAB ─────────────────────────────── */
.help-section { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.help-section-title {
  font-size: 13px;
  letter-spacing: 2.5px;
  color: var(--teal);
  text-transform: uppercase;
  border-bottom: 1px solid rgba(78,205,196,.35);
  padding-bottom: 4px;
  margin-bottom: 2px;
}
.help-intro {
  font-size: 14px;
  color: var(--text);
  line-height: 1.6;
  padding: 10px 14px;
  background: rgba(78,205,196,.06);
  border: 1px solid rgba(78,205,196,.3);
  border-radius: 4px;
}
.help-card {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 10px;
  padding: 10px 12px;
  background: rgba(255,255,255,.025);
  border: 1px solid var(--border);
  border-radius: 4px;
  align-items: center;
}
.help-card-locator { border-color: rgba(78,205,196,.5); }
.help-card-echo    { border-color: rgba(240,208,96,.5); }
.help-card-art {
  width: 72px; height: 72px;
  border-radius: 5px;
  background: #050d18;
  object-fit: contain;
}
.help-card-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.help-card-title {
  font-size: 16px;
  letter-spacing: 2px;
  font-weight: bold;
}
.help-card-locator .help-card-title { color: var(--teal); }
.help-card-echo    .help-card-title { color: var(--gold); }
.help-card-cost { font-size: 13px; color: var(--text); opacity: .85; }
.help-card-text { font-size: 13px; line-height: 1.55; color: var(--text); }
.help-card-text b { color: #ffd870; }
.help-row {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 10px;
  padding: 8px 10px;
  background: rgba(255,255,255,.02);
  border: 1px solid rgba(78,205,196,.18);
  border-radius: 4px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text);
}
.help-row b { color: #ffd870; }
.help-bullet {
  display: flex; align-items: center; justify-content: center;
  font-size: 20px;
  color: var(--teal);
  line-height: 1;
}
.help-bullet-num {
  font-family: 'Courier New', monospace;
  font-weight: bold;
  border: 1px solid var(--teal);
  border-radius: 3px;
  background: #0d1b2a;
  font-size: 16px;
  width: 26px; height: 26px;
}
.help-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text);
}
.help-list li {
  padding: 6px 10px 6px 22px;
  background: rgba(255,255,255,.02);
  border: 1px solid var(--border);
  border-radius: 3px;
  position: relative;
}
.help-list li::before {
  content: '◆';
  position: absolute;
  left: 8px; top: 6px;
  color: var(--teal);
}

/* ─── MEMBRANE ENTRIES IN ARCHIVE ───────────────────── */
.archive-item.arc-membrane {
  border-color: rgba(78,205,196,.5);
}
.archive-item.arc-summary {
  border-color: rgba(240,208,96,.4);
  background: rgba(240,208,96,.04);
}
/* #178: карточка цвета Эфемеров в Архиве. Рамку не красим в цвет Эфемера —
   заголовок уже несёт его, а цветная рамка на пяти карточках подряд
   превращает список в радугу и мешает читать текст. */
.archive-item.arc-ephemer {
  border-color: rgba(78,205,196,.5);
}
.eph-color-effects {
  font-size: 13px; line-height: 1.5;
  white-space: normal;
}
/* Строка мембраны. Пока это заглушка «?????» — блок намеренно оформлен как
   готовая строка данных, а не как «пусто»: игрок должен видеть, что сведения
   существуют и их предстоит добыть. */
.eph-membrane-slot {
  margin-top: 6px;
  font-size: 13px;
  padding-left: 10px;
  border-left: 2px solid rgba(240,208,96,.35);
}
.eph-membrane-label { color: var(--dim); letter-spacing: .5px; }
.eph-membrane-unknown { color: #f0d060; letter-spacing: 3px; font-weight: bold; }
/* #188: раскрытая мембрана. Рамка ярче, чем у «?????», — по ней видно, где
   знание уже есть, не читая сам текст. */
.eph-membrane-known { border-left-color: rgba(240,208,96,.8); }
.eph-membrane-name { color: #f0d060; font-weight: bold; }
.eph-membrane-name .mem-ic { vertical-align: -2px; }
.eph-membrane-name .mem-ic svg { width: 15px; height: 15px; }
.eph-membrane-effect { margin-top: 3px; line-height: 1.45; }
.mem-symbol-big {
  font-size: 17px;
  color: #f0d060;
  display: inline-block;
  min-width: 18px;
  text-align: center;
}
.mem-code {
  font-size: 11px;
  color: var(--dim);
  letter-spacing: 1px;
}
.mem-summary-line {
  font-size: 13px;
  margin-bottom: 6px;
}
.mem-summary-row {
  margin: 3px 0;
  font-size: 13px;
}
.mem-summary-color {
  display: inline-block;
  min-width: 100px;
  font-weight: bold;
  letter-spacing: 1px;
}
.mem-summary-chip {
  display: inline-block;
  background: rgba(78,205,196,.08);
  border: 1px solid rgba(78,205,196,.25);
  padding: 1px 7px;
  border-radius: 3px;
  font-size: 12px;
  margin-right: 4px;
}
.mem-summary-chip-hidden {
  background: rgba(255,255,255,.04);
  border: 1px dashed rgba(160,200,208,.35);
  color: var(--dim);
  letter-spacing: 2px;
  font-weight: bold;
}
.mem-colors-line {
  margin: 8px 0;
  font-size: 14px;
  color: var(--text);
  letter-spacing: 1px;
}
.mem-colors-line .mem-colors-label {
  color: #ffffff;
  font-weight: bold;
}
.mem-colors-line.mem-colors-none { font-style: italic; color: var(--dim); }
.mem-color-chip {
  display: inline-block;
  border: 1px solid currentColor;
  padding: 2px 8px;
  border-radius: 3px;
  margin-left: 4px;
  font-size: 13px;
  font-weight: bold;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.mem-lore {
  margin-top: 8px;
  color: #a0c8d0;
  font-style: italic;
  font-size: 13px;
  line-height: 1.5;
}
.mem-narrative {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px dashed rgba(78,205,196,.2);
  font-size: 13px;
}

/* #187: подпись «Эффект:» перед самим описанием. Приглушена и разрежена —
   она называет строку, а читать нужно то, что после неё. */
.mem-effect-label {
  display: block;
  font-size: 12px;
  letter-spacing: 2px;
  color: var(--dim, #7c8a99);
  font-weight: normal;
  margin-bottom: 4px;
  text-transform: uppercase;
}
/* #151: эффект мембраны — первым и крупно. Игрок должен сразу понять, что
   произошло; лор и тонкости идут ниже обычным кеглем. */
.mem-effect-lead {
  font-size: 18px;
  line-height: 1.45;
  color: var(--gold);
  font-weight: bold;
  margin: 0 0 12px;
  padding: 10px 12px;
  background: rgba(240,208,96,.07);
  border-left: 3px solid var(--gold);
  border-radius: 0 4px 4px 0;
}

/* ─── MEMBRANE DETAILS BLOCK ────────────────────────── */
.mem-details {
  margin-top: 10px;
  padding: 8px 10px;
  background: rgba(78,205,196,.05);
  border-left: 2px solid rgba(78,205,196,.4);
  border-radius: 0 3px 3px 0;
}
.mem-details-row {
  margin: 4px 0;
  font-size: 13px;
  line-height: 1.5;
}
.mem-details-key {
  color: #4ecdc4;
  font-weight: bold;
  letter-spacing: 0.5px;
}
.mem-details-val { color: var(--text); opacity: .9; }

/* ─── ВАРП на overlay поражения ─────────────────────── */
#btn-overlay-warp {
  display: block;
  width: 100%;
  background: rgba(155,89,182,.18);
  border: 1px solid var(--purple);
  color: var(--purple);
  padding: 12px;
  font-family: 'Courier New', monospace;
  font-size: 18px;
  letter-spacing: 2px;
  border-radius: 5px;
  cursor: pointer;
  margin-bottom: 8px;
  transition: background .15s;
}
#btn-overlay-warp:hover { background: rgba(155,89,182,.35); }
#btn-overlay-warp.hidden { display: none; }

/* Второстепенная кнопка на экране гибели: уйти к выбору исследователя.
   Намеренно тише «НОВОГО ЗАБЕГА» — основной сценарий всё-таки играть дальше. */
#btn-overlay-exit {
  display: block;
  margin: 10px auto 0;
  background: none;
  border: 1px solid rgba(120,150,170,.5);
  color: rgba(160,190,205,.85);
  padding: 10px 32px;
  font-family: 'Courier New', monospace;
  font-size: 15px;
  letter-spacing: 2px;
  border-radius: 4px;
  cursor: pointer;
  transition: border-color .15s, color .15s;
}
#btn-overlay-exit:hover { border-color: rgba(180,210,225,.9); color: #d6e8f0; }
#btn-overlay-exit.hidden { display: none; }

/* ─── РАСШИФРОВКА эфемера ─────────────────────────────── */
#decipher-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,4,12,.82);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 320;
}
#decipher-box {
  width: 640px;
  max-width: 95vw;
  background: #06100a;
  border: 1px solid var(--teal);
  border-radius: 4px;
  font-family: 'Courier New', monospace;
  padding: 24px 28px;
}
.decipher-header {
  font-size: 12px;
  letter-spacing: 2px;
  color: rgba(78,205,196,.55);
  text-transform: uppercase;
  margin-bottom: 16px;
}
#decipher-body {
  font-size: 18px;
  line-height: 1.7;
  color: var(--text);
  margin-bottom: 24px;
}
.decipher-footer {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
}
#btn-decipher-skip {
  background: none;
  border: 1px solid var(--border);
  color: var(--dim);
  padding: 8px 22px;
  font-family: 'Courier New', monospace;
  font-size: 19px;
  letter-spacing: 1px;
  border-radius: 3px;
  cursor: pointer;
}
#btn-decipher-skip:hover { border-color: var(--dim); color: var(--text); }
#btn-decipher-pay {
  background: rgba(78,205,196,.15);
  border: 1px solid var(--teal);
  color: var(--teal);
  padding: 8px 22px;
  font-family: 'Courier New', monospace;
  font-size: 19px;
  letter-spacing: 1px;
  border-radius: 3px;
  cursor: pointer;
}
#btn-decipher-pay:hover { background: rgba(78,205,196,.3); }
#btn-decipher-pay:disabled { opacity: .4; cursor: not-allowed; }
.decipher-mem-note {
  margin-top: 10px;
  padding: 8px 12px;
  border: 1px solid rgba(240,208,96,.5);
  border-radius: 4px;
  background: rgba(240,208,96,.07);
  color: #f0d060;
  font-size: 15px;
  line-height: 1.5;
}

/* ─── MEMBRANE NARRATIVE MODAL ──────────────────────── */
#mem-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,5,12,.78);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 315;
}
#mem-label { font-size: 16px; font-weight: bold; letter-spacing: 2px; text-transform: uppercase; }
#mem-body   { font-size: 17px; }
#mem-close  { border-color: #c8960f; color: #c8960f; }
#mem-close:hover { background: rgba(200,150,15,.1); }
#mem-close {
  background: none;
  border: 1px solid;
  padding: 7px 24px;
  cursor: pointer;
  font-family: 'Courier New', monospace;
  font-size: 14px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

/* ─── ЭФ. КАРТОЧКА: заблокированный вид (до расшифровки) ─ */
.eph-locked-tile {
  width: 50px;
  height: 50px;
  background-color: #0d1b2a;
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12'><rect x='0' y='0' width='5' height='3' fill='%2314253c'/><rect x='6' y='0' width='6' height='4' fill='%23091420'/><rect x='0' y='4' width='4' height='4' fill='%231a3050'/><rect x='5' y='3' width='4' height='5' fill='%23091420'/><rect x='9' y='5' width='3' height='4' fill='%23172b42'/><rect x='0' y='8' width='3' height='4' fill='%23091420'/><rect x='4' y='8' width='5' height='4' fill='%2314253c'/><rect x='9' y='9' width='3' height='3' fill='%231a3050'/></svg>");
  background-size: 12px 12px;
  border: 1px solid rgba(78,205,196,.25);
  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  color: rgba(78,205,196,.4);
  flex-shrink: 0;
  cursor: help;
}

/* Эмблема текущего прохождения на заглушке. Дешифровка привязана к кампании,
   и символ показывает, чья база данных сейчас в работе. Приглушена, чтобы
   читалась как водяной знак, а не как активная иконка. */
.locked-tile-emblem {
  width: 34px; height: 34px;
  object-fit: contain;
  opacity: .55;
  filter: grayscale(.35);
}

.free-decipher-tile { border-color: rgba(240,208,96,.6) !important; background-color: #1a1400 !important; }
.free-decipher-badge { font-size: 10px; font-weight: bold; color: #f0d060; letter-spacing: .5px; }
/* #105: цена расшифровки прямо на квадрате, скрывающем форму */
.locked-tile-cost {
  font-size: 11px;
  font-weight: 700;
  line-height: 1.05;
  text-align: center;
  color: rgba(78,205,196,.85);
  text-shadow: 0 1px 2px #000;
}

/* ─── Шрифт расходников в слоте (оборудование) ─────── */
.equip-slot .card-name {
  font-size: 10px !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  letter-spacing: 0.3px;
}
.equip-slot .equip-type-badge { font-size: 10px; }

/* ─── ИНВЕРСИЯ: баннер во вкладке СКАНЕР (#122) ────────── */
#inversion-banner, #sp-inversion-banner {
  background: rgba(155, 89, 182, 0.18);
  border: 1px solid #9b59b6;
  border-radius: 4px;
  color: #c77dff;
  font-size: 13px;
  font-weight: bold;
  letter-spacing: 0.5px;
  padding: 5px 10px;
  text-align: center;
  margin: 4px 0;
  animation: inversion-pulse 1.5s ease-in-out infinite;
}
@keyframes inversion-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.65; }
}

/* ─── БАТАРЕЯ: предупреждение при переполнении ─────── */
.battery-warn #bat-label,
.battery-warn #bat-val {
  color: #e74c3c;
}

/* ─── ОНБОРДИНГ: стартовый инструктаж ───────────────── */
#onboard-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.78);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}
#onboard-overlay.hidden { display: none; }
#onboard-box {
  background: #0d1b2a;
  border: 1px solid #4ecdc4;
  border-radius: 8px;
  padding: 28px 32px 24px;
  max-width: 520px;
  width: 90%;
  box-shadow: 0 0 40px rgba(78,205,196,0.2);
}
#onboard-title {
  font-size: 17px;
  font-weight: bold;
  color: #4ecdc4;
  letter-spacing: 2px;
  text-align: center;
  margin-bottom: 20px;
}
#onboard-rules { display: flex; flex-direction: column; gap: 12px; }
.onboard-rule {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 14px;
  color: #a8c0cc;
  line-height: 1.5;
}
.onboard-rule b { color: #e0e8ef; }
.onboard-key {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
  background: #132030;
  border: 1px solid #4ecdc4;
  border-radius: 4px;
  color: #4ecdc4;
  font-size: 14px;
  font-weight: bold;
  flex-shrink: 0;
  font-family: monospace;
}
.onboard-icon {
  min-width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}
#onboard-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 22px;
  gap: 12px;
}
.onboard-skip-label {
  font-size: 13px;
  color: #5a7888;
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}
#btn-onboard-start {
  background: #4ecdc4;
  color: #060b18;
  border: none;
  border-radius: 4px;
  padding: 9px 24px;
  font-size: 14px;
  font-weight: bold;
  letter-spacing: 1.5px;
  cursor: pointer;
  font-family: monospace;
}
#btn-onboard-start:hover { background: #38b2aa; }

/* ─── ПРОДАЖА ОБОРУДОВАНИЯ ───────────────────────────────────────── */
.card-sell-btn {
  position: absolute;
  bottom: 4px;
  right: 4px;
  background: rgba(240,208,96,.12);
  border: 1px solid rgba(240,208,96,.4);
  color: #f0d060;
  font-size: 9px;
  font-family: 'Courier New', monospace;
  padding: 2px 5px;
  border-radius: 3px;
  cursor: pointer;
  line-height: 1.3;
  letter-spacing: 0.3px;
  transition: background .15s;
}
.card-sell-btn:hover { background: rgba(240,208,96,.28); }

/* ─── АКТИВНЫЙ ИНСТРУМЕНТ-ЭКИПИРОВКА ────────────────────────────── */
.equip-pending .card-inner { outline: 1px solid rgba(240,208,96,.5); }

/* ─── ГЛАВНОЕ МЕНЮ ──────────────────────────────────────────────── */
#main-menu-overlay {
  position: fixed; inset: 0;
  background: radial-gradient(circle at 50% 40%, #0a1830 0%, #040a14 80%);
  display: flex; align-items: center; justify-content: center;
  z-index: 9000;
  font-family: 'Courier New', monospace;
}
#main-menu-overlay.hidden { display: none; }
#main-menu-box {
  width: 480px;
  max-width: 92vw;
  padding: 40px 40px 28px;
  background: #051120;
  border: 2px solid rgba(78,205,196,.4);
  border-radius: 12px;
  box-shadow: 0 0 50px rgba(78,205,196,.18);
  text-align: center;
}
#main-menu-title {
  font-size: 42px;
  font-weight: bold;
  letter-spacing: 8px;
  color: #4ecdc4;
  margin-bottom: 6px;
  text-shadow: 0 0 14px rgba(78,205,196,.55);
}
#main-menu-sub {
  font-size: 16px;
  font-weight: bold;
  color: rgba(78,205,196,.65);
  letter-spacing: 4px;
  margin-bottom: 28px;
}
#main-menu-buttons {
  display: flex; flex-direction: column; gap: 12px;
  margin-bottom: 22px;
}
.main-menu-btn {
  background: rgba(78,205,196,.08);
  border: 2px solid rgba(78,205,196,.5);
  color: #4ecdc4;
  font-family: 'Courier New', monospace;
  font-size: 21px;
  font-weight: bold;
  letter-spacing: 3px;
  padding: 16px 20px;
  cursor: pointer;
  border-radius: 5px;
  transition: background .15s, border-color .15s, color .15s;
}
.main-menu-btn:hover:not(:disabled) {
  background: rgba(78,205,196,.18);
  border-color: rgba(78,205,196,.9);
  color: #b6f1eb;
}
.main-menu-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  border-color: rgba(78,205,196,.2);
}
#main-menu-foot {
  font-size: 15px;
  font-weight: bold;
  color: rgba(78,205,196,.45);
  letter-spacing: 3px;
}

/* ─── Профиль в главном меню ─────────────────────────────────────── */
#main-menu-profile {
  margin: 12px 0 14px;
  font-size: 14px;
  color: rgba(78,205,196,.6);
  letter-spacing: 1px;
}
#main-menu-profile-name { color: #4ecdc4; font-weight: bold; }
#btn-menu-profile {
  margin-left: 8px;
  background: none;
  border: none;
  border-bottom: 1px dashed rgba(78,205,196,.5);
  color: rgba(78,205,196,.75);
  font-family: 'Courier New', monospace;
  font-size: 14px;
  padding: 0 1px 1px;
  cursor: pointer;
}
#btn-menu-profile:hover { color: #b6f1eb; border-bottom-color: #b6f1eb; }

/* ─── Вкладка перехвачена другой вкладкой того же профиля ────────── */
#stale-tab-overlay {
  position: fixed; inset: 0;
  background: rgba(4,10,20,.94);
  display: flex; align-items: center; justify-content: center;
  z-index: 9700;
  font-family: 'Courier New', monospace;
  padding: 16px;
}
#stale-tab-overlay.hidden { display: none; }
#stale-tab-box {
  width: 440px; max-width: 92vw;
  padding: 28px;
  background: #051120;
  border: 2px solid rgba(255,214,102,.55);
  border-radius: 12px;
  box-shadow: 0 0 40px rgba(255,214,102,.15);
  text-align: center;
}
#stale-tab-title {
  font-size: 18px; font-weight: bold; letter-spacing: 3px;
  color: #ffd666;
  margin-bottom: 12px;
}
#stale-tab-text {
  font-size: 14px; line-height: 1.6;
  color: rgba(78,205,196,.75);
  margin-bottom: 20px;
}
#btn-stale-tab-reload {
  background: rgba(78,205,196,.08);
  border: 2px solid rgba(78,205,196,.5);
  color: #4ecdc4;
  font-family: 'Courier New', monospace;
  font-size: 15px; font-weight: bold; letter-spacing: 2px;
  padding: 11px 22px;
  border-radius: 5px;
  cursor: pointer;
}
#btn-stale-tab-reload:hover { background: rgba(78,205,196,.18); border-color: rgba(78,205,196,.9); }

/* ─── Экран выбора профиля ───────────────────────────────────────── */
#profile-overlay {
  position: fixed; inset: 0;
  background: radial-gradient(circle at 50% 40%, #0a1830 0%, #040a14 80%);
  display: flex; align-items: center; justify-content: center;
  z-index: 9500;
  font-family: 'Courier New', monospace;
  padding: 16px;
}
#profile-overlay.hidden { display: none; }
#profile-box {
  width: 480px;
  max-width: 92vw;
  max-height: 90vh;
  overflow-y: auto;
  padding: 32px 32px 24px;
  background: #051120;
  border: 2px solid rgba(78,205,196,.4);
  border-radius: 12px;
  box-shadow: 0 0 50px rgba(78,205,196,.18);
  text-align: center;
}
#profile-title {
  font-size: 22px;
  font-weight: bold;
  letter-spacing: 3px;
  color: #4ecdc4;
  text-shadow: 0 0 12px rgba(78,205,196,.45);
}
#profile-sub {
  margin: 8px 0 22px;
  font-size: 13px;
  line-height: 1.5;
  color: rgba(78,205,196,.55);
}
#profile-list { display: flex; flex-direction: column; gap: 10px; }
.profile-item {
  display: flex; align-items: center; gap: 10px;
  background: rgba(78,205,196,.07);
  border: 2px solid rgba(78,205,196,.45);
  border-radius: 5px;
  padding: 12px 14px;
  cursor: pointer;
  text-align: left;
  transition: background .15s, border-color .15s;
  /* Якорь для звёздочки полной версии (#180) — она ложится в угол абсолютом. */
  position: relative;
}
/* #180: полная версия открыта (введён код). Абсолют, а не элемент потока:
   строка профиля — flex, и обычный элемент сдвинул бы крестик удаления и
   отъел ширину у имени, которое на телефоне и так режется многоточием.
   pointer-events:none — клик по звезде обязан выбирать профиль, как по всей
   строке, а не проваливаться в никуда. */
.profile-item-star {
  position: absolute; top: 4px; right: 6px;
  font-size: 15px; line-height: 1;
  color: #ffd666;
  text-shadow: 0 0 8px rgba(255,214,102,.75);
  pointer-events: none;
}
.profile-item:hover { background: rgba(78,205,196,.16); border-color: rgba(78,205,196,.9); }
.profile-item.profile-active { border-color: rgba(255,214,102,.75); }
/* Имя + прогресс + рекорды колонкой. min-width:0 обязателен — без него длинное
   имя распирает flex-строку и выдавливает кнопку удаления за край карточки. */
.profile-item-main {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; gap: 3px;
}
.profile-item-name {
  font-size: 18px; font-weight: bold; letter-spacing: 1px;
  color: #4ecdc4;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Строка автосейва — служебная, самая мелкая и приглушённая в карточке. */
.profile-item-sub {
  font-size: 12px;
  color: rgba(78,205,196,.55);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Рекорд — хвостом к строке уровня, приглушённым золотом: это дополнение
   к уровню, а не третий заголовок. Строк в карточке ровно три. */
.profile-item-records {
  font-size: 13px;
  color: rgba(240,208,96,.75);
  white-space: nowrap;
}
/* Строка 2 — уровень Исследователя. Золото то же, что у «★ ЛИЧНЫЙ РЕКОРД»
   в итогах слоя: один язык для достижений. */
.profile-item-level {
  color: var(--gold);
  font-size: 14px;
  font-weight: normal;
  letter-spacing: .5px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Портрет испытателя: квадрат слева от текста. flex:0 0 auto — картинка не
   сжимается и не растягивается, что бы ни творилось с длиной имени.
   Фон и рамка нужны на случай, если файл не загрузился: остаётся аккуратный
   квадрат, а не рваная иконка «битой картинки». */
.profile-item-ava {
  flex: 0 0 auto;
  width: 56px; height: 56px;
  border-radius: 5px;
  border: 1px solid rgba(78,205,196,.35);
  background: #061726;
  object-fit: cover;
}
.profile-item.profile-active .profile-item-ava { border-color: rgba(255,214,102,.7); }
/* Ярлык «новый» удалён вместе с узлом: строка уровня пишет «Новый
   исследователь» — ярлык был дословным повтором (renderProfileList). */
.profile-item-del {
  background: none; border: none;
  color: rgba(255,107,107,.55);
  font-family: 'Courier New', monospace;
  font-size: 17px; line-height: 1;
  padding: 3px 5px;
  cursor: pointer;
  border-radius: 4px;
}
.profile-item-del:hover { color: #ff6b6b; background: rgba(255,107,107,.12); }
#profile-add-row { margin-top: 18px; display: flex; align-items: center; justify-content: center; gap: 12px; }

/* ─── ИССЛЕДОВАТЕЛИ НА СЕРВЕРЕ ───────────────────────────────────
   Блок отделён чертой от локального списка: это не «ещё профили», а другое
   хранилище — общее для всех устройств. */
#cloud-block {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}
#cloud-block.hidden { display: none; }
#cloud-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 10px; margin-bottom: 8px;
}
#cloud-title {
  font-size: 12px; letter-spacing: 2px; color: var(--teal);
}
#cloud-state {
  font-size: 11px; color: var(--dim, #7c8a99); text-align: right;
}
#cloud-list { display: flex; flex-direction: column; gap: 6px; }
.cloud-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: rgba(78,205,196,.04);
}
.cloud-item.cloud-active { border-color: var(--teal); background: rgba(78,205,196,.12); }
.cloud-item-main { flex: 1 1 auto; min-width: 0; }
.cloud-item-name {
  font-size: 14px; color: var(--fg, #cfe3ee);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cloud-item-sub { font-size: 11px; color: var(--dim, #7c8a99); }
.cloud-item-btn {
  flex: 0 0 auto;
  font-family: 'Courier New', monospace;
  font-size: 12px; letter-spacing: 1px;
  color: var(--teal);
  background: rgba(78,205,196,.08);
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 6px 12px;
  cursor: pointer;
}
.cloud-item-btn:hover { background: rgba(78,205,196,.2); border-color: var(--teal); }
.cloud-empty {
  font-size: 11px; line-height: 1.45;
  color: var(--dim, #7c8a99);
}
#btn-profile-add {
  background: rgba(78,205,196,.08);
  border: 2px dashed rgba(78,205,196,.5);
  color: #4ecdc4;
  font-family: 'Courier New', monospace;
  font-size: 15px; font-weight: bold; letter-spacing: 1px;
  padding: 10px 16px;
  border-radius: 5px;
  cursor: pointer;
}
#btn-profile-add:hover:not(:disabled) { background: rgba(78,205,196,.18); border-color: rgba(78,205,196,.9); }
#btn-profile-add:disabled { opacity: .3; cursor: not-allowed; }
#profile-count { font-size: 13px; color: rgba(78,205,196,.5); }
#profile-name-form { margin-top: 18px; }
#profile-name-form.hidden { display: none; }
#profile-name-label { font-size: 14px; color: rgba(78,205,196,.7); margin-bottom: 8px; }
#profile-name-input {
  width: 100%;
  background: #030a14;
  border: 2px solid rgba(78,205,196,.5);
  border-radius: 5px;
  color: #4ecdc4;
  font-family: 'Courier New', monospace;
  font-size: 18px;
  letter-spacing: 1px;
  padding: 10px 12px;
  text-align: center;
}
#profile-name-input:focus { outline: none; border-color: rgba(78,205,196,.95); }
#profile-name-btns { display: flex; gap: 10px; margin-top: 12px; }
#profile-name-btns button {
  flex: 1;
  background: rgba(78,205,196,.08);
  border: 2px solid rgba(78,205,196,.5);
  color: #4ecdc4;
  font-family: 'Courier New', monospace;
  font-size: 15px; font-weight: bold; letter-spacing: 1px;
  padding: 10px;
  border-radius: 5px;
  cursor: pointer;
}
#profile-name-btns button:hover { background: rgba(78,205,196,.18); border-color: rgba(78,205,196,.9); }
#profile-storage-warn {
  margin-top: 16px;
  font-size: 12px; line-height: 1.4;
  color: #ffd666;
}
#profile-storage-warn.hidden { display: none; }
#main-menu-settings {
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 100%;
}
.menu-settings-row {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text);
  font-size: 14px;
  letter-spacing: 1px;
  cursor: pointer;
  user-select: none;
}
.menu-settings-row input[type=checkbox] {
  width: 18px; height: 18px;
  accent-color: var(--teal);
  cursor: pointer;
}
/* Строка-ссылка «⚙ Настройки (Esc)» под галочкой подсказок. Намеренно тише
   главных кнопок меню: это служебный вход, а не пункт наравне с «Новой игрой». */
.menu-settings-link {
  background: none;
  border: none;
  color: var(--dim);
  font-family: 'Courier New', monospace;
  font-size: 14px;
  letter-spacing: 1px;
  padding: 4px 8px;
  cursor: pointer;
}
.menu-settings-link:hover { color: var(--teal); }

/* Equipment-art toggle: hero background + logo image in main menu */
#main-menu-logo {
  display: none;
  max-width: 100%;
  margin-bottom: 18px;
  border-radius: 4px;
}
[data-equipment-art="on"] #main-menu-overlay {
  background:
    linear-gradient(180deg, rgba(4,10,20,.30) 0%, rgba(4,10,20,.55) 50%, rgba(4,10,20,.85) 100%),
    url("img/branding/hero-menu-desktop.webp") 50% 60%/cover no-repeat,
    radial-gradient(circle at 50% 40%, #0a1830 0%, #040a14 80%);
}
[data-equipment-art="on"] #main-menu-box {
  background: rgba(5, 17, 32, .82);
  backdrop-filter: blur(8px);
}
[data-equipment-art="on"] #main-menu-title { display: none; }
[data-equipment-art="on"] #main-menu-sub { display: none; }
[data-equipment-art="on"] #main-menu-logo { display: block; }

/* ─── ДОСТИЖЕНИЯ ────────────────────────────────────────────────── */
#achievements-overlay {
  position: fixed; inset: 0;
  background: rgba(4,10,20,.85);
  display: flex; align-items: center; justify-content: center;
  z-index: 9100;
  font-family: 'Courier New', monospace;
}
#achievements-overlay.hidden { display: none; }
#achievements-box {
  width: 480px; max-width: 92vw;
  background: #051120;
  border: 2px solid rgba(240,208,96,.45);
  border-radius: 10px;
  padding: 18px 22px 20px;
  box-shadow: 0 0 36px rgba(240,208,96,.18);
}
#achievements-header {
  display: flex; justify-content: space-between; align-items: center;
  border-bottom: 1px solid rgba(240,208,96,.2);
  padding-bottom: 10px;
  margin-bottom: 14px;
  color: #f0d060;
  font-size: 16px;
  letter-spacing: 3px;
}
#achievements-close {
  background: none; border: none; color: #f0d060;
  font-size: 18px; cursor: pointer;
}
#achievements-header-actions { display: flex; align-items: center; gap: 12px; }
#btn-ach-code {
  font-family: 'Courier New', monospace;
  font-size: 12px; letter-spacing: 1px; font-weight: bold;
  color: #f0d060; background: rgba(240,208,96,.08);
  border: 1px solid rgba(240,208,96,.5); border-radius: 5px;
  padding: 4px 12px; cursor: pointer;
}
#btn-ach-code:hover { background: rgba(240,208,96,.18); }
#achievements-list { display: flex; flex-direction: column; gap: 10px; }

/* ─── АТЛАС ЭФЕМЕРОВ ─────────────────────────────────────────────
   Каркас взят с #shop-overlay (бокс 1100px, цветные табы сверху).
   z-index 9200 — выше и Организаций (150), и главного меню (9000), и достижений
   (9100): Атлас открывается из обоих мест и обязан лежать поверх. Ниже экрана
   профилей (9500) и generic-confirm (9600) — сообщения о премиях должны
   перекрывать сам Атлас. */
#atlas-overlay {
  position: fixed; inset: 0;
  background: rgba(3,7,16,.94);
  display: flex; align-items: center; justify-content: center;
  z-index: 9200;
  overflow-y: auto;
  padding: 20px;
}
#atlas-overlay.hidden { display: none; }
#atlas-box {
  background: var(--panel);
  border: 1px solid var(--teal);
  border-radius: 10px;
  width: 1100px; max-width: 100%;
  padding: 24px 28px;
  box-shadow: 0 0 60px rgba(78,205,196,.2);
  max-height: calc(100vh - 40px);
  display: flex; flex-direction: column;
}
#atlas-header {
  display: flex; justify-content: space-between; align-items: center;
  gap: 16px; flex-wrap: wrap;
  border-bottom: 1px solid var(--border);
  padding-bottom: 12px; margin-bottom: 14px;
}
#atlas-title { font-size: 26px; letter-spacing: 4px; color: var(--teal); }
#atlas-header-right { display: flex; align-items: center; gap: 16px; }
#atlas-progress { font-size: 15px; color: var(--dim); letter-spacing: 1px; }
#atlas-oi { font-size: 18px; }
#atlas-close {
  background: none; border: none; color: var(--teal);
  font-size: 20px; cursor: pointer; line-height: 1;
}

#atlas-color-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.atlas-color-tab {
  font-family: 'Courier New', monospace;
  font-size: 12px; letter-spacing: 1px; font-weight: bold;
  color: var(--dim); background: rgba(255,255,255,.03);
  border: 1px solid var(--border); border-radius: 5px;
  padding: 6px 14px; cursor: pointer;
}
.atlas-color-tab:hover { background: rgba(255,255,255,.07); }
.atlas-color-tab.active { color: #0b1a2a; background: var(--teal); border-color: var(--teal); }
/* Активная вкладка окрашивается в свой цвет — так видно, какой раздел открыт. */
.atlas-color-tab[data-color="green"].active  { background: #2ecc71; border-color: #2ecc71; }
.atlas-color-tab[data-color="yellow"].active { background: #f39c12; border-color: #f39c12; }
.atlas-color-tab[data-color="red"].active    { background: #e74c3c; border-color: #e74c3c; }
.atlas-color-tab[data-color="blue"].active   { background: #4ecdc4; border-color: #4ecdc4; }
.atlas-color-tab[data-color="purple"].active { background: #9b59b6; border-color: #9b59b6; }

/* Справка по цвету под вкладками. Цвет левой полосы задаётся из JS по выбранной
   вкладке — так шапка отвечает на переключение так же явно, как сами табы. */
#atlas-color-desc {
  /* pre-line: справка построчная («Локатор: …» / «Эхолуч: …»), переносы значимы. */
  white-space: pre-line;
  font-size: 13px;
  line-height: 1.55;
  color: #a8c4d4;
  background: rgba(255,255,255,.03);
  border: 1px solid var(--border);
  border-left: 3px solid var(--teal);
  border-radius: 5px;
  padding: 9px 12px;
  margin-bottom: 12px;
  flex: none;
}
#atlas-color-desc.hidden { display: none; }

#atlas-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 12px;
  overflow-y: auto;
  padding-right: 4px;
  margin-bottom: 16px;
}
#atlas-empty {
  text-align: center; color: var(--dim); font-size: 16px;
  padding: 40px 20px; line-height: 1.6;
}
#atlas-empty.hidden { display: none; }

.atlas-card {
  background: rgba(255,255,255,.02);
  border: 1px solid var(--border);
  border-radius: 7px;
  padding: 12px;
  display: flex; flex-direction: column; gap: 8px;
  position: relative;
}
.atlas-card-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.atlas-card-id   { font-size: 12px; color: var(--dim); letter-spacing: 1px; }
.atlas-card-name { font-size: 16px; letter-spacing: 1px; font-weight: bold; }
.atlas-card-color { font-size: 12px; color: var(--dim); letter-spacing: 1px; }

/* Силуэт формы. Рисуется программно (SVG) — артов эфемеров в проекте нет.
   Если позже появится img/ephemerals/*.webp, картинка ляжет поверх силуэта. */
/* Высота зоны арта фиксирована: силуэты от 1 до 5 клеток в высоту, и без этого
   строки статистики и кнопки «Расшифровать» разъезжаются по вертикали внутри
   одного ряда сетки (самая высокая форма — 5×16px = 80px). */
.atlas-card-art {
  position: relative; display: flex;
  justify-content: center; align-items: center;
  height: 86px; flex-shrink: 0;
}
.atlas-shape-svg { display: block; }
.atlas-card-photo {
  position: absolute; inset: 0; margin: auto;
  max-width: 100%; max-height: 100%; object-fit: contain;
}

.atlas-card-stats { display: flex; flex-direction: column; gap: 3px; font-size: 13px; color: var(--dim); }
.atlas-stat-row { display: flex; justify-content: space-between; gap: 8px; }
.atlas-stat-val { color: #cfe6f5; }

/* Прогресс-бар этапа: 3 → 5 → 7 полных открытий. Бонусы за этапы ещё не заданы
   заказчиком — бары пока чисто индикативные. */
.atlas-progress-wrap { display: flex; flex-direction: column; gap: 4px; }
.atlas-progress-label { font-size: 11px; color: var(--dim); letter-spacing: 1px; }
.atlas-progress-pips { display: flex; gap: 3px; }
.atlas-pip {
  flex: 1; height: 7px; border-radius: 2px;
  background: rgba(255,255,255,.07);
  border: 1px solid var(--border);
}
.atlas-pip.filled { border-color: transparent; }
.atlas-progress-done { color: var(--gold); font-size: 11px; letter-spacing: 1px; }

/* Действие прижато к низу карточки: блок прогресса на 4-м этапе схлопывается в
   одну строку, и без этого кнопки в ряду вставали на разной высоте. */
.btn-atlas-decipher {
  font-family: 'Courier New', monospace;
  font-size: 13px; letter-spacing: 1px;
  color: var(--teal); background: rgba(78,205,196,.08);
  border: 1px solid var(--teal); border-radius: 5px;
  padding: 7px 10px; cursor: pointer; width: 100%;
  min-height: var(--btn-min-h, 32px);
  margin-top: auto;
}
.btn-atlas-decipher:hover:not(:disabled) { background: rgba(78,205,196,.2); }
.btn-atlas-decipher:disabled { opacity: .4; cursor: default; }
.btn-atlas-decipher.free { color: var(--gold); border-color: var(--gold); background: rgba(240,208,96,.1); }
.atlas-deciphered-mark {
  text-align: center; font-size: 13px; color: var(--green);
  letter-spacing: 1px; padding: 7px 0;
  margin-top: auto;
}

#btn-atlas-continue {
  font-family: 'Courier New', monospace;
  font-size: 17px; letter-spacing: 2px;
  color: #0b1a2a; background: var(--teal);
  border: none; border-radius: 6px;
  padding: 12px; cursor: pointer; width: 100%;
  flex-shrink: 0;
}
#btn-atlas-continue:hover { filter: brightness(1.1); }

/* ═══ ПРОФИЛЬ ИССЛЕДОВАТЕЛЯ (#159–#163) ═══
   z-index 9250 — над Организациями (150) и Атласом (9200), под «Настройками»
   (9300), экраном профилей (9500) и generic-confirm (9600): подтверждение
   продажи обязано перекрывать само окно. */
#pcard-overlay {
  position: fixed; inset: 0;
  background: rgba(3,7,16,.94);
  display: flex; align-items: center; justify-content: center;
  z-index: 9250;
  overflow-y: auto;
  padding: 20px;
}
#pcard-overlay.hidden { display: none; }
#pcard-box {
  background: var(--panel);
  border: 1px solid var(--teal);
  border-radius: 10px;
  width: 1100px; max-width: 100%;
  padding: 24px 28px;
  box-shadow: 0 0 60px rgba(78,205,196,.2);
  max-height: calc(100vh - 40px);
  display: flex; flex-direction: column;
}
#pcard-header {
  display: flex; align-items: center; gap: 14px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 12px; margin-bottom: 14px;
}
#pcard-ava {
  width: 56px; height: 56px; flex-shrink: 0;
  border: 1px solid var(--border); border-radius: 6px;
  background: rgba(78,205,196,.06);
}
#pcard-ident { flex: 1; min-width: 0; }
#pcard-name  { font-size: 24px; letter-spacing: 3px; color: var(--teal); }
#pcard-level { font-size: 14px; letter-spacing: 1px; color: var(--dim); margin-top: 3px; }
#pcard-close {
  background: none; border: none; color: var(--teal);
  font-size: 20px; cursor: pointer; line-height: 1;
}

/* #176: две вертикальные части. Левая — забег (состояние, ресурсы, слоты),
   правая — профиль (уровень, общая статистика).
   Ширину левой задают СЛОТЫ: они рисуются теми же карточками, что в слое, и
   ужимать их нельзя (правило проекта). Поэтому левая колонка = --tool-col-w
   плюс паддинги секции, правая забирает остаток. */
#pcard-body {
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(220px, 1fr);
  align-items: start;
  gap: 14px;
  overflow-y: auto;
  margin-bottom: 14px;
}
#pcard-run  { display: block; min-width: 0; }
#pcard-run-inner { display: flex; flex-direction: column; gap: 14px; }
/* Состояние и ресурсы — рядом, над слотами: вдвоём они занимают ровно ширину
   слотов, и левая часть не вырастает выше нужного. */
.pcard-run-top {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px;
}
#pcard-meta { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
/* Ручка и кнопка ящика — механика смартфона, на десктопе их нет вовсе. */
#pcard-run-handle, #pcard-run-open { display: none; }
.pcard-sec {
  border: 1px solid var(--border);
  border-radius: 6px;
  background: rgba(78,205,196,.04);
  padding: 12px 14px;
}
.pcard-sec-wide { grid-column: 1 / -1; }
.pcard-sec-title {
  font-size: 13px; letter-spacing: 2px; color: var(--teal);
  border-bottom: 1px solid var(--border);
  padding-bottom: 6px; margin-bottom: 8px;
}
.pcard-sec-note { color: var(--dim); letter-spacing: 1px; }
.pcard-rows { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; font-size: 16px; }
.pcard-row-key { color: var(--dim); }
.pcard-row-val { text-align: right; font-weight: bold; }
.pcard-hint { font-size: 12px; color: var(--dim); margin-top: 8px; letter-spacing: .5px; }

/* #170: сетка слотов повторяет #tool-section из слоя — 4 колонки, те же зазоры.
   Сами карточки рисуются классом .card-slot, поэтому высота, арт и кегли берутся
   из общего CSS (в т.ч. мобильных переопределений) и совпадают с игрой один в один.
   max-width равен ширине игровой сетки: иначе в широком окне Профиля слоты
   растянулись бы вдвое против того, что игрок видит в слое. */
#pcard-slots {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: 7px;
  row-gap: 5px;
  /* Ширину задаёт JS (TOOL_COL_W) — ровно столько же, сколько у #center-col
     в слое. Фолбэк 488px = та же формула для сетки 10×10. */
  width: var(--tool-col-w, 488px);
  max-width: 100%;
  /* #176: прижаты влево, а не по центру — слоты относятся к забегу и живут
     в левой части окна. */
  margin: 0;
}
/* #189: премии. Сетка своя, а не #pcard-slots: она стоит в ПРАВОЙ колонке
   Профиля, которая уже левой, и растягивать её под ширину игровой сетки нельзя —
   колонка поедет. Карточки при этом те же .card-slot, только уже. */
#pcard-rewards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: 6px;
  row-gap: 5px;
  margin-top: 4px;
}
#pcard-rewards .card-slot { cursor: pointer; }
/* Метка «ЗАБРАТЬ» стоит у нижней кромки, поэтому подписи внутри карточки жмутся
   плотнее обычного: «Стимулятор» иначе переносится на вторую строку прямо под
   метку и наезжает на неё. */
#pcard-rewards .card-name { font-size: 10px; line-height: 1.15; padding: 0 2px; }
#pcard-rewards .card-cost { font-size: 10px; margin-bottom: 12px; }
#pcard-rewards .card-inner { padding-bottom: 16px; }
.card-slot.pcard-reward:hover { border-width: 2px; filter: brightness(1.15); }
/* Пустой слот премии: пунктир — «сюда ещё поместится», а не «здесь сломалось». */
.card-slot.pcard-reward-empty { border-style: dashed; opacity: .45; cursor: default; }
/* Метка «ЗАБРАТЬ» — на месте уголка с ценой возврата у инвентарных слотов,
   чтобы взгляд искал подпись действия в одном и том же углу карточки. */
.pcard-take-badge {
  position: absolute; bottom: 4px; left: 50%;
  transform: translateX(-50%);
  font-size: 10px; letter-spacing: 1px;
  color: #0b1a12; background: var(--green, #2ecc71);
  border-radius: 3px; padding: 1px 6px;
  pointer-events: none;
}
.pcard-bonus-row {
  font-size: 12px; line-height: 1.45;
  padding: 4px 0 4px 10px;
  border-left: 2px solid rgba(240,208,96,.5);
  margin-bottom: 4px;
}
/* Итог бонуса — первым и золотом: игрок читает «−40 монет», а формулировку
   разбирает уже потом. */
.pcard-bonus-val   { color: var(--gold); font-weight: bold; margin-right: 6px; }
.pcard-bonus-text  { color: var(--fg, #cfe3ee); }
.pcard-bonus-count { color: var(--dim, #7c8a99); margin-left: 4px; font-size: 11px; }

/* Бонус на карточке Атласа. Незаработанный приглушён и показывает счётчик
   открытий — так видно, ради чего копится этап. */
.atlas-card-bonus {
  display: flex; gap: 6px; align-items: baseline;
  font-size: 11px; line-height: 1.35;
  margin: 6px 0 4px;
  padding: 5px 6px;
  border-radius: 4px;
  background: rgba(240,208,96,.05);
  border: 1px solid rgba(240,208,96,.18);
  color: var(--dim, #7c8a99);
}
.atlas-card-bonus.got {
  background: rgba(46,204,113,.08);
  border-color: rgba(46,204,113,.4);
  color: var(--fg, #cfe3ee);
}
.atlas-bonus-mark {
  flex: 0 0 auto; font-weight: bold;
  color: var(--gold);
}
.atlas-card-bonus.got .atlas-bonus-mark { color: var(--green, #2ecc71); }
.pcard-empty-note {
  font-size: 11px; line-height: 1.45;
  color: var(--dim, #7c8a99);
  padding: 2px 0;
}
/* Уголок с ценой возврата (#160). Внутри 134px карточки, поверх арта. */
.pcard-sell-badge {
  position: absolute; top: 4px; right: 5px;
  font-size: 11px; color: var(--gold);
  background: rgba(9,20,33,.85);
  border: 1px solid rgba(240,208,96,.45);
  border-radius: 3px; padding: 0 4px;
  pointer-events: none;
}
/* Закрытый слот с активной кнопкой «Открыть» (#173): базовая .slot-locked гасит
   карточку до 35% — кнопку на ней было бы не прочитать. */
.card-slot.slot-locked.pcard-unlockable { opacity: .95; background: rgba(30,10,10,.2); }
.card-slot.slot-locked.pcard-unlockable .locked-icon { margin-top: 2px; opacity: .7; }
.pcard-unlock-btn {
  font-family: 'Courier New', monospace;
  font-size: 12px; letter-spacing: 0; line-height: 1.25;
  color: var(--gold); background: rgba(240,208,96,.12);
  border: 1px solid rgba(240,208,96,.5); border-radius: 4px;
  padding: 4px 6px; cursor: pointer; margin-top: 4px;
  max-width: 100%;
}
.pcard-unlock-btn:hover:not(:disabled) { background: rgba(240,208,96,.28); }
.pcard-unlock-btn:disabled { opacity: .4; cursor: default; }

/* #168: обе кнопки подвала Профиля одной ширины — как в подвале Организаций. */
#pcard-footer { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; flex-shrink: 0; }
#pcard-footer button {
  font-family: 'Courier New', monospace;
  font-size: 17px; letter-spacing: 2px;
  border-radius: 6px; padding: 12px; cursor: pointer;
}
#btn-pcard-atlas {
  background: rgba(78,205,196,.08); color: var(--teal);
  border: 1px solid var(--teal);
}
#btn-pcard-atlas:hover { background: rgba(78,205,196,.2); }
#btn-pcard-back {
  background: var(--teal); color: #0b1a2a; border: none;
}
#btn-pcard-back:hover { filter: brightness(1.1); }

/* ═══ CODE ENTRY MODAL (секретный код полной версии) ═══ */
#code-entry-overlay {
  position: fixed; inset: 0;
  background: rgba(4,10,20,.82);
  display: flex; align-items: center; justify-content: center;
  z-index: 9700;
  font-family: 'Courier New', monospace;
}
#code-entry-overlay.hidden { display: none; }
#code-entry-box {
  width: clamp(260px, 80vmin, 360px);
  background: #061726;
  border: 2px solid rgba(240,208,96,.5);
  border-radius: 10px;
  padding: 22px 24px;
  text-align: center;
  box-shadow: 0 0 36px rgba(240,208,96,.2);
}
#code-entry-label {
  color: #f0d060; font-size: 15px; letter-spacing: 3px;
  margin-bottom: 12px;
}
#code-entry-text { color: var(--text); font-size: 14px; margin-bottom: 14px; }
#code-entry-input {
  width: 160px; text-align: center;
  font-family: 'Courier New', monospace;
  font-size: 28px; letter-spacing: 10px; font-weight: bold;
  color: #f0d060; background: rgba(240,208,96,.06);
  border: 2px solid rgba(240,208,96,.45); border-radius: 6px;
  padding: 8px 10px; margin-bottom: 18px; outline: none;
}
#code-entry-input:focus { border-color: rgba(240,208,96,.85); }
#code-entry-btns { display: flex; gap: 12px; justify-content: center; }
#code-entry-btns button {
  font-family: 'Courier New', monospace;
  font-size: 15px; font-weight: bold;
  padding: 9px 24px; border-radius: 5px; cursor: pointer;
  border: 2px solid rgba(78,205,196,.55);
  background: rgba(78,205,196,.1); color: var(--teal);
}
#btn-code-ok { border-color: rgba(240,208,96,.6); color: #f0d060; background: rgba(240,208,96,.12); }
.ach-item {
  position: relative;
  padding: 12px 14px;
  background: rgba(78,205,196,.04);
  border: 1px solid rgba(78,205,196,.25);
  border-radius: 6px;
}
.ach-item.ach-done {
  background: rgba(46,204,113,.07);
  border-color: rgba(46,204,113,.55);
}
.ach-item.ach-locked {
  opacity: .9;
  position: relative;
  overflow: hidden;
}
.ach-item.ach-locked .ach-title,
.ach-item.ach-locked .ach-reward {
  filter: blur(1.5px);
  opacity: .55;
}
/* Замок на плашках закрытых финалов (Госпиталь, Чёрный Рынок) */
.ach-lock {
  position: absolute; top: 9px; right: 11px; z-index: 3;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.65));
}
.ach-has-lock .ach-title { padding-right: 40px; }
.ach-has-lock .ach-status { top: auto; bottom: 10px; }
.ach-title {
  font-size: 13px; color: #b6f1eb; letter-spacing: 1.5px;
  margin-bottom: 4px;
}
.ach-done .ach-title { color: #2ecc71; }
.ach-reward {
  font-size: 11px; color: rgba(255,255,255,.55);
}
.ach-status {
  position: absolute; top: 10px; right: 14px;
  font-size: 11px; letter-spacing: 1px;
}
.ach-done .ach-status { color: #2ecc71; }
.ach-locked .ach-status { color: rgba(255,255,255,.35); }
.ach-wip-stamp {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%) rotate(-6deg);
  border: 3px solid rgba(231,76,60,.85);
  color: rgba(231,76,60,1);
  font-size: 16px;
  letter-spacing: 4px;
  padding: 6px 14px;
  border-radius: 4px;
  background: rgba(231,76,60,.12);
  font-weight: bold;
  pointer-events: none;
  text-shadow: 0 0 4px rgba(231,76,60,.5);
  white-space: nowrap;
}

/* ─── SIDE PANEL (Android-демо) ─────────────────────────────────── */
#btn-sidepanel {
  display: none;  /* виден только на мобильном через @media */
  background: rgba(78,205,196,.08);
  border: 1px solid rgba(78,205,196,.45);
  color: var(--teal);
  cursor: pointer;
  font-size: 18px;
  padding: 2px 9px;
  border-radius: 4px;
  font-family: 'Courier New', monospace;
  line-height: 1;
}
#header-hp {
  display: none;  /* виден только на мобильном — постоянный HP-индикатор */
  align-items: center;
  gap: 3px;
  color: var(--red);
  font-weight: bold;
  font-size: 13px;
  padding: 2px 6px;
  border: 1px solid rgba(231,76,60,.4);
  border-radius: 4px;
  background: rgba(231,76,60,.08);
}
#side-panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 320px;
  max-width: 90vw;
  background: var(--bg);
  border-left: 2px solid var(--teal);
  box-shadow: -8px 0 30px rgba(0,0,0,.7);
  z-index: 8500;
  transform: translateX(100%);
  transition: transform .25s ease-out;
  display: none;  /* виден только на мобильном */
  flex-direction: column;
}
#side-panel.opened { transform: translateX(0); }
#sp-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
  background: var(--panel);
}
#sp-title {
  flex: 1;
  font-size: 14px;
  letter-spacing: 3px;
  font-weight: bold;
  color: var(--teal);
  font-family: 'Courier New', monospace;
  text-transform: uppercase;
}
/* #115: счётчик хода в шапке Сканера — на мобильном строка ресурсов не должна
   разрастаться на два ряда из-за «ХОД N» (в шапке слоя он скрыт через @media). */
#sp-turn {
  flex: 0 0 auto;
  font-size: 13px;
  letter-spacing: 1px;
  color: var(--dim);
  font-family: 'Courier New', monospace;
}
#sp-turn span { color: var(--text); font-weight: bold; }
#sp-close {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text);
  font-size: 14px;
  width: 32px; height: 32px;
  border-radius: 4px;
  cursor: pointer;
}
#sp-body { flex: 1; overflow-y: auto; padding: 10px; display: flex; flex-direction: column; gap: 10px; }
.sp-section { display: flex; flex-direction: column; min-height: 0; }
.sp-section-log { flex: 1; min-height: 120px; }
.sp-section-log #sp-log-entries { flex: 1; overflow-y: auto; }
.sp-section-title {
  font-size: 11px;
  letter-spacing: 1.5px;
  color: var(--dim);
  border-bottom: 1px solid var(--border);
  padding-bottom: 4px;
  margin-bottom: 8px;
  text-transform: uppercase;
}
#sp-eph-list { font-size: 12px; display: flex; flex-direction: column; gap: 4px; }
#sp-log-entries { font-size: 12px; display: flex; flex-direction: column; gap: 3px; }
#sp-log-entries .log-line { padding: 2px 4px; border-left: 2px solid transparent; line-height: 1.35; }
#sp-log-entries .log-err  { border-left-color: var(--red); color: #ffb0a8; }
#sp-log-entries .log-warn { border-left-color: var(--yellow); color: #ffe7a8; }
#sp-log-entries .log-ok   { border-left-color: var(--green); color: #b8e8c8; }
#sp-log-entries .log-trigger { border-left-color: var(--gold); color: #ffd870; }
#sp-log-entries .log-info { color: var(--dim); }

/* ─── SHOP ORG TABS (Mobile only, hidden by default) ──────────────
   На кнопке табe фоном работает прямоугольный кроп эмблемы (центр круглой эмблемы,
   увеличенный 220%), сверху — затемняющий градиент, текст контрастный и читаемый. */
#shop-org-tabs { display: none; }
.shop-org-tab {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  flex: 1;
  padding: 8px 6px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 5px;
  color: #fff;
  cursor: pointer;
  font-family: 'Courier New', monospace;
  font-size: 13px;
  font-weight: bold;
  letter-spacing: 1.5px;
  min-height: 52px;
  overflow: hidden;
  background-size: 220% auto;
  background-position: center;
  background-repeat: no-repeat;
}
.shop-org-tab[data-org="hospital"]  { background-image: linear-gradient(rgba(5,18,12,.55), rgba(5,18,12,.75)), url('img/orgs/hospital.webp'); }
.shop-org-tab[data-org="institute"] { background-image: linear-gradient(rgba(5,12,20,.55), rgba(5,12,20,.75)), url('img/orgs/institute.webp'); }
.shop-org-tab[data-org="market"]    { background-image: linear-gradient(rgba(20,12,5,.55), rgba(20,12,5,.75)), url('img/orgs/market.webp'); }
.shop-org-tab img { display: none; } /* эмблема рисуется фоном, исходный img прячем */
.shop-org-tab span {
  text-shadow: 0 1px 2px rgba(0,0,0,.95), 0 0 6px rgba(0,0,0,.7);
  color: #fff;
}
.shop-org-tab.active {
  border-color: var(--teal);
  box-shadow: 0 0 10px rgba(78,205,196,.45) inset;
}
.shop-org-tab.active[data-org="hospital"]  { background-image: linear-gradient(rgba(5,30,18,.45), rgba(5,30,18,.6)), url('img/orgs/hospital.webp'); }
.shop-org-tab.active[data-org="institute"] { background-image: linear-gradient(rgba(5,20,30,.45), rgba(5,20,30,.6)), url('img/orgs/institute.webp'); }
.shop-org-tab.active[data-org="market"]    { background-image: linear-gradient(rgba(30,18,5,.45), rgba(30,18,5,.6)), url('img/orgs/market.webp'); }
.shop-org-tab.active span { color: #d4ffd4; }
.shop-org-tab.active[data-org="institute"] span { color: #c9f0ff; }
.shop-org-tab.active[data-org="market"]    span { color: #ffe7c0; }

/* ─── DEMO END / PAYWALL (Android-демо) ─────────────────────────── */
#demo-end-overlay {
  position: fixed; inset: 0; z-index: 9500;
  display: flex; align-items: center; justify-content: center;
  background: rgba(2, 6, 14, .92);
  padding: 16px;
}
#demo-end-box {
  width: 100%; max-width: 460px;
  background: linear-gradient(180deg, #0a1828 0%, #050b16 100%);
  border: 2px solid var(--teal);
  border-radius: 6px;
  padding: 22px 22px 18px;
  box-shadow: 0 0 40px rgba(78,205,196,.25);
  color: var(--text);
  font-family: 'Courier New', monospace;
}
#demo-end-header {
  font-size: 16px;
  letter-spacing: 3px;
  color: var(--teal);
  text-align: center;
  border-bottom: 1px dashed rgba(78,205,196,.4);
  padding-bottom: 12px;
  margin-bottom: 18px;
  font-weight: bold;
}
#demo-end-body { font-size: 14px; line-height: 1.55; }
#demo-end-body p { margin: 10px 0; }
#demo-end-teaser-shape {
  font-size: 70px;
  text-align: center;
  color: var(--purple);
  filter: blur(1px);
  opacity: .65;
  margin: 4px 0 10px;
  text-shadow: 0 0 28px rgba(155,89,182,.65);
}
.demo-end-meta {
  font-size: 12px; letter-spacing: 1px;
  color: var(--dim); text-align: center; margin-bottom: 12px;
}
.dem-clr { color: var(--gold); }
.dem-restrict { color: var(--red); }
.demo-end-foot {
  margin-top: 18px !important;
  font-size: 12px; color: var(--dim); text-align: center;
  font-style: italic;
}
#demo-end-buttons {
  display: flex; flex-direction: column; gap: 10px;
  margin-top: 18px;
}
#demo-end-buttons .btn-overlay-action {
  width: 100%;
  text-align: center;
  font-size: 14px;
  padding: 12px 16px;
  letter-spacing: 1px;
  border-radius: 4px;
  font-family: 'Courier New', monospace;
  background: var(--teal);
  color: #02101a;
  border: none;
  cursor: pointer;
  font-weight: bold;
}
#demo-end-buttons .btn-overlay-secondary {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text);
}

/* ═══════════════════════════════════════════════════════════════════
   МОБИЛЬНАЯ РАСКЛАДКА (смартфон / планшет)
   Полная версия раздаётся с сервера: с компьютера — широкая раскладка выше,
   с телефона/планшета — этот блок (интерфейс андроид-демки).
   Условие ниже ОБЯЗАНО совпадать с MOBILE_MQ в js/game.js — CSS и JS должны
   переключаться одновременно, иначе сетка/СКАНЕР разъедутся с вёрсткой.
     • max-width:599px       — телефон в портрете, узкое окно десктопа;
     • pointer:coarse ≤900px — телефон в ЛАНДШАФТЕ и планшеты (палец, не мышь).
═══════════════════════════════════════════════════════════════════ */
@media (max-width: 599px), (pointer: coarse) and (max-width: 900px) {
  :root {
    --cell-size: 36px;
    --btn-min-h: 44px;
  }
  /* «(Esc)» — подсказка для клавиатуры; на телефоне её нет, и суффикс только
     сбивает с толку. Сама строка остаётся: это единственный вход в громкость
     из главного меню, где шапки с ⚙ не видно. */
  .menu-settings-link .esc-hint { display: none; }
  .menu-settings-link { min-height: var(--btn-min-h); }
  body {
    /* Edge-to-edge: к базовым 6px добавляем safe-area, чтобы строка ресурсов не
       уходила под статус-бар сверху, а снизу учитывался жестовый inset. */
    padding:
      calc(6px + var(--safe-top))
      calc(6px + var(--safe-right))
      calc(6px + var(--safe-bottom))
      calc(6px + var(--safe-left));
    min-height: 100dvh;
  }
  #app { width: 100%; max-width: 100%; }

  /* Top resources bar: два ряда. Первый — ресурсы (без HP), второй — HP + кнопки. */
  #res-bar {
    flex-direction: column;
    align-items: stretch;
    /* #14: ресурсы крупнее (+~18%) и жирнее */
    font-size: 15px;
    font-weight: bold;
    gap: 4px;
    padding: 5px 8px;
  }
  /* Верхняя строка ресурсов слоя: шрифт +20% (цифры и «ХОД» в одну строку). */
  .res-item { font-weight: bold; font-size: 18px; }
  /* #36: цифры на поле жирнее — на телефоне обычный bold читался хуже. */
  .cell { font-weight: 800; }
  /* #16: на экране результата («Слой очищен» и т.п.) шапка с данными видна
     поверх затемнения, но кнопки Архив/Сканер заблокированы. (#overlay z-index:100) */
  body.result-overlay #res-bar { position: relative; z-index: 110; }
  body.result-overlay #btn-archive,
  body.result-overlay #btn-settings,
  body.result-overlay #btn-sidepanel { pointer-events: none; opacity: .45; }
  .res-bar-row {
    display: flex;
    align-items: center;
    gap: 5px;
    flex-wrap: wrap;
  }
  .res-item svg { width: 22px; height: 22px; }
  .res-divider { height: 20px; margin: 0 2px; }
  /* #115: «ХОД N» переезжает в правый верхний угол СКАНЕРа (#sp-turn) — иначе
     верхняя строка ресурсов разрастается на два ряда. На десктопе остаётся в шапке. */
  #turn-label, #turn-divider { display: none; }
  /* «Подсказки» — теперь в Главном меню → Настройки, в шапке игры не нужны */
  .hint-toggle-wrap { display: none !important; }
  /* Сердечки в шапке — компактные иконки HP вместо текста «♥ 3/3» */
  #header-hp {
    padding: 2px 6px;
    gap: 1px;
    border: 1px solid rgba(231,76,60,.4);
    background: rgba(231,76,60,.08);
    border-radius: 4px;
    line-height: 1;
  }
  /* #10: больше воздуха между сердечками */
  #header-hp-hearts { display: inline-flex; gap: 4px; align-items: center; }
  #header-hp-hearts .heart { font-size: 16px; line-height: 1; }

  /* Inline kbd подсказки в слотах — мельче */
  kbd { font-size: 11px; padding: 0 3px; }
  .slot-key-hint { font-size: 12px; }

  /* Card titles на мобильном — мельче, в одну строку. «ЛОКАТОР»/«ЭХОЛУЧ» должны входить.
     #22: ни одно название не переносится. */
  .card-name { font-size: 11px; letter-spacing: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  /* Стоимость инструмента (-2э / +4э / бесплатно) — крупнее, заметнее */
  .card-cost { font-size: 16px; font-weight: bold; }
  .card-art, [data-equipment-art="on"] .card-art-img { width: 50px; height: 50px; }
  /* #58: слоты чуть ниже (118→110, ~-7%) — слой целиком помещается на экран. */
  .card-slot { height: 110px; }

  /* Мобильная раскладка центральной колонки. Активный инструмент уезжает из
     внешнего блока (он скрыт) внутрь tool-section — слева от «УЙТИ ИЗ СЛОЯ». */
  #center-col { align-items: stretch; }
  #grid-wrap            { align-self: stretch; }
  #layer-title          { display: none; }
  .slot-key-hint        { display: none; }
  /* Заголовок слоя на телефоне живёт внутри #tool-section и занимает СТРОКУ
     ЦЕЛИКОМ (1 / -1). Половины строки, как у прежней плашки «Сейчас», ему не
     хватает: «Слой 12 (Последняя отмель) · Рекорд: 1240» в 166 px не помещается
     ни при каком кегле, и название резалось до «Сло…». Кнопка «ПОКИНУТЬ СЛОЙ»
     (и панель «ГЛАЗА» у Босса) съезжают в свою строку ниже.
     Цена — примерно 30 px высоты. Отыграны они здесь же: заголовок сделан
     компактным (26 px против кнопочных 44), а клетки сетки НЕ ТРОГАЕМ —
     ужимать их под высоту экрана прямо запрещено (CLAUDE.md).
     Строчные буквы и letter-spacing 0 — тоже ради ширины: капс и разрядка
     раздували строку примерно на четверть. */
  #layer-title-mobile {
    display: flex;
    grid-column: 1 / -1;
    align-self: center;
    padding: 4px 8px;
    font-size: 12px;
    letter-spacing: 0;
    text-transform: none;
    min-height: 26px;
  }
  #layer-title-mobile .lt-rec { font-size: 11px; }

  /* Кнопки магазина и UI — тач-friendly высота 44px */
  .btn-shop, .btn-equip-buy, #btn-exit-room, .btn-overlay-action,
  .org-tab, #btn-archive, .btn-decipher-skip, .btn-decipher-pay,
  .hint-close, .archive-tab, #achievements-close {
    min-height: var(--btn-min-h);
  }
  .btn-shop, .btn-equip-buy { font-size: 13px; padding: 8px 10px; }
  .org-tab { font-size: 13px; padding: 8px 10px; }
  /* #14: кнопки Архив/Сканер ниже — освобождают место под крупный ряд ресурсов */
  #btn-archive, #btn-sidepanel, #btn-settings {
    /* #35: Сканер и Архив одной высоты (оба = var(--btn-min-h)=44px на телефоне) */
    min-height: var(--btn-min-h);
    padding: 4px 10px;
    font-size: 13px;
  }
  /* Настройки открываются поверх слоя — на телефоне окно во всю ширину. */
  #settings-overlay { padding: 12px; }
  #settings-box { width: 100%; padding: 14px 16px; gap: 14px; }
  #settings-title { font-size: 16px; letter-spacing: 2px; }
  /* Толще трек и крупнее ползунок — попасть пальцем в 6px невозможно. */
  .settings-range { height: 10px; }
  .settings-range::-webkit-slider-thumb { width: 24px; height: 24px; }
  .settings-range::-moz-range-thumb { width: 24px; height: 24px; }
  .settings-check-row input[type=checkbox] { width: 24px; height: 24px; }
  #btn-settings-quit { min-height: var(--btn-min-h); }
  /* Запасные отступы поменьше: на телефоне угол ближе к содержимому. */
  #res-anim-layer { right: 10px; top: 10px; }

  /* Battery col — горизонтальная над сеткой (вертикальная съедает половину экрана) */
  #battery-col {
    flex-direction: row;
    align-items: center;
    gap: 4px;
    width: auto;
    flex: 0 0 auto;
    padding: 4px 6px;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 4px;
  }
  #bat-pips { flex-direction: row; gap: 2px; flex: 1; min-width: 0; }
  /* Пипы батареи в 1.5× длиннее. Размер подгоняется так,
     чтобы при maxBat=10 (10×W + 9×gap + label + val) всё влазило в ширину экрана. */
  .bat-pip { width: 27px; height: 20px; }
  #bat-label { font-size: 16px; line-height: 1; }
  #bat-val { font-size: 11px; }

  /* Game area — на узком экране переносим info-col вниз
     (в Task G это станет sliding-sidebar, временно — просто flex-wrap) */
  #game-area { flex-direction: column; align-items: stretch; gap: 6px; }
  #info-col { min-width: 100%; flex: 1 0 100%; }

  /* Ачивки — статус не должен наезжать на заголовок */
  .ach-status { position: static !important; display: block; margin-top: 4px; }

  /* Атлас: бокс на всю ширину, сетка в 2 колонки (карточка узкая — силуэт
     и три строки статистики читаются и в половине экрана). */
  #atlas-overlay { padding: 8px; align-items: stretch; }
  #atlas-box {
    width: 100% !important; max-width: 100% !important;
    padding: 10px !important;
    max-height: calc(100vh - 16px);
  }
  /* Карточка исследователя: строка рекордов на телефоне не влезает в ширину и
     распирала бокс, включая горизонтальную прокрутку всей страницы. Уменьшаем
     шрифт (на десктопе он остаётся крупным) и разрешаем перенос. */
  .profile-item { padding: 10px 8px; gap: 8px; }
  .profile-item-name { font-size: 16px; }
  /* letter-spacing 0: разрядка съедала те самые ~10 px, из-за которых
     «Новый исследователь» не помещался и обрывался многоточием. */
  .profile-item-level { font-size: 11.5px; letter-spacing: 0; }
  .profile-item-records { font-size: 11.5px; }
  .profile-item-sub { font-size: 11px; }
  /* Портрет чуть мельче: на 360 px каждый пиксель ширины уходит в текст,
     а три строки должны читаться целиком, без многоточий. */
  .profile-item-ava { width: 48px; height: 48px; }

  #atlas-header { padding-bottom: 8px; margin-bottom: 8px; gap: 8px; }
  #atlas-title { font-size: 17px; letter-spacing: 2px; }
  #atlas-header-right { gap: 10px; }
  #atlas-progress { font-size: 12px; }
  #atlas-oi { font-size: 15px; }
  #atlas-color-tabs { gap: 4px; margin-bottom: 8px; }
  .atlas-color-tab { font-size: 11px; padding: 6px 8px; flex: 1; }
  /* Справка по цвету: на телефоне это 5–6 строк, поэтому ограничена по высоте и
     прокручивается внутри себя — сетка карточек не должна уезжать за экран. */
  #atlas-color-desc {
    font-size: 11.5px; line-height: 1.45;
    padding: 7px 9px; margin-bottom: 8px;
    max-height: 22vh; overflow-y: auto;
  }
  #atlas-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px; margin-bottom: 10px;
  }
  .atlas-card { padding: 8px; gap: 6px; }
  .atlas-card-name { font-size: 14px; }
  .atlas-card-stats { font-size: 12px; }
  .btn-atlas-decipher { font-size: 12px; padding: 6px 6px; }
  #btn-atlas-continue { font-size: 15px; padding: 10px; }

  /* Магазин: табы организаций сверху, видна одна панель */
  #shop-org-tabs {
    display: flex;
    gap: 6px;
    margin-bottom: 6px;
  }
  #shop-panels { display: block !important; margin-bottom: 8px; }
  .org-panel { display: none !important; margin-bottom: 0; padding: 10px !important; }
  .org-panel.mobile-active-org { display: block !important; }
  /* Круглая эмблема в правом верхнем углу развёрнутой панели — маленькая, не мешает заголовку */
  [data-equipment-art="on"] .org-emblem {
    display: block !important;
    width: 56px; height: 56px;
    top: -4px; right: -4px;
    opacity: .85;
    -webkit-mask-image: none;
    mask-image: none;
  }
  /* Шоп-бокс на мобильном — full width, без лишних отступов */
  #shop-box { max-width: 100% !important; width: 100% !important; padding: 8px !important; }
  /* Заголовок «Перед Слой 2» / «🏛 ОРГАНИЗАЦИИ» — на мобильном не нужны (экономим экран) */
  #shop-header { display: none; }
  /* Ресурсы — РОВНО 2 ряда:
     ряд 1 = ОИ + эссенции + монеты (деньги подняты сюда),
     ряд 2 = HP + энергия + слоты. */
  #shop-res {
    display: flex;
    flex-direction: column;
    gap: 4px;
    /* #26: шапка ресурсов крупнее (12→14px), пропорционально товарам вкладки */
    font-size: 14px;
    padding: 6px 8px;
    margin-bottom: 6px;
    text-align: left;
  }
  #shop-res .res-divider { display: none; }
  .sres-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
  }
  /* первый ряд: данные равномерно распределены по всей ширине строки */
  .sres-row-1 { justify-content: space-between; gap: 2px 10px; }
  /* второй ряд: оставляем компактным, но центрируем */
  .sres-row-2 { justify-content: center; gap: 2px 14px; }
  .sres { white-space: nowrap; justify-content: flex-start; font-weight: bold; }
  /* Заголовок организации — компактнее */
  .org-title { font-size: 15px; margin-bottom: 2px; letter-spacing: 1px; }
  .org-desc  { font-size: 11px; margin-bottom: 6px; }
  .org-tabs  { margin-bottom: 6px; gap: 4px; }
  .org-tab   { font-size: 12px !important; padding: 6px 8px !important; min-height: 36px !important; }
  /* Карточка товара — компактнее, чтобы 4 шт. влезали без скролла */
  .shop-items { gap: 6px; }
  .shop-item  { padding: 6px 8px; gap: 2px; }
  /* #26: самые мелкие шрифты магазина крупнее (+~15-20%), цены жирные */
  .item-name  { font-size: 15px; line-height: 1.25; word-break: keep-all; }
  .item-cost  { font-size: 13px; font-weight: bold; }
  .item-win-hint { font-size: 11px; }
  .item-badge { font-size: 13px; top: 5px; right: 6px; }
  .btn-shop   { font-size: 11px !important; padding: 5px 10px !important; min-height: 30px !important; margin-top: 1px !important; }
  /* shop-item с иконкой (Повербанк, Щит) — иконка мельче, имя в одну строку,
     а «Купить» спанит обе колонки, чтобы стоять у левого края как у обычных товаров */
  [data-equipment-art="on"] .shop-item:has(.shop-item-art) {
    grid-template-columns: 42px 1fr;
    grid-template-areas:
      "art name"
      "art hint"
      "art cost"
      "btn btn";
    gap: 2px 8px;
  }
  [data-equipment-art="on"] .shop-item .shop-item-art { width: 42px; height: 42px; }
  /* Сообщение магазина пустое — не занимает место */
  .shop-msg { min-height: 0; font-size: 12px; margin-bottom: 4px; }
  .shop-msg:empty { display: none; }
  /* Кнопка «Продолжить» — компактнее */
  #btn-shop-continue { font-size: 14px !important; padding: 10px 14px !important; }
  /* #162: три равные кнопки подвала. На узком экране колонка ≈110px, поэтому
     шрифт у ВСЕХ трёх один (12px без разрядки) и подпись не переносится —
     иначе «Слой 2 →» ломался на две строки и кнопка становилась выше соседей. */
  #shop-footer { gap: 6px; }
  .shop-footer-side,
  #shop-footer #btn-shop-continue {
    font-size: 12px !important; letter-spacing: 0;
    padding: 10px 6px !important; white-space: nowrap;
  }

  /* Профиль: одна колонка, слоты по два в ряд */
  #pcard-overlay { padding: 8px; }
  #pcard-box { padding: 14px 12px; max-height: calc(100vh - 16px); }
  #pcard-name { font-size: 18px; letter-spacing: 2px; }
  #pcard-ava { width: 44px; height: 44px; }
  #pcard-body { grid-template-columns: 1fr; gap: 10px; }
  .pcard-rows { font-size: 14px; }

  /* ─── #176: левая часть (ЗАБЕГ) — выдвижной ящик, как СКАНЕР ──────────
     Две колонки в 360px не помещаются, а ужимать слоты запрещено. Поэтому в
     потоке остаётся только правая часть (уровень + статистика), а забег
     выезжает поверх неё свайпом от ЛЕВОГО края (закрытие — свайпом влево),
     кнопкой «◀ ЗАБЕГ» и нажатием на ручку. Направление зеркально СКАНЕРу:
     тот живёт справа, этот — слева, каждый со своей стороны экрана. */
  /* Ящик занимает ВСЮ ширину экрана. Это не косметика: слоты обязаны быть той же
     ширины, что в слое (#170), а любая боковая рамка или торчащая ручка отъели бы
     у них те самые пиксели. Поэтому ручка — горизонтальная полоса сверху. */
  #pcard-run {
    position: fixed; top: 0; left: 0; bottom: 0;
    width: 100vw; max-width: 100vw;
    background: var(--bg);
    box-shadow: 8px 0 30px rgba(0,0,0,.7);
    z-index: 30;                     /* поверх #pcard-box в его контексте */
    transform: translateX(-100%);
    transition: transform .25s ease-out;
    display: flex; flex-direction: column;
    padding: 0;
  }
  #pcard-run.opened { transform: translateX(0); }
  #pcard-run-inner {
    flex: 1; min-width: 0;
    overflow-y: auto; overscroll-behavior: contain;
    /* 6px — те же поля, что у страницы в слое: по ним fitPcardSlots считает
       ширину сетки слотов. Менять только вместе с PAGE_PAD в game.js. */
    padding: 8px 6px 16px;
    gap: 10px;
  }
  #pcard-run-handle {
    display: flex; align-items: center; justify-content: space-between;
    flex: 0 0 auto;
    padding: 9px 12px;
    background: var(--panel);
    border-bottom: 1px solid var(--teal);
    cursor: pointer;
  }
  /* Слева — полоска-грип (за неё тянут), справа — прямая подсказка: свайп
     угадывается не всеми, а промахнуться мимо жеста легко. */
  #pcard-run-handle::before {
    content: '';
    width: 46px; height: 4px; border-radius: 2px;
    background: rgba(78,205,196,.55);
  }
  #pcard-run-handle::after {
    content: 'ЗАБЕГ · закрыть ✕';
    font-size: 11px; letter-spacing: 1px; color: var(--dim);
  }
  .pcard-run-top { grid-template-columns: 1fr; gap: 10px; }
  /* Кнопка вызова ящика — в правой части, под статистикой. */
  #pcard-run-open {
    display: block; width: 100%;
    font-family: 'Courier New', monospace;
    font-size: 13px; letter-spacing: 1px;
    color: var(--teal);
    background: rgba(78,205,196,.1);
    border: 1px solid rgba(78,205,196,.5);
    border-radius: 5px;
    padding: 11px 8px;
    cursor: pointer;
  }
  /* #170 (критично для смартфона): слоты обязаны быть той же ширины, что в слое.
     Ширину и сдвиг считает JS (fitPcardSlots) — сюда её не зашить: между сеткой
     и краем экрана лежат отступы оверлея, коробки и секции ПЛЮС полоса прокрутки
     #pcard-body, а она разной ширины на разных платформах (16px в настольном
     Chrome, 0 при overlay-скроллбарах телефона). Любое фиксированное число здесь
     промахнулось бы ровно на её толщину. */
  #pcard-overlay { padding: 6px; }
  #pcard-box { padding: 12px 6px; }
  /* Секция слотов на телефоне отдаёт всю ширину сетке: боковые поля обнулены,
     заголовок отступ сохраняет отдельно. */
  #pcard-slots { width: auto; max-width: none; }
  .pcard-sec-slots { padding-left: 0; padding-right: 0; }
  .pcard-sec-slots > .pcard-sec-title,
  .pcard-sec-slots > .pcard-hint { padding-left: 10px; padding-right: 10px; }
  /* Полоса прокрутки Профиля на телефоне — накладная (как системная на iOS/Android):
     иначе в мобильной эмуляции настольного браузера она съедает 16px ширины и ряд
     слотов оказывается уже игрового. */
  #pcard-body { scrollbar-width: none; }
  #pcard-body::-webkit-scrollbar { width: 0; height: 0; }
  .pcard-unlock-btn { font-size: 10px; padding: 4px 3px; letter-spacing: 0; }
  #pcard-footer button { font-size: 13px; letter-spacing: 1px; padding: 10px 8px; }

  /* Sidebar и постоянный HP в шапке — только на мобильном */
  #btn-sidepanel { display: inline-flex; align-items: center; justify-content: center; min-height: var(--btn-min-h); }
  #header-hp { display: inline-flex; }
  #side-panel { display: flex; }
  /* На мобильном info-col визуально не нужен — содержимое доступно через sidebar */
  #info-col { display: none !important; }

  /* Hint-модалка: компактные размеры, ПРИНЯТО не должен уезжать за экран */
  .hint-header { padding: 10px 14px 8px; }
  /* #: заголовок окон-сообщений («ЭХОКАМЕРА | …» + «УРОВЕНЬ ДОПУСКА: N»)
     не влезал в одну строку на узких экранах (≤360px) и переносился.
     Поджат letter-spacing + размер, спаны в nowrap — самый длинный
     («ОТЧЁТ ОБ ОБРАЗЦЕ») влезает в одну строку с запасом. */
  .hint-header-top { font-size: 10px; letter-spacing: 0.3px; margin-bottom: 4px; }
  .hint-header-top span { white-space: nowrap; }
  #hint-label { font-size: 15px; letter-spacing: 1.5px; }
  .hint-body { font-size: 14px; padding: 14px 14px 12px; line-height: 1.55; min-height: 60px; }
  .hint-footer { font-size: 12px; padding: 10px 14px; gap: 8px; }
  .hint-check input { width: 14px; height: 14px; }
  #hint-close { font-size: 13px; padding: 8px 14px; letter-spacing: 1px; min-height: var(--btn-min-h); }

  /* ─── #53/#55/#60 + латентные: ВСЕ модалки входят в экран ───────────────
     Любое сообщение/диалог при большом содержимом прокручивается, кнопка
     действия всегда достижима (а не уезжает за нижний край экрана).
     #ency-box (энциклопедия) — экран полной версии, в демке его нет. */
  #hint-box, #mem-box, #decipher-box, #overlay-box, #ebm-box,
  #generic-confirm-box, #onboard-box, #ency-box, #fsm-box {
    max-height: 88vh;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  /* #overlay-box (результат «Слой очищен»/«вы погибли»): min-width:400px не
     влезает в узкий экран — снимаем. */
  #overlay-box { min-width: 0; width: 100%; max-width: 95vw; }
  /* #67: оверлей результата слоя — компактнее по высоте, заголовок −30%,
     кнопка «→ К ОРГАНИЗАЦИЯМ» в одну строку, рапорт контрастнее. */
  #overlay-box   { padding: 20px 18px; }
  #overlay-title { font-size: 25px; letter-spacing: 1.5px; margin-bottom: 8px; }
  #overlay-sub   { font-size: 14px; margin-bottom: 8px; }
  #overlay-stats { font-size: 14px; margin-bottom: 14px; }
  #overlay-stats .report-key { color: #a9c8d6; }
  #overlay-stats .report-val { color: #eaf6fb; }
  #btn-overlay-action { white-space: nowrap; padding: 11px 22px; font-size: 15px; letter-spacing: 1px; }
  /* #76: кнопки «Дальше»/«Расшифровать» ВСЕГДА в одну строку (критичное UI-правило).
     nowrap + гибкие ширины: «Дальше» компактная, «Расшифровать» тянется — цена в ОИ
     всегда помещается (#103). */
  .decipher-footer { flex-wrap: nowrap; gap: 8px; }
  #decipher-box { padding: 16px 16px; }
  #decipher-body { font-size: 14px; }
  #btn-decipher-skip {
    font-size: 13px; padding: 8px 10px; min-height: var(--btn-min-h); letter-spacing: .3px;
    flex: 0 0 auto; white-space: nowrap;
  }
  #btn-decipher-pay {
    font-size: 13px; padding: 8px 12px; min-height: var(--btn-min-h); letter-spacing: .3px;
    flex: 1 1 auto; min-width: 0; white-space: nowrap;
  }
  /* #60: диалоги-подтверждения (возврат/уйти из организаций) — шрифт и кнопки
     заметно меньше, всё помещается. #111/#117/#132: плашка ниже, кнопки ближе
     к тексту, меньше межбуквенный интервал (без широких пробелов в «Да, иду»). */
  #shop-confirm-text, #generic-confirm-text { font-size: 14px; line-height: 1.4; margin-bottom: 8px; }
  #shop-confirm, #generic-confirm { padding: 9px 12px; }
  #shop-confirm-btns button, #generic-confirm-btns button {
    font-size: 13px; padding: 5px 14px; min-height: 40px; letter-spacing: .2px;
  }

  /* ─── #58: вертикальный fit слоя ─────────────────────────────────────
     Кнопки выхода/Архив/Сканер и заголовок слоя ниже (44→36) — освобождают
     место, чтобы нижние слоты не обрезались. */
  #btn-exit-room, #btn-archive, #btn-sidepanel, #btn-settings {
    min-height: 36px;
  }
  /* Заголовок слоя из этого правила исключён намеренно: он не кнопка, пальцем в
     него не целятся, и лишние 10 px высоты здесь дороже — он и так занял целую
     строку (см. #layer-title-mobile выше). */
  #btn-exit-room { padding: 4px 10px; }
  /* #125: панель «ГЛАЗА X/X» (замена кнопки выхода у Босса) — та же компактная
     высота. Показывается ТОЛЬКО на мобильном: в базовых стилях она display:none,
     чтобы на десктопе кнопка выхода работала как раньше. */
  #boss-eyes-panel:not(.hidden) { display: flex; }
  #boss-eyes-panel { min-height: 36px; padding: 4px 12px; }

  /* #125/#59: боевая инфо Босса на мобильном живёт во вкладке СКАНЕР
     (#sp-boss-combat), а строка #boss-bar под сеткой скрыта — она съедала
     высоту, из-за которой не влезала слой. На десктопе #boss-bar остаётся.
     Компактные подписи; перенос разрешён — в сканере есть место по ширине. */
  #boss-bar { display: none !important; }
  #sp-boss-combat { gap: 4px 10px; font-size: 12px; letter-spacing: 0; }
  #sp-boss-combat .boss-val  { font-size: 13px; }
}

/* ═══ ТУТОРИАЛ ═══════════════════════════════════════════════════ */
/* Панель сообщений занимает нижний ряд слотов (5–8), во всю ширину #tool-section.
   Локатор/Эхолуч (card-0/1) и пустые слоты 3–4 (card-2/3) остаются на местах.
   Оформление — машинный «электронный» шрифт 60-х: фосфорный текст + скан-линии. */
/* Шрифт панели туториала: Tektur — квадратный индустриальный, как маркировка
   военного защищённого оборудования середины XX века (с кириллицей). */
@font-face {
  font-family: 'Tektur';
  font-style: normal; font-weight: 400 700; font-display: swap;
  src: url('fonts/Tektur-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Tektur';
  font-style: normal; font-weight: 400 700; font-display: swap;
  src: url('fonts/Tektur-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2013-2014, U+2018-2019, U+201C-201D, U+2026, U+2212;
}
#tutorial-hint {
  grid-column: 1 / -1;           /* во всю ширину → отдельный нижний ряд */
  height: 121px;                 /* −10% от высоты ряда слотов (134px) — экран туториала короче */
  margin-top: 0;
  display: flex; align-items: center; justify-content: center;
  text-align: center;
  padding: 12px 16px;
  border: 2px solid rgba(120,255,150,.4);
  border-radius: 6px;
  background-color: #08160b;
  background-image: repeating-linear-gradient(
    0deg, rgba(0,0,0,.28) 0px, rgba(0,0,0,.28) 1px, transparent 1px, transparent 3px);
  color: #7cfc9a;
  font-family: 'Tektur', 'Courier New', monospace;
  font-size: 16px; font-weight: 700;
  letter-spacing: .5px; line-height: 1.4;
  text-transform: uppercase;
  text-shadow: 0 0 6px rgba(120,255,150,.7), 0 0 2px rgba(120,255,150,.95);
  box-shadow: inset 0 0 20px rgba(120,255,150,.12);
  animation: tut-crt-flicker 3.5s steps(60) infinite;
}
#tutorial-hint.hidden { display: none; }
#tutorial-hint.tut-shake {
  animation: tut-shake .4s ease;
  border-color: #ff8a7a; color: #ff8a7a;
  text-shadow: 0 0 6px rgba(255,138,122,.7);
}
/* Жёлтый «внимание» — шаг переключения на Эхолуч */
#tutorial-hint.tut-attention {
  color: #f5d020;
  border-color: rgba(245,208,32,.6);
  text-shadow: 0 0 7px rgba(245,208,32,.8), 0 0 2px rgba(245,208,32,.95);
  box-shadow: inset 0 0 20px rgba(245,208,32,.14);
}
/* Помигать трижды при смене текста (перебивает crt-flicker на время) */
#tutorial-hint.tut-blink { animation: tut-blink .9s ease; }
@keyframes tut-blink {
  0%{opacity:1} 15%{opacity:.12} 30%{opacity:1} 45%{opacity:.12}
  60%{opacity:1} 75%{opacity:.12} 90%{opacity:1} 100%{opacity:1}
}
@keyframes tut-crt-flicker {
  0%,97%,100% { opacity: 1; }
  98% { opacity: .82; } 99% { opacity: .95; }
}
@keyframes tut-shake {
  0%,100% { transform: translateX(0); }
  20% { transform: translateX(-6px); } 40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); } 80% { transform: translateX(4px); }
}
/* Кнопка СКАНЕРА недоступна в туториале; кнопка выхода скрыта только в скриптовой
   фазе (в свободной фазе — tut-free — возвращается, игрок может покинуть слой) */
/* В туториале СКАНЕР виден, но неактивен (приглушён, клики игнорируются). */
/* Настройки в туториале тоже приглушены: у обучения свой выход (finishTutorial),
   а showMainMenu из него оставил бы TUT.active висеть на следующем забеге. */
.tut-active #btn-sidepanel,
.tut-active #btn-settings { opacity: .4 !important; pointer-events: none !important; cursor: default; }
.tut-active:not(.tut-free) #btn-exit-room { visibility: hidden !important; }
/* В туториале (обе фазы) нижний ряд слотов (5–8) уступает место панели сообщений */
.tut-active #card-4,
.tut-active #card-5,
.tut-active #card-6,
.tut-active #card-7 { display: none !important; }
/* Подсветка целевой карты Эхолуч на шаге переключения */
.card-slot.tut-highlight {
  border-color: var(--gold) !important;
  box-shadow: 0 0 0 2px var(--gold), 0 0 16px rgba(240,208,96,.8) !important;
  animation: tut-pulse 1s ease-in-out infinite;
}
/* Подсветка целевой клетки сетки */
.cell.cell-tut-target {
  box-shadow: 0 0 0 3px var(--teal), 0 0 14px rgba(78,205,196,.9) inset !important;
  animation: tut-pulse 1s ease-in-out infinite;
  z-index: 2;
}
@keyframes tut-pulse {
  0%,100% { filter: brightness(1); }
  50% { filter: brightness(1.5); }
}

/* Модалки туториала (предложение / завершено) */
#tutorial-offer-overlay, #tutorial-done-overlay {
  position: fixed; inset: 0;
  background: rgba(4,10,20,.82);
  display: flex; align-items: center; justify-content: center;
  z-index: 9650;
  font-family: 'Courier New', monospace;
  padding: 16px;
}
#tutorial-offer-overlay.hidden, #tutorial-done-overlay.hidden { display: none; }
#tutorial-offer-box, #tutorial-done-box {
  width: clamp(280px, 90vmin, 460px);
  background: #07101c;
  border: 2px solid rgba(240,208,96,.5);
  border-radius: 10px;
  padding: 22px 24px;
  text-align: center;
  box-shadow: 0 0 40px rgba(240,208,96,.18);
}
#tutorial-offer-label, #tutorial-done-label {
  color: var(--gold); font-weight: bold; letter-spacing: 1px;
  font-size: 14px; margin-bottom: 14px;
}
#tutorial-offer-text, #tutorial-done-text {
  color: var(--text); font-size: 15px; line-height: 1.55; margin-bottom: 20px;
}
#tutorial-offer-btns { display: flex; flex-direction: column; gap: 10px; }
#tutorial-offer-btns button, #tutorial-done-btns button {
  font-family: 'Courier New', monospace;
  font-size: 15px; font-weight: bold;
  padding: 12px 18px; border-radius: 6px; cursor: pointer;
  border: 2px solid rgba(78,205,196,.55);
  background: rgba(78,205,196,.1); color: var(--teal);
}
#btn-tutorial-ready { border-color: rgba(240,208,96,.7); color: var(--gold); background: rgba(240,208,96,.12); }
#tutorial-done-btns { display: flex; justify-content: center; }
#tutorial-done-btns button { padding: 12px 40px; }