/* 18 окт. 2026 (просьба владельца): ОБЛИКИ ГЕРОЕВ — «Герои» (карточка героя, .hc-skin) и драфт (.kd-skin), js/skinui.js.
   Набор «Кузня у края Бездны» (tools/art/UI_MASTER_PROMPT.md): пергамент, пиксель интерфейса = 3 px; фиолетовый — то, что можно
   нажать (плитка «Выбрать», вариант переключателя), золото — выбранное (плитка выбранного облика: золотая рамка и бирка «Выбрано»).
   Всё в px под кадр 1920×1080: окна «Героев» и драфта масштабирует autoFit (fit.js), текст карточек — --hz (ui.js fitZoom). */

/* прежний вид (?ui=old) — без облика в карточках */
html:not(.ns) .hc-skin, html:not(.ns) .kd-skin { display: none; }

/* ---------- «Герои»: блок облика в карточке героя (под характеристиками) ---------- */
/* 21 окт. 2026 (просьба владельца): ряд плиток — обычный вид и облики героя; закрытый облик — только силуэт с замком */
html.ns #herolist #hero-detail .hc-skin {
  display: flex; align-items: center;
  margin: calc(15px * var(--hz, 1)) 0 0; padding: 9px 15px 9px 9px;
  background: rgba(156, 129, 86, .14); box-shadow: inset 0 0 0 3px rgba(156, 129, 86, .45);
}
html.ns #herolist #hero-detail .hc-skin:empty { display: none; }
html.ns :is(#herolist #hero-detail, .dr-stage #dr-detail) .hs-row { display: flex; align-items: stretch; gap: 9px; }
/* плитка: портрет ×3 на постаменте и подпись; выбранная — золотая рамка, открытая — нажимается (фиолетовое), закрытая — силуэт */
html.ns :is(#herolist #hero-detail, .dr-stage #dr-detail) .hs-tile {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; margin: 0; padding: 6px 9px;
  border: 0; border-radius: 0; background: none; box-shadow: none; color: inherit; font: inherit; text-transform: none; letter-spacing: 0;
}
html.ns :is(#herolist #hero-detail, .dr-stage #dr-detail) .hs-tile.on { background: rgba(217, 180, 106, .22); box-shadow: inset 0 0 0 3px var(--k-gold, #d9b46a), inset 0 0 0 6px rgba(255, 240, 196, .45); }
html.ns :is(#herolist #hero-detail, .dr-stage #dr-detail) .hs-tile.pick { cursor: var(--cur-hand, pointer); box-shadow: inset 0 0 0 3px rgba(75, 36, 121, .22); }
html.ns :is(#herolist #hero-detail, .dr-stage #dr-detail) .hs-tile.pick:hover { background: rgba(167, 116, 230, .12); box-shadow: inset 0 0 0 3px rgba(106, 52, 176, .6); }
html.ns :is(#herolist #hero-detail, .dr-stage #dr-detail) .hs-tile.pick:active { transform: translateY(3px); }
html.ns :is(#herolist #hero-detail, .dr-stage #dr-detail) .hs-tile.lock { box-shadow: inset 0 0 0 3px rgba(90, 70, 48, .22); }
html.ns :is(#herolist #hero-detail, .dr-stage #dr-detail) .hs-port {
  position: relative; display: flex; align-items: flex-end; justify-content: center; min-width: 96px; min-height: 96px; padding: 0 0 9px;
  background: var(--k-pedestal) center bottom / 84px 33px no-repeat; image-rendering: pixelated;
}
html.ns :is(#herolist #hero-detail, .dr-stage #dr-detail) .hs-port canvas { display: block; image-rendering: pixelated; }
html.ns :is(#herolist #hero-detail, .dr-stage #dr-detail) .hs-tile.lock .hs-port canvas { opacity: .82; }
html.ns :is(#herolist #hero-detail, .dr-stage #dr-detail) .hs-port .sk-lk { position: absolute; right: 0; bottom: 3px; width: 24px; height: 24px; filter: drop-shadow(0 3px 0 rgba(0, 0, 0, .55)); }
html.ns :is(#herolist #hero-detail, .dr-stage #dr-detail) .hs-cap { padding: 2px 9px 1px; white-space: nowrap; font: 700 calc(15px * var(--hz, 1)) / 1.2 var(--k-font); }
html.ns :is(#herolist #hero-detail, .dr-stage #dr-detail) .hs-tile.on .hs-cap { color: var(--k-on-gold, #2a1a08); background: var(--k-gold, #d9b46a); box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .18), 0 0 0 3px rgba(122, 84, 24, .35); }
html.ns :is(#herolist #hero-detail, .dr-stage #dr-detail) .hs-tile.pick .hs-cap { color: #4b2479; box-shadow: inset 0 -3px 0 rgba(75, 36, 121, .35); }
html.ns :is(#herolist #hero-detail, .dr-stage #dr-detail) .hs-tile.pick:hover .hs-cap { color: #6a34b0; box-shadow: inset 0 -3px 0 #6a34b0; }
html.ns :is(#herolist #hero-detail, .dr-stage #dr-detail) .hs-tile.lock .hs-cap { color: var(--k-ink-t3, #6a5a40); }
/* 21 окт. 2026, ночь: второй облик — покупка за монеты (skinui.js .hs-tile.buy): золотая кайма, цена со значком монеты; второе нажатие — «Точно?» */
html.ns :is(#herolist #hero-detail, .dr-stage #dr-detail) .hs-tile.buy { cursor: var(--cur-hand, pointer); box-shadow: inset 0 0 0 3px rgba(190, 140, 40, .55); }
html.ns :is(#herolist #hero-detail, .dr-stage #dr-detail) .hs-tile.buy:hover { background: rgba(240, 200, 96, .14); box-shadow: inset 0 0 0 3px #c99a3a; }
html.ns :is(#herolist #hero-detail, .dr-stage #dr-detail) .hs-tile.buy:active { transform: translateY(3px); }
html.ns :is(#herolist #hero-detail, .dr-stage #dr-detail) .hs-tile.buy .hs-cap { display: inline-flex; align-items: center; gap: 5px; color: #7a4e08; box-shadow: inset 0 -3px 0 rgba(190, 140, 40, .55); }
html.ns :is(#herolist #hero-detail, .dr-stage #dr-detail) .hs-tile.buy.ask .hs-cap { color: var(--k-on-gold, #2a1a08); background: var(--k-gold, #d9b46a); }
html.ns :is(#herolist #hero-detail, .dr-stage #dr-detail) .hs-tile.buy.poor { cursor: var(--cur-arrow, default); box-shadow: inset 0 0 0 3px rgba(90, 70, 48, .22); }
html.ns :is(#herolist #hero-detail, .dr-stage #dr-detail) .hs-tile.buy.poor .hs-cap { color: var(--k-ink-t3, #6a5a40); }
html.ns :is(#herolist #hero-detail, .dr-stage #dr-detail) .hs-coin { width: 12px; height: 12px; background: var(--ic-coin) center / 12px 12px no-repeat; image-rendering: pixelated; }
/* наведение на облик — тёмный ярлычок над плиткой (skinui.js .hs-tip): у закрытого — сколько побед ещё нужно, у открытого — имя
   (21 окт. 2026, просьба владельца: текста с именем, счётом побед и «как открыть» справа от плиток больше нет) */
html.ns :is(#herolist #hero-detail, .dr-stage #dr-detail) .hs-tip {
  position: absolute; left: 50%; bottom: calc(100% + 12px); z-index: 5; display: none; transform: translateX(-50%); pointer-events: none;
  padding: 6px 12px 5px; white-space: nowrap; color: #f2e6c8; background: #1d1524;
  box-shadow: 0 0 0 3px #20160c, 0 0 0 6px rgba(217, 180, 106, .55), 0 9px 0 rgba(0, 0, 0, .35);
  font: 700 17px / 1.25 var(--k-font); /* не --hz: ярлычок лежит поверх карточки и места в ней не занимает */
}
html.ns :is(#herolist #hero-detail, .dr-stage #dr-detail) .hs-tip::after { content: ''; position: absolute; left: 50%; top: 100%; margin-left: -6px; border: 6px solid transparent; border-top-color: #1d1524; border-bottom: 0; }
html.ns :is(#herolist #hero-detail, .dr-stage #dr-detail) .hs-tile:hover .hs-tip { display: block; }
.sk-lk { display: inline-block; background: center / contain no-repeat; image-rendering: pixelated; }
html.ns .dr-stage #dr-detail .ks-opt { cursor: var(--cur-hand, pointer); }

/* ---------- драфт: переключатель «Обычный вид / облик» в карточке героя ---------- */
html.ns .dr-stage #dr-detail .kd-skin { display: flex; flex-wrap: wrap; align-items: center; gap: 3px 6px; margin-top: 12px; }
html.ns .dr-stage #dr-detail .kd-skin:empty { display: none; }
html.ns .dr-stage #dr-detail .ks-opt {
  position: relative; margin: 0; padding: 3px 9px 3px; border: 0; border-radius: 0; background: none; box-shadow: inset 0 -3px 0 rgba(75, 36, 121, .35);
  color: #4b2479; font: 700 calc(17px * var(--hz, 1)) / 1.2 var(--k-font); letter-spacing: 0; text-transform: none; white-space: nowrap;
}
html.ns .dr-stage #dr-detail .ks-opt:hover:not(.on) { color: #6a34b0; box-shadow: inset 0 -3px 0 #6a34b0; }
html.ns .dr-stage #dr-detail .ks-opt:hover:not(.on)::before { content: ''; position: absolute; left: -3px; top: 50%; width: 3px; height: 12px; margin-top: -6px; background: var(--k-violet-hi, #d6bdf7); box-shadow: 0 3px 0 var(--k-violet, #a774e6); }
html.ns .dr-stage #dr-detail .ks-opt.on { color: var(--k-ink-t, #2a2018); background: rgba(217, 180, 106, .35); box-shadow: inset 0 -3px 0 var(--k-gold, #d9b46a), inset 0 0 0 3px rgba(122, 84, 24, .25); cursor: var(--cur-arrow, default); }
html.ns .dr-stage #dr-detail .kd-skin.lock { gap: 6px; color: var(--k-ink-t3, #6a5a40); font: 700 calc(15px * var(--hz, 1)) / 1.2 var(--k-font); }
html.ns .dr-stage #dr-detail .kd-skin .sk-lk { flex: none; width: 24px; height: 24px; opacity: .85; }
/* ---------- драфт: пауза «Выбор облика» после пиков (21 окт. 2026, просьба владельца; skinui.js pickCard) ----------
   справа вместо карточки своего героя — «Выбор облика», имя, подсказка, тот же ряд плиток, что в «Героях» (стили .hs-* выше
   общие), под ним — что надето и монеты (если второй облик ещё не куплен). Текст не подгоняется под высоту (--hz: 1) */
html.ns .dr-stage #dr-detail .kd-sp { --hz: 1; }
html.ns .dr-stage #dr-detail .kd-sp .kd-name { margin-bottom: 0; }
html.ns .dr-stage #dr-detail .kd-sp .kd-desc { margin-top: 9px; color: var(--k-ink-t2, #4a3c28); }
/* крупный показ — герой в надетом облике (при наведении на открытую плитку — в ней) на постаменте; увеличение --pk (целое, 3…8)
   ставит skinui.js; высота постоянная — ряд плиток под ним не прыгает */
html.ns .dr-stage #dr-detail .kd-spbig {
  display: flex; align-items: flex-end; justify-content: center; height: 330px; margin-top: 15px; padding-bottom: calc(3px * var(--pk, 3)); box-sizing: border-box;
  background: var(--k-pedestal) center bottom / calc(28px * var(--pk, 3)) calc(11px * var(--pk, 3)) no-repeat; image-rendering: pixelated;
}
html.ns .dr-stage #dr-detail .kd-spbig canvas { display: block; image-rendering: pixelated; }
html.ns .dr-stage #dr-detail .kd-worn { margin-top: 15px; text-align: center; font: 700 21px / 1.3 var(--k-font); color: var(--k-ink-t, #2a2018); }
html.ns .dr-stage #dr-detail .kd-sprow { margin-top: 21px; }
html.ns .dr-stage #dr-detail .kd-sprow .hs-row { flex-wrap: wrap; justify-content: center; gap: 12px; }
html.ns .dr-stage #dr-detail .kd-sprow .hs-tile { padding: 9px 12px 6px; }
html.ns .dr-stage #dr-detail .kd-sprow .hs-cap { font-size: 17px; }
html.ns .dr-stage #dr-detail .kd-coins { display: flex; align-items: center; justify-content: center; gap: 9px; margin-top: 15px; font: 700 17px / 1.3 var(--k-font); color: #7a4e08; }
html.ns .dr-stage #dr-detail .kd-coins .hs-coin { width: 24px; height: 24px; background-size: 24px 24px; }
/* мини-портрет взятого героя в облике — золотая черта под ним */
html.ns .dr-stage #dr-players .dp-mini.skin { box-shadow: inset 0 -3px 0 var(--k-gold, #d9b46a); }

/* ---------- 22 окт. 2026: «Герои» — мастерство героя и «Попробовать» (ui.js heroMeta) ---------- */
html:not(.ns) #hero-detail .hc-meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 10px; }
html.ns #herolist #hero-detail .hc-meta { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin: calc(12px * var(--hz, 1)) 0 0; }
html.ns #herolist #hero-detail .hc-meta:empty { display: none; }
html.ns #herolist #hero-detail .hc-mast { display: flex; align-items: center; gap: 12px; min-width: 0; }
html.ns #herolist #hero-detail .hc-mast.none .hc-mb { display: none; }
html.ns #herolist #hero-detail .hc-mb { display: block; flex: none; image-rendering: pixelated; }
html.ns #herolist #hero-detail .hc-mt { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
html.ns #herolist #hero-detail .hc-mt b { color: var(--k-ink, #2a1d10); font: 700 calc(17px * var(--hz, 1)) / 1.1 var(--k-font, Manrope, sans-serif); white-space: nowrap; }
html.ns #herolist #hero-detail .hc-mt i { display: block; width: 210px; height: 9px; background: rgba(42, 29, 16, .22); box-shadow: inset 0 0 0 3px rgba(42, 29, 16, .35); }
html.ns #herolist #hero-detail .hc-mt i u { display: block; height: 100%; background: var(--k-gold, #d9b46a); }
html.ns #herolist #hero-detail .hc-mt small { color: var(--k-ink-t2, #5a4630); font: 600 calc(14px * var(--hz, 1)) / 1 var(--k-font, Manrope, sans-serif); }
html.ns #herolist #hero-detail .hc-try { flex: none; }
/* «Попробовать» — фиолетовая плита (то, что можно нажать) на пергаменте карточки */
html.ns #herolist #hero-detail .hc-meta .hc-try, html.ns.nskit #herolist #hero-detail .hc-meta .hc-try {
  flex: none; margin: 0; padding: 9px 21px; min-width: 0; height: auto; border: 0; border-radius: 0; opacity: 1; filter: none;
  background: #5b2f99; color: #f6eeff; font: 800 calc(18px * var(--hz, 1)) / 1 'Exo 2', Manrope, sans-serif; letter-spacing: 0; text-transform: none; text-shadow: 0 2px 0 rgba(20, 8, 40, .6);
  box-shadow: inset 0 0 0 3px #2b1452, inset 0 3px 0 rgba(255, 255, 255, .2), 0 3px 0 rgba(42, 29, 16, .35); cursor: var(--cur-hand, pointer);
}
html.ns #herolist #hero-detail .hc-meta .hc-try:hover, html.ns.nskit #herolist #hero-detail .hc-meta .hc-try:hover { background: #6d3bb6; }
html.ns #herolist #hero-detail .hc-meta .hc-try:active, html.ns.nskit #herolist #hero-detail .hc-meta .hc-try:active { transform: translateY(3px); box-shadow: inset 0 0 0 3px #2b1452; }