/* v5.7 (редизайн 10 октября 2026): HUD В БОЮ в наборе «Кузня у края Бездны» (tools/art/UI_MASTER_PROMPT.md).
   Расположение и размеры элементов — прежние (игроки привыкли); меняется только материал: плиты, гнёзда, колпачки клавиш,
   пиксельные полосы, шрифты. Пиксельные детали — js/nskit.js (--k-well, --k-btn…, свои --k-hud-*), поэтому всё под
   html.ns.nskit. Весь HUD масштабируется (--uis / --uisb), так что «3 px» здесь — пиксель интерфейса до масштаба. */

html.ns.nskit {
  --k-hud-ol: 0 3px 0 var(--k-ink), 2px 0 0 var(--k-ink), -2px 0 0 var(--k-ink), 0 -2px 0 var(--k-ink);
  --k-hud-ol-s: 0 2px 0 var(--k-ink), 1px 0 0 var(--k-ink), -1px 0 0 var(--k-ink), 0 -1px 0 var(--k-ink);
}

/* =====================================================================================================================
   НИЖНЯЯ ПАНЕЛЬ: плита (жизни, уровень, полосы, золото), гнёзда способностей, кнопка «Предметы»
   ===================================================================================================================== */
/* плита HUD: рамка 9 px (раньше 2 + отступ 8 — размер прежний) */
html.ns.nskit #hud #vitals {
  border: 9px solid transparent; border-image: var(--k-hud-plate) 9 fill / 9px / 0 stretch; image-rendering: pixelated;
  background: none; box-shadow: 0 6px 0 rgba(0, 0, 0, .45); padding: 1px 3px 1px 1px; gap: 10px;
}
/* жизни: сердце и число, под ними подпись */
html.ns.nskit #hud #lives {
  display: grid; grid-template-columns: auto auto; justify-content: center; align-items: center; column-gap: 4px; row-gap: 1px; min-width: 54px;
  color: #f2a196; font: 800 calc(20px * var(--fs, 1)) / 1 var(--k-font); font-variant-numeric: tabular-nums; text-shadow: var(--k-hud-ol-s);
}
html.ns.nskit #hud #lives .hrt { display: block; width: 27px; height: 24px; font-size: 0; background: var(--k-hud-heart) center / 27px 24px no-repeat; image-rendering: pixelated; }
html.ns.nskit #hud #lives small { grid-column: 1 / -1; display: block; text-align: center; color: var(--k-text-3); font: 600 calc(11px * var(--fs, 1)) / 1.1 var(--k-font); text-shadow: none; }
/* уровень — гнездо с золотым числом и золотой оправой */
html.ns.nskit #hud #lvl {
  border: 6px solid transparent; border-image: var(--k-well) 6 fill / 6px / 0 stretch; image-rendering: pixelated; background: none;
  box-shadow: 0 0 0 3px var(--k-gold-lo); color: var(--k-gold-hi); text-shadow: 0 3px 0 var(--k-ink);
  font: 800 calc(22px * var(--fs, 1)) / 1 var(--k-font); font-variant-numeric: tabular-nums; letter-spacing: 0;
}
/* полосы здоровья и опыта — одно гнездо: тень сверху-слева, светлая грань снизу-справа (углы срезаны) */
html.ns.nskit #hud .bars { background: var(--k-ink); box-shadow: -3px -3px 0 0 var(--k-ink), 3px 3px 0 0 #3a3346; }
html.ns.nskit #hud #hpbar { height: 24px; border: 0; box-shadow: none; background: #2a0d12; }
html.ns.nskit #hud #hpbar::after { background: repeating-linear-gradient(90deg, transparent 0 calc(10% - 3px), rgba(8, 7, 11, .55) calc(10% - 3px) 10%); }
html.ns.nskit #hud #hpfill { background: linear-gradient(#ff9a8a 0 3px, #d84a3f 3px calc(100% - 6px), #a12a2c calc(100% - 6px) calc(100% - 3px), #7a1a22 calc(100% - 3px)); }
html.ns.nskit #hud #hptrail { background: linear-gradient(#fff3cc 0 3px, #f3d897 3px calc(100% - 3px), #a37a36 calc(100% - 3px)); opacity: 1; }
html.ns.nskit #hud #shfill { height: 3px; background: #eaf6ff; z-index: 1; }
html.ns.nskit #hud #hptext {
  z-index: 2; line-height: 24px; color: #fff; text-shadow: var(--k-hud-ol-s);
  font: 800 calc(15px * var(--fs, 1)) / 24px var(--k-font); font-variant-numeric: tabular-nums; letter-spacing: 0;
}
html.ns.nskit #hud #xpbar { height: 9px; border: 0; border-top: 3px solid var(--k-ink); box-shadow: none; background: #0e1824; }
html.ns.nskit #hud #xpfill { background: linear-gradient(#a8dcff 0 3px, #3f8fd6 3px); }
/* золото: пиксельная монета и крупное число */
html.ns.nskit #hud #gold {
  gap: 9px; min-width: 92px; color: var(--k-gold-hi); text-shadow: var(--k-hud-ol);
  font: 800 calc(28px * var(--fs, 1)) / 1 var(--k-font); font-variant-numeric: tabular-nums; letter-spacing: 0;
}
html.ns.nskit #hud #gold::before { width: 27px; height: 27px; border-radius: 0; background: var(--k-coin) center / 27px 27px no-repeat; box-shadow: none; image-rendering: pixelated; }
@keyframes k-hud-gold { 0% { transform: scale(1.25); color: #fff; } 50% { transform: scale(1.1); } 100% { transform: scale(1); } }
html.ns.nskit #hud #gold.up { animation: k-hud-gold .15s steps(3); }

/* гнёзда способностей: вдавленное гнездо (--k-well, рамка 6 px), значок 48 px заходит на внутреннюю кромку на 2 px —
   видно 4 px рамки, как раньше (56 = 4 + 48 + 4); снаружи — контур 3 px и тень */
html.ns.nskit #hud .ab {
  border: 6px solid transparent; border-image: var(--k-well) 6 fill / 6px / 0 stretch; image-rendering: pixelated; background: none; overflow: visible;
  box-shadow: 0 0 0 3px var(--k-ink), 0 6px 0 3px rgba(0, 0, 0, .4); outline: 0; animation: none;
}
html.ns.nskit #hud .ab img { left: -2px; top: -2px; width: 48px; height: 48px; image-rendering: pixelated; }
html.ns.nskit #hud .ab .cd { left: -2px; top: -2px; right: -2px; bottom: -2px; }
html.ns.nskit #hud .ab.dash img { left: -4px; top: -4px; }
html.ns.nskit #hud .ab.dash .cd { left: -4px; top: -4px; right: -4px; bottom: -4px; }
/* колпачок клавиши — в левом верхнем углу, поверх оправы */
html.ns.nskit #hud .ab .key {
  top: -10px; left: -10px; right: auto; bottom: auto; z-index: 3; min-width: 15px; box-sizing: border-box; text-align: center; white-space: nowrap;
  border-style: solid; border-color: transparent; border-width: 3px 3px 6px; border-image: var(--k-hud-key) 3 3 6 3 fill / 3px 3px 6px 3px / 0 stretch; image-rendering: pixelated;
  background: none; padding: 0 2px; color: #1a1408; text-shadow: none; letter-spacing: 0; text-transform: none;
  font: 800 calc(9px * var(--fs, 1)) / calc(11px * var(--fs, 1)) var(--k-font);
}
html.ns.nskit #hud .ab.dash .key { left: 50%; top: -18px; transform: translateX(-50%); }
/* число на значке: заряды — в углу; секунды перезарядки (E, R-ульта) — крупно по центру */
html.ns.nskit #hud .ab .ch {
  z-index: 2; top: auto; left: auto; right: -2px; bottom: -3px; color: #fff; text-shadow: var(--k-hud-ol-s);
  font: 800 calc(14px * var(--fs, 1)) / 1 var(--k-font); font-variant-numeric: tabular-nums; letter-spacing: 0;
}
html.ns.nskit #hud :is(#ab-e, #ab-q) .ch { inset: -2px; display: flex; align-items: center; justify-content: center; font-size: calc(21px * var(--fs, 1)); text-shadow: var(--k-hud-ol); }
html.ns.nskit #hud .ab.locked .ch, html.ns.nskit #hud #ab-q.locked .ch { font-size: calc(12px * var(--fs, 1)); color: var(--k-text-2); text-shadow: var(--k-hud-ol-s); }
html.ns.nskit #hud .ab.locked img { filter: grayscale(.8) brightness(.4); }
/* уровни способности — точки под гнездом */
html.ns.nskit #hud .ab .pips { bottom: -15px; gap: 2px; }
html.ns.nskit #hud .ab .pips i { width: 6px; height: 5px; background: #2b2535; border: 1px solid var(--k-ink); box-shadow: none; }
html.ns.nskit #hud .ab .pips.p10 { gap: 1px; }
html.ns.nskit #hud .ab .pips.p10 i { width: 4px; }
html.ns.nskit #hud .ab .pips i.on { background: var(--k-gold-hi); }
html.ns.nskit #hud .ab.ult .pips i.on { background: var(--k-violet-hi); }
html.ns.nskit #hud .ab .pips .lvn { color: var(--k-gold-hi); font: 800 calc(10px * var(--fs, 1)) / 6px var(--k-font); text-shadow: var(--k-hud-ol-s); }
/* ульта: фиолетовая оправа (Бездна), готова — яркая фиолетовая; украдена (Фокусник) — зелёная */
html.ns.nskit #hud .ab.ult { box-shadow: 0 0 0 3px #3e2468, 0 6px 0 3px rgba(0, 0, 0, .4); }
html.ns.nskit #hud .ab.ult.ready { box-shadow: 0 0 0 3px var(--k-violet), 0 0 0 6px var(--k-ink), 0 9px 0 6px rgba(0, 0, 0, .35); }
html.ns.nskit #hud .ab.ult.stolen { box-shadow: 0 0 0 3px var(--k-life), 0 0 0 6px var(--k-ink), 0 9px 0 6px rgba(0, 0, 0, .35); }
/* свободное очко навыка: золотая оправа (без мигания) и золотая плитка «+» над гнездом */
html.ns.nskit #hud .ab.learn { box-shadow: 0 0 0 3px var(--k-gold), 0 0 0 6px var(--k-ink), 0 9px 0 6px rgba(0, 0, 0, .35); animation: none; }
html.ns.nskit #hud .ab.learn .key { color: #1a1408; font-size: calc(9px * var(--fs, 1)); }
@keyframes k-hud-bob { 0%, 49% { transform: translateX(-50%); } 50%, 100% { transform: translateX(-50%) translateY(-3px); } }
html.ns.nskit #hud .ab .lvup {
  top: -36px; width: 27px; height: 24px; padding: 0; overflow: visible;
  border-style: solid; border-color: transparent; border-width: 6px 6px 9px; border-radius: 0; border-image: var(--k-btn-gold) 6 6 9 fill / 6px 6px 9px / 0 stretch; image-rendering: pixelated;
  background: none; box-shadow: none; color: var(--k-on-gold); text-shadow: 0 2px 0 rgba(255, 240, 200, .35);
  font: 800 18px / 9px var(--k-font); animation: k-hud-bob 1s linear infinite;
}
html.ns.nskit #hud .ab .lvup:hover { border-image-source: var(--k-btn-gold-hi); background: none; box-shadow: none; }
html.ns.nskit #hud .ab .lvup:active { border-image-source: var(--k-btn-gold-dn); }
/* на «+» — колпачок цифры (1 ЛКМ, 2 ПКМ, 3 E, 4 R) */
html.ns.nskit #hud .ab .lvup::after {
  right: -15px; top: -12px; min-width: 15px; height: auto; box-sizing: border-box; padding: 0 1px; background: none; box-shadow: none;
  border-style: solid; border-color: transparent; border-width: 3px 3px 6px; border-image: var(--k-hud-key) 3 3 6 3 fill / 3px 3px 6px 3px / 0 stretch; image-rendering: pixelated;
  color: #1a1408; font: 800 10px / 11px var(--k-font); text-shadow: none;
}
/* автоатака / автоприменение (ПКМ по значку) — бегущий зелёный пунктир (основа — style.css): штрихи 3 px по тёмному контуру
   гнезда, шаг 3 px; у оправы «можно прокачать» и готовой ульты — снаружи неё (по тёмному кольцу); у неготовой ульты промежутки —
   цвета её оправы */
