/* v5.8 (просьба владельца, 11 октября 2026): ОТКРЫТИЕ ГЕРОЕВ ЗА ИСПЫТАНИЯ (js/unlocks.js, shared/unlocks.js).
   Замки на сетках героев (окно «Герои», драфт), блок «Как открыть» в карточке героя, окно «Испытания» (4 круга столбцами),
   табличка «Новый герой открыт!» в бою, строка «Герои» в настройках комнаты. Палитра — токены набора «Кузня» (ns-kit.css),
   с запасными цветами для прежнего вида (?ui=old). 1 пиксель интерфейса = 3 px. */

/* ---------- замок на портрете ---------- */
.ul-lk { display: none; position: absolute; left: 50%; top: 42px; z-index: 3; width: 36px; height: 36px; margin-left: -18px; pointer-events: none;
  background: var(--ul-lock) center / 36px 36px no-repeat; image-rendering: pixelated; filter: drop-shadow(0 3px 0 rgba(0, 0, 0, .8)); }
.hl-card { position: relative; }
.hl-card.locked .ul-lk, .dcard.locked .ul-lk { display: block; }
.hl-card.locked canvas, .hl-card.locked:hover canvas { filter: grayscale(1) brightness(.28) !important; }
.hl-card.locked .hl-cn b { color: var(--k-text-3, #71695c) !important; }
.dcard .ul-lk { top: 36px; }
html.ns .dr-stage .dcard.locked img, html.ns .dr-stage .dcard.locked:hover img, .dcard.locked img { filter: grayscale(1) brightness(.28) !important; transform: none !important; }
html.ns .dr-stage .dcard.locked .dn, .dcard.locked .dn { color: var(--k-text-3, #71695c) !important; }

/* ---------- шапка окна «Герои»: переключатель «Испытания» и счётчик ---------- */
#hl-ul { white-space: nowrap; }
#hl-cnt { align-self: center; flex: none; color: var(--k-text-2, #a89e8b); font: 600 13px / 1.2 var(--k-font, inherit); white-space: nowrap; }
#hl-cnt em { color: var(--k-gold-hi, #f3d897); font-weight: 800; font-style: normal; }
html.ns.nskit #herolist #hl-ul {
  flex: none; height: auto; min-height: 0; margin: 0; padding: 0 0 9px; border: 0 !important; border-radius: 0; background: none !important; box-shadow: none !important;
  color: var(--k-text-2); font: 600 17px / 1.2 var(--k-font); letter-spacing: 0; text-transform: none; cursor: pointer;
}
html.ns.nskit #herolist #hl-ul:hover:not(.on) { color: var(--k-text); }
html.ns.nskit #herolist #hl-ul.on { color: var(--k-gold-hi); box-shadow: inset 0 -3px 0 var(--k-gold) !important; }
html.ns.nskit #herolist #hl-ul::before, html.ns.nskit #herolist #hl-ul img { display: none !important; }
html.ns.nskit #herolist #hl-cnt { padding-bottom: 12px; }

/* ---------- окно «Испытания» (вместо сетки и карточки героя) ---------- */
#ul-view { display: none; }
#herolist.ul-on #heroes, #herolist.ul-on #hero-detail { display: none !important; }
#herolist.ul-on #ul-view { display: block; grid-column: 1 / -1; min-height: 760px; }
html.ns.nskit #herolist #ul-view { grid-column: 1 / -1; height: 894px; box-sizing: border-box; overflow: hidden; }
#ul-view { color: var(--k-text, #efe6d3); font-family: var(--k-font, inherit); }
.ul-top { margin: 0 0 15px; padding: 9px 15px; color: var(--k-text-2, #a89e8b); font: 500 15px / 1.35 var(--k-font, inherit);
  background: var(--k-1, #16131c); box-shadow: inset 0 0 0 3px var(--k-ink, #08070b), inset 0 3px 0 3px var(--k-3, #2b2535); }
.ul-top b { color: var(--k-gold-hi, #f3d897); font-weight: 800; }
.ul-cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 21px; align-items: start; }
.ul-col { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
/* заголовок круга: «Круг II · Испытания · 3 / 8», под ним — когда откроется */
.ul-th { display: flex; align-items: baseline; gap: 9px; padding: 0 3px 3px; box-shadow: inset 0 -3px 0 var(--k-gold-lo, #7a5a26); }
.ul-th b { color: var(--k-gold-hi, #f3d897); font: 800 21px / 1.15 var(--k-title, inherit); letter-spacing: .01em; text-shadow: 0 3px 0 var(--k-ink, #08070b); white-space: nowrap; }
.ul-th span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--k-text, #efe6d3); font: 600 15px / 1.2 var(--k-font, inherit); }
.ul-th em { color: var(--k-text-2, #a89e8b); font: 800 15px / 1 var(--k-font, inherit); font-style: normal; font-variant-numeric: tabular-nums; }
.ul-ts { margin: 0 0 3px; padding: 0 3px; color: var(--k-life, #7fcf8e); font: 600 12px / 1.2 var(--k-font, inherit); }
.ul-col.shut .ul-th { box-shadow: inset 0 -3px 0 var(--k-3, #2b2535); }
.ul-col.shut .ul-th b { color: var(--k-text-2, #a89e8b); }
.ul-col.shut .ul-ts { color: var(--k-text-3, #71695c); }
/* карточка испытания: портрет на тёмном гнезде, имя героя, «название», условие, полоса прогресса */
.ul-c { position: relative; display: flex; gap: 9px; height: 90px; box-sizing: border-box; padding: 6px 9px 6px 6px; cursor: pointer;
  background: var(--k-1, #16131c); box-shadow: inset 0 0 0 3px var(--k-ink, #08070b), inset 0 3px 0 3px var(--k-3, #2b2535); }
.ul-c:hover { box-shadow: inset 0 0 0 3px var(--k-gold, #d9b46a), inset 0 3px 0 3px var(--k-3, #2b2535); }
.ul-pt { display: flex; align-items: flex-end; justify-content: center; flex: none; width: 66px; height: 78px; overflow: hidden; background: var(--k-0, #0e0c12); box-shadow: inset 0 0 0 3px var(--k-ink, #08070b); }
.ul-pt img { display: block; flex: none; image-rendering: pixelated; filter: grayscale(1) brightness(.3); }
.ul-c.done .ul-pt img { filter: none; }
.ul-c:not(.done):not(.shut) .ul-pt img { filter: grayscale(.6) brightness(.55); }
.ul-tx { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.ul-n { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.ul-n b { flex: none; max-width: 60%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--k-text, #efe6d3); font: 700 15px / 1.2 var(--k-font, inherit); }
.ul-n small { flex: none; margin-left: auto; color: var(--k-violet-hi, #d6bdf7); font: 700 10px / 1.2 var(--k-font, inherit); letter-spacing: .06em; text-transform: uppercase; }
.ul-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--k-gold, #d9b46a); font: 700 13px / 1.2 var(--k-font, inherit); }
.ul-d { flex: 1; margin-top: 3px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; color: var(--k-text-2, #a89e8b); font: 500 12px / 1.25 var(--k-font, inherit); }
.ul-c.done { box-shadow: inset 0 0 0 3px var(--k-gold, #d9b46a), inset 0 3px 0 3px var(--k-3, #2b2535); }
.ul-c.done .ul-n b { color: var(--k-gold-hi, #f3d897); }
.ul-c.shut { opacity: .55; }
.ul-c.shut .ul-t { color: var(--k-text-3, #71695c); }
/* полоса прогресса: железное гнездо, внутри золото (открыт — зелень), число поверх */
.ul-bar { position: relative; height: 15px; margin-top: 3px; background: var(--k-0, #0e0c12); box-shadow: inset 0 0 0 3px var(--k-ink, #08070b); }
.ul-bar i { position: absolute; left: 3px; top: 3px; bottom: 3px; max-width: calc(100% - 6px); background: var(--k-gold, #d9b46a); box-shadow: inset 0 3px 0 rgba(255, 255, 255, .25); }
.ul-bar.done i { background: var(--k-life, #7fcf8e); }
.ul-bar em { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff; font: 800 11px / 1 var(--k-font, inherit); font-style: normal; font-variant-numeric: tabular-nums; text-shadow: 0 0 3px #000, 0 2px 0 #000; white-space: nowrap; }

/* ---------- «Как открыть» в карточке героя ---------- */
.ul-how { margin: 9px 0 3px; padding: 9px 12px 9px; background: rgba(8, 7, 11, .82); box-shadow: inset 0 0 0 3px var(--k-gold-lo, #7a5a26); color: var(--k-text, #efe6d3); }
.ul-hh { display: flex; align-items: center; gap: 9px; }
.ul-hh img { width: 24px; height: 24px; image-rendering: pixelated; flex: none; }
.ul-hh b { color: var(--k-gold-hi, #f3d897); font: 800 18px / 1.1 var(--k-title, inherit); letter-spacing: .01em; }
.ul-hh span { margin-left: auto; color: var(--k-text-2, #a89e8b); font: 600 12px / 1.2 var(--k-font, inherit); white-space: nowrap; }
.ul-ht { margin-top: 6px; color: var(--k-gold, #d9b46a); font: 700 15px / 1.25 var(--k-font, inherit); }
.ul-hd { margin-top: 2px; color: var(--k-text, #efe6d3); font: 500 14px / 1.35 var(--k-font, inherit); }
.ul-how .ul-bar { height: 18px; margin-top: 6px; }
.ul-how .ul-bar em { font-size: 12px; }
.ul-hn { margin-top: 6px; color: var(--k-text-2, #a89e8b); font: 500 12px / 1.3 var(--k-font, inherit); }
.ul-how.shut { box-shadow: inset 0 0 0 3px var(--k-3, #2b2535); }
/* на пергаменте (новый вид) — тёмная вставка поверх; на прежнем — как есть */
html.ns.nskit #herolist #hero-detail .ul-how { order: 4; width: 100%; box-sizing: border-box; }

/* ---------- табличка «Новый герой открыт!» в бою (рядом с табличками предметов) ---------- */
.toast.ul-toast { border-color: var(--hc, #d9b46a) !important; }
.toast.ul-toast img { object-fit: contain; image-rendering: pixelated; }
html.ns.nskit #hud .toast.ul-toast { border-left-color: var(--k-gold) !important; filter: drop-shadow(0 0 9px rgba(243, 216, 151, .4)); }
html.ns.nskit #hud .toast.ul-toast .tg { color: var(--k-gold-hi); }

/* 11 окт. 2026 (просьба владельца): испытания выключены — все герои открыты (shared/unlocks.js UNLOCKS_ON): без кнопки «Испытания»,
   счётчика «Открыто N из 34» и переключателя «Герои: По испытаниям / Все открыты» в комнате */
html.ul-off :is(#hl-ul, #hl-cnt) { display: none !important; }
html.ul-off .set-row:has([data-allh]) { display: none !important; }