/* v5.7 (просьба владельца): НОВЫЙ ВИД ИНТЕРФЕЙСА — по мотивам меню Nine Sols, Hollow Knight и 20 Minutes Till Dawn.
   Всё под классом html.ns (включает public/js/theme.js; без него — прежний вид «Кузня Бездны» из style.css).
   Принципы: тонкий чистый шрифт (Jost или Manrope), светлый «пергаментный» текст, золото — только как акцент;
   без тяжёлых пиксельных рамок: тёмные полупрозрачные панели, волосяные линии и уголки; пункты меню — строки текста
   с тонкой чертой у выбранного; таблички висят на тонких изящных цепях. Логотип остаётся пиксельным (как у Nine Sols). */

@font-face { font-family: 'Jost'; src: url('/fonts/jost-cyrillic.woff2') format('woff2'); font-weight: 300 700; font-display: swap; unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Jost'; src: url('/fonts/jost-latin.woff2') format('woff2'); font-weight: 300 700; 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; }
@font-face { font-family: 'Manrope'; src: url('/fonts/manrope-cyrillic.woff2') format('woff2'); font-weight: 300 700; font-display: swap; unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Manrope'; src: url('/fonts/manrope-latin.woff2') format('woff2'); font-weight: 300 700; 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; }

/* ---------- палитра и шрифт ---------- */
html.ns {
  --ns-font: 'Jost', 'Segoe UI', system-ui, sans-serif;
  --ns-text: #ece3cf; --ns-text-2: #b3a991; --ns-text-3: #7d7563;
  --ns-gold: #d9b46a; --ns-gold-hi: #f3d897; --ns-red: #d9574a; --ns-green: #8fd19c;
  --ns-line: rgba(236, 227, 207, .16); --ns-line-2: rgba(236, 227, 207, .30);
  --ns-violet: #a774e6; --ns-violet-hi: #d6bdf7; --ns-violet-text: #cdbfe2; --ns-violet-line: rgba(167, 116, 230, .42); --ns-violet-bg: rgba(118, 66, 186, .10);
  --ns-bg: rgba(10, 9, 13, .84); --ns-bg-2: rgba(16, 14, 20, .78); --ns-veil: rgba(4, 4, 6, .62);
  /* тонкая цепь: овальное звено и звено ребром (вектор — чёткая при любом масштабе) */
  --ns-chain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='22'%3E%3Cellipse cx='6' cy='6' rx='3.3' ry='5.4' fill='none' stroke='%23161419' stroke-width='3'/%3E%3Cellipse cx='6' cy='6' rx='3.3' ry='5.4' fill='none' stroke='%23857d8f' stroke-width='1.4'/%3E%3Crect x='4.6' y='10' width='2.8' height='13' rx='1.4' fill='%23161419'/%3E%3Crect x='5.3' y='10.6' width='1.4' height='11.8' rx='.7' fill='%235e5768'/%3E%3C/svg%3E");
  --f-text: var(--ns-font); --f-display: var(--ns-font);
}
html.ns.ns-manrope { --ns-font: 'Manrope', 'Segoe UI', system-ui, sans-serif; }
html.ns body { font-family: var(--ns-font); color: var(--ns-text); }
html.ns :is(button, input, select, textarea) { font-family: var(--ns-font); }

/* ---------- общие детали: панель с волосяной рамкой и золотыми уголками ---------- */
html.ns .ns-panel, html.ns .lobby-stage :is(#L-players, #L-match, #R-rooms), html.ns .modal > .panel, html.ns #herolist .hl-box {
  --c: var(--ns-gold);
  border: 1px solid var(--ns-line) !important; border-image: none !important; border-radius: 0; box-shadow: 0 18px 50px rgba(0, 0, 0, .55) !important;
  background:
    linear-gradient(var(--c), var(--c)) left top / 16px 1px no-repeat, linear-gradient(var(--c), var(--c)) left top / 1px 16px no-repeat,
    linear-gradient(var(--c), var(--c)) right top / 16px 1px no-repeat, linear-gradient(var(--c), var(--c)) right top / 1px 16px no-repeat,
    linear-gradient(var(--c), var(--c)) left bottom / 16px 1px no-repeat, linear-gradient(var(--c), var(--c)) left bottom / 1px 16px no-repeat,
    linear-gradient(var(--c), var(--c)) right bottom / 16px 1px no-repeat, linear-gradient(var(--c), var(--c)) right bottom / 1px 16px no-repeat,
    linear-gradient(180deg, var(--ns-bg), var(--ns-bg-2)) !important;
  background-origin: border-box !important;
}
/* кнопка: тонкая рамка, на наведении — светлее и золотая черта снизу; выбранная — золотой текст и рамка */
html.ns .btn {
  border: 1px solid var(--ns-violet-line) !important; border-image: none !important; border-radius: 0; background: var(--ns-violet-bg) !important; box-shadow: none !important; filter: none !important;
  color: var(--ns-text); font: 500 calc(15px * var(--fs, 1)) / 1.2 var(--ns-font); letter-spacing: .04em; text-shadow: none; padding: 8px 16px; transition: color .15s, border-color .15s, background .15s;
}
html.ns .btn:hover:not(:disabled) { border-color: var(--ns-violet-hi) !important; background: rgba(118, 66, 186, .22) !important; color: #fff; }
html.ns .btn.on, html.ns .btn.on:hover:not(:disabled) { border-color: var(--ns-gold) !important; color: var(--ns-gold-hi); background: rgba(217, 180, 106, .10) !important; }
html.ns .btn:active:not(:disabled) { transform: translateY(1px); }
html.ns .btn:disabled { opacity: .45; cursor: default; }
html.ns .btn.red { border-color: rgba(217, 87, 74, .6) !important; color: #f0a497; background: rgba(217, 87, 74, .08) !important; }
html.ns .btn.red:hover:not(:disabled) { border-color: var(--ns-red) !important; color: #fff; background: rgba(217, 87, 74, .18) !important; }
html.ns .btn img.ic { opacity: .85; }
/* заголовок окна: тонкие буквы с разрядкой, под ним линия с ромбом (как у Hollow Knight) */
html.ns .mhead {
  position: relative; display: flex; justify-content: center; align-items: center; margin: 0 0 12px; padding: 2px 40px 14px; border: 0 !important; background: none !important;
  font: 300 calc(30px * var(--fs, 1)) / 1.1 var(--ns-font); letter-spacing: .14em; text-transform: uppercase; color: var(--ns-text); text-shadow: none;
}
html.ns .mhead::after {
  content: ''; position: absolute; left: 50%; bottom: -2px; width: min(360px, 70%); height: 13px; transform: translateX(-50%);
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13'%3E%3Cpath d='M6.5 1.2 L11.8 6.5 L6.5 11.8 L1.2 6.5 Z' fill='none' stroke='%23d9b46a' stroke-width='1.1'/%3E%3C/svg%3E") center / 13px 13px no-repeat,
    linear-gradient(90deg, transparent, var(--ns-line-2) 25%, var(--ns-line-2) calc(50% - 10px), transparent calc(50% - 10px) calc(50% + 10px), var(--ns-line-2) calc(50% + 10px), var(--ns-line-2) 75%, transparent) center / 100% 1px no-repeat;
}
html.ns .mhead .close {
  position: absolute; right: 0; top: 2px; width: 34px; height: 34px; display: grid; place-items: center; cursor: pointer;
  font: 300 22px / 1 var(--ns-font); color: var(--ns-text-2); border: 1px solid transparent; background: none !important; transition: color .15s, border-color .15s;
}
html.ns .mhead .close:hover { color: #fff; border-color: var(--ns-line-2); }
html.ns .mhead .close { font-size: 0 !important; }
html.ns .mhead .close::before { content: ''; position: absolute; inset: 0; margin: auto; width: 16px; height: 16px; background: currentColor !important;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M2 2L14 14M14 2L2 14' stroke='%23000' stroke-width='1.3'/%3E%3C/svg%3E") center / 16px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M2 2L14 14M14 2L2 14' stroke='%23000' stroke-width='1.3'/%3E%3C/svg%3E") center / 16px no-repeat; }
html.ns .modal { background: var(--ns-veil); }
html.ns .hint { color: var(--ns-text-3); font-family: var(--ns-font); }
html.ns .lbl { color: var(--ns-text-3); font: 500 calc(12px * var(--fs, 1)) / 1 var(--ns-font); letter-spacing: .22em; text-transform: uppercase; }
html.ns input[type=text], html.ns input:not([type]), html.ns input[type=password], html.ns input#name {
  background: rgba(0, 0, 0, .25) !important; border: 0 !important; border-bottom: 1px solid var(--ns-line-2) !important; border-image: none !important; box-shadow: none !important; border-radius: 0;
  color: var(--ns-text); font: 400 calc(18px * var(--fs, 1)) / 1.3 var(--ns-font); padding: 8px 10px; outline: none;
}
html.ns input:focus { border-bottom-color: var(--ns-gold) !important; }
/* ползунок: тонкая линия, ромб вместо ручки */
html.ns input[type=range] { -webkit-appearance: none; appearance: none; height: 18px; background: transparent; border: 0 !important; box-shadow: none !important; }
html.ns input[type=range]::-webkit-slider-runnable-track { height: 1px; background: var(--ns-line-2); }
html.ns input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 11px; height: 11px; margin-top: -5px; background: var(--ns-gold); border: 0; transform: rotate(45deg); box-shadow: 0 0 0 3px rgba(10, 9, 13, .9); cursor: pointer; }
html.ns input[type=range]::-moz-range-track { height: 1px; background: var(--ns-line-2); }
html.ns input[type=range]::-moz-range-thumb { width: 10px; height: 10px; background: var(--ns-gold); border: 0; transform: rotate(45deg); cursor: pointer; }
html.ns input[type=checkbox] { -webkit-appearance: none; appearance: none; width: 16px; height: 16px; border: 1px solid var(--ns-line-2); background: transparent; display: inline-grid; place-items: center; cursor: pointer; vertical-align: -3px; margin: 0 6px 0 0; }
html.ns input[type=checkbox]:checked { border-color: var(--ns-gold); }
html.ns input[type=checkbox]:checked::after { content: ''; width: 8px; height: 8px; background: var(--ns-gold); transform: rotate(45deg) scale(.8); }

/* ---------- главный экран: видео-фон и затемнение у меню ---------- */
html.ns #lobbyvid { filter: brightness(.82) saturate(.9) contrast(1.02); }
/* затемнение фона под табличками — слоем во весь экран (#lobby::after), а не по кадру меню 1920×1080: кадр уменьшается под окно,
   и при другом соотношении сторон (браузер с панелями, 16:10, 21:9) на его краю была видна граница (10 октября 2026) */
html.ns #lobby::after {
  content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background: linear-gradient(270deg, rgba(5, 5, 8, .72) 0%, rgba(5, 5, 8, .45) 28%, transparent 52%), linear-gradient(0deg, rgba(5, 5, 8, .55), transparent 30%);
}
html.ns .lobby-stage > * { z-index: 1; }
/* главный экран: меню слева под логотипом — затемнение слева (поверх паладина ровно настолько, чтобы читался текст) */
html.ns #lobby:has(.lobby-stage[data-view="menu"])::after {
  background: linear-gradient(90deg, rgba(5, 4, 9, .74) 0%, rgba(5, 4, 9, .52) 20%, rgba(5, 4, 9, .18) 34%, transparent 46%), linear-gradient(0deg, rgba(5, 5, 8, .5), transparent 28%);
}
/* фон — чёрная дыра (html.bg-hole): затемнение чисто чёрное, чтобы небо оставалось #000 */
html.ns.bg-hole #lobby::after { background: linear-gradient(270deg, rgba(0, 0, 0, .62) 0%, rgba(0, 0, 0, .38) 28%, transparent 52%), linear-gradient(0deg, rgba(0, 0, 0, .45), transparent 30%); }
html.ns.bg-hole #lobby:has(.lobby-stage[data-view="menu"])::after { background: linear-gradient(90deg, rgba(0, 0, 0, .55) 0%, rgba(0, 0, 0, .3) 24%, transparent 40%); }
body.drafting #lobby::after { display: none; } /* в выборе героев таблички спрятаны — затемнения, как и раньше, нет */
/* логотип: без таблички — только пиксельные буквы (как у Nine Sols) */
/* логотип (владелец выбрал «тонкий с орнаментом», как у Hollow Knight): завиток — «КОРОЛЕВСКАЯ» — БЕЗДНА — завиток (js/nsmenu.js) */
html.ns .lobby-stage #L-logo { display: flex !important; flex-direction: column; align-items: center; gap: 0; left: 64px !important; top: 52px !important; width: 760px !important; height: auto !important; min-height: 0 !important; padding: 0 !important; text-align: center; background: none !important; border: 0 !important; border-image: none !important; box-shadow: none !important; }
html.ns .lobby-stage #L-logo :is(.lb-chain, .lb-pend) { display: none !important; }
html.ns .lobby-stage #L-logo .t2 {
  margin: 2px 0 0; font: 300 128px / 1 var(--ns-font); letter-spacing: .28em; text-indent: .28em; text-transform: uppercase; text-align: center;
  color: #f1e7d0; text-shadow: 0 2px 0 rgba(0, 0, 0, .45), 0 0 46px rgba(0, 0, 0, .55);
}
html.ns .lobby-stage #L-logo .ns-sub { font: 500 20px / 1 var(--ns-font); letter-spacing: .62em; text-indent: .62em; text-transform: uppercase; color: var(--ns-gold); text-shadow: 0 1px 0 rgba(0, 0, 0, .6); margin-top: 4px; }
html.ns .lobby-stage #L-logo .ns-orn { color: var(--ns-gold); opacity: .9; filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .6)); line-height: 0; }
html.ns .lobby-stage #L-logo .ns-orn svg { width: 520px; height: 40px; }
html.ns .lobby-stage #L-logo .ns-orn.bot svg { transform: scaleY(-1); }
html.ns .lobby-stage #L-logo .ns-orn.bot { margin-top: 10px; }
html:not(.ns) .ns-orn, html:not(.ns) .ns-sub, html:not(.ns) #ns-me { display: none; }

/* таблички на тонких цепях */
html.ns .lobby-stage .lb-chain { display: none !important; /* цепи убраны по просьбе владельца */ position: absolute; top: -1266px; width: 12px; height: 1266px; background: var(--ns-chain) 0 100% / 12px 22px repeat-y; pointer-events: none; }
html.ns .lobby-stage .lb-chain::after { content: ''; position: absolute; left: 1px; bottom: -6px; width: 10px; height: 10px; border: 1px solid var(--ns-gold); border-radius: 50%; background: rgba(10, 9, 13, .9); }
html.ns .lobby-stage .lb-chain.c1 { left: 56px; } html.ns .lobby-stage .lb-chain.c2 { right: 56px; }
html.ns .lobby-stage .lb-lantern { display: none; }

/* ---------- главное меню: строки текста с тонкой чертой у выбранного ---------- */
/* меню по высоте содержимого; вместе с разделами под ним — посередине между логотипом и табличкой имени */
html.ns .lobby-stage #M-menu { padding: 0 !important; display: flex; flex-direction: column; gap: 2px; min-height: 0 !important; height: auto; top: 550px !important; left: 76px !important; width: 460px !important; background: none !important; border: 0 !important; border-image: none !important; box-shadow: none !important; }
html.ns .lobby-stage #M-menu .lb-chain { display: none !important; }
html.ns .lobby-stage #M-sub { top: 822px !important; left: 76px !important; width: auto !important; justify-content: flex-start !important; }
html.ns .lobby-stage #M-menu .mm-btn {
  position: relative; display: flex; align-items: center; gap: 14px; height: auto; min-height: 0; width: 100%; padding: 13px 28px !important; margin: 0;
  border: 0 !important; background: none !important; text-align: left; justify-content: flex-start;
  font: 400 calc(30px * var(--tk, 1)) / 1.15 var(--ns-font); letter-spacing: .03em; text-transform: none; color: var(--ns-violet-text); text-shadow: 0 1px 0 rgba(0, 0, 0, .55); transition: color .18s, transform .18s;
}
html.ns .lobby-stage #M-menu .mm-btn img.ic { display: none; }
html.ns .lobby-stage #M-menu .mm-btn::before {
  content: ''; position: absolute; left: 8px; top: 50%; width: 2px; height: 26px; margin-top: -13px; background: linear-gradient(var(--ns-violet-hi), var(--ns-violet)); box-shadow: 0 0 10px rgba(167, 116, 230, .65);
  opacity: 0; transform: scaleY(.2); transition: opacity .18s, transform .18s;
}
html.ns .lobby-stage #M-menu .mm-btn:hover:not(:disabled), html.ns .lobby-stage #M-menu .mm-btn:focus-visible { color: #f6efff; transform: translateX(6px); background: none !important; }
html.ns .lobby-stage #M-menu .mm-btn:hover:not(:disabled)::before, html.ns .lobby-stage #M-menu .mm-btn:focus-visible::before { opacity: 1; transform: none; }
html.ns .lobby-stage #M-menu .mm-btn.mm-main { color: var(--ns-gold-hi); }
html.ns .lobby-stage #M-menu .mm-btn.mm-main::before { background: linear-gradient(var(--ns-gold-hi), var(--ns-gold)); box-shadow: 0 0 10px rgba(217, 180, 106, .55); }
html.ns .lobby-stage #M-menu .mm-btn:disabled { opacity: 1; color: #6e6380; }
html.ns .lobby-stage #M-menu .mm-soon { margin-left: 18px; padding: 0; background: none !important; box-shadow: none !important; font: 500 calc(11px * var(--tk, 1)) / 1 var(--ns-font); letter-spacing: .24em; text-transform: uppercase; color: var(--ns-text-3); }
/* под меню — мелкие разделы ссылками через точку */
html.ns .lobby-stage #M-sub { display: flex; align-items: center; gap: 0; margin-left: 6px; }
html.ns .lobby-stage #M-sub .btn {
  height: auto !important; padding: 10px 22px !important; border: 0 !important; background: none !important; flex: none; width: auto !important;
  font: 500 calc(14px * var(--tk, 1)) / 1 var(--ns-font); letter-spacing: .22em; text-transform: uppercase; color: var(--ns-violet-text);
}
html.ns .lobby-stage #M-sub .btn + .btn::before { content: ''; position: absolute; left: -2px; top: 50%; width: 4px; height: 4px; margin-top: -2px; background: var(--ns-violet); transform: rotate(45deg); opacity: .7; }
html.ns .lobby-stage #M-sub .btn { position: relative; }
html.ns .lobby-stage #M-sub .btn img.ic { display: none; }
html.ns .lobby-stage #M-sub .btn:hover { color: #f6efff; background: none !important; }
html.ns .lobby-stage #M-sub .btn:hover::after { content: ''; position: absolute; left: 22px; right: 22px; bottom: 4px; height: 1px; background: var(--ns-violet-hi); }
/* разделы сверху справа (в комнатах и лобби) — тоже текстом на цепях */
html.ns .lobby-stage .nav-btn { height: 46px !important; font: 500 calc(14px * var(--tk, 1)) / 1 var(--ns-font) !important; letter-spacing: .16em; text-transform: uppercase; color: var(--ns-text-2); background: var(--ns-bg) !important; }
html.ns .lobby-stage .nav-btn img.ic { display: none; }
html.ns .lobby-stage .nav-btn::before, html.ns .lobby-stage .nav-btn::after { display: none !important; background: var(--ns-chain) 0 100% / 12px 22px repeat-y !important; width: 12px !important; top: -1266px !important; height: 1266px !important; }