html.ns.nskit #hud .ab.auto { --aa-w: 3px; --aa-t: 12px; --aa: #3fcf5c; --aa-hi: #b4ffb0; --aa-gap: var(--k-ink); }
html.ns.nskit #hud .ab.ult.auto:not(.ready, .stolen) { --aa-gap: #3e2468; }
html.ns.nskit #hud .ab.auto::before { inset: -9px; }
html.ns.nskit #hud .ab.auto:is(.ult.ready, .learn, .ult.stolen)::before { inset: -12px; }
/* наблюдение: значок вспыхивает, когда наблюдаемый нажал способность */
html.ns.nskit #hud .ab.press { box-shadow: 0 0 0 3px #fff, 0 6px 0 3px rgba(0, 0, 0, .4); }

/* «Предметы»: тёмная плита (открыто — золотая); подпись обычным регистром — из CSS (в разметке «ПРЕДМЕТЫ» капсом) */
html.ns.nskit #hud #invbtn {
  border-style: solid !important; border-color: transparent !important; border-width: 6px 6px 9px !important; border-radius: 0;
  border-image: var(--k-btn) 6 6 9 fill / 6px 6px 9px / 0 stretch !important; background: none !important; box-shadow: none !important; image-rendering: pixelated;
  padding: 1px 10px 0 !important; color: var(--k-text); text-shadow: 0 2px 0 rgba(0, 0, 0, .45); letter-spacing: 0; text-transform: none;
  font: 600 0 / 1.25 var(--k-font); transition: none;
}
html.ns.nskit #hud #invbtn::before { content: 'Предметы'; font: 600 calc(14px * var(--fs, 1)) / 1.25 var(--k-font); }
html.ns.nskit[lang="en"] #hud #invbtn::before { content: 'Items'; }
html.ns.nskit #hud #invbtn b { margin-left: 7px; color: var(--k-gold-hi); font: 800 calc(14px * var(--fs, 1)) / 1.25 var(--k-font); font-variant-numeric: tabular-nums; }
html.ns.nskit #hud #invbtn:hover { border-image-source: var(--k-btn-hi) !important; color: #fff; }
html.ns.nskit #hud #invbtn:hover::after { content: ''; position: absolute; left: -3px; top: 50%; width: 3px; height: 12px; margin-top: -6px; background: var(--k-violet-hi); box-shadow: 0 3px 0 var(--k-violet); }
html.ns.nskit #hud #invbtn:active { border-image-source: var(--k-btn-dn) !important; transform: translateY(3px); }
html.ns.nskit #hud #invbtn.on { border-image-source: var(--k-btn-gold) !important; color: var(--k-on-gold); text-shadow: 0 2px 0 rgba(255, 240, 200, .35); }
html.ns.nskit #hud #invbtn.on b { color: #5a3a0e; }
html.ns.nskit #hud #invbtn.on:hover { border-image-source: var(--k-btn-gold-hi) !important; }
html.ns.nskit #hud #invbtn.on:hover::after { display: none; }
/* сетка предметов: вложенный блок; ячейка — тёмное гнездо, снизу — полоска цвета редкости (цвет ставит ui.js) */
html.ns.nskit #hud #inv {
  border: 6px solid transparent; border-image: var(--k-block) 6 fill / 6px / 0 stretch; image-rendering: pixelated; background: none; box-shadow: none;
  padding: 3px; gap: 3px; overflow: hidden auto; scrollbar-width: thin; filter: drop-shadow(0 6px 0 rgba(0, 0, 0, .45));
}
html.ns.nskit #hud #inv .it { border: 0; border-bottom: 3px solid; background: var(--k-0); box-shadow: inset 0 3px 0 var(--k-ink); overflow: visible; }
html.ns.nskit #hud #inv .it.empty { border-bottom: 3px solid #1f1b27 !important; background: rgba(14, 12, 18, .6); box-shadow: inset 0 3px 0 rgba(8, 7, 11, .7); }
html.ns.nskit #hud #inv .it.max { box-shadow: inset 0 3px 0 var(--k-ink); }
html.ns.nskit #hud #inv .it img { display: block; width: 24px; height: 24px; margin: 1px 2px 0; }
html.ns.nskit #hud #inv .it b { left: 2px; top: 0; color: var(--k-gold-hi); font: 800 calc(9px * var(--fs, 1)) / 1 var(--k-font); text-shadow: var(--k-hud-ol-s); }
/* наведение — золотые уголки */
html.ns.nskit #hud #inv .it:hover::after {
  content: ''; position: absolute; inset: -3px; pointer-events: none;
  background:
    linear-gradient(var(--k-gold-hi), var(--k-gold-hi)) 0 0 / 9px 3px no-repeat, linear-gradient(var(--k-gold-hi), var(--k-gold-hi)) 0 0 / 3px 9px no-repeat,
    linear-gradient(var(--k-gold-hi), var(--k-gold-hi)) 100% 0 / 9px 3px no-repeat, linear-gradient(var(--k-gold-hi), var(--k-gold-hi)) 100% 0 / 3px 9px no-repeat,
    linear-gradient(var(--k-gold), var(--k-gold)) 0 100% / 9px 3px no-repeat, linear-gradient(var(--k-gold), var(--k-gold)) 0 100% / 3px 9px no-repeat,
    linear-gradient(var(--k-gold), var(--k-gold)) 100% 100% / 9px 3px no-repeat, linear-gradient(var(--k-gold), var(--k-gold)) 100% 100% / 3px 9px no-repeat;
}
/* статусы над панелью: маленькие плашки */
html.ns.nskit #hud #statusfx { gap: 6px; }
html.ns.nskit #hud #statusfx span {
  border: 0; padding: 2px 7px 4px; background: var(--k-1); box-shadow: inset 0 -3px 0 #0b0a0e, 0 0 0 3px var(--k-ink);
  font: 700 calc(12px * var(--fs, 1)) / 1.2 var(--k-font); letter-spacing: 0; text-shadow: none;
}
html.ns.nskit #hud #netinfo { color: var(--k-text-3); font: 600 calc(11px * var(--fs, 1)) / 1 var(--k-font); }

