/* v5.7 (редизайн 10 октября 2026, «Кузня у края Бездны» — tools/art/UI_MASTER_PROMPT.md, разделы 5, 6 и 8): ВЫБОР ГЕРОЕВ.
   Кадр 1920×1080 (fit.js уменьшает его целиком). Слева сверху — таймер-кольцо из пиксельных сегментов (uiart.drawRing) и стадия
   шрифтом заголовков (--k-title): «Стадия банов» кровью, «Стадия пиков» золотом; под ними очередь игроков медальонами (чей ход — приподнят на светлом
   блоке, медальон золотой); ниже — кованая плита с героями на постаментах, без ячеек. Справа — пергаментная карточка героя
   (ui.draftCard) и кнопки-плиты: «Забанить» — кровавая, «Выбрать» — золотая (одна главная на экран), «Случайный» — тёмная.
   Язык состояний портрета: наведение — золотые уголки и подъём на 3 px; выбран — золотая рамка со свечением; забанен — серый,
   косой крест кровью (бан — вспышка белым, серение, прорезь креста), ник забанившего; взят другим — притушен, флажок цвета игрока.
   Картинки — js/nskit.js (--k-*, --k-draft-*, медальон — --k-lobby-medal*), правила с ними — под html.ns.nskit.
   Старый вид (?ui=old) — в style.css. 1 пиксель интерфейса = 3 px. */

/* ---------- фон и кадр ---------- */
html.ns #draft { background: radial-gradient(ellipse 44% 30% at 20% -6%, rgba(200, 71, 60, .17), transparent 72%), rgba(8, 7, 11, .86); }
html.ns #draft.pick { background: radial-gradient(ellipse 44% 30% at 20% -6%, rgba(217, 180, 106, .13), transparent 72%), rgba(8, 7, 11, .86); }
html.ns #draft .dr-wrap.dr-stage {
  position: relative; display: block; width: 1920px; height: 1080px; padding: 0; gap: 0; flex: none;
  --tk: calc(var(--fst, 1.3) / 1.3); font: 500 16px / 1.35 var(--k-font); color: var(--k-text);
}
html.ns #draft .dim { color: var(--k-text-3); }
html.ns #draft :is(b, small) { text-shadow: none; }
/* появление — быстрый спуск сверху с лёгким перелётом, по очереди */
@keyframes kDrDrop { 0% { opacity: 0; transform: translateY(-48px); } 70% { opacity: 1; transform: translateY(4px); } 100% { opacity: 1; transform: none; } }
html.ns #draft.dr-in .dr-stage > * { animation: kDrDrop .24s cubic-bezier(.3, .7, .4, 1) both; animation-delay: 0ms; }
html.ns #draft.dr-in .dr-stage > #dr-players { animation-delay: 40ms; }
html.ns #draft.dr-in .dr-stage > .dr-side { animation-delay: 60ms; }
html.ns #draft.dr-in .dr-stage > #dr-grid { animation-delay: 90ms; }

/* ---------- таймер: кольцо из 20 сегментов (гаснут по одному), число шрифтом заголовков; последние 5 с — кровью ---------- */
html.ns .dr-stage #dr-clock { position: absolute; left: 48px; top: 20px; width: 132px; height: 132px; }
html.ns .dr-stage #dr-clock.hidden { display: none; }
html.ns .dr-stage #dr-ring { display: block; width: 132px; height: 132px; image-rendering: pixelated; }
html.ns .dr-stage #dr-clock #dr-timer {
  position: absolute; inset: 0; right: 0; width: auto; min-width: 0; display: flex; align-items: center; justify-content: center; margin: 0; padding: 0 0 7px;
  border: 0 !important; border-image: none !important; background: none; box-shadow: none; animation: none;
  font: 800 42px / 1 var(--k-title); font-variant-numeric: tabular-nums; letter-spacing: 0; color: var(--k-gold-hi); text-shadow: 0 3px 0 var(--k-ink);
}
html.ns .dr-stage #dr-clock #dr-timer.warn { color: #ff8b7c; }

