/* ТЕСТОВАЯ АРЕНА (11 октября 2026, просьба владельца — «режим арены, временно»): панель лагеря слева (#tapanel), выбор героя
   в окне «Герои» (#hl-ta), строка арены в списке комнат. Разметку строит js/testarena.js. Новый вид — набор «Кузня» (ns-kit.css:
   плита, кнопки-плиты, флажок, ползунок); панель свёрстана под кадр 1920×1080 и растёт/уменьшается вместе с HUD (--rs, --uis). */

/* на тестовой арене нет круга, обычной арены, таблицы игроков, жизней; «Сдаться», «Завершить матч», «Перезапустить» — не нужны */
/* мини-карта рисует только «подземелье» — здесь это один лагерь, а бой идёт в зале под ним: убрана, на её месте — панель */
body.ta #hud :is(#zoneinfo, #arenainfo, #alive, #board, #watchers, #lives, #minimap) { display: none !important; }
body.ta #options .o-surr, body.ta #options .opt-row:has(#o-leave, #o-surr) { display: none !important; }
body.ta #h-restart { display: none !important; }

#tapanel {
  position: absolute; left: calc(12px * var(--rz, 1)); top: 50%; z-index: 6; width: 330px; box-sizing: border-box; pointer-events: auto;
  transform: translateY(-50%) scale(calc(0.78 * var(--rs, 1) + 0.22 * var(--uis, 1))); transform-origin: 0 50%;
  padding: 8px 12px 12px; color: #efe6d3; font: 600 14px / 1.3 var(--k-font, sans-serif);
  background: rgba(14, 12, 18, .9); box-shadow: 0 0 0 3px #08070b, 0 4px 0 rgba(0, 0, 0, .4);
}
html.ns.nskit #tapanel { background: none; box-shadow: 0 4px 0 rgba(0, 0, 0, .4); border: 6px solid transparent; border-image: var(--k-block) 6 fill / 6px / 0 stretch; image-rendering: pixelated; padding: 4px 9px 9px; }
#tapanel.hidden { display: none; }
#tapanel .ta-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
#tapanel .ta-head b { flex: 1; color: var(--k-gold-hi, #f3d897); font: 800 18px / 1.1 var(--k-title, sans-serif); letter-spacing: .02em; text-shadow: 0 2px 0 #08070b; }
#tapanel .ta-score { display: flex; align-items: center; gap: 8px; padding: 6px 8px; margin-bottom: 8px; background: #16131c; box-shadow: inset 0 3px 0 #08070b, inset 0 -3px 0 #2b2535; }
#tapanel .ta-sn { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #a89e8b; font-size: 13px; }
#tapanel .ta-sn.me { color: #f3d897; }
#tapanel .ta-sn.opp { text-align: right; }
#tapanel .ta-sc { flex: none; color: #efe6d3; font: 800 22px / 1 var(--k-title, sans-serif); font-variant-numeric: tabular-nums; text-shadow: 0 2px 0 #08070b; }
#tapanel .ta-sec { padding: 7px 0 5px; box-shadow: inset 0 3px 0 #0b0a0e, inset 0 6px 0 #221e2a; }
#tapanel .ta-sec + .ta-sec { margin-top: 2px; }
#tapanel .ta-who { display: flex; align-items: center; gap: 10px; margin: 2px 0 4px; }
#tapanel .ta-port { width: auto; height: 42px; image-rendering: pixelated; flex: none; }
#tapanel .ta-wn { flex: 1; min-width: 0; display: flex; flex-direction: column; }
#tapanel .ta-wn small { color: #71695c; font: 700 11px / 1.2 var(--k-font, sans-serif); letter-spacing: .06em; text-transform: uppercase; }
#tapanel .ta-wn b { color: #efe6d3; font: 800 17px / 1.2 var(--k-font, sans-serif); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#tapanel .ta-row { display: flex; align-items: center; gap: 6px; margin-top: 5px; }
#tapanel .ta-k { color: #a89e8b; font-size: 13px; }
#tapanel .ta-lv { display: flex; align-items: center; gap: 10px; margin-top: 4px; }
#tapanel .ta-lv input { flex: 1; min-width: 0; }
#tapanel .ta-lvn { width: 30px; text-align: right; color: #f3d897; font: 800 20px / 1 var(--k-title, sans-serif); font-variant-numeric: tabular-nums; }
#tapanel .ta-pre { display: flex; gap: 3px; margin-top: 5px; }
#tapanel .ta-pre .btn { flex: 1; min-width: 0; padding-left: 0 !important; padding-right: 0 !important; }
#tapanel .ta-sp b, #tapanel .ta-gold b { color: #f3d897; font: 800 17px / 1 var(--k-font, sans-serif); font-variant-numeric: tabular-nums; }
#tapanel .ta-sp .btn { margin-left: auto; }
#tapanel .ta-gold b { margin-right: auto; }
#tapanel .ta-gold .k-ic.coin { width: 21px; height: 21px; }
#tapanel .ta-btns .btn { flex: 1; min-width: 0; }
#tapanel .ta-str { flex-wrap: wrap; gap: 3px; }
#tapanel .ta-str .btn { flex: 1; min-width: 0; padding-left: 2px !important; padding-right: 2px !important; font-size: 13px !important; }
/* 13 окт. 2026: пятая сила «Демоны Бездны» не влезала в ряд (наезжала на «Профи» и вылезала за панель) — своей строкой */
#tapanel .ta-str .btn[data-bot="demon"] { flex-basis: 100%; }
#tapanel .ta-opp.human .ta-bot { display: none; }
#tapanel .ta-friend { display: none; color: #a89e8b; font-size: 13px; }
#tapanel .ta-opp.human .ta-friend { display: block; }
#tapanel .ta-friend b { color: #efe6d3; }
#tapanel .ta-friend .ok { color: #7fcf8e; } #tapanel .ta-friend .off { color: #f08a7c; }
#tapanel .ta-ring { display: flex; align-items: center; gap: 4px; margin: 6px 0 6px; color: #a89e8b; font-size: 13px; cursor: pointer; }
#tapanel .ta-go { display: block; width: 100%; }
#tapanel .ta-go.wait { filter: saturate(.4) brightness(.8); }
#tapanel .ta-hint { margin-top: 5px; color: #71695c; font: 600 12px / 1.3 var(--k-font, sans-serif); text-align: center; }
#tapanel .ta-fightbar { display: none; align-items: center; gap: 8px; }
/* зрители: «Уступить место» у бойца, блок зрителя, список зрителей */
#tapanel .ta-standrow { justify-content: center; gap: 8px; margin-top: 7px; }
#tapanel .ta-standrow.hidden { display: none; }
#tapanel .ta-standrow small { color: #71695c; font: 600 12px / 1.2 var(--k-font, sans-serif); }
#tapanel .ta-specbox { display: none; flex-direction: column; align-items: stretch; gap: 6px; padding: 8px 0 4px; box-shadow: inset 0 3px 0 #0b0a0e, inset 0 6px 0 #221e2a; text-align: center; }
#tapanel .ta-specbox b { color: #f3d897; font: 800 17px / 1.2 var(--k-font, sans-serif); margin-top: 4px; }
#tapanel .ta-specbox span, #tapanel .ta-specbox small { color: #a89e8b; font-size: 13px; }
#tapanel.spec .ta-specbox { display: flex; }
#tapanel.spec :is(.ta-me, .ta-opp, .ta-ring, .ta-go, .ta-hint, .ta-standrow, .ta-reset, .ta-stop) { display: none !important; }
#tapanel .ta-watch { margin-top: 7px; color: #71695c; font: 600 12px / 1.35 var(--k-font, sans-serif); }
#tapanel .ta-watch:empty { display: none; }
#tapanel .ta-watch b { color: #a89e8b; font-weight: 700; } #tapanel .ta-watch b.off { color: #5a5348; }
#tapanel.fold .ta-watch { display: none; }
/* «Выйти в меню» — сверху справа, сразу под кнопками паузы и настроек (ns-hud.css .hud-gear: top 12 px, right 18 px + колонка);
   слева от паузы его в бою закрывала полоска арены по центру */