/* ---------- ник на главном экране (табличка имени убрана — по просьбе владельца; вход и ник — в Настройках) ---------- */
html.ns .lobby-stage #L-account { display: none !important; }
html.ns .lobby-stage #ns-me {
  position: absolute; right: 64px; top: 52px; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; padding: 6px 0 6px 18px; cursor: pointer;
  border: 0; background: none; color: var(--ns-text); font-family: var(--ns-font); text-align: right;
}
html.ns .lobby-stage #ns-me span { font: 500 12px / 1 var(--ns-font); letter-spacing: .26em; text-transform: uppercase; color: var(--ns-text-3); }
html.ns .lobby-stage #ns-me b { font: 500 26px / 1 var(--ns-font); letter-spacing: .03em; color: var(--ns-text); transition: color .15s; }
html.ns .lobby-stage #ns-me::after { content: ''; position: absolute; right: 0; bottom: -4px; width: 0; height: 1px; background: var(--ns-gold); transition: width .2s; }
html.ns .lobby-stage #ns-me:hover b { color: #fff8e6; } html.ns .lobby-stage #ns-me:hover::after { width: 100%; }
/* раздел «Аккаунт» в настройках: поле ника и вход / регистрация / выход */
html.ns #options .ns-acc .lt-name .lbl { display: none; }
html.ns #options .ns-acc { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 18px; align-items: center; }
html.ns #options .ns-acc .opt-sec { grid-column: 1 / -1; }
html.ns #options .ns-acc input#name { width: 100%; font-size: calc(18px * var(--fs, 1)); }
html.ns #options .ns-acc input#name.locked { color: var(--ns-gold-hi); border-bottom-color: transparent !important; background: transparent !important; }
html.ns #options .ns-acc .acc-box { display: flex; gap: 10px; align-items: center; justify-content: flex-end; flex-wrap: wrap; margin: 0; padding: 0; background: none !important; border: 0 !important; }
html.ns #options .ns-acc .acc-line, html.ns #options .ns-acc .acc-who { display: none; }