/* =====================================================================================================================
   ВВЕРХУ СПРАВА: круг, арена, «В игре», таблица силы, наблюдатели, серия — вложенные блоки
   ===================================================================================================================== */
html.ns.nskit #hud :is(#zoneinfo, #arenainfo, #alive, #board, #watchers) {
  border: 6px solid transparent; border-image: var(--k-block) 6 fill / 6px / 0 stretch; image-rendering: pixelated;
  background: none; box-shadow: 0 3px 0 rgba(0, 0, 0, .4); color: var(--k-text); text-shadow: 0 2px 0 var(--k-ink);
}
html.ns.nskit #hud #zoneinfo { padding: 1px 4px 3px; font: 600 calc(14px * var(--fs, 1)) / 1.3 var(--k-font); }
html.ns.nskit #hud #zoneinfo b { color: var(--k-gold-hi); font-weight: 800; font-variant-numeric: tabular-nums; }
html.ns.nskit #hud #zoneinfo span[style] { color: var(--k-text-3) !important; font-size: calc(12px * var(--fs, 1)); font-weight: 600; }
/* круг сужается / вы за кругом — фиолетовый (Бездна): текст и засечка слева */
html.ns.nskit #hud #zoneinfo.danger { color: var(--k-violet-hi); box-shadow: inset 3px 0 0 var(--k-violet), 0 3px 0 rgba(0, 0, 0, .4); }
html.ns.nskit #hud #zoneinfo.danger b { color: #fff; }
html.ns.nskit #hud #arenainfo { padding: 1px 4px 3px; color: var(--k-gold); font: 600 calc(14px * var(--fs, 1)) / 1.3 var(--k-font); animation: none; }
html.ns.nskit #hud #arenainfo b { color: var(--k-gold-hi); font-weight: 800; font-variant-numeric: tabular-nums; }
html.ns.nskit #hud #arenainfo.hot { color: #f08a7c; box-shadow: inset 3px 0 0 var(--k-blood), 0 3px 0 rgba(0, 0, 0, .4); }
html.ns.nskit #hud #arenainfo.hot b { color: #ffd9d2; }
html.ns.nskit #hud #alive { padding: 1px 4px 3px; color: var(--k-text-2); font: 600 calc(14px * var(--fs, 1)) / 1.3 var(--k-font); }
html.ns.nskit #hud #alive b { color: var(--k-text); font-weight: 800; font-variant-numeric: tabular-nums; }
/* таблица силы: шапка — ярлыки; строки зеброй; ваша строка — золотая черта слева */
html.ns.nskit #hud #board { padding: 0 0 2px; font: 600 calc(13px * var(--fs, 1)) / 1.25 var(--k-font); text-shadow: 0 2px 0 var(--k-ink); }
html.ns.nskit #hud #board .br { gap: 5px; padding: 2px 5px 2px 6px; }
html.ns.nskit #hud #board .br:nth-child(odd):not(.bh) { background: rgba(255, 255, 255, .035); }
html.ns.nskit #hud #board .br.bh {
  margin: 0 0 2px; padding: 4px 5px 4px 6px; border: 0; box-shadow: inset 0 -3px 0 #0b0a0e; background: rgba(8, 7, 11, .35);
  color: var(--k-text-3); font: 700 calc(10px * var(--fs, 1)) / 1 var(--k-font); letter-spacing: .06em; text-transform: uppercase; text-shadow: none;
}
html.ns.nskit #hud #board .br.bh :is(.pw, .lv, .ul) { color: var(--k-text-3); font: inherit; }
html.ns.nskit #hud #board .br .d { width: 9px; height: 9px; box-shadow: inset -3px -3px 0 rgba(0, 0, 0, .35); }
html.ns.nskit #hud #board .br .n { color: var(--k-text); }
html.ns.nskit #hud #board .br .ul { color: var(--k-text-2); font-weight: 700; font-variant-numeric: tabular-nums; font-family: var(--k-font); }
html.ns.nskit #hud #board .br .pw { color: var(--k-gold-hi); font-weight: 800; font-variant-numeric: tabular-nums; font-family: var(--k-font); }
html.ns.nskit #hud #board .br .lv { color: #f08a7c; font-weight: 700; font-variant-numeric: tabular-nums; font-family: var(--k-font); }
html.ns.nskit #hud #board .br.me { background: rgba(217, 180, 106, .14); box-shadow: inset 3px 0 0 var(--k-gold); }
html.ns.nskit #hud #board .br.me .n { color: var(--k-gold-hi); }
html.ns.nskit #hud #board .br.out { opacity: .45; text-decoration: none; }
html.ns.nskit #hud #board .br.out .n { text-decoration: line-through; text-decoration-thickness: 2px; color: var(--k-text-3); }
html.ns.nskit #hud #board .br.more .n { color: var(--k-text-3); font-style: italic; font-weight: 500; }
html.ns.nskit #hud #board .lead { display: inline-block; width: 21px; height: 18px; margin: 0 4px 0 0; vertical-align: -3px; font-size: 0; background: var(--k-hud-crown) center / 21px 18px no-repeat; image-rendering: pixelated; }
/* кто за кем наблюдает */
html.ns.nskit #hud #watchers { padding: 1px 4px 3px; font: 500 calc(12px * var(--fs, 1)) / 1.3 var(--k-font); color: var(--k-text-2); }
html.ns.nskit #hud #watchers .sh { color: var(--k-text-3); font-weight: 700; }
html.ns.nskit #hud #watchers .me { color: var(--k-gold-hi); }
/* серия убийств: крупное число кровью */
html.ns.nskit #hud #streak { color: var(--k-blood); text-shadow: var(--k-hud-ol); }
html.ns.nskit #hud #streak .n { font: 800 calc(40px * var(--fs, 1)) / 1 var(--k-font); font-variant-numeric: tabular-nums; color: #e9675b; }
html.ns.nskit #hud #streak .l { color: #f2a196; font: 700 calc(12px * var(--fs, 1)) / 1.2 var(--k-font); letter-spacing: .06em; }