#ta-quit { position: absolute; z-index: 7; top: calc(52px * var(--rz, 1)); right: calc(18px * var(--rz, 1) + 204px * var(--uis, 1)); transform: scale(var(--rz, 1)); transform-origin: 100% 0; pointer-events: auto; }
#ta-quit.hidden { display: none; }
html.ns.nskit #ta-quit {
  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: 2px 12px 1px !important; color: var(--k-text); text-shadow: 0 2px 0 rgba(0, 0, 0, .45); font: 600 14px / 1.2 var(--k-font); letter-spacing: 0; text-transform: none; transition: none; white-space: nowrap;
}
html.ns.nskit #ta-quit:hover { border-image-source: var(--k-btn-blood-hi, var(--k-btn-hi)) !important; color: #ffd9d2; }
html.ns.nskit #ta-quit:active { border-image-source: var(--k-btn-dn) !important; }
#tapanel .ta-fl { flex: 1; color: #ff9a6a; font-weight: 800; }
/* бой: только счёт и «Остановить бой»; свёрнуто — только заголовок и счёт */
#tapanel.fight .ta-body { display: none; }
#tapanel.fight .ta-fightbar { display: flex; }
#tapanel.fold .ta-body, #tapanel.fold .ta-fightbar { display: none; }
#tapanel.fold .ta-score { margin-bottom: 0; }

