/* v5.7 (редизайн 10 октября 2026): «КУЗНЯ У КРАЯ БЕЗДНЫ» — общий набор деталей окон нового вида. Правила —
   tools/art/UI_MASTER_PROMPT.md. Пиксельные детали рисует js/nskit.js (CSS-переменные --k-slab, --k-tag, --k-btn…);
   правила с html.nskit работают только после успешной отрисовки. Главное меню (#M-menu, #M-sub, #L-logo, #ns-me) не трогаем.
   1 пиксель интерфейса = 3 px: рамки, фаски, тени — кратны 3. */

@font-face { font-family: 'Exo 2'; src: url('/fonts/exo2-800-cyrillic.woff2') format('woff2'); font-weight: 800; font-display: swap; unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Exo 2'; src: url('/fonts/exo2-800-latin.woff2') format('woff2'); font-weight: 800; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* ---------- палитра (мастер-промпт, раздел 3) ---------- */
html.ns {
  --k-ink: #08070b; --k-0: #0e0c12; --k-1: #16131c; --k-2: #1f1b27; --k-3: #2b2535; --k-4: #3d3549;
  --k-parch-c: #e2d4b6; --k-parch-2: #cdb98f; --k-ink-t: #2a2018; --k-ink-t2: #6b5a43;
  --k-text: #efe6d3; --k-text-2: #a89e8b; --k-text-3: #71695c;
  --k-gold: #d9b46a; --k-gold-hi: #f3d897; --k-gold-lo: #7a5a26; --k-on-gold: #1a1408;
  --k-violet: #a774e6; --k-violet-hi: #d6bdf7;
  --k-blood: #c8473c; --k-blood-deep: #8f1d27; --k-life: #7fcf8e;
  --k-r-common: #4fb85c; --k-r-rare: #56b6ff; --k-r-epic: #a35cf0; /* 11 окт.: фиолетовый */ --k-r-myth: #f0962e; /* v5.8: зелёный / синий / эпический красный / легендарный оранжевый */
  --k-title: 'Exo 2', 'Manrope', sans-serif; /* решение владельца 10 окт.: игровой шрифт вместо антиквы; одно начертание 800 — любой font-weight даёт 800 */
  --k-font: var(--ns-font);
}

/* ---------- окно: затемнение мира, корпус — кованая плита, название — на бирке ---------- */
html.ns.nskit .modal { background: rgba(6, 5, 8, .72); }
/* корпус рисует слой ::before (рамка 18 px), а над ним — прозрачная полоса --k-top под бирку: окно меряется (fit.js)
   вместе с биркой, и её не срезает край экрана. Отступы внутри: --k-pt / --k-px / --k-pb (без учёта рамки).
   :is(.modal, #k-id) — чтобы правило было весомее стилей окон по id из ns.css / ns-windows.css */
html.ns.nskit :is(.modal, #k-id) > .panel {
  --k-top: 33px;
  position: relative; isolation: isolate; border: 0 !important; border-image: none !important; border-radius: 0 !important;
  background: none !important; box-shadow: none !important; filter: drop-shadow(0 6px 0 rgba(0, 0, 0, .6));
  padding: calc(var(--k-top) + 18px + var(--k-pt, 22px)) calc(18px + var(--k-px, 26px)) calc(18px + var(--k-pb, 20px)) !important;
  color: var(--k-text);
}
html.ns.nskit :is(.modal, #k-id) > .panel::before {
  content: ''; position: absolute; inset: var(--k-top) 0 0 0; z-index: -1; pointer-events: none;
  border: 18px solid transparent; border-image: var(--k-slab) 18 fill / 18px / 0 repeat; image-rendering: pixelated;
}
/* бирка: восьмиугольная табличка на верхнем крае корпуса (выходит за него наполовину), над ней — самоцвет Бездны */
html.ns.nskit .modal > .panel > .mhead {
  position: static !important; display: table !important; height: 45px; box-sizing: border-box; white-space: nowrap;
  margin: calc(-40px - var(--k-pt, 22px)) auto 16px !important; padding: 0 24px !important;
  border-style: solid !important; border-color: transparent !important; border-width: 0 21px !important; border-image: var(--k-tag) 0 21 fill / 0 21px / 0 stretch !important;
  background: none !important; color: #f2e5c6; text-shadow: 0 3px 0 var(--k-ink); text-transform: none; letter-spacing: .02em;
  font: 600 28px / 45px var(--k-title);
}
html.ns.nskit .modal > .panel > .mhead::after { display: none !important; }
html.ns.nskit .modal > .panel > .mhead::before {
  content: ''; position: absolute; left: 50%; top: calc(var(--k-top) - 22px - 11px); width: 39px; height: 21px; margin-left: -19px; pointer-events: none;
  background: var(--k-gem) center / 39px 21px no-repeat; image-rendering: pixelated;
}
/* крестик — пиксельный, в правом верхнем углу корпуса */
html.ns.nskit .modal > .panel > .mhead > .close {
  position: absolute !important; right: 21px; top: calc(var(--k-top) + 21px); width: 39px !important; height: 39px !important; border: 0 !important; border-radius: 0; box-shadow: none !important;
  background: var(--k-x) center / 27px 27px no-repeat !important; image-rendering: pixelated; font-size: 0 !important; color: transparent !important; cursor: pointer;
}
html.ns.nskit .modal > .panel > .mhead > .close::before { display: none !important; }
html.ns.nskit .modal > .panel > .mhead > .close:hover { background-image: var(--k-x-hi) !important; }

/* ---------- кнопки-плиты: тёмная (обычная), золотая (главная/выбранная), кровавая (бан, выход) ---------- */
html.ns.nskit .modal .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; image-rendering: pixelated;
  padding: 4px 14px 3px !important; color: var(--k-text); text-shadow: 0 2px 0 rgba(0, 0, 0, .45); letter-spacing: 0; text-transform: none;
  font: 600 calc(15px * var(--fs, 1)) / 1.2 var(--k-font); transition: none;
}
html.ns.nskit .modal .btn:hover:not(:disabled) { border-image-source: var(--k-btn-hi) !important; color: #fff; }
/* наведение — фиолетовая засечка у левого края (знак «можно нажать», не обводка) */
html.ns.nskit .modal .btn:hover:not(:disabled)::before { 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 .modal .btn:active:not(:disabled) { border-image-source: var(--k-btn-dn) !important; transform: translateY(3px); }
html.ns.nskit .modal .btn.on, html.ns.nskit .modal .btn.gold, html.ns.nskit .modal .btn.big { 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 .modal :is(.btn.on, .btn.gold, .btn.big):hover:not(:disabled) { border-image-source: var(--k-btn-gold-hi) !important; color: var(--k-on-gold); }
html.ns.nskit .modal :is(.btn.on, .btn.gold, .btn.big):hover::before { display: none; }
html.ns.nskit .modal :is(.btn.on, .btn.gold, .btn.big):active:not(:disabled) { border-image-source: var(--k-btn-gold-dn) !important; }
html.ns.nskit .modal .btn.red { color: #e9776b; }
html.ns.nskit .modal .btn.red:hover:not(:disabled) { border-image-source: var(--k-btn-blood-hi) !important; color: #ffd9d2; }
html.ns.nskit .modal .btn.red:hover:not(:disabled)::before { background: #ff9a8a; box-shadow: 0 3px 0 var(--k-blood); }
html.ns.nskit .modal .btn:disabled { border-image-source: var(--k-btn-off) !important; color: var(--k-text-3); text-shadow: none; opacity: 1; cursor: default; }

/* ---------- поля, флажки, ползунки ---------- */
html.ns.nskit .modal :is(input[type=text], input:not([type]), input[type=password], input#name) {
  border-style: solid !important; border-color: transparent !important; border-width: 6px !important; border-radius: 0 !important;
  border-image: var(--k-well) 6 fill / 6px / 0 stretch !important; background: none !important; box-shadow: none !important;
  padding: 5px 10px !important; color: var(--k-text); font: 600 calc(16px * var(--fs, 1)) / 1.3 var(--k-font);
}
html.ns.nskit .modal input:focus { outline: 3px solid var(--k-gold); outline-offset: 0; }
html.ns.nskit .modal input[type=checkbox] {
  width: 33px; height: 33px; margin: 0 8px 0 0; border: 0 !important; background: var(--k-check) center / 33px 33px no-repeat !important; image-rendering: pixelated; vertical-align: middle;
}
html.ns.nskit .modal input[type=checkbox]:checked { background-image: var(--k-check-on) !important; }
html.ns.nskit .modal input[type=checkbox]::after { display: none !important; }
/* ползунок — 10 гнёзд, заполненные золотом (--v ставит nskit.js по значению, ступенями по 10%) */
html.ns.nskit .modal input[type=range] {
  -webkit-appearance: none; appearance: none; height: 24px; margin: 0; cursor: pointer; border: 0 !important; box-shadow: none !important;
  background:
    repeating-linear-gradient(90deg, transparent 0 calc(10% - 3px), var(--k-1) calc(10% - 3px) 10%),
    linear-gradient(var(--k-gold-hi), var(--k-gold-hi)) 0 0 / var(--v, 0%) 3px no-repeat,
    linear-gradient(#8a6428, #8a6428) 0 100% / var(--v, 0%) 3px no-repeat,
    linear-gradient(var(--k-gold), var(--k-gold)) 0 0 / var(--v, 0%) 100% no-repeat,
    linear-gradient(var(--k-ink), var(--k-ink)) 0 0 / 100% 3px no-repeat,
    linear-gradient(#2f2939, #2f2939) 0 100% / 100% 3px no-repeat,
    var(--k-0) !important;
}
html.ns.nskit .modal input[type=range]:hover {
  background:
    repeating-linear-gradient(90deg, transparent 0 calc(10% - 3px), var(--k-1) calc(10% - 3px) 10%),
    linear-gradient(#fff3cc, #fff3cc) 0 0 / var(--v, 0%) 3px no-repeat,
    linear-gradient(#8a6428, #8a6428) 0 100% / var(--v, 0%) 3px no-repeat,
    linear-gradient(#e8c67f, #e8c67f) 0 0 / var(--v, 0%) 100% no-repeat,
    linear-gradient(var(--k-ink), var(--k-ink)) 0 0 / 100% 3px no-repeat,
    linear-gradient(#3d3549, #3d3549) 0 100% / 100% 3px no-repeat,
    #13101a !important;
}
html.ns.nskit .modal input[type=range]::-webkit-slider-runnable-track { height: 24px; background: transparent; border: 0; }
html.ns.nskit .modal input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 12px; height: 24px; margin-top: 0; background: transparent; border: 0; box-shadow: none; transform: none; }
html.ns.nskit .modal input[type=range]::-moz-range-track { height: 24px; background: transparent; }
html.ns.nskit .modal input[type=range]::-moz-range-thumb { width: 12px; height: 24px; background: transparent; border: 0; transform: none; }

/* ---------- общие детали для разметки окон ---------- */
/* меч-курсор (2 кадра покачивания) */
@keyframes k-sway { to { background-position: -90px 0; } }
html.ns.nskit .k-sword { display: inline-block; width: 45px; height: 21px; background: var(--k-sword) 0 0 / 90px 21px no-repeat; image-rendering: pixelated; animation: k-sway .6s steps(2) infinite; }
/* клавиша-колпачок */
html.ns.nskit .k-key, html.ns.nskit kbd.k {
  display: inline-block; min-width: 27px; box-sizing: border-box; text-align: center; vertical-align: middle;
  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;
  padding: 0 3px; color: var(--k-on-gold); font: 700 13px / 15px var(--k-font); text-shadow: none;
}
/* штамп (подтверждённое): двойная рамка, наклон, капс */
html.ns.nskit .k-stamp {
  display: inline-block; transform: rotate(-8deg); border-style: solid; border-color: transparent; border-width: 12px; border-image: var(--k-stamp-gold) 12 / 12px / 0 repeat; image-rendering: pixelated;
  padding: 0 8px; color: var(--k-gold); font: 700 14px / 18px var(--k-font); letter-spacing: .08em; text-transform: uppercase;
}
html.ns.nskit .k-stamp.life { border-image-source: var(--k-stamp-life); color: var(--k-life); }
html.ns.nskit .k-stamp.blood { border-image-source: var(--k-stamp-blood); color: var(--k-blood); }
@keyframes k-stamp { 0% { transform: rotate(-8deg) scale(1.25); } 50% { transform: rotate(-8deg) scale(1.1); } 100% { transform: rotate(-8deg) scale(1); } }
html.ns.nskit .k-stamp.in { animation: k-stamp .12s steps(3) both; }

/* материалы (9-slice) — для любого блока: .k-slab (кованая плита, рамка 18 px), .k-block (вложенный блок, 6 px),
   .k-well (гнездо, 6 px), .k-parch (пергамент, 24 px — текст тёмный) */
html.ns.nskit .k-slab { border: 18px solid transparent; border-image: var(--k-slab) 18 fill / 18px / 0 repeat; image-rendering: pixelated; }
html.ns.nskit .k-block { border: 6px solid transparent; border-image: var(--k-block) 6 fill / 6px / 0 stretch; image-rendering: pixelated; }
html.ns.nskit .k-block-hi { border: 6px solid transparent; border-image: var(--k-block-hi) 6 fill / 6px / 0 stretch; image-rendering: pixelated; }
html.ns.nskit .k-well { border: 6px solid transparent; border-image: var(--k-well) 6 fill / 6px / 0 stretch; image-rendering: pixelated; }
html.ns.nskit .k-parch { border: 24px solid transparent; border-image: var(--k-parch) 24 fill / 24px / 0 repeat; image-rendering: pixelated; color: var(--k-ink-t); filter: drop-shadow(0 6px 0 rgba(0, 0, 0, .55)); }
html.ns.nskit .k-parch :is(b, strong) { color: #8a2c22; }
/* кованый прут-разделитель (высота 18 px) и ромб в его центр (.k-rod.mid) */
html.ns.nskit .k-rod { display: block; height: 18px; 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.nskit .k-rod.gold { border-image-source: var(--k-rod-gold); }
html.ns.nskit .k-rod.mid { position: relative; }
html.ns.nskit .k-rod.mid::after { content: ''; position: absolute; left: 50%; top: -2px; width: 21px; height: 21px; margin-left: -10px; background: var(--k-dia) center / 21px no-repeat; image-rendering: pixelated; }
/* уголки выбора: родителю — position: relative; .k-sel — уголки всегда, .k-hov — уголки при наведении */
html.ns.nskit :is(.k-sel, .k-hov:hover)::after { content: ''; position: absolute; inset: -9px; pointer-events: none; border: 18px solid transparent; border-image: var(--k-brackets) 18 / 18px / 0 stretch; image-rendering: pixelated; }
/* постамент под портретом (84×33 px) */
html.ns.nskit .k-ped { background: var(--k-pedestal) center bottom / 84px 33px no-repeat; image-rendering: pixelated; }
/* свеча готовности (кадр 27×54 px): горит — 2 кадра, .off — погасла */
@keyframes k-flame { to { background-position: -54px 0; } }
html.ns.nskit .k-candle { display: inline-block; width: 27px; height: 54px; background: var(--k-candle) 0 0 / 81px 54px no-repeat; image-rendering: pixelated; animation: k-flame .5s steps(2) infinite; }
html.ns.nskit .k-candle.off { animation: none; background-position: -54px 0; }
/* значки: монета 27, сердце 33×30, череп 33, корона 33×24, крестик 27, стрелки ◂ ▸ 18×27 */
html.ns.nskit .k-ic { display: inline-block; vertical-align: middle; background: center / contain no-repeat; image-rendering: pixelated; }
html.ns.nskit .k-ic.coin { width: 27px; height: 27px; background-image: var(--k-coin); }
html.ns.nskit .k-ic.heart { width: 33px; height: 30px; background-image: var(--k-heart); }
html.ns.nskit .k-ic.heart.off { background-image: var(--k-heart-off); }
html.ns.nskit .k-ic.skull { width: 33px; height: 33px; background-image: var(--k-skull); }
html.ns.nskit .k-ic.crown { width: 33px; height: 24px; background-image: var(--k-crown); }
html.ns.nskit .k-ic.arr-l { width: 18px; height: 27px; background-image: var(--k-arr-l); }
html.ns.nskit .k-ic.arr-r { width: 18px; height: 27px; background-image: var(--k-arr-r); }
/* заголовки: .k-title — антиква (окно/раздел), .k-label — ярлык (капс, только шапки таблиц, подписи, штампы) */
html.ns .k-title { font: 600 28px / 1.15 var(--k-title); color: var(--k-gold); letter-spacing: .01em; text-transform: none; text-shadow: 0 3px 0 var(--k-ink); }
html.ns .k-label { font: 600 12px / 1 var(--k-font); color: var(--k-text-3); letter-spacing: .06em; text-transform: uppercase; }
html.ns .k-num { font-family: var(--k-font); font-weight: 700; font-variant-numeric: tabular-nums; }

/* =====================================================================================================================
   НАСТРОЙКИ (образец): вкладки словами, раздел «Аккаунт», строки полосами, ползунки-гнёзда, флажки-гнёзда
   ===================================================================================================================== */
html.ns.nskit #options .opts-panel { --k-pt: 22px; --k-px: 26px; --k-pb: 16px; width: 1440px; max-width: none; max-height: none; overflow: visible; /* не vw: на маленьких экранах окно целиком уменьшает autoFit, раскладка та же */ }
html.ns.nskit #options .opts-panel:not(.keys) > .opt-row:not(.o-match) { grid-template-columns: minmax(0, 1fr) 270px 66px; column-gap: 16px; }
html.ns.nskit #options .opts-panel:not(.keys) > .opt-row:has(.opt-chk) { grid-template-columns: minmax(0, 1fr) 110px; }
html.ns.nskit #options .opt-row input[type=range] { width: 100%; }
/* строка-пояснение без управления (автоатака): во всю ширину, тише обычной подписи */
html.ns.nskit #options .opts-panel:not(.keys) > .opt-row.opt-note { grid-template-columns: minmax(0, 1fr); min-height: 0; padding-top: 6px; padding-bottom: 6px; }
html.ns.nskit #options .opt-row.opt-note > span:first-child { color: var(--k-text-2); font-size: calc(14px * var(--fs, 1)); }
html.ns.nskit #options .opt-row.opt-note > span:empty { display: none; }
html.ns.nskit #options .opt-row.opt-note:hover { background: none; box-shadow: none; }
html.ns.nskit #options .opt-row.opt-note:hover::before { display: none; }
html.ns.nskit #options :is(.opt-lang, #o-curstyle, .opt-btns) { flex-wrap: nowrap !important; gap: 9px !important; }
html.ns.nskit #options :is(#o-curstyle, .opt-btns) .btn { padding-left: 10px !important; padding-right: 10px !important; }
html.ns.nskit #options .opt-btns .btn { flex: 1 1 auto; min-width: 0; white-space: nowrap; } /* v5.8 «Графика»: варианты — плитами на всю ширину гнезда, в одну строку */
/* разделитель столбцов — кованый прут по вертикали заменяет волосяную линию: тёмная канавка с бликом */
html.ns.nskit #options .opts-panel:not(.keys) { column-gap: 54px; column-rule: 3px solid #0b0a0e; }
/* вкладки: слова; наведение — меч слева; выбранная — золото и золотая черта снизу */
html.ns.nskit #options .opt-tabs { gap: 54px; margin: 0 0 6px; padding-left: 50px; border-bottom: 0; box-shadow: inset 0 -3px 0 #0b0a0e, inset 0 -6px 0 #221e2a; }
html.ns.nskit #options .opt-tabs .btn {
  border: 0 !important; border-image: none !important; background: none !important; padding: 6px 0 12px !important; margin: 0;
  color: var(--k-text-3); font: 600 calc(18px * var(--fs, 1)) / 1.2 var(--k-font); letter-spacing: 0; text-transform: none; text-shadow: none;
}
html.ns.nskit #options .opt-tabs .btn::before { display: none; }
html.ns.nskit #options .opt-tabs .btn:hover:not(.on)::before {
  content: ''; display: block; position: absolute; left: -48px; top: 6px; width: 45px; height: 21px; margin: 0; box-shadow: none;
  background: var(--k-sword) 0 0 / 90px 21px no-repeat; image-rendering: pixelated; animation: k-sway .6s steps(2) infinite;
}
html.ns.nskit #options .opt-tabs .btn:hover:not(:disabled) { color: var(--k-text); border-image: none !important; }
html.ns.nskit #options .opt-tabs .btn.on, html.ns.nskit #options .opt-tabs .btn.on:hover { color: var(--k-gold-hi); box-shadow: inset 0 -3px 0 var(--k-gold) !important; }
html.ns.nskit #options .opt-tabs .btn:active { transform: none; }
html.ns.nskit #options .opt-tabs .opt-acc { padding-bottom: 12px; font-size: 13px; color: var(--k-text-3); }
/* заголовок раздела: антиква золотом и кованый прут до конца столбца */
html.ns.nskit #options .opt-sec {
  margin: 16px 0 6px; gap: 12px; color: var(--k-gold); text-transform: none; letter-spacing: .01em;
  font: 600 calc(22px * var(--fs, 1)) / 1.1 var(--k-title); text-shadow: 0 3px 0 var(--k-ink);
}
html.ns.nskit #options .opt-sec::after { height: 18px; 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.nskit #options .opt-row { position: relative; min-height: 42px; padding: 3px 9px 3px 12px; align-items: center; font: 500 calc(15px * var(--fs, 1)) / 1.35 var(--k-font); color: var(--k-text); }
html.ns.nskit #options .opt-row:hover { background: var(--k-2); box-shadow: inset 0 3px 0 #252030, inset 0 -3px 0 #121017; }
html.ns.nskit #options .opt-row:hover::before { content: ''; position: absolute; left: 0; top: 50%; width: 3px; height: 18px; margin-top: -9px; background: var(--k-violet-hi); box-shadow: 0 3px 0 var(--k-violet); }
html.ns.nskit #options .opt-row > span:first-child { color: var(--k-text); }
html.ns.nskit #options .opt-row > span:first-child b { color: var(--k-gold-hi); font-weight: 700; }
html.ns.nskit #options .opt-row > b { color: var(--k-gold-hi); font: 700 calc(16px * var(--fs, 1)) / 1 var(--k-font); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
html.ns.nskit #options .opt-row .hint { color: var(--k-text-3); font-size: calc(13px * var(--fs, 1)); }
html.ns.nskit #options .opt-chk { display: inline-flex; align-items: center; color: var(--k-text-2); font-weight: 600; }
html.ns.nskit #options .opt-lang, html.ns.nskit #options #o-curstyle { display: inline-flex; gap: 9px; flex-wrap: wrap; }
/* цвет курсора — гнёзда с цветом; выбранный — золотая рамка */
html.ns.nskit #options .swatch { width: 27px; height: 27px; border: 3px solid var(--k-ink) !important; border-radius: 0; box-shadow: inset 3px 3px 0 rgba(255, 255, 255, .25), inset -3px -3px 0 rgba(0, 0, 0, .3); outline: 0; }
html.ns.nskit #options .swatch:hover { outline: 3px solid var(--k-violet-hi); outline-offset: 0; }
html.ns.nskit #options .swatch.on { outline: 3px solid var(--k-gold-hi); outline-offset: 0; box-shadow: inset 3px 3px 0 rgba(255, 255, 255, .25), inset -3px -3px 0 rgba(0, 0, 0, .3), 0 0 0 6px var(--k-ink); }
html.ns.nskit #options #o-preview { border-style: solid !important; border-color: transparent !important; border-width: 6px !important; border-image: var(--k-well) 6 / 6px / 0 stretch !important; image-rendering: pixelated; }
/* раздел «Аккаунт»: ник в гнезде, «Войти» / «Регистрация» — тёмные плиты */
html.ns.nskit #options .ns-acc { margin-bottom: 4px; }
html.ns.nskit #options .ns-acc input#name.locked { color: var(--k-gold-hi); }
/* низ окна: «Сбросить» текстом, подсказка с колпачком Esc */
html.ns.nskit #options .opt-foot { margin-top: 12px; padding-top: 12px; border-top: 0; box-shadow: inset 0 3px 0 #0b0a0e, inset 0 6px 0 #221e2a; display: flex; align-items: center; gap: 18px; }
html.ns.nskit #options #o-reset { border: 0 !important; border-image: none !important; padding: 4px 0 !important; color: var(--k-text-2); text-decoration: underline; text-decoration-color: var(--k-text-3); text-underline-offset: 5px; text-decoration-thickness: 3px; }
html.ns.nskit #options #o-reset:hover { color: var(--k-text); text-decoration-color: var(--k-violet); }
html.ns.nskit #options #o-reset::before { display: none; }
html.ns.nskit #options .opt-foot .hint { color: var(--k-text-3); font-size: 13px; }
/* вкладка «Клавиши»: колпачки */
html.ns.nskit #options .kgroup .kg-t { color: var(--k-gold); font: 600 calc(20px * var(--fs, 1)) / 1.2 var(--k-title); text-transform: none; letter-spacing: .01em; border: 0; }
html.ns.nskit #options .krow { min-height: 42px; align-items: center; border: 0; grid-template-columns: 1fr calc(94px * var(--fs, 1)) calc(94px * var(--fs, 1)); } /* 13 окт. 2026: «Мышь 4», «Пробел», «Num Enter» влезают целиком */
html.ns.nskit #options .krow:hover { background: var(--k-2); }
html.ns.nskit #options .kbtn {
  min-width: 54px; border-style: solid !important; border-color: transparent !important; border-width: 6px 6px 9px !important; border-radius: 0;
  border-image: var(--k-key) 6 6 9 fill / 6px 6px 9px / 0 stretch !important; background: none !important; box-shadow: none !important; image-rendering: pixelated;
  padding: 1px 8px 0 !important; color: var(--k-on-gold); font: 700 calc(14px * var(--fs, 1)) / 1.2 var(--k-font); text-shadow: none;
}
html.ns.nskit #options .kbtn:hover { filter: brightness(1.08); }
html.ns.nskit #options .kbtn.empty { border-image-source: var(--k-well) !important; border-width: 6px !important; border-image-slice: 6 fill !important; border-image-width: 6px !important; color: var(--k-text-3); }
html.ns.nskit #options .kbtn.wait { border-image-source: var(--k-btn-gold) !important; color: var(--k-on-gold); }

/* ---------- экраны от 720p до 4K (10 октября, просьба владельца) ----------
   Окна с autoFit (fit.js) сами растут на больших экранах шагами по 1/3; окна без него — здесь, по --kz из options.js.
   Верстать в px под кадр 1920×1080; vw/vh — только для фона и затемнений. Проверять на 1280×720 и 3840×2160. */
html.ns :is(#acc-modal, #room-pw) > .panel { zoom: var(--kz, 1); }
/* окна с autoFit не сжимаются флексом родителя (иначе колонки сжимаются, а не всё окно уменьшается целиком) */
html.ns :is(#options .opts-panel, #results > .panel, #help > .panel, #stats-pop > .panel, #build > .panel, #bigmap > .panel, #herolist .hl-box, #acc-modal > .panel, #room-pw > .panel) { flex-shrink: 0; }