/* ══════════════════════════════════════════════════════════════════════════
   АЛТАРИ КРАФТА
   Общий «постамент» для пяти станков: ковка вещей, рунический круг, алтарь
   зачарования, логово питомцев и древний алтарь сетов. Раньше каждый раздел был
   плоским списком строк с инлайновыми стилями — игрок не отличал ковку от
   покупки камня. Теперь у каждого станка своя сцена и свой цвет: светящийся
   центр, кольцо или орбита вокруг и каменные панели под ним.

   Раскладка вертикальная, под телефон: сцена сверху, под ней материалы,
   исходы и кнопка. Горизонтальный референс с тремя колонками разложен в
   столбец — на 375px три колонки превращаются в нечитаемую кашу.

   Цвет станка задаётся одной переменной --fg на корне сцены, всё остальное
   считается от неё. Добавить шестой станок — значит добавить модификатор
   с тремя цветами и строку с фоном, а не копировать блок правил.
   ══════════════════════════════════════════════════════════════════════════ */

.forge {
  /* Значения по умолчанию — ковка. Модификаторы ниже их перебивают. */
  --fg:      #ff9a3c;   /* основной акцент: рамки, заголовки, свечение */
  --fg-soft: #ffcf8a;   /* светлый оттенок для текста поверх тёмного */
  --fg-deep: #7a2f08;   /* тёмный оттенок для теней и подложек */
  --fg-rgb:  255, 154, 60;
  position: relative;
  margin-bottom: 16px;
}
.forge--arcane { --fg: #a78bfa; --fg-soft: #d9ccff; --fg-deep: #2e1b6b; --fg-rgb: 167, 139, 250; }
.forge--void   { --fg: #4bc0ff; --fg-soft: #b6e6ff; --fg-deep: #0b3a5a; --fg-rgb: 75, 192, 255; }
.forge--rune   { --fg: #64c8ff; --fg-soft: #cfeeff; --fg-deep: #0a2b46; --fg-rgb: 100, 200, 255; }
.forge--den    { --fg: #8fd14f; --fg-soft: #d6f5b0; --fg-deep: #1d3a12; --fg-rgb: 143, 209, 79; }

/* Equipment altar shares the existing scene and growth controls. */
.equipment-altar { --fg: #aa94eb; --fg-soft: #dfd5fa; --fg-rgb: 170, 148, 235; }
.equipment-altar__heading { display:flex;align-items:baseline;justify-content:space-between;gap:8px;color:var(--fg-soft);font-size:13px;letter-spacing:1.5px;margin:2px 0 16px; }
.equipment-altar__heading span { color:#99a9bf;font-size:10px;letter-spacing:0;text-align:right; }
.equipment-altar__label { display:block;color:#a2b2c8;font-size:10px;margin-bottom:6px; }
.equipment-altar .craft-picker { width:100%;min-width:0;max-width:100%;min-height:44px; }
.equipment-altar .forge-stage { height:216px;margin-top:4px; }
.equipment-altar .forge-core { cursor:default; }
.equipment-altar .forge-stage__foot { overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:8px 12px;color:#ded3f4; }
.equipment-altar .growth-preview { gap:8px;flex-wrap:wrap; }
.equipment-altar .growth-feed-list { max-height:38dvh;overscroll-behavior:contain; }
.equipment-altar .growth-feed { flex-shrink:0;min-height:52px;cursor:pointer; }
.equipment-altar .growth-feed strong { white-space:nowrap;font-size:10px; }
.equipment-altar .growth-safe-toggle { min-height:40px;font-size:10px;cursor:pointer; }
.equipment-altar .growth-primary { cursor:pointer;z-index:1; }
.equipment-altar button:disabled { cursor:default;opacity:.45; }
.equipment-altar button:focus-visible,.equipment-altar select:focus-visible { outline:2px solid #dec8ff;outline-offset:2px; }
.growth-preview-xp { display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px;padding:7px 2px;color:#a4b5cd;font-size:10px; }
.growth-preview-xp span { color:#efb878; }
@media(max-width:360px) { .equipment-altar .forge-stage { height:188px; }.equipment-altar .growth-feed { gap:6px;padding:6px; } }

/* Ряд вкладок крафта прокручивается вбок. Их шесть, и на узких телефонах
   (320px) последняя уже вылезала за край экрана — просто молча обрезалась,
   и до «Сетов» было не добраться. */
.craft-tabs {
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.craft-tabs::-webkit-scrollbar { display: none; }
.craft-tabs .craft-tab-btn { flex-shrink: 0; }

/* ── Заголовок станка ──
   Номер в кружке повторяет референс: игрок читает крафт как последовательность
   станков, а не как набор независимых форм. */
.forge-head {
  display: flex; align-items: center; gap: 9px;
  padding: 0 2px 8px;
}
.forge-head__num {
  width: 22px; height: 22px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(var(--fg-rgb), 0.55);
  border-radius: 50%;
  background: radial-gradient(circle at 50% 35%, rgba(var(--fg-rgb), 0.28), rgba(0, 0, 0, 0.6));
  box-shadow: 0 0 9px rgba(var(--fg-rgb), 0.3), inset 0 0 6px rgba(0, 0, 0, 0.7);
  font-size: 11px; font-weight: 700; color: var(--fg-soft);
}
.forge-head__txt { min-width: 0; }
.forge-head__title {
  font-size: 13px; font-weight: 700; letter-spacing: 2px;
  color: var(--fg-soft);
  text-shadow: 0 0 10px rgba(var(--fg-rgb), 0.5), 0 1px 0 #000;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.forge-head__sub {
  font-size: 9px; color: #7e8aa8; margin-top: 1px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Сцена с мягкими краями; интерактивные слоты остаются поверх маски. */
.forge-stage {
  position: relative;
  height: 232px;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid transparent;
  background: transparent;
  isolation: isolate;
}
/* Маска только на декорации: не гасит кнопки, текст и предметы. */
.forge-stage__bg {
  position: absolute; inset: 0;
  background-image: url('../images/ui/forge-stage.jpg');
  background-size: cover;
  background-position: center;
  opacity: 0.95;
  -webkit-mask-image: radial-gradient(ellipse at 50% 50%, #000 30%, rgba(0, 0, 0, .88) 53%, transparent 75%);
  mask-image: radial-gradient(ellipse at 50% 50%, #000 30%, rgba(0, 0, 0, .88) 53%, transparent 75%);
}
.forge--arcane .forge-stage__bg { background-image: url('../images/ui/enchant-stage.jpg'); }
.forge--void   .forge-stage__bg { background-image: url('../images/ui/altar-stage-v1.png'); background-position: center 64%; }
.forge--rune   .forge-stage__bg { background-image: url('../images/ui/rune-stage.jpg'); }
.forge--den    .forge-stage__bg { background-image: url('../images/ui/den-stage.jpg'); }

/* Виньетка поверх: гасит углы до цвета приложения, чтобы сцена не выглядела
   наклеенным прямоугольником. */
.forge-stage::after {
  content: '';
  position: absolute; inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 50% 48%, transparent 38%, rgba(5, 5, 14, 0.16) 68%, transparent 80%);
}

/* ── Кольцо рун ──
   Медленно вращается. Это единственная анимация сцены: движение притягивает
   взгляд к центру, где стоит слот, и не мешает читать цифры по бокам. */
.forge-ring {
  position: absolute; top: 50%; left: 50%;
  width: 196px; height: 196px;
  margin: -98px 0 0 -98px;
  pointer-events: none;
  color: var(--fg);
  animation: forge-spin 44s linear infinite;
}
.forge-ring--rev {
  width: 152px; height: 152px; margin: -76px 0 0 -76px;
  animation: forge-spin 30s linear infinite reverse;
  opacity: 0.55;
}
@keyframes forge-spin { to { transform: rotate(360deg); } }

/* Устройства с отключённой анимацией: кольцо просто стоит. Крутящийся
   бесконечно круг — ровно то, от чего эта настройка защищает. */
@media (prefers-reduced-motion: reduce) {
  .forge-ring, .forge-ring--rev { animation: none; }
  .forge-core::before { animation: none; }
  .forge-spark { display: none; }
}

/* ── Алтарь: один или несколько слотов по центру сцены ──
   Ковка из руды кладёт в центр один слот, ковка из трёх вещей — три: так
   видно, что именно уходит в переплавку, ещё до чтения списка ниже. */
.forge-altar {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  display: flex; align-items: center; justify-content: center; gap: 7px;
}

/* ── Слот ──
   Пустой — пунктирная рамка с плюсом, занятый — вещь на подсвеченной плите. */
.forge-core {
  position: relative;
  width: 96px; height: 96px;
  border-radius: 12px;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 3px;
  cursor: pointer;
  border: 1.5px dashed rgba(var(--fg-rgb), 0.5);
  /* Подложка НАМЕРЕННО полупрозрачная: сквозь слот должно просвечивать жерло.
     Плотный тёмный квадрат поверх огня читался как дыра в картинке, а не как
     место, куда кладут вещь. */
  background:
    radial-gradient(circle at 50% 45%, rgba(var(--fg-rgb), 0.10), rgba(4, 4, 12, 0.42) 74%);
  box-shadow: inset 0 0 18px rgba(0, 0, 0, 0.55), 0 0 18px rgba(var(--fg-rgb), 0.18);
  transition: box-shadow 0.18s, border-color 0.18s;
}
/* Пульсация — «жерло дышит». Слабая: заметна боковым зрением, не отвлекает. */
.forge-core::before {
  content: '';
  position: absolute; inset: -14px;
  border-radius: 18px;
  pointer-events: none;
  background: radial-gradient(circle, rgba(var(--fg-rgb), 0.2), transparent 68%);
  animation: forge-breathe 3.4s ease-in-out infinite;
}
@keyframes forge-breathe {
  0%, 100% { opacity: 0.45; transform: scale(0.96); }
  50%      { opacity: 0.95; transform: scale(1.06); }
}
.forge-core:active { box-shadow: inset 0 0 22px rgba(0, 0, 0, 0.8), 0 0 30px rgba(var(--fg-rgb), 0.5); }
.forge-core--filled {
  border-style: solid;
  border-color: rgba(var(--fg-rgb), 0.85);
}
.forge-core img {
  width: 56px; height: 56px;
  object-fit: contain;
  image-rendering: pixelated;
  filter: drop-shadow(0 0 10px rgba(var(--fg-rgb), 0.55));
}
.forge-core__plus {
  font-size: 26px; line-height: 1;
  color: rgba(var(--fg-rgb), 0.75);
  text-shadow: 0 0 12px rgba(var(--fg-rgb), 0.6);
}
.forge-core__hint {
  font-size: 8px; letter-spacing: 0.5px; color: #8a93ad;
  text-align: center; padding: 0 4px;
}
.forge-core__lv {
  font-size: 9px; font-weight: 700; color: var(--fg-soft);
  text-shadow: 0 1px 2px #000;
}

/* Три слота вместо одного: каждый уже, и дышащий ореол убираем — три
   пульсирующих пятна рядом дают рябь вместо свечения. */
.forge-altar--multi .forge-core { width: 66px; height: 66px; }
.forge-altar--multi .forge-core::before { display: none; }
.forge-altar--multi .forge-core img { width: 40px; height: 40px; }
.forge-altar--multi .forge-core__plus { font-size: 20px; }
.forge-altar--multi .forge-core__hint { display: none; }

/* ── Подпись под сценой: шанс успеха ──
   Лежит поверх картинки внизу, как в референсе. */
.forge-stage__foot {
  position: absolute; left: 0; right: 0; bottom: 0;
  /* Подпись лежит поверх сцены и перекрывает нижние узлы орбиты. Пока она
     ловила нажатия, нижнее гнездо круга рун приходилось тыкать по самой
     верхней кромке — игрок сообщил «раз двадцать надо ткнуть». Подпись
     читают, а не нажимают: событий ей не нужно вовсе. */
  pointer-events: none;
  padding: 14px 0 7px;
  text-align: center;
  font-size: 11px; letter-spacing: 0.5px;
  color: #c3cee2;
  /* Затемнение под подписью: она лежит ровно над раскалёнными углями, и одной
     тени тексту не хватало — цифра шанса терялась в самом светлом месте кадра. */
  background: linear-gradient(180deg, transparent, rgba(4, 4, 12, 0.82) 62%);
  text-shadow: 0 1px 3px #000, 0 0 8px rgba(0, 0, 0, 0.9);
}
.forge-stage__foot b { font-weight: 700; }

/* Искры, летящие вверх от жерла. Чистое украшение, поэтому pointer-events
   отключены и на reduce-motion они пропадают целиком. */
.forge-sparks { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.forge-spark {
  position: absolute; bottom: -6px;
  width: 2px; height: 2px; border-radius: 50%;
  background: var(--fg-soft);
  box-shadow: 0 0 6px rgba(var(--fg-rgb), 0.9);
  animation: forge-rise linear infinite;
  opacity: 0;
}
@keyframes forge-rise {
  0%   { opacity: 0;   transform: translateY(0) scale(0.7); }
  12%  { opacity: 0.9; }
  75%  { opacity: 0.5; }
  100% { opacity: 0;   transform: translateY(-176px) scale(0.3); }
}

/* ══ ПАНЕЛИ ══
   Каменная плита с фаской. Углы срезаны рамкой из псевдоэлемента — так плита
   читается как вырезанная, а не как div со скруглением. */
.forge-panel {
  position: relative;
  margin-top: 10px;
  padding: 9px 11px 11px;
  border-radius: 11px;
  border: 1px solid rgba(var(--fg-rgb), 0.2);
  background:
    linear-gradient(180deg, rgba(22, 20, 38, 0.92), rgba(11, 10, 22, 0.94));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 4px 14px rgba(0, 0, 0, 0.5);
}
/* Кованые уголки. Две «скобки» по диагонали — этого хватает, чтобы плита
   читалась как вырезанная в камне, а не как веб-карточка со скруглением.
   Рисуем псевдоэлементами: четыре угла потребовали бы лишней разметки в
   каждой панели, а diagonal-пара даёт тот же эффект вдвое дешевле. */
.forge-panel::before,
.forge-panel::after {
  content: '';
  position: absolute;
  width: 9px; height: 9px;
  pointer-events: none;
  border-color: rgba(var(--fg-rgb), 0.5);
  border-style: solid;
}
.forge-panel::before {
  top: 4px; left: 4px;
  border-width: 1px 0 0 1px;
  border-top-left-radius: 4px;
}
.forge-panel::after {
  bottom: 4px; right: 4px;
  border-width: 0 1px 1px 0;
  border-bottom-right-radius: 4px;
}

.forge-panel__title {
  display: flex; align-items: center; gap: 6px;
  font-size: 9px; font-weight: 700; letter-spacing: 1.6px;
  color: rgba(var(--fg-rgb), 0.85);
  padding-bottom: 7px;
  margin-bottom: 8px;
  border-bottom: 1px solid rgba(var(--fg-rgb), 0.16);
}
.forge-panel__title span.forge-panel__count {
  margin-left: auto; letter-spacing: 0; color: #7e8aa8; font-weight: 400;
}

/* ── Материал ──
   Иконка в ромбовидной оправе, название, «есть / надо». Красное число сразу
   показывает, чего именно не хватает: раньше игрок видел только общий отказ
   кнопки и шёл гадать. */
.forge-mat {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 7px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.05);
  background: rgba(255, 255, 255, 0.02);
}
/* Строка материала, у которой есть что рассказать: нажимается и открывает
   карточку «откуда брать». Значок вопроса маленький и приглушённый — он
   приглашает, а не требует внимания. */
.forge-mat--info { cursor: pointer; }
.forge-mat--info:active { background: rgba(255, 255, 255, 0.05); }
.forge-mat__q {
  display: inline-flex; align-items: center; justify-content: center;
  width: 12px; height: 12px; margin-left: 5px;
  border-radius: 50%;
  border: 1px solid rgba(var(--fg-rgb), 0.45);
  color: rgba(var(--fg-rgb), 0.75);
  font-style: normal; font-size: 8px; font-weight: 700; line-height: 1;
  vertical-align: middle;
}
.forge-mat + .forge-mat { margin-top: 5px; }
.forge-mat__icon {
  width: 30px; height: 30px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: 7px;
  border: 1px solid rgba(var(--fg-rgb), 0.28);
  background: radial-gradient(circle at 50% 35%, rgba(var(--fg-rgb), 0.14), rgba(0, 0, 0, 0.55));
  box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.7);
}
.forge-mat__icon img { width: 22px; height: 22px; image-rendering: pixelated; object-fit: contain; }
.forge-mat__name {
  flex: 1; min-width: 0;
  font-size: 11px; color: #c3cee2;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.forge-mat__qty { font-size: 11px; font-weight: 700; flex-shrink: 0; letter-spacing: 0.3px; }
.forge-mat__qty--ok   { color: #52d67f; }
.forge-mat__qty--lack { color: #e7574c; }
.forge-mat__qty i { font-style: normal; color: #6d7690; font-weight: 400; }

/* ── Исход ──
   Строка «редкость + шанс» из правой колонки референса. Полоска слева красит
   строку в цвет редкости — по ней глаз находит нужную быстрее, чем по тексту. */
.forge-out {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 8px 6px 9px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.05);
  background: rgba(255, 255, 255, 0.02);
  position: relative; overflow: hidden;
}
.forge-out + .forge-out { margin-top: 5px; }
.forge-out::before {
  content: '';
  position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--rar, #90aac8);
  box-shadow: 0 0 10px var(--rar, #90aac8);
}
.forge-out--on {
  border-color: var(--rar, #90aac8);
  background: rgba(255, 255, 255, 0.05);
  background: color-mix(in srgb, var(--rar, #90aac8) 12%, transparent);
}
.forge-out--locked { opacity: 0.42; }
.forge-out__icon { width: 20px; flex-shrink: 0; display: flex; justify-content: center; }
.forge-out__name { flex: 1; min-width: 0; font-size: 11px; font-weight: 700; color: var(--rar, #90aac8); }
.forge-out__val  { font-size: 10px; color: #96a3bd; flex-shrink: 0; }

/* ── Кнопка станка ──
   Тяжёлая, во всю ширину, с бегущим бликом. Отключённая — просто холодный
   камень: нажимать нечего, и это видно без чтения подписи. */
.forge-act {
  position: relative;
  width: 100%;
  margin-top: 11px;
  padding: 12px 10px;
  border-radius: 11px;
  font-family: 'Courier New', monospace;
  font-size: 13px; font-weight: 700; letter-spacing: 2px;
  cursor: pointer;
  overflow: hidden;
  color: #fff2dd;
  border: 1.5px solid rgba(var(--fg-rgb), 0.75);
  background:
    linear-gradient(180deg, rgba(var(--fg-rgb), 0.32), rgba(var(--fg-rgb), 0.12) 55%, rgba(0, 0, 0, 0.35)),
    #17121f;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    inset 0 -8px 18px rgba(0, 0, 0, 0.45),
    0 0 18px rgba(var(--fg-rgb), 0.28);
}
.forge-act::after {
  content: '';
  position: absolute; top: 0; bottom: 0; left: -60%;
  width: 45%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.16), transparent);
  transform: skewX(-18deg);
  animation: forge-sheen 3.6s ease-in-out infinite;
}
@keyframes forge-sheen {
  0%, 62% { left: -60%; }
  92%     { left: 120%; }
  100%    { left: 120%; }
}
.forge-act:active { transform: translateY(1px); }
.forge-act:disabled,
.forge-act[disabled] {
  cursor: not-allowed;
  color: #616a80;
  border-color: #262c40;
  background: linear-gradient(180deg, #171b28, #10131d);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  text-shadow: none;
}
.forge-act:disabled::after, .forge-act[disabled]::after { display: none; }
.forge-act__sub {
  display: block;
  margin-top: 3px;
  font-size: 9px; font-weight: 400; letter-spacing: 0.4px;
  color: rgba(255, 255, 255, 0.6);
}
.forge-act:disabled .forge-act__sub { color: #566076; }

/* Причина отказа под кнопкой. */
.forge-why {
  text-align: center;
  font-size: 10px; color: #8794ae;
  margin-top: 6px;
}

/* ── Орбита рун ──
   Кнопки стоят по кругу поверх сцены. Каждая — своя редкость, поэтому цвет
   приходит переменной --rar, как у плиток предметов. */
.forge-orbit { position: absolute; inset: 0; pointer-events: none; }
.forge-orbit__node {
  position: absolute;
  transform: translate(-50%, -50%);
  pointer-events: auto;
  width: 44px; height: 44px;
  padding: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  cursor: pointer;
  border: 1.5px solid rgba(255, 255, 255, 0.14);
  background: radial-gradient(circle at 50% 35%, rgba(10, 10, 22, 0.86), rgba(4, 4, 12, 0.94));
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.7), inset 0 0 10px rgba(0, 0, 0, 0.6);
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.12s;
}
.forge-orbit__node img {
  width: 26px; height: 26px;
  image-rendering: pixelated; object-fit: contain;
}
.forge-orbit__node:active { transform: translate(-50%, -50%) scale(0.94); }
.forge-orbit__node--on {
  border-color: var(--rar, #90aac8);
  box-shadow: 0 0 16px var(--rar, #90aac8), inset 0 0 12px rgba(0, 0, 0, 0.7);
}
.forge-orbit__node--on img { filter: drop-shadow(0 0 6px var(--rar, #90aac8)); }
/* Не по карману: гасим, но не прячем — игрок должен видеть, что дальше есть. */
.forge-orbit__node--locked { opacity: 0.42; }
/* Сколько таких рун уже лежит в запасе. */
.forge-orbit__badge {
  position: absolute; right: -3px; bottom: -3px;
  min-width: 17px; height: 16px; padding: 0 4px;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Courier New', monospace;
  font-size: 9px; font-weight: 700; line-height: 1;
  color: #0a0a14; background: var(--rar, #90aac8);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.85);
}

/* Кольцо-астролябия на руническом станке не нужно: печать на фоне уже состоит
   из колец, и второй набор окружностей поверх неё читался как рябь. */
.forge--rune .forge-ring { display: none; }

/* В логове круг тоже лишний: там не чертят печать, а разбивают скорлупу. */
.forge--den .forge-ring { display: none; }

/* Центр рунического круга уже общего слота: вокруг стоят руны, и слот в 96px
   налезал бы на нижние. */
.forge--rune .forge-core { width: 78px; height: 78px; }
.forge--rune .forge-core img { width: 42px; height: 42px; }

@media (max-width: 340px) {
  .forge-orbit__node { width: 38px; height: 38px; }
  .forge-orbit__node img { width: 22px; height: 22px; }
}

/* Сцена с орбитой выше обычной, и это не украшательство. Узел стоит на 88 от
   центра и сам в 44 — значит от середины сцены до низа нижнего узла 110, а под
   ним ещё подпись. При общих 232px подпись ложилась руне на лицо: игрок видел
   значок наполовину и не видел цифру. Половина высоты + 110 + подпись — отсюда
   276; подпись тут прижата теснее, ей не над чем висеть. */
/* Селектор двойной (.forge-stage.forge-stage--orbit), и это не украшательство:
   ниже по файлу узким экранам задаётся `.forge-stage { height: 200px }`, а вес
   у одиночного класса тот же — побеждал бы просто последний. При 200px нижний
   узел вылезал за сцену и обрезался её же `overflow: hidden`. */
.forge-stage.forge-stage--orbit { height: 276px; }
.forge-stage.forge-stage--orbit .forge-stage__foot { padding: 6px 0 7px; }
@media (max-width: 340px) {
  /* Узлы там мельче (38px), радиус прежний. */
  .forge-stage.forge-stage--orbit { height: 268px; }
}

/* ── Силуэт снаряжения ──
   Раскладка повторяет фигуру: шлем над головой, оружие в левой руке, кольцо
   в правой, сапоги внизу. Именно она делает очевидным, что сет — это восемь
   отдельных вещей, а не одна покупка.

   Сетка именованная: переставить слот — значит поменять одну букву в схеме,
   а не пересчитывать номера строк и колонок. */
/* Затемнение под силуэтом. Обелиск на фоне светит вертикальным лучом ровно
   там, где стоит средняя колонка слотов, и значки на нём выцветали до
   неразличимых контуров. Гасим кадр под сеткой — сцена остаётся видна по
   краям, а вещи получают спокойную подложку. */
.forge-doll::before {
  content: '';
  position: absolute; left: 50%; top: 50%;
  width: 214px; height: 226px;
  transform: translate(-50%, -50%);
  margin-top: -12px;
  border-radius: 22px;
  pointer-events: none;
  background: radial-gradient(60% 55% at 50% 50%, rgba(3, 5, 12, 0.88), rgba(3, 5, 12, 0.55) 70%, transparent 100%);
}
.forge-doll {
  position: absolute; inset: 0;
  display: grid;
  grid-template-columns: repeat(3, 46px);
  grid-template-rows: repeat(4, 46px);
  gap: 6px;
  align-content: center; justify-content: center;
  /* Приподнимаем: внизу сцены лежит подпись со счётом частей. */
  padding-bottom: 24px;
  grid-template-areas:
    ".      helmet ."
    "weapon body   ring"
    "gloves legs   belt"
    ".      boots  .";
}
.forge-doll__slot {
  position: relative;
  padding: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: 9px;
  cursor: pointer;
  border: 1.5px dashed rgba(255, 255, 255, 0.3);
  /* Подложка почти непрозрачная НАМЕРЕННО: силуэт стоит поверх светящегося
     обелиска, и на просвечивающих клетках значки выцветали до контуров —
     понять, какая вещь куда, было нельзя. Полупрозрачность красивее, но
     здесь она стоила читаемости главного экрана станка. */
  background: rgba(6, 9, 18, 0.94);
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.75), 0 2px 10px rgba(0, 0, 0, 0.6);
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.1s;
}
.forge-doll__slot img {
  width: 32px; height: 32px;
  object-fit: contain; image-rendering: pixelated;
  /* Даже недоступная вещь обязана быть узнаваемой: гасим её рамкой и общей
     прозрачностью слота, а не самим значком. */
  opacity: 0.9;
}
.forge-doll__slot:active { transform: translateY(1px); }
/* Вещь уже добыта: сплошная рамка цвета сета и полный значок. */
.forge-doll__slot--own {
  border-style: solid;
  border-color: var(--set, #e74c3c);
  background: rgba(6, 9, 18, 0.94);
  box-shadow: 0 0 12px var(--set, #e74c3c), inset 0 0 10px rgba(0, 0, 0, 0.5);
}
.forge-doll__slot--own img { opacity: 1; filter: drop-shadow(0 0 5px var(--set, #e74c3c)); }
/* Хватает материалов — рамка цветная, но пунктирная: место ещё пустое. */
.forge-doll__slot--open { border-color: var(--set, #e74c3c); }
.forge-doll__slot--open img { opacity: 1; }
/* Не хватает — слот гаснет, но остаётся виден: сет должен читаться целиком. */
.forge-doll__slot--shut { opacity: 0.62; }
.forge-doll__slot--shut img { opacity: 0.72; }
.forge-doll__tick {
  position: absolute; top: -5px; right: -5px;
  width: 16px; height: 16px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: #0b0b16;
  border: 1px solid var(--set, #e74c3c);
}

/* Сцена сетов выше остальных: силуэт в четыре ряда в 232px не помещается. */
.forge--void .forge-stage { height: 262px; }
/* И кольцо ему велико — оно обрамляло бы силуэт по диагонали. */
.forge--void .forge-ring { display: none; }

@media (max-width: 340px) {
  .forge-doll { grid-template-columns: repeat(3, 42px); grid-template-rows: repeat(4, 42px); }
  .forge-doll__slot img { width: 26px; height: 26px; }
  .forge--void .forge-stage { height: 244px; }
}

/* ── Поляна ──
   Звери стоят на траве внизу сцены, а не висят по центру: полянка нарисована
   с землёй в нижней трети, и фигурки обязаны стоять именно там, иначе они
   парят в воздухе. Средний вынесен вперёд и крупнее — три одинаковые фигурки
   в ряд читаются как список, а не как поляна. */
.forge-glade {
  position: absolute; left: 0; right: 0; bottom: 34px;
  display: flex; align-items: flex-end; justify-content: center;
  gap: 12px;
  pointer-events: none;
}
.forge-glade__spot {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  /* Мягкая тень под лапами — без неё зверь не касается земли. */
  filter: drop-shadow(0 4px 5px rgba(0, 0, 0, 0.75));
}
.forge-glade__spot--fore { margin-bottom: -6px; }
.forge-glade__name {
  margin-top: 2px;
  padding: 1px 5px;
  border-radius: 8px;
  font-size: 8px; font-weight: 700; letter-spacing: 0.3px;
  color: var(--tier, #cfe0b8);
  /* Подпись лежит прямо на траве, и одной тени ей не хватало: имя тонуло в
     светлом пятне поляны. Тёмная плашка читается на любом фоне. */
  background: rgba(4, 8, 4, 0.72);
  text-shadow: 0 1px 2px #000;
  white-space: nowrap;
}
/* Спрайт рисуется покадрово из листа — сглаживание превратило бы пиксели в кашу. */
.forge-glade .pet-sprite-anim { image-rendering: pixelated; }

/* На поляне подпись снизу лежит поверх травы, и стандартной подложки мало. */
.forge--den .forge-stage__foot { padding-top: 20px; }

/* ── Расходник ──
   Камень мастера, камень слияния, камни защиты. Раньше это была строка с
   системным чекбоксом — расходник выглядел как настройка, а не как предмет,
   который у тебя лежит в сумке. Теперь карточка: иконка в оправе, счётчик
   и переключатель-пилюля вместо квадратика.

   Включённый расходник светится цветом станка: при взгляде на экран сразу
   видно, приложен камень к следующему крафту или нет. */
.forge-use {
  display: flex; align-items: flex-start; gap: 9px;
  padding: 9px 10px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  background: rgba(255, 255, 255, 0.02);
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}
.forge-use + .forge-use { margin-top: 6px; }
.forge-use--on {
  border-color: rgba(var(--fg-rgb), 0.6);
  background: rgba(var(--fg-rgb), 0.07);
  box-shadow: 0 0 14px rgba(var(--fg-rgb), 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.forge-use--empty { opacity: 0.72; }
.forge-use__icon {
  position: relative;
  width: 38px; height: 38px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: 9px;
  border: 1px solid rgba(var(--fg-rgb), 0.3);
  background: radial-gradient(circle at 50% 32%, rgba(var(--fg-rgb), 0.18), rgba(0, 0, 0, 0.6));
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.7);
}
.forge-use__icon img { width: 26px; height: 26px; image-rendering: pixelated; object-fit: contain; }
/* Счётчик — как на стопке предметов в инвентаре. */
.forge-use__n {
  position: absolute; right: -5px; bottom: -5px;
  min-width: 18px; height: 17px; padding: 0 4px;
  border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 700; line-height: 1;
  color: #0a0a14; background: var(--fg-soft);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
}
.forge-use--empty .forge-use__n { background: #4a5164; color: #0a0a14; }
.forge-use__txt { flex: 1; min-width: 0; }
.forge-use__name { font-size: 11px; font-weight: 700; color: var(--fg-soft); }
.forge-use__hint { font-size: 9px; color: #7e8aa8; margin-top: 3px; line-height: 1.4; }
.forge-use__hint a { color: var(--fg-soft); cursor: pointer; text-decoration: underline; }

/* Переключатель-пилюля. Крупнее системного квадратика — по нему попадают
   пальцем, а не ногтем. */
.forge-use__switch {
  margin-top: 7px;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px 4px 6px;
  border-radius: 20px;
  cursor: pointer;
  font-size: 10px; font-weight: 700;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.03);
  color: #8794ae;
}
.forge-use__switch::before {
  content: ''; width: 13px; height: 13px; border-radius: 4px;
  border: 1.5px solid rgba(255, 255, 255, 0.25);
  background: transparent;
}
.forge-use--on .forge-use__switch {
  border-color: var(--fg);
  background: rgba(var(--fg-rgb), 0.16);
  color: var(--fg-soft);
}
.forge-use--on .forge-use__switch::before {
  border-color: var(--fg);
  background: var(--fg);
  box-shadow: inset 0 0 0 2px #0d0d1a;
}

/* ── Полоса заполнения (гармония нитей / алтарь наполнен) ── */
.forge-gauge { margin-top: 9px; }
.forge-gauge__row {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 9px; letter-spacing: 0.6px; color: #8794ae;
  margin-bottom: 4px;
}
.forge-gauge__row b { color: var(--fg-soft); font-size: 10px; }
.forge-gauge__bar {
  height: 6px; border-radius: 4px; overflow: hidden;
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.forge-gauge__fill {
  height: 100%;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--fg-deep), var(--fg), var(--fg-soft));
  box-shadow: 0 0 10px rgba(var(--fg-rgb), 0.6);
  transition: width 0.35s ease;
}

/* ── Ступень кузнеца ──
   Имя ступени слева, уровень мастерства справа. Крупно: это ответ на вопрос
   «кто я как кузнец», а не служебная строка. */
.forge-rank { display: flex; align-items: baseline; gap: 8px; }
.forge-rank__name {
  flex: 1; min-width: 0;
  font-size: 13px; font-weight: 700; letter-spacing: 0.5px;
  color: var(--fg-soft);
  text-shadow: 0 0 10px rgba(var(--fg-rgb), 0.35);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.forge-rank__lv {
  flex-shrink: 0;
  font-size: 17px; font-weight: 700; color: var(--fg);
  text-shadow: 0 0 12px rgba(var(--fg-rgb), 0.5);
}
.forge-rank__lv i { font-style: normal; font-size: 10px; color: #6d7690; }
.forge-rank__note { font-size: 9px; color: #7e8aa8; margin-top: 5px; line-height: 1.45; }

/* Запас редких материалов: три колонки в строку. Игрок должен видеть, ради
   чего он ходит в подземелье, не открывая инвентарь. */
.forge-stock { display: flex; gap: 5px; margin-top: 8px; }
.forge-stock__cell {
  flex: 1; min-width: 0; text-align: center;
  padding: 5px 2px;
  border-radius: 7px;
  border: 1px solid rgba(255, 255, 255, 0.05);
  background: rgba(255, 255, 255, 0.02); position: relative;
}
/* Ячейка запаса, по которой можно нажать за объяснением. */
.forge-stock__cell--info { cursor: pointer; }
.forge-stock__cell--info:active { background: rgba(255, 255, 255, 0.06); }
.forge-stock__cell--info::after {
  content: '?';
  position: absolute; top: 3px; right: 5px;
  font-size: 8px; font-weight: 700;
  color: rgba(var(--fg-rgb), 0.5);
}
.forge-stock__n { font-size: 13px; font-weight: 700; line-height: 1.2; }
.forge-stock__t {
  font-size: 8px; color: #6d7690; letter-spacing: 0.3px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Строка «что дальше» перед кнопкой перехода на ступень. */
.forge-next {
  margin-top: 9px; padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  font-size: 10px; color: #8794ae; line-height: 1.45;
}
.forge-next b { color: var(--fg-soft); }

/* Уменьшенный вариант кнопки — для второстепенных действий внутри панели. */
.forge-act--sm {
  margin-top: 8px;
  padding: 8px;
  font-size: 11px; letter-spacing: 1px;
}
.forge-act--sm::after { display: none; }

/* ── Ряд фишек выбора (редкость, вкладываемые вещи) ── */
.forge-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.forge-chip {
  padding: 5px 9px;
  border-radius: 7px;
  font-family: 'Courier New', monospace;
  font-size: 10px;
  cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.09);
  background: rgba(255, 255, 255, 0.03);
  color: #9fb0c8;
  transition: border-color 0.15s, background 0.15s;
}
.forge-chip--on {
  border-color: var(--fg);
  background: rgba(var(--fg-rgb), 0.16);
  color: var(--fg-soft);
  box-shadow: 0 0 10px rgba(var(--fg-rgb), 0.25);
}
.forge-chip--warn { border-color: #7a5a20; color: #e0a53c; }

/* ── Карточка рецепта (руны, камни, питомцы) ──
   Те же панели, что у станков, но без сцены: это простые «отдай материалы —
   получи вещь», а разводить под каждый камень отдельный алтарь незачем. */
.forge-recipe { margin-bottom: 10px; }
.forge-recipe .forge-panel { margin-top: 0; }
.forge-recipe__head {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 9px;
}
.forge-recipe__head > img {
  width: 34px; height: 34px; flex-shrink: 0;
  image-rendering: pixelated; object-fit: contain;
}
.forge-recipe__txt { flex: 1; min-width: 0; }
.forge-recipe__name {
  display: flex; align-items: baseline; gap: 6px;
  font-size: 12px; font-weight: 700; color: #dbe3f2;
}
.forge-recipe__desc { font-size: 10px; color: #7e8aa8; margin-top: 2px; line-height: 1.35; }

/* ── Плитка предмета ──
   Раньше вложения выбирались строчками текста «Шлем +0 Lv.12» — игрок не видел
   ни вещи, ни её редкости и выбирал вслепую. Теперь это карточка: иконка в
   оправе цвета редкости, уровень, заточка. Выбранная светится и получает
   галочку в углу, ценная (с заточкой, рунами или эволюцией) — предупреждающий
   уголок, потому что при ковке всё это сгорает.

   Цвет редкости приходит переменной --rar. Перед каждым color-mix идёт
   простая подложка: в старых WebView (а Telegram живёт в системном) color-mix
   может не поддерживаться, и без запасной строки карточка осталась бы вовсе
   без фона. */
.forge-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
  gap: 6px;
}
.forge-tile {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  padding: 7px 3px 6px;
  border-radius: 9px;
  cursor: pointer;
  font-family: 'Courier New', monospace;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.025);
  background: linear-gradient(180deg,
              color-mix(in srgb, var(--rar, #90aac8) 9%, transparent),
              rgba(255, 255, 255, 0.02));
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.1s;
}
.forge-tile:active { transform: translateY(1px); }
.forge-tile img {
  width: 34px; height: 34px;
  object-fit: contain; image-rendering: pixelated;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.8));
}
.forge-tile__name {
  font-size: 9px; line-height: 1.2; color: #a9b6cc;
  max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.forge-tile__lv { font-size: 9px; font-weight: 700; color: var(--rar, #90aac8); }
.forge-tile__st { font-size: 9px; font-weight: 700; color: #a78bfa; }

/* Выбрана: рамка в полную силу, свечение и галочка в углу. */
.forge-tile--on {
  border-color: var(--rar, #90aac8);
  box-shadow: 0 0 0 1px var(--rar, #90aac8), 0 0 14px rgba(0, 0, 0, 0.5);
  background: rgba(255, 255, 255, 0.06);
  background: linear-gradient(180deg,
              color-mix(in srgb, var(--rar, #90aac8) 26%, transparent),
              rgba(255, 255, 255, 0.03));
}
.forge-tile__pin {
  position: absolute; top: -5px; right: -5px;
  width: 17px; height: 17px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: #12121e;
  border: 1px solid var(--rar, #90aac8);
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.8);
}
/* Ценная вещь: при ковке сгорит вместе с заточкой и рунами. */
.forge-tile--precious { border-color: #7a5a20; }
.forge-tile--precious .forge-tile__name { color: #d99a3c; }
/* Надета — зелёная точка сверху слева. */
.forge-tile__worn {
  position: absolute; top: 5px; left: 5px;
  width: 6px; height: 6px; border-radius: 50%;
  background: #2ecc71; box-shadow: 0 0 6px rgba(46, 204, 113, 0.9);
}

/* Прокручиваемый список выбора не должен съедать весь экран. */
.forge-scroll { max-height: 148px; overflow-y: auto; padding-right: 2px; }
.forge-scroll::-webkit-scrollbar { width: 3px; }
.forge-scroll::-webkit-scrollbar-thumb { background: rgba(var(--fg-rgb), 0.3); border-radius: 3px; }

/* Мелкая предупреждающая строка (что потеряется). */
.forge-warn {
  display: flex; align-items: flex-start; gap: 5px;
  margin-top: 7px;
  font-size: 9px; line-height: 1.4; color: #d99a3c;
}

/* Экраны уже 340px (старые узкие телефоны): сцена ниже, слот меньше. */
@media (max-width: 340px) {
  .forge-stage { height: 200px; }
  .forge-ring  { width: 168px; height: 168px; margin: -84px 0 0 -84px; }
  .forge-ring--rev { width: 130px; height: 130px; margin: -65px 0 0 -65px; }
  .forge-core  { width: 84px; height: 84px; }
  .forge-altar--multi .forge-core { width: 58px; height: 58px; }
}