/* кнопки, флажок, ползунок — как в окнах набора «Кузня» (ns-kit.css .modal …) */
html.ns.nskit #tapanel .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: 2px 10px 1px !important; color: var(--k-text); text-shadow: 0 2px 0 rgba(0, 0, 0, .45); letter-spacing: 0; text-transform: none;
  font: 600 14px / 1.2 var(--k-font); transition: none; min-height: 0; white-space: nowrap;
}
html.ns.nskit #tapanel .btn.sm { font-size: 13px; padding: 1px 8px 0 !important; }
html.ns.nskit #tapanel .btn:hover:not(:disabled) { border-image-source: var(--k-btn-hi) !important; color: #fff; }
html.ns.nskit #tapanel .btn:active:not(:disabled) { border-image-source: var(--k-btn-dn) !important; transform: translateY(3px); }
html.ns.nskit #tapanel .btn.on, html.ns.nskit #tapanel .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 #tapanel :is(.btn.on, .btn.big):hover:not(:disabled) { border-image-source: var(--k-btn-gold-hi) !important; color: var(--k-on-gold); }
html.ns.nskit #tapanel :is(.btn.on, .btn.big):active:not(:disabled) { border-image-source: var(--k-btn-gold-dn) !important; }
html.ns.nskit #tapanel .btn.big { font: 800 19px / 1.2 var(--k-font); padding: 6px 12px 5px !important; }
html.ns.nskit #tapanel .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 #tapanel .ta-stop { border-image-source: var(--k-btn-blood, var(--k-btn)) !important; color: #ffd9d2; }
html.ns.nskit #tapanel input[type=checkbox] { -webkit-appearance: none; appearance: none; width: 27px; height: 27px; margin: 0 6px 0 0; border: 0 !important; background: var(--k-check) center / 27px 27px no-repeat !important; image-rendering: pixelated; flex: none; cursor: pointer; }
html.ns.nskit #tapanel input[type=checkbox]:checked { background-image: var(--k-check-on) !important; }
html.ns.nskit #tapanel input[type=range] {
  -webkit-appearance: none; appearance: none; height: 21px; margin: 0; cursor: pointer; border: 0 !important; box-shadow: none !important;
  background:
    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 #tapanel input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 9px; height: 27px; background: #f3d897; border: 0; box-shadow: 0 0 0 3px #08070b; }