/* кнопки паузы и настроек: тёмные плиты с пиксельными значками */
html.ns.nskit #hud .gear {
  display: flex; align-items: center; justify-content: center; padding: 0; line-height: 1;
  border-style: solid; border-color: transparent; border-width: 6px 6px 9px; border-radius: 0; border-image: var(--k-btn) 6 6 9 fill / 6px 6px 9px / 0 stretch; image-rendering: pixelated;
  background: none; box-shadow: none; color: var(--k-text);
}
html.ns.nskit #hud .gear img.ic { width: 24px; height: 24px; margin: 0; opacity: 1; }
html.ns.nskit #hud .gear:hover { border-image-source: var(--k-btn-hi); color: #fff; }
html.ns.nskit #hud .gear:hover::after { content: ''; position: absolute; left: -3px; top: 50%; width: 3px; height: 12px; margin-top: -6px; background: var(--k-violet-hi); box-shadow: 0 3px 0 var(--k-violet); }
html.ns.nskit #hud .gear:active { border-image-source: var(--k-btn-dn); }
/* пинг, FPS и потери — узкая плашка; цвета — из палитры */
html.ns.nskit #hud #perfinfo {
  border: 6px solid transparent; border-image: var(--k-block) 6 fill / 6px / 0 stretch; image-rendering: pixelated; background: none; box-shadow: none;
  padding: 0 4px; color: var(--k-text-3); font: 700 calc(11px * var(--fs, 1)) / 1.5 var(--k-font); letter-spacing: .06em; text-shadow: none;
}
html.ns.nskit #hud #perfinfo b { font-size: calc(13px * var(--fs, 1)); letter-spacing: 0; font-variant-numeric: tabular-nums; }
html.ns.nskit #hud #perfinfo b[style*="125, 255, 106"], html.ns.nskit #hud #perfinfo b[style*="7dff6a"] { color: var(--k-life) !important; }
html.ns.nskit #hud #perfinfo b[style*="255, 208, 64"], html.ns.nskit #hud #perfinfo b[style*="ffd040"] { color: var(--k-gold-hi) !important; }
html.ns.nskit #hud #perfinfo b[style*="255, 80, 80"], html.ns.nskit #hud #perfinfo b[style*="ff5050"] { color: #f08a7c !important; }

