/* v5.7 (редизайн 10 октября 2026, «Кузня у края Бездны» — tools/art/UI_MASTER_PROMPT.md, раздел 8): экраны боя нового
   вида — лавка (подготовка к арене), итоги матча с церемонией, «Пал от руки» / «Изгнан из Бездны», билд (I), большая
   карта (Tab / M), наблюдатель, пауза, дуэль у доски. Разметку нового вида строят js/kgame.js и js/prepui.js.
   Материалы — из набора (ns-kit.css: --k-slab, --k-block, --k-well, --k-parch, плиты кнопок, значки) и свои детали
   (--kg-*, класс html.kg — js/kgame.js). 1 пиксель интерфейса = 3 px. Всё под html.ns; старый вид (?ui=old) не трогается. */

/* масштаб экранов поверх боя (не окна с autoFit): 720p — меньше (--rs), 1080p — 1, выше — шагами по 1/3 (--kz) */
html.ns { --kgz: calc(var(--kz, 1) * min(var(--rs, 1), 1)); }

/* =====================================================================================================================
   ОБЩЕЕ: кнопки-плиты вне .modal (тёмная, золотая — главная, кровавая), бирка с самоцветом
   ===================================================================================================================== */
html.ns.nskit :is(#prep, #specbar, #results, #death, #quiz) .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; outline: 0 !important; image-rendering: pixelated;
  padding: 5px 16px 4px !important; color: var(--k-text); text-shadow: 0 2px 0 rgba(0, 0, 0, .45); letter-spacing: 0; text-transform: none; text-indent: 0;
  font: 600 calc(16px * var(--fs, 1)) / 1.2 var(--k-font); transition: none; animation: none; filter: none;
}
html.ns.nskit :is(#prep, #specbar, #results, #death, #quiz) .btn:hover:not(:disabled) { border-image-source: var(--k-btn-hi) !important; color: #fff; }
html.ns.nskit :is(#prep, #specbar, #results, #death, #quiz) .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 :is(#prep, #specbar, #results, #death, #quiz) .btn:active:not(:disabled) { border-image-source: var(--k-btn-dn) !important; transform: translateY(3px); }
html.ns.nskit :is(#prep-ready, #btn-lobby, #shop-ready):not(.on) { 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 :is(#prep-ready, #btn-lobby, #shop-ready):not(.on):hover:not(:disabled) { border-image-source: var(--k-btn-gold-hi) !important; color: var(--k-on-gold); }
html.ns.nskit :is(#prep-ready, #btn-lobby, #shop-ready):not(.on):hover::before { display: none; }
html.ns.nskit :is(#prep-ready, #btn-lobby, #shop-ready):not(.on):active:not(:disabled) { border-image-source: var(--k-btn-gold-dn) !important; }
html.ns.nskit :is(#prep, #specbar, #results, #death, #quiz) .btn.red { color: #e9776b; }
html.ns.nskit :is(#prep, #specbar, #results, #death, #quiz) .btn.red:hover:not(:disabled) { border-image-source: var(--k-btn-blood-hi) !important; color: #ffd9d2; }
html.ns.nskit :is(#prep, #specbar, #results, #death, #quiz) .btn.red:hover:not(:disabled)::before { background: #ff9a8a; box-shadow: 0 3px 0 var(--k-blood); }
html.ns.nskit :is(#prep, #specbar, #results, #death, #quiz) .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 :is(#prep, #specbar, #results, #death, #quiz) .btn img.ic { display: none; }
html.ns.nskit :is(#prep, #results, #death) .btn kbd.k { margin: -3px 0 -3px 10px; }
/* бирка заголовка (лавка, итоги): восьмиугольная табличка на верхнем крае плиты и фиолетовый самоцвет над ней */
html.ns.nskit :is(#shop .shop-ttl, #results .kr-tag) {
  position: absolute; left: 50%; transform: translateX(-50%); z-index: 3; height: 45px; box-sizing: border-box; white-space: nowrap;
  padding: 0 24px; border-style: solid; border-color: transparent; border-width: 0 21px; border-image: var(--k-tag) 0 21 fill / 0 21px / 0 stretch; image-rendering: pixelated;
  background: none; color: #f2e5c6; text-shadow: 0 3px 0 var(--k-ink); letter-spacing: .01em; text-transform: none; font: 800 24px / 45px var(--k-title);
}
html.ns.nskit :is(#shop .shop-ttl, #results .kr-tag)::before {
  content: ''; position: absolute; left: 50%; top: -11px; width: 39px; height: 21px; margin-left: -19px; pointer-events: none;
  background: var(--k-gem) center / 39px 21px no-repeat; image-rendering: pixelated;
}
@keyframes kg-drop { 0% { opacity: 0; transform: translateY(-36px); } 70% { opacity: 1; transform: translateY(4px); } 100% { opacity: 1; transform: none; } }
@keyframes kg-in { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: none; } }

/* =====================================================================================================================
   ЛАВКА — ПОДГОТОВКА К АРЕНЕ (#prep). Кадр 1920×1080 (--ps из prepui.js: меньше — уменьшение, больше — шагами по 1/3).
   Развёрнуто (просьба владельца 10 октября): ОДНО окно — кованая плита по центру с биркой «Лавка»; сверху «Подготовка к
   арене», соперник и крупный таймер; посередине 6 высоких карточек в ряд (описание целиком, сразу); снизу одна полоса —
   золото, «Обновить товар», «Скрыть магазин», «Мой билд», кто готов, золотая плита «Готов». Окно строит prepui.js
   (.kp-win, .kp-tag, .kp-foot), карточки — kgame.js. Свёрнуто и у зрителя окно «растворяется» (display: contents) —
   остаётся узкая полоса сверху между лентой событий и правой колонкой HUD.
   Текст — по «Размеру текста», но не крупнее ×1.4 (--pf), чтобы кадр не разъезжался.
   ===================================================================================================================== */
html.ns #prep { --pf: min(var(--fs, 1.3), 1.4); padding: 24px 30px; gap: 18px; background: rgba(6, 5, 8, .8); }
/* под открытой лавкой HUD не нужен (он просвечивал сквозь затемнение) — свернули магазин, и он снова виден */
html.ns body:has(#prep:not(.hidden):not(.collapsed)) #hud { opacity: 0; }

/* ---------- окно ---------- */
html.ns.nskit #prep:not(.collapsed) .kp-win {
  position: relative; display: flex; flex-direction: column; gap: 18px; width: 1800px; box-sizing: border-box; margin: auto;
  padding: 30px 30px 18px; border: 18px solid transparent; border-image: var(--k-slab) 18 fill / 18px / 0 repeat; image-rendering: pixelated;
  filter: drop-shadow(0 6px 0 rgba(0, 0, 0, .6));
}
html.ns #prep.collapsed .kp-win { display: contents; }
html.ns #prep.collapsed :is(.kp-tag, .kp-foot) { display: none; }
html.ns.nskit #prep .kp-tag {
  position: absolute; left: 50%; top: -40px; transform: translateX(-50%); z-index: 3; height: 45px; box-sizing: border-box; white-space: nowrap;
  padding: 0 27px; border-style: solid; border-color: transparent; border-width: 0 21px; border-image: var(--k-tag) 0 21 fill / 0 21px / 0 stretch; image-rendering: pixelated;
  color: #f2e5c6; text-shadow: 0 3px 0 var(--k-ink); font: 800 24px / 45px var(--k-title);
}
html.ns.nskit #prep .kp-tag::before { content: ''; position: absolute; left: 50%; top: -11px; width: 39px; height: 21px; margin-left: -19px; background: var(--k-gem) center / 39px 21px no-repeat; image-rendering: pixelated; }

/* ---------- шапка окна: «Арена №1 / Подготовка к арене», соперник; справа — таймер ---------- */
html.ns.nskit #prep:not(.collapsed) .prep-head {
  position: static; gap: 30px; min-height: 0; margin: 0; padding: 0 6px 15px !important;
  border: 0 !important; border-image: none !important; background: none !important; filter: none;
  box-shadow: inset 0 -3px 0 #0b0a0e, 0 3px 0 #2a2433 !important;
}
html.ns #prep .prep-l { min-width: 0; }
html.ns #prep-ttl { display: flex; flex-direction: column; gap: 6px; color: #f2e5c6; text-shadow: 0 3px 0 var(--k-ink); letter-spacing: 0; text-transform: none; font: 800 30px / 1 var(--k-title); white-space: nowrap; }
html.ns #prep-ttl small { font: 600 12px / 1 var(--k-font); letter-spacing: .06em; text-transform: uppercase; color: var(--k-text-3); text-shadow: none; }
html.ns #prep-sub { margin-top: 6px; font: 600 calc(12px * var(--pf)) / 1.35 var(--k-font); color: var(--k-text-2); text-shadow: none; }
html.ns #prep-sub b { font-weight: 700; }
html.ns #prep-sub b[style*="ff8060"] { color: var(--k-gold-hi) !important; }
html.ns #prep-sub b[style*="ff6078"] { color: #f0897d !important; }
html.ns #prep #prep-timer {
  position: relative; min-width: 1.6em; padding: 0 0 3px; text-align: center; letter-spacing: 0; text-shadow: 0 4px 0 var(--k-ink);
  font: 800 56px / 1 var(--k-title); font-variant-numeric: tabular-nums; color: var(--k-text);
}
html.ns #prep #prep-timer::before, html.ns #prep #prep-timer::after { display: none; }
html.ns #prep #prep-timer.hot { color: var(--k-blood); animation: none; }
html.ns #prep:not(.collapsed) .prep-r { display: none; }
html.ns #prep .prep-r { gap: 12px; flex: 0 0 auto; position: static; }
html.ns #prep .btn { flex: none; white-space: nowrap; }
html.ns #prep :is(.prep-r, .kp-foot) .btn { font-size: calc(12px * var(--pf)); }
html.ns.nskit #prep #prep-hide.on { color: var(--k-text); }

/* ---------- карточки: 6 в ряд ---------- */
html.ns #prep:not(.collapsed) #prep-body { display: block; flex: none; margin: 0; padding: 0; min-height: 0; }
html.ns.nskit #prep #shop {
  position: relative; display: block; width: 100%; max-height: none; overflow: visible; box-sizing: border-box; margin: 0;
  padding: 0 !important; border: 0 !important; border-image: none !important; background: none !important; box-shadow: none !important; filter: none;
}
html.ns #prep #shop :is(.shop-head, .shop-foot) { display: none; }
html.ns #prep #shop-cards { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 18px; padding-top: 12px; }
html.ns #shop.lock :is(.scard, button) { filter: none; }
/* карточка: высокая плита с кромкой цвета редкости (4 варианта рисует kgame.js) и самоцветом на верхней кромке */
html.ns.kg .scard.kc {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 0; height: 606px; min-height: 0; box-sizing: border-box;
  padding: 21px 12px 12px; cursor: pointer; text-align: center; color: var(--k-text);
  border: 15px solid transparent !important; border-image: var(--kg-card-common) 15 fill / 15px / 0 repeat !important; image-rendering: pixelated;
  background: none !important; box-shadow: none !important; filter: drop-shadow(0 3px 0 rgba(0, 0, 0, .55)); transition: none !important; animation: none;
}
html.ns.kg .scard.kc.r-rare { border-image-source: var(--kg-card-rare) !important; }
html.ns.kg .scard.kc.r-leg { border-image-source: var(--kg-card-leg) !important; }
html.ns.kg .scard.kc.r-myth { border-image-source: var(--kg-card-myth) !important; }
html.ns.kg .scard.kc.fresh { animation: kg-in .2s ease-out both; }
html.ns.kg .scard.kc .kc-gem { position: absolute; left: 50%; top: -29px; width: 27px; height: 27px; margin-left: -14px; background: var(--kg-gem-common) center / 27px 27px no-repeat; image-rendering: pixelated; }
html.ns.kg .scard.kc.r-rare .kc-gem { background-image: var(--kg-gem-rare); }
html.ns.kg .scard.kc.r-leg .kc-gem { background-image: var(--kg-gem-leg); }
html.ns.kg .scard.kc.r-myth .kc-gem { background-image: var(--kg-gem-myth); }
/* метка улучшения: «Новый» / «I → II» — маленький значок в углу */
html.ns .scard.kc .kc-tag { position: absolute; top: -3px; right: -3px; padding: 3px 7px 2px; background: var(--k-0); box-shadow: 0 0 0 3px var(--k-ink), inset 0 3px 0 #08070b; font: 700 12px / 1.2 var(--k-font); white-space: nowrap; }
html.ns .scard.kc .kc-tag.new { color: var(--k-life); }
html.ns .scard.kc .kc-tag.up { color: var(--k-gold-hi); }
html.ns .scard.kc .kc-tag i { font-style: normal; opacity: .7; }
/* иконка 96 px (24 × 4) в гнезде */
html.ns.nskit .scard.kc .kc-icon { flex: none; box-sizing: border-box; width: 120px; height: 120px; margin: 9px 0 0; padding: 6px; }
html.ns .scard.kc .kc-icon img { display: block; width: 96px; height: 96px; margin: 0; border: 0; background: none; box-shadow: none; image-rendering: pixelated; }
html.ns .scard.kc .kc-name { display: flex; align-items: center; justify-content: center; flex: none; min-height: 2.4em; margin: 12px 0 0; padding: 0 3px; font: 700 calc(13px * var(--pf)) / 1.2 var(--k-font); color: var(--rl); text-shadow: 0 2px 0 var(--k-ink); }
html.ns .scard.kc .kc-cat { flex: none; margin: 3px 0 0; font: 700 11px / 1.2 var(--k-font); letter-spacing: .06em; text-transform: uppercase; color: color-mix(in srgb, var(--rc) 70%, #6b6476); }
/* описание — целиком и сразу (не по наведению); числа жирные: прибавка зелёным, прочие — золотом */
html.ns .scard.kc .kc-desc {
  flex: 1; min-height: 0; width: 100%; box-sizing: border-box; overflow: hidden; margin: 12px 0 0; padding: 15px 6px 0;
  box-shadow: inset 0 3px 0 #0e0c12, inset 0 6px 0 #2a2433; font: 500 calc(12px * var(--pf)) / 1.42 var(--k-font); color: var(--k-text);
}
html.ns .scard.kc .kc-desc b { font-weight: 800; color: var(--k-gold-hi); }
html.ns .scard.kc .kc-desc b.up { color: var(--k-life); }
/* превью характеристик («Здоровье 357 → 467») — всегда, где есть */
html.ns .scard.kc .kc-prev {
  flex: none; display: flex; flex-direction: column; gap: 3px; width: 100%; box-sizing: border-box; margin: 9px 0 0; padding: 7px 6px 6px;
  background: var(--k-0); box-shadow: inset 3px 3px 0 #08070b, inset -3px -3px 0 #2b2535; font: 600 calc(10.5px * var(--pf)) / 1.25 var(--k-font); color: var(--k-text-2);
}
html.ns .scard.kc .kc-prev i { font-style: normal; color: var(--k-text-3); }
html.ns .scard.kc .kc-prev b { color: var(--k-gold-hi); font-weight: 800; font-variant-numeric: tabular-nums; }
/* ценник: табличка с монетой; нехватка золота — число кровью и карточка тусклее */
html.ns.nskit .scard.kc .kc-price {
  flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 9px; height: auto; margin: 12px 0 0; padding: 3px 18px 2px;
  border: 6px solid transparent; border-image: var(--k-block) 6 fill / 6px / 0 stretch; image-rendering: pixelated; background: none; box-shadow: none;
}
html.ns .scard.kc .kc-price b { font: 800 22px / 1.2 var(--k-font); font-variant-numeric: tabular-nums; color: var(--k-gold-hi); text-shadow: 0 2px 0 var(--k-ink); }
html.ns .scard.kc .kc-why { font: 700 12px / 27px var(--k-font); letter-spacing: .06em; text-transform: uppercase; color: var(--k-text-2); }
html.ns .scard.kc.poor { opacity: .66; cursor: default; }
html.ns .scard.kc.poor .kc-price b { color: #ef7a6c; }
html.ns .scard.kc.off { opacity: .5; cursor: default; }
html.ns .scard.kc.sold { opacity: .85; }
html.ns .scard.kc.sold > :not(.kc-stamp) { opacity: .45; }
/* наведение: подъём на 3 px и золотые уголки */
html.ns.nskit .scard.kc:not(.off):not(.poor):not(.gone):hover { transform: translateY(-3px); filter: drop-shadow(0 6px 0 rgba(0, 0, 0, .55)); }
html.ns.nskit .scard.kc:not(.off):not(.gone):hover::after {
  content: ''; position: absolute; inset: -24px; pointer-events: none; border: 18px solid transparent; border-image: var(--k-brackets) 18 / 18px / 0 stretch; image-rendering: pixelated;
}
/* покупка — штамп «Куплено» по центру, содержимое гаснет */
html.ns .scard.kc .kc-stamp { position: absolute; left: 0; right: 0; top: 46%; z-index: 2; width: max-content; margin: 0 auto; font-size: 20px; line-height: 24px; padding: 0 12px; background: rgba(14, 12, 18, .85); }
html.ns .scard.kc.gone { cursor: default; }
html.ns .scard.kc.gone > :not(.kc-stamp) { opacity: .4; }

/* ---------- нижняя полоса окна: золото · «Обновить товар» · «Скрыть магазин» · «Мой билд» · кто готов · «Готов» ---------- */
html.ns #prep .kp-foot { display: flex; align-items: center; gap: 15px; min-height: 60px; padding: 15px 0 0; box-shadow: inset 0 3px 0 #0b0a0e, inset 0 6px 0 #2a2433; }
html.ns #prep .kp-purse { flex: none; display: flex; }
html.ns #prep .kp-btns { flex: none; display: flex; gap: 12px; }
html.ns #prep .kp-ready { flex: none; display: flex; margin-left: 6px; }
html.ns.kg #prep .kp-purse > #shop-gold {
  position: relative; display: flex; align-items: center; gap: 9px; margin: 0 9px 0 6px; padding: 0; border: 0; background: none; filter: none;
  color: var(--k-gold-hi); text-shadow: none; letter-spacing: 0; font: inherit;
}
html.ns #shop-gold > .k-ic.coin { width: 27px; height: 27px; background-size: 27px 27px; }
html.ns #shop-gold .kp-n { font: 800 32px / 1 var(--k-title); font-variant-numeric: tabular-nums; color: var(--k-gold-hi); text-shadow: 0 3px 0 var(--k-ink); }
html.ns #shop-gold.down .kp-n { color: #ffe6b0; }
html.ns #shop-gold.up .kp-n { color: #d8ffd0; }
html.ns #shop-gold .kp-bonus { font: 700 calc(11px * var(--pf)) / 1 var(--k-font); color: var(--k-life); white-space: nowrap; }
html.ns #shop-gold .kp-bonus:empty { display: none; }
html.ns #shop-gold .kp-bonus span { font-weight: 600; color: var(--k-text-2); }
html.ns .kg-fly { position: absolute; z-index: 6; pointer-events: none; transition: transform .45s cubic-bezier(.3, .55, .35, 1), opacity .45s ease-in; }
html.ns.nskit #prep #shop-reroll { display: inline-flex; align-items: center; gap: 9px; padding: 6px 15px 5px !important; }
html.ns #shop-reroll .k-ic.coin { margin-left: 3px; }
html.ns #shop-reroll b { font: 700 calc(13px * var(--pf)) / 1 var(--k-font); font-variant-numeric: tabular-nums; color: var(--k-gold-hi); }
html.ns #shop-reroll:disabled b { color: var(--k-text-3); }
/* кто готов: «Готовы 4 из 5» с пипсами и компактные чипы «квадрат цвета + ник» (готов — зелёным) */
html.ns #prep .kp-foot #prep-who {
  position: static; flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px 15px;
  margin: 0; padding: 0; border: 0; border-image: none; background: none; pointer-events: auto;
}
html.ns #prep-who .pw-head, html.ns #prep-ready-info { display: flex; align-items: baseline; gap: 9px; white-space: nowrap; font: 600 calc(12px * var(--pf)) / 1 var(--k-font); color: var(--k-text-2); }
html.ns #prep-who .pw-head { margin-right: 6px; }
html.ns :is(#prep-who .pw-head, #prep-ready-info) b { font: 800 26px / .8 var(--k-title); color: var(--k-gold-hi); text-shadow: 0 3px 0 var(--k-ink); }
html.ns :is(#prep-who .pw-head, #prep-ready-info) .kp-pips { display: inline-flex; gap: 6px; margin-left: 6px; align-self: center; }
html.ns :is(#prep-who .pw-head, #prep-ready-info) .kp-pips i { width: 15px; height: 15px; background: var(--k-0); box-shadow: inset 3px 3px 0 var(--k-ink), inset -3px -3px 0 #3a3346; }
html.ns :is(#prep-who .pw-head, #prep-ready-info) .kp-pips i.on { background: var(--k-life); box-shadow: inset 3px 3px 0 #c9f5d1, inset -3px -3px 0 #3f7d4a; outline: 3px solid var(--k-ink); outline-offset: 0; }
html.ns #prep-who .pw {
  display: inline-flex; align-items: center; gap: 7px; height: auto; padding: 0; border: 0 !important; outline: 0 !important; background: none !important; box-shadow: none !important;
  font: 600 calc(11px * var(--pf)) / 1.2 var(--k-font); color: var(--k-text-2); animation: none; white-space: nowrap;
}
html.ns #prep-who .pw i { flex: none; width: 9px; height: 9px; box-shadow: 0 0 0 3px var(--k-ink); transform: none; }
html.ns #prep-who .pw :is(small, b) { display: none; }
html.ns #prep-who .pw.ok { color: var(--k-life); }
html.ns #prep-who .pw.me .pn { text-decoration: underline 3px var(--k-gold); text-underline-offset: 5px; }
html.ns #prep.collapsed #prep-who { display: none; }
html.ns #prep:not(.collapsed) #prep-ready-info { display: none; }
/* «Готов» — золотая плита справа; нажата — тёмная плита со штампом «Готов» */
html.ns.nskit #prep .kp-ready #prep-ready { position: static; min-width: 240px; height: 60px; padding: 0 30px !important; font: 700 calc(17px * var(--pf)) / 1 var(--k-font); }
html.ns.nskit #prep #prep-ready.on { border-image-source: var(--k-btn) !important; color: var(--k-life); }
html.ns.nskit #prep #prep-ready.on:hover { border-image-source: var(--k-btn-hi) !important; }
html.ns.nskit #prep #prep-ready .k-stamp { font-size: 18px; line-height: 22px; padding: 0 12px; }

/* ---------- свёрнуто («Скрыть магазин») и у зрителя («Игроки закупаются»): только полоса сверху ---------- */
html.ns #prep.collapsed { background: none; padding-bottom: 0; }
/* полоса — между лентой событий слева (#feed) и правой колонкой HUD (круг, таблица силы, кнопки паузы и настроек):
   ничего из HUD не закрывает. Отступы считаются в экранных px и делятся на --ps (весь #prep масштабирован) */
html.ns.nskit #prep.collapsed .prep-head {
  position: static; min-height: 54px; gap: 12px; padding: 0 9px 0 15px !important;
  border: 18px solid transparent !important; border-image: var(--k-slab) 18 fill / 18px / 0 repeat !important; image-rendering: pixelated;
  background: none !important; box-shadow: none !important; filter: none;
  margin-left: calc((24px + 315px * (0.85 * var(--rs, 1) + 0.15 * var(--uis, 1))) / var(--ps, 1) - 30px); /* лента 420 px × 0.75 (ns-hud.css) */
  margin-right: calc((204px * var(--uis, 1) + 114px * var(--rz, 1)) / var(--ps, 1) - 30px); /* и кнопки паузы/настроек HUD слева от колонки */
}
html.ns #prep.collapsed .prep-head { container-type: inline-size; }
html.ns #prep.collapsed .prep-l { flex: 1 1 auto; min-width: 90px; overflow: hidden; }
html.ns #prep.collapsed #prep-ttl span { overflow: hidden; text-overflow: ellipsis; }
/* узкая полоса (720p: колонка HUD относительно шире) — у «Мой билд» остаётся колпачок клавиши */
@container (max-width: 920px) { html.ns #prep.collapsed #prep-build > span { display: none; } html.ns #prep.collapsed #prep-build kbd.k { margin-left: 0; } }
html.ns #prep.collapsed #prep-ttl { font-size: 20px; gap: 3px; }
html.ns #prep.collapsed #prep-ttl small { display: none; }
html.ns #prep.collapsed #prep-sub { margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* в узкой полосе — только «ваш соперник — Имя» (подпись «Дуэль 1 на 1:» прячется) */
html.ns #prep.collapsed:not(.spect) #prep-sub { font-size: 0; }
html.ns #prep.collapsed:not(.spect) #prep-sub b { font-size: calc(12px * var(--pf)); }
html.ns #prep.collapsed:not(.spect) #prep-sub b + b { margin-left: 9px; }
html.ns #prep.collapsed #prep-timer { font-size: 38px; min-width: 1.3em; }
html.ns #prep.collapsed .prep-r { gap: 9px; }
html.ns #prep.collapsed #prep-ready-info :is(.kp-pips, .kp-rl) { display: none; }
html.ns #prep.collapsed #prep-ready-info b { font-size: 22px; }
/* «Готов» в свёрнутом виде — в ряд с «Показать магазин» и «Мой билд», той же высоты, но золотая */
html.ns.nskit #prep.collapsed #prep-ready, html.ns.nskit #prep.spect #prep-ready {
  position: static; inset: auto; width: auto; height: auto; min-width: 150px; max-width: none; margin: 0; transform: none; z-index: auto;
  padding: 5px 24px 4px !important; font: 700 calc(12px * var(--pf)) / 1.2 var(--k-font);
}
html.ns.nskit #prep.collapsed #prep-ready .k-stamp { font-size: 13px; line-height: 15px; padding: 0 6px; border-width: 9px; }
html.ns #prep.collapsed #prep-ready-info { margin: 0 6px; }
html.ns #prep.spect .prep-r { flex: 0 1 auto; }

/* =====================================================================================================================
   ИТОГИ МАТЧА (#results): церемония 1.8 с (корона, «Последний выживший», ник победителя), потом плита — слева
   пергаментная карточка победителя, справа награды и таблица мест; «В лобби» — золотая плита
   ===================================================================================================================== */
html.ns #results { z-index: 34; background: rgba(6, 5, 8, .8); }
html.ns.nskit #results > .panel {
  --k-top: 33px;
  position: relative; isolation: isolate; width: 1560px; box-sizing: border-box; text-align: left; color: var(--k-text);
  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 + 30px) calc(18px + 30px) calc(18px + 22px) !important;
}
html.ns.nskit #results > .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 #results > .panel::after { display: none; }
html.ns.nskit #results .kr-tag { top: calc(var(--k-top) - 22px); }
html.ns #results .res-title { display: none; }
html.ns #results .kr-body { display: grid; grid-template-columns: 330px minmax(0, 1fr); gap: 36px; align-items: start; }
/* карточка победителя — пергамент */
html.ns #results .kr-win { padding: 6px 9px 12px; text-align: center; }
html.ns #results .kr-win .k-label { color: var(--k-ink-t2); }
html.ns #results .kr-port { display: flex; align-items: flex-end; justify-content: center; height: 132px; margin: 6px 0 0; padding-bottom: 15px; background-size: 84px 33px; }
html.ns #results .kr-port canvas { display: block; image-rendering: pixelated; }
html.ns #results .kr-wn { margin-top: 9px; font: 800 30px / 1.1 var(--k-title); color: #2a2018; overflow-wrap: anywhere; }
html.ns #results .kr-wn.abyss { color: #5c2f99; font-size: calc(24px * var(--fs, 1)); }
html.ns #results .kr-wh { margin-top: 4px; font: 600 calc(15px * var(--fs, 1)) / 1.3 var(--k-font); color: var(--k-ink-t2); }
html.ns #results .kr-ws { display: flex; flex-direction: column; gap: 0; margin-top: 12px; text-align: left; }
html.ns #results .kr-ws span { display: flex; justify-content: space-between; align-items: baseline; padding: 6px 3px; font: 600 calc(14px * var(--fs, 1)) / 1.2 var(--k-font); color: var(--k-ink-t2); box-shadow: inset 0 -3px 0 rgba(107, 90, 67, .25); }
html.ns #results .kr-ws span:last-child { box-shadow: none; }
html.ns #results .kr-ws b { font: 700 calc(17px * var(--fs, 1)) / 1 var(--k-font); font-variant-numeric: tabular-nums; color: var(--k-ink-t); }
html.ns #results .kr-team { display: flex; flex-wrap: wrap; justify-content: center; gap: 9px 15px; margin-top: 12px; }
html.ns #results .kr-team > div { display: flex; flex-direction: column; align-items: center; gap: 3px; font: 600 13px / 1.2 var(--k-font); color: var(--k-ink-t); }
html.ns #results .kr-team canvas { zoom: 2; image-rendering: pixelated; }
html.ns #results .kr-skull { display: block; width: 66px; height: 66px; margin: 0 auto; background: var(--kg-skull) center / 66px 66px no-repeat; image-rendering: pixelated; }
html.ns #results .kr-win .kr-skull.big { margin: 18px auto 6px; }
/* своя строка и награды */
html.ns #results .res-sub { display: flex; align-items: center; gap: 12px; margin: 0 0 15px; text-align: left; text-indent: 0; letter-spacing: 0; text-transform: none; animation: none; font: 800 30px / 1.1 var(--k-title); color: var(--k-text); text-shadow: 0 3px 0 var(--k-ink); }
html.ns #results .res-sub.win { color: var(--k-gold-hi); }
html.ns #results .res-sub b { color: var(--k-gold-hi); }
html.ns #results .res-sub span { font: 600 calc(18px * var(--fs, 1)) / 1 var(--k-font); color: var(--k-text-2); text-shadow: none; }
html.ns #results .res-sub .k-ic.crown { width: 33px; height: 24px; }
html.ns #results .res-mvp { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 0 0 18px; }
html.ns #results .res-mvp:empty { display: none; }
html.ns.nskit #results .res-mvp .mvp {
  display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 6px 9px 9px; white-space: nowrap; overflow: hidden; text-align: left; letter-spacing: 0; text-transform: none;
  border: 6px solid transparent !important; border-image: var(--k-block) 6 fill / 6px / 0 stretch !important; image-rendering: pixelated; background: none !important; box-shadow: none !important; font: inherit;
}
html.ns #results .res-mvp .mvp .k-label { font-size: 11px; overflow: hidden; text-overflow: ellipsis; }
html.ns #results .res-mvp .mvp b { font: 700 calc(16px * var(--fs, 1)) / 1.2 var(--k-font); overflow: hidden; text-overflow: ellipsis; }
html.ns #results .res-mvp .mvp i { font: 700 calc(16px * var(--fs, 1)) / 1 var(--k-font); font-style: normal; font-variant-numeric: tabular-nums; color: var(--k-gold-hi); }
/* таблица мест: строки 52 px зеброй, место — крупно (1–3 золото, серебро, бронза), своя строка — золотая полоса слева */
html.ns #results .kr-tw { min-width: 0; }
html.ns #res-table { width: 100%; margin: 0; border-collapse: collapse; table-layout: auto; font: 500 calc(15px * var(--fs, 1)) / 1.2 var(--k-font); }
html.ns #res-table th { padding: 0 12px 9px; border: 0; box-shadow: inset 0 -3px 0 #0b0a0e; white-space: nowrap; text-align: left; font: 600 12px / 1 var(--k-font); letter-spacing: .06em; text-transform: uppercase; color: var(--k-text-3); background: none; text-shadow: none; }
html.ns #res-table td { height: 52px; padding: 0 12px; border: 0; color: var(--k-text); font-variant-numeric: tabular-nums; vertical-align: middle; background: none; }
html.ns #res-table tbody tr:nth-child(odd) td { background: var(--k-1); }
html.ns #res-table tbody tr:nth-child(even) td { background: var(--k-2); }
html.ns #res-table tbody tr:hover td { background: var(--k-3); }
html.ns #res-table :is(th, td).n { text-align: right; }
html.ns #res-table th.c, html.ns #res-table td.pl { width: 54px; text-align: center; }
html.ns #res-table td.pl { font: 800 24px / 1 var(--k-title); color: var(--k-text-3); text-shadow: 0 3px 0 var(--k-ink); }
html.ns #res-table td.pl.p1 { color: var(--k-gold-hi); }
html.ns #res-table td.pl.p2 { color: #cfcadb; }
html.ns #res-table td.pl.p3 { color: #d0915a; }
html.ns #res-table tr.me td:first-child { box-shadow: inset 6px 0 0 var(--k-gold); }
html.ns #res-table td.pt { width: 48px; padding: 0 0 0 6px; }
html.ns #res-table td.pt canvas { display: block; margin: 0 auto; image-rendering: pixelated; }
html.ns #res-table td.nm b { font: 700 calc(16px * var(--fs, 1)) / 1.2 var(--k-font); }
html.ns #res-table td.nm span { display: block; margin-top: 3px; font: 500 calc(13px * var(--fs, 1)) / 1.2 var(--k-font); color: var(--k-text-2); }
html.ns #res-table td.nm .tm { display: inline-block; width: 9px; height: 9px; margin-right: 9px; box-shadow: 0 0 0 3px var(--k-ink); vertical-align: 1px; }
html.ns #res-table td.n { font-weight: 700; }
html.ns #res-table td.best { color: var(--k-gold); }
html.ns #res-table td.rs { white-space: nowrap; }
html.ns #res-table .rd-up { color: var(--k-life); } html.ns #res-table .rd-down { color: #ef7a6c; }
html.ns #res-table tr.more td { height: 36px; color: var(--k-text-3); }
html.ns #results small.bot { margin-left: 6px; font: 600 11px / 1 var(--k-font); letter-spacing: .06em; text-transform: uppercase; color: var(--k-text-3); }
html:not(.ns) #results small.bot { opacity: .7; font-size: .8em; }
html.ns #res-rnote { margin: 12px 0 0; text-align: left; font: 500 calc(13px * var(--fs, 1)) / 1.4 var(--k-font); color: var(--k-text-3); }
html.ns #results .kr-foot { display: flex; align-items: center; justify-content: flex-end; gap: 18px; margin-top: 24px; }
html.ns #results #res-wait { flex: 1; margin: 0; text-align: left; color: var(--k-text-3); font: 500 14px / 1.3 var(--k-font); }
html.ns #results .kr-foot .btn { margin: 0 !important; }
html.ns.nskit #results #btn-lobby { min-width: 260px; padding: 11px 36px 10px !important; font: 700 calc(20px * var(--fs, 1)) / 1.1 var(--k-font); letter-spacing: 0; text-indent: 0; text-transform: none; }
html.ns.nskit #results #btn-rate2 { padding: 11px 26px 10px !important; font-size: calc(17px * var(--fs, 1)); }
/* церемония: корона, «Последний выживший» и ник победителя по центру; потом плита спускается */
html.ns #kr-cer { position: absolute; inset: 0; z-index: 3; zoom: var(--kgz, 1); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9px; pointer-events: none; opacity: 0; transition: opacity .22s; }
html.ns #results.kr-c #kr-cer { opacity: 1; }
html.ns #results.kr-c { background: rgba(5, 4, 7, .88); }
html.ns #kr-cer .kr-rod { width: 420px; margin-top: 12px; animation: kg-in .3s .5s ease-out both; }
html.ns #results.kr-c > .panel { opacity: 0; pointer-events: none; }
html.ns #results.kr-t > .panel { animation: kg-drop .26s ease-out both; }
html.ns #kr-cer .kr-crown { width: 66px; height: 48px; margin-bottom: 15px; background-size: 66px 48px; animation: kr-pop .32s steps(4) both; }
html.ns #kr-cer .kr-skull { margin-bottom: 15px; animation: kr-pop .32s steps(4) both; }
html.ns #kr-cer .kr-c1 { font: 800 26px / 1.1 var(--k-title); color: var(--k-text-2); text-shadow: 0 3px 0 var(--k-ink); animation: kg-in .3s .15s ease-out both; }
html.ns #kr-cer .kr-c2 { max-width: 1800px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 800 82px / 1.1 var(--k-title); color: var(--k-gold-hi); text-shadow: 0 6px 0 var(--k-gold-lo), 0 12px 0 var(--k-ink); animation: kr-name .45s .3s ease-out both; }
html.ns #kr-cer .kr-c2[style*="--tc"] { color: var(--tc); }
html.ns #kr-cer .kr-c2.abyss { font-size: calc(58px * var(--fs, 1)); color: var(--k-violet-hi); text-shadow: 0 6px 0 #4a2a7a, 0 12px 0 var(--k-ink); }
@keyframes kr-pop { 0% { transform: scale(.4); opacity: 0; } 60% { transform: scale(1.15); opacity: 1; } 100% { transform: none; opacity: 1; } }
@keyframes kr-name { from { opacity: 0; transform: scale(1.12); letter-spacing: .04em; } to { opacity: 1; transform: none; letter-spacing: 0; } }

/* =====================================================================================================================
   «ПАЛ ОТ РУКИ» (#down): без окна — мир затемнён, имя убийцы кровью (тьма — «Поглощён Бездной»), жизни сердцами, таймер.
   На арене — узкая плита внизу («Поражение на арене»)
   ===================================================================================================================== */
html.ns #down:not(.mini) > * { zoom: var(--kgz, 1); }
html.ns #down:not(.mini) { justify-content: center; padding: 0 0 60px; gap: 0; background: radial-gradient(ellipse 70% 60% at 50% 46%, rgba(6, 4, 8, .62), rgba(4, 3, 6, .8)); }
html.ns #down .dead-title {
  position: static; padding: 0; margin: 0 0 9px; text-align: center; text-indent: .18em; letter-spacing: .18em; text-transform: uppercase;
  font: 700 calc(15px * var(--fs, 1)) / 1.2 var(--k-font); color: var(--k-text-2); text-shadow: 0 2px 0 var(--k-ink);
}
html.ns #down .dead-title::after { display: none; }
html.ns #down #down-info { margin: 0; text-align: center; font: 500 calc(17px * var(--fs, 1)) / 1.4 var(--k-font); color: var(--k-text); text-shadow: 0 2px 0 var(--k-ink); }
html.ns #down .kn-name { max-width: 1700px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 800 54px / 1.15 var(--k-title); color: var(--k-blood); text-shadow: 0 5px 0 #4a0d13, 0 9px 0 var(--k-ink); }
html.ns #down .kn-name.abyss { color: var(--k-violet-hi); text-shadow: 0 5px 0 #3d1f6a, 0 9px 0 var(--k-ink); }
html.ns #down .kn-hero { display: inline-flex; align-items: center; gap: 9px; margin-top: 6px; font: 600 calc(16px * var(--fs, 1)) / 1.2 var(--k-font); color: var(--k-text-2); }
html.ns #down .kn-hero i { width: 9px; height: 9px; box-shadow: 0 0 0 3px var(--k-ink); }
html.ns #down .kn-hearts { display: flex; justify-content: center; align-items: center; gap: 6px; margin-top: 24px; }
html.ns #down .kn-hearts b { margin-left: 6px; font: 800 28px / 1 var(--k-title); color: var(--k-text); }
html.ns #down .kn-hearts .k-ic.lost { animation: kn-lost .9s steps(6) both; }
@keyframes kn-lost { 0%, 33%, 67% { background-image: var(--k-heart); transform: scale(1.2); } 17%, 50%, 83%, 100% { background-image: var(--k-heart-off); transform: none; } }
html.ns #down #down-timer { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-top: 18px; font: inherit; text-shadow: none; }
html.ns #down #down-timer:empty { display: none; }
html.ns #down #down-timer b { font: 800 84px / 1 var(--k-title); font-variant-numeric: tabular-nums; color: var(--k-text); text-shadow: 0 6px 0 var(--k-ink); }
html.ns #down #down-timer span { font: 600 12px / 1 var(--k-font); letter-spacing: .06em; text-transform: uppercase; color: var(--k-text-3); }

/* =====================================================================================================================
   «ИЗГНАН ИЗ БЕЗДНЫ» (#death): чёрный фон, череп кровью, «Изгнан» мелко, «из Бездны» огромно; через 3 с — узкая плита внизу
   ===================================================================================================================== */
html.ns #death:not(.mini) > * { zoom: var(--kgz, 1); }
html.ns #death:not(.mini) { justify-content: center; padding: 0 0 40px; gap: 0; background: rgba(3, 2, 5, .93); }
html.ns #death:not(.mini) .dead-title { display: none; }
html.ns #death:not(.mini) #death-place { display: flex; flex-direction: column; align-items: center; margin: 0; text-align: center; font: 500 calc(18px * var(--fs, 1)) / 1.4 var(--k-font); color: var(--k-text-2); text-shadow: none; }
html.ns #death .kd-skull { display: block; width: 66px; height: 66px; margin-bottom: 21px; background: var(--kg-skull) center / 66px 66px no-repeat; image-rendering: pixelated; animation: kr-pop .32s steps(4) both; }
html.ns #death .kd-pre { font: 700 calc(16px * var(--fs, 1)) / 1 var(--k-font); letter-spacing: .3em; text-indent: .3em; text-transform: uppercase; color: var(--k-text-2); }
html.ns #death .kd-title { margin-top: 6px; font: 800 92px / 1.05 var(--k-title); color: var(--k-text); text-shadow: 0 6px 0 var(--k-blood-deep), 0 12px 0 var(--k-ink); }
html.ns #death .kd-place { margin-top: 21px; font: 600 calc(19px * var(--fs, 1)) / 1.3 var(--k-font); color: var(--k-text-2); }
html.ns #death .kd-place b { font: 800 30px / 1 var(--k-title); color: var(--k-gold-hi); vertical-align: -2px; }
html.ns #death .death-by { margin-top: 9px; font: 600 calc(17px * var(--fs, 1)) / 1.4 var(--k-font); color: var(--k-text-2); text-shadow: none; }
html.ns #death .death-by span { font-weight: 700; }
html.ns #death .boss-note { margin-top: 9px; font: 600 calc(16px * var(--fs, 1)) / 1.4 var(--k-font); color: var(--k-gold-hi); text-shadow: none; }
html.ns #death:not(.mini) > .hint { display: flex; align-items: center; justify-content: center; gap: 9px; margin-top: 36px; font: 500 calc(15px * var(--fs, 1)) / 1.2 var(--k-font); color: var(--k-text-3); text-shadow: none; letter-spacing: 0; }
html.ns #death > .hint span + kbd { margin-left: 18px; }
/* стрелки: в Manrope их нет — системный шрифт, крупнее */
html.ns #death > .hint kbd.ka { font: 700 15px / 15px Arial, 'Segoe UI Symbol', sans-serif; }
html.ns.nskit #death #btn-death-lobby { margin-top: 24px; pointer-events: auto; }
/* узкие плиты внизу: выбывание через 3 с и поражение на арене */
html.ns.nskit :is(#death, #down).mini {
  flex-direction: row; align-items: center; gap: 15px; padding: 6px 18px 6px 12px !important; box-shadow: none !important;
  border: 6px solid transparent !important; border-image: var(--k-block) 6 fill / 6px / 0 stretch !important; image-rendering: pixelated; background: none !important;
  filter: drop-shadow(0 6px 0 rgba(0, 0, 0, .5)); transform: translateX(-50%) scale(calc(0.55 * var(--rz, 1) + var(--uis, 1) * 0.3)); transform-origin: 50% 100%;
}
html.ns :is(#death, #down).mini .dead-title { display: block; margin: 0; padding: 0; text-indent: 0; letter-spacing: 0; text-transform: none; font: 800 17px / 1.2 var(--k-title); color: var(--k-blood); text-shadow: 0 2px 0 var(--k-ink); }
html.ns :is(#death, #down).mini .dead-title::after { display: none; }
html.ns #down.mini #down-info { margin: 0; font: 500 calc(15px * var(--fs, 1)) / 1.3 var(--k-font); color: var(--k-text-2); text-shadow: none; }
html.ns #death.mini #death-place { display: flex; align-items: center; gap: 12px; margin: 0; font: 500 calc(15px * var(--fs, 1)) / 1.3 var(--k-font); color: var(--k-text-2); text-shadow: none; }
html.ns #death.mini #death-place :is(.kd-pre, .kd-title, .death-by, .boss-note) { display: none; }
html.ns #death.mini .kd-skull { display: none; }
html.ns #death.mini .dead-title { text-transform: lowercase; }
html.ns #death.mini .dead-title::first-letter { text-transform: uppercase; }
html.ns.kg #death.mini .dead-title { min-height: 33px; line-height: 33px; padding-left: 45px; background: var(--kg-skull) left center / 33px 33px no-repeat; image-rendering: pixelated; }
html.ns #death.mini .kd-place { margin: 0; font-size: calc(15px * var(--fs, 1)); }
html.ns #death.mini .kd-place b { font-size: calc(20px * var(--fs, 1)); }
html.ns #death.mini > .hint { display: none; }
html.ns.nskit #death.mini #btn-death-lobby { margin: 0; padding: 3px 12px 2px !important; font-size: calc(13px * var(--fs, 1)); }
html.ns body:has(#results:not(.hidden)) #down { display: none; } /* под итогами матча полоска «Поражение на арене» не нужна */

/* =====================================================================================================================
   БИЛД (I): плита «Билд» (корпус и бирка — из набора); слева 4 гнезда способностей с колпачками и сетка гнёзд
   предметов (уровень римской цифрой в углу), справа пергаментная подсказка выбранного и характеристики
   ===================================================================================================================== */
html.ns #build { z-index: 33; }
html.ns.nskit #build > .panel { --k-pt: 18px; --k-px: 30px; --k-pb: 24px; width: 1480px; display: grid; grid-template-columns: minmax(0, 1fr) 480px; column-gap: 36px; align-items: start; }
html.ns #build > .panel > .mhead { grid-column: 1 / -1; }
html.ns #build #build-items { grid-column: 1; grid-row: 2; display: block; min-width: 0; }
html.ns #build #build-stats { grid-column: 2; grid-row: 2; display: block; margin: 39px 0 0; font: inherit; }
/* в style.css у #build-stats div — черта снизу и span справа (float): в подсказке это не нужно */
html.ns #build #kb-tip div { border-bottom: 0; }
html.ns #build #kb-tip div span { float: none; }
html.ns #build-ttl b { font-weight: inherit; }
html.ns #build .kb-sec { display: flex; align-items: center; gap: 12px; margin: 6px 0 15px; font: 800 19px / 1.1 var(--k-title); color: var(--k-gold); text-shadow: 0 3px 0 var(--k-ink); }
html.ns #build .kb-sec b { font: 700 calc(16px * var(--fs, 1)) / 1 var(--k-font); color: var(--k-text-2); }
html.ns.nskit #build .kb-sec::after { content: ''; flex: 1; 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 #build .kb-abs { display: flex; gap: 30px; padding: 0 0 6px 9px; }
html.ns #build .kb-ab { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer; }
html.ns #build .kb-well { box-sizing: border-box; width: 66px; height: 66px; padding: 3px; }
html.ns #build :is(.kb-well, .kb-it) img { display: block; width: 48px; height: 48px; image-rendering: pixelated; border: 0; background: none; box-shadow: none; }
html.ns #build .kb-ab.no img { opacity: .38; }
html.ns #build .kb-ab kbd.k { min-width: 36px; }
html.ns #build .kb-lv { font: 700 calc(14px * var(--fs, 1)) / 1 var(--k-font); font-variant-numeric: tabular-nums; color: var(--k-text); }
html.ns #build .kb-lv i { font-style: normal; color: var(--k-text-3); font-weight: 600; }
html.ns #build .kb-pas { margin: 12px 0 18px; padding: 0 9px; font: 500 calc(14px * var(--fs, 1)) / 1.45 var(--k-font); color: var(--k-text-2); }
html.ns #build .kb-pas .k-label { margin-right: 9px; }
html.ns #build .kb-grid { display: grid; grid-template-columns: repeat(auto-fill, 66px); gap: 15px 12px; padding: 0 0 18px 9px; }
html.ns.nskit #build .kb-it { position: relative; box-sizing: border-box; width: 66px; height: 66px; padding: 3px; cursor: pointer; border: 6px solid transparent; border-image: var(--k-well) 6 fill / 6px / 0 stretch; image-rendering: pixelated; }
html.ns #build .kb-it::before { content: ''; position: absolute; left: 0; right: 0; bottom: -3px; height: 3px; background: var(--rc); }
html.ns #build .kb-it b { position: absolute; right: -3px; bottom: -6px; font: 800 15px / 1 var(--k-title); color: var(--k-gold-hi); text-shadow: 0 2px 0 var(--k-ink), 2px 0 0 var(--k-ink), -2px 0 0 var(--k-ink), 0 -2px 0 var(--k-ink); }
html.ns #build .kb-empty { padding: 0 9px; font: 500 calc(15px * var(--fs, 1)) / 1.4 var(--k-font); color: var(--k-text-2); }
/* наведение — золотые уголки и подъём; выбрано — золотая рамка с контуром и мягкое свечение */
html.ns.nskit #build :is(.kb-ab, .kb-it):hover::after, html.ns.nskit #build :is(.kb-ab, .kb-it).k-sel::after {
  content: ''; position: absolute; left: -9px; top: -9px; width: 84px; height: 84px; box-sizing: border-box; pointer-events: none;
  border: 18px solid transparent; border-image: var(--k-brackets) 18 / 18px / 0 stretch; image-rendering: pixelated;
}
html.ns.nskit #build .kb-it:hover::after, html.ns.nskit #build .kb-it.k-sel::after { left: -15px; top: -15px; }
html.ns #build :is(.kb-ab:hover .kb-well, .kb-it:hover) { transform: translateY(-3px); }
html.ns.nskit #build .kb-ab.k-sel .kb-well, html.ns.nskit #build .kb-it.k-sel { box-shadow: 0 0 0 3px var(--k-gold-hi), 0 0 0 6px var(--k-ink), 0 0 0 9px rgba(217, 180, 106, .22); }
html.ns.nskit #build :is(.kb-ab, .kb-it).k-sel::after { display: none; }
/* пергаментная подсказка */
html.ns.nskit #build #kb-tip { border-style: solid; border-color: transparent; border-width: 24px; } /* style.css: #build-stats div — черта снизу (border-bottom сбивал рамку пергамента) */
html.ns #build #kb-tip { min-height: 216px; padding: 3px 6px 6px; margin-bottom: 24px; font: 500 calc(15px * var(--fs, 1)) / 1.45 var(--k-font); }
html.ns #build #kb-tip > .k-label { display: flex; align-items: center; gap: 9px; color: var(--k-ink-t2); }
html.ns #build #kb-tip .k-label kbd.k { font-size: 12px; line-height: 13px; }
html.ns #build #kb-tip .kt-dot { width: 9px; height: 9px; background: var(--rc); box-shadow: 0 0 0 3px #3a2a1c; }
html.ns #build #kb-tip .kt-name { margin-top: 6px; font: 800 25px / 1.15 var(--k-title); color: var(--k-ink-t); }
html.ns #build #kb-tip .kt-rn { color: #8a5a1e; }
html.ns #build #kb-tip .kt-sub { margin-top: 3px; font: 600 calc(14px * var(--fs, 1)) / 1.3 var(--k-font); color: var(--k-ink-t2); }
html.ns #build #kb-tip .kt-desc { margin-top: 9px; color: var(--k-ink-t); }
html.ns #build #kb-tip :is(.kt-desc, .kt-next, .kt-lines) b { color: #8a2c22; font-weight: 700; }
html.ns #build #kb-tip :is(.kt-desc, .kt-next) b.up { color: #2d6b3a; }
html.ns #build #kb-tip .kt-lines { margin-top: 9px; font: 600 calc(14px * var(--fs, 1)) / 1.45 var(--k-font); color: var(--k-ink-t2); }
html.ns #build #kb-tip .kt-next { margin-top: 9px; padding-top: 9px; box-shadow: inset 0 3px 0 rgba(107, 90, 67, .3); font: 500 calc(14px * var(--fs, 1)) / 1.4 var(--k-font); color: var(--k-ink-t2); }
html.ns #build #kb-tip .kt-pas { margin-top: 9px; padding-top: 9px; box-shadow: inset 0 3px 0 rgba(107, 90, 67, .3); font: 500 calc(14px * var(--fs, 1)) / 1.4 var(--k-font); color: var(--k-ink-t2); }
html.ns #build #kb-tip .kt-pas .k-label { display: block; margin-bottom: 3px; color: var(--k-ink-t2); }
/* характеристики: два столбца строк «Урон · +10%» */
html.ns #build .kb-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 30px; padding: 0 0 0 9px; }
html.ns #build .kb-stats div { display: flex; justify-content: space-between; align-items: baseline; gap: 9px; padding: 6px 3px; border: 0; box-shadow: inset 0 -3px 0 #120f17; }
html.ns #build .kb-stats div span { min-width: 0; font: 500 calc(12px * var(--fs, 1)) / 1.25 var(--k-font); color: var(--k-text-2); }
html.ns #build .kb-stats b { flex: none; font: 700 calc(13px * var(--fs, 1)) / 1.25 var(--k-font); font-variant-numeric: tabular-nums; color: var(--k-text); }
html.ns #build .kb-stats .z b { color: var(--k-text-3); font-weight: 600; }

/* =====================================================================================================================
   БОЛЬШАЯ КАРТА (Tab / M, #mapov): без панели — затемнение 85%, сверху картуш биома между завитками, слева фаза, справа
   таймер, внизу легенда гнёздами (разметку #kmap строит js/kgame.js)
   ===================================================================================================================== */
html.ns #kmap { position: fixed; inset: 0; z-index: 14; pointer-events: none; background: rgba(5, 4, 8, .85); }
html.ns #mapov.hidden + #kmap { display: none; }
html.ns #mapov { background: rgba(8, 7, 11, .55); filter: drop-shadow(0 6px 0 rgba(0, 0, 0, .6)); }
html.ns #kmap .km-cart { position: absolute; left: 50%; bottom: calc(50% + var(--mh) / 2 + 21px); transform: translateX(-50%) scale(var(--kgz, 1)); transform-origin: 50% 100%; display: flex; align-items: center; gap: 18px; white-space: nowrap; }
html.ns #kmap .km-biome { font: 800 30px / 1.1 var(--k-title); color: #f2e5c6; text-shadow: 0 3px 0 var(--k-ink); }
html.ns.kg #kmap .km-fl { width: 90px; height: 30px; background: var(--kg-flour) center / 90px 30px no-repeat; image-rendering: pixelated; }
html.ns #kmap .km-fl.r { transform: scaleX(-1); }
html.ns #kmap .km-side { position: absolute; top: calc(50% - var(--mh) / 2); display: flex; flex-direction: column; gap: 9px; max-width: 480px; }
html.ns #kmap .km-side.l { right: calc(50% + var(--mw) / 2 + 36px); align-items: flex-end; text-align: right; transform: scale(var(--kgz, 1)); transform-origin: 100% 0; }
html.ns #kmap .km-side.r { left: calc(50% + var(--mw) / 2 + 36px); align-items: flex-start; transform: scale(var(--kgz, 1)); transform-origin: 0 0; }
html.ns #kmap .km-phase { font: 800 30px / 1 var(--k-title); color: var(--k-text); text-shadow: 0 3px 0 var(--k-ink); }
html.ns #kmap .km-phase span { font: 600 calc(16px * var(--fs, 1)) / 1 var(--k-font); color: var(--k-text-2); text-shadow: none; }
html.ns #kmap .km-st { font: 500 calc(15px * var(--fs, 1)) / 1.3 var(--k-font); color: var(--k-text-2); }
html.ns #kmap .km-time { font: 800 44px / 1 var(--k-title); font-variant-numeric: tabular-nums; color: var(--k-text); text-shadow: 0 4px 0 var(--k-ink); }
html.ns #kmap .km-leg { position: absolute; left: 50%; top: calc(50% + var(--mh) / 2 + 24px); transform: translateX(-50%) scale(var(--kgz, 1)); transform-origin: 50% 0; display: flex; gap: 27px; white-space: nowrap; }
html.ns #kmap .km-leg span { display: flex; align-items: center; gap: 9px; font: 600 calc(14px * var(--fs, 1)) / 1 var(--k-font); color: var(--k-text-2); }
html.ns.nskit #kmap .km-leg i { display: block; box-sizing: border-box; width: 42px; height: 42px; padding: 0; }
html.ns #kmap .km-leg img { display: block; width: 30px; height: 30px; image-rendering: pixelated; }
html.ns #bigmap { z-index: 33; }
html.ns #bigmap-c { display: block; margin: 0 auto; }

/* =====================================================================================================================
   НАБЛЮДАТЕЛЬ (#specbar) — узкая плита сверху: ◂ за кем смотрите ▸ и «Предметы и прокачка»
   ===================================================================================================================== */
html.ns.nskit #specbar {
  gap: 12px; padding: 3px 6px 3px 6px !important; box-shadow: none !important; transform: translateX(-50%) scale(var(--kgz, 1)); transform-origin: 50% 0;
  border: 6px solid transparent !important; border-image: var(--k-block) 6 fill / 6px / 0 stretch !important; image-rendering: pixelated; background: none !important;
  filter: drop-shadow(0 6px 0 rgba(0, 0, 0, .5));
}
html.ns.nskit #specbar :is(#spec-prev, #spec-next) { width: 42px; min-width: 0; height: 42px; padding: 0 !important; font-size: 0 !important; color: transparent; }
html.ns.nskit #specbar :is(#spec-prev, #spec-next)::after { content: ''; position: absolute; inset: 0; background: var(--k-arr-l) center / 18px 27px no-repeat; image-rendering: pixelated; }
html.ns.nskit #specbar #spec-next::after { background-image: var(--k-arr-r); }
html.ns #spec-who { padding: 0 6px; font: 600 calc(16px * var(--fs, 1)) / 1.2 var(--k-font); color: var(--k-text-2); }
html.ns #spec-who b { font-weight: 700; }
html.ns #spec-who img.ic { display: none; }
html.ns.nskit #specbar #spec-build { height: 42px; padding: 0 15px !important; font-size: calc(15px * var(--fs, 1)); }

/* =====================================================================================================================
   ПАУЗА (#h-pause, host.js) — узкая плита: «Пауза» крупно золотом; отсчёт продолжения — крупные цифры
   ===================================================================================================================== */
html.ns.nskit #h-pause {
  padding: 4px 22px 7px; max-width: 640px; box-sizing: border-box; color: var(--k-text); transform: translate(-50%, -50%) scale(var(--kgz, 1)); /* v5.7 (просьба владельца): маленькая табличка без текста */
  border: 18px solid transparent; border-image: var(--k-slab) 18 fill / 18px / 0 repeat; image-rendering: pixelated; filter: drop-shadow(0 6px 0 rgba(0, 0, 0, .6)); text-shadow: none;
}
html.ns #h-pause b { display: block; text-transform: lowercase; letter-spacing: 0; text-indent: 0; font: 800 32px / 1.1 var(--k-title); color: var(--k-gold-hi); text-shadow: 0 3px 0 var(--k-ink); }
html.ns #h-pause b::first-letter { text-transform: uppercase; }
html.ns #h-pause.resume b { font-size: calc(48px * var(--fs, 1)); font-variant-numeric: tabular-nums; }
html.ns #h-pause span { display: block; margin-top: 9px; font: 500 calc(15px * var(--fs, 1)) / 1.45 var(--k-font); color: var(--k-text-2); text-shadow: none; }
html.ns:not(.nskit) #h-pause b { color: var(--ns-gold-hi, #f3d897); }

/* =====================================================================================================================
   ДУЭЛЬ У ДОСКИ (#quiz) — узкая плита: «К доске!», счёт, полоса времени-гнездо, классная доска, ответы плитами
   ===================================================================================================================== */
html.ns.nskit #quiz {
  top: 47%; padding: 6px 12px 9px !important; box-shadow: none !important; background: none !important;
  border: 18px solid transparent !important; border-image: var(--k-slab) 18 fill / 18px / 0 repeat !important; image-rendering: pixelated; filter: drop-shadow(0 6px 0 rgba(0, 0, 0, .6));
}
html.ns.nskit #quiz.won::before, html.ns.nskit #quiz.lost::before { content: ''; position: absolute; left: 0; right: 0; top: -6px; height: 3px; background: var(--k-life); }
html.ns.nskit #quiz.lost::before { background: var(--k-blood); }
html.ns #quiz .qz-head { align-items: baseline; color: var(--k-gold-hi); letter-spacing: 0; }
html.ns #quiz .qz-title { text-transform: lowercase; font: 800 22px / 1.1 var(--k-title); color: var(--k-gold-hi); text-shadow: 0 3px 0 var(--k-ink); }
html.ns #quiz .qz-title::first-letter { text-transform: uppercase; }
html.ns #quiz .qz-title { display: inline-block; }
html.ns #quiz .qz-score { font: 600 calc(15px * var(--fs, 1)) / 1.2 var(--k-font); color: var(--k-text-2); letter-spacing: 0; text-transform: none; }
html.ns #quiz .qz-score i { font: 800 22px / 1 var(--k-title); font-style: normal; font-variant-numeric: tabular-nums; color: var(--k-gold-hi); }
html.ns #quiz .qz-foename { color: var(--k-text-3); }
html.ns #quiz .qz-danger { color: #ef7a6c; }
html.ns.nskit #quiz .qz-time { height: 18px; margin: 9px 0 12px; box-sizing: border-box; border: 6px solid transparent; border-image: var(--k-well) 6 fill / 6px / 0 stretch; image-rendering: pixelated; background: none; }
html.ns #quiz .qz-time i { height: 100%; background: var(--k-gold); box-shadow: inset 0 3px 0 var(--k-gold-hi); }
html.ns #quiz .qz-time i.low { background: var(--k-blood); box-shadow: inset 0 3px 0 #ef7a6c; }
html.ns.kg #quiz .qz-board {
  border: 15px solid transparent; border-image: var(--kg-board) 15 fill / 15px / 0 repeat; image-rendering: pixelated; background: none; box-shadow: none;
  padding: 6px 6px 3px; font: 700 calc(36px * var(--fs, 1)) / 1.1 var(--k-font); font-variant-numeric: tabular-nums; color: #f1ecdc; text-shadow: 0 0 1px rgba(241, 236, 220, .6);
}
html.ns #quiz .qz-in { border-bottom: 3px solid #f1ecdc; color: var(--k-gold-hi); }
html.ns #quiz .qz-mark { font: 600 calc(14px * var(--fs, 1)) / 20px var(--k-font); }
html.ns #quiz .qz-mark.good { color: var(--k-life); } html.ns #quiz .qz-mark.bad { color: #ef7a6c; }
html.ns #quiz .qz-opts { gap: 12px; }
html.ns.nskit #quiz .qz-o { min-height: 54px; padding: 9px 0 6px !important; font: 700 calc(26px * var(--fs, 1)) / 1 var(--k-font); font-variant-numeric: tabular-nums; }
html.ns.nskit #quiz .qz-o small {
  left: 3px; top: 0; min-width: 21px; box-sizing: border-box; text-align: center; border-style: solid; border-color: transparent; border-width: 3px 3px 6px;
  border-image: var(--k-key) 6 6 9 fill / 3px 3px 6px / 0 stretch; image-rendering: pixelated; padding: 0 3px; color: var(--k-on-gold); font: 700 11px / 12px var(--k-font);
}
html.ns.nskit #quiz .qz-o.chosen { border-image-source: var(--k-btn-gold) !important; color: var(--k-on-gold); }
html.ns #quiz.penalty .qz-o { opacity: .45; filter: none; }
html.ns #quiz .qz-hint { margin-top: 6px; font: 500 calc(12px * var(--fs, 1)) / 1.4 var(--k-font); color: var(--k-text-3); }
html.ns #quiz .qz-res { background: rgba(22, 19, 28, .97); gap: 9px; }
html.ns #quiz .qz-res b { text-transform: lowercase; font: 800 34px / 1.15 var(--k-title); letter-spacing: 0; color: var(--k-gold-hi); text-shadow: 0 3px 0 var(--k-ink); }
html.ns #quiz .qz-res b::first-letter { text-transform: uppercase; }
html.ns #quiz .qz-res b { display: block; }
html.ns #quiz .qz-res span { font: 500 calc(14px * var(--fs, 1)) / 1.35 var(--k-font); color: var(--k-text-2); letter-spacing: 0; text-transform: none; }
html.ns #quiz .qz-res.win b { color: var(--k-life); } html.ns #quiz .qz-res.lose b { color: #ef7a6c; }

/* =====================================================================================================================
   НАСТРОЙКИ В БОЮ: выше экрана подготовки; раздел «Матч» — кровавые кнопки и пояснение в строку
   ===================================================================================================================== */
html.ns body:has(#hud:not(.hidden)) #options { z-index: 35; }
html.ns #options .opt-row.o-match { display: flex; align-items: center; gap: 15px; }
html.ns #options .opt-row.o-match > .btn { flex: none; white-space: nowrap; }
html.ns #options .opt-row.o-match > .hint { flex: 1; font: 500 calc(13px * var(--fs, 1)) / 1.35 var(--k-font); color: var(--k-text-3); }
html.ns #options .opt-row.o-match > span:empty { display: none; }
html.ns #options .opt-row.o-match .h-line { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
html.ns #options .opt-row .h-ok { color: var(--k-life); font: 600 calc(13px * var(--fs, 1)) / 1.3 var(--k-font); font-variant-emoji: text; }
html.ns body:has(#hud:not(.hidden)) #options .ns-acc .acc-box .btn { white-space: nowrap; }

/* =====================================================================================================================
   СООБЩЕНИЯ ПО ЦЕНТРУ ПОВЕРХ БОЯ: чёткий контур
   ===================================================================================================================== */
html.ns #centermsg { font: 700 calc(23px * var(--fs, 1)) / 1.3 var(--k-font); letter-spacing: 0; text-shadow: 0 3px 0 var(--k-ink), 0 0 3px #000, 0 0 14px rgba(0, 0, 0, .75); }
html.ns #announce .an b { font-family: var(--k-title); font-weight: 800; letter-spacing: 0; text-indent: 0; text-transform: none; white-space: nowrap; text-shadow: 0 4px 0 var(--k-ink), 0 0 4px #000, 0 0 22px rgba(0, 0, 0, .8); }
html.ns #announce .an span { font: 600 calc(17px * var(--fs, 1)) / 1.35 var(--k-font); letter-spacing: 0; color: var(--k-text); text-shadow: 0 2px 0 var(--k-ink), 0 0 3px #000, 0 0 12px rgba(0, 0, 0, .8); }
html.ns :is(#prep-who, #prep-ready, #res-table, #specbar, #options .h-line, #death, #down) { font-variant-emoji: text; }

/* ---------- 11 октября 2026 (просьба владельца — «магазин 2 ряда по 3 предмета, как было»): лавка перед ареной — 3 × 2 ----------
   Карточка широкая: слева иконка и цена, справа название, редкость, описание целиком и превью «было → станет».
   Высота карточки 340 px — два ряда с шапкой и нижней полосой влезают в кадр 1080. Только лавка арены (#prep);
   «выбор из трёх» и торговец соло — прежние высокие карточки. */
html.ns #prep #shop-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 33px 30px; padding-top: 15px; }
html.ns.kg #prep .scard.kc {
  display: grid; grid-template-columns: 120px minmax(0, 1fr); grid-template-rows: auto auto minmax(0, 1fr) auto; column-gap: 18px;
  align-items: start; height: 340px; padding: 18px 15px 12px; text-align: left;
}
html.ns.nskit #prep .scard.kc .kc-icon { grid-column: 1; grid-row: 1 / 4; margin: 0; }
html.ns #prep .scard.kc .kc-name { grid-column: 2; grid-row: 1; justify-content: flex-start; min-height: 0; margin: 0; padding: 0; text-align: left; }
html.ns #prep .scard.kc .kc-cat { grid-column: 2; grid-row: 2; margin: 3px 0 0; }
html.ns #prep .scard.kc .kc-desc { grid-column: 2; grid-row: 3; align-self: stretch; margin: 9px 0 0; padding: 9px 0 0; }
html.ns #prep .scard.kc .kc-prev { grid-column: 2; grid-row: 4; margin: 6px 0 0; }
html.ns.nskit #prep .scard.kc .kc-price { grid-column: 1; grid-row: 4; justify-self: center; align-self: end; margin: 0; padding: 3px 12px 2px; }
html.ns #prep .scard.kc .kc-stamp { top: 42%; }
/* 13 окт. 2026 (просьба владельца — «шрифт маленький, места полно, можно крупнее»): в широкой карточке текст крупнее —
   название 17 → 26 px, описание 15.6 → 21, превью 13.7 → 17, редкость и метка «Новый» 11–12 → 14–15; длинное описание
   уменьшается само (kgame.js fitDescs, не меньше 15 px) */
html.ns #prep .scard.kc .kc-name { font-size: calc(20px * var(--pf)); line-height: 1.15; }
html.ns #prep .scard.kc .kc-cat { margin-top: 6px; font-size: 14px; }
html.ns #prep .scard.kc .kc-desc { font-size: calc(16px * var(--pf)); line-height: 1.4; }
html.ns #prep .scard.kc .kc-prev { font-size: calc(13px * var(--pf)); gap: 4px; padding: 8px 9px 7px; }
html.ns #prep .scard.kc .kc-tag { padding: 4px 9px 3px; font-size: 15px; }
html.ns #prep .scard.kc .kc-why { font-size: 15px; }

/* 11 октября 2026 (просьба владельца — «выбывшим, пока игроки закупаются, должна быть табличка „Игроки закупаются“»):
   у зрителя её закрывала полоса наблюдения (#specbar) — полоса теперь внизу (см. ниже), у таблички заголовок крупнее и золотой */
html.ns #prep.spect #prep-ttl { font-size: 24px; }
html.ns #prep.spect #prep-ttl span { color: var(--k-gold-hi); }

/* 11 октября 2026 (просьба владельца, скриншот: полоса наблюдателя сверху наезжала на «Пинг · FPS · Потери» у кнопки паузы и на
   полосу босса): полоса наблюдателя — внизу по центру, над нижней панелью героя (на месте узкой плиты «Вы выбыли» /
   «Поражение на арене»), а эта плита — над полосой */
html.ns #specbar { top: auto; bottom: calc(96px * var(--uisb, 1) + 34px); }
html.ns.nskit #specbar { transform-origin: 50% 100%; }
html.ns body:has(#specbar:not(.hidden)) :is(#death, #down).mini { bottom: calc(96px * var(--uisb, 1) + 34px + 66px * var(--kgz, 1)); }

/* 11 октября 2026 (просьба владельца — «табличку „Игроки закупаются“ сделай прямоугольником и в центре экрана»): у зрителя
   (выбыл или наблюдает) — плита по центру: «Арена №N», крупно «Игроки закупаются», большой таймер, пары дуэлей, сколько готовы */
html.ns #prep.spect { justify-content: center; align-items: center; padding: 0; background: none; pointer-events: none; height: calc(100vh / var(--ps, 1)); }
html.ns.nskit #prep.spect .prep-head {
  flex-direction: column; align-items: center; gap: 9px; width: 660px; max-width: 90%; min-height: 0; box-sizing: border-box;
  margin: auto !important; padding: 15px 30px 12px !important; text-align: center; container-type: normal;
}
html.ns #prep.spect .prep-l { flex: none; min-width: 0; overflow: visible; display: flex; flex-direction: column; align-items: center; }
html.ns #prep.spect #prep-ttl { align-items: center; font-size: 34px; gap: 6px; }
html.ns #prep.spect #prep-ttl small { display: block; font-size: 13px; }
html.ns #prep.spect #prep-ttl span { overflow: visible; }
html.ns #prep.spect #prep-sub { margin-top: 6px; white-space: normal; overflow: visible; font-size: calc(14px * var(--pf)); line-height: 1.45; max-width: 600px; }
html.ns #prep.spect #prep-timer { font-size: 56px; min-width: 0; padding: 0; }
html.ns #prep.spect .prep-r { flex: none; justify-content: center; }
html.ns #prep.spect #prep-ready-info b { font-size: 24px; }
html.ns #prep.spect :is(#prep-body, #prep-who) { display: none !important; }