html.ns.nskit #tapanel input[type=range]::-moz-range-thumb { width: 9px; height: 27px; background: #f3d897; border: 0; border-radius: 0; box-shadow: 0 0 0 3px #08070b; }

/* ---------- выбор героя: окно «Герои» с полосой «Взять» (как у соло, ns-solo.css #hl-solo) ---------- */
#hl-ta { display: none; }
#herolist.ta-pick #hl-ta { display: flex; align-items: center; gap: 15px; margin-top: 18px; padding-top: 15px; box-shadow: inset 0 3px 0 #0b0a0e, inset 0 6px 0 #221e2a; }
#herolist.ta-pick .hl-foot { display: none !important; }
/* на тестовой арене открыты все: без замков, тёмных силуэтов и «Как открыть» (ns-unlocks.css) */
#herolist.ta-pick .hl-card.locked canvas, #herolist.ta-pick .hl-card.locked:hover canvas { filter: none !important; }
#herolist.ta-pick .hl-card.locked .ul-lk, #herolist.ta-pick .ul-how { display: none !important; }
html.ns.nskit #herolist.ta-pick .hl-card.locked .hl-cn b { color: var(--k-text) !important; }
html.ns.nskit #herolist.ta-pick .hl-card.locked:hover .hl-cn b { color: #fff !important; }
html.ns.nskit #herolist.ta-pick .hl-card.locked.sel .hl-cn b { color: var(--k-gold-hi) !important; }
#herolist.ta-pick #hl-ul, #herolist.ta-pick #hl-cnt { visibility: hidden; }
#hl-ta .hs-rec { flex: 1; min-width: 0; color: #a89e8b; font: 600 calc(15px * var(--fs, 1)) / 1.3 var(--k-font, sans-serif); }
#hl-ta .btn { flex: none; }
#hl-ta .btn.big b { font-weight: 800; }
html.ns.nskit #hl-ta .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: 6px 18px 5px !important; color: var(--k-text); text-shadow: 0 2px 0 rgba(0, 0, 0, .45); letter-spacing: 0; text-transform: none; font: 600 calc(16px * var(--fs, 1)) / 1.2 var(--k-font); transition: none;
}
html.ns.nskit #hl-ta .btn:hover { border-image-source: var(--k-btn-hi) !important; color: #fff; }
html.ns.nskit #hl-ta .btn:active { border-image-source: var(--k-btn-dn) !important; transform: translateY(3px); }
html.ns.nskit #hl-ta .btn.big { min-width: 360px; border-image-source: var(--k-btn-gold) !important; color: var(--k-on-gold); text-shadow: 0 2px 0 rgba(255, 240, 200, .35); font-size: calc(19px * var(--fs, 1)); }
html.ns.nskit #hl-ta .btn.big:hover { border-image-source: var(--k-btn-gold-hi) !important; }
html.ns.nskit #hl-ta .btn.big:active { border-image-source: var(--k-btn-gold-dn) !important; }
html.ns.nskit #herolist.ta-pick .hl-head b { color: var(--k-gold-hi); }

/* ---------- лавка тестовой арены: без таймера и «кто готов»; «Готов» — закрыть ---------- */
#prep.ta #prep-timer, #prep.ta #prep-who, #prep.ta #prep-ready-info { display: none !important; }
#ta-shopgold { display: none; }
#prep.ta #ta-shopgold { display: inline-block; }

/* ---------- главное меню: шесть пунктов (ns-solo.css: 500 / 836); 13 окт. 2026 — на 88 px выше (было 470 / 862):
   «Быстрая игра» напротив кончика хвоста чёрной дыры, логотип — ns.css (просьба владельца) ---------- */
html.ns .lobby-stage #M-menu { top: 382px !important; }
html.ns .lobby-stage #M-sub { top: 774px !important; }