/* ---------- окно настроек ---------- */
html.ns #options .opts-panel { padding: 22px 36px 18px !important; width: min(1320px, 96vw); }
/* два столбца (как в бою, ns-game.css): с разделом «Аккаунт» окно в один столбец не влезало по высоте (уменьшалось до 55%) */
html.ns #options .opts-panel:not(.keys) { columns: 2; column-gap: 48px; column-rule: 1px solid var(--ns-line); }
html.ns #options .opts-panel:not(.keys) > :is(.mhead, .opt-tabs, .ns-acc, #o-keys-tab, .opt-foot) { column-span: all; }
html.ns #options .opts-panel:not(.keys) > :is(.opt-row, canvas) { break-inside: avoid; }
html.ns #options .opts-panel:not(.keys) > .opt-sec { break-after: avoid; break-inside: avoid; }
html.ns #options .opts-panel:not(.keys) > .opt-row:not(.o-match) { grid-template-columns: minmax(0, 1.25fr) minmax(150px, 1fr) 52px; column-gap: 14px; }
html.ns #options .opt-tabs { display: flex; gap: 26px; align-items: flex-end; margin: -4px 0 14px; border-bottom: 1px solid var(--ns-line); }
html.ns #options .opt-tabs .btn { border: 0 !important; background: none !important; padding: 8px 0 10px !important; margin-bottom: -1px; font-size: calc(15px * var(--fs, 1)); letter-spacing: .14em; text-transform: uppercase; color: var(--ns-text-3); border-bottom: 1px solid transparent !important; }
html.ns #options .opt-tabs .btn.on { color: var(--ns-gold-hi); border-bottom-color: var(--ns-gold) !important; background: none !important; }
html.ns #options .opt-tabs .opt-acc { margin-left: auto; padding-bottom: 10px; }
html.ns #options .opt-sec {
  display: flex; align-items: center; gap: 12px; margin: 14px 0 4px; padding: 0; border: 0 !important; background: none !important;
  font: 500 calc(12px * var(--fs, 1)) / 1 var(--ns-font); letter-spacing: .26em; text-transform: uppercase; color: var(--ns-gold);
}
html.ns #options .opt-sec::after { content: ''; flex: 1; height: 1px; background: var(--ns-line); }
html.ns #options .opt-row { padding: 3px 0; border: 0; font: 400 calc(15px * var(--fs, 1)) / 1.35 var(--ns-font); color: var(--ns-text); }
html.ns #options .opt-row > span:first-child { color: var(--ns-text-2); }
html.ns #options .opt-row b { color: var(--ns-gold-hi); font-weight: 500; font-variant-numeric: tabular-nums; }
html.ns #options .opt-row > span:first-child b { color: var(--ns-text); }
html.ns #options .swatch { border-radius: 0; border: 1px solid rgba(0, 0, 0, .6); box-shadow: none; }
html.ns #options .swatch.on { outline: 1px solid var(--ns-gold-hi); outline-offset: 2px; }
html.ns #options #o-preview { border: 1px solid var(--ns-line); }
html.ns #options .opt-foot { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--ns-line); }