/* ---------- шапка: стадия шрифтом заголовков, под ней подсказка ---------- */
html.ns .dr-stage .dr-head { position: absolute; left: 204px; top: 40px; width: 840px; text-align: left; }
html.ns #draft:has(#dr-clock.hidden) .dr-head { left: 48px; }
html.ns .dr-stage #dr-title {
  display: block; height: auto; margin: 0; padding: 0; border: 0; border-image: none; background: none;
  font: 800 54px / 1 var(--k-title); letter-spacing: 0; text-transform: none; color: var(--k-blood);
  text-shadow: 0 3px 0 var(--k-ink), 0 6px 0 rgba(0, 0, 0, .35);
}
html.ns .dr-stage #dr-title.st-ban { color: var(--k-blood); animation: kDrTitleA .15s steps(3) both; }
html.ns .dr-stage #dr-title.st-pick { color: var(--k-gold); animation: kDrTitleB .15s steps(3) both; }
html.ns .dr-stage #dr-title.st-done { color: var(--k-life); animation: kDrTitleC .15s steps(3) both; }
@keyframes kDrTitleA { from { opacity: 0; transform: translateY(-9px); } to { opacity: 1; transform: none; } }
@keyframes kDrTitleB { from { opacity: 0; transform: translateY(-9px); } to { opacity: 1; transform: none; } }
@keyframes kDrTitleC { from { opacity: 0; transform: translateY(-9px); } to { opacity: 1; transform: none; } }
html.ns .dr-stage #dr-sub {
  margin: 12px 0 0 3px; min-height: 24px; max-width: 840px;
  font: 500 calc(17px * var(--tk, 1)) / 1.35 var(--k-font); color: var(--k-text-2); text-shadow: 0 2px 0 rgba(0, 0, 0, .6);
}
html.ns .dr-stage #dr-sub b { font-weight: 700; }
html.ns .dr-stage #dr-sub .you { margin-right: .3em; font-family: var(--k-font); font-weight: 700; color: var(--k-gold-hi); animation: none; }

