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

/* v5.7: Pixelify Sans — заголовки, кнопки, цифры; Rubik — текст (OFL, файлы в /fonts) */
@font-face { font-family: 'Pixelify Sans'; src: url('/fonts/pixelify-cyrillic.woff2') format('woff2'); font-weight: 400 700; font-display: swap; unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Pixelify Sans'; src: url('/fonts/pixelify-latin.woff2') format('woff2'); font-weight: 400 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: 'Rubik'; src: url('/fonts/rubik-cyrillic.woff2') format('woff2'); font-weight: 300 900; font-display: swap; unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Rubik'; src: url('/fonts/rubik-latin.woff2') format('woff2'); font-weight: 300 900; 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; }

/* v5.7: палитра «Кузня Бездны» (см. tools/art/UI_BRIEF.md) — старые имена переменных ведут на новую палитру */
:root {
  --ink: #09080c; --stone-9: #121016; --stone-8: #1a1720; --stone-7: #24202c; --stone-6: #322c3c; --stone-5: #4a4256; --iron: #8b8398;
  --gold: #f0bf4c; --gold-hi: #ffe08a; --gold-lo: #8a5c1a; --ember: #ff7a3d; --blood: #e2383f; --heal: #5fd36b; --sky: #56b6ff; --abyss: #b46cff;
  --text: #f1e9dc; --text-2: #b9ae9e; --text-3: #7c7468; --brass: #c9b48a;
  --f-display: 'Pixelify Sans', 'Tiny5', monospace; --f-text: 'Rubik', 'Segoe UI', system-ui, sans-serif;
  --bg: var(--stone-9); --panel: var(--stone-8); --panel2: var(--stone-7); --line: var(--stone-6); --dim: var(--text-2);
  --red: var(--blood); --acc: var(--gold);
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #000; color: var(--text); font-family: var(--f-text); font-synthesis: none; letter-spacing: 0; overflow: hidden; user-select: none; }
#game { position: fixed; left: 0; top: 0; image-rendering: pixelated; image-rendering: crisp-edges; cursor: crosshair; }
/* v5.7 HD (render.js resize): мир перенесён в #game целым увеличением — остаток до размера экрана сглаживает браузер (пиксели ровные);
   в финале холст увеличен CSS-наездом до ×4 — там снова чёткие пиксели */
#game.ss-soft { image-rendering: auto; }
html.fin-on #game.ss-soft { image-rendering: pixelated; }
.hidden { display: none !important; }
.screen { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; flex-direction: column; z-index: 20; }
.panel { background: var(--panel); border: 2px solid var(--line); box-shadow: 0 0 0 2px #000, 0 8px 30px rgba(0,0,0,.6); padding: 14px; }
.btn { font-family: inherit; font-size: calc(15px * var(--fs, 1)); color: var(--text); background: var(--panel2); border: 2px solid var(--line); padding: 8px 14px; cursor: pointer; box-shadow: 0 2px 0 #000; }
.btn:hover { border-color: var(--acc); color: #fff; }
.btn.big { font-size: calc(20px * var(--fs, 1)); padding: 10px 22px; background: #3a1850; border-color: #a040ff; font-weight: 700; letter-spacing: 1px; }
.btn.big:hover { background: #50206e; }
.hint { color: var(--dim); font-size: calc(13px * var(--fs, 1)); margin-top: 8px; }
.lbl { display: block; color: var(--dim); font-size: calc(13px * var(--fs, 1)); margin: 10px 0 6px; text-transform: uppercase; letter-spacing: 1px; }
input#name { font-family: inherit; font-size: calc(18px * var(--fs, 1)); background: #0c0812; color: #fff; border: 2px solid var(--line); padding: 6px 10px; width: 100%; outline: none; }
input#name:focus { border-color: var(--acc); }

/* ЛОББИ */
#lobby { background: radial-gradient(ellipse at 50% 30%, #2a1040 0%, #0b0710 60%, #000 100%); overflow-y: auto; justify-content: flex-start; }
.lobby-wrap { width: min(1320px, 97vw); margin: auto 0; padding: 16px 0; }
.title { text-align: center; margin-bottom: 16px; }
.title .t1 { font-size: calc(28px * var(--fs, 1)); letter-spacing: 10px; color: #c8a0ff; }
.title .t2 { font-size: calc(72px * var(--fs, 1)); font-weight: 700; letter-spacing: 8px; color: #fff; text-shadow: 0 0 20px #a020ff, 4px 4px 0 #3a0060; line-height: 1; }
.title .sub { color: var(--dim); margin-top: 6px; }
/* на обычных экранах (до 1200 px по высоте) заголовок компактнее — панель героя внизу помещается без прокрутки */
@media (max-height: 1200px) { .title { margin-bottom: 10px; } .title .t1 { font-size: calc(22px * var(--fs, 1)); } .title .t2 { font-size: calc(56px * var(--fs, 1)); } .lobby-wrap { padding: 10px 0; } }
.lobby-cols { display: grid; grid-template-columns: 1.25fr 1fr; gap: 16px; }
#heroes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; }
.hero { padding: 3px 5px !important; gap: 6px !important; align-items: center; min-width: 0; }
.hero > div { min-width: 0; }
.hero canvas { width: 24px !important; height: 32px !important; }
.hero .hn { font-size: calc(13px * var(--fs, 1)) !important; line-height: 1.05; overflow-wrap: anywhere; }
.hero .hn.long { font-size: calc(10px * var(--fs, 1)) !important; overflow-wrap: normal; }
.hero .hstat { font-size: calc(10px * var(--fs, 1)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hero { border: 2px solid var(--line); background: var(--panel2); padding: 10px; cursor: pointer; display: flex; gap: 10px; }
.hero:hover { border-color: #6a4a8a; }
.hero.sel { border-color: var(--gold); box-shadow: 0 0 12px rgba(255,208,64,.35); }
.hero canvas { width: 48px; height: 64px; image-rendering: pixelated; flex: none; }
.hero .hn { font-size: calc(18px * var(--fs, 1)); font-weight: 700; }
.hero .hd { font-size: calc(12px * var(--fs, 1)); color: var(--dim); margin: 2px 0 4px; }
.hero .ha { font-size: calc(12px * var(--fs, 1)); color: #cfc0e0; }
.hero .ha b { color: #fff; }
.hero .hstat { font-size: calc(10px * var(--fs, 1)); color: #a090b8; margin-top: 2px; }
.slot { display: flex; align-items: center; gap: 8px; background: #0f0a15; border: 2px solid var(--line); padding: 6px 8px; margin-bottom: 6px; min-height: 40px; }
.slot .dot { width: 12px; height: 12px; flex: none; }
.slot .sn { flex: 1; }
.slot .sh { color: var(--dim); font-size: calc(13px * var(--fs, 1)); }
.slot .tag { font-size: calc(11px * var(--fs, 1)); padding: 1px 5px; border: 1px solid; }
.slot .x { cursor: pointer; color: #ff6060; padding: 0 4px; }
/* v4.1: билд — Ловкость / Интеллект / Сила */
#builds { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; margin-bottom: 4px; }
.bld { --bc: #888; display: flex; gap: 7px; align-items: center; border: 2px solid var(--line); background: var(--panel2); padding: 5px 7px; cursor: pointer; min-width: 0; }
.bld:hover { border-color: #6a4a8a; }
.bld img { width: 26px; height: 26px; image-rendering: pixelated; flex: none; }
.bld > div { min-width: 0; }
.bld .bldn { font-size: calc(14px * var(--fs, 1)); font-weight: 700; color: var(--bc); display: flex; align-items: center; gap: 5px; }
.bld .bldr { display: none; font-size: calc(9px * var(--fs, 1)); font-weight: 400; color: #cfc0e0; border: 1px solid #6a5a80; padding: 0 3px; }
.bld.rec .bldr { display: inline; }
.bld .bldd { font-size: calc(10px * var(--fs, 1)); color: #a090b8; line-height: 1.25; }
.bld.sel { border-color: var(--bc); box-shadow: 0 0 10px color-mix(in srgb, var(--bc) 45%, transparent); background: color-mix(in srgb, var(--bc) 10%, var(--panel2)); }
.slot .btag { font-size: calc(10px * var(--fs, 1)); padding: 0 4px; border: 1px solid; font-weight: 700; }
.br .bt { font-style: normal; font-weight: 700; font-size: calc(11px * var(--fs, 1)); margin-right: 3px; }
.slot select { font-family: inherit; background: #1a1222; color: #fff; border: 1px solid var(--line); }
.slot.empty { color: #554466; }
#host-ctrl { display: flex; gap: 10px; margin: 10px 0; align-items: center; }
#addrs { font-size: calc(18px * var(--fs, 1)); color: #80ffb0; }
#addrs div { padding: 3px 0; user-select: text; }
.controls { color: var(--dim); font-size: calc(12px * var(--fs, 1)); margin-top: 14px; line-height: 1.5; }

/* HUD */
#hud { position: fixed; inset: 0; pointer-events: none; z-index: 10; }
#hud > * { pointer-events: none; }
/* размер интерфейса (настройка «Размер интерфейса», по умолчанию 130%) */
:root { --uis: 1.3; --uisb: 1.3; --fs: 1.25; }
#bottom { position: absolute; left: var(--bleft, 50%); bottom: 14px; transform: translateX(-50%) scale(var(--uisb)); transform-origin: 50% 100%; display: flex; align-items: flex-end; gap: 16px; }
#vitals { display: flex; align-items: center; gap: 8px; background: rgba(12,8,18,.85); border: 2px solid var(--line); padding: 8px; }
#lvl { width: 38px; height: 38px; background: #2a1840; border: 2px solid var(--gold); color: var(--gold); font-weight: 700; font-size: calc(20px * var(--fs, 1)); display: flex; align-items: center; justify-content: center; }
.bars { width: 300px; }
#hpbar { position: relative; height: 20px; background: #300c10; border: 2px solid #000; }
#hpfill { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(#ff5060, #b01828); transition: width .1s; }
/* v4.1: «след урона» — светлая полоса догоняет здоровье с задержкой, видно, сколько сняли */
#hptrail { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(#fff0c0, #ffb050); opacity: .85; }
#hpfill::after { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 35%; background: rgba(255,255,255,.18); }
#shfill { position: absolute; left: 0; top: 0; height: 5px; background: #e0f0ff; }
#hptext { position: absolute; inset: 0; text-align: center; font-size: calc(14px * var(--fs, 1)); line-height: 16px; text-shadow: 1px 1px 0 #000; }
#xpbar { height: 8px; background: #101a28; border: 2px solid #000; border-top: 0; }
#xpfill { height: 100%; background: linear-gradient(#80f0ff, #2a90d0); }
#gold { color: #ffe060; font-size: calc(30px * var(--fs, 1)); font-weight: 700; min-width: 96px; text-shadow: 2px 2px 0 #000, 0 0 10px rgba(255,190,40,.35); display: flex; align-items: center; gap: 6px; line-height: 1; }
#gold::before { content: ''; width: 20px; height: 20px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff4b0 0 20%, #ffd040 21% 60%, #c08010 61%); box-shadow: 0 0 0 2px #3a2400, 2px 2px 0 2px #000; flex: none; }
#gold.up { animation: goldUp .35s ease-out; }
@keyframes goldUp { 0% { transform: scale(1.35); color: #ffffff; } 100% { transform: scale(1); } }
#abilities { display: flex; gap: 8px; }
.ab { position: relative; width: 56px; height: 56px; background: rgba(12,8,18,.9); border: 2px solid var(--line); }
.ab img { position: absolute; left: 8px; top: 6px; width: 36px; height: 36px; image-rendering: pixelated; }
.ab .key { position: absolute; bottom: -1px; left: 0; right: 0; text-align: center; font-size: calc(10px * var(--fs, 1)); color: var(--dim); }
.ab .cd { position: absolute; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,.7); height: 0; }
.ab .ch { position: absolute; top: 1px; right: 3px; font-size: calc(13px * var(--fs, 1)); color: #fff; text-shadow: 1px 1px 0 #000; }
#statusfx { position: absolute; left: 0; bottom: 100%; margin-bottom: 8px; display: flex; gap: 4px; flex-direction: row; flex-wrap: wrap; font-size: calc(13px * var(--fs, 1)); pointer-events: none; }
#statusfx span { padding: 1px 6px; border: 1px solid; background: rgba(0,0,0,.7); }
/* 12 окт. 2026: значки эффектов над полоской здоровья (js/efxbar.js) — холст в точках экрана, размер в px ставит efxbar */
#statusfx { align-items: flex-end; }
#statusfx-txt { display: flex; gap: inherit; }
#efxhud { display: block; pointer-events: auto; image-rendering: pixelated; }
#topright { position: absolute; right: 12px; top: 12px; width: 204px; text-align: center; transform: scale(calc(var(--uis) / 1.5)); transform-origin: 100% 0; } /* v5.7 (просьба владельца): правая колонка в 1.5 раза меньше, по-прежнему у верхнего края */
#botleft { position: absolute; left: 12px; bottom: 12px; transform: scale(var(--uis)); transform-origin: 0 100%; }
#minimap { display: block; width: 170px; height: 170px; border: 2px solid var(--line); background: #000; image-rendering: pixelated; }
#zoneinfo { margin-top: 0; font-size: calc(14px * var(--fs, 1)); background: rgba(12,8,18,.85); padding: 4px; border: 2px solid var(--line); }
#zoneinfo.danger { color: #ff60ff; border-color: #a020ff; }
#alive { margin-top: 4px; font-size: calc(14px * var(--fs, 1)); background: rgba(12,8,18,.85); padding: 4px; border: 2px solid var(--line); }
#feed { position: absolute; left: 12px; top: 12px; width: 420px; font-size: calc(14px * var(--fs, 1)); transform: scale(calc((0.85 + var(--uis) * 0.15) * 0.75)); transform-origin: 0 0; } /* ×0.75 — на четверть меньше (11 окт., просьба владельца) */
#feed div { background: rgba(10,6,14,.7); padding: 3px 8px; margin-bottom: 3px; border-left: 3px solid; text-shadow: 1px 1px 0 #000; animation: fadein .2s; }
@keyframes fadein { from { opacity: 0; transform: translateX(-10px); } }
/* табличка «подобран предмет» — крупная, масштабируется вместе с интерфейсом */
#toasts { position: absolute; left: 12px; top: 34%; width: 470px; transform: scale(calc(0.6 + var(--uis) * 0.4)); transform-origin: 0 0; }
.toast { display: flex; align-items: center; gap: 12px; background: rgba(10,6,14,.92); border: 3px solid; padding: 8px 12px; margin-bottom: 8px; animation: toastIn .3s; box-shadow: 0 0 18px rgba(0,0,0,.6); }
.toast img { width: 52px; height: 52px; image-rendering: pixelated; flex: none; }
.toast .tg { font-size: calc(12px * var(--fs, 1)); color: #ffe8a0; letter-spacing: 1px; }
.toast .tn { font-weight: 700; font-size: calc(21px * var(--fs, 1)); text-shadow: 2px 2px 0 #000; }
.toast .td { font-size: calc(15px * var(--fs, 1)); color: #d8cce6; line-height: 1.25; }
@keyframes toastIn { from { opacity: 0; transform: translateX(-30px) scale(1.08); } to { opacity: 1; transform: none; } }
#centermsg { position: absolute; left: 50%; top: 22%; transform: translateX(-50%) scale(calc(0.7 + var(--uis) * 0.3)); transform-origin: 50% 0; text-align: center; font-size: calc(22px * var(--fs, 1)); text-shadow: 2px 2px 0 #000; }
#centermsg div { animation: fadein .3s; margin-bottom: 4px; }
/* v4.1: объявления убийств героев (как в Dota) */
#announce { position: absolute; left: 50%; top: 13%; transform: translateX(-50%) scale(calc(0.7 + var(--uis) * 0.3)); transform-origin: 50% 0; text-align: center; pointer-events: none; }
#announce .an { animation: annIn .45s cubic-bezier(.2,1.6,.4,1) both, annOut .5s ease-in 2.6s forwards; }
#announce .an b { display: block; font-size: calc(38px * var(--fs, 1)); letter-spacing: 4px; text-shadow: 3px 3px 0 #000, 0 0 16px currentColor; }
#announce .an.t2 b { font-size: calc(44px * var(--fs, 1)); } #announce .an.t3 b { font-size: calc(52px * var(--fs, 1)); }
#announce .an span { display: block; font-size: calc(17px * var(--fs, 1)); color: #e8e0f0; text-shadow: 2px 2px 0 #000; margin-top: 2px; }
@keyframes annIn { from { opacity: 0; transform: scale(2.2); } to { opacity: 1; transform: scale(1); } }
@keyframes annOut { to { opacity: 0; transform: translateY(-14px); } }
#apoc { position: fixed; inset: 0; pointer-events: none; z-index: 4; background: radial-gradient(ellipse at center, rgba(0,0,0,0) 35%, rgba(70,110,40,.28) 70%, rgba(20,34,10,.65) 100%); animation: apocPulse 1.6s ease-in-out infinite alternate; } /* v4.8 */
@keyframes apocPulse { from { opacity: .75; } to { opacity: 1; } }
#streak { margin-top: 6px; text-align: right; /* v4.7: под таблицей игроков, а не поверх неё */ font-weight: 700; color: #ff6040; text-shadow: 2px 2px 0 #000, 0 0 10px #ff2000; }
#streak .n { font-size: calc(44px * var(--fs, 1)); line-height: 1; }
#streak .l { font-size: calc(16px * var(--fs, 1)); color: #ffb080; }
#bossbar { position: absolute; left: 50%; top: 8px; transform: translateX(-50%) scale(var(--uis)); transform-origin: 50% 0; width: 200px; text-align: center; } /* v5.6: компактнее, по полоске на каждого босса рядом */
#bossbar .brow { margin-bottom: 3px; }
#bossbar .bname { font-size: calc(11px * var(--fs, 1)); line-height: 1.15; color: #ff8090; text-shadow: 1px 1px 0 #000; }
#bossbar .bbar { height: 5px; background: #200810; border: 1px solid #000; box-shadow: 0 0 0 1px #6a2030; }
#bossbar .bfill { height: 100%; background: linear-gradient(#ff3050, #900018); }
#prompt { position: absolute; transform: translate(-50%, -100%) scale(calc(0.75 + var(--uis) * 0.35)); transform-origin: 50% 100%; background: rgba(10,6,14,.92); border: 2px solid var(--gold); padding: 6px 12px 6px 8px; white-space: nowrap; display: flex; align-items: center; gap: 10px; box-shadow: 0 4px 0 rgba(0,0,0,.5); }
#prompt .pk { width: 34px; height: 34px; flex: none; border: 3px solid var(--gold); background: #2a1a06; color: #ffe060; font-size: calc(26px * var(--fs, 1)); font-weight: 700; display: flex; align-items: center; justify-content: center; box-shadow: 0 3px 0 #000; animation: pkPulse 1s infinite alternate; }
@keyframes pkPulse { from { box-shadow: 0 3px 0 #000, 0 0 0 rgba(255,208,64,0); } to { box-shadow: 0 3px 0 #000, 0 0 12px rgba(255,208,64,.7); } }
#prompt .pn { font-size: calc(15px * var(--fs, 1)); color: #fff; text-shadow: 1px 1px 0 #000; }
#prompt .pp { font-size: calc(32px * var(--fs, 1)); font-weight: 700; color: #ffe060; line-height: 1.05; text-shadow: 2px 2px 0 #000; display: flex; align-items: center; gap: 6px; }
#prompt .pp i { width: 18px; height: 18px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff4b0 0 20%, #ffd040 21% 60%, #c08010 61%); box-shadow: 0 0 0 2px #3a2400; }
#prompt .pp.no { color: #ff5a5a; }
#prompt .ps { font-size: calc(12px * var(--fs, 1)); color: #c8b8d8; }
#compass { position: absolute; left: 50%; top: 50%; font-size: calc(26px * var(--fs, 1)); color: #ff4040; text-shadow: 0 0 6px #000; transform-origin: center; }
/* стрелка к аирдропу */
#droparrow { position: absolute; left: 50%; top: 50%; display: flex; flex-direction: column; align-items: center; pointer-events: none; z-index: 12; }
#droparrow .a { font-size: calc(30px * var(--uis) * var(--fs, 1)); color: #ffd040; text-shadow: 0 0 6px #000, 2px 2px 0 #000; animation: dropPulse .6s infinite alternate; }
#droparrow .t { font-size: calc(12px * var(--uis) * var(--fs, 1)); color: #ffe8a0; text-shadow: 1px 1px 0 #000; }
@keyframes dropPulse { from { opacity: .7; } to { opacity: 1; } }
/* вскрытие аирдропа: полоска прогресса */
#chanbar { position: absolute; left: 50%; top: 62%; transform: translateX(-50%) scale(calc(0.6 + var(--uis) * 0.4)); text-align: center; z-index: 13; }
#chanbar .ct { color: #ffe8a0; font-size: calc(16px * var(--fs, 1)); text-shadow: 2px 2px 0 #000; margin-bottom: 4px; }
#chanbar .cb { width: 260px; height: 14px; background: #201408; border: 2px solid #000; box-shadow: 0 0 0 2px #ffd040; }
#chanbar .cb i { display: block; height: 100%; width: 0; background: linear-gradient(#ffe070, #e0a020); }
/* предметы: свёрнуты в кнопку, по нажатию — сетка над ней (не закрывает экран) */
#invwrap { position: relative; align-self: flex-end; pointer-events: auto; }
#invbtn { pointer-events: auto; font-size: calc(13px * var(--fs, 1)); padding: 6px 10px; white-space: nowrap; background: rgba(12,8,18,.9); }
#invbtn b { color: var(--gold); }
#invbtn.on { border-color: var(--gold); }
#inv.hidden { display: none; }
#inv { position: absolute; left: 0; right: 0; bottom: calc(100% + 6px); max-height: 46vh; overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fill, 28px); justify-content: center; grid-auto-rows: 28px; gap: 2px; pointer-events: auto; padding: 2px; background: rgba(12,8,18,.85); border: 2px solid var(--line); }
#inv .it { position: relative; width: 28px; height: 28px; background: rgba(20,14,30,.95); border: 1px solid; pointer-events: auto; box-sizing: border-box; }
#inv .it.empty { border: 1px dashed #3a3048; background: rgba(20,14,30,.5); }
#inv .it.max { box-shadow: inset 0 0 6px rgba(255,210,80,.6); }
#inv .it img { width: 24px; height: 24px; margin: 1px; image-rendering: pixelated; }
#inv .it span { position: absolute; right: 0; bottom: -2px; font-size: calc(10px * var(--fs, 1)); text-shadow: 1px 1px 0 #000; }
#netinfo { position: absolute; right: 12px; bottom: 2px; font-size: calc(11px * var(--fs, 1)); color: #554466; }

/* выбор улучшения */
#choice { position: absolute; left: var(--bleft, 50%); bottom: calc(112px * var(--uisb)); transform: translateX(-50%) scale(calc(0.5 + var(--uis) * 0.3)); transform-origin: 50% 100%; display: flex; gap: 10px; pointer-events: auto; align-items: flex-end; }
#choice .ttl { position: absolute; top: -26px; left: 0; right: 0; text-align: center; color: var(--gold); font-size: calc(18px * var(--fs, 1)); text-shadow: 2px 2px 0 #000; }
#choice.skills .ttl { top: -22px; font-size: calc(15px * var(--fs, 1)); white-space: nowrap; }
.card { width: 230px; background: rgba(18,12,26,.95); border: 2px solid; padding: 8px; cursor: pointer; pointer-events: auto; animation: rise .25s; }
@keyframes rise { from { opacity: 0; transform: translateY(20px); } }
.card:hover { transform: translateY(-4px); box-shadow: 0 0 16px rgba(255,255,255,.2); }
.card .top { display: flex; gap: 8px; align-items: center; }
.card img { width: 36px; height: 36px; image-rendering: pixelated; background: #0a0610; border: 1px solid #000; }
.card .cn { font-weight: 700; font-size: calc(15px * var(--fs, 1)); }
.card .cr { font-size: calc(11px * var(--fs, 1)); }
.card .cd { font-size: calc(12px * var(--fs, 1)); color: #d0c4e0; margin-top: 6px; min-height: 30px; }
.card .ck { font-size: calc(11px * var(--fs, 1)); color: var(--dim); text-align: right; }

/* модальные окна */
.modal { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.55); z-index: 30; }
.mhead { font-size: calc(20px * var(--fs, 1)); font-weight: 700; margin-bottom: 10px; display: flex; justify-content: space-between; }
.close { cursor: pointer; color: var(--dim); }
.panel.wide { width: min(1060px, 95vw); max-height: 90vh; overflow-y: auto; }
#build-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px 12px; font-size: calc(14px * var(--fs, 1)); margin-bottom: 12px; }
#build-stats div span { color: #fff; float: right; }
#build-stats div { color: var(--dim); border-bottom: 1px solid #2a2036; }
#build-items { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.bitem { display: flex; gap: 8px; background: var(--panel2); border-left: 3px solid; padding: 5px; }
.bitem img { width: 32px; height: 32px; image-rendering: pixelated; flex: none; }
.bitem .bn { font-weight: 700; font-size: calc(15px * var(--fs, 1)); }
.bitem .bd { font-size: calc(13px * var(--fs, 1)); line-height: 1.35; color: #ddd0ea; }
#shop-items { display: flex; flex-direction: column; gap: 6px; width: 460px; }
.sitem { display: flex; align-items: center; gap: 10px; background: var(--panel2); border: 2px solid var(--line); padding: 6px; cursor: pointer; }
.sitem:hover { border-color: var(--gold); }
.sitem.sold { opacity: .35; cursor: default; }
.sitem img { width: 36px; height: 36px; image-rendering: pixelated; }
.sitem .sinfo { flex: 1; }
.sitem .sp { color: var(--gold); font-size: calc(18px * var(--fs, 1)); }
.map-panel canvas { width: min(560px, 80vh); height: min(560px, 80vh); image-rendering: pixelated; background: #000; }
.helptext { font-size: calc(15px * var(--fs, 1)); line-height: 1.5; color: #d8cce6; }
.helptext b { color: #fff; }
#tooltip { position: fixed; z-index: 40; max-width: 280px; background: rgba(14,9,20,.97); border: 2px solid; padding: 8px; font-size: calc(13px * var(--fs, 1)); pointer-events: none; }
#tooltip .tn { font-weight: 700; font-size: calc(15px * var(--fs, 1)); }
#tooltip .tr { font-size: calc(11px * var(--fs, 1)); margin-bottom: 4px; }

#death { background: rgba(40,0,10,.35); pointer-events: none; justify-content: flex-start; padding-top: 18vh; }
.dead-title { font-size: calc(64px * var(--fs, 1)); font-weight: 700; color: #ff3040; text-shadow: 4px 4px 0 #300, 0 0 20px #f00; letter-spacing: 6px; }
.dead-title.small { font-size: calc(32px * var(--fs, 1)); color: #c080ff; text-shadow: 0 0 20px #80f; }
#death-place { font-size: calc(24px * var(--fs, 1)); margin-top: 8px; text-shadow: 2px 2px 0 #000; }
#results { background: rgba(0,0,0,.6); }
.res-sub { text-align: center; font-size: calc(22px * var(--fs, 1)); font-weight: 700; letter-spacing: 6px; margin-bottom: 4px; text-shadow: 2px 2px 0 #000; }
.res-sub.win { color: #ffe060; animation: resWin 1.6s ease-in-out infinite; }
.res-sub.lose { color: #b0a0c8; }
@keyframes resWin { 0%, 100% { text-shadow: 2px 2px 0 #000, 0 0 6px rgba(255,220,80,.4); } 50% { text-shadow: 2px 2px 0 #000, 0 0 18px rgba(255,220,80,.9); } }
.res-title { font-size: calc(40px * var(--fs, 1)); font-weight: 700; text-align: center; margin-bottom: 14px; color: var(--gold); text-shadow: 3px 3px 0 #000; }
#res-table { width: 100%; border-collapse: collapse; font-size: calc(15px * var(--fs, 1)); margin-bottom: 14px; }
#res-table th { color: var(--dim); font-weight: 400; text-align: left; border-bottom: 2px solid var(--line); padding: 4px; }
#res-table td { padding: 5px 4px; border-bottom: 1px solid #2a2036; }
#results .panel { text-align: center; }
#results table { text-align: left; }
#connecting { background: #000; }
#hurtv { position: fixed; inset: 0; pointer-events: none; z-index: 9; box-shadow: inset 0 0 120px rgba(255,0,0,0.0); transition: box-shadow .15s; }

/* v2 */
.btn.sm { font-size: calc(13px * var(--fs, 1)); padding: 4px 10px; }
.btn.on { border-color: var(--gold); color: var(--gold); background: #2e2010; }
#settings { margin-top: 10px; background: #0f0a15; border: 2px solid var(--line); padding: 8px; }
.set-row { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; flex-wrap: wrap; }
.set-row > span:first-child { color: var(--dim); min-width: calc(64px * var(--fs, 1)); } /* v4.4: подпись не налезает на кнопки */
.slot .tm { cursor: pointer; font-size: calc(11px * var(--fs, 1)); padding: 1px 6px; border: 1px solid; }
#lives { color: #ff5068; font-size: calc(20px * var(--fs, 1)); text-shadow: 1px 1px 0 #000; min-width: 54px; text-align: center; line-height: 1; }
#lives small { display: block; font-size: calc(10px * var(--fs, 1)); color: var(--dim); }
.ab.ult { border-color: #a040ff; }
.ab.ult.ready { box-shadow: 0 0 10px #c060ff; border-color: #e0a0ff; }
.ab.ult.stolen { box-shadow: 0 0 12px #40ff70; border-color: #80ff90; }
.ab.dash { margin-left: 10px; width: 48px; height: 48px; margin-top: 8px; }
.ab.dash img { left: 6px; top: 4px; width: 32px; height: 32px; }
.ab .pips { position: absolute; top: -7px; left: 0; right: 0; display: flex; justify-content: center; gap: 2px; pointer-events: none; }
.ab .pips i { width: 5px; height: 4px; background: #2a2236; border: 1px solid #000; }
.ab .pips i.on { background: #ffd040; }
.ab .pips .lvn { font-size: calc(10px * var(--fs, 1)); line-height: 6px; color: #ffd040; text-shadow: 1px 1px 0 #000; margin-left: 1px; }
.ab.ult .pips i.on { background: #e0a0ff; }
.ab.locked img { filter: grayscale(1) brightness(.35); }
.ab.locked .ch { color: #aaa; font-size: calc(10px * var(--fs, 1)); }
.ab.learn { border-color: #ffd040; animation: learnPulse 0.8s infinite alternate; }
/* свободное очко навыка: «+» и подсказка Ctrl + кнопка */
.ab.learn::after { content: '+'; position: absolute; top: -11px; right: -10px; width: 18px; height: 18px; background: #ffd040; color: #1a0e00; font-weight: 700; font-size: calc(17px * var(--fs, 1)); line-height: 17px; text-align: center; border: 2px solid #000; }
.ab.learn .key { color: #ffd040; font-size: calc(9px * var(--fs, 1)); }
@keyframes learnPulse { from { box-shadow: 0 0 2px #ffd040; } to { box-shadow: 0 0 12px #ffd040; } }
.card .lines { font-size: calc(11px * var(--fs, 1)); color: #cfc6dd; margin-top: 4px; line-height: 1.35; }
.card .lines b { color: #9dff9d; font-weight: normal; }
.card.skill { width: 172px; padding: 5px 6px; }
.card.skill img { width: 28px; height: 28px; }
.card.skill .cn { font-size: calc(13px * var(--fs, 1)); }
.card.skill .top { gap: 6px; }
.card.skill .lines { margin-top: 3px; line-height: 1.25; }
#choice.skills { gap: 6px; }
.card.off { opacity: .38; filter: grayscale(.8); cursor: default; }
.card .slotkey { display: inline-block; min-width: 26px; padding: 0 4px; margin-right: 6px; border: 1px solid #555; color: #ffd040; font-size: calc(11px * var(--fs, 1)); text-align: center; }
#board { margin-top: 4px; background: rgba(12,8,18,.85); border: 2px solid var(--line); padding: 4px 6px; font-size: calc(13px * var(--fs, 1)); text-align: left; }
#board .br { display: flex; align-items: center; gap: 5px; padding: 1px 0; }
#board .br .d { width: 8px; height: 8px; flex: none; }
#board .br .n { flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
#board .br.out { opacity: .4; text-decoration: line-through; }
#board .br .lv { color: #ff6078; }
#board .br .pw { color: #ffd040; min-width: 34px; text-align: right; }
#board .br .lv { min-width: 28px; text-align: right; }
#board .br .ul { color: #80f0ff; min-width: 22px; text-align: right; } /* v4.7: уровень героя */
/* v5.1b: наблюдатели */
#watchers { margin-top: 4px; background: rgba(12,8,18,.85); border: 2px solid var(--line); padding: 3px 6px; font-size: calc(12px * var(--fs, 1)); text-align: left; color: #d8d0e0; }
#watchers .sh { color: #b8a8d8; margin-bottom: 1px; }
#watchers .sr { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 0 0 2px; }
#watchers .ar { color: #888; }
#watchers .g { color: #a8a0b8; }
#watchers small { color: #807890; }
#watchers .me { color: #ffd040; }
#board .br.bh .ul { color: #887799; }
#board .br.bh { font-size: calc(10px * var(--fs, 1)); color: #887799; border-bottom: 1px solid #2a2038; margin-bottom: 2px; padding-bottom: 2px; }
#board .br.bh .d { visibility: hidden; }
#board .br.bh .pw, #board .br.bh .lv { color: #887799; }
#down { background: rgba(40,0,10,.25); pointer-events: none; justify-content: flex-start; padding-top: 20vh; }
/* v5.7: «ВЫ ПАЛИ» появляется после сгорания героя (deathfx.js) — надпись не закрывает его в первую секунду */
#down:not(.mini) { animation: down-in .45s ease-out 1.1s both; }
@keyframes down-in { from { opacity: 0; } to { opacity: 1; } }
#down-info { font-size: calc(22px * var(--fs, 1)); margin-top: 8px; text-shadow: 2px 2px 0 #000; }
#down-timer { font-size: calc(56px * var(--fs, 1)); color: #fff; margin-top: 10px; text-shadow: 3px 3px 0 #000; }
#down.mini { inset: auto; width: max-content; max-width: 92vw; left: 50%; bottom: calc(96px * var(--uisb) + 34px); top: auto; padding: 5px 14px; background: rgba(24,6,12,.8); border: 2px solid #7a2838; flex-direction: row; gap: 14px; align-items: center; transform: translateX(-50%) scale(calc(0.55 + var(--uis) * 0.3)); transform-origin: 50% 100%; }
#down.mini .dead-title { font-size: calc(20px * var(--fs, 1)); letter-spacing: 2px; }
#down.mini #down-info { font-size: calc(15px * var(--fs, 1)); margin: 0; }
#down.mini #down-timer { display: none; }
.card .lvl { font-size: calc(12px * var(--fs, 1)); color: var(--gold); }
.card .nx { font-size: calc(12px * var(--fs, 1)); color: #a0ffa0; margin-top: 4px; }
.card .now { font-size: calc(11px * var(--fs, 1)); color: #a090b8; margin-top: 4px; }
.bitem .bl, #inv .it b { color: var(--gold); }
#inv .it b { position: absolute; left: 1px; top: -2px; font-size: calc(9px * var(--fs, 1)); text-shadow: 1px 1px 0 #000; }
#nightv { position: fixed; inset: 0; pointer-events: none; z-index: 8; background: radial-gradient(ellipse at center, rgba(80,0,30,0) 40%, rgba(90,0,30,.35) 100%); opacity: 0; transition: opacity 2s; }
#nightv.on { opacity: 1; }
.perkhead { grid-column: 1 / -1; color: var(--gold); font-size: calc(15px * var(--fs, 1)); margin: 6px 0 2px; }
#stall { position: fixed; left: 50%; top: 70px; transform: translateX(-50%); z-index: 30; background: rgba(40,10,10,.92); border: 2px solid #ff6060; color: #ffd0d0; padding: 6px 12px; font-size: calc(14px * var(--fs, 1)); pointer-events: none; text-align: center; max-width: 80vw; }
#errbadge { position: fixed; left: 12px; bottom: 12px; z-index: 30; background: rgba(40,10,10,.85); border: 1px solid #ff6060; color: #ffb0b0; padding: 3px 8px; font-size: calc(12px * var(--fs, 1)); pointer-events: none; max-width: 40vw; }

/* настройки */
.gear { position: absolute; z-index: 12; width: 36px; height: 36px; font-size: calc(22px * var(--fs, 1)); line-height: 30px; padding: 0; cursor: pointer; pointer-events: auto !important;
  color: #e8dcff; background: rgba(18,12,26,.85); border: 2px solid var(--line); box-shadow: 0 2px 0 #000; font-family: inherit; }
.gear:hover { color: #ffd040; border-color: #ffd040; }
.hud-gear { right: calc(18px + 204px * var(--uis)); top: 12px; }
.hud-pause { right: calc(58px + 204px * var(--uis)); top: 12px; font-size: calc(18px * var(--fs, 1)); } /* v4.8 */
.lobby-gear { position: fixed; right: 16px; top: 16px; }
#lobby .lobby-wrap { position: relative; z-index: 1; }
/* v4.1: живой фон лобби — медленные огоньки Бездны */
#lobbyfx { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; }
.opts-panel { width: 600px; max-width: 95vw; max-height: 96vh; overflow-y: auto; }
.opt-sec { color: var(--gold); font-size: calc(13px * var(--fs, 1)); margin: 10px 0 4px; text-transform: uppercase; letter-spacing: 1px; }
.opt-row { display: grid; grid-template-columns: 230px 1fr 64px; align-items: center; gap: 10px; margin: 6px 0; }
.opt-row b { text-align: right; color: #fff; font-weight: normal; }
.opt-row input[type=range] { width: 100%; accent-color: #ffd040; cursor: pointer; }
#o-curcol, #o-curstyle { display: flex; gap: 6px; }
.swatch { width: 24px; height: 24px; border: 2px solid #000; box-shadow: 0 0 0 1px #555; cursor: pointer; padding: 0; }
.swatch.on { box-shadow: 0 0 0 2px #fff; }
#o-preview { display: block; margin: 8px auto 4px; border: 2px solid var(--line); image-rendering: auto; }
.opt-foot { display: flex; align-items: center; gap: 12px; margin-top: 8px; }

/* рейтинг */
.lobby-rate { position: fixed; right: 62px; top: 16px; height: 36px; padding: 0 12px; z-index: 12; }
.stats-panel { width: min(860px, 96vw); }
.st-tabs { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
.st-tabs .btn.on { border-color: var(--gold); color: var(--gold); }
.st-bots { margin-left: auto; font-size: calc(13px * var(--fs, 1)); color: #a898c0; cursor: pointer; }
.st-table { width: 100%; border-collapse: collapse; font-size: calc(15px * var(--fs, 1)); }
.st-table th { color: var(--dim); font-weight: 400; text-align: left; border-bottom: 2px solid var(--line); padding: 4px 6px; }
.st-table td { padding: 5px 6px; border-bottom: 1px solid #2a2036; }
.st-table tr.me td { background: rgba(255,208,64,.1); }
.st-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.st-table .medal { color: var(--gold); font-weight: 700; }
.st-table canvas { width: 18px; height: 24px; image-rendering: pixelated; vertical-align: middle; margin-right: 6px; }
.st-bar { display: inline-block; height: 8px; background: #3a2e4a; width: 80px; vertical-align: middle; margin-left: 6px; }
.st-bar i { display: block; height: 100%; background: #5fe36a; }
.st-empty { padding: 20px; text-align: center; color: var(--dim); }
.st-note { font-size: calc(12px * var(--fs, 1)); color: #8a7aa0; margin-top: 8px; }
.rate-tag { font-size: calc(12px * var(--fs, 1)); color: #c8b8ff; margin-left: 6px; }
.rd-up { color: #5fe36a; } .rd-down { color: #ff6078; }
/* v4.9: рейтинг — ранги, калибровка, форма, история матчей */
.st-tabs .st-bots { margin-left: 12px; }
.st-rank { font-weight: 700; white-space: nowrap; }
.st-rank i { display: inline-block; width: 9px; height: 9px; margin-right: 5px; transform: rotate(45deg); box-shadow: 0 0 0 1px #000; }
.st-rd { color: #8a7aa0; font-size: calc(11px * var(--fs, 1)); margin-left: 4px; }
.st-cal { display: block; color: #a898c0; font-size: calc(11px * var(--fs, 1)); }
.st-tr { font-size: calc(11px * var(--fs, 1)); margin-left: 4px; }
.st-form { white-space: nowrap; }
.st-form b { display: inline-block; min-width: 16px; padding: 0 2px; margin-right: 2px; text-align: center; font-weight: 400; font-size: calc(11px * var(--fs, 1)); background: #2a2036; color: #9a8ab0; border: 1px solid #3a2e4a; }
.st-form b.p1 { background: #4a3a10; color: #ffd040; border-color: #ffd040; }
.st-form b.p3 { background: #2e3440; color: #d8e0f0; border-color: #8a94a8; }
.st-match { border-bottom: 1px solid #2a2036; padding: 6px 4px; }
.st-match .st-mh { color: #8a7aa0; font-size: calc(12px * var(--fs, 1)); margin-bottom: 3px; }
.st-match .st-mp { display: inline-block; margin-right: 14px; white-space: nowrap; }
#res-rnote { text-align: center; color: #a898c0; margin-top: 6px; font-size: calc(13px * var(--fs, 1)); }
/* «Готов» в лобби */
.ready-btn { width: 100%; margin: 6px 0; }
.ready-row { display: flex; gap: 6px; align-items: stretch; }
.ready-row .ready-btn { flex: 1; }
.ready-row .spec-btn { margin: 6px 0; white-space: nowrap; }
.ready-row .spec-btn.on { color: #ffd040; border-color: #ffd040; flex: 1; }
#specs { margin: 2px 0 6px; }
#specs b { color: #c8c0e0; font-weight: 400; }
.ready-btn.on { background: #1e4a28; border-color: #5fe36a; color: #b8ffc0; }
.tag.ready { color: #5fe36a !important; }
/* магазин закупки после арены */
#shop { position: absolute; left: 50%; top: 118px; transform: translateX(-50%) scale(calc(0.75 + var(--uis) * 0.25)); transform-origin: 50% 0; width: min(920px, 96vw); background: rgba(16,10,24,.94); border: 2px solid var(--gold); padding: 10px 12px; z-index: 25; pointer-events: auto; box-shadow: 0 0 30px rgba(0,0,0,.7); }
#shop.hidden { display: none; }
.shop-head { display: flex; align-items: center; gap: 16px; margin-bottom: 8px; }
.shop-ttl { font-size: calc(22px * var(--fs, 1)); color: var(--gold); font-weight: 700; }
#shop-timer { font-size: calc(18px * var(--fs, 1)); color: #fff; }
#shop-gold { margin-left: auto; font-size: calc(18px * var(--fs, 1)); color: #ffd040; }
#shop-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.scard { border: 2px solid #444; background: #140c1c; padding: 8px; cursor: pointer; display: flex; flex-direction: column; gap: 4px; min-height: 120px; }
.scard:hover { filter: brightness(1.2); }
.scard.off { opacity: .4; cursor: default; filter: none; }
.scard .top { display: flex; gap: 8px; align-items: center; }
.scard img { width: 32px; height: 32px; image-rendering: pixelated; background: #0a0610; border: 1px solid #000; }
.scard .cn { font-size: calc(15px * var(--fs, 1)); font-weight: 700; }
.scard .cr { font-size: calc(12px * var(--fs, 1)); }
.scard .nx { font-size: calc(13px * var(--fs, 1)); color: #e4d8f0; flex: 1; }
.scard .pr { font-size: calc(16px * var(--fs, 1)); color: #ffd040; text-align: right; }
.scard .pr.no { color: #ff6078; }
.shop-foot { display: flex; align-items: center; gap: 12px; margin-top: 8px; }
#shop-ready-info { flex: 1; text-align: center; color: #a898c0; font-size: calc(14px * var(--fs, 1)); }
#shop-ready.on { background: #1e4a28; border-color: #5fe36a; color: #b8ffc0; }

/* описание героя в лобби: способности крупно и читаемо */
/* описание выбранного героя — панель под списком героев (не всплывает, просто меняется) */
:is(#hero-detail, #dr-detail) { border-left: 4px solid var(--hc, var(--gold)) !important; padding: 8px 12px; margin-top: 12px; }
:is(#hero-detail, #dr-detail) .hd-abs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0 12px; }
@media (max-width: 900px) { :is(#hero-detail, #dr-detail) .hd-abs { grid-template-columns: 1fr 1fr; } }
:is(#hero-detail, #dr-detail) .hd-row { display: flex; gap: 14px; flex-wrap: wrap; }
:is(#hero-detail, #dr-detail) .hd-top { display: flex; gap: 12px; align-items: center; margin-bottom: 6px; }
:is(#hero-detail, #dr-detail) .hd-top canvas { width: 36px; height: 48px; image-rendering: pixelated; flex: none; }
:is(#hero-detail, #dr-detail) .hd-name { font-size: calc(19px * var(--fs, 1)); font-weight: 700; }
:is(#hero-detail, #dr-detail) .hd-desc { font-size: calc(13px * var(--fs, 1)); color: #ddd0ea; line-height: 1.35; }
:is(#hero-detail, #dr-detail) .hd-stats { font-size: calc(12px * var(--fs, 1)); color: #a898c0; margin-top: 2px; }
:is(#hero-detail, #dr-detail) .hd-ab { display: flex; gap: 8px; align-items: flex-start; padding: 5px 0; border-top: 1px solid #2a2036; }
:is(#hero-detail, #dr-detail) .hd-ab img { width: 28px; height: 28px; image-rendering: pixelated; flex: none; background: #0a0610; border: 1px solid #000; }
:is(#hero-detail, #dr-detail) .hd-k { display: inline-block; min-width: 34px; text-align: center; padding: 0 4px; margin-right: 6px; border: 1px solid #555; color: var(--gold); font-size: calc(13px * var(--fs, 1)); }
:is(#hero-detail, #dr-detail) .hd-an { font-size: calc(14px * var(--fs, 1)); font-weight: 700; }
:is(#hero-detail, #dr-detail) .hd-ad { font-size: calc(12.5px * var(--fs, 1)); color: #e4d8f0; line-height: 1.35; margin-top: 2px; }
:is(#hero-detail, #dr-detail) .hd-an small { font-size: calc(12px * var(--fs, 1)); color: #a898c0; font-weight: normal; }
:is(#hero-detail, #dr-detail) .hd-pass { font-size: calc(13px * var(--fs, 1)); color: #ffe36a; margin-top: 4px; }
/* прозрачная карта на Tab */
#mapov { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 15; pointer-events: none; image-rendering: pixelated; }
/* арена */
/* v3.12: таймер арены — компактная полоска, не закрывает бой */
#arenabar { position: absolute; left: 50%; top: 8px; transform: translateX(-50%) scale(calc(0.55 + var(--uis) * 0.25)); transform-origin: 50% 0; text-align: center; color: #ffd040; text-shadow: 2px 2px 0 #000; background: rgba(30,14,4,.72); border: 2px solid #ffb030; padding: 2px 10px 4px; z-index: 14; }
#arenabar .ar-t { display: inline-block; font-size: calc(13px * var(--fs, 1)); }
#arenabar .ar-time { display: inline-block; margin-left: 10px; font-size: calc(18px * var(--fs, 1)); line-height: 1.1; color: #fff; text-shadow: 2px 2px 0 #000; }
#arenabar .ar-time.hot { color: #ff4040; animation: arpulse .5s infinite alternate; }
@keyframes arpulse { from { transform: scale(1); } to { transform: scale(1.12); } }
#arenabar .ar-hp { display: flex; gap: 12px; justify-content: center; margin-top: 1px; }
#arenabar .ar-f { min-width: 90px; font-size: calc(11px * var(--fs, 1)); text-align: left; }
#arenabar .ar-f.dead { opacity: .45; }
#arenabar .ar-bar { height: 5px; background: #300c10; border: 1px solid #000; margin-top: 2px; }
#arenabar .ar-bar i { display: block; height: 100%; background: #e03040; }
#arenabar .ar-note { font-size: calc(10px * var(--fs, 1)); color: #d8c8a0; }
#btn-death-lobby { pointer-events: auto; margin-top: 14px; }
#bosspick { pointer-events: auto; margin-top: 14px; text-align: center; }
#bosspick .bp-t { font-size: calc(20px * var(--fs, 1)); color: #ff9060; text-shadow: 2px 2px 0 #000; margin-bottom: 8px; }
#bosspick .bp-row { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.bpc { width: 170px; background: rgba(16,10,24,.94); border: 2px solid #555; padding: 8px; cursor: pointer; text-align: left; }
.bpc:hover { filter: brightness(1.25); }
.bpc.on { box-shadow: 0 0 16px currentColor; }
.bpc canvas { display: block; margin: 0 auto 4px; width: 64px; height: 64px; image-rendering: pixelated; }
.bpc .n { font-size: calc(15px * var(--fs, 1)); font-weight: 700; }
.bpc .d { font-size: calc(11px * var(--fs, 1)); color: #d8c8e8; margin: 3px 0; }
.bpc .a { font-size: calc(11px * var(--fs, 1)); color: #a898c0; }
#death .boss-note { font-size: calc(20px * var(--fs, 1)); color: #ff9060; margin-top: 10px; text-shadow: 2px 2px 0 #000; }
/* свёрнутый экран выбывания: узкая полоска внизу по центру, не закрывает арену и бой */
#death.mini { inset: auto; width: max-content; left: 50%; bottom: calc(96px * var(--uisb) + 34px); top: auto; padding: 5px 14px; background: rgba(24,6,12,.8); border: 2px solid #7a2838;
  flex-direction: row; flex-wrap: wrap; gap: 6px 14px; align-items: center; justify-content: center; max-width: 92vw;
  transform: translateX(-50%) scale(calc(0.55 + var(--uis) * 0.3)); transform-origin: 50% 100%; }
#death.mini .dead-title { font-size: calc(20px * var(--fs, 1)); letter-spacing: 2px; text-shadow: 2px 2px 0 #300; }
#death.mini #death-place { font-size: calc(15px * var(--fs, 1)); margin: 0; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
#death.mini #death-place div, #death.mini .boss-note { font-size: calc(15px * var(--fs, 1)); margin: 0; }
#death.mini .hint { font-size: calc(12px * var(--fs, 1)); }
#death.mini #btn-death-lobby { font-size: calc(12px * var(--fs, 1)); padding: 3px 8px; margin: 0; }
#death.mini #bosspick { display: none; }

/* v3.9: роль/сложность, случайный герой, MVP, тревога при низком здоровье */
.hero .hdiff { color: #ffd040; letter-spacing: 1px; }
.hero-rand { border-style: dashed !important; }
.hero-rand .rand-ic { width: 30px; height: 40px; flex: none; display: flex; align-items: center; justify-content: center; font-size: calc(28px * var(--fs, 1)); font-weight: 700; color: #c8a0ff; background: #160e20; border: 2px solid #3a2a50; }
.res-mvp { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 4px 0 10px; }
.res-mvp .mvp { background: #160e20; border: 2px solid #3a2a50; padding: 4px 10px; font-size: calc(14px * var(--fs, 1)); }
.res-mvp .mvp b { color: #ffd040; }
#lowhp { position: fixed; inset: 0; pointer-events: none; z-index: 4; opacity: 0; box-shadow: inset 0 0 120px 30px rgba(200,0,30,.75); transition: opacity .2s; }
.death-by { font-size: calc(18px * var(--fs, 1)); margin-top: 6px; color: #ffb0b0; text-shadow: 2px 2px 0 #000; }

/* новый товар на месте купленного */
.scard.fresh { animation: scard-in .45s ease-out; }
@keyframes scard-in { from { transform: scale(.85); opacity: 0; filter: brightness(2); } to { transform: none; opacity: 1; filter: none; } }
/* v4.1: панель способностей как в Dota — рамка с фаской, перезарядка по кругу, «+» над способностью при свободном очке */
.ab { border: 2px solid #4a3f2c; box-shadow: inset 0 0 0 1px #000, inset 0 2px 0 rgba(255,255,255,.08), 0 2px 0 #000; background: #0c0912; overflow: visible; }
.ab img { left: 2px; top: 2px; width: 48px; height: 48px; }
.ab.dash img { left: 2px; top: 2px; width: 40px; height: 40px; }
.ab .cd { left: 2px; top: 2px; right: 2px; bottom: 2px; height: auto !important; background: none; pointer-events: none; }
.ab .key { top: 1px; left: 3px; right: auto; bottom: auto; text-align: left; font-size: calc(10px * var(--fs, 1)); color: #f0e6c8; text-shadow: 1px 1px 0 #000, -1px 0 0 #000; z-index: 2; }
.ab .ch { z-index: 2; top: auto; bottom: 2px; right: 3px; font-size: calc(14px * var(--fs, 1)); }
.ab .pips { top: auto; bottom: -8px; z-index: 2; }
.ab .pips i { width: 6px; height: 4px; }
.ab.locked { border-color: #2c2632; }
.ab.ult { border-color: #6a40a0; }
.ab.ult.ready { box-shadow: inset 0 0 0 1px #000, 0 0 10px #c060ff, 0 2px 0 #000; border-color: #e0a0ff; }
.ab.learn { border-color: #ffd040; animation: dotaLearn 0.9s ease-in-out infinite alternate; }
.ab.learn::after { content: none; display: none; }
@keyframes dotaLearn { from { box-shadow: inset 0 0 0 1px #000, 0 0 4px #ffd040, 0 0 0 1px #7a5a00; } to { box-shadow: inset 0 0 0 1px #000, 0 0 16px #ffd040, 0 0 0 2px #ffe680; } }
.ab .lvup { display: none; position: absolute; left: 50%; top: -30px; transform: translateX(-50%); width: 24px; height: 22px; padding: 0; border: 2px solid #000; background: linear-gradient(#ffe680, #e0a820); color: #2a1800; font: 700 calc(18px * var(--fs, 1))/16px Tiny5, monospace; cursor: pointer; pointer-events: auto; box-shadow: 0 0 8px #ffd040, inset 0 -2px 0 #a07010; animation: lvupBob 0.9s ease-in-out infinite alternate; z-index: 3; }
.ab .lvup:hover { background: linear-gradient(#fff4b0, #ffc838); box-shadow: 0 0 14px #ffe060, inset 0 -2px 0 #a07010; }
.ab.learn .lvup { display: block; }
@keyframes lvupBob { from { transform: translateX(-50%) translateY(0); } to { transform: translateX(-50%) translateY(-3px); } }

/* ===================== v4.2: ПОДГОТОВКА К АРЕНЕ (магазин по центру) ===================== */
#prep { position: fixed; left: 0; top: 0; width: calc(100vw / var(--ps, 1)); height: calc(100vh / var(--ps, 1)); transform: scale(var(--ps, 1)); transform-origin: 0 0; z-index: 31; background: rgba(6,3,10,.82); display: flex; flex-direction: column; padding: 10px 16px; gap: 10px; pointer-events: auto; }
.prep-head { display: flex; align-items: center; gap: 16px; background: rgba(30,18,6,.85); border: 2px solid #ffb030; padding: 6px 14px; box-shadow: 0 0 0 2px #000; }
.prep-l { flex: 1; min-width: 0; }
#prep-ttl { font-size: calc(24px * var(--fs, 1)); color: #ffd040; font-weight: 700; letter-spacing: 1px; text-shadow: 2px 2px 0 #000; }
#prep-sub { font-size: calc(14px * var(--fs, 1)); color: #f0e0c0; }
#prep-timer { font-size: calc(42px * var(--fs, 1)); color: #fff; min-width: 2.2em; text-align: center; text-shadow: 3px 3px 0 #000; }
#prep-timer.hot { color: #ff5050; animation: arpulse .5s infinite alternate; }
.prep-r { flex: 1; display: flex; align-items: center; justify-content: flex-end; gap: 12px; }
#prep-ready-info { color: #d8c8a8; font-size: calc(14px * var(--fs, 1)); }
#prep-ready.on { background: #1e4a28; border-color: #5fe36a; color: #b8ffc0; }
/* v5.1b: кто готов, а кто ещё выбирает */
#prep-who { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; font-size: calc(13px * var(--fs, 1)); }
#prep-who:empty { display: none; }
#prep-who .pw { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; background: rgba(20,12,8,.88); border: 2px solid #5a4630; box-shadow: 0 0 0 1px #000; color: #e0d0b0; white-space: nowrap; }
#prep-who .pw i { width: 9px; height: 9px; display: inline-block; box-shadow: 0 0 0 1px #000; }
#prep-who .pw.ok { border-color: #3f9a4a; color: #b8ffc0; }
#prep-who .pw.wait { border-color: #c09030; color: #ffe090; animation: pwblink 1s infinite alternate; }
#prep-who .pw.me { outline: 1px dashed #fff; }
#prep-who .pw b { font-weight: 700; }
@keyframes pwblink { from { opacity: 1; } to { opacity: .65; } }
#prep.collapsed #prep-who { pointer-events: none; }
#prep-body { flex: 1; min-height: 0; display: flex; justify-content: center; align-items: flex-start; }
#prep #shop { position: relative; left: auto; top: auto; transform: none; width: min(1180px, 100%); max-height: 100%; overflow: auto; z-index: auto; box-shadow: none; }
#prep #shop-timer, #prep #shop-ready, #prep #shop-ready-info { display: none; }
#prep .shop-foot { justify-content: flex-start; }
.shop-bonus { font-size: calc(13px * var(--fs, 1)); color: #8fff9a; border: 1px solid #3f8a48; padding: 1px 5px; margin-right: 6px; }

/* v4.3: меню крупнее — в лобби все шрифты ×--lf (через --fsl), карточки и иконки героев больше */
#lobby { --fs: var(--fsl, 1.3); font-size: calc(12px * var(--fs, 1)); }
.slot .sn { font-size: calc(13px * var(--fs, 1)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.lobby-wrap { width: min(calc(1320px * var(--lf, 1)), 97vw); }
#heroes { gap: calc(6px * var(--lf, 1)); }
.hero { padding: calc(4px * var(--lf, 1)) calc(7px * var(--lf, 1)) !important; gap: calc(8px * var(--lf, 1)) !important; }
.hero canvas { width: calc(33px * var(--lf, 1)) !important; height: calc(44px * var(--lf, 1)) !important; }
.hero-rand .rand-ic { width: calc(33px * var(--lf, 1)); height: calc(44px * var(--lf, 1)); }
.bld img { width: calc(30px * var(--lf, 1)); height: calc(30px * var(--lf, 1)); }
.slot { min-height: calc(42px * var(--lf, 1)); padding: calc(6px * var(--lf, 1)) calc(9px * var(--lf, 1)); }
.slot .dot { width: calc(13px * var(--lf, 1)); height: calc(13px * var(--lf, 1)); }
.slot select { font-size: calc(13px * var(--fs, 1)); padding: 2px; }
:is(#hero-detail, #dr-detail) .hd-top canvas { width: calc(48px * var(--lf, 1)); height: calc(64px * var(--lf, 1)); }
:is(#hero-detail, #dr-detail) .hd-ab img { width: calc(34px * var(--lf, 1)); height: calc(34px * var(--lf, 1)); }
.panel.wide { width: min(1280px, 95vw); }
/* v4.5: на арене дерутся все — полоски здоровья переносятся на вторую строку */
#arenabar .ar-hp { flex-wrap: wrap; max-width: 660px; margin-left: auto; margin-right: auto; row-gap: 3px; }
/* v4.5: первую секунду магазин не нажимается (антимиссклик) */
#shop.lock .scard, #shop.lock button { pointer-events: none; opacity: .55; filter: grayscale(.4); }
#shop.lock .scard { transition: none; }
#shop .scard, #shop button { transition: opacity .25s, filter .25s; }
#prep.lock #prep-ready { pointer-events: none; opacity: .55; }
/* v4.5: таймер до арены — под таймером круга */
#arenainfo { margin-top: 4px; font-size: calc(14px * var(--fs, 1)); background: rgba(30,18,4,.85); padding: 4px; border: 2px solid #8a6a20; color: #ffd040; }
#arenainfo.hot { color: #ff6040; border-color: #ff6040; animation: aipulse .5s infinite alternate; }
@keyframes aipulse { from { opacity: 1; } to { opacity: .6; } }

/* ===== v4.9: смартфон / планшет (body.mobile ставится только на сенсорных устройствах) ===== */
body.mobile { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; }
body.mobile #game, body.mobile #hud { touch-action: none; }
body.mobile #hud > #abilities { position: absolute; right: calc(14px + env(safe-area-inset-right, 0px)); bottom: 14px; transform: scale(var(--mab, 1)); transform-origin: 100% 100%;
  pointer-events: auto; z-index: 12; display: grid; grid-template-columns: 56px 56px 64px; grid-template-areas: "r e q" ". d l"; column-gap: 12px; row-gap: 36px; align-items: end; justify-items: center; }
body.mobile #abilities #ab-r { grid-area: r; } body.mobile #abilities #ab-e { grid-area: e; } body.mobile #abilities #ab-q { grid-area: q; }
body.mobile #abilities #ab-d { grid-area: d; } body.mobile #abilities #ab-l { grid-area: l; }
body.mobile #abilities .ab .lvup::before { content: ''; position: absolute; inset: -9px; } /* 13 окт. 2026: «+» ловит касание с запасом вокруг (пальцем на бегу) */
body.mobile #abilities .ab { pointer-events: auto; touch-action: none; transition: transform .08s, filter .08s; }
body.mobile #abilities .ab.pressed { transform: scale(.9); filter: brightness(1.6); }
body.mobile #abilities .ab .key { font-size: calc(9px * var(--fs, 1)); color: #d8c8f0; }
body.mobile #abilities .ab.dash { width: 56px; height: 56px; margin: 0; }
body.mobile #abilities .ab.dash img { left: 8px; top: 6px; width: 36px; height: 36px; }
body.mobile #abilities .ab#ab-l { width: 64px; height: 64px; }
body.mobile #abilities .ab#ab-l img { left: 12px; top: 8px; width: 40px; height: 40px; }
body.mobile #botleft, body.mobile #minimap { pointer-events: auto; }
body.mobile #prompt { pointer-events: auto; }
body.mobile #prompt .pk::after { content: ' ✋'; }
body.mobile .panel { max-height: 94vh; overflow-y: auto; }
body.mobile #shop { max-height: 80vh; overflow-y: auto; }
#t-stick { position: fixed; width: 108px; height: 108px; margin: -54px 0 0 -54px; border-radius: 50%; border: 2px solid rgba(255,255,255,.35); background: rgba(255,255,255,.07);
  pointer-events: none; z-index: 15; box-shadow: 0 0 0 2px rgba(0,0,0,.35); }
#t-stick i { position: absolute; left: 50%; top: 50%; width: 48px; height: 48px; margin: -24px 0 0 -24px; border-radius: 50%; background: rgba(255,214,110,.55); border: 2px solid rgba(0,0,0,.5); }
#t-spec { position: absolute; left: 50%; top: 56%; transform: translateX(-50%); display: flex; gap: 14px; align-items: center; color: #d8c8f0; font-size: calc(13px * var(--fs, 1)); text-shadow: 1px 1px 0 #000; }
body.mobile #hud > #t-spec { pointer-events: auto; }
#t-spec .btn { font-size: 26px; width: 58px; height: 46px; padding: 0; pointer-events: auto; }
#t-rotate { position: fixed; inset: 0; z-index: 90; background: rgba(8,4,14,.94); color: #ffd040; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  font-size: 18px; text-align: center; padding: 20px; }
#t-rotate div { font-size: 64px; animation: tRot 1.6s ease-in-out infinite; }
@keyframes tRot { 0%, 30% { transform: rotate(0); } 60%, 100% { transform: rotate(90deg); } }
/* 13 окт. 2026: iPhone в Safari — подсказка «на экран „Домой“» в главном меню (js/touch.js; нажатие — закрыть) */
#t-home { position: absolute; left: 50%; bottom: calc(10px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 4; width: max-content; max-width: calc(100vw - 32px);
  padding: 8px 14px; background: rgba(8,4,14,.9); border: 1px solid rgba(217,180,106,.55); color: #f2e6c8; font: 600 14px/1.35 var(--f-text, sans-serif); text-align: center; cursor: pointer; }
#t-home.hidden { display: none; }

/* v5.0: дуэль у доски (ульта Зубрилы) — панель с примером и 3 вариантами ответа. Ниже центра экрана: парты и доска (над героями) видны */
#quiz { position: fixed; left: 50%; top: 52%; transform: translateX(-50%) scale(calc(0.8 + var(--uis, 1) * 0.2)); transform-origin: 50% 0; z-index: 26; width: 460px; background: rgba(14,9,20,.96); border: 2px solid #9ae04a; box-shadow: 0 0 0 2px #000, 0 10px 30px rgba(0,0,0,.7); padding: 8px 10px 10px; text-align: center; pointer-events: auto; touch-action: none; }
#quiz .qz-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; color: #9ae04a; font-size: calc(16px * var(--fs, 1)); letter-spacing: 1px; white-space: nowrap; }
#quiz .qz-score { color: var(--text); font-size: calc(14px * var(--fs, 1)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
#quiz .qz-score i { font-style: normal; color: #ffe060; font-size: calc(20px * var(--fs, 1)); }
#quiz .qz-foename { color: var(--dim); }
#quiz .qz-danger { color: #ff6060; }
#quiz .qz-res b { padding: 0 10px; text-align: center; }
#quiz .qz-res span { padding: 0 10px; text-align: center; }
#quiz .qz-time { height: 6px; background: #2a2030; margin: 6px 0 8px; border: 1px solid #000; }
#quiz .qz-time i { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, #6ad040, #c8f070); }
#quiz .qz-time i.low { background: linear-gradient(90deg, #ff6040, #ffb060); }
#quiz .qz-board { display: flex; align-items: center; justify-content: center; gap: 10px; background: #1e4a32; border: 4px solid #8a5a30; box-shadow: inset 0 0 0 2px #0e2a1a; color: #f4f2e6; font-size: calc(36px * var(--fs, 1)); padding: 8px 6px; white-space: nowrap; }
#quiz .qz-in { display: inline-block; min-width: 1.7em; border-bottom: 3px solid #f4f2e6; color: #ffe060; }
#quiz .qz-in.empty { color: rgba(244,242,230,.35); animation: qzBlink 1s steps(2) infinite; }
@keyframes qzBlink { 50% { opacity: .4; } }
#quiz .qz-mark { height: 20px; margin: 4px 0 2px; font-size: calc(15px * var(--fs, 1)); }
#quiz .qz-mark.good { color: #9ae04a; }
#quiz .qz-mark.bad { color: #ff7060; }
#quiz.flash-good .qz-board { animation: qzGood .35s; }
#quiz.flash-bad .qz-board { animation: qzBad .3s; }
@keyframes qzGood { 0% { box-shadow: inset 0 0 0 2px #0e2a1a, 0 0 22px #9ae04a; border-color: #9ae04a; } }
@keyframes qzBad { 0%, 50% { transform: translateX(-5px); border-color: #ff6040; } 25%, 75% { transform: translateX(5px); } }
#quiz .qz-opts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
#quiz .qz-o { position: relative; font-size: calc(28px * var(--fs, 1)); padding: 8px 0 6px; min-height: 52px; background: #2a2034; border-color: #6a5a80; }
#quiz .qz-o:hover { border-color: #9ae04a; }
#quiz .qz-o small { position: absolute; left: 6px; top: 3px; font-size: calc(11px * var(--fs, 1)); color: var(--dim); }
#quiz .qz-o.chosen { background: #50206e; border-color: #c060ff; }
#quiz.penalty .qz-o { opacity: .35; filter: grayscale(1); cursor: not-allowed; }
#quiz .qz-hint { color: var(--dim); font-size: calc(11px * var(--fs, 1)); margin-top: 6px; line-height: 1.25; }
#quiz .qz-res { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; background: rgba(10,6,14,.92); font-size: calc(26px * var(--fs, 1)); }
#quiz .qz-res span { font-size: calc(14px * var(--fs, 1)); color: var(--dim); }
#quiz .qz-res.win b { color: #9ae04a; }
#quiz .qz-res.lose b { color: #ff6060; }
#quiz .qz-res.tie b { color: #ffe060; }
#quiz.won { border-color: #9ae04a; }
#quiz.lost { border-color: #ff6060; }
/* телефон: справа (под большой палец) */
body.mobile #quiz { left: auto; right: 8px; top: 8px; transform: none; width: min(320px, 46vw); max-height: calc(100vh - 16px); overflow: hidden; padding: 6px 8px 8px; }
body.mobile #quiz .qz-board { font-size: 28px; padding: 6px 4px; }
body.mobile #quiz .qz-time { margin: 4px 0 6px; }
body.mobile #quiz .qz-mark { height: 16px; margin: 2px 0; font-size: 13px; }
body.mobile #quiz .qz-o { font-size: 26px; min-height: 64px; }
body.mobile #quiz .qz-hint { display: none; }

/* v5.1: 10 уровней у ЛКМ/ПКМ/E — точки уже */
.ab .pips.p10 { gap: 1px; }
.ab .pips.p10 i { width: 3px; height: 4px; }

/* v5.1: магазин подготовки можно свернуть — видно HUD, способности и билд (время закупки идёт) */
#prep.collapsed { background: none; pointer-events: none; height: auto; }
#prep.collapsed .prep-head { pointer-events: auto; }
#prep.collapsed #prep-body { display: none; }
#build { z-index: 33; } /* билд — поверх экрана подготовки */
#prep-hide.on { background: #4a3a10; border-color: #ffd040; color: #fff2b0; }
/* v5.1: панель наблюдателя — за кем смотрите, переключение и его билд */
#specbar { position: fixed; left: 50%; top: 8px; transform: translateX(-50%); z-index: 34; display: flex; align-items: center; gap: 8px; background: rgba(16,10,24,.9); border: 2px solid #6a5a90; padding: 4px 8px; pointer-events: auto; box-shadow: 0 2px 0 #000; }
#specbar.hidden { display: none; }
#spec-who { font-size: calc(15px * var(--fs, 1)); color: #e8e0ff; white-space: nowrap; }
#specbar .btn { white-space: nowrap; }
#spec-who b { color: #fff; }
/* v5.6: обратный отсчёт перед боем на арене — крупные пиксельные цифры с «вылетом», цвет от золотого к красному, потом «БОЙ!» */
#arenacd { position: absolute; left: 50%; top: 31%; transform: translateX(-50%) scale(var(--uis)); transform-origin: 50% 50%; pointer-events: none; z-index: 6; text-align: center; width: 360px; }
#arenacd .cd-n { display: block; font-size: 112px; line-height: 1; font-weight: 700; letter-spacing: 4px; color: var(--cdc, #ffd040);
  text-shadow: 0 4px 0 #000, 4px 0 0 #000, -4px 0 0 #000, 0 -4px 0 #000, 4px 4px 0 #000, -4px 4px 0 #000, 4px -4px 0 #000, -4px -4px 0 #000, 0 10px 0 rgba(0,0,0,.45), 0 0 26px var(--cdg, rgba(255,200,60,.8));
  animation: cdPop 1s cubic-bezier(.2,.9,.3,1.2) forwards; }
#arenacd .cd-n.fight { font-size: 96px; color: #fff4e0; --cdg: rgba(255,60,40,.95); animation: cdFight 1.1s ease-out forwards; }
#arenacd .cd-s { display: block; margin-top: 10px; font-size: calc(18px * var(--fs, 1)); color: #ffe7b0; text-shadow: 2px 2px 0 #000; letter-spacing: 2px; animation: cdSub 1s ease-out forwards; }
#arenacd .cd-ring { position: absolute; left: 50%; top: 56px; width: 150px; height: 150px; margin: -75px 0 0 -75px; border: 4px solid var(--cdc, #ffd040); border-radius: 50%; opacity: 0; animation: cdRing .9s ease-out forwards; box-shadow: 0 0 18px var(--cdg, rgba(255,200,60,.7)); }
@keyframes cdPop { 0% { transform: scale(2.6); opacity: 0; filter: brightness(2.2); } 18% { transform: scale(0.88); opacity: 1; filter: brightness(1.6); } 30% { transform: scale(1.06); filter: brightness(1); } 42% { transform: scale(1); } 80% { transform: scale(1); opacity: 1; } 100% { transform: scale(0.6) translateY(10px); opacity: 0; } }
@keyframes cdFight { 0% { transform: scale(3) rotate(-6deg); opacity: 0; } 14% { transform: scale(0.9) rotate(2deg); opacity: 1; } 22% { transform: scale(1.12) rotate(-1deg); } 30%, 36%, 42% { transform: scale(1) translateX(-5px); } 33%, 39% { transform: scale(1) translateX(5px); } 70% { transform: scale(1.04); opacity: 1; } 100% { transform: scale(1.7); opacity: 0; } }
@keyframes cdRing { 0% { transform: scale(0.3); opacity: 0.95; } 100% { transform: scale(1.9); opacity: 0; } }
@keyframes cdSub { 0% { opacity: 0; transform: translateY(-6px); } 25% { opacity: 1; transform: none; } 80% { opacity: 1; } 100% { opacity: 0; } }
/* v5.6: чат над мини-картой — Enter открывает строку; старые сообщения прячутся, при открытом чате видна история */
#chat { width: 330px; margin-bottom: 6px; pointer-events: none; }
#chat.open { pointer-events: auto; }
#chatlog { max-height: 150px; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; }
#chat.open #chatlog { overflow-y: auto; background: rgba(10,6,14,.55); }
#chatlog .cm { font-size: calc(13px * var(--fs, 1)); line-height: 1.25; color: #f0eaf8; background: rgba(10,6,14,.62); padding: 2px 6px; margin-top: 2px; text-shadow: 1px 1px 0 #000; word-wrap: break-word; animation: fadein .2s; }
#chatlog .cm b { font-weight: 700; }
#chatlog .cm.sys { color: #a898c0; font-style: italic; }
#chatlog .cm.old { display: none; }
#chat.open #chatlog .cm.old { display: block; opacity: .75; }
#chatin { width: 100%; box-sizing: border-box; margin-top: 4px; font: inherit; font-size: calc(13px * var(--fs, 1)); color: #fff; background: rgba(16,10,24,.92); border: 2px solid var(--gold, #ffd040); padding: 4px 6px; outline: none; }
/* v5.6: колесо чата — круг фраз вокруг курсора (Y), выбранная подсвечена */
#cwheel { position: fixed; z-index: 30; width: 0; height: 0; pointer-events: none; transform: scale(var(--uis, 1)); transform-origin: 0 0; }
#cwheel .cw-hub { position: absolute; left: 0; top: 0; transform: translate(-50%, -50%); width: 86px; height: 86px; border-radius: 50%; display: flex; align-items: center; justify-content: center; text-align: center;
  font-size: 12px; color: #e8dcf8; background: radial-gradient(circle, rgba(40,24,60,.92) 0%, rgba(14,8,22,.88) 70%); border: 2px solid #6a4a9a; box-shadow: 0 0 0 2px #000, 0 0 18px rgba(150,100,255,.35); text-shadow: 1px 1px 0 #000; }
#cwheel .cw-it { position: absolute; transform: translate(-50%, -50%); white-space: nowrap; font-size: 12px; padding: 5px 9px; color: var(--c, #fff); background: rgba(12,7,20,.88); border: 2px solid #3a2a50;
  box-shadow: 0 2px 0 #000; text-shadow: 1px 1px 0 #000; transition: transform .08s, background .08s; }
#cwheel .cw-it.r { transform: translate(-8%, -50%); } #cwheel .cw-it.l { transform: translate(-92%, -50%); }
#cwheel .cw-it.on { background: rgba(60,36,90,.96); border-color: var(--c, #fff); transform: translate(-50%, -50%) scale(1.15); box-shadow: 0 0 12px var(--c, #fff), 0 2px 0 #000; color: #fff; }
#cwheel .cw-it.r.on { transform: translate(-8%, -50%) scale(1.15); } #cwheel .cw-it.l.on { transform: translate(-92%, -50%) scale(1.15); }
#chatlog .cm.cw span { font-weight: 700; }
/* v5.6: пинг, FPS и потери — вверху, слева от кнопки паузы (галочка в настройках) */
#perfinfo { position: absolute; top: 18px; right: calc(58px + 204px * var(--uis) + 46px); z-index: 12; font-size: calc(13px * var(--fs, 1)); color: #d8cce8; background: rgba(10,6,14,.72); padding: 4px 8px; border: 1px solid #2a1e38; text-shadow: 1px 1px 0 #000; white-space: nowrap; pointer-events: none; letter-spacing: .5px; }
#perfinfo b { font-weight: 700; }
/* v5.6: предупреждение «вы во тьме» — над героем, пульсирует; после ×3 — ярко-красное */
#darkwarn { position: absolute; left: 50%; top: 38%; transform: translateX(-50%) scale(calc(0.8 + var(--uis) * 0.2)); transform-origin: 50% 50%; z-index: 7; pointer-events: none; white-space: nowrap;
  font-size: calc(15px * var(--fs, 1)); color: #e8b0ff; background: rgba(30,6,40,.72); border: 2px solid #8a30c0; padding: 3px 10px; text-shadow: 1px 1px 0 #000; animation: dwPulse 0.9s ease-in-out infinite alternate; }
#darkwarn.hot { color: #fff0f0; border-color: #ff3050; background: rgba(60,6,16,.8); animation-duration: .45s; }
@keyframes dwPulse { from { opacity: .75; } to { opacity: 1; } }

/* ---------------- v5.6: главное меню без героев, «Список героев», выбор героев (баны и пики) ---------------- */
.lobby-one { grid-template-columns: 1fr; width: min(calc(760px * var(--lf, 1)), 100%); margin: 0 auto; }
.lobby-top { display: flex; gap: 12px; align-items: flex-end; }
.lobby-top .lt-name { flex: 1; min-width: 0; }
.lobby-top .lt-name .lbl { margin-top: 0; }
#btn-heroes { white-space: nowrap; height: calc(40px * var(--lf, 1)); border-color: #8a60c0; }
#herolist, #draft { --fs: var(--fsl, 1.3); font-size: calc(12px * var(--fs, 1)); }
#herolist { position: fixed; inset: 0; z-index: 28; background: rgba(4,2,8,.78); display: flex; align-items: center; justify-content: center; padding: 12px; }
#herolist .hl-box { width: min(calc(1320px * var(--lf, 1)), 97vw); max-height: 96vh; overflow-y: auto; }
#herolist .hl-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; flex-wrap: wrap; }
#herolist .hl-head b { font-size: calc(20px * var(--fs, 1)); color: var(--gold); letter-spacing: 1px; }
#herolist .hl-head .hint { margin: 0; flex: 1; min-width: 200px; }
#herolist #heroes { grid-template-columns: repeat(auto-fill, minmax(calc(190px * var(--lf, 1)), 1fr)); }
#draft { position: fixed; inset: 0; z-index: 28; display: flex; flex-direction: column; gap: 8px; padding: 10px 16px 12px;
  background: radial-gradient(ellipse at 50% 0%, #3a0d1c 0%, #12070f 55%, #050206 100%); overflow: hidden; }
#draft.pick { background: radial-gradient(ellipse at 50% 0%, #3a2a08 0%, #120c07 55%, #050206 100%); }
#draft .dim { color: var(--dim); }
.dr-head { text-align: center; position: relative; flex: none; }
#dr-title { font-size: calc(54px * var(--fs, 1)); font-weight: 700; letter-spacing: 6px; line-height: 1; color: #fff; }
#dr-title.st-ban { color: #ff4a5a; text-shadow: 0 0 22px #ff0030, 4px 4px 0 #40000c; animation: drpopA .5s ease-out; }
#dr-title.st-pick { color: #ffd040; text-shadow: 0 0 22px #ff9a00, 4px 4px 0 #402800; animation: drpopB .5s ease-out; }
#dr-title.st-done { color: #8fff9a; text-shadow: 0 0 22px #20c040, 4px 4px 0 #003a10; animation: drpopC .5s ease-out; }
@keyframes drpopA { 0% { transform: scale(2.2); opacity: 0; } 70% { transform: scale(.94); opacity: 1; } 100% { transform: scale(1); } }
@keyframes drpopB { 0% { transform: scale(2.2); opacity: 0; } 70% { transform: scale(.94); opacity: 1; } 100% { transform: scale(1); } }
@keyframes drpopC { 0% { transform: scale(2.2); opacity: 0; } 70% { transform: scale(.94); opacity: 1; } 100% { transform: scale(1); } }
#dr-timer { position: absolute; right: 8px; top: 0; min-width: calc(64px * var(--fs, 1)); padding: 2px 10px; font-size: calc(40px * var(--fs, 1)); font-weight: 700; color: #fff;
  border: 3px solid #6a4a8a; background: rgba(0,0,0,.5); box-shadow: 0 2px 0 #000; }
#dr-timer:empty { display: none; }
#dr-timer.warn { color: #ff5050; border-color: #ff5050; animation: drwarn .5s steps(2) infinite; }
@keyframes drwarn { 50% { color: #fff; } }
#dr-sub { margin-top: 6px; font-size: calc(15px * var(--fs, 1)); color: #e8dcf4; min-height: 1.3em; }
#dr-sub .you { color: #ff4a5a; font-weight: 700; animation: drwarn .6s steps(2) infinite; }
#dr-players { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; flex: none; }
#dr-players .dp { background: rgba(16,10,24,.88); border: 2px solid #2e2240; border-left: 5px solid var(--pc); padding: 3px 8px 4px; min-width: calc(150px * var(--lf, 1)); }
#dr-players .dp.turn { border-color: #ff4a5a; border-left-color: var(--pc); box-shadow: 0 0 12px rgba(255,60,80,.5); }
#dr-players .dp.me { background: rgba(40,28,10,.9); }
#dr-players .dp-name { font-size: calc(12px * var(--fs, 1)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: calc(200px * var(--lf, 1)); }
#dr-players .dp-tm { font-size: calc(11px * var(--fs, 1)); }
#dr-players .dp-row { display: flex; align-items: center; gap: 6px; margin-top: 2px; min-height: calc(32px * var(--lf, 1)); }
#dr-players .dp-ban { position: relative; width: calc(22px * var(--lf, 1)); height: calc(29px * var(--lf, 1)); flex: none; border: 1px solid #5a1a24; background: #12060a; display: flex; align-items: center; justify-content: center; color: #ff4a5a; }
#dr-players .dp-ban img { width: 100%; height: 100%; image-rendering: pixelated; filter: grayscale(1) brightness(.6); }
#dr-players .dp-ban:not(.empty)::after { content: ''; position: absolute; inset: 0; background: linear-gradient(45deg, transparent 44%, #ff3040 44%, #ff3040 56%, transparent 56%); }
#dr-players .dp-pick { width: calc(24px * var(--lf, 1)); height: calc(32px * var(--lf, 1)); image-rendering: pixelated; flex: none; }
#dr-players .dp-hn { font-size: calc(12px * var(--fs, 1)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#dr-grid { flex: 1 1 auto; min-height: 0; overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(calc(112px * var(--lf, 1)), 1fr)); gap: 6px; align-content: start; padding: 2px; }
.dcard { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 5px 4px 4px; background: var(--panel2); border: 2px solid var(--line); cursor: pointer; min-width: 0; }
.dcard:not(.off):hover { border-color: var(--hc); box-shadow: 0 0 10px color-mix(in srgb, var(--hc) 45%, transparent); }
.dcard img { width: calc(36px * var(--lf, 1)); height: calc(48px * var(--lf, 1)); image-rendering: pixelated; }
.dcard .dn { font-size: calc(13px * var(--fs, 1)); font-weight: 700; line-height: 1.05; margin-top: 3px; overflow-wrap: anywhere; }
.dcard .dn.long { font-size: calc(11px * var(--fs, 1)); }
.dcard .dr { font-size: calc(10px * var(--fs, 1)); color: #a090b8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.dcard .dw { font-size: calc(10px * var(--fs, 1)); color: var(--pc); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; min-height: 0; }
.dcard .dw:empty { display: none; }
.dcard.off { cursor: default; }
.dcard.sel { border-color: var(--gold); box-shadow: 0 0 14px rgba(255,208,64,.55); background: #2e2410; }
.dcard.taken { border-color: var(--pc); opacity: .62; }
.dcard.taken.mine { opacity: 1; box-shadow: 0 0 16px var(--pc); }
.dcard.ban { opacity: .45; }
.dcard.ban img, .dcard.ban .dn { filter: grayscale(1); }
.dcard .dx { display: none; }
.dcard.ban .dx { display: block; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(45deg, transparent 46%, #ff3040 46%, #ff3040 54%, transparent 54%), linear-gradient(-45deg, transparent 46%, #ff3040 46%, #ff3040 54%, transparent 54%); }
.dr-foot { flex: none; display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: stretch; }
#dr-detail { margin: 0; max-height: 30vh; overflow-y: auto; padding: 6px 10px; }
.dr-act { display: flex; flex-direction: column; gap: 6px; justify-content: center; min-width: calc(240px * var(--lf, 1)); }
#dr-go { white-space: normal; }
#dr-go.ban { background: #50101c; border-color: #ff3a50; }
#dr-go.ban:hover { background: #701828; }
#dr-go:disabled { opacity: .5; cursor: default; }
@media (max-width: 900px), (max-height: 600px) {
  #draft { padding: 6px; gap: 5px; overflow-y: auto; }
  #dr-title { font-size: calc(30px * var(--fs, 1)); letter-spacing: 3px; }
  #dr-timer { font-size: calc(24px * var(--fs, 1)); min-width: 0; }
  #dr-grid { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); flex: none; overflow: visible; }
  .dr-foot { grid-template-columns: 1fr; }
  #dr-detail { max-height: none; }
  .lobby-top { flex-wrap: wrap; }
}

/* =====================================================================================================================
   v5.7: «КУЗНЯ БЕЗДНЫ» — новый вид всего интерфейса (правила — tools/art/UI_BRIEF.md).
   Рамки, фактура, иконки и курсоры рисует public/js/uiart.js (CSS-переменные --fr-*, --tex-*, --ic-*, --cur-*);
   пока модуль не отработал (нет класса html.uiart) — остаются простые CSS-рамки ниже.
   ===================================================================================================================== */
/* ---- основа ---- */
body { color: var(--text); }
html.uiart body { cursor: var(--cur-arrow); }
html.uiart :is(button, .btn, a, label, select, summary, .hero, .dcard, .scard, .card, .bpc, .swatch, .x, [data-kick], [data-team], .tm, .hbtn, input[type=range], input[type=checkbox], .close, .acc-tab) { cursor: var(--cur-hand); }
html.uiart :is(input[type=text], input:not([type]), input[type=password], textarea) { cursor: text; }
#game-ui { position: fixed; left: 0; top: 0; pointer-events: none; z-index: 3; }
img.ic { width: 24px; height: 24px; image-rendering: pixelated; vertical-align: middle; flex: none; pointer-events: none; }
:is(.tag, .rate-tag, #chatlog, .sh, #specs, #build-ttl, .acc-ok, .slot .sn, #spec-who, .st-table) img.ic { width: 12px; height: 12px; margin: 0 3px 0 0; vertical-align: -1px; }
.hint { color: var(--text-2); font-size: calc(13px * var(--fs, 1)); line-height: 1.4; }
.lbl { font-family: var(--f-display); font-weight: 600; color: var(--brass); font-size: calc(12px * var(--fs, 1)); letter-spacing: 1.5px; text-transform: uppercase; margin: 8px 0 6px; }
::selection { background: rgba(240,191,76,.35); }
/* полосы прокрутки — тонкие, в цвет */
* { scrollbar-width: thin; scrollbar-color: var(--stone-5) var(--ink); }
::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: var(--ink); }
::-webkit-scrollbar-thumb { background: var(--stone-5); border: 2px solid var(--ink); } ::-webkit-scrollbar-thumb:hover { background: var(--iron); }

/* ---- панели ---- */
.panel { background: var(--stone-8); border: 2px solid var(--stone-6); box-shadow: 0 0 0 2px var(--ink), 0 8px 0 rgba(0,0,0,.4); padding: 12px 14px; }
html.uiart .panel { border: 12px solid transparent; border-image: var(--fr-panel) 12 / 12px / 0 stretch; background: var(--tex-stone) 0 0 / 128px 128px repeat, var(--stone-8); box-shadow: 0 8px 0 rgba(0,0,0,.42); padding: 6px 10px 10px; }
html.uiart .panel.panel-gold { border-image: var(--fr-gold) 12 / 12px / 0 stretch; }
.mhead { font-family: var(--f-display); font-weight: 700; font-size: calc(22px * var(--fs, 1)); color: var(--gold-hi); letter-spacing: 1px; text-shadow: 0 3px 0 var(--ink); align-items: center; padding: 2px 0 14px; margin-bottom: 8px; }
html.uiart .mhead { background: var(--orn) center bottom / 58px 12px no-repeat; }
.close { font-size: 0 !important; width: 30px; height: 30px; flex: none; background: #2b2532; border: 2px solid var(--ink); box-shadow: inset 0 2px 0 rgba(255,255,255,.1), inset 0 -2px 0 rgba(0,0,0,.35), 0 2px 0 var(--ink); position: relative; }
.close::before { content: '×'; font-size: 22px; color: var(--text-2); position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; line-height: 1; }
html.uiart .close::before { content: ''; background: var(--ic-close) center / 24px 24px no-repeat; image-rendering: pixelated; }
.close:hover { background: #3a2a2c; }
.modal { background: rgba(6,5,9,.76); }

/* ---- кнопки: выпуклая плита с фаской, нажатие — вдавливается ---- */
.btn { font-family: var(--f-display); font-weight: 600; font-size: calc(15px * var(--fs, 1)); letter-spacing: .5px; color: var(--text);
  background: linear-gradient(#3b3445 0 50%, #322c3b 50% 100%); border: 2px solid var(--ink); padding: 7px 14px;
  box-shadow: inset 0 2px 0 rgba(255,255,255,.13), inset 0 -3px 0 rgba(0,0,0,.35), 0 3px 0 var(--ink); text-shadow: 0 2px 0 rgba(0,0,0,.55);
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; transition: filter 80ms, transform 80ms; line-height: 1.15; }
.btn:hover { border-color: var(--ink); color: #fff; filter: brightness(1.18); box-shadow: inset 0 2px 0 rgba(255,255,255,.16), inset 0 -3px 0 rgba(0,0,0,.35), inset 0 0 0 1px rgba(240,191,76,.55), 0 3px 0 var(--ink); }
.btn:active:not(:disabled) { transform: translateY(2px); box-shadow: inset 0 3px 0 rgba(0,0,0,.4), 0 1px 0 var(--ink); }
.btn:disabled { filter: grayscale(.8) brightness(.7); cursor: default; }
.btn img.ic { margin: -6px 0; }
.btn.sm { font-size: calc(13px * var(--fs, 1)); padding: 4px 10px; gap: 6px; }
.btn.big { font-size: calc(19px * var(--fs, 1)); font-weight: 700; letter-spacing: 1.5px; padding: 10px 22px; color: #2a1a04; text-shadow: 0 1px 0 rgba(255,240,200,.55);
  background: linear-gradient(#ffd772 0 45%, #eeb03e 45% 100%); border-color: var(--ink); box-shadow: inset 0 2px 0 #fff0b8, inset 0 -4px 0 #a8701e, 0 4px 0 var(--ink); }
.btn.big:hover { background: linear-gradient(#ffe08a 0 45%, #f6bd4e 45% 100%); color: #1a1002; box-shadow: inset 0 2px 0 #fff6d0, inset 0 -4px 0 #a8701e, 0 4px 0 var(--ink); }
.btn.red, .btn.big.red { color: #fff2ee; text-shadow: 0 2px 0 rgba(0,0,0,.5); background: linear-gradient(#c43a40 0 50%, #a62a31 50% 100%); box-shadow: inset 0 2px 0 rgba(255,180,170,.35), inset 0 -3px 0 #5a1014, 0 3px 0 var(--ink); }
.btn.on { color: var(--gold-hi); background: linear-gradient(#4a3a1c 0 50%, #3c2f16 50% 100%); box-shadow: inset 0 2px 0 rgba(255,224,138,.25), inset 0 -3px 0 rgba(0,0,0,.35), inset 0 0 0 1px var(--gold), 0 3px 0 var(--ink); }
.gear { width: 40px; height: 40px; font-size: calc(20px * var(--fs, 1)); line-height: 1; padding: 0; display: flex; align-items: center; justify-content: center; color: var(--text);
  background: linear-gradient(#3b3445 0 50%, #322c3b 50% 100%); border: 2px solid var(--ink); box-shadow: inset 0 2px 0 rgba(255,255,255,.13), inset 0 -3px 0 rgba(0,0,0,.35), 0 3px 0 var(--ink); }
.gear:hover { filter: brightness(1.2); border-color: var(--ink); }
.hud-pause { right: calc(62px + 204px * var(--uis)); }

/* ---- поля ввода ---- */
input#name, #chatin, .acc-in, .h-line input { font-family: var(--f-text); font-weight: 500; color: var(--text); background: var(--ink); border: 2px solid var(--stone-6); box-shadow: inset 0 3px 0 rgba(0,0,0,.6); outline: none; }
input#name { font-size: calc(18px * var(--fs, 1)); padding: 8px 12px; }
input#name:focus, #chatin:focus, .acc-in:focus, .h-line input:focus { border-color: var(--gold); }
input#name.locked { color: var(--gold-hi); border-color: #3f6a3a; }
html.uiart input[type=range] { -webkit-appearance: none; appearance: none; height: 12px; background: var(--ink); border: 2px solid var(--ink); box-shadow: inset 0 0 0 1px var(--stone-6), inset 0 3px 0 rgba(0,0,0,.5); padding: 0; }
html.uiart input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 22px; background: linear-gradient(#ffe08a 0 35%, #f0bf4c 35% 75%, #8a5c1a 75%); border: 2px solid var(--ink); box-shadow: 0 2px 0 var(--ink); }
html.uiart input[type=range]::-moz-range-thumb { width: 10px; height: 18px; border-radius: 0; background: linear-gradient(#ffe08a 0 35%, #f0bf4c 35% 75%, #8a5c1a 75%); border: 2px solid var(--ink); }
input[type=checkbox] { accent-color: var(--gold); width: 18px; height: 18px; vertical-align: middle; }

/* ---- ГЛАВНОЕ МЕНЮ ---- */
#lobby { background: radial-gradient(ellipse 80% 60% at 18% 12%, rgba(240,150,60,.10), transparent 60%), radial-gradient(ellipse 70% 70% at 85% 90%, rgba(180,108,255,.07), transparent 60%), var(--stone-9); }
.lobby-wrap { width: min(calc(1340px * var(--lf, 1)), 96vw); min-width: 900px; padding: 18px 0; }
.lobby-grid { display: grid; grid-template-columns: minmax(300px, .82fr) 1.4fr; gap: calc(22px * var(--lf, 1)); align-items: start; }
.lobby-side { display: flex; flex-direction: column; gap: calc(14px * var(--lf, 1)); min-width: 0; }
.lobby-side .title { text-align: left; margin: 4px 0 2px; }
.title .t1 { font-family: var(--f-display); font-weight: 600; font-size: calc(24px * var(--fs, 1)); letter-spacing: 9px; color: var(--brass); text-shadow: 0 3px 0 var(--ink); }
.title .t2 { font-family: var(--f-display); font-weight: 700; font-size: calc(80px * var(--fs, 1)); letter-spacing: 5px; line-height: .92; color: var(--gold-hi);
  background: linear-gradient(#fff3c4 0 28%, #ffd772 28% 52%, #e9a63a 52% 76%, #b86a1e 76% 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 4px 0 #5a2e0a) drop-shadow(0 4px 0 var(--ink)); text-shadow: none; }
.title .sub { font-family: var(--f-text); color: var(--text-2); font-size: calc(13px * var(--fs, 1)); margin-top: 10px; line-height: 1.45; }
@media (max-height: 1200px) { .title .t1 { font-size: calc(20px * var(--fs, 1)); } .title .t2 { font-size: calc(64px * var(--fs, 1)); } }
.side-card .lt-name .lbl { margin-top: 2px; }
.side-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.side-nav .btn { justify-content: flex-start; padding: 9px 12px; }
.lobby-side .controls { margin: 0; font-size: calc(12px * var(--fs, 1)); line-height: 1.55; color: var(--text-3); background: rgba(9,8,12,.55); border: 2px solid var(--ink); box-shadow: inset 0 0 0 1px var(--stone-7); padding: 8px 10px; }
.lobby-side .controls b { color: var(--text-2); font-weight: 600; }
.lobby-main { min-width: 0; }
.lm-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 2px 2px 12px; margin-bottom: 8px; }
html.uiart .lm-head { background: var(--orn) left bottom / 58px 12px no-repeat; }
.lm-ttl { font-family: var(--f-display); font-weight: 700; font-size: calc(22px * var(--fs, 1)); color: var(--gold-hi); text-shadow: 0 3px 0 var(--ink); letter-spacing: 1px; }
.lm-cnt { font-family: var(--f-display); color: var(--text-2); font-size: calc(13px * var(--fs, 1)); }
#slots { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.slot { margin: 0; min-height: calc(44px * var(--lf, 1)); padding: 6px 10px; gap: 8px; background: linear-gradient(90deg, rgba(255,255,255,.035), transparent 40%), var(--stone-9); border: 2px solid var(--ink); box-shadow: inset 0 0 0 1px var(--stone-7), inset 4px 0 0 var(--pc, transparent); }
.slot .dot { width: 14px; height: 14px; border: 2px solid var(--ink); box-shadow: inset 0 2px 0 rgba(255,255,255,.35); }
.slot.empty .dot { background: transparent; border: 2px dashed var(--stone-6); box-shadow: none; }
.slot .sn { font-weight: 500; font-size: calc(14px * var(--fs, 1)); color: var(--text); display: flex; align-items: center; gap: 4px; }
.slot .sn .you { font-family: var(--f-display); font-size: calc(11px * var(--fs, 1)); color: #1a1002; background: var(--gold); padding: 0 5px; margin-left: 4px; box-shadow: 0 0 0 1px var(--ink); }
.slot.me { background: linear-gradient(90deg, rgba(240,191,76,.12), transparent 60%), var(--stone-9); box-shadow: inset 0 0 0 1px #6a4f1c, inset 4px 0 0 var(--pc, transparent); }
.slot.empty { background: rgba(9,8,12,.4); box-shadow: inset 0 0 0 1px var(--stone-7); }
.slot.empty .sn { color: var(--text-3); font-style: italic; }
.slot .tag { font-family: var(--f-display); font-weight: 600; font-size: calc(11px * var(--fs, 1)); letter-spacing: .5px; padding: 1px 6px; border: 0; color: var(--text-2); background: var(--stone-7); box-shadow: 0 0 0 1px var(--ink); white-space: nowrap; display: inline-flex; align-items: center; }
.slot .tag.host { color: var(--gold-hi); background: #3a2c10; }
.slot .tag.bot { color: #9ec8ff; background: #1a2638; }
.slot .tag.ready, .tag.ready { color: #c8ffc0 !important; background: #1d3a20; }
.slot .tag.wait { color: var(--text-3); background: transparent; box-shadow: none; font-weight: 500; }
.slot .x { background: none; border: 0; padding: 0 2px; display: flex; } .slot .x:hover { filter: brightness(1.4); }
.rate-tag { font-family: var(--f-display); font-size: calc(11px * var(--fs, 1)); margin-left: 6px; display: inline-flex; align-items: center; }
.acc-ok { display: inline-flex; margin-left: 2px; }
.slot .tm { font-family: var(--f-display); font-size: calc(11px * var(--fs, 1)); background: var(--ink); }
#settings { margin-top: 10px; background: rgba(9,8,12,.55); border: 2px solid var(--ink); box-shadow: inset 0 0 0 1px var(--stone-7); padding: 10px; }
.set-row > span:first-child { font-family: var(--f-display); font-weight: 600; color: var(--brass); font-size: calc(12px * var(--fs, 1)); letter-spacing: 1px; text-transform: uppercase; min-width: calc(74px * var(--fs, 1)); }
#set-info { margin-top: 4px; }
.ready-row { gap: 8px; margin-top: 10px; }
.ready-btn { margin: 0; font-size: calc(22px * var(--fs, 1)) !important; padding: 12px 22px !important; }
.ready-row .spec-btn { margin: 0; }
.ready-btn.on { color: #e8ffe4; text-shadow: 0 2px 0 rgba(0,0,0,.5); background: linear-gradient(#4aa857 0 45%, #348a42 45% 100%); box-shadow: inset 0 2px 0 #a8f0a0, inset 0 -4px 0 #1d5226, 0 4px 0 var(--ink); }
.ready-row .spec-btn.on { color: var(--heal); }
#host-ctrl { gap: 8px; margin: 10px 0 4px; }
#host-ctrl #btn-start { flex: 1; }
#wait-host { margin: 10px 0 2px; font-family: var(--f-display); color: var(--text-2); }
.addr-box { margin-top: 10px; padding-top: 8px; border-top: 2px solid var(--ink); box-shadow: 0 -1px 0 var(--stone-7); }
.addr-box .lbl { margin-top: 2px; }
#addrs { font-family: var(--f-display); font-size: calc(16px * var(--fs, 1)); color: #9ef5b0; }
#specs { margin: 8px 0 0; display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
@media (max-width: 700px) and (orientation: portrait) {
  .lobby-wrap { min-width: 0; }
  .lobby-grid { grid-template-columns: 1fr; }
  .lobby-side .title { text-align: center; }
  #slots { grid-template-columns: 1fr; }
}

/* вход и регистрация (account.js) */
.acc-box { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.acc-box:empty { display: none; }
.acc-box .btn { flex: 1; }
.acc-box.in { justify-content: space-between; padding: 6px 8px; background: rgba(63,106,58,.18); border: 2px solid var(--ink); box-shadow: inset 0 0 0 1px #3f6a3a; }
.acc-who { font-size: calc(13px * var(--fs, 1)); color: var(--text-2); } .acc-who b { color: #c8ffc0; font-weight: 600; }
.acc-panel { width: min(420px, 94vw); }
.acc-tabs { display: flex; gap: 6px; margin: 4px 0 10px; }
.acc-tabs .acc-tab { flex: 1; }
.acc-form { display: flex; flex-direction: column; gap: 2px; }
.acc-in { font-size: calc(16px * var(--fs, 1)); padding: 8px 10px; width: 100%; }
.acc-err { min-height: 1.3em; color: #ff8a80; font-size: calc(13px * var(--fs, 1)); margin-top: 6px; }
.acc-go { margin-top: 8px; }

/* ---- СПИСОК ГЕРОЕВ ---- */
#herolist { background: rgba(6,5,9,.8); }
#herolist .hl-head b { font-family: var(--f-display); color: var(--gold-hi); font-size: calc(22px * var(--fs, 1)); text-shadow: 0 3px 0 var(--ink); }
.hero { background: linear-gradient(rgba(255,255,255,.03), transparent), var(--stone-9); border: 2px solid var(--ink); box-shadow: inset 0 0 0 1px var(--stone-7), 0 2px 0 rgba(0,0,0,.4); }
.hero:hover { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--stone-5), 0 2px 0 rgba(0,0,0,.4); filter: brightness(1.12); }
.hero.sel { border-color: var(--ink); box-shadow: inset 0 0 0 2px var(--gold), 0 0 0 1px var(--gold-lo); background: linear-gradient(rgba(240,191,76,.1), transparent), var(--stone-9); }
.hero .hn { font-family: var(--f-display); font-weight: 700; text-shadow: 0 2px 0 var(--ink); }
.hero .hstat { color: var(--text-3); font-family: var(--f-text); }
:is(#hero-detail, #dr-detail) { border: 2px solid var(--ink) !important; border-image: none !important; background: rgba(9,8,12,.6) !important; box-shadow: inset 0 0 0 1px var(--stone-7), inset 4px 0 0 var(--hc, var(--gold)) !important; padding: 10px 12px 10px 16px !important; }
:is(#hero-detail, #dr-detail) .hd-name { font-family: var(--f-display); font-size: calc(22px * var(--fs, 1)); text-shadow: 0 2px 0 var(--ink); }
:is(#hero-detail, #dr-detail) .hd-desc, :is(#hero-detail, #dr-detail) .hd-ad { color: var(--text); }
:is(#hero-detail, #dr-detail) .hd-stats { color: var(--text-2); }
:is(#hero-detail, #dr-detail) .hd-an { font-family: var(--f-display); font-weight: 600; }
:is(#hero-detail, #dr-detail) .hd-k { font-family: var(--f-display); background: var(--ink); border: 0; box-shadow: 0 0 0 1px var(--stone-5); color: var(--gold-hi); }
:is(#hero-detail, #dr-detail) .hd-ab { border-top: 2px solid var(--ink); box-shadow: 0 -1px 0 var(--stone-7); }
:is(#hero-detail, #dr-detail) .hd-ab img { border: 2px solid var(--ink); box-shadow: 0 0 0 1px var(--stone-6); }
:is(#hero-detail, #dr-detail) .hd-pass { color: var(--gold-hi); }

/* ---- ДРАФТ (баны и пики) ---- */
#draft { background: radial-gradient(ellipse 70% 50% at 50% -8%, rgba(226,56,63,.30), transparent 65%), var(--tex-stone-dark, none) 0 0 / 128px 128px, #0b0a0f; }
#draft.pick { background: radial-gradient(ellipse 70% 50% at 50% -8%, rgba(240,191,76,.24), transparent 65%), var(--tex-stone-dark, none) 0 0 / 128px 128px, #0b0a0f; }
#dr-title { font-family: var(--f-display); font-size: calc(58px * var(--fs, 1)); letter-spacing: 6px; }
#dr-title.st-ban { color: #ff6a6f; text-shadow: 0 5px 0 #5a1014, 0 9px 0 var(--ink); }
#dr-title.st-pick { color: var(--gold-hi); text-shadow: 0 5px 0 var(--gold-lo), 0 9px 0 var(--ink); }
#dr-title.st-done { color: #a8f0a0; text-shadow: 0 5px 0 #1d5226, 0 9px 0 var(--ink); }
#dr-timer { font-family: var(--f-display); background: var(--ink); border: 3px solid var(--gold-lo); box-shadow: inset 0 0 0 2px #2a1e08, 0 4px 0 var(--ink); color: var(--gold-hi); }
html.uiart #dr-timer { border: 12px solid transparent; border-image: var(--fr-gold) 12 / 12px / 0 stretch; padding: 0 8px; }
#dr-timer.warn { color: #ff6a6f; border-color: var(--blood); }
#dr-sub { font-family: var(--f-text); font-weight: 500; color: var(--text); }
#dr-sub .you { font-family: var(--f-display); color: #ff6a6f; }
#dr-players .dp { background: var(--stone-9); border: 2px solid var(--ink); border-left: 5px solid var(--pc); box-shadow: inset 0 0 0 1px var(--stone-7), 0 2px 0 rgba(0,0,0,.4); }
#dr-players .dp.turn { border-color: var(--ink); border-left-color: var(--pc); box-shadow: inset 0 0 0 2px var(--blood), 0 0 0 1px #5a1014; }
#dr-players .dp.me { background: linear-gradient(rgba(240,191,76,.12), transparent), var(--stone-9); }
#dr-players .dp-name { font-family: var(--f-display); font-weight: 600; }
.dcard { background: linear-gradient(rgba(255,255,255,.035), transparent 50%), var(--stone-9); border: 2px solid var(--ink); box-shadow: inset 0 0 0 1px var(--stone-7), 0 3px 0 rgba(0,0,0,.45); }
.dcard:not(.off):hover { border-color: var(--ink); box-shadow: inset 0 0 0 2px var(--hc), 0 3px 0 rgba(0,0,0,.45); filter: brightness(1.1); }
.dcard .dn { font-family: var(--f-display); text-shadow: 0 2px 0 var(--ink); }
.dcard .dr { color: var(--text-3); font-family: var(--f-text); }
.dcard.sel { border-color: var(--ink); background: linear-gradient(rgba(240,191,76,.16), transparent), var(--stone-9); box-shadow: inset 0 0 0 2px var(--gold), 0 0 0 2px var(--gold-lo), 0 3px 0 rgba(0,0,0,.45); }
.dcard.taken { border-color: var(--ink); box-shadow: inset 0 0 0 2px var(--pc), 0 3px 0 rgba(0,0,0,.45); }
.dcard .dw { font-family: var(--f-display); }
#dr-go.ban { color: #fff2ee; text-shadow: 0 2px 0 rgba(0,0,0,.5); background: linear-gradient(#c43a40 0 50%, #a62a31 50% 100%); box-shadow: inset 0 2px 0 rgba(255,180,170,.35), inset 0 -4px 0 #5a1014, 0 4px 0 var(--ink); }
#dr-go:disabled { filter: grayscale(.6) brightness(.75); opacity: 1; }

/* ---- HUD: нижняя панель ---- */
#vitals { background: var(--tex-stone, none) 0 0 / 128px 128px, rgba(26,23,32,.94); border: 2px solid var(--ink); box-shadow: inset 0 0 0 1px #3a3344, inset 0 2px 0 1px rgba(255,255,255,.04), 0 4px 0 rgba(0,0,0,.5); padding: 8px 10px; gap: 10px; }
#lvl { width: 44px; height: 44px; font-family: var(--f-display); font-size: calc(22px * var(--fs, 1)); color: var(--gold-hi); background: linear-gradient(#2a1e0a 0 50%, #1f1606 50%); border: 2px solid var(--ink); box-shadow: inset 0 0 0 2px var(--gold), inset 0 0 0 3px var(--gold-lo), 0 3px 0 var(--ink); text-shadow: 0 2px 0 var(--ink); }
.bars { width: 300px; }
#hpbar { height: 24px; background: #2a0a0e; border: 2px solid var(--ink); box-shadow: inset 0 3px 0 rgba(0,0,0,.55), 0 0 0 1px #4a2a2e; }
#hpfill { background: linear-gradient(#ff7a6a 0 30%, #e2383f 30% 72%, #a8202a 72% 100%); }
#hpfill::after { display: none; }
#hptrail { background: linear-gradient(#fff3c4 0 40%, #ffbf5a 40%); }
#shfill { height: 4px; background: #eaf6ff; }
#hpbar::after { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 1; background: repeating-linear-gradient(90deg, transparent 0 calc(10% - 2px), rgba(9,8,12,.4) calc(10% - 2px) 10%); }
#hptext { z-index: 2; font-family: var(--f-display); font-weight: 700; font-size: calc(15px * var(--fs, 1)); line-height: 20px; text-shadow: 0 2px 0 var(--ink), 1px 0 0 var(--ink), -1px 0 0 var(--ink); }
#xpbar { height: 10px; background: #0a1624; border: 2px solid var(--ink); border-top: 0; box-shadow: inset 0 2px 0 rgba(0,0,0,.5); }
#xpfill { background: linear-gradient(#a8e4ff 0 35%, #56b6ff 35% 75%, #2a72b8 75%); }
#gold { font-family: var(--f-display); color: var(--gold-hi); font-size: calc(28px * var(--fs, 1)); text-shadow: 0 3px 0 var(--ink), 2px 0 0 var(--ink), -2px 0 0 var(--ink); min-width: 92px; }
html.uiart #gold::before { width: 24px; height: 24px; border-radius: 0; background: var(--ic-coin) center / 24px 24px no-repeat; box-shadow: none; image-rendering: pixelated; }
#lives { font-family: var(--f-display); font-weight: 700; color: #ff7a80; text-shadow: 0 2px 0 var(--ink); }
#lives small { font-family: var(--f-text); font-weight: 500; color: var(--text-3); }
.ab { border: 2px solid var(--ink); background: #0e0c12; box-shadow: inset 0 0 0 2px #3a3344, 0 3px 0 var(--ink); }
.ab .key { font-family: var(--f-display); font-weight: 600; font-size: calc(10px * var(--fs, 1)); color: var(--text); background: rgba(9,8,12,.78); padding: 0 3px; top: 2px; left: 2px; text-shadow: none; }
.ab .ch { font-family: var(--f-display); font-weight: 700; text-shadow: 0 2px 0 var(--ink), 1px 0 0 var(--ink), -1px 0 0 var(--ink); }
.ab.ult { border-color: var(--ink); box-shadow: inset 0 0 0 2px #6a40a0, 0 3px 0 var(--ink); }
.ab.ult.ready { border-color: var(--ink); box-shadow: inset 0 0 0 2px #e0b8ff, 0 0 0 2px #6a40a0, 0 3px 0 var(--ink); }
.ab.learn { border-color: var(--ink); animation: learn57 .9s steps(2) infinite; }
@keyframes learn57 { 0% { box-shadow: inset 0 0 0 2px var(--gold), 0 3px 0 var(--ink); } 100% { box-shadow: inset 0 0 0 2px var(--gold-hi), 0 0 0 2px var(--gold-lo), 0 3px 0 var(--ink); } }
.ab .lvup { font-family: var(--f-display); background: linear-gradient(#ffe08a 0 45%, #f0bf4c 45%); color: #2a1a04; border: 2px solid var(--ink); box-shadow: inset 0 -2px 0 #a8701e, 0 2px 0 var(--ink); line-height: 16px; }
.ab.locked { box-shadow: inset 0 0 0 2px #241f2b, 0 3px 0 var(--ink); }
.ab .pips i { background: var(--stone-6); border: 1px solid var(--ink); } .ab .pips i.on { background: var(--gold); }
#invbtn { font-family: var(--f-display); background: linear-gradient(#3b3445 0 50%, #322c3b 50% 100%); }
#inv { background: rgba(18,16,22,.94); border: 2px solid var(--ink); box-shadow: inset 0 0 0 1px #3a3344; }
#statusfx span { font-family: var(--f-display); font-size: calc(12px * var(--fs, 1)); background: rgba(9,8,12,.85); border-width: 1px; box-shadow: 0 0 0 1px var(--ink); }
#netinfo { color: var(--text-3); font-family: var(--f-display); }

/* ---- HUD: правая колонка, лента, карта ---- */
:is(#zoneinfo, #alive, #board, #watchers, #arenainfo, #perfinfo) { background: rgba(18,16,22,.92); border: 2px solid var(--ink); box-shadow: inset 0 0 0 1px #3a3344, 0 3px 0 rgba(0,0,0,.45); color: var(--text); }
#zoneinfo { font-family: var(--f-display); font-weight: 600; padding: 5px 6px; line-height: 1.3; }
#zoneinfo.danger { color: #e0b8ff; box-shadow: inset 0 0 0 1px var(--abyss), 0 3px 0 rgba(0,0,0,.45); }
#arenainfo { font-family: var(--f-display); font-weight: 600; color: var(--gold-hi); box-shadow: inset 0 0 0 1px var(--gold-lo), 0 3px 0 rgba(0,0,0,.45); }
#arenainfo.hot { color: #ff8a6a; box-shadow: inset 0 0 0 1px var(--ember), 0 3px 0 rgba(0,0,0,.45); }
#alive { font-family: var(--f-display); font-weight: 600; }
#board { font-size: calc(13px * var(--fs, 1)); }
#board .br.bh { font-family: var(--f-display); color: var(--brass); border-bottom: 2px solid var(--ink); box-shadow: 0 1px 0 var(--stone-7); }
#board .br .pw, #board .br .lv, #board .br .ul { font-family: var(--f-display); }
#board .br .pw { color: var(--gold-hi); }
#board .br .d { width: 9px; height: 9px; box-shadow: 0 0 0 1px var(--ink); }
#streak { font-family: var(--f-display); color: var(--ember); text-shadow: 0 3px 0 var(--ink); }
#streak .l { color: #ffb48a; }
#minimap { border: 3px solid var(--ink); box-shadow: 0 0 0 2px #4e4559, 0 0 0 4px var(--ink), 0 6px 0 4px rgba(0,0,0,.4); }
#feed div { font-weight: 500; font-size: calc(14px * var(--fs, 1)); background: rgba(12,10,16,.84); border-left-width: 4px; padding: 4px 10px; box-shadow: 0 2px 0 rgba(0,0,0,.35); text-shadow: 0 1px 0 #000; }
.toast { background: var(--tex-stone, none) 0 0 / 128px 128px, rgba(22,19,27,.96); border-width: 3px; box-shadow: 0 0 0 2px var(--ink), 0 6px 0 2px rgba(0,0,0,.5), inset 0 0 0 1px rgba(255,255,255,.06); }
.toast .tg { font-family: var(--f-display); color: var(--brass); letter-spacing: 1.5px; text-transform: uppercase; }
.toast .tn { font-family: var(--f-display); text-shadow: 0 3px 0 var(--ink); }
.toast .td { color: var(--text); }
.toast img { border: 2px solid var(--ink); box-shadow: 0 0 0 1px var(--stone-6); background: var(--ink); }
#centermsg { font-family: var(--f-display); font-weight: 700; font-size: calc(24px * var(--fs, 1)); text-shadow: 0 3px 0 var(--ink), 2px 0 0 var(--ink), -2px 0 0 var(--ink), 0 -2px 0 var(--ink); }
#announce .an b { font-family: var(--f-display); font-weight: 700; text-shadow: 0 5px 0 var(--ink), 3px 3px 0 var(--ink), -3px 3px 0 var(--ink), 0 -2px 0 var(--ink); }
#announce .an span { font-family: var(--f-text); font-weight: 500; }
#prompt { background: rgba(18,16,22,.95); border: 2px solid var(--ink); box-shadow: inset 0 0 0 2px var(--gold-lo), 0 4px 0 rgba(0,0,0,.5); }
#prompt .pk { font-family: var(--f-display); color: #2a1a04; background: linear-gradient(#ffe08a 0 45%, #f0bf4c 45%); border: 2px solid var(--ink); box-shadow: inset 0 -3px 0 #a8701e, 0 3px 0 var(--ink); animation: none; }
#prompt .pp { font-family: var(--f-display); }
#bossbar .bname { font-family: var(--f-display); font-weight: 600; font-size: calc(12px * var(--fs, 1)); color: #ff9aa2; text-shadow: 0 2px 0 var(--ink); }
#bossbar .bbar { height: 7px; background: #2a0a0e; border: 2px solid var(--ink); box-shadow: 0 0 0 1px #5a2a30; }
#bossbar .bfill { background: linear-gradient(#ff7a6a 0 35%, #e2383f 35% 75%, #a8202a 75%); }
#arenabar { background: rgba(26,18,8,.9); border: 2px solid var(--ink); box-shadow: inset 0 0 0 1px var(--ember), 0 3px 0 rgba(0,0,0,.45); }
#arenabar .ar-t, #arenabar .ar-time { font-family: var(--f-display); }
#chanbar .ct { font-family: var(--f-display); }
#chanbar .cb { border: 2px solid var(--ink); box-shadow: 0 0 0 2px var(--gold-lo); }
#chanbar .cb i { background: linear-gradient(#ffe08a 0 40%, #f0bf4c 40%); }
#darkwarn { font-family: var(--f-display); }

/* ---- выбор улучшения, магазин, подготовка ---- */
.card { background: var(--tex-stone, none) 0 0 / 128px 128px, rgba(22,19,27,.97); box-shadow: 0 0 0 2px var(--ink), 0 5px 0 2px rgba(0,0,0,.45); }
.card:hover { transform: translateY(-3px); box-shadow: 0 0 0 2px var(--ink), 0 8px 0 2px rgba(0,0,0,.45); }
.card .cn, .scard .cn { font-family: var(--f-display); text-shadow: 0 2px 0 var(--ink); }
.card img, .scard img { border: 2px solid var(--ink); box-shadow: 0 0 0 1px var(--stone-6); background: var(--ink); }
.card .slotkey { font-family: var(--f-display); background: var(--ink); border: 0; box-shadow: 0 0 0 1px var(--stone-5); }
#choice .ttl { font-family: var(--f-display); color: var(--gold-hi); text-shadow: 0 3px 0 var(--ink); }
#shop { background: var(--tex-stone, none) 0 0 / 128px 128px, rgba(20,17,24,.97); border: 2px solid var(--ink); box-shadow: inset 0 0 0 2px var(--gold-lo), 0 0 0 2px var(--ink), 0 10px 0 rgba(0,0,0,.4); }
html.uiart #shop { border: 12px solid transparent; border-image: var(--fr-gold) 12 / 12px / 0 stretch; box-shadow: 0 10px 0 rgba(0,0,0,.4); }
.shop-ttl, #prep-ttl { font-family: var(--f-display); color: var(--gold-hi); text-shadow: 0 3px 0 var(--ink); letter-spacing: 1.5px; }
#shop-timer, #shop-gold, #prep-timer { font-family: var(--f-display); }
#shop-gold { color: var(--gold-hi); }
.scard { background: linear-gradient(rgba(255,255,255,.03), transparent 40%), var(--stone-9); box-shadow: 0 0 0 2px var(--ink), 0 4px 0 2px rgba(0,0,0,.4); }
.scard:hover { filter: brightness(1.15); }
.scard .pr { font-family: var(--f-display); font-weight: 700; color: var(--gold-hi); text-shadow: 0 2px 0 var(--ink); }
.scard .nx { color: var(--text); }
.prep-head { background: var(--tex-stone, none) 0 0 / 128px 128px, rgba(26,22,30,.96); border: 2px solid var(--ink); box-shadow: inset 0 0 0 2px var(--gold-lo), 0 0 0 2px var(--ink); }
html.uiart .prep-head { border: 12px solid transparent; border-image: var(--fr-gold) 12 / 12px / 0 stretch; box-shadow: 0 6px 0 rgba(0,0,0,.4); padding: 2px 12px; }
#prep { background: rgba(6,5,9,.84); }
#prep-sub { color: var(--text); }
#prep-who .pw { font-family: var(--f-display); background: var(--stone-9); border: 2px solid var(--ink); box-shadow: inset 0 0 0 1px var(--stone-6); }
#prep-who .pw.ok { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--heal); }
#prep-who .pw.wait { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--gold); animation: none; }
#shop-ready.on, #prep-ready.on { color: #e8ffe4; text-shadow: 0 2px 0 rgba(0,0,0,.5); background: linear-gradient(#4aa857 0 45%, #348a42 45% 100%); box-shadow: inset 0 2px 0 #a8f0a0, inset 0 -4px 0 #1d5226, 0 4px 0 var(--ink); }

/* ---- окна: подсказки, билд, справка, настройки, рейтинг ---- */
#tooltip { background: rgba(18,16,22,.98); box-shadow: 0 0 0 2px var(--ink), 4px 6px 0 2px rgba(0,0,0,.5); font-size: calc(13px * var(--fs, 1)); line-height: 1.4; color: var(--text); padding: 8px 10px; }
#tooltip .tn { font-family: var(--f-display); font-weight: 700; text-shadow: 0 2px 0 var(--ink); }
#tooltip .tr { font-family: var(--f-display); }
.helptext { color: var(--text); font-size: calc(15px * var(--fs, 1)); line-height: 1.55; }
.helptext p { margin: 0 0 10px; }
.helptext b { color: var(--gold-hi); font-weight: 600; }
.bitem { background: var(--stone-9); box-shadow: inset 0 0 0 1px var(--stone-7); }
.bitem .bn { font-family: var(--f-display); }
#build-stats div { border-bottom: 1px solid var(--stone-7); }
.opts-panel { width: min(660px, 95vw); }
.opt-sec { font-family: var(--f-display); font-weight: 700; color: var(--brass); letter-spacing: 1.5px; margin: 14px 0 6px; padding-bottom: 4px; border-bottom: 2px solid var(--ink); box-shadow: 0 1px 0 var(--stone-7); }
.opt-row { grid-template-columns: 250px 1fr 64px; font-size: calc(14px * var(--fs, 1)); color: var(--text); }
.opt-row b { font-family: var(--f-display); color: var(--gold-hi); }
#o-preview { border: 2px solid var(--ink); box-shadow: 0 0 0 1px var(--stone-6); }
.swatch { border: 2px solid var(--ink); box-shadow: 0 0 0 1px var(--stone-5); } .swatch.on { box-shadow: 0 0 0 2px var(--gold-hi); }
.st-tabs .btn.on { color: var(--gold-hi); }
.st-table th, #res-table th { font-family: var(--f-display); font-weight: 600; color: var(--brass); border-bottom: 2px solid var(--ink); box-shadow: 0 1px 0 var(--stone-7); text-transform: uppercase; font-size: calc(12px * var(--fs, 1)); letter-spacing: 1px; }
.st-table td, #res-table td { border-bottom: 1px solid var(--stone-7); }
.st-table tr:hover td, #res-table tr:hover td { background: rgba(255,255,255,.03); }
.st-table tr.me td { background: rgba(240,191,76,.1); }
.st-table td.num, #res-table td { font-variant-numeric: tabular-nums; }
.st-rank, .st-table .medal { font-family: var(--f-display); }

/* ---- итоги, смерть, подключение ---- */
.res-title { font-family: var(--f-display); font-size: calc(48px * var(--fs, 1)); color: var(--gold-hi); text-shadow: 0 4px 0 var(--gold-lo), 0 8px 0 var(--ink); }
.res-sub { font-family: var(--f-display); letter-spacing: 6px; text-shadow: 0 3px 0 var(--ink); }
.res-sub.win { animation: none; color: var(--gold-hi); }
.res-mvp .mvp { background: var(--stone-9); border: 2px solid var(--ink); box-shadow: inset 0 0 0 1px var(--stone-6); }
.res-mvp .mvp b { color: var(--gold-hi); }
#results { background: rgba(6,5,9,.7); }
.dead-title { font-family: var(--f-display); font-weight: 700; color: #ff5a5f; text-shadow: 0 5px 0 #5a1014, 0 10px 0 var(--ink); letter-spacing: 6px; }
.dead-title.small { color: var(--gold-hi); text-shadow: 0 4px 0 var(--ink); font-size: calc(24px * var(--fs, 1)); letter-spacing: 3px; }
#death-place, #down-info { font-family: var(--f-display); text-shadow: 0 3px 0 var(--ink); }
#down-timer { font-family: var(--f-display); text-shadow: 0 4px 0 var(--ink); }
#death.mini, #down.mini { background: rgba(26,10,14,.9); border: 2px solid var(--ink); box-shadow: inset 0 0 0 1px #7a2838, 0 3px 0 rgba(0,0,0,.5); }
#connecting { background: radial-gradient(ellipse at 50% 40%, rgba(240,150,60,.08), transparent 60%), var(--stone-9); }
.conn-box { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.conn-logo { font-family: var(--f-display); font-weight: 700; font-size: 72px; letter-spacing: 6px; background: linear-gradient(#fff3c4 0 28%, #ffd772 28% 52%, #e9a63a 52% 76%, #b86a1e 76% 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 4px 0 #5a2e0a) drop-shadow(0 4px 0 var(--ink)); }
.conn-bar { width: 220px; height: 12px; background: var(--ink); border: 2px solid var(--ink); box-shadow: 0 0 0 2px var(--stone-6); overflow: hidden; }
.conn-bar i { display: block; height: 100%; width: 40%; background: linear-gradient(#ffe08a 0 40%, #f0bf4c 40%); animation: connbar 1.2s steps(12) infinite; }
@keyframes connbar { from { transform: translateX(-100%); } to { transform: translateX(260%); } }

/* ---- чат, колесо, наблюдатель, прочее ---- */
#chatlog .cm { font-size: calc(14px * var(--fs, 1)); background: rgba(12,10,16,.8); padding: 3px 8px; box-shadow: 0 1px 0 rgba(0,0,0,.4); }
#chatlog .cm.sys { color: var(--text-2); }
#chat.open #chatlog { background: rgba(12,10,16,.6); }
#chatin { font-size: calc(14px * var(--fs, 1)); padding: 6px 8px; border-color: var(--gold); }
#cwheel .cw-hub { border-radius: 0; font-family: var(--f-display); background: var(--stone-8); border: 2px solid var(--ink); box-shadow: inset 0 0 0 2px var(--gold-lo), 0 4px 0 rgba(0,0,0,.5); color: var(--text); }
#cwheel .cw-it { font-family: var(--f-text); font-weight: 600; font-size: 13px; background: rgba(18,16,22,.95); border: 2px solid var(--ink); box-shadow: inset 0 0 0 1px var(--stone-6), 0 3px 0 rgba(0,0,0,.5); }
#cwheel .cw-it.on { background: #2e2410; border-color: var(--ink); box-shadow: inset 0 0 0 2px var(--c, var(--gold)), 0 3px 0 rgba(0,0,0,.5); }
#specbar { background: rgba(18,16,22,.95); border: 2px solid var(--ink); box-shadow: inset 0 0 0 1px #3a3344, 0 3px 0 rgba(0,0,0,.45); }
#spec-who { font-family: var(--f-display); }
#perfinfo { font-family: var(--f-display); font-size: calc(12px * var(--fs, 1)); }
#watchers { color: var(--text-2); } #watchers .sh { color: var(--text); display: flex; align-items: center; }
html #h-toast { font-family: var(--f-display); background: rgba(18,16,22,.97); border: 2px solid var(--ink); box-shadow: inset 0 0 0 2px var(--gold-lo), 0 4px 0 rgba(0,0,0,.5); color: var(--gold-hi); }
html #h-pause b { font-family: var(--f-display); color: var(--gold-hi); text-shadow: 0 5px 0 var(--gold-lo), 0 9px 0 var(--ink); }
html #h-pause span { color: var(--text); text-shadow: 0 2px 0 var(--ink); }
html .slot .hbtn { font-family: var(--f-display); background: var(--ink); border: 0; box-shadow: 0 0 0 1px var(--stone-5); color: var(--gold-hi); }
html .slot .hbtn.kick { color: #ff8a80; }
#quiz { background: rgba(18,16,22,.97); border: 2px solid var(--ink); box-shadow: inset 0 0 0 2px #9ae04a, 0 0 0 2px var(--ink), 0 10px 0 rgba(0,0,0,.4); }
#quiz .qz-head, #quiz .qz-board, #quiz .qz-o { font-family: var(--f-display); }
#arenacd .cd-n, #arenacd .cd-s { font-family: var(--f-display); }
.gear img.ic { width: 24px; height: 24px; }

/* ---- v5.7: без прокрутки — экраны и окна масштабируются под окно браузера (public/js/fit.js) ---- */
#lobby { overflow: hidden; justify-content: flex-start; align-items: center; }
#lobby .lobby-wrap { margin: 0; }
#herolist { overflow: hidden; align-items: flex-start; }
#herolist .hl-box { max-height: none; overflow: visible; }
#draft { overflow: hidden; align-items: center; justify-content: flex-start; padding: 0; gap: 0; }
#draft .dr-wrap { width: min(calc(1560px * var(--lf, 1)), 98vw); display: flex; flex-direction: column; gap: 8px; padding: 10px 8px; }
#dr-grid { flex: none; overflow: visible; min-height: 0; grid-template-columns: repeat(auto-fill, minmax(calc(118px * var(--lf, 1)), 1fr)); }
#dr-detail { max-height: none; height: calc(196px * var(--lf, 1)); overflow: hidden; }
#hero-detail { height: calc(250px * var(--lf, 1)); overflow: hidden; } /* v5.7: выше — описание и врождённая способность крупнее */
.hd-fit { width: 100%; }
.modal { overflow: hidden; }
.panel.wide, .opts-panel { max-height: none; overflow: visible; }
#results { overflow: hidden; justify-content: flex-start; }
#help .helptext { column-count: 2; column-gap: 28px; }
#help .helptext p { break-inside: avoid; }
@media (max-width: 1100px) { #help .helptext { column-count: 1; } }
.acc-line { flex-basis: 100%; font-size: calc(12px * var(--fs, 1)); color: var(--text-3); line-height: 1.35; }
.acc-panel .mhead { display: flex; justify-content: space-between; align-items: center; }
.acc-close { padding: 3px 6px !important; }
body.mobile #draft .dr-wrap { width: 100vw; }

/* ---- v5.7: у Pixelify Sans плохо читаются русские буквы («б» как 6, «К» с крючком) — им пишем только цифры и логотип,
   заголовки, кнопки и подписи — Rubik (жирный) ---- */
:root { --f-display: 'Rubik', 'Segoe UI', system-ui, sans-serif; --f-num: 'Pixelify Sans', 'Rubik', monospace; }
:is(#lvl, #hptext, #gold, .ab .ch, #dr-timer, #prep-timer, #shop-timer, #arenabar .ar-time, #down-timer, #shop-gold, .scard .pr, #board .br .pw, #board .br .lv, #board .br .ul, #streak .n, #arenacd .cd-n, .rate-tag, #addrs, #lives, #invbtn b, .ab .pips .lvn) { font-family: var(--f-num); }
.title .t2, .conn-logo { font-family: var(--f-num); }
.title .t1 { font-weight: 700; letter-spacing: 10px; }
.btn { font-weight: 600; letter-spacing: .3px; }
.btn.big { font-weight: 800; letter-spacing: 1px; }
#dr-title { font-weight: 800; letter-spacing: 4px; }
.lbl, .set-row > span:first-child, .opt-sec, #board .br.bh, .toast .tg, .st-table th, #res-table th { font-weight: 700; }
.mhead, .lm-ttl, .res-title, .dead-title, #announce .an b, #centermsg, .shop-ttl, #prep-ttl, .hero .hn, .dcard .dn, :is(#hero-detail, #dr-detail) .hd-name, .toast .tn, .card .cn, .scard .cn, #tooltip .tn { font-weight: 800; }
.res-title, .dead-title { letter-spacing: 3px; }

/* ---- v5.7: новые иконки 24×24 — показываем кратно (24 или 48 px), чтобы пиксели были чёткими ---- */
.toast img { width: 48px; height: 48px; }
.card img, .scard img, .bitem img { width: 48px; height: 48px; image-rendering: pixelated; }
.card.skill img { width: 24px; height: 24px; }
:is(#hero-detail, #dr-detail) .hd-ab img { width: 48px !important; height: 48px !important; }
.ab.dash { width: 52px; height: 52px; }
.ab.dash img { left: 0; top: 0; width: 48px; height: 48px; }
body.mobile #abilities .ab img, body.mobile #abilities .ab.dash img { left: 2px; top: 2px; width: 48px; height: 48px; }
body.mobile #abilities .ab#ab-l img { left: 6px; top: 6px; width: 48px; height: 48px; }
#board .br.bh .pw, #board .br.bh .lv, #board .br.bh .ul { font-family: var(--f-display); }
.opts-panel { width: min(800px, 95vw); }
.opt-row { grid-template-columns: minmax(260px, 1.1fr) 1fr 64px; }
#help .panel.wide { width: min(1560px, 97vw); }
@media (min-width: 1400px) { #help .helptext { column-count: 3; font-size: calc(14px * var(--fs, 1)); } }
#lobby { justify-content: flex-start; }

/* ---- v5.7: мини-карта — латунная оправа, холст в разрешении экрана, название биома сверху ---- */
#minimap { width: 170px; height: 170px; image-rendering: auto; background: #0d0b11; border: 3px solid var(--ink);
  box-shadow: 0 0 0 2px #c99a3a, 0 0 0 3px #ffe08a, 0 0 0 5px #5a3d14, 0 0 0 7px var(--ink), 0 9px 0 7px rgba(0,0,0,.4); margin: 7px; }
#mmcap { width: 170px; margin: 0 7px 2px; padding: 2px 8px 3px; box-sizing: border-box; text-align: center; font-family: var(--f-display); font-weight: 700;
  font-size: calc(11px * var(--fs, 1)); letter-spacing: 1px; text-transform: uppercase; color: var(--bc, var(--brass)); background: rgba(12,10,16,.88);
  border: 2px solid var(--ink); box-shadow: inset 0 0 0 1px #3a3344; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 1px 0 #000; }
#mmcap:empty { display: none; }
#bigmap-c { image-rendering: auto; }

/* ---- v5.7: цифры — Rubik (у Pixelify Sans «2» похожа на S, «5» — на 4/8; просьба владельца). Pixelify — только логотип ---- */
:root { --f-num: 'Rubik', 'Segoe UI', system-ui, sans-serif; --f-logo: 'Pixelify Sans', 'Rubik', monospace; }
.title .t2, .conn-logo { font-family: var(--f-logo); }
:is(#lvl, #hptext, #gold, .ab .ch, #dr-timer, #prep-timer, #shop-timer, #arenabar .ar-time, #down-timer, #shop-gold, .scard .pr, #board .br .pw, #board .br .lv, #board .br .ul, #streak .n, #arenacd .cd-n, .rate-tag, #addrs, #lives, #invbtn b, .ab .pips .lvn) { font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: 0; }

/* v5.7: на кнопке «+» — подсказка клавиши (1 ЛКМ, 2 ПКМ, 3 E, 4 R) */
.ab .lvup::after { content: attr(data-key); position: absolute; right: -9px; top: -7px; min-width: 13px; height: 13px; padding: 0 2px; font: 800 10px/13px var(--f-text); color: var(--gold-hi); background: var(--ink); box-shadow: 0 0 0 1px var(--gold-lo); text-align: center; pointer-events: none; }

/* ---- v5.7: меню по краям — слева логотип и разделы, справа таблица игроков; версия мелко внизу справа ---- */
.lb-ver { position: absolute; right: 14px; bottom: 10px; z-index: 2; font: 600 12px var(--f-text); color: var(--text-3); letter-spacing: .5px; pointer-events: none; }
.lobby-wrap { width: calc(100vw - 56px); max-width: none; min-width: 900px; }
.lobby-grid { display: flex; justify-content: space-between; align-items: flex-start; gap: 28px; }
.lobby-side { width: calc(400px * var(--lf, 1)); flex: none; }
.lobby-main { width: min(calc(800px * var(--lf, 1)), 62vw); flex: none; }
.lobby-side .title { margin: 0 0 4px; }
.title .t2 { font-size: calc(84px * var(--fs, 1)); }
@media (max-height: 1200px) { .title .t2 { font-size: calc(70px * var(--fs, 1)); } }
@media (max-width: 700px) and (orientation: portrait) { .lobby-grid { flex-direction: column; } .lobby-side, .lobby-main { width: 100%; } }

/* ---- v5.7: настройки — вкладки «Основное» / «Клавиши», таблица переназначения клавиш ---- */
.opt-tabs { display: flex; gap: 6px; align-items: center; margin: 0 0 8px; flex-wrap: wrap; }
.opt-tabs .opt-acc { margin: 0 0 0 auto; font-size: calc(12px * var(--fs, 1)); color: var(--text-2); }
.opts-panel.keys > :not(.mhead):not(.opt-tabs):not(#o-keys-tab):not(.opt-foot) { display: none !important; }
.opts-panel:not(.keys) #o-keys-tab { display: none; }
/* v5.8: вкладка «Графика» — свои строки (.ot-gfx), второй раздел — со второго столбца (в новом виде окно в два столбца) */
.opts-panel.gfx > :not(.mhead):not(.opt-tabs):not(.ot-gfx):not(.opt-foot) { display: none !important; }
.opts-panel:not(.gfx) > .ot-gfx { display: none !important; }
.opts-panel.gfx > .ot-col2 { break-before: column; }
.opt-btns { display: inline-flex; gap: 6px; flex-wrap: wrap; }
#o-keys { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 18px; margin: 10px 0; }
.kgroup .kg-t { font-family: var(--f-display); font-weight: 700; color: var(--brass); font-size: calc(12px * var(--fs, 1)); letter-spacing: 1.5px; text-transform: uppercase;
  border-bottom: 2px solid var(--ink); box-shadow: 0 1px 0 var(--stone-7); padding-bottom: 3px; margin-bottom: 4px; }
.krow { display: grid; grid-template-columns: 1fr 78px 78px; gap: 6px; align-items: center; padding: 2px 0; font-size: calc(13px * var(--fs, 1)); color: var(--text); }
.krow .kn { min-width: 0; line-height: 1.2; }
.kbtn { font: 700 calc(13px * var(--fs, 1)) var(--f-text); color: var(--gold-hi); background: var(--ink); border: 2px solid var(--stone-6); box-shadow: inset 0 -2px 0 rgba(0,0,0,.5), 0 2px 0 rgba(0,0,0,.4);
  padding: 3px 4px; min-height: 28px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kbtn:hover { border-color: var(--gold); }
.kbtn.empty { color: var(--text-3); font-weight: 500; }
.kbtn.wait { color: #1a1002; background: var(--gold); border-color: var(--gold-hi); animation: kwait .6s steps(2) infinite; }
@keyframes kwait { 50% { background: var(--gold-hi); } }
@media (max-width: 760px) { #o-keys { grid-template-columns: 1fr; } }

/* ---- v5.7: видео-фон главного меню (public/video/menu_bg.mp4 — по просьбе владельца): крупные пиксели, затемнение по краям ---- */
#lobbyvid { position: fixed; inset: 0; width: 100%; height: 100%; object-fit: cover; image-rendering: pixelated; z-index: 0; pointer-events: none; filter: brightness(.78) saturate(.95); }
/* ---- v5.7 (10 октября 2026, просьба владельца): фон меню — фиолетовая чёрная дыра из кода (js/blackhole.js, класс html.bg-hole из theme.js;
   ?bg=paladin — прежнее видео). Холст в крупных пикселях, размер ставит сам модуль (целое число экранных пикселей на пиксель) ---- */
#lobbyhole { position: fixed; left: 0; top: 0; z-index: 0; pointer-events: none; image-rendering: pixelated; display: none; }
html.bg-hole #lobbyhole { display: block; }
html.bg-hole :is(#lobbyvid, .lobby-shade, #lobbyfx) { display: none; }
html.bg-hole #lobby { background: #000; }
.lobby-shade { position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(9,8,12,.82) 0%, rgba(9,8,12,.35) 30%, rgba(9,8,12,.12) 50%, rgba(9,8,12,.35) 62%, rgba(9,8,12,.85) 100%), linear-gradient(0deg, rgba(9,8,12,.55), transparent 35%); }

/* ---- v5.7: меню — кадр 1920×1080 с блоками по расстановке владельца (js/lobbylayout.js); fit.js масштабирует кадр под окно ---- */
#lobby .lobby-wrap.lobby-stage { position: relative; width: 1920px; height: 1080px; min-width: 0; max-width: none; padding: 0; flex: none; --lf: 1.25; --fs: calc(var(--fst, 1.3) * 1.25); }
.lobby-stage > .lb-abs { position: absolute; margin: 0; }
.lobby-stage #L-logo { display: flex; align-items: center; }
.lobby-stage #L-logo .t2 { font-size: 104px; line-height: 1; }
.lobby-stage .nav-btn { justify-content: flex-start; padding: 0 16px; }
.lobby-stage #L-players { display: flex; flex-direction: column; }
.lobby-stage #L-match #settings { margin: 0; background: none; border: 0; box-shadow: none; padding: 2px 2px 0; }
.lobby-stage #L-ready { display: flex; gap: 10px; margin: 0; }
.lobby-stage #L-ready .btn { height: 100%; margin: 0; }
.lobby-stage #L-host { display: flex; align-items: stretch; }
.lobby-stage #L-host #host-ctrl { display: flex; gap: 10px; width: 100%; margin: 0; }
.lobby-stage #L-host #host-ctrl.hidden { display: none; }
.lobby-stage #L-host .btn { height: 100%; }
.lobby-stage #L-host #wait-host { margin: 0; display: flex; align-items: center; justify-content: center; width: 100%; background: rgba(18,16,22,.86); border: 2px solid var(--ink); box-shadow: inset 0 0 0 1px #3a3344; }
.lobby-stage #L-host #wait-host.hidden { display: none; }
.lobby-stage #L-addrs { margin: 0; border-top: 12px solid transparent; }
html:not(.uiart) .lobby-stage #L-addrs { border-top: 2px solid var(--stone-6); }
/* левые панели прозрачнее (просьба владельца): видно видео-фон */
html.uiart .lobby-stage #L-account, .lobby-stage #L-account { background: rgba(22,19,28,.55); box-shadow: 0 8px 0 rgba(0,0,0,.25); }
.lobby-stage #L-account input#name { background: rgba(9,8,12,.62); }
.lobby-stage #L-account .acc-box.in { background: rgba(63,106,58,.16); }
.lobby-stage .nav-btn { background: linear-gradient(rgba(59,52,69,.62) 0 50%, rgba(50,44,59,.62) 50% 100%); }
.lobby-stage .nav-btn:hover { background: linear-gradient(rgba(74,65,86,.8) 0 50%, rgba(62,55,73,.8) 50% 100%); }
.lobby-stage #L-match .set-row { margin-bottom: 4px; }
.lobby-stage #L-match #set-info { font-size: calc(12px * var(--fs, 1)); margin-top: 2px; line-height: 1.3; }
html.uiart .lobby-stage #L-match, .lobby-stage #L-match { padding-bottom: 3px; }
/* правые панели тоже прозрачнее (просьба владельца); золотые кнопки — плотные, главное действие видно */
html.uiart .lobby-stage :is(#L-players, #L-match, #L-addrs), .lobby-stage :is(#L-players, #L-match, #L-addrs) { background: rgba(22,19,28,.55); box-shadow: 0 8px 0 rgba(0,0,0,.25); }
.lobby-stage .slot { background: linear-gradient(90deg, rgba(255,255,255,.035), transparent 40%), rgba(12,10,16,.5); }
.lobby-stage .slot.me { background: linear-gradient(90deg, rgba(240,191,76,.14), transparent 60%), rgba(12,10,16,.5); }
.lobby-stage .slot.empty { background: rgba(9,8,12,.3); }
.lobby-stage #L-ready .spec-btn, .lobby-stage #btn-bot { background: linear-gradient(rgba(59,52,69,.68) 0 50%, rgba(50,44,59,.68) 50% 100%); }
.lobby-stage #L-host #wait-host { background: rgba(18,16,22,.55); }
/* v5.8 (11 октября 2026, просьба владельца): автоприменение (ПКМ по значку способности) — зелёный пунктир, бегущий по часовой
   стрелке вокруг значка (была оранжевая рамка — её путали с золотой оправой «можно прокачать»). Штрих — зелёный хвост и светлая
   «голова» по ходу движения, промежутки — тёмные. --aa-w — толщина, --aa-t — длина узора (штрих — половина); новый вид — ns-hud.css */
#abilities .ab.auto { --aa-w: 2px; --aa-t: 8px; --aa: #2fbf4f; --aa-hi: #a8ffae; --aa-gap: var(--ink); }
#abilities .ab.auto::before {
  content: ''; position: absolute; inset: -4px; pointer-events: none;
  background:
    linear-gradient(90deg, var(--aa) 0 25%, var(--aa-hi) 25% 50%, var(--aa-gap) 50%) 0 0 / var(--aa-t) var(--aa-w) repeat-x,
    linear-gradient(270deg, var(--aa) 0 25%, var(--aa-hi) 25% 50%, var(--aa-gap) 50%) 0 100% / var(--aa-t) var(--aa-w) repeat-x,
    linear-gradient(0deg, var(--aa) 0 25%, var(--aa-hi) 25% 50%, var(--aa-gap) 50%) 0 0 / var(--aa-w) var(--aa-t) repeat-y,
    linear-gradient(180deg, var(--aa) 0 25%, var(--aa-hi) 25% 50%, var(--aa-gap) 50%) 100% 0 / var(--aa-w) var(--aa-t) repeat-y;
  animation: abAnts .5s steps(4) infinite;
}
@keyframes abAnts { to { background-position: var(--aa-t) 0, calc(-1 * var(--aa-t)) 100%, 0 calc(-1 * var(--aa-t)), 100% var(--aa-t); } }
#abilities .ab.auto:is(.learn, .ult.ready)::before { inset: -6px; }
@media (prefers-reduced-motion: reduce) { #abilities .ab.auto::before { animation: none; } }
/* v5.7: список героев — 34 героя: сетка плотнее, врождённая способность заметнее (сверху карточки) */
#herolist #heroes { grid-template-columns: repeat(auto-fill, minmax(calc(165px * var(--lf, 1)), 1fr)); }
:is(#hero-detail, #dr-detail) .hd-pass { margin-top: 5px; padding: 4px 8px; background: rgba(255, 227, 106, .07); border-left: 2px solid #ffe36a; line-height: 1.35; }
:is(#hero-detail, #dr-detail) .hd-pass b { color: #fff0a8; }

/* =====================================================================================================================
   v5.7b: «ПОСЛЕДНИЙ ПРИВАЛ ПЕРЕД БЕЗДНОЙ» — главное меню и «Зал героев» (драфт). Правила — tools/art/UI_BRIEF.md, раздел 11.
   Графика рисуется в uiart.js (initLobbyArt → CSS-переменные --lb-*, --rb-*), «пиксель» рамок и украшений — 3 px кадра,
   сетка расстановки — 8 px (public/js/lobbylayout.js). Без класса html.lbart (графика не нарисовалась) — прежний вид.
   Размеры рамок: плита — срез 36, ширина 36px, вынос 9px, бордюр 15px; табличка-кнопка — срез 12 fill; карточка — срез 15;
   ленты: «ГОТОВ»/драфт-кнопка — бока 75px, вынос 51px, концы 24px, высота 96px; заголовок драфта — 69/57/12/105;
   ленты-заголовки панелей — 42/33/9/54.
   ===================================================================================================================== */
@keyframes lbSway { 0%, 100% { transform: rotate(-3.5deg); } 50% { transform: rotate(3.5deg); } }
@keyframes lbFlame { 0% { background-position: 0 0; } 50% { background-position: -45px 0; } }
@keyframes lbFlick { 0%, 100% { opacity: .92; } 35% { opacity: .74; } 60% { opacity: 1; } 80% { opacity: .84; } }
@keyframes lbBreath { 0%, 100% { opacity: .62; } 50% { opacity: .95; } }
@keyframes lbTwinkle { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .55; transform: scale(.85); } }
@keyframes lbBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } }

/* ---- фон меню: Паладин светлее, края темнее (под панели) ---- */
html.lbart #lobbyvid { filter: brightness(.9) saturate(1.04) contrast(1.03); }
html.lbart .lobby-shade { background:
  radial-gradient(ellipse 22% 34% at 21% 50%, rgba(255,196,120,.10), transparent 72%),
  linear-gradient(90deg, rgba(9,8,12,.50) 0%, rgba(9,8,12,.06) 13%, rgba(9,8,12,0) 33%, rgba(9,8,12,.10) 50%, rgba(9,8,12,.52) 61%, rgba(9,8,12,.72) 100%),
  linear-gradient(0deg, rgba(9,8,12,.66) 0%, rgba(9,8,12,.18) 20%, rgba(9,8,12,0) 34%),
  linear-gradient(180deg, rgba(9,8,12,.40) 0%, rgba(9,8,12,0) 16%); }
html.lbart #lobby .lobby-wrap.lobby-stage { --tk: calc(var(--fst, 1.3) / 1.3); --fs: calc(var(--fst, 1.3) * 1.2); }

/* ---- общий вид плит: кованая рама с латунью (срез 36), внутри — тёмные «облака» на просвет ---- */
html.lbart .lobby-stage :is(#L-logo, #L-account, #L-players, #L-match, #L-addrs) {
  border: 15px solid transparent; border-image: var(--lb-frame) 36 / 36px / 9px stretch; box-shadow: none;
  background: var(--lb-tex) 0 0 / 192px 192px repeat; background-clip: padding-box; background-origin: padding-box; padding: 16px 20px 18px; }
html.lbart .lobby-stage #L-addrs { border-image-source: var(--lb-frame-iron); }
html.lbart .lobby-stage :is(#L-account, #L-players, #L-match, #L-addrs, #L-logo) { box-shadow: 0 9px 0 rgba(4,3,6,.34); } /* жёсткая тень вниз (не filter: внутри есть анимации) */
/* заголовок-лента панели (багровая, с хвостами) лежит на верхней кромке рамы */
html.lbart .lobby-stage .lm-head { display: flex; align-items: center; justify-content: flex-end; gap: 12px; min-height: 40px; margin: 0 0 8px; padding: 0; background: none; }
html.lbart .lobby-stage .lm-ttl { position: absolute; left: 30px; top: -29px; display: inline-flex; align-items: center; height: var(--rb-head-h); margin: 0;
  border-style: solid; border-color: transparent; border-width: 0 9px; border-image: var(--rb-head) 0 42 fill / 0 42px / 0 33px repeat stretch;
  padding: 0 14px var(--rb-head-pad); font: 800 calc(20px * var(--tk)) / 1 var(--f-text); letter-spacing: 4px; text-transform: uppercase; color: var(--gold-hi); text-shadow: 0 3px 0 #2a0508; white-space: nowrap; }
html.lbart .lobby-stage .lm-cnt { margin-right: auto; padding-left: 196px; font: 600 calc(16px * var(--tk)) var(--f-text); color: var(--text-2); letter-spacing: .5px; }
html.lbart .lobby-stage #L-match .lm-head { min-height: 0; margin: 0; }
/* v5.7 (просьба владельца): без багровых лент и фиолетовых кристаллов — заголовок панели простым золотым текстом в шапке */
html.lbart .lobby-stage .lm-ttl { position: static; height: auto; border: 0; border-image: none; padding: 0; font: 800 calc(18px * var(--tk)) / 1.1 var(--f-text); letter-spacing: 3px; text-shadow: 0 3px 0 var(--ink); }
/* шапка: название сверху, под ним счётчик (людей / ботов), кнопки справа на обе строки */
html.lbart .lobby-stage .lm-head { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; column-gap: 10px; row-gap: 3px; }
html.lbart .lobby-stage .lm-head .lm-ttl { grid-column: 1; grid-row: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html.lbart .lobby-stage .lm-head .lm-cnt { grid-column: 1; grid-row: 2; margin: 0; padding-left: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: calc(14px * var(--tk)); }
html.lbart .lobby-stage .lm-head .btn { grid-row: 1 / span 2; }
html.lbart .lobby-stage #L-match .lm-head { margin: 0 0 6px; }
.lobby-stage .lb-crys { display: none; }

/* ---- кнопки-таблички (железо; наведение — латунный обод; выбранное — золото; нажатие — вдавлено) ---- */
html.lbart :is(.lobby-stage, .dr-stage) .btn { height: 44px; padding: 0 8px; border: 12px solid transparent; border-image: var(--lb-btn) 12 fill / 12px stretch; background: none; box-shadow: none; filter: none;
  font: 700 calc(17px * var(--tk)) / 1 var(--f-text); letter-spacing: .3px; color: var(--text); text-shadow: 0 3px 0 rgba(0,0,0,.6); gap: 8px; white-space: nowrap; transition: transform 70ms; }
html.lbart :is(.lobby-stage, .dr-stage) .btn img.ic { margin: -6px 0; }
html.lbart :is(.lobby-stage, .dr-stage) .btn:hover:not(:disabled) { border-image-source: var(--lb-btn-hi); color: #fff; filter: none; box-shadow: none; }
html.lbart :is(.lobby-stage, .dr-stage) .btn:active:not(:disabled) { border-image-source: var(--lb-btn-dn); transform: translateY(3px); box-shadow: none; }
html.lbart :is(.lobby-stage, .dr-stage) .btn.on { border-image-source: var(--lb-btn-on); color: #2a1804; text-shadow: 0 2px 0 rgba(255,240,190,.5); }
html.lbart :is(.lobby-stage, .dr-stage) .btn:disabled { filter: none; color: var(--text-3); cursor: default; }
html.lbart :is(.lobby-stage, .dr-stage) .btn.on:disabled { color: #4a3210; filter: saturate(.75) brightness(.92); }
html.lbart :is(.lobby-stage, .dr-stage) .btn.sm { height: 40px; padding: 0 6px; font-size: calc(16px * var(--tk)); }

/* ---- вывеска «БЕЗДНА» висит на двух цепях; под ней — три подвески ---- */
html.lbart .lobby-stage #L-logo { display: flex; align-items: center; justify-content: center; overflow: visible; padding: 4px 12px 10px;
  background: var(--lb-tex-dark) 0 0 / 192px 192px repeat; background-clip: padding-box; }
html.lbart .lobby-stage #L-logo .t2 { position: relative; font-size: 108px; letter-spacing: 8px; line-height: 1; margin-left: 8px;
  filter: drop-shadow(0 6px 0 #4a2208) drop-shadow(0 3px 0 var(--ink)) drop-shadow(3px 0 0 var(--ink)) drop-shadow(-3px 0 0 var(--ink)); }
html.lbart .lobby-stage #L-logo::before { content: ''; position: absolute; left: calc(50% - 240px); top: calc(50% - 54px); width: 480px; height: 108px; background: var(--lb-glow-logo) 0 0 / 480px 108px no-repeat; opacity: .5; pointer-events: none; }
.lobby-stage .lb-chain { position: absolute; top: -66px; width: 21px; height: 72px; background: var(--lb-chain) 0 100% / 21px 30px repeat-y; pointer-events: none; }
.lobby-stage .lb-chain::after { content: ''; position: absolute; left: 0; bottom: -12px; width: 21px; height: 21px; background: var(--lb-eyelet) 0 0 / 21px 21px no-repeat; }
.lobby-stage .lb-chain.c1 { left: 66px; } .lobby-stage .lb-chain.c2 { right: 66px; }
.lobby-stage .lb-pend { position: absolute; top: calc(100% + 9px); width: 27px; height: 69px; background: var(--lb-spark) 0 0 / 27px 69px no-repeat; transform-origin: 50% 0; animation: lbSway 4.4s ease-in-out infinite; pointer-events: none; }
.lobby-stage #L-logo .lb-pend.p1 { left: 92px; animation-delay: -1.3s; }
.lobby-stage #L-logo .lb-pend.p2 { left: calc(50% - 13px); height: 81px; background-image: var(--lb-gem); background-size: 27px 81px; animation-duration: 5.2s; }
.lobby-stage #L-logo .lb-pend.p3 { right: 92px; animation-delay: -2.9s; }
.lobby-stage #L-logo .lb-pend.p2::after { content: ''; position: absolute; left: -77px; top: 18px; width: 180px; height: 120px; background: var(--lb-glow-abyss) 0 0 / 180px 120px no-repeat; opacity: .55; z-index: -1; }

/* ---- фонарь привала: висит на цепи между видом на пропасть и отрядом ---- */
.lobby-stage .lb-lantern { position: absolute; left: 1136px; top: 0; width: 45px; height: 330px; pointer-events: none; z-index: 1; }
.lobby-stage .lb-lantern::before { content: ''; position: absolute; left: 12px; top: 0; width: 21px; height: 258px; background: var(--lb-chain) 0 100% / 21px 30px repeat-y; }
.lobby-stage .lb-lantern b { position: absolute; left: 0; top: 252px; width: 45px; height: 75px; background: var(--lb-lantern) 0 0 / 90px 75px no-repeat; animation: lbFlame 1.1s steps(1) infinite; }
.lobby-stage .lb-lantern::after { content: ''; position: absolute; left: -82px; top: 183px; width: 210px; height: 210px; background: var(--lb-glow-lamp) 0 0 / 210px 210px no-repeat; animation: lbFlick 2.6s steps(1) infinite; z-index: -1; }
html:not(.lbart) .lobby-stage :is(.lb-lantern, .lb-chain, .lb-pend, .lb-crest, .lb-crys, .lb-swords) { display: none; }

/* ---- табличка имени под ногами героя: герб сверху, имя по центру, вход/регистрация ---- */
html.lbart .lobby-stage #L-account { padding: 26px 22px 16px; overflow: visible; }
.lobby-stage .lb-crest { position: absolute; left: calc(50% - 55px); top: -51px; width: 111px; height: 57px; background: var(--lb-crest) 0 0 / 111px 57px no-repeat; pointer-events: none; }
html.lbart .lobby-stage #L-account .lbl { margin: 0 0 8px; text-align: center; font: 700 calc(14px * var(--tk)) / 1 var(--f-text); letter-spacing: 4px; color: var(--brass); }
html.lbart .lobby-stage #L-account input#name { display: block; height: 54px; padding: 0 12px; text-align: center; font: 700 calc(26px * var(--tk)) / 1 var(--f-text); letter-spacing: .5px; color: var(--gold-hi);
  background: rgba(9,8,12,.72); border: 0; box-shadow: inset 0 0 0 3px var(--ink), inset 0 9px 0 rgba(0,0,0,.4), 0 3px 0 rgba(255,236,190,.08); }
html.lbart .lobby-stage #L-account input#name:focus { box-shadow: inset 0 0 0 3px var(--gold), inset 0 9px 0 rgba(0,0,0,.4), 0 3px 0 rgba(255,236,190,.08); }
html.lbart .lobby-stage #L-account input#name.locked { color: #c8ffc0; }
html.lbart .lobby-stage #L-account .acc-box { margin-top: 10px; gap: 10px 12px; justify-content: center; }
html.lbart .lobby-stage #L-account .acc-line { text-align: center; font: 500 calc(15px * var(--tk)) / 1.3 var(--f-text); color: var(--text-2); }
html.lbart .lobby-stage #L-account .acc-box .btn { flex: 1; height: 46px; }
html.lbart .lobby-stage #L-account .acc-box.in { background: none; box-shadow: none; padding: 2px 0 0; }
html.lbart .lobby-stage #L-account .acc-who { font: 500 calc(16px * var(--tk)) var(--f-text); }
html.lbart .lobby-stage #L-account .acc-box.in .btn { flex: 0 0 auto; padding: 0 14px; }
.lobby-stage .lb-crys { position: absolute; width: 78px; height: 66px; background: var(--lb-crystals) 0 0 / 78px 66px no-repeat; pointer-events: none; }
.lobby-stage .lb-crys::before { content: ''; position: absolute; left: -51px; top: -18px; width: 180px; height: 120px; background: var(--lb-glow-abyss) 0 0 / 180px 120px no-repeat; opacity: .7; z-index: -1; animation: lbBreath 4.6s steps(3) infinite; }
.lobby-stage #L-account .lb-crys.l { right: -48px; bottom: -30px; background-image: var(--lb-crystals-m); }
.lobby-stage #L-addrs .lb-crys.r { left: -48px; bottom: -30px; }

/* ---- таблички разделов висят на цепях с верхнего края ---- */
html.lbart .lobby-stage .nav-btn { height: 54px; padding: 0 4px; justify-content: center; font-size: calc(18px * var(--tk)); overflow: visible; }
.lobby-stage .nav-btn::before, .lobby-stage .nav-btn::after { content: ''; position: absolute; top: -30px; width: 21px; height: 33px; background: var(--lb-chain) 0 100% / 21px 30px repeat-y; pointer-events: none; }
.lobby-stage .nav-btn::before { left: 6px; } .lobby-stage .nav-btn::after { right: 6px; }
html:not(.lbart) .lobby-stage .nav-btn::before, html:not(.lbart) .lobby-stage .nav-btn::after { display: none; }
html.lbart .lobby-stage #btn-heroes { border-color: transparent; }

/* ---- отряд: 10 мест в столбик, самоцвет цвета игрока, бирки ---- */
html.lbart .lobby-stage #L-players { padding: 14px 20px 16px; }
html.lbart .lobby-stage #slots { display: flex; flex-direction: column; gap: 3px; }
html.lbart .lobby-stage .slot { height: 36px; min-height: 0; margin: 0; padding: 0 8px 0 10px; gap: 10px; border: 0; background: rgba(9,8,12,.46); box-shadow: inset 0 3px 0 rgba(0,0,0,.3); }
html.lbart .lobby-stage .slot.me { background: linear-gradient(90deg, rgba(240,191,76,.20), rgba(240,191,76,.04) 70%), rgba(9,8,12,.46); box-shadow: inset 3px 0 0 var(--gold), inset 0 3px 0 rgba(0,0,0,.3); }
html.lbart .lobby-stage .slot.empty { background: none; box-shadow: inset 0 -3px 0 rgba(255,255,255,.035); }
html.lbart .lobby-stage .slot .dot { width: 21px; height: 21px; border: 0; box-shadow: none; flex: none; background: var(--lb-gem-over) 0 0 / 21px 21px, var(--pc, #4c4458);
  -webkit-mask: var(--lb-gem-mask) 0 0 / 21px 21px no-repeat; mask: var(--lb-gem-mask) 0 0 / 21px 21px no-repeat; }
html.lbart .lobby-stage .slot.empty .dot { background: var(--lb-gem-over) 0 0 / 21px 21px, #221e2a; opacity: .45; }
html.lbart .lobby-stage .slot .sn { gap: 6px; font: 600 calc(19px * var(--tk)) / 1 var(--f-text); color: var(--text); min-width: 0; white-space: nowrap; overflow: hidden; }
html.lbart .lobby-stage .slot.empty .sn { font: italic 500 calc(16px * var(--tk)) / 1 var(--f-text); color: var(--text-3); }
html.lbart .lobby-stage .slot .sn .you { font: 800 calc(12px * var(--tk)) / 1 var(--f-text); padding: 3px 6px; color: #2a1804; background: var(--gold); box-shadow: inset 0 -3px 0 var(--gold-lo); text-shadow: none; letter-spacing: 1px; }
html.lbart .lobby-stage .slot .rate-tag { font: 700 calc(14px * var(--tk)) / 1 var(--f-text); margin-left: 4px; }
html.lbart .lobby-stage .slot .tag { font: 800 calc(12px * var(--tk)) / 1 var(--f-text); letter-spacing: 1.5px; padding: 5px 8px; box-shadow: inset 0 0 0 3px rgba(9,8,12,.55); gap: 2px; }
html.lbart .lobby-stage .slot .tag.host { color: var(--gold-hi); background: #4a3410; }
html.lbart .lobby-stage .slot .tag.bot { color: #b8dcff; background: #1d3048; }
html.lbart .lobby-stage .slot .tag.ready { color: #d6ffcc !important; background: #24502c; }
html.lbart .lobby-stage .slot .tag.wait { font: italic 500 calc(14px * var(--tk)) / 1 var(--f-text); letter-spacing: .3px; color: var(--text-3); background: none; box-shadow: none; padding: 0 2px; }
html.lbart .lobby-stage .slot .tm { font: 800 calc(13px * var(--tk)) / 1 var(--f-text); padding: 5px 8px; background: rgba(9,8,12,.8); box-shadow: inset 0 0 0 3px currentColor; }
html.lbart .lobby-stage .slot .x { height: auto; border: 0; padding: 0 2px; }
html.lbart .lobby-stage .slot .x img.ic { width: 24px; height: 24px; }
html.lbart .lobby-stage #specs { margin: 10px 0 0; font: 500 calc(15px * var(--tk)) var(--f-text); color: var(--text-2); }
html.lbart .lobby-stage #btn-spec { flex: none; height: 40px; padding: 0 6px; font-size: calc(15px * var(--tk)); }
html.lbart .lobby-stage #btn-spec.on { border-image-source: var(--lb-btn-hi); color: #c8ffc0; text-shadow: 0 3px 0 rgba(0,0,0,.6); }

/* ---- настройки матча ---- */
html.lbart .lobby-stage #L-match { padding: 32px 20px 12px; }
html.lbart .lobby-stage #L-match #settings { margin: 0; padding: 0; background: none; border: 0; box-shadow: none; }
html.lbart .lobby-stage #L-match .set-row { display: flex; flex-wrap: nowrap; align-items: center; gap: 6px; margin: 0 0 4px; }
html.lbart .lobby-stage #L-match .set-row > span:first-child { flex: none; width: 112px; min-width: 0; font: 700 calc(14px * var(--tk)) / 1 var(--f-text); letter-spacing: 2.5px; color: var(--brass); text-transform: uppercase; }
html.lbart .lobby-stage #L-match .set-row > span:not(:first-child) { display: flex; gap: 6px; }
html.lbart .lobby-stage #L-match .set-row .btn.sm { min-width: 52px; }
html.lbart .lobby-stage #L-match #set-info { margin: 6px 0 0; font: 500 calc(16px * var(--tk)) / 1.3 var(--f-text); color: var(--text-2); }

/* ---- главное действие: кованая плита «ГОТОВ» с багровыми лентами, скрещённые мечи, жар углей, подвески ---- */
html.lbart .lobby-stage #L-ready { display: block; z-index: 3; overflow: visible; }
html.lbart .lobby-stage #L-ready::after { content: ''; position: absolute; z-index: 0; left: calc(50% - 300px); top: calc(50% - 102px); width: 600px; height: 186px; background: var(--lb-glow-ember) 0 0 / 600px 186px no-repeat; animation: lbBreath 3.4s steps(4) infinite; pointer-events: none; }
html.lbart .lobby-stage #L-ready:hover::after { animation: none; opacity: 1; }
.lobby-stage .lb-swords { position: absolute; z-index: 1; left: calc(50% - 54px); top: -62px; width: 108px; height: 108px; background: var(--lb-swords) 0 0 / 108px 108px no-repeat; pointer-events: none; }
html.lbart .lobby-stage #btn-ready { position: relative; z-index: 2; width: 100%; height: var(--rb-ready-h) !important; margin: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  border-style: solid; border-color: transparent; border-width: 0 24px; border-image: var(--rb-ready) 0 75 fill / 0 75px / 0 51px repeat stretch;
  background: none; box-shadow: none; padding: 0 0 var(--rb-ready-pad) !important; font: 900 calc(46px * var(--tk)) / 1 var(--f-text) !important; letter-spacing: 14px; text-indent: 14px;
  color: #3b2306; text-shadow: 0 3px 0 rgba(255,238,176,.62); }
html.lbart .lobby-stage #btn-ready:hover { border-image-source: var(--rb-ready); filter: brightness(1.1) saturate(1.06); color: #2a1702; }
html.lbart .lobby-stage #btn-ready:active { border-image-source: var(--rb-ready); transform: translateY(3px); }
html.lbart .lobby-stage #btn-ready.on { border-image-source: var(--rb-ready-on); gap: 5px; letter-spacing: 6px; text-indent: 6px; font-size: calc(30px * var(--tk)) !important; padding-top: 0 !important; }
html.lbart .lobby-stage #btn-ready .rb-sub { font: 700 calc(13px * var(--tk)) / 1 var(--f-text); letter-spacing: 1px; text-indent: 0; color: #6a4614; text-shadow: none; margin-bottom: 6px; }
.lobby-stage #L-ready .lb-pend.r1 { left: -44px; top: 93px; z-index: 1; animation-delay: -.7s; }
.lobby-stage #L-ready .lb-pend.r2 { right: -44px; top: 93px; z-index: 1; animation-delay: -2.1s; }
html.lbart .lobby-stage #L-ready .lb-pend { height: 69px; }
/* кнопки хоста под плитой */
html.lbart .lobby-stage #L-host #host-ctrl { gap: 12px; }
/* v5.7: счётчик ботов вынесен из кнопок хоста — его видят все; у не-хоста только число */
html.lbart .lobby-stage #L-host { gap: 12px; }
#bot-cnt.ro .bc-mid { cursor: default; }
#bot-cnt.ro .bc-b { opacity: .45; }
html.lbart .lobby-stage #L-host .btn { height: 60px; }
html.lbart .lobby-stage #btn-bot { flex: 0 0 170px; font-size: calc(16px * var(--tk)); }
/* v5.7: число ботов — поле и кнопки − / + (вместо «Добавить бота») */
#bot-cnt { display: flex; align-items: stretch; gap: 4px; }
#bot-cnt .bc-mid { display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 64px; background: var(--ink); border: 2px solid var(--stone-6); padding: 2px 6px; cursor: text; }
#bot-cnt .bc-mid:focus-within { box-shadow: inset 0 0 0 2px var(--gold); }
#bot-cnt .bc-mid span { font: 700 calc(11px * var(--fs, 1)) / 1 var(--f-text); letter-spacing: 2px; text-transform: uppercase; color: var(--brass); }
#bot-cnt input { width: 3ch; background: none; border: 0; outline: none; box-shadow: none; text-align: center; font: 700 calc(22px * var(--fs, 1)) / 1.1 var(--f-num); color: var(--gold-hi); padding: 0; margin: 0; }
#bot-cnt .bc-b { min-width: 40px; padding: 0 6px; font-size: calc(24px * var(--fs, 1)); }
html.lbart .lobby-stage #bot-cnt { flex: 0 0 196px; height: 60px; gap: 6px; }
html.lbart .lobby-stage #bot-cnt .bc-b { flex: 0 0 48px; height: 60px; padding: 0; font: 800 calc(26px * var(--tk)) / 1 var(--f-text); }
html.lbart .lobby-stage #bot-cnt .bc-mid { flex: 1; min-width: 0; border: 12px solid transparent; border-image: var(--lb-btn-dn) 12 fill / 12px stretch; background: none; padding: 0; gap: 3px; }
html.lbart .lobby-stage #bot-cnt .bc-mid span { font-size: calc(11px * var(--tk)); }
html.lbart .lobby-stage #bot-cnt input { width: 100%; font-size: calc(24px * var(--tk)); }
html.lbart .lobby-stage #btn-start { flex: 1; border-image-source: var(--lb-btn-hi); font: 800 calc(20px * var(--tk)) / 1 var(--f-text) !important; letter-spacing: 2px; color: var(--gold-hi); text-shadow: 0 3px 0 rgba(0,0,0,.65); padding: 0 8px !important; }
html.lbart .lobby-stage #btn-start:hover { filter: brightness(1.18); color: #fff3c4; }
html.lbart .lobby-stage #L-host #wait-host { border: 12px solid transparent; border-image: var(--lb-btn-dn) 12 fill / 12px stretch; background: none; box-shadow: none; font: 600 calc(17px * var(--tk)) var(--f-text); color: var(--text-2); letter-spacing: .5px; }

/* ---- адреса для друзей ---- */
html.lbart .lobby-stage #L-addrs { margin: 0; padding: 12px 20px 12px; overflow: visible; display: flex; align-items: center; gap: 20px; }
html.lbart .lobby-stage #L-addrs .lbl { flex: 0 0 210px; margin: 0; font: 700 calc(13px * var(--tk)) / 1.45 var(--f-text); letter-spacing: 2.5px; color: var(--brass); }
html.lbart .lobby-stage #addrs { font: 700 calc(19px * var(--tk)) / 1.3 var(--f-num); color: #a6f2b4; text-shadow: 0 2px 0 rgba(0,0,0,.6); }
html.lbart .lobby-stage #addrs div { padding: 1px 0; }
html.lbart #lb-stats { font: 600 13px var(--f-text); color: var(--text-3); text-shadow: 0 2px 0 rgba(0,0,0,.6); }

/* =================================================== «ЗАЛ ГЕРОЕВ» (драфт) =================================================== */
body.drafting #lobby :is(.lobby-stage, #lb-stats) { visibility: hidden; }
html.lbart #draft { background: radial-gradient(ellipse 50% 34% at 33% 0%, rgba(178,30,42,.30), transparent 72%), linear-gradient(rgba(9,8,12,.70), rgba(9,8,12,.84)); }
html.lbart #draft.pick { background: radial-gradient(ellipse 50% 34% at 33% 0%, rgba(214,150,40,.24), transparent 72%), linear-gradient(rgba(9,8,12,.70), rgba(9,8,12,.84)); }
html.lbart #draft .dr-wrap.dr-stage { position: relative; display: block; width: 1920px; height: 1080px; padding: 0; gap: 0; flex: none; --tk: calc(var(--fst, 1.3) / 1.3); font-size: 16px; }
html.lbart .dr-stage #dr-cancel { position: absolute; left: 56px; top: 40px; height: 44px; font-size: calc(15px * var(--tk)); z-index: 2; }
/* заголовок-лента: багровая на банах, золотая на пиках, зелёная — «Герои выбраны» */
html.lbart .dr-stage .dr-head { position: absolute; left: 40px; top: 18px; width: 1200px; text-align: center; }
html.lbart .dr-stage #dr-title { display: inline-flex; align-items: center; height: var(--rb-title-red-h); border-style: solid; border-color: transparent; border-width: 0 12px;
  border-image: var(--rb-title-red) 0 69 fill / 0 69px / 0 57px repeat stretch; padding: 0 40px var(--rb-title-red-pad); line-height: 1;
  font: 900 calc(50px * var(--tk)) / 1 var(--f-text); letter-spacing: 5px; color: #fff1ea; text-shadow: 0 4px 0 #3a0810; }
html.lbart .dr-stage #dr-title.st-pick { border-image-source: var(--rb-title-gold); color: #2e1a04; text-shadow: 0 3px 0 rgba(255,244,196,.55); }
html.lbart .dr-stage #dr-title.st-done { border-image-source: var(--rb-title-green); color: #effff0; text-shadow: 0 4px 0 #062a12; }
html.lbart .dr-stage #dr-sub { margin-top: 2px; min-height: 30px; font: 600 calc(20px * var(--tk)) / 1.3 var(--f-text); color: var(--text); text-shadow: 0 2px 0 rgba(0,0,0,.7); }
html.lbart .dr-stage #dr-sub .you { color: #ff8a8a; font-weight: 800; }
/* медальон-таймер: латунное кольцо, 12 огоньков оставшегося времени (рисует uiart.drawClock), цифры поверх */
html.lbart .dr-stage #dr-clock { position: absolute; left: 1094px; top: 10px; width: 138px; height: 138px; }
html.lbart .dr-stage #dr-clock.hidden { display: none; }
html.lbart .dr-stage #dr-ring { width: 138px; height: 138px; image-rendering: pixelated; display: block; }
html.lbart .dr-stage #dr-clock #dr-timer { position: absolute; inset: 0; right: auto; width: 138px; display: flex; align-items: center; justify-content: center; min-width: 0; padding: 0 0 3px; margin: 0;
  border: 0; border-image: none; background: none; box-shadow: none; font: 800 calc(46px * var(--tk)) / 1 var(--f-num); font-variant-numeric: tabular-nums; color: var(--gold-hi); text-shadow: 0 3px 0 var(--ink); }
html.lbart .dr-stage #dr-clock #dr-timer.warn { color: #ff7a7a; }
/* очередь игроков: таблички с самоцветом цвета игрока, его бан и его герой; чей ход — красная рамка и стрелка */
html.lbart .dr-stage #dr-players { position: absolute; left: 40px; top: 186px; width: 1200px; height: 92px; display: flex; flex-wrap: nowrap; justify-content: center; gap: 10px; }
html.lbart .dr-stage #dr-players .dp { position: relative; flex: 1 1 0; min-width: 0; max-width: 236px; height: 92px; padding: 0 4px; border: 12px solid transparent; border-image: var(--lb-btn) 12 fill / 12px stretch; background: none; box-shadow: none; }
html.lbart .dr-stage #dr-players .dp.turn { border-image-source: var(--lb-card-ban); }
html.lbart .dr-stage #dr-players .dp.turn::after { content: ''; position: absolute; left: calc(50% - 16px); top: -33px; width: 33px; height: 24px; background: var(--lb-marker) 0 0 / 33px 24px no-repeat; animation: lbBob .7s steps(2) infinite; }
html.lbart .dr-stage #dr-players .dp.me { border-image-source: var(--lb-btn-hi); }
html.lbart .dr-stage #dr-players .dp.me.turn { border-image-source: var(--lb-card-ban); }
html.lbart .dr-stage #dr-players .dp-name { display: flex; align-items: center; gap: 6px; max-width: none; font: 700 calc(16px * var(--tk)) / 1.2 var(--f-text); color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html.lbart .dr-stage #dr-players .dp-name::before { content: ''; flex: none; width: 21px; height: 21px; background: var(--lb-gem-over) 0 0 / 21px 21px, var(--pc); -webkit-mask: var(--lb-gem-mask) 0 0 / 21px 21px no-repeat; mask: var(--lb-gem-mask) 0 0 / 21px 21px no-repeat; }
html.lbart .dr-stage #dr-players .dp-row { margin-top: 4px; min-height: 40px; gap: 6px; }
html.lbart .dr-stage #dr-players .dp-ban { width: 30px; height: 40px; border: 0; background: rgba(9,8,12,.7); box-shadow: inset 0 0 0 3px #3a0a10; }
html.lbart .dr-stage #dr-players .dp-ban.empty { box-shadow: inset 0 0 0 3px rgba(255,255,255,.06); color: var(--text-3); }
html.lbart .dr-stage #dr-players .dp-ban:not(.empty)::after { inset: 2px -3px; background: var(--lb-banx-s) center / 36px 36px no-repeat; }
html.lbart .dr-stage #dr-players .dp-pick { width: 30px; height: 40px; object-fit: contain; }
html.lbart .dr-stage #dr-players .dp-hn { font: 600 calc(15px * var(--tk)) / 1.2 var(--f-text); }
html.lbart .dr-stage #dr-players .dp-tm { font: 800 calc(12px * var(--tk)) var(--f-text); }
/* сетка героев: карточки-таблички 124×180, по центру; наведение — латунь, выбор — золото с искрой, бан — крест, взят — цвет игрока */
html.lbart .dr-stage #dr-grid { position: absolute; left: 40px; top: 302px; width: 1200px; height: 770px; display: flex; flex-wrap: wrap; justify-content: center; align-content: flex-start; gap: 10px; overflow: visible; padding: 0; }
html.lbart .dr-stage .dcard { position: relative; width: 124px; height: 180px; padding: 0 0 6px; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 2px;
  border: 12px solid transparent; border-image: var(--lb-card) 15 / 15px stretch; background: rgba(12,10,16,.8); background-clip: padding-box; box-shadow: none; filter: none; transition: transform 70ms; }
html.lbart .dr-stage .dcard::before { content: ''; position: absolute; left: calc(50% - 45px); top: 14px; width: 90px; height: 66px; background: var(--hc); -webkit-mask: var(--lb-glow-card) 0 0 / 90px 66px no-repeat; mask: var(--lb-glow-card) 0 0 / 90px 66px no-repeat; opacity: .26; pointer-events: none; }
html.lbart .dr-stage .dcard img { position: relative; flex: none; margin: auto 0 4px; image-rendering: pixelated; }
html.lbart .dr-stage .dcard .dn { position: relative; max-width: 100%; margin: 0; font: 800 calc(15px * var(--tk)) / 1.05 var(--f-text); letter-spacing: -.2px; text-shadow: 0 2px 0 var(--ink); overflow-wrap: normal; }
html.lbart .dr-stage .dcard .dn.long { font-size: calc(13px * var(--tk)); }
html.lbart .dr-stage .dcard .dr { position: relative; font: 500 calc(13px * var(--tk)) / 1.1 var(--f-text); color: var(--text-3); }
html.lbart .dr-stage .dcard:not(.off):hover { border-image-source: var(--lb-card-hi); transform: translateY(-3px); box-shadow: none; filter: none; }
html.lbart .dr-stage .dcard:not(.off):hover::before { opacity: .6; }
html.lbart .dr-stage .dcard.sel { border-image-source: var(--lb-card-sel); background: linear-gradient(rgba(240,191,76,.14), rgba(240,191,76,.02)), rgba(12,10,16,.8); background-clip: padding-box; box-shadow: none; }
html.lbart .dr-stage .dcard.sel::before { opacity: .7; }
html.lbart .dr-stage .dcard.sel::after { content: ''; position: absolute; right: -24px; top: -27px; width: 27px; height: 33px; background: var(--lb-star) 0 0 / 27px 33px no-repeat; animation: lbTwinkle 1.4s steps(3) infinite; pointer-events: none; }
html.lbart .dr-stage .dcard.ban { border-image-source: var(--lb-card-ban); opacity: 1; }
html.lbart .dr-stage .dcard.ban img { filter: grayscale(1) brightness(.42); }
html.lbart .dr-stage .dcard.ban .dn { filter: grayscale(1) brightness(.6); }
html.lbart .dr-stage .dcard.ban::before { opacity: 0; }
html.lbart .dr-stage .dcard.ban .dx { display: block; position: absolute; inset: auto; left: calc(50% - 39px); top: 14px; width: 78px; height: 78px; background: var(--lb-banx) 0 0 / 78px 78px no-repeat; }
html.lbart .dr-stage .dcard.taken { opacity: 1; box-shadow: inset 0 0 0 3px var(--pc); }
html.lbart .dr-stage .dcard.taken img { filter: grayscale(.85) brightness(.55); }
html.lbart .dr-stage .dcard.taken .dn { filter: grayscale(.7) brightness(.75); }
html.lbart .dr-stage .dcard.taken::before { background: var(--pc); opacity: .28; }
html.lbart .dr-stage .dcard.taken.mine { box-shadow: inset 0 0 0 3px var(--pc), inset 0 0 0 6px rgba(9,8,12,.7); }
html.lbart .dr-stage .dcard.taken.mine img, html.lbart .dr-stage .dcard.taken.mine .dn { filter: none; }
html.lbart .dr-stage .dcard.taken.mine::before { opacity: .6; }
html.lbart .dr-stage .dcard .dw { position: absolute; left: -3px; right: -3px; top: -3px; padding: 3px 2px; font: 800 calc(12px * var(--tk)) / 1.1 var(--f-text); text-align: center; color: var(--pc); background: rgba(9,8,12,.86); box-shadow: 0 3px 0 rgba(0,0,0,.35); }
html.lbart .dr-stage .dcard.ban .dw { color: #ff9a9a; }
html.lbart .dr-stage .dcard.off { cursor: var(--cur-hand, pointer); }
/* справа — выбранный герой крупно, под ним кованая кнопка */
html.lbart .dr-stage .dr-side { position: absolute; left: 1272px; top: 36px; width: 608px; height: 1012px; display: flex; flex-direction: column; gap: 18px; }
html.lbart .dr-stage #dr-detail { flex: 1 1 0; min-height: 0; height: auto !important; margin: 0; overflow: hidden !important; padding: 18px 20px 16px !important;
  border: 15px solid transparent !important; border-image: var(--lb-frame) 36 / 36px / 9px stretch !important; background: var(--lb-tex-dark) 0 0 / 192px 192px repeat !important; background-clip: padding-box !important; box-shadow: none !important; }
html.lbart .dr-stage #dr-detail .hd-top { position: relative; display: grid; grid-template-columns: auto 1fr; gap: 6px 20px; align-items: start; margin-bottom: 10px; }
html.lbart .dr-stage #dr-detail .hd-top::before { content: ''; position: absolute; left: -24px; top: 6px; width: 180px; height: 132px; background: var(--hc); -webkit-mask: var(--lb-glow-big) 0 0 / 180px 132px no-repeat; mask: var(--lb-glow-big) 0 0 / 180px 132px no-repeat; opacity: .38; pointer-events: none; }
html.lbart .dr-stage #dr-detail .hd-top canvas { position: relative; margin: 4px 0 0; image-rendering: pixelated; }
html.lbart .dr-stage #dr-detail .hd-name { display: inline-flex; align-items: center; height: var(--rb-name-h); margin: 0 0 6px 33px; border-style: solid; border-color: transparent; border-width: 0 9px;
  border-image: var(--rb-name) 0 42 fill / 0 42px / 0 33px repeat stretch; padding: 0 14px var(--rb-name-pad); font: 800 calc(26px * var(--tk)) / 1 var(--f-text); letter-spacing: 1px; text-shadow: 0 3px 0 var(--ink); white-space: nowrap; }
html.lbart .dr-stage #dr-detail .hd-desc { font: 500 calc(17px * var(--tk)) / 1.35 var(--f-text); color: var(--text); }
html.lbart .dr-stage #dr-detail .hd-stats { margin-top: 4px; font: 500 calc(15px * var(--tk)) / 1.3 var(--f-text); color: var(--text-2); }
html.lbart .dr-stage #dr-detail .hd-pass { margin-top: 10px; padding: 8px 12px; font: 500 calc(16px * var(--tk)) / 1.38 var(--f-text); color: #ffe9b0; background: rgba(240,191,76,.08); border: 0; box-shadow: inset 3px 0 0 var(--gold); }
html.lbart .dr-stage #dr-detail .hd-pass b { color: var(--gold-hi); }
html.lbart .dr-stage #dr-detail .hd-abs { display: grid; grid-template-columns: 1fr; gap: 0; }
html.lbart .dr-stage #dr-detail .hd-ab { display: grid; grid-template-columns: 54px 1fr; gap: 14px; align-items: start; padding: 12px 0 10px; border-top: 3px solid rgba(9,8,12,.85); box-shadow: 0 -3px 0 rgba(255,255,255,.04); }
html.lbart .dr-stage #dr-detail .hd-ab img { margin: 3px; border: 0; box-shadow: 0 0 0 3px var(--ink), 0 0 0 6px #3a3346; background: #0d0b11; }
html.lbart .dr-stage #dr-detail .hd-an { font: 700 calc(18px * var(--tk)) / 1.2 var(--f-text); }
html.lbart .dr-stage #dr-detail .hd-an small { font: 500 calc(14px * var(--tk)) var(--f-text); color: var(--text-2); }
html.lbart .dr-stage #dr-detail .hd-k { min-width: 40px; padding: 3px 6px; margin-right: 8px; font: 800 calc(13px * var(--tk)) / 1 var(--f-text); color: var(--gold-hi); background: var(--ink); box-shadow: inset 0 0 0 3px #3a3346; border: 0; }
html.lbart .dr-stage #dr-detail .hd-ad { margin-top: 3px; font: 400 calc(16px * var(--tk)) / 1.35 var(--f-text); color: var(--text); }
html.lbart .dr-stage #dr-detail .hd-ab .hd-stats { font-size: calc(14px * var(--tk)); }
html.lbart .dr-stage .dr-act { flex: none; height: 112px; display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 0 16px; min-width: 0; }
html.lbart .dr-stage #dr-rand { flex: 0 0 150px; height: 60px; padding: 0 6px; font-size: calc(17px * var(--tk)); }
html.lbart .dr-stage #dr-go { flex: 0 1 330px; min-width: 0; height: var(--rb-ready-h); margin: 0 51px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  border-style: solid; border-color: transparent; border-width: 0 24px; border-image: var(--rb-ready) 0 75 fill / 0 75px / 0 51px repeat stretch;
  background: none; box-shadow: none; padding: 0 0 var(--rb-ready-pad); font: 900 calc(30px * var(--tk)) / 1 var(--f-text); letter-spacing: 1px; color: #3b2306; text-shadow: 0 3px 0 rgba(255,238,176,.62); white-space: nowrap; }
html.lbart .dr-stage #dr-rand.hidden + #dr-go { flex-basis: 400px; }
html.lbart .dr-stage #dr-go small { font: 800 calc(14px * var(--tk)) / 1 var(--f-text); letter-spacing: 4px; color: #6a4410; text-shadow: none; }
html.lbart .dr-stage #dr-go b { font-weight: 900; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
html.lbart .dr-stage #dr-go:hover:not(:disabled) { border-image-source: var(--rb-ready); filter: brightness(1.1); color: #2a1702; }
html.lbart .dr-stage #dr-go:active:not(:disabled) { border-image-source: var(--rb-ready); }
html.lbart .dr-stage #dr-go.ban, html.lbart .dr-stage #dr-go.ban:hover:not(:disabled), html.lbart .dr-stage #dr-go.ban:active:not(:disabled) { border-image-source: var(--rb-ban); background: none; box-shadow: none; color: #fff0ea; text-shadow: 0 3px 0 #3a0810; }
html.lbart .dr-stage #dr-go.ban small { color: #ffb0a8; }
html.lbart .dr-stage #dr-go:disabled { filter: grayscale(.55) brightness(.72); font-size: calc(20px * var(--tk)); }

/* ---- «Список героев» (окно из меню) — в той же системе: кованая рама, лента-заголовок ---- */
html.lbart #herolist .hl-box { border: 15px solid transparent; border-image: var(--lb-frame) 36 / 36px / 9px stretch; background: var(--lb-tex-dark) 0 0 / 192px 192px repeat; background-clip: padding-box; box-shadow: none; padding: 14px 20px 18px; overflow: visible; }
html.lbart #herolist .hl-head { position: relative; padding-left: 0; margin-bottom: 12px; }
html.lbart #herolist .hl-head .hint { margin-left: 30px; }
html.lbart #herolist .hl-head b { display: inline-flex; align-items: center; height: var(--rb-head-h); margin-left: 33px; border-style: solid; border-color: transparent; border-width: 0 9px;
  border-image: var(--rb-head) 0 42 fill / 0 42px / 0 33px repeat stretch; padding: 0 16px var(--rb-head-pad); font: 800 calc(20px * var(--fs, 1)) / 1 var(--f-text); letter-spacing: 3px; text-transform: uppercase; color: var(--gold-hi); text-shadow: 0 3px 0 #2a0508; }
html.lbart #herolist #hero-detail { border: 0 !important; background: rgba(9,8,12,.55) !important; box-shadow: inset 0 0 0 3px var(--ink), inset 6px 0 0 var(--hc, var(--gold)) !important; }
html.lbart .dr-stage #dr-detail.dr-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
html.lbart .dr-stage #dr-detail.dr-empty::before { content: ''; width: 108px; height: 108px; margin-bottom: 18px; background: var(--lb-swords) 0 0 / 108px 108px no-repeat; opacity: .45; }
html.lbart .dr-stage #dr-detail.dr-empty .hd-desc { max-width: 380px; font: 500 calc(18px * var(--tk)) / 1.4 var(--f-text); color: var(--text-2); }
html.lbart .lobby-stage #L-players:has(#specs:not(.hidden)) .slot { height: 32px; } /* есть наблюдатели — строки ниже, отряд не налезает на «Матч» */
/* блик по кованой плите «ГОТОВ» / «ВЫБРАТЬ»: узкие светлые полосы пробегают раз в 5 с (ступенчато) */
@keyframes lbGlint { 0% { background-position: -260px 0; } 22%, 100% { background-position: 560px 0; } }
html.lbart .lobby-stage #btn-ready, html.lbart .dr-stage #dr-go { overflow: hidden; position: relative; z-index: 2; }
html.lbart .lobby-stage #btn-ready::before, html.lbart .dr-stage #dr-go:not(:disabled):not(.ban)::before { content: ''; position: absolute; z-index: -1; left: 0; right: 0; top: 6px; bottom: calc(var(--rb-ready-pad) + 6px); pointer-events: none;
  background: linear-gradient(100deg, transparent 0 30px, rgba(255,250,228,.38) 30px 42px, transparent 42px 54px, rgba(255,250,228,.24) 54px 60px, transparent 60px) no-repeat; background-size: 200px 100%;
  animation: lbGlint 5s steps(28) infinite; }
html.lbart .lobby-stage #btn-ready.on::before { display: none; }
/* владелец сервера, но не хост: вместо «Ожидание хоста…» — сразу кнопка «Стать хостом» на всю строку (host.js) */
html.lbart .lobby-stage #L-host:has(#h-take:not(.hidden)) #wait-host { display: none; }
html.lbart .lobby-stage #L-host #h-take { flex: 1; height: 60px; margin: 0; font-size: calc(17px * var(--tk)); }
/* v5.7b: цепи всегда уходят за верх экрана — на экране выше 16:9 (полный экран, 16:10) кадр меню опускается, и короткие цепи висели «из ниоткуда» */
.lobby-stage .lb-chain { top: -1266px; height: 1272px; }
.lobby-stage .lb-lantern::before { top: -1200px; height: 1458px; }
.lobby-stage .nav-btn::before, .lobby-stage .nav-btn::after { top: -1230px; height: 1233px; }
/* v5.7: зритель во время закупки — только табличка «Игроки закупаются» (без магазина и кнопок) */
#prep.spect :is(#prep-hide, #prep-build, #prep-ready) { display: none !important; }
#prep.spect #prep-ttl { color: var(--gold-hi, #ffd860); }
/* v5.7: наблюдение — значок способности вспыхивает, когда наблюдаемый её нажал */
.ab.press { box-shadow: 0 0 0 2px #ffffff, 0 0 14px rgba(255,255,255,.75); transform: scale(1.08); transition: transform .05s; }

/* ===== v5.7: окно «Рейтинг» — «Последние матчи» (карточки и итоги матча) и «Герои» (ровные столбцы, сортировка) ===== */
.stats-panel { width: min(1200px, 96vw); }
#stats-body { max-height: min(700px, 74vh); overflow-y: auto; padding-right: 4px; }
.st-table th.num, .st-table td.num, .st-table th.c, .st-table td.c { text-align: center; }
.st-table thead th { position: sticky; top: 0; z-index: 1; background: var(--stone-8); }
canvas.pt { image-rendering: pixelated; vertical-align: middle; flex: none; }
canvas.pt.s1 { height: 30px; width: auto; margin-right: 8px; }
canvas.pt.s2 { height: 60px; width: auto; }
canvas.pt.s3 { height: 90px; width: auto; }
.mt-dim { color: var(--text-3); }
.mt-lbl { display: flex; align-items: center; gap: 5px; font: 700 calc(11px * var(--fs, 1)) / 1.2 var(--f-display); letter-spacing: 2px; text-transform: uppercase; color: var(--brass); }
.mt-lbl img.ic { width: 12px; height: 12px; }
/* список матчей */
.mt-list { display: flex; flex-direction: column; gap: 8px; }
.mt-card { display: grid; grid-template-columns: 104px 230px 1fr 64px; gap: 16px; align-items: center; padding: 10px 14px; cursor: pointer;
  background: var(--stone-7); border: 2px solid var(--ink); box-shadow: inset 0 2px 0 rgba(255,255,255,.05), inset 0 -3px 0 rgba(0,0,0,.35), 0 3px 0 var(--ink); transition: transform 80ms, filter 80ms; }
.mt-card:hover { filter: brightness(1.12); box-shadow: inset 0 0 0 1px var(--gold), inset 0 -3px 0 rgba(0,0,0,.35), 0 3px 0 var(--ink); }
.mt-card:active { transform: translateY(2px); box-shadow: inset 0 0 0 1px var(--gold), 0 1px 0 var(--ink); }
.mt-card.old { cursor: default; opacity: .72; }
.mt-card.old:hover { filter: none; box-shadow: inset 0 2px 0 rgba(255,255,255,.05), inset 0 -3px 0 rgba(0,0,0,.35), 0 3px 0 var(--ink); }
.mt-card.old:active { transform: none; }
.mt-date { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 8px 4px; background: var(--ink); border: 1px solid var(--stone-6); box-shadow: inset 0 2px 0 rgba(0,0,0,.5); }
.mt-date b { font: 600 calc(13px * var(--fs, 1)) / 1.1 var(--f-text); color: var(--text-2); text-align: center; }
.mt-date span { font: 800 calc(20px * var(--fs, 1)) / 1 var(--f-num); color: var(--gold); font-variant-numeric: tabular-nums; }
.mt-win { display: flex; align-items: center; gap: 10px; min-width: 0; }
.mt-wb { min-width: 0; }
.mt-wn { display: block; max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 700 calc(17px * var(--fs, 1)) / 1.25 var(--f-display); color: var(--gold-hi); text-shadow: 0 2px 0 rgba(0,0,0,.6); }
.mt-mid { min-width: 0; }
.mt-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 7px; }
.mt-tag { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; font: 600 calc(12px * var(--fs, 1)) / 1.5 var(--f-text); color: var(--text-2); background: var(--ink); border: 1px solid var(--stone-6); white-space: nowrap; }
.mt-tag img.ic { width: 10px; height: 10px; opacity: .8; }
.mt-tag.gold { color: var(--gold-hi); border-color: var(--gold-lo); }
.mt-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.mt-chip { display: inline-flex; align-items: center; gap: 2px; padding: 1px 8px 1px 3px; background: rgba(0,0,0,.28); border: 1px solid var(--stone-6); white-space: nowrap; }
.mt-chip b { min-width: 18px; text-align: center; font: 800 calc(13px * var(--fs, 1)) / 1 var(--f-num); color: var(--text-3); }
.mt-chip.p1 { border-color: var(--gold-lo); background: rgba(240,191,76,.08); }
.mt-chip.p1 b { color: var(--gold); }
.mt-chip.p3 b { color: #d8e0f0; }
.mt-chip canvas.pt.s1 { height: 24px; margin: 0 5px 0 2px; }
.mt-cn { font: 500 calc(13px * var(--fs, 1)) / 1 var(--f-text); color: var(--text); }
.mt-chip i { margin-left: 7px; font: 800 calc(12px * var(--fs, 1)) / 1 var(--f-num); font-style: normal; }
.mt-go { display: flex; align-items: center; justify-content: flex-end; gap: 6px; font: 700 calc(13px * var(--fs, 1)) var(--f-display); color: var(--gold); }
.mt-go b { font-size: calc(24px * var(--fs, 1)); line-height: 1; }
/* итоги матча */
.mt-top { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.mt-top .mt-tags { margin: 0; }
.mt-ttl { font: 700 calc(19px * var(--fs, 1)) / 1.2 var(--f-display); color: var(--text); }
.mt-hero-row { display: grid; grid-template-columns: minmax(300px, 380px) 1fr; gap: 12px; margin-bottom: 12px; align-items: stretch; }
.mt-banner { display: flex; align-items: center; gap: 16px; padding: 12px 18px; background: #231c10; border: 2px solid var(--ink); box-shadow: inset 0 0 0 1px var(--gold-lo), inset 0 2px 0 rgba(255,224,138,.12), 0 3px 0 var(--ink); }
.mt-bp { display: flex; align-items: flex-end; gap: 4px; flex: none; }
.mt-bw { min-width: 0; }
.mt-bt { font: 800 calc(24px * var(--fs, 1)) / 1.15 var(--f-display); text-shadow: 0 3px 0 rgba(0,0,0,.65); overflow-wrap: anywhere; }
.mt-bs { margin-top: 3px; font: 500 calc(13px * var(--fs, 1)) / 1.35 var(--f-text); color: var(--text-2); }
.mt-aws { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; align-content: start; }
.mt-aw { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 7px 10px; background: var(--stone-7); border: 2px solid var(--ink); box-shadow: inset 0 2px 0 rgba(255,255,255,.05), 0 2px 0 var(--ink); }
.mt-aw > img.ic { width: 24px; height: 24px; flex: none; image-rendering: pixelated; }
.mt-awb { min-width: 0; }
.mt-aw b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 700 calc(14px * var(--fs, 1)) / 1.3 var(--f-text); }
.mt-aw span { font: 800 calc(13px * var(--fs, 1)) / 1.2 var(--f-num); color: var(--text-2); }
.mt-tablewrap { border: 2px solid var(--ink); background: var(--stone-8); box-shadow: 0 3px 0 var(--ink); overflow-x: auto; }
.mt-table { table-layout: fixed; min-width: 1158px; font-size: calc(14px * var(--fs, 1)); }
.mt-table th, .mt-table td { padding: 5px 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* v5.8 (просьба владельца): итоги матча — справа карточка выбранного игрока (билд). Прежний вид; новый — ns-windows.css */
html:not(.nskit) #stats-pop .mt-split { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 12px; align-items: start; }
html:not(.nskit) #stats-pop .mt-left { min-width: 0; }
html:not(.nskit) #stats-pop .mt-split .mt-table { min-width: 1050px; }
html:not(.nskit) #stats-pop .mt-table tbody tr[data-i] { cursor: pointer; }
html:not(.nskit) #stats-pop .mt-table tbody tr.sel td { background: rgba(240,191,76,.16); box-shadow: inset 0 1px 0 var(--gold), inset 0 -1px 0 var(--gold); }
html:not(.nskit) #stats-pop .mt-pc { position: sticky; top: 0; max-height: 72vh; overflow-y: auto; padding: 10px 12px; background: var(--stone-8); border: 2px solid var(--ink); box-shadow: inset 0 0 0 1px var(--stone-6), 0 3px 0 var(--ink); }
html:not(.nskit) #stats-pop .pc-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
html:not(.nskit) #stats-pop .pc-port canvas { height: 48px; }
html:not(.nskit) #stats-pop .pc-who { flex: 1; min-width: 0; }
html:not(.nskit) #stats-pop .pc-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 700 calc(17px * var(--fs, 1)) / 1.2 var(--f-display); text-shadow: 0 2px 0 rgba(0,0,0,.6); }
html:not(.nskit) #stats-pop .pc-name img.ic { width: 14px; height: 14px; margin-left: 4px; opacity: .6; }
html:not(.nskit) #stats-pop .pc-sub { font: 500 calc(12px * var(--fs, 1)) / 1.3 var(--f-text); color: var(--text-2); }
html:not(.nskit) #stats-pop .pc-nav { display: flex; align-items: center; gap: 4px; margin-bottom: 6px; font: 600 12px var(--f-text); color: var(--text-3); }
html:not(.nskit) #stats-pop .pc-nav span { flex: 1; }
html:not(.nskit) #stats-pop .pc-sec { margin: 10px 0 6px; font: 700 calc(11px * var(--fs, 1)) / 1.2 var(--f-display); letter-spacing: 2px; text-transform: uppercase; color: var(--brass); }
html:not(.nskit) #stats-pop .pc-sec b { color: var(--text-2); }
html:not(.nskit) #stats-pop .pc-abs { display: flex; gap: 12px; }
html:not(.nskit) #stats-pop .pc-ab { display: flex; flex-direction: column; align-items: center; gap: 3px; cursor: pointer; }
html:not(.nskit) #stats-pop :is(.pc-well, .pc-it) img { display: block; width: 40px; height: 40px; image-rendering: pixelated; }
html:not(.nskit) #stats-pop .pc-ab.no img { opacity: .4; }
html:not(.nskit) #stats-pop .pc-lv { font: 800 calc(12px * var(--fs, 1)) / 1 var(--f-num); }
html:not(.nskit) #stats-pop .pc-lv i { font-style: normal; color: var(--text-3); }
html:not(.nskit) #stats-pop .pc-pas { margin-top: 6px; font: 500 calc(12px * var(--fs, 1)) / 1.4 var(--f-text); color: var(--text-2); }
html:not(.nskit) #stats-pop .pc-grid { display: flex; flex-wrap: wrap; gap: 6px; }
html:not(.nskit) #stats-pop .pc-it { position: relative; border: 2px solid var(--rc); background: var(--ink); cursor: pointer; }
html:not(.nskit) #stats-pop .pc-it b { position: absolute; right: 1px; bottom: 0; font: 800 10px / 1 var(--f-num); color: var(--gold-hi); text-shadow: 1px 1px 0 #000; }
html:not(.nskit) #stats-pop :is(.pc-ab.k-sel .pc-well img, .pc-it.k-sel) { outline: 2px solid var(--gold-hi); outline-offset: 1px; }
html:not(.nskit) #stats-pop .pc-tip { position: absolute; right: 342px; top: 0; z-index: 6; width: 320px; pointer-events: none; box-shadow: 0 4px 0 var(--ink); padding: 8px 10px; background: #231c10; border: 1px solid var(--gold-lo); font: 500 calc(13px * var(--fs, 1)) / 1.45 var(--f-text); color: var(--text); }
html:not(.nskit) #stats-pop .pc-tip .k-label { display: flex; align-items: center; gap: 6px; font: 700 11px var(--f-text); text-transform: uppercase; color: var(--text-3); }
html:not(.nskit) #stats-pop .pc-dot { width: 8px; height: 8px; background: var(--rc); }
html:not(.nskit) #stats-pop .pc-tn { margin-top: 4px; font: 700 calc(15px * var(--fs, 1)) / 1.2 var(--f-display); color: var(--gold-hi); }
html:not(.nskit) #stats-pop .pc-ts, html:not(.nskit) #stats-pop .pc-tx { margin-top: 3px; font-size: calc(12px * var(--fs, 1)); color: var(--text-2); }
html:not(.nskit) #stats-pop .pc-td { margin-top: 5px; }
html:not(.nskit) #stats-pop .pc-tip.hidden { display: none; }
html:not(.nskit) #stats-pop .pc-td b.up { color: #8fd19c; }
html:not(.nskit) #stats-pop .pc-stats { display: grid; grid-template-columns: 1fr; gap: 2px 12px; }
html:not(.nskit) #stats-pop .pc-stats.pc-num { grid-template-columns: 1fr 1fr; }
html:not(.nskit) #stats-pop .pc-stats div { display: flex; justify-content: space-between; gap: 6px; font: 500 calc(12px * var(--fs, 1)) / 1.35 var(--f-text); color: var(--text-2); border-bottom: 1px solid var(--stone-6); }
html:not(.nskit) #stats-pop .pc-stats b { color: var(--text); }
html:not(.nskit) #stats-pop .pc-none { font: 500 calc(12px * var(--fs, 1)) / 1.4 var(--f-text); color: var(--text-3); }
.mt-table td.c { font: 700 calc(14px * var(--fs, 1)) / 1 var(--f-num); font-variant-numeric: tabular-nums; }
.mt-table thead th, .hs-table thead th { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.15; vertical-align: bottom; letter-spacing: .3px; }
.mt-table thead th.c { padding-left: 3px; padding-right: 3px; letter-spacing: 0; }
.mt-table tr.bot td { color: var(--text-2); }
.mt-table tr.bot td.c { font-weight: 500; }
.mt-table tr.hum td.who .pn { font-weight: 700; }
.mt-table tr.win td { background: rgba(240,191,76,.06); }
.mt-table tr.me td { background: rgba(240,191,76,.12); }
.mt-table td.who img.ic { margin-left: 6px; opacity: .65; }
.mt-table i.tm { display: inline-block; width: 8px; height: 8px; margin-right: 7px; box-shadow: 0 0 0 1px #000; vertical-align: 1px; }
.mt-table td.hcell canvas.pt.s1 { height: 26px; margin-right: 6px; }
.mt-it { position: relative; display: inline-block; width: 24px; height: 24px; margin-right: 3px; vertical-align: middle; background: var(--ink); box-shadow: inset 0 0 0 1px var(--rc); }
.mt-it img { display: block; width: 24px; height: 24px; image-rendering: pixelated; }
.mt-it i { position: absolute; right: -1px; bottom: -3px; font: 800 9px / 1 var(--f-num); font-style: normal; color: var(--gold-hi); text-shadow: 0 1px 0 #000, 1px 0 0 #000, -1px 0 0 #000, 0 -1px 0 #000; }
.mt-more { margin-left: 3px; font: 700 calc(12px * var(--fs, 1)) var(--f-num); color: var(--text-3); vertical-align: middle; }
/* герои */
.hs-table { table-layout: fixed; }
.hs-table th, .hs-table td { padding: 5px 10px; }
.hs-table th.sort { cursor: pointer; user-select: none; }
.hs-table th.sort:hover { color: var(--gold-hi); }
.hs-table th.on { color: var(--gold); }
.hs-table th .ar { display: inline-block; width: 12px; margin-left: 4px; font-style: normal; font-size: 10px; }
.hs-table td.c { font: 700 calc(15px * var(--fs, 1)) / 1 var(--f-num); font-variant-numeric: tabular-nums; }
.hs-table .hwrap { display: flex; align-items: center; min-height: 34px; min-width: 0; }
.hs-table .hcol { display: flex; flex-direction: column; min-width: 0; }
.hs-table .hcol b { font: 700 calc(15px * var(--fs, 1)) / 1.2 var(--f-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hs-table .hr { font: 500 calc(11px * var(--fs, 1)) / 1.2 var(--f-text); color: var(--text-3); }
.hs-table tr.zero td { opacity: .45; }
.hs-table .wr { display: inline-flex; align-items: center; gap: 10px; }
.hs-table .wr b { min-width: 40px; text-align: right; }
.hs-table .st-bar { width: 110px; height: 8px; margin: 0; background: var(--ink); box-shadow: inset 0 0 0 1px var(--stone-6); }
.hs-table .st-bar i { height: 100%; }

/* ===== v5.7: ГЛАВНОЕ МЕНЮ, СПИСОК КОМНАТ и переходы «таблички на цепях» (как в Warcraft 3) ===== */
.vhide { display: none !important; }
@keyframes lbRaise { from { transform: none; } to { transform: translateY(-1260px); } }
@keyframes lbDrop { 0% { transform: translateY(-1260px); } 70% { transform: translateY(16px); } 85% { transform: translateY(-6px); } 100% { transform: none; } }
.lobby-stage.lb-raise .lb-hang:not(.vhide) { animation: lbRaise 360ms cubic-bezier(.55, 0, .85, .35) forwards; }
.lobby-stage.lb-drop .lb-hang:not(.vhide) { animation: lbDrop 640ms cubic-bezier(.3, .75, .45, 1) both; }
.lobby-stage.lb-drop #M-sub, .lobby-stage.lb-drop #L-match, .lobby-stage.lb-drop #btn-rate { animation-delay: 60ms !important; }
.lobby-stage.lb-drop #L-ready, .lobby-stage.lb-drop #btn-heroes, .lobby-stage.lb-drop #L-addrs { animation-delay: 110ms !important; }
.lobby-stage.lb-drop #L-host, .lobby-stage.lb-drop #btn-settings { animation-delay: 150ms !important; }
#draft.dr-in .dr-stage > * { animation: lbDrop 660ms cubic-bezier(.3, .75, .45, 1) both; }
#draft.dr-in .dr-stage > *:nth-child(2n) { animation-delay: 70ms; }
#draft.dr-in .dr-stage > *:nth-child(3n) { animation-delay: 120ms; }
@media (prefers-reduced-motion: reduce) { .lobby-stage.lb-raise .lb-hang, .lobby-stage.lb-drop .lb-hang, #draft.dr-in .dr-stage > * { animation-duration: 1ms !important; } }

/* плита главного меню */
#M-menu { display: flex; flex-direction: column; gap: 14px; padding: 34px 30px 30px; overflow: visible; }
html.lbart .lobby-stage #M-menu, html.lbart .lobby-stage #R-rooms {
  border: 15px solid transparent; border-image: var(--lb-frame) 36 / 36px / 9px stretch;
  background: var(--lb-tex) 0 0 / 192px 192px repeat; background-clip: padding-box; background-origin: padding-box; box-shadow: 0 9px 0 rgba(4, 3, 6, .34); }
#M-menu .mm-btn { position: relative; height: 76px; width: 100%; justify-content: flex-start; gap: 16px; padding: 0 22px; font: 800 calc(25px * var(--tk, 1)) / 1 var(--f-text); letter-spacing: 1.5px; text-transform: uppercase; }
#M-menu .mm-btn img.ic { width: 28px; height: 28px; margin: 0; }
html.lbart .lobby-stage #M-menu .mm-btn { height: 76px; font-size: calc(25px * var(--tk)); }
#M-menu .mm-btn.mm-main { color: #2a1702; text-shadow: 0 2px 0 rgba(255, 236, 180, .5); }
html.lbart .lobby-stage #M-menu .mm-btn.mm-main { border-image-source: var(--lb-btn-on); color: #2a1804; }
html.lbart .lobby-stage #M-menu .mm-btn.mm-main:hover { filter: brightness(1.12); color: #1a0e02; }
#M-menu .mm-btn:disabled { color: var(--text-3); cursor: default; }
html.lbart .lobby-stage #M-menu .mm-btn:disabled { border-image-source: var(--lb-btn-dn); }
#M-menu .mm-btn:disabled img.ic { opacity: .45; }
#M-menu .mm-soon { margin-left: auto; padding: 5px 9px; font: 800 calc(12px * var(--tk, 1)) / 1 var(--f-text); letter-spacing: 2px; color: var(--brass); background: rgba(9, 8, 12, .7); box-shadow: inset 0 0 0 2px var(--stone-6); }
/* мелкие разделы под плитой */
#M-sub { display: flex; gap: 12px; }
#M-sub .btn { flex: 1; height: 60px; font-size: calc(17px * var(--tk, 1)); }
html.lbart .lobby-stage #M-sub .btn { height: 60px; }

/* список комнат */
#R-rooms { display: flex; flex-direction: column; padding: 18px 24px 20px; overflow: visible; }
#R-rooms .lm-head { margin-bottom: 10px; }
#rooms-list { display: flex; flex-direction: column; gap: 6px; min-height: 420px; max-height: 560px; overflow-y: auto; padding-right: 4px; }
.room-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr) 150px; align-items: center; gap: 16px; min-height: 64px; padding: 8px 10px 8px 16px;
  background: rgba(9, 8, 12, .5); box-shadow: inset 0 3px 0 rgba(0, 0, 0, .32), inset 3px 0 0 var(--stone-6); }
.room-row:hover { background: rgba(240, 191, 76, .07); box-shadow: inset 0 3px 0 rgba(0, 0, 0, .32), inset 3px 0 0 var(--gold); }
.rr-main { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.rr-name { display: flex; align-items: center; gap: 6px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font: 700 calc(21px * var(--tk, 1)) / 1.15 var(--f-text); color: var(--gold-hi); text-shadow: 0 2px 0 rgba(0, 0, 0, .6); }
.rr-host { display: flex; align-items: center; gap: 5px; font: 500 calc(15px * var(--tk, 1)) / 1 var(--f-text); color: var(--text-2); }
.rr-info { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.rr-info > span { display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; font: 600 calc(15px * var(--tk, 1)) / 1 var(--f-text); color: var(--text-2); background: rgba(9, 8, 12, .62); box-shadow: inset 0 0 0 2px var(--stone-7); white-space: nowrap; }
.rr-info .rr-pl { font-family: var(--f-num); font-weight: 800; color: var(--text); }
.rr-st.ok { color: #c8ffc0 !important; box-shadow: inset 0 0 0 2px #2c5a32 !important; }
.rr-st.warn { color: var(--gold-hi) !important; box-shadow: inset 0 0 0 2px var(--gold-lo) !important; }
.rr-st.hot { color: #ffb0a8 !important; box-shadow: inset 0 0 0 2px #6a2228 !important; }
.room-row img.ic { width: 14px; height: 14px; margin: 0; }
.rr-go { height: 48px !important; font-size: calc(18px * var(--tk, 1)) !important; }
.rooms-empty { padding: 60px 20px; text-align: center; font: italic 500 calc(18px * var(--tk, 1)) / 1.4 var(--f-text); color: var(--text-3); }
.rooms-note { padding: 10px 14px; font: 600 calc(16px * var(--tk, 1)) / 1.3 var(--f-text); color: #ffd2a0; background: rgba(120, 50, 20, .35); box-shadow: inset 3px 0 0 var(--ember); }
.rooms-new { display: grid; grid-template-columns: 1.2fr 1fr 260px; gap: 12px; margin-top: 16px; }
.rooms-new input, #room-pw-in { height: 56px; padding: 0 14px; font: 600 calc(19px * var(--tk, 1)) / 1 var(--f-text); color: var(--gold-hi); background: rgba(9, 8, 12, .72); border: 0; outline: none;
  box-shadow: inset 0 0 0 3px var(--ink), inset 0 9px 0 rgba(0, 0, 0, .4); }
.rooms-new input:focus, #room-pw-in:focus { box-shadow: inset 0 0 0 3px var(--gold), inset 0 9px 0 rgba(0, 0, 0, .4); }
.rooms-new input::placeholder, #room-pw-in::placeholder { color: var(--text-3); font-weight: 500; }
.rooms-new .btn { height: 56px !important; }
html.lbart .lobby-stage #room-create { border-image-source: var(--lb-btn-on); color: #2a1804; font-size: calc(18px * var(--tk)); }
/* кнопка «Выйти» в лобби комнаты */
html.lbart .lobby-stage #btn-leave { flex: none; height: 40px; padding: 0 6px; font-size: calc(15px * var(--tk)); }
#lb-room img.ic { width: 16px; height: 16px; margin-right: 6px; }
/* пароль комнаты */
.room-pw-panel { width: min(440px, 92vw); display: flex; flex-direction: column; gap: 12px; padding: 18px 20px 20px; }
.room-pw-btns { display: flex; justify-content: flex-end; }
.room-pw-btns .btn { min-width: 140px; height: 48px; }
#room-pw-err { min-height: 18px; color: #ff9a90; }
/* v5.7: фонарь не висит поверх списка комнат — он, как таблички, уезжает на цепи вверх (index.html: lb-hang v-menu v-room) */

/* ===== v5.7: окно «Герои» — сетка с фильтром слева, крупная карточка справа ===== */
#herolist .hl-box { width: 1560px; max-width: none; padding: 18px 22px 16px; }
#herolist .hl-head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; flex-wrap: nowrap; }
#herolist .hl-head b { font-size: 28px; margin-right: 6px; }
.hl-roles { display: flex; gap: 6px; flex-wrap: wrap; flex: 1; }
.hl-roles .btn { height: 36px; padding: 0 12px; font-size: 15px; }
.hl-roles .btn.on { color: var(--gold-hi); background: linear-gradient(#4a3a1c 0 50%, #3c2f16 50% 100%); box-shadow: inset 0 0 0 1px var(--gold), 0 3px 0 var(--ink); }
#hl-search { width: 220px; height: 38px; padding: 0 12px; font: 600 16px var(--f-text); color: var(--gold-hi); background: rgba(9, 8, 12, .72); border: 0; outline: none; box-shadow: inset 0 0 0 2px var(--stone-6), inset 0 6px 0 rgba(0, 0, 0, .35); }
#hl-search:focus { box-shadow: inset 0 0 0 2px var(--gold), inset 0 6px 0 rgba(0, 0, 0, .35); }
#hl-search::placeholder { color: var(--text-3); }
.hl-body { display: grid; grid-template-columns: 790px minmax(0, 1fr); gap: 16px; align-items: start; }
#herolist #heroes { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; align-content: start; min-width: 0; }
.hl-card { min-width: 0; position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 4px 7px; cursor: pointer; background: rgba(9, 8, 12, .55);
  box-shadow: inset 0 0 0 2px var(--stone-7), inset 0 -3px 0 rgba(0, 0, 0, .4); transition: transform 80ms, filter 80ms; }
.hl-card:hover { filter: brightness(1.18); box-shadow: inset 0 0 0 2px var(--hc), inset 0 -3px 0 rgba(0, 0, 0, .4); }
.hl-card.sel { background: linear-gradient(rgba(240, 191, 76, .16), rgba(9, 8, 12, .55)); box-shadow: inset 0 0 0 2px var(--gold), 0 0 0 2px var(--ink); }
.hl-card canvas { width: 69px; height: 92px; image-rendering: pixelated; object-fit: contain; }
.hl-cn { display: flex; flex-direction: column; align-items: center; min-width: 0; width: 100%; text-align: center; }
.hl-cn b { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 700 14px / 1.2 var(--f-text); text-shadow: 0 2px 0 rgba(0, 0, 0, .7); }
.hl-cn span { font: 500 11px / 1.2 var(--f-text); color: var(--text-3); white-space: nowrap; }
.hl-foot { margin: 10px 2px 0; }
/* карточка героя */
#herolist #hero-detail { margin: 0; padding: 16px 18px; min-height: 700px; border-left: 0 !important; box-shadow: inset 0 0 0 2px var(--stone-7), inset 4px 0 0 var(--hc) !important; background: rgba(9, 8, 12, .62) !important; }
.hc-top { display: flex; gap: 18px; align-items: flex-start; }
.hc-port { flex: none; display: flex; align-items: flex-end; justify-content: center; min-width: 140px; padding: 6px; background: radial-gradient(closest-side, rgba(255, 255, 255, .08), transparent); box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .3); }
.hc-port canvas { image-rendering: pixelated; }
.hc-head { flex: 1; min-width: 0; }
.hc-name { font: 800 34px / 1.05 var(--f-display); text-shadow: 0 3px 0 var(--ink); }
.hc-tags { display: flex; gap: 8px; align-items: center; margin: 8px 0 8px; flex-wrap: wrap; }
.hc-role { padding: 4px 10px; font: 700 14px / 1 var(--f-text); letter-spacing: 1px; text-transform: uppercase; color: var(--gold-hi); background: #3c2f16; box-shadow: inset 0 0 0 1px var(--gold-lo); }
.hc-diff { display: inline-flex; align-items: center; gap: 4px; font: 600 13px / 1 var(--f-text); color: var(--text-3); }
.hc-diff i { display: inline-block; width: 11px; height: 11px; transform: rotate(45deg); background: #2a2430; box-shadow: 0 0 0 1px #000; }
.hc-diff i.on { background: var(--ember); }
.hc-desc { font: 500 16px / 1.4 var(--f-text); color: var(--text); }
.hc-stats { display: grid; gap: 6px; margin-top: 12px; max-width: 460px; }
.hc-stat { display: grid; grid-template-columns: 92px 1fr 54px; align-items: center; gap: 10px; font: 600 14px var(--f-text); color: var(--text-2); }
.hc-stat i { display: block; height: 10px; background: var(--ink); box-shadow: inset 0 0 0 1px var(--stone-6); }
.hc-stat i b { display: block; height: 100%; }
.hc-stat em { font: 800 15px var(--f-num); font-style: normal; color: var(--text); text-align: right; }
.hc-pass { margin: 14px 0 10px; padding: 10px 12px; font: 600 13px / 1.2 var(--f-text); color: var(--brass); letter-spacing: 1px; background: rgba(240, 191, 76, .07); box-shadow: inset 3px 0 0 var(--gold); }
.hc-pass b { color: var(--gold-hi); text-transform: uppercase; }
.hc-pass div { margin-top: 5px; font: 500 15px / 1.4 var(--f-text); color: var(--text); letter-spacing: 0; }
.hc-abs { display: grid; gap: 8px; }
.hc-ab { display: flex; gap: 12px; align-items: flex-start; padding: 8px 4px 8px 0; border-top: 2px solid var(--ink); box-shadow: 0 -1px 0 var(--stone-7); }
.hc-ab img { width: 48px; height: 48px; flex: none; image-rendering: pixelated; background: var(--ink); box-shadow: 0 0 0 2px var(--ink), 0 0 0 3px var(--stone-6); }
.hc-an { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font: 700 18px / 1.2 var(--f-display); }
.hc-an small { font: 500 13px var(--f-text); color: var(--text-3); }
.hc-k { min-width: 38px; padding: 3px 6px; text-align: center; font: 800 13px / 1 var(--f-text); color: var(--gold-hi); background: var(--ink); box-shadow: 0 0 0 1px var(--stone-5); }
.hc-ad { margin-top: 4px; font: 500 15px / 1.4 var(--f-text); color: var(--text); }
.hc-nums { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 5px; font: 500 13px var(--f-text); color: var(--text-3); }
.hc-nums b { color: var(--text-2); font-family: var(--f-num); }

/* v5.7 (просьба владельца): багровые ленты-заголовки убраны отовсюду — заголовки простым текстом
   (лобби — выше, у .lm-ttl; здесь — окно «Герои» и надпись стадии драфта: цвет по стадии остаётся) */
html.lbart #herolist .hl-head b { height: auto; margin-left: 0; border: 0; border-image: none; padding: 0; text-shadow: 0 3px 0 var(--ink); }
html.lbart .dr-stage #dr-title { height: auto; border: 0; border-image: none; padding: 0; color: #ff9a86; text-shadow: 0 4px 0 var(--ink); }
html.lbart .dr-stage #dr-title.st-pick { border-image: none; color: var(--gold-hi); text-shadow: 0 4px 0 var(--ink); }
html.lbart .dr-stage #dr-title.st-done { border-image: none; color: #86e8a0; text-shadow: 0 4px 0 var(--ink); }

/* v5.7 (просьба владельца): окна «Рейтинг», «Список героев», «Настройки» в меню — на цепях: спускаются сверху и уезжают вверх (chainwin.js) */
.cw-box { position: relative; }
.cw-chain { display: none; }
html.lbart .cw-on .cw-chain { display: block; position: absolute; top: -2994px; width: 21px; height: 3000px; background: var(--lb-chain) 0 100% / 21px 30px repeat-y; pointer-events: none; z-index: 3; }
html.lbart .cw-on .cw-chain::after { content: ''; position: absolute; left: 0; bottom: -12px; width: 21px; height: 21px; background: var(--lb-eyelet) 0 0 / 21px 21px no-repeat; }
.cw-chain.c1 { left: 66px; } .cw-chain.c2 { right: 66px; }
@keyframes cwUp { from { transform: none; } to { transform: translateY(calc(-1 * var(--cw-d, 1400px))); } }
@keyframes cwDown { 0% { transform: translateY(calc(-1 * var(--cw-d, 1400px))); } 70% { transform: translateY(16px); } 85% { transform: translateY(-6px); } 100% { transform: none; } }
.cw-box.cw-up { animation: cwUp 340ms cubic-bezier(.55, 0, .85, .35) forwards; }
.cw-box.cw-down { animation: cwDown 620ms cubic-bezier(.3, .75, .45, 1) both; }
@media (prefers-reduced-motion: reduce) { .cw-box.cw-up, .cw-box.cw-down { animation-duration: 1ms; } }

/* v5.7 (просьба владельца): наведение на кнопки — тонкая золотая обводка (uiart: --lb-btn-hi); выбранная и главные
   (золотые) при наведении остаются золотыми — чуть светлее, со светлой обводкой (--lb-btn-on-hi), а не серыми */
html.lbart :is(.lobby-stage, .dr-stage) .btn.on:hover:not(:disabled),
html.lbart .lobby-stage #M-menu .mm-btn.mm-main:hover, html.lbart .lobby-stage #room-create:hover { border-image-source: var(--lb-btn-on-hi); color: #2a1804; }

/* v5.7 (просьба владельца): «ГОТОВ» — обычная большая плашка без эффектов (без лент, мечей, подвесок, свечения и бликов) */
html.lbart .lobby-stage #L-ready::after, html.lbart .lobby-stage #btn-ready::before { display: none; }
html.lbart .lobby-stage #btn-ready { height: 100% !important; border-width: 12px; border-image: var(--lb-btn-on) 12 fill / 12px stretch; padding: 0 !important;
  font: 900 calc(40px * var(--tk)) / 1 var(--f-text) !important; letter-spacing: 10px; text-indent: 10px; color: #2a1804; text-shadow: 0 2px 0 rgba(255,240,190,.5); filter: none; }
html.lbart .lobby-stage #btn-ready:hover { border-image-source: var(--lb-btn-on-hi); filter: none; color: #2a1804; }
html.lbart .lobby-stage #btn-ready:active { border-image-source: var(--lb-btn-dn); color: var(--gold-hi); text-shadow: 0 3px 0 var(--ink); transform: translateY(3px); }
html.lbart .lobby-stage #btn-ready.on { border-image-source: var(--lb-btn); color: #9cf0a8; text-shadow: 0 3px 0 var(--ink); letter-spacing: 6px; text-indent: 6px; font-size: calc(30px * var(--tk)) !important; }
html.lbart .lobby-stage #btn-ready.on:hover { border-image-source: var(--lb-btn-hi); color: #b8ffc0; }
html.lbart .lobby-stage #btn-ready.on .rb-sub { color: var(--text-2); margin-bottom: 0; }