/* =====================================================================================================================
   ВНИЗУ СЛЕВА: чат и мини-карта (оправа — плита HUD; холст прежнего размера: 164 px внутри)
   ===================================================================================================================== */
html.ns.nskit #hud #minimap {
  width: 182px; height: 182px; margin: 1px; border: 9px solid transparent; border-image: var(--k-hud-plate) 9 / 9px / 0 stretch;
  box-shadow: 0 6px 0 rgba(0, 0, 0, .45);
}
html.ns.nskit #hud #mmcap {
  width: 182px; margin: 0 1px 6px; padding: 0 3px 3px; border: 6px solid transparent; border-image: var(--k-block) 6 fill / 6px / 0 stretch; image-rendering: pixelated;
  background: none; box-shadow: none; text-transform: none; letter-spacing: .02em; text-shadow: 0 2px 0 var(--k-ink);
  font: 600 calc(13px * var(--fs, 1)) / 1.2 var(--k-title); letter-spacing: 0 !important; white-space: normal; text-wrap: balance; overflow: hidden; text-align: center;
}
html.ns.nskit #hud #chatlog .cm {
  width: fit-content; max-width: 100%; margin-top: 3px; padding: 3px 9px 4px 10px; background: rgba(16, 14, 20, .88);
  box-shadow: inset 3px 0 0 #3d3549, inset 0 -3px 0 rgba(8, 7, 11, .6); color: var(--k-text); text-shadow: 0 1px 0 #000;
  font: 500 calc(14px * var(--fs, 1)) / 1.3 var(--k-font);
}
html.ns.nskit #hud #chatlog .cm b { font-weight: 700; }
html.ns.nskit #hud #chatlog .cm.sys { color: var(--k-text-2); font-style: italic; box-shadow: inset 3px 0 0 #2b2535, inset 0 -3px 0 rgba(8, 7, 11, .6); }
html.ns.nskit #hud #chatlog .cm.cw span { font-weight: 700; }
html.ns.nskit #hud #chat.open #chatlog { background: rgba(8, 7, 11, .55); }
html.ns.nskit #hud #chatin {
  margin-top: 6px; border-style: solid !important; border-color: transparent !important; border-width: 6px !important; border-image: var(--k-well) 6 fill / 6px / 0 stretch !important; image-rendering: pixelated;
  background: none !important; box-shadow: none !important; padding: 2px 6px; outline: 0; color: var(--k-text); font: 500 calc(14px * var(--fs, 1)) / 1.3 var(--k-font);
}
html.ns.nskit #hud #chatin:focus { outline: 3px solid var(--k-gold); outline-offset: 0; }
html.ns.nskit #hud #chatin::placeholder { color: var(--k-text-3); }

/* колесо чата: середина — вложенный блок, фразы — тёмные плиты; выбранная — золотая плита (без увеличения) */
html.ns.nskit #cwheel .cw-hub {
  width: 90px; height: 90px; border-radius: 0; border: 6px solid transparent; border-image: var(--k-block) 6 fill / 6px / 0 stretch; image-rendering: pixelated;
  background: none; box-shadow: none; filter: drop-shadow(0 6px 0 rgba(0, 0, 0, .5)); color: var(--k-text-2); text-shadow: 0 2px 0 var(--k-ink);
  font: 600 13px / 1.2 var(--k-font);
}
html.ns.nskit #cwheel.cw-sel .cw-hub { font-size: 0; }
html.ns.nskit #cwheel.cw-sel .cw-hub::after { content: ''; width: 21px; height: 21px; background: var(--k-dia) center / 21px no-repeat; image-rendering: pixelated; }
html.ns.nskit #cwheel .cw-it {
  padding: 2px 10px 1px; border-style: solid; border-color: transparent; border-width: 6px 6px 9px; border-image: var(--k-btn) 6 6 9 fill / 6px 6px 9px / 0 stretch; image-rendering: pixelated;
  background: none; box-shadow: none; color: var(--c, var(--k-text)); text-shadow: 0 2px 0 rgba(0, 0, 0, .55); font: 600 14px / 1.2 var(--k-font); transition: none;
}
html.ns.nskit #cwheel .cw-it.on { border-image-source: var(--k-btn-gold); color: var(--k-on-gold); text-shadow: 0 2px 0 rgba(255, 240, 200, .35); box-shadow: none; transform: translate(-50%, -50%); }
html.ns.nskit #cwheel .cw-it.r.on { transform: translate(-8%, -50%); }
html.ns.nskit #cwheel .cw-it.l.on { transform: translate(-92%, -50%); }