/* логотип владельца «Abyss» (картинка) — слева сверху; мягкая фиолетовая дымка за ним, чтобы читался на закатном небе */
html.ns .lobby-stage #L-logo.ns-img { left: 44px !important; top: 22px !important; width: 560px !important; display: block !important; }
html.ns .lobby-stage #L-logo.ns-img .t2 { display: none; }
html.ns .lobby-stage #L-logo.ns-img::before {
  content: ''; position: absolute; inset: 8% 4% 4%; z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, rgba(24, 10, 40, .55), rgba(24, 10, 40, .25) 60%, transparent);
}
/* пиксельная надпись «ABYSS» из кода (js/pixlogo.js, 10 октября 2026) — только на главном экране, над меню по его центру (x 303);
   13 окт. 2026 (просьба владельца): всё меню выше и левее — «Быстрая игра» напротив кончика хвоста чёрной дыры (y ~417 на 1920×1080) */
html.ns .lobby-stage #L-logo.ns-pix { left: max(24px, calc(303px - var(--plw, 536px) / 2)) !important; top: 174px !important; width: auto !important; display: block !important; }
html.ns .lobby-stage #L-logo.ns-pix :is(.t2, .ns-sub, .ns-orn) { display: none; }
html.ns .lobby-stage #L-logo.ns-pix .ns-pixlogo { display: block; image-rendering: pixelated; pointer-events: none; }
html.ns .lobby-stage #L-logo.vhide { display: none !important; } /* в «Мультиплеере» и в комнате логотипа нет (просьба владельца) */
html.ns .lobby-stage #L-logo .ns-logo { display: block; width: 100%; height: auto; user-select: none; filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .55)) drop-shadow(0 0 26px rgba(140, 80, 220, .28)); }