/* ---------- кнопки-плиты (вне .modal набор их не включает — задаём сами, как .modal .btn в ns-kit.css) ---------- */
html.ns .dr-stage .btn { letter-spacing: 0; text-transform: none; }
html.ns.nskit .dr-stage .btn {
  position: relative; border-style: solid !important; border-color: transparent !important; border-width: 6px 6px 9px !important; border-radius: 0 !important;
  border-image: var(--k-btn) 6 6 9 fill / 6px 6px 9px / 0 stretch !important; background: none !important; box-shadow: none !important; filter: none !important;
  image-rendering: pixelated; opacity: 1; color: var(--k-text); text-shadow: 0 2px 0 rgba(0, 0, 0, .45); transition: none;
}
html.ns.nskit .dr-stage .btn:hover:not(:disabled) { border-image-source: var(--k-btn-hi) !important; color: #fff; }
/* наведение — фиолетовая засечка у левого края (знак «можно нажать», не обводка) */
html.ns.nskit .dr-stage .btn:hover:not(:disabled)::before { content: ''; display: block; 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 .dr-stage .btn:active:not(:disabled) { border-image-source: var(--k-btn-dn) !important; transform: translateY(3px); }
html.ns.nskit .dr-stage .btn:disabled { border-image-source: var(--k-btn-off) !important; color: var(--k-text-3); text-shadow: none; cursor: default; }
/* «Выбрать» — золотая плита (главное действие) */
html.ns.nskit .dr-stage #dr-go:not(.ban):not(:disabled) { 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 .dr-stage #dr-go:not(.ban):not(:disabled):hover { border-image-source: var(--k-btn-gold-hi) !important; color: var(--k-on-gold); }
html.ns.nskit .dr-stage #dr-go:not(.ban):not(:disabled):active { border-image-source: var(--k-btn-gold-dn) !important; }
html.ns.nskit .dr-stage #dr-go:not(.ban):hover::before { display: none; }
/* «Забанить» и «Отменить выбор» — кровавая плита: тёмная, текст кровью, наведение — тёмно-красная заливка */
html.ns.nskit .dr-stage :is(#dr-go.ban, #dr-cancel):not(:disabled) { color: #e9776b; }
html.ns.nskit .dr-stage :is(#dr-go.ban, #dr-cancel):not(:disabled):hover { border-image-source: var(--k-btn-blood-hi) !important; color: #ffd9d2; }
html.ns.nskit .dr-stage :is(#dr-go.ban, #dr-cancel):hover::before { background: #ff9a8a !important; box-shadow: 0 3px 0 var(--k-blood) !important; }
html.ns .dr-stage #dr-cancel { position: absolute; left: auto; right: 656px; top: 48px; z-index: 2; height: auto; padding: 4px 14px 3px !important; font: 600 calc(14px * var(--tk, 1)) / 1.2 var(--k-font); }

/* ---------- очередь игроков: медальон цвета игрока, ник, под ним его бан и его герой; чей ход — приподнят и подсвечен ---------- */
html.ns .dr-stage #dr-players {
  position: absolute; left: 48px; top: 168px; width: 1216px; height: 80px; display: flex; flex-wrap: nowrap; align-items: flex-end; justify-content: flex-start; gap: 9px;
  border: 0; padding: 0;
}
html.ns .dr-stage #dr-players .dp {
  position: relative; flex: 0 1 234px; min-width: 0; max-width: none; height: 72px; display: flex; align-items: center; gap: 12px; padding: 0 9px 0 6px;
  border: 6px solid transparent; border-image: none; background: none; box-shadow: none;
}
html.ns .dr-stage #dr-players .dp + .dp::before { display: none; }
html.ns .dr-stage #dr-players .dp.turn { transform: translateY(-6px); background: var(--k-2); }
html.ns.nskit .dr-stage #dr-players .dp.turn { background: none; border-image: var(--k-block-hi) 6 fill / 6px / 0 stretch; image-rendering: pixelated; }
html.ns .dr-stage #dr-players .dp.turn::after { content: ''; position: absolute; left: 6px; right: 6px; top: auto; bottom: -3px; height: 3px; background: var(--k-gold); box-shadow: 0 3px 0 var(--k-ink); }
html.ns .dr-stage #dr-players .dp-med { position: relative; flex: none; width: 33px; height: 33px; }
html.ns .dr-stage #dr-players .dp-med::before { content: ''; position: absolute; inset: 0; background: var(--pc); -webkit-mask: var(--k-lobby-medal-mask) 0 0 / 33px 33px no-repeat; mask: var(--k-lobby-medal-mask) 0 0 / 33px 33px no-repeat; }
html.ns .dr-stage #dr-players .dp-med::after { content: ''; position: absolute; inset: 0; background: var(--k-lobby-medal) 0 0 / 33px 33px no-repeat; image-rendering: pixelated; }
html.ns .dr-stage #dr-players .dp.turn .dp-med::after { background-image: var(--k-lobby-medal-gold); }
html.ns .dr-stage #dr-players .dp-tx { flex: 1 1 auto; min-width: 0; }
html.ns .dr-stage #dr-players .dp-name {
  display: block; max-width: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font: 600 16px / 1.25 var(--k-font); letter-spacing: 0; color: var(--k-text); text-shadow: none;
}
html.ns .dr-stage #dr-players .dp-name::before { content: none; display: none; }
html.ns .dr-stage #dr-players .dp.turn .dp-name { color: var(--k-gold-hi); }
html.ns .dr-stage #dr-players .dp-name .dim { color: var(--k-text-3); font-weight: 500; }
html.ns .dr-stage #dr-players .dp-tm { position: static; margin-left: 4px; font: 700 11px / 1 var(--k-font); letter-spacing: .06em; text-transform: uppercase; }
html.ns .dr-stage #dr-players .dp-row { display: flex; align-items: flex-end; gap: 6px; margin-top: 3px; min-height: 34px; }
/* его бан и его герой — спрайты в родном размере (без масштаба) */
html.ns .dr-stage #dr-players .dp-mini { position: relative; flex: none; width: 30px; height: 34px; display: flex; align-items: flex-end; justify-content: center; overflow: hidden; border: 0; background: none; box-shadow: none; }
html.ns .dr-stage #dr-players .dp-mini img { flex: none; width: auto; height: auto; max-width: none; image-rendering: pixelated; filter: none; opacity: 1; }
html.ns .dr-stage #dr-players .dp-mini.ban img { filter: grayscale(1) brightness(1.2) contrast(.85); }
html.ns .dr-stage #dr-players .dp-mini.ban { overflow: visible; margin-right: 9px; }
/* малый крест — значком в нижнем правом углу, чтобы спрайт читался */
html.ns .dr-stage #dr-players .dp-mini.ban::after { content: ''; position: absolute; right: -6px; bottom: -3px; width: 21px; height: 21px; background: var(--k-draft-ban-xs) 0 0 / 21px 21px no-repeat; image-rendering: pixelated; }
html.ns .dr-stage #dr-players .dp-mini.empty { width: 24px; height: 30px; margin: 0 3px 2px; background: var(--k-0); box-shadow: inset 3px 3px 0 var(--k-ink), inset -3px -3px 0 #3a3346; }
html.ns .dr-stage #dr-players .dp-hn {
  min-width: 0; padding-bottom: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font: 600 calc(14px * var(--tk, 1)) / 1.2 var(--k-font); color: var(--k-text-2) !important; text-shadow: none;
}
html.ns .dr-stage #dr-players .dp-hn.dim { color: var(--k-text-3) !important; font-style: italic; font-weight: 500; }
/* 6 и больше игроков — тесно: имя героя прячется (спрайт остаётся); 8 и больше — мельче */
html.ns .dr-stage #dr-players:has(> .dp:nth-child(6)) .dp { gap: 9px; padding: 0 6px 0 3px; }
html.ns .dr-stage #dr-players:has(> .dp:nth-child(6)) .dp-hn:not(.dim) { display: none; }
html.ns .dr-stage #dr-players:has(> .dp:nth-child(8)) { gap: 6px; }
html.ns .dr-stage #dr-players:has(> .dp:nth-child(8)) .dp { gap: 6px; padding: 0 3px 0 0; }
html.ns .dr-stage #dr-players:has(> .dp:nth-child(8)) .dp-name { font-size: 14px; }
html.ns .dr-stage #dr-players:has(> .dp:nth-child(8)) .dp-hn.dim { display: none; }

/* ---------- сетка героев: кованая плита, портреты ×3 на постаментах, без ячеек ---------- */
html.ns .dr-stage #dr-grid {
  position: absolute; left: 48px; top: 256px; width: 1216px; height: 800px; box-sizing: border-box; overflow: visible;
  display: flex; flex-wrap: wrap; justify-content: center; align-content: center; gap: 4px 7px; padding: 8px 12px;
  border: 0; background: var(--k-1);
}
html.ns.nskit .dr-stage #dr-grid { border: 18px solid transparent; border-image: var(--k-slab) 18 fill / 18px / 0 repeat; background: none; image-rendering: pixelated; }
html.ns .dr-stage .dcard {
  position: relative; flex: none; width: 122px; height: 184px; min-width: 0; margin: 0; padding: 130px 2px 0; box-sizing: border-box;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 3px;
  border: 0; border-image: none; border-radius: 0; background: none; box-shadow: none; filter: none; opacity: 1; transform: none; transition: none; cursor: pointer;
}
/* постамент (84×33) и спрайт ногами на нём; прозрачный «запас» над головой не ловит мышь */
html.ns .dr-stage .dcard::before {
  content: ''; position: absolute; left: calc(50% - 42px); top: 94px; width: 84px; height: 33px; margin: 0; border-radius: 0; opacity: 1;
  background: var(--k-pedestal) 0 0 / 84px 33px no-repeat; image-rendering: pixelated; pointer-events: none; -webkit-mask: none; mask: none;
}
html.ns .dr-stage .dcard img { position: absolute; left: 0; right: 0; bottom: 80px; margin: 0 auto; max-width: none; image-rendering: pixelated; filter: none; transition: none; pointer-events: none; }
html.ns .dr-stage .dcard .dn {
  position: relative; max-width: 100%; margin: 0; overflow-wrap: normal; text-align: center; text-wrap: balance;
  font: 600 15px / 1.15 var(--k-font); letter-spacing: 0; color: var(--k-text) !important; text-shadow: 0 2px 0 var(--k-ink); filter: none;
}
html.ns .dr-stage .dcard .dn.long { font-size: 13.5px; }
html.ns .dr-stage .dcard .dr {
  position: relative; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font: 600 11px / 1.2 var(--k-font); letter-spacing: .06em; text-transform: uppercase; color: var(--k-text-3);
}
/* наведение: золотые уголки, спрайт приподнят на 3 px и ярче */
html.ns .dr-stage .dcard:hover { border: 0; box-shadow: none; filter: none; }
html.ns .dr-stage .dcard:hover img { transform: translateY(-3px); filter: brightness(1.15); }
html.ns .dr-stage .dcard:hover .dn { color: #fff !important; }
html.ns .dr-stage .dcard:hover::after { content: ''; position: absolute; inset: -3px; pointer-events: none; border: 18px solid transparent; border-image: var(--k-brackets) 18 / 18px / 0 stretch; image-rendering: pixelated; }
/* выбран (и мой взятый герой): золотая рамка с мягким свечением в одно кольцо */
html.ns .dr-stage :is(.dcard.sel, .dcard.taken.mine)::after, html.ns .dr-stage :is(.dcard.sel, .dcard.taken.mine):hover::after {
  content: ''; position: absolute; inset: -6px; pointer-events: none; border: 12px solid transparent; border-image: var(--k-draft-sel) 12 / 12px / 0 stretch; image-rendering: pixelated;
}
html.ns .dr-stage :is(.dcard.sel, .dcard.taken.mine) { background: rgba(217, 180, 106, .07); }
html.ns .dr-stage :is(.dcard.sel, .dcard.taken.mine) img { filter: brightness(1.1); }
html.ns .dr-stage :is(.dcard.sel, .dcard.taken.mine) .dn { color: var(--k-gold-hi) !important; }
/* забанен: серый спрайт, косой крест кровью; при бане — вспышка белым (1–2 кадра), серение и прорезь креста */
@keyframes kDrBanImg { 0% { filter: brightness(0) invert(1); } 6% { filter: grayscale(1) brightness(1.3); } 30% { filter: grayscale(1) brightness(.75); } 60% { filter: grayscale(1) brightness(.5); } 100% { filter: grayscale(1) brightness(.42); } }
@keyframes kDrBanX { from { clip-path: inset(0 100% 100% 0); } to { clip-path: inset(0); } }
html.ns .dr-stage .dcard.ban img, html.ns .dr-stage .dcard.ban:hover img { filter: grayscale(1) brightness(.42); }
html.ns .dr-stage .dcard.ban img { animation: kDrBanImg .5s steps(1, end); }
html.ns .dr-stage .dcard.ban .dn { color: var(--k-text-3) !important; text-decoration: none; }
html.ns .dr-stage .dcard .dx { display: none; }
html.ns .dr-stage .dcard.ban .dx {
  display: block; position: absolute; inset: auto; left: calc(50% - 39px); top: 26px; width: 78px; height: 78px; pointer-events: none;
  background: linear-gradient(to top right, transparent calc(50% - 4px), var(--k-blood) calc(50% - 4px) calc(50% + 4px), transparent calc(50% + 4px));
  animation: kDrBanX .2s steps(4, end) .06s both;
}
html.ns.nskit .dr-stage .dcard.ban .dx { background: var(--k-draft-ban) 0 0 / 78px 78px no-repeat; image-rendering: pixelated; }
/* взят другим: притушен, флажок цвета игрока у постамента; мой — в полном цвете */
html.ns .dr-stage .dcard.taken img { filter: grayscale(.55) brightness(.5); }
html.ns .dr-stage .dcard.taken .dn { color: var(--k-text-3) !important; }
html.ns .dr-stage .dcard.taken.mine img { filter: brightness(1.1); }
html.ns .dr-stage .dcard.taken.mine .dn { color: var(--k-gold-hi) !important; }
/* кто забанил / кто взял — мелко вместо роли (цвет игрока; бан — кровью) */
html.ns .dr-stage .dcard:is(.ban, .taken) .dr { display: none; }
html.ns .dr-stage .dcard .dw {
  position: static; max-width: 100%; min-height: 0; margin: 0; padding: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center;
  font: 700 12px / 1.2 var(--k-font); letter-spacing: 0; color: var(--pc); background: none; border: 0; box-shadow: none; text-shadow: 0 2px 0 var(--k-ink);
}
html.ns .dr-stage .dcard .dw:empty { display: none; }
html.ns .dr-stage .dcard.ban .dw { color: #e9776b; }
html.ns .dr-stage .dcard.taken .dw::before, html.ns .dr-stage .dcard.taken .dw::after { content: ''; position: absolute; left: calc(50% + 25px); top: 62px; width: 33px; height: 45px; pointer-events: none; image-rendering: pixelated; }
html.ns .dr-stage .dcard.taken .dw::before { background: var(--pc); -webkit-mask: var(--k-draft-flag-m) 0 0 / 33px 45px no-repeat; mask: var(--k-draft-flag-m) 0 0 / 33px 45px no-repeat; }
html.ns .dr-stage .dcard.taken .dw::after { background: var(--k-draft-flag) 0 0 / 33px 45px no-repeat; }
/* больше 36 героев (на будущее) — по 10 в ряд */
html.ns .dr-stage #dr-grid:has(> .dcard:nth-child(37)) { gap: 4px 4px; padding: 8px 6px; }
html.ns .dr-stage #dr-grid:has(> .dcard:nth-child(37)) .dcard { width: 112px; }

/* ---------- справа: пергаментная карточка героя и кнопки ---------- */
html.ns .dr-stage .dr-side { position: absolute; left: 1300px; top: 20px; width: 572px; height: 1036px; display: flex; flex-direction: column; gap: 15px; }
html.ns .dr-stage #dr-detail {
  position: relative; isolation: isolate; flex: 1 1 0; min-height: 0; height: auto !important; max-height: none; margin: 0; overflow: hidden !important;
  padding: 10px 16px 8px !important; border: 3px solid var(--k-parch-2) !important; border-image: none !important; border-radius: 0;
  background: var(--k-parch-c) !important; box-shadow: none !important; color: var(--k-ink-t);
}
html.ns.nskit .dr-stage #dr-detail {
  border: 24px solid transparent !important; border-image: var(--k-parch) 24 fill / 24px / 0 repeat !important; background: none !important;
  image-rendering: pixelated; filter: drop-shadow(0 6px 0 rgba(0, 0, 0, .55));
}
/* водяной знак — силуэт героя одним цветом чернил (×8), справа внизу под текстом */
html.ns .dr-stage #dr-detail::after {
  content: ''; position: absolute; right: -12px; bottom: -18px; z-index: -1; width: var(--kd-mw, 0); height: var(--kd-mh, 0);
  background: var(--kd-mark, none) 0 0 / 100% 100% no-repeat; image-rendering: pixelated; opacity: .075; pointer-events: none;
}
/* пусто — вместо силуэта знак Бездны (×2) над разделителем и подсказкой */
html.ns .dr-stage #dr-detail.dr-empty::after {
  position: static; order: -1; z-index: auto; width: 90px; height: 90px; margin-bottom: 18px; opacity: .9;
  background: var(--k-draft-innate) 0 0 / 90px 90px no-repeat;
}
/* 13 окт. 2026 (просьба владельца — «шрифт маленький, можно крупнее»): текст крупнее, размер подбирается под высоту карточки —
   ui.js fitZoom ставит --hz (самый крупный, при котором всё влезает) */