/* =====================================================================================================================
   ЛЕНТА СОБЫТИЙ, ПОДОБРАННЫЙ ПРЕДМЕТ, ПОДСКАЗКА У ОБЪЕКТА, ПОЛОСКИ (босс, арена, вскрытие), ПРЕДУПРЕЖДЕНИЕ
   ===================================================================================================================== */
/* лента: короткие плашки по ширине текста, слева — черта цвета события (цвет ставит ui.js); фон полупрозрачный (10 окт., просьба владельца) */
html.ns.nskit #hud #feed div {
  width: fit-content; max-width: 100%; margin-bottom: 3px; padding: 4px 10px 6px; border-left: 6px solid; background: rgba(18, 16, 23, .6);
  box-shadow: inset 0 3px 0 rgba(38, 33, 48, .6), inset 0 -3px 0 rgba(11, 10, 14, .6); text-shadow: 0 2px 0 var(--k-ink); font: 600 calc(14px * var(--fs, 1)) / 1.3 var(--k-font);
}
/* подобран предмет: плита с полосой редкости слева; значок 48 px в гнезде; название — антиква; фон полупрозрачный (10 окт., просьба владельца) */
html.ns.nskit #hud .toast {
  gap: 14px; padding: 9px 14px 11px 10px; border: 0; border-left: 9px solid; background: rgba(22, 19, 28, .7);
  box-shadow: inset 0 3px 0 rgba(43, 37, 53, .7), inset 0 -3px 0 rgba(11, 10, 14, .7), 0 0 0 3px rgba(8, 7, 11, .7), 0 9px 0 3px rgba(0, 0, 0, .3);
}
html.ns.nskit #hud .toast img { width: 48px; height: 48px; margin: 2px; border: 0; background: var(--k-0); box-shadow: 0 0 0 3px var(--k-ink), 3px 3px 0 3px #3a3346; }
html.ns.nskit #hud .toast .tg { display: block; color: var(--k-text-3); font: 700 calc(11px * var(--fs, 1)) / 1.2 var(--k-font); letter-spacing: .06em; text-transform: uppercase; text-shadow: none; }
html.ns.nskit #hud .toast .tn { margin: 2px 0 1px; font: 600 calc(23px * var(--fs, 1)) / 1.1 var(--k-title); letter-spacing: .01em; text-shadow: 0 3px 0 var(--k-ink); }
html.ns.nskit #hud .toast .tn span { font-family: var(--k-font); font-weight: 800; font-size: .8em; color: var(--k-gold-hi) !important; }
html.ns.nskit #hud .toast .td { color: var(--k-text); font: 500 calc(14px * var(--fs, 1)) / 1.3 var(--k-font); }
/* подсказка у объекта (святилище): плита, клавиша — колпачок */
html.ns.nskit #hud #prompt {
  border: 6px solid transparent; border-image: var(--k-block) 6 fill / 6px / 0 stretch; image-rendering: pixelated; background: none;
  box-shadow: none; filter: drop-shadow(0 6px 0 rgba(0, 0, 0, .5)); padding: 2px 8px 2px 4px;
}
html.ns.nskit #hud #prompt .pk {
  border-style: solid; border-color: transparent; border-width: 6px 6px 9px; border-image: var(--k-key) 6 6 9 fill / 6px 6px 9px / 0 stretch; image-rendering: pixelated;
  background: none; box-shadow: none; animation: none; color: var(--k-on-gold); font: 800 calc(20px * var(--fs, 1)) / 1 var(--k-font);
}
html.ns.nskit #hud #prompt .pn { color: var(--k-text); font: 600 calc(15px * var(--fs, 1)) / 1.3 var(--k-font); text-shadow: 0 2px 0 var(--k-ink); }
html.ns.nskit #hud #prompt .pp { color: var(--k-gold-hi); font: 800 calc(30px * var(--fs, 1)) / 1.05 var(--k-font); font-variant-numeric: tabular-nums; text-shadow: var(--k-hud-ol); }
html.ns.nskit #hud #prompt .pp i { width: 27px; height: 27px; border-radius: 0; background: var(--k-coin) center / 27px no-repeat; box-shadow: none; image-rendering: pixelated; }
html.ns.nskit #hud #prompt .pp.no { color: #f08a7c; }
html.ns.nskit #hud #prompt .ps { color: var(--k-text-2); font: 500 calc(12px * var(--fs, 1)) / 1.3 var(--k-font); }
/* боссы рядом: имя и пиксельная полоса */
html.ns.nskit #hud #bossbar .bname { color: #f2a196; font: 700 calc(12px * var(--fs, 1)) / 1.2 var(--k-font); text-shadow: var(--k-hud-ol-s); }
html.ns.nskit #hud #bossbar .bbar { height: 9px; border: 0; background: #2a0d12; box-shadow: 0 0 0 3px var(--k-ink); margin: 3px 3px 6px; }
html.ns.nskit #hud #bossbar .bfill { background: linear-gradient(#ff9a8a 0 3px, #c8473c 3px); }
/* дуэль на арене: плашка с таймером и полосками бойцов */
html.ns.nskit #hud #arenabar {
  border: 6px solid transparent; border-image: var(--k-block) 6 fill / 6px / 0 stretch; image-rendering: pixelated; background: none;
  box-shadow: none; filter: drop-shadow(0 6px 0 rgba(0, 0, 0, .45)); padding: 0 8px 2px; color: var(--k-gold); text-shadow: 0 2px 0 var(--k-ink);
}
html.ns.nskit #hud #arenabar .ar-t { font: 700 calc(13px * var(--fs, 1)) / 1.3 var(--k-font); color: var(--k-gold); }
html.ns.nskit #hud #arenabar .ar-time { font: 800 calc(18px * var(--fs, 1)) / 1.2 var(--k-font); font-variant-numeric: tabular-nums; color: #fff; text-shadow: var(--k-hud-ol-s); }
html.ns.nskit #hud #arenabar .ar-time.hot { color: #f08a7c; animation: none; }
html.ns.nskit #hud #arenabar .ar-f { font: 600 calc(11px * var(--fs, 1)) / 1.3 var(--k-font); }
html.ns.nskit #hud #arenabar .ar-bar { height: 6px; border: 0; margin-top: 3px; background: #2a0d12; box-shadow: 0 0 0 2px var(--k-ink); }
html.ns.nskit #hud #arenabar .ar-bar i { background: linear-gradient(#ff9a8a 0 2px, #c8473c 2px); }
html.ns.nskit #hud #arenabar .ar-note { color: var(--k-text-2); font: 500 calc(10px * var(--fs, 1)) / 1.3 var(--k-font); }
/* вскрытие аирдропа: золотая полоса в гнезде */
html.ns.nskit #hud #chanbar .ct { color: var(--k-gold-hi); font: 700 calc(16px * var(--fs, 1)) / 1.2 var(--k-font); text-shadow: var(--k-hud-ol-s); margin-bottom: 6px; }
html.ns.nskit #hud #chanbar .cb { height: 15px; border: 0; background: var(--k-0); box-shadow: -3px -3px 0 0 var(--k-ink), 3px 3px 0 0 #3a3346, 0 0 0 3px var(--k-ink); }
html.ns.nskit #hud #chanbar .cb i { background: linear-gradient(#fff3cc 0 3px, #d9b46a 3px calc(100% - 3px), #8a6428 calc(100% - 3px)); }
/* «вы во тьме»: плашка Бездны; после ×3 — кровью */
@keyframes k-hud-warn { 0%, 49% { opacity: 1; } 50%, 100% { opacity: .78; } }
html.ns.nskit #hud #darkwarn {
  border: 6px solid transparent; border-image: var(--k-block) 6 fill / 6px / 0 stretch; image-rendering: pixelated; background: none; box-shadow: inset 3px 0 0 var(--k-violet);
  padding: 0 10px 1px; color: var(--k-violet-hi); font: 700 calc(15px * var(--fs, 1)) / 1.4 var(--k-font); text-shadow: 0 2px 0 var(--k-ink); animation: k-hud-warn 1s linear infinite;
}
html.ns.nskit #hud #darkwarn.hot { color: #ffd9d2; box-shadow: inset 3px 0 0 var(--k-blood); animation-duration: .5s; }