/* главное меню — по центру под логотипом (просьба владельца): центр логотипа x 303; у выбранного пункта —
   два ромбика по бокам (как у Hollow Knight) вместо черты слева */
/* пункты, строка «Рейтинг · Герои» под ними и логотип — на одной оси x 303 (13 окт. 2026; было 343) */
html.ns .lobby-stage #M-menu { left: 73px !important; width: 460px !important; align-items: stretch; }
html.ns .lobby-stage #M-menu .mm-btn { justify-content: center; text-align: center; gap: 16px; padding: 12px 20px !important; }
html.ns .lobby-stage #M-menu .mm-btn::before, html.ns .lobby-stage #M-menu .mm-btn::after {
  content: ''; position: static; flex: none; width: 7px; height: 7px; margin: 0; background: var(--ns-violet-hi); box-shadow: 0 0 8px rgba(167, 116, 230, .7);
  opacity: 0; transform: rotate(45deg) scale(.3); transition: opacity .18s, transform .18s;
}
html.ns .lobby-stage #M-menu .mm-btn:hover:not(:disabled), html.ns .lobby-stage #M-menu .mm-btn:focus-visible { transform: none; }
html.ns .lobby-stage #M-menu .mm-btn:hover:not(:disabled)::before, html.ns .lobby-stage #M-menu .mm-btn:hover:not(:disabled)::after,
html.ns .lobby-stage #M-menu .mm-btn:focus-visible::before, html.ns .lobby-stage #M-menu .mm-btn:focus-visible::after { opacity: 1; transform: rotate(45deg) scale(1); }
html.ns .lobby-stage #M-menu .mm-btn.mm-main::before, html.ns .lobby-stage #M-menu .mm-btn.mm-main::after { background: var(--ns-gold-hi); box-shadow: 0 0 8px rgba(217, 180, 106, .6); }
html.ns .lobby-stage #M-menu .mm-soon { margin-left: -6px; }
html.ns .lobby-stage #M-sub { left: 23px !important; width: 560px !important; justify-content: center !important; margin-left: 0; }