html.ns .dr-stage #dr-detail { --hz: 1; }
html.ns .dr-stage #dr-detail .kd-fit { position: relative; }
html.ns .dr-stage #dr-detail .kd-top { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 20px; align-items: end; }
html.ns .dr-stage #dr-detail .kd-port { display: flex; align-items: flex-end; justify-content: center; min-width: 108px; padding: 0 0 12px; background: var(--k-pedestal) center bottom / 84px 33px no-repeat; image-rendering: pixelated; }
html.ns .dr-stage #dr-detail .kd-port canvas { display: block; margin: 0; padding: 0; border: 0; background: none; image-rendering: pixelated; }
html.ns .dr-stage #dr-detail .kd-head { min-width: 0; padding-bottom: 14px; }
html.ns .dr-stage #dr-detail .kd-role { font: 700 calc(14px * var(--hz)) / 1 var(--k-font); letter-spacing: .08em; text-transform: uppercase; color: var(--k-ink-t2); }
html.ns .dr-stage #dr-detail .kd-name { margin: 6px 0 10px; font: 800 calc(40px * var(--hz)) / 1.05 var(--k-title); letter-spacing: 0; color: var(--k-ink-t); text-wrap: balance; }
html.ns .dr-stage #dr-detail .kd-diff { display: flex; gap: 3px; }
html.ns .dr-stage #dr-detail .kd-diff i { width: 21px; height: 21px; background: var(--k-dia-iron) center / 21px 21px no-repeat; image-rendering: pixelated; }
html.ns .dr-stage #dr-detail .kd-diff i.on { background-image: var(--k-dia); }
html.ns .dr-stage #dr-detail .kd-desc { margin-top: 12px; font: 500 calc(19px * var(--tk, 1) * var(--hz)) / 1.42 var(--k-font); color: var(--k-ink-t); }
html.ns .dr-stage #dr-detail :is(.kd-stats, .kd-nums) { display: flex; flex-wrap: wrap; gap: 0 9px; font: 600 calc(17px * var(--tk, 1) * var(--hz)) / 1.45 var(--k-font); color: var(--k-ink-t2); }
html.ns .dr-stage #dr-detail .kd-stats { margin-top: 6px; }
html.ns .dr-stage #dr-detail :is(.kd-stats, .kd-nums) b { font-weight: 800; font-variant-numeric: tabular-nums; color: var(--k-ink-t); }
html.ns .dr-stage #dr-detail .kd-nums b { color: #8a2c22; }
html.ns .dr-stage #dr-detail :is(.kd-stats, .kd-nums) i { font-style: normal; color: #a58a5f; }
/* разделитель — коричневая линия с ромбиками на концах и золотым ромбом в центре */
html.ns .dr-stage #dr-detail .kd-rule { position: relative; height: 15px; margin: 14px 0 4px; border-style: solid; border-color: transparent; border-width: 0 18px; border-image: var(--k-draft-rule) 0 18 fill / 0 18px / 0 stretch; image-rendering: pixelated; }
html.ns .dr-stage #dr-detail .kd-rule::after { content: ''; position: absolute; left: 50%; top: -3px; width: 21px; height: 21px; margin-left: -12px; background: var(--k-dia) center / 21px 21px no-repeat; image-rendering: pixelated; }
/* врождённая и способности — строки: иконка 48 в гнезде, колпачок клавиши, название, описание, числа жирно */
html.ns .dr-stage #dr-detail :is(.kd-pass, .kd-ab) { display: grid; grid-template-columns: 60px minmax(0, 1fr); gap: 0 14px; align-items: start; padding: 10px 0; border: 0; box-shadow: none; background: none; margin: 0; }
html.ns .dr-stage #dr-detail .kd-ab { border-top: 3px solid rgba(156, 129, 86, .3); }
html.ns .dr-stage #dr-detail .kd-ic { position: relative; display: block; width: 60px; height: 60px; box-sizing: border-box; border: 6px solid #0e0c12; background: #0e0c12; }
html.ns.nskit .dr-stage #dr-detail .kd-ic { border-color: transparent; background: none; border-image: var(--k-well) 6 fill / 6px / 0 stretch; image-rendering: pixelated; }
html.ns .dr-stage #dr-detail .kd-ic img { display: block; width: 48px !important; height: 48px !important; margin: 0; border: 0; box-shadow: none; background: none; image-rendering: pixelated; }
html.ns .dr-stage #dr-detail .kd-inn::after { content: ''; position: absolute; left: 0; top: 0; width: 45px; height: 45px; margin: 1px 0 0 1px; background: var(--k-draft-innate) 0 0 / 45px 45px no-repeat; image-rendering: pixelated; }
html.ns .dr-stage #dr-detail .kd-tx { min-width: 0; }
html.ns .dr-stage #dr-detail .kd-an { display: flex; align-items: center; flex-wrap: wrap; gap: 3px 10px; min-height: 30px; }
html.ns .dr-stage #dr-detail .kd-an b { font: 700 calc(21px * var(--tk, 1) * var(--hz)) / 1.2 var(--k-font); color: var(--k-ink-t); }
html.ns .dr-stage #dr-detail .kd-pass .kd-an b { color: #8a2c22; }
html.ns .dr-stage #dr-detail .kd-an small { font: 600 calc(15px * var(--tk, 1) * var(--hz)) / 1.2 var(--k-font); color: var(--k-ink-t2); }
html.ns .dr-stage #dr-detail .kd-an kbd.k { min-width: 39px; font-size: calc(15px * var(--hz)); line-height: calc(18px * var(--hz)); }
html.ns .dr-stage #dr-detail .kd-ad { margin-top: 3px; font: 500 calc(18px * var(--tk, 1) * var(--hz)) / 1.42 var(--k-font); color: var(--k-ink-t); }
html.ns .dr-stage #dr-detail .kd-nums { margin-top: 4px; font-size: calc(16px * var(--tk, 1) * var(--hz)); }
/* пусто: разделитель и подсказка на чистом листе */
html.ns .dr-stage #dr-detail.dr-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
html.ns .dr-stage #dr-detail.dr-empty::before {
  content: ''; width: 300px; height: 15px; margin-bottom: 24px; box-sizing: border-box; opacity: 1; background: none;
  border-style: solid; border-color: transparent; border-width: 0 18px; border-image: var(--k-draft-rule) 0 18 fill / 0 18px / 0 stretch; image-rendering: pixelated;
}
html.ns .dr-stage #dr-detail.dr-empty .hd-desc { max-width: 380px; font: 500 calc(17px * var(--tk, 1)) / 1.5 var(--k-font); color: var(--k-ink-t2); }