/* =====================================================================================================================
   ОБЪЯВЛЕНИЯ ПО ЦЕНТРУ: «Двойное убийство» — антиква с жёсткой тенью (без свечения; высота прежняя — не наезжает на #centermsg);
   сообщения (#centermsg) — Manrope с контуром; обратный отсчёт арены — антиква
   ===================================================================================================================== */
html.ns.nskit #hud #announce .an b {
  font: 600 calc(46px * var(--fs, 1)) / 1.05 var(--k-title); letter-spacing: .02em; text-indent: 0; text-transform: none; white-space: nowrap;
  text-shadow: 0 4px 0 var(--k-ink), 3px 0 0 var(--k-ink), -3px 0 0 var(--k-ink), 0 -3px 0 var(--k-ink), 3px 3px 0 var(--k-ink), -3px 3px 0 var(--k-ink);
}
html.ns.nskit #hud #announce .an.t2 b { font-size: calc(52px * var(--fs, 1)); }
html.ns.nskit #hud #announce .an.t3 b { font-size: calc(60px * var(--fs, 1)); }
html.ns.nskit #hud #announce .an:is(.t0, .t1) b { color: #ec6a5c; }
html.ns.nskit #hud #announce .an.t2 b { color: #f3b65a; }
html.ns.nskit #hud #announce .an.t3 b { color: var(--k-violet-hi); }
html.ns.nskit #hud #announce .an > span { font: 600 calc(18px * var(--fs, 1)) / 1.35 var(--k-font); letter-spacing: 0; color: var(--k-text); text-shadow: var(--k-hud-ol-s); }
html.ns.nskit #hud #centermsg { font: 700 calc(22px * var(--fs, 1)) / 1.3 var(--k-font); letter-spacing: 0; text-shadow: var(--k-hud-ol); }
html.ns.nskit #hud:has(#announce .an) #centermsg { margin-top: calc(48px * var(--fs, 1)); } /* подпись объявления («Горыныч») не наезжает на сообщение */
html.ns.nskit #hud #arenacd .cd-n {
  font: 600 112px / 1 var(--k-title); letter-spacing: 0;
  text-shadow: 0 6px 0 var(--k-ink), 4px 0 0 var(--k-ink), -4px 0 0 var(--k-ink), 0 -4px 0 var(--k-ink), 4px 4px 0 var(--k-ink), -4px 4px 0 var(--k-ink), 4px -4px 0 var(--k-ink), -4px -4px 0 var(--k-ink);
}
html.ns.nskit #hud #arenacd .cd-n.fight { font-size: 100px; }
html.ns.nskit #hud #arenacd .cd-s { font: 600 calc(18px * var(--fs, 1)) / 1.3 var(--k-font); letter-spacing: 0; text-shadow: var(--k-hud-ol-s); }
html.ns.nskit #hud #arenacd .cd-ring { box-shadow: none; border-width: 3px; }

/* =====================================================================================================================
   ПОДСКАЗКА ПРЕДМЕТА / СПОСОБНОСТИ (#tooltip) — маленький пергамент: шапка залита цветом редкости (у способности — цветом
   героя; цвет — --tc из ui.bindTip), название — антиква тёмным, ниже — описание; числа тёмно-красным, прибавка следующего
   уровня — тёмно-синим. 13 окт. 2026 (просьба владельца — «шрифт маленький, можно крупнее»): текст 17 → 19.5 px, шире 330 → 400
   ===================================================================================================================== */