/* кнопки: «Случайный» — тёмная, главная — «Забанить» (кровавая) или «Выбрать» (золотая): действие крупно, герой под ним */
html.ns .dr-stage .dr-act { position: relative; flex: none; height: 78px; display: flex; flex-direction: row; align-items: stretch; justify-content: flex-end; gap: 15px; min-width: 0; }
/* ждём своей очереди / наблюдаем — кнопок нет: кованый прут с ромбом вместо пустоты */
html.ns .dr-stage .dr-act:not(:has(> :not(.hidden)))::before {
  content: ''; flex: 1; align-self: center; height: 18px; opacity: 1; background: none;
  border-style: solid; border-color: transparent; border-width: 0 18px; border-image: var(--k-rod) 0 18 fill / 0 18px / 0 stretch; image-rendering: pixelated;
}
html.ns .dr-stage .dr-act:not(:has(> :not(.hidden)))::after { content: ''; position: absolute; left: 50%; top: 50%; width: 21px; height: 21px; margin: -11px 0 0 -11px; background: var(--k-dia-iron) center / 21px 21px no-repeat; image-rendering: pixelated; }
html.ns .dr-stage #dr-rand {
  flex: 0 0 176px; height: auto; margin: 0; padding: 0 14px !important; display: flex; align-items: center; justify-content: center; gap: 10px;
  font: 600 calc(17px * var(--tk, 1)) / 1.2 var(--k-font);
}
html.ns .dr-stage #dr-rand img.ic { margin: 0; opacity: 1; image-rendering: pixelated; }
html.ns .dr-stage #dr-go {
  flex: 1 1 auto; min-width: 0; height: auto; margin: 0; padding: 0 20px !important; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  white-space: nowrap; overflow: hidden; border-radius: 0; font: 600 calc(15px * var(--tk, 1)) / 1.3 var(--k-font);
}
html.ns .dr-stage #dr-go b { font: 700 calc(22px * var(--tk, 1)) / 1.1 var(--k-font); letter-spacing: 0; text-transform: none; color: inherit; }
html.ns .dr-stage #dr-go small { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; font: 600 calc(14px * var(--tk, 1)) / 1.2 var(--k-font); letter-spacing: 0; text-transform: none; color: inherit; opacity: .78; }
html.ns .dr-stage #dr-go small::before, html.ns .dr-stage #dr-go small::after { content: none; display: none; }
html.ns .dr-stage #dr-go:disabled { white-space: normal; text-align: center; color: var(--k-text-3); text-shadow: none; }

@media (prefers-reduced-motion: reduce) {
  html.ns #draft.dr-in .dr-stage > *, html.ns .dr-stage #dr-title, html.ns .dr-stage .dcard.ban img, html.ns .dr-stage .dcard.ban .dx { animation: none !important; }
  html.ns .dr-stage .dcard:hover img { transform: none; }
}