html.ns.nskit #tooltip {
  --tc: #8b8398;
  max-width: 400px; padding: 0 0 2px; border: 24px solid transparent; border-image: var(--k-parch) 24 fill / 24px / 0 repeat; image-rendering: pixelated;
  background: none; box-shadow: none; filter: drop-shadow(0 6px 0 rgba(0, 0, 0, .55)); color: var(--k-ink-t);
  font: 500 calc(15px * var(--fs, 1)) / 1.4 var(--k-font); text-shadow: none;
}
html.ns.nskit #tooltip .tn {
  margin: -6px -6px 0; padding: 4px 9px 3px; background: var(--tc); color: #1a1408 !important; text-shadow: 0 1px 0 rgba(255, 255, 255, .25);
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .22); font: 600 calc(22px * var(--fs, 1)) / 1.15 var(--k-title); letter-spacing: .01em;
}
html.ns.nskit #tooltip .tn:has(+ .tr) { box-shadow: none; }
html.ns.nskit #tooltip .tr {
  margin: 0 -6px 6px; padding: 0 9px 6px; background: var(--tc); color: rgba(26, 20, 8, .74) !important; box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .22);
  font: 700 calc(12.5px * var(--fs, 1)) / 1.2 var(--k-font); letter-spacing: .06em; text-transform: uppercase;
}
html.ns.nskit #tooltip .tn + :not(.tr) { margin-top: 6px; }
/* клавиша способности в шапке — колпачок (скобки в старом виде остаются) */
html.ns.nskit #tooltip .tk {
  display: inline-block; vertical-align: 2px; margin-right: 4px; min-width: 15px; box-sizing: border-box; text-align: center;
  border-style: solid; border-color: transparent; border-width: 3px 3px 6px; border-image: var(--k-hud-key) 3 3 6 3 fill / 3px 3px 6px 3px / 0 stretch; image-rendering: pixelated;
  padding: 0 3px; color: #1a1408; font: 800 calc(11.5px * var(--fs, 1)) / calc(13.5px * var(--fs, 1)) var(--k-font); text-shadow: none;
}
html.ns.nskit #tooltip .tk > span { display: none; }
html.ns.nskit #tooltip .bl { display: inline-block; margin-left: 4px; color: rgba(26, 20, 8, .7) !important; font: 700 calc(13.5px * var(--fs, 1)) / 1 var(--k-font); }
html.ns.nskit #tooltip :is(b, strong) { color: #8a2c22 !important; font-weight: 800; }
html.ns.nskit #tooltip div[style*="cfc6dd"], html.ns.nskit #tooltip div[style*="207, 198, 221"] { color: var(--k-ink-t2) !important; font-size: calc(14px * var(--fs, 1)) !important; margin-top: 6px !important; }
html.ns.nskit #tooltip .hint { margin-top: 4px; color: var(--k-ink-t2) !important; font: 500 calc(14px * var(--fs, 1)) / 1.4 var(--k-font); }
html.ns.nskit #tooltip .hint b { color: #1f4f86 !important; }
html.ns.nskit #tooltip > :not(.hint) + .hint { margin-top: 8px; padding-top: 7px; border-top: 3px solid rgba(156, 129, 86, .5); }
html.ns.nskit #tooltip .hint[style*="ffb060"], html.ns.nskit #tooltip .hint[style*="255, 176, 96"] { color: #8a4a12 !important; font-weight: 600; }

/* =====================================================================================================================
   ТЕЛЕФОН: ЛКМ — крупное гнездо 64 px (значок 48 px по центру)
   ===================================================================================================================== */
html.ns.nskit body.mobile #abilities #ab-l img { left: 2px; top: 2px; }
html.ns.nskit body.mobile #abilities #ab-l .cd { inset: 2px; }
html.ns.nskit body.mobile #abilities .ab.dash img { left: -2px; top: -2px; }
html.ns.nskit body.mobile #abilities .ab.dash .cd { inset: -2px; }

/* =====================================================================================================================
   ЭКРАНЫ ОТ 720p ДО 4K (10 октября, просьба владельца). options.js: --rz — во сколько раз экран больше 1920×1080
   (не меньше 1), --uis уже умножен на --rz. Формулы «a + b × --uis» из style.css переписаны как «a × --rz + b × --uis»:
   на 1440p/4K — та же доля экрана; --rs — то же отношение и меньше 1 (крупные надписи на 720p не наезжают на колонки). Позиции, заданные из JS (подсказка, #prompt), не трогаем:
   масштаб — через transform от левого верхнего угла (getBoundingClientRect его учитывает).
   ===================================================================================================================== */
html.ns #hud #feed { transform: scale(calc((0.85 * var(--rs, 1) + 0.15 * var(--uis)) * 0.75)); } /* ×0.75 — лента на четверть меньше (11 окт., просьба владельца) */
/* табличка предмета — вдвое меньше (10 окт., просьба владельца), но не мельче 0.6, чтобы на 720p описание читалось */
html.ns #hud #toasts { transform: scale(max(0.6, calc((0.6 * var(--rs, 1) + 0.4 * var(--uis)) * 0.5))); }
html.ns #hud #centermsg, html.ns #hud #announce { transform: translateX(-50%) scale(calc(0.7 * var(--rs, 1) + 0.3 * var(--uis))); }
html.ns #hud #prompt { transform: translate(-50%, -100%) scale(calc(0.75 * var(--rs, 1) + 0.35 * var(--uis))); }
html.ns #hud #chanbar { transform: translateX(-50%) scale(calc(0.6 * var(--rs, 1) + 0.4 * var(--uis))); }
html.ns #hud #choice { transform: translateX(-50%) scale(calc(0.5 * var(--rs, 1) + 0.3 * var(--uis))); }
html.ns #hud > #shop { top: calc(118px * var(--rz, 1)); transform: translateX(-50%) scale(calc(0.75 * var(--rs, 1) + 0.25 * var(--uis))); }
html.ns #hud #arenabar { transform: translateX(-50%) scale(calc(0.55 * var(--rs, 1) + 0.25 * var(--uis))); }
html.ns #hud #darkwarn { transform: translateX(-50%) scale(calc(0.8 * var(--rs, 1) + 0.2 * var(--uis))); }
html.ns #hud #netinfo { transform: scale(var(--rz, 1)); transform-origin: 100% 100%; }
html.ns #hud #perfinfo { top: calc(18px * var(--rz, 1)); right: calc(104px * var(--rz, 1) + 204px * var(--uis)); transform: scale(var(--rz, 1)); transform-origin: 100% 0; }
html.ns #hud #compass { font-size: calc(26px * var(--fs, 1) * var(--rz, 1)); }
html.ns .hud-gear { top: calc(12px * var(--rz, 1)); right: calc(18px * var(--rz, 1) + 204px * var(--uis)); transform: scale(var(--rz, 1)); transform-origin: 100% 0; }
html.ns .hud-pause { top: calc(12px * var(--rz, 1)); right: calc(62px * var(--rz, 1) + 204px * var(--uis)); transform: scale(var(--rz, 1)); transform-origin: 100% 0; }
html.ns #tooltip { transform: scale(var(--rz, 1)); transform-origin: 0 0; }
html.ns #quiz { transform: translateX(-50%) scale(calc(0.8 * var(--rs, 1) + 0.2 * var(--uis))); }