:root{
  --bg:#0d1013;
  --bg2:#141a1f;
  --bg3:#1b2329;
  --line:#26313a;
  --fg:#dde5ec;
  --dim:#7d8d9b;
  --acc:#c8a24a;
  --t1:#4a9eff;
  --t2:#ff5a4a;
  --ok:#5fd08a;
  --bad:#ff6b5b;
  --live:#f00;            /* красный ютуба, ровно его значение */
  --hdr:52px;
  --ftr:62px;             /* 14 полоса + 48 строка кнопок, как у ютуба */
  --side:320px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font:13px/1.45 "Segoe UI",Roboto,system-ui,sans-serif;
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
.dim{color:var(--dim)}
.hidden{display:none !important}

/* ---------- шапка ---------- */
.topbar{
  height:var(--hdr);
  display:flex;align-items:center;gap:22px;
  padding:0 16px;
  background:var(--bg2);
  border-bottom:1px solid var(--line);
}
.brand{display:flex;align-items:center;gap:8px;letter-spacing:.09em;font-size:13px}
.brand b{color:var(--acc);font-weight:700}
.logo{color:var(--acc);font-size:17px;line-height:1}

.matchinfo{min-width:220px}
.mi-main{font-weight:600}
.mi-sub{font-size:11px}

.tickets{display:flex;gap:8px;margin-left:auto}
.tk{
  display:flex;align-items:center;gap:7px;
  background:var(--bg3);border:1px solid var(--line);
  border-radius:5px;padding:5px 11px;
}
.tk i{width:9px;height:9px;border-radius:2px;background:var(--c)}
.tk-flag{width:16px;height:auto;flex:none;border-radius:2px}
.tk-name{color:var(--dim);font-size:11px}
.tk b{font-variant-numeric:tabular-nums;font-size:14px}
.tk-pct{font-style:normal;color:var(--dim);font-size:11px;font-variant-numeric:tabular-nums}

.topright{display:flex;align-items:center;gap:12px}
.file-btn{
  background:var(--bg3);border:1px solid var(--line);border-radius:5px;
  padding:5px 11px;cursor:pointer;font-size:12px;
}
.file-btn:hover{border-color:var(--acc)}
.status{font-size:11px;color:var(--dim);min-width:90px;display:flex;align-items:center;gap:6px}

/* ---------- Steam-логин ---------- */
.auth-error{font-size:11px;color:var(--bad)}
.auth-btn{
  display:flex;align-items:center;gap:7px;
  background:#1b2838;border:1px solid #2a3f5a;border-radius:5px;
  padding:5px 12px;font-size:12px;color:#c7d5e0;text-decoration:none;
  transition:border-color .12s,background .12s;
}
.auth-btn:hover{border-color:#66c0f4;background:#223650;color:#fff}
.auth-btn svg{color:#66c0f4;flex:none}
.auth-user{display:flex;align-items:center;gap:8px;font-size:12px}
.auth-avatar{width:24px;height:24px;border-radius:4px;display:block}
.auth-name{color:var(--fg);max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.auth-logout{color:var(--dim);text-decoration:none;font-size:11px}
.auth-logout:hover{color:var(--bad)}

/* живой режим: скраббер не нужен, временем управляет агент */
/* панель перемотки нужна и в эфире: по ней мотают в прошлое */

.livedot{
  width:8px;height:8px;border-radius:50%;background:var(--bad);flex:none;
  animation:pulse 1.4s ease-in-out infinite;
}
.livedot.off{background:var(--dim);animation:none}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}

/* ---------- раскладка ---------- */
.layout{
  position:relative;
  height:calc(100% - var(--hdr) - var(--ftr));
  display:flex;
}
.stage{position:relative;flex:1;min-width:0;background:#0a0d10}
#map{width:100%;height:100%;display:block;cursor:grab}
#map.drag{cursor:grabbing}

.overlay{position:absolute;pointer-events:none;font-size:11px}
.overlay.tl{top:10px;left:12px}
.overlay.tr{
  top:10px;right:12px;pointer-events:auto;
  display:flex;flex-direction:column;align-items:flex-end;
}
.overlay.bl{bottom:12px;left:12px}
.overlay.hint{bottom:10px;right:14px;color:#4d5a66;max-width:60%;text-align:right}
.overlay.hint.warn{
  color:#d9bd77;background:rgba(30,25,10,.7);border:1px solid #4a3c18;
  border-radius:4px;padding:3px 8px;text-align:left;font-size:10px;
}
/* Замерший эфир — не тонкая подсказка, а красная плашка: её нельзя
   не заметить, глядя на карту. */
.overlay.hint.dead{
  color:#ffb3a8;background:rgba(60,12,8,.92);border-color:#8a2b20;
  font-size:12px;padding:7px 12px;max-width:none;
  animation:pulse 1.8s ease-in-out infinite;
}
/* В замершем эфире красная точка «прямого эфира» врать не должна. */
body.stale .livebtn.on{color:#8a8a8a}
body.stale .livebtn.on i{animation:none;background:#8a8a8a}

.legend{
  display:flex;gap:14px;background:rgba(13,16,19,.78);
  border:1px solid var(--line);border-radius:5px;padding:6px 11px;
}
.legend span{display:flex;align-items:center;gap:5px;color:var(--dim)}
.dot{width:9px;height:9px;border-radius:50%;display:inline-block}
.dot.t1{background:var(--t1)}
.dot.t2{background:var(--t2)}
.ic{width:9px;height:9px;display:inline-block;background:#8a97a3}
.ic.fob{clip-path:polygon(50% 0,100% 100%,0 100%)}
.ic.hab{border-radius:2px}
.ic.rally{clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%)}
.ic.veh{border-radius:1px;height:7px;width:12px}


.viewtools{
  display:flex;align-items:center;gap:4px;
  background:rgba(13,16,19,.78);border:1px solid var(--line);
  border-radius:5px;padding:3px 5px;
}
.viewtools button{width:26px;height:24px;border-radius:4px;color:var(--dim)}
.viewtools button:hover{background:var(--bg3);color:var(--fg)}
.viewtools button.on{background:var(--acc);color:#101418}
.zoomlbl{color:var(--dim);padding:0 5px;font-variant-numeric:tabular-nums}

/* ---------- килфид: плавающее окно ---------- */
.kfwin{
  position:fixed;left:12px;bottom:78px;z-index:40;
  width:352px;max-height:56vh;
  display:flex;flex-direction:column;
  background:rgba(12,14,17,.96);
  border:1px solid var(--line);border-radius:6px;
  box-shadow:0 8px 28px rgba(0,0,0,.5);
  font-size:12px;
}
.kfhead{
  flex:none;display:flex;align-items:center;gap:8px;
  padding:6px 7px 6px 11px;border-bottom:1px solid var(--line);
  cursor:grab;user-select:none;touch-action:none;
}
.kfhead:active{cursor:grabbing}
.kftitle{font-weight:700;letter-spacing:.14em;font-size:11px}
.kfcount{color:var(--dim);margin-left:auto;font-size:11px;font-variant-numeric:tabular-nums}
.kfhead button{
  width:22px;height:20px;border-radius:4px;color:var(--dim);flex:none;
  display:flex;align-items:center;justify-content:center;font-size:13px;line-height:1;
}
.kfhead button:hover{background:var(--bg3);color:var(--fg)}
.kfbody{
  overflow-y:auto;overscroll-behavior:contain;min-height:0;
  scrollbar-width:thin;scrollbar-color:#2c3640 transparent;
}
.kfbody::-webkit-scrollbar{width:8px}
.kfbody::-webkit-scrollbar-thumb{background:#2c3640;border-radius:4px}
.kfbody .empty{padding:14px;color:var(--dim);text-align:center}
.kf{
  display:grid;grid-template-columns:56px 1fr 64px 1fr;
  align-items:center;column-gap:8px;
  padding:6px 10px;border-bottom:1px solid #181d22;
  cursor:pointer;animation:kfin .18s ease-out;
}
@keyframes kfin{from{opacity:0;transform:translateX(-8px)}to{opacity:1;transform:none}}
.kf:hover{background:rgba(255,255,255,.045)}
.kf.on{background:rgba(200,162,74,.13);box-shadow:inset 2px 0 0 var(--acc)}
.kf-t{color:var(--dim);font-size:11px;font-variant-numeric:tabular-nums}
.kf-k,.kf-v{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kf-k{text-align:right}
.kf-w{display:flex;flex-direction:column;align-items:center;gap:0;color:#ccd4db}
.kf-w svg{display:block;width:40px;height:13px;fill:currentColor;opacity:.92}
/* иконки из игры нарисованы белым на общем холсте 249×118 — масштаб между
   оружием сохраняется, поэтому пистолет и виден мельче винтовки */
.kf-w img{display:block;width:56px;height:auto;opacity:.95}
/* Иконки оружия вытянутые (124x59), а техники — квадратные (64x64). При общей
   ширине 56 px машина выходила вдвое выше ствола и распирала строку, поэтому
   её ограничиваем по ВЫСОТЕ — под ту же, что у оружия. */
.kf-w img.kf-veh{width:auto;height:26px}
.kf-w i{font-style:normal;font-size:9px;color:var(--dim);line-height:1.2}

/* кнопка «показать», когда окно скрыто */
.kfshow{
  position:absolute;left:12px;bottom:12px;z-index:30;pointer-events:auto;
  display:flex;align-items:center;gap:6px;
  background:rgba(13,16,19,.9);border:1px solid var(--line);
  border-radius:5px;padding:6px 12px;
  font-size:11px;font-weight:700;letter-spacing:.12em;color:var(--dim);
}
.kfshow:hover{color:var(--fg);border-color:var(--acc)}

/* Плашка при наводке на игрока на карте — вид как у нативного оверлея
   Squad (админ-камера "look at player"): тёмная панель у курсора. */
.hudtip{
  position:absolute;z-index:40;pointer-events:none;
  min-width:210px;
  background:rgba(10,13,16,.92);border:1px solid var(--line);
  border-radius:4px;padding:8px 10px;
  font-size:12px;line-height:1.5;color:#d7dee4;
  box-shadow:0 4px 18px rgba(0,0,0,.5);
}
.hudtip .ht-head{display:flex;align-items:center;gap:6px}
.hudtip .ht-role{
  width:15px;height:15px;flex:none;
  -webkit-mask-repeat:no-repeat;-webkit-mask-position:center;-webkit-mask-size:contain;
  mask-repeat:no-repeat;mask-position:center;mask-size:contain;
}
.hudtip .ht-name{font-size:13px;font-weight:700;color:#fff}
.hudtip .ht-sub{color:#8fd48a;font-size:11px;margin-bottom:4px}
.hudtip .ht-row{display:flex;align-items:center;gap:5px;white-space:nowrap}
.hudtip .ht-stats{font-size:11px}
.hudtip .ht-stats b{color:#fff;font-variant-numeric:tabular-nums}
.hudtip .ht-stance{display:flex;align-items:center;gap:4px;color:#c3ccd3;margin:2px 0}
.hudtip .ht-stance-icon{height:14px;width:auto;flex:none;object-fit:contain}
.hudtip .ht-wpn{display:flex;align-items:center;gap:6px;margin-top:2px}
.hudtip .ht-wpn svg{width:16px;height:16px;fill:#c3ccd3;flex:none}
.hudtip .ht-wpn img{height:14px;width:auto;flex:none;object-fit:contain}
.hudtip .ht-status{display:flex;flex-wrap:wrap;gap:4px;margin:3px 0}
.hudtip .ht-status:empty{display:none}
.hudtip .ht-chip{
  font-style:normal;font-size:11px;font-weight:600;line-height:1;
  padding:2px 6px;border:1px solid;border-radius:3px;
  background:rgba(255,255,255,.04);
}
.hudtip .ht-ammo{display:flex;align-items:center;gap:3px;margin:4px 0}
/* Коробка пипса квадратная и маска растянута ровно по ней (не contain):
   заливка магазина рисуется градиентом в тех же координатах, что и маска,
   иначе граница «сколько осталось» съезжает относительно самой картинки.
   Холст иконки 24×24, поэтому квадрат. */
.hudtip .ht-pip{
  width:13px;height:13px;flex:none;
  background-repeat:no-repeat;background-position:center;background-size:100% 100%;
  -webkit-mask-repeat:no-repeat;-webkit-mask-position:center;-webkit-mask-size:100% 100%;
  mask-repeat:no-repeat;mask-position:center;mask-size:100% 100%;
}
.hudtip .ht-badges{display:flex;flex-wrap:wrap;gap:2px 9px;margin:5px 0 3px}
.hudtip .ht-badge{display:flex;align-items:center;gap:3px}
.hudtip .ht-badge-ic{
  width:12px;height:12px;flex:none;
  -webkit-mask-repeat:no-repeat;-webkit-mask-position:center;-webkit-mask-size:contain;
  mask-repeat:no-repeat;mask-position:center;mask-size:contain;
}
.hudtip .ht-badge b{color:#fff;font-size:11px;font-variant-numeric:tabular-nums}
.hudtip .ht-score{color:var(--dim);font-variant-numeric:tabular-nums;margin-top:1px}
.hudtip .hpbar{height:4px;background:var(--bg3);border-radius:2px;overflow:hidden;margin:3px 0 6px}
.hudtip .hpbar i{display:block;height:100%}

/* Килфид в отдельном окне (Document PiP / popup) — чистый оверлей поверх
   игры: ни плашек, ни рамок, только строки текста и иконки оружия. Своя
   шапка (заголовок/счётчик/кнопки) не нужна — родное окно PiP и так даёт
   закрытие и перетаскивание за его собственную мини-панель.
   Тень на тексте и иконках держит их читаемыми на ЛЮБОМ фоне — светлом
   песке карты, тёмном небе, чём угодно под окном оверлея. */
body.kfpip{margin:0;background:transparent;overflow:hidden}
html:has(body.kfpip){background:transparent}
.kfpip .kfwin{
  position:static;width:auto;height:100vh;max-height:none;
  background:transparent;border:0;border-radius:0;box-shadow:none;
}
.kfpip .kfhead{display:none}
.kfpip .kfbody{overflow:hidden}
.kfpip .kf{
  background:transparent !important;box-shadow:none;
  border-bottom:0;padding:4px 10px;animation:none;
}
.kfpip .kf-t,.kfpip .kf-k,.kfpip .kf-v,.kfpip .kf-w i{
  text-shadow:0 1px 2px #000,0 0 5px rgba(0,0,0,.9),0 0 10px rgba(0,0,0,.6);
}
.kfpip .kf-w svg,.kfpip .kf-w img{
  filter:drop-shadow(0 1px 2px #000) drop-shadow(0 0 4px rgba(0,0,0,.85));
}

/* ---------- боковая панель ---------- */
.side{
  width:var(--side);flex:none;
  background:var(--bg2);border-left:1px solid var(--line);
  display:flex;flex-direction:column;min-height:0;
}
.tabs{display:flex;border-bottom:1px solid var(--line)}
.tab{
  flex:1;padding:9px 0;color:var(--dim);font-size:12px;
  border-bottom:2px solid transparent;
}
.tab:hover{color:var(--fg)}
.tab.active{color:var(--fg);border-bottom-color:var(--acc)}

.filters{padding:9px 10px;border-bottom:1px solid var(--line);display:grid;gap:7px}
.frow{display:flex;gap:6px}
.chip{
  display:flex;align-items:center;gap:5px;
  background:var(--bg3);border:1px solid var(--line);border-radius:4px;
  padding:4px 9px;font-size:11px;color:var(--dim);
}
.chip.on{color:var(--fg);border-color:#3a4752}
.chip:not(.on){opacity:.42}
#fSquad,#fSearch{
  background:var(--bg3);border:1px solid var(--line);border-radius:4px;
  color:var(--fg);padding:4px 8px;font:inherit;font-size:11px;min-width:0;flex:1;
}
#fSearch{width:100%}
#fSquad:focus,#fSearch:focus{outline:1px solid var(--acc)}

.panel{flex:1;overflow-y:auto;min-height:0}
.panel::-webkit-scrollbar{width:9px}
.panel::-webkit-scrollbar-thumb{background:#2a343d;border-radius:5px}
.empty{padding:22px 14px;color:var(--dim);text-align:center}

.sqhdr{
  position:sticky;top:0;z-index:1;
  background:var(--bg3);border-bottom:1px solid var(--line);
  padding:4px 10px;font-size:11px;color:var(--dim);
  display:flex;justify-content:space-between;
}
.prow{
  display:flex;align-items:center;gap:8px;
  padding:4px 10px;border-bottom:1px solid #1a2127;cursor:pointer;
}
.prow:hover{background:#1a2229}
.prow.sel{background:#233040}
.prow.dead{opacity:.4}
.prow.wounded{background:rgba(255,90,77,.10)}
.prow.wounded .nm{color:#ff8c82}
.prow .bar{width:3px;align-self:stretch;border-radius:2px;background:var(--c)}
.prow .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.prow .rl{font-size:10px;color:var(--dim);max-width:78px;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.prow .kd{font-size:11px;color:var(--dim);font-variant-numeric:tabular-nums;min-width:34px;
  text-align:right}

.vrow{
  display:flex;align-items:center;gap:8px;
  padding:6px 10px;border-bottom:1px solid #181d22;
}
.vrow .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vrow .cnt{font-size:12px;font-variant-numeric:tabular-nums;min-width:38px;text-align:right}
.vrow .cnt b{color:#7fd692}
.vrow .cnt.zero b{color:#ff6a4d}
.sl-badge{background:var(--acc);color:#101418;border-radius:2px;padding:0 3px;font-size:9px;
  font-weight:700}

/* ---------- scoreboard ---------- */
.sb-overlay{
  position:fixed;inset:0;z-index:80;background:rgba(8,10,13,.92);
  display:flex;flex-direction:column;
}
.sb-overlay.hidden{display:none}
.sb-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 18px;border-bottom:1px solid var(--line);flex:none;
}
.sb-title{font-weight:700;letter-spacing:.06em;font-size:13px}
.sb-head button{font-size:22px;line-height:1;color:var(--dim);padding:0 6px}
.sb-head button:hover{color:var(--fg)}
.sb-body{flex:1;overflow-y:auto;display:flex;gap:1px;background:var(--line)}
.sb-team{flex:1;min-width:0;background:var(--bg);display:flex;flex-direction:column;
  --sb-k: 3}
.sb-team-hdr{
  padding:calc(9.9px * var(--sb-k)) calc(14.1px * var(--sb-k));
  font-weight:700;font-size:calc(12.9px * var(--sb-k));
  display:flex;align-items:center;gap:calc(8.1px * var(--sb-k));
  border-bottom:2px solid currentColor;flex:none;
}
.sb-team-hdr img{width:calc(20.1px * var(--sb-k));height:auto;border-radius:2px;flex:none}
.sb-team-nm{text-transform:uppercase;letter-spacing:.04em}
.sb-team-sub{margin-left:auto;color:var(--dim);font-weight:400;font-size:11px}

/* Иконки колонок — свой SVG на чёрной плашке с цветной рамкой по
   категории (зелёный — поддержка, красный — бой, золотой — цели). Тот же
   приём и цвета, что на squadreplay.com, но рисунок свой. */
.sb-ico{
  width:calc(17.1px * var(--sb-k));height:calc(17.1px * var(--sb-k));flex:none;display:inline-flex;align-items:center;justify-content:center;
  background:#000;border-radius:4px;border:2px solid;
}
.sb-ico svg{width:calc(11.1px * var(--sb-k));height:calc(11.1px * var(--sb-k))}
.sb-ico.cat-green{border-color:#1f9b3a;color:#3ecf63}
.sb-ico.cat-red{border-color:#7c1c2d;color:#e2596b}
.sb-ico.cat-gold{border-color:#c9a410;color:#e0c04a}

/* ---------- табло: одна сетка на все строки ----------

   Раньше строки были флексами, и заголовок с иконками жил по своим правилам
   (иконка по центру ячейки, число по правому краю) — колонки визуально не
   совпадали. Теперь у шапки, итога, отряда и игрока ОДИН grid-template, так
   что иконка стоит ровно над своим столбцом чисел просто по построению.

   Первые три колонки — ранг, кит, ник. Дальше восемь счётчиков, ТК и пинг. */
.sb-grid{
  /* Весь размер табло — от одного множителя. Менять крупность нужно здесь и
     только здесь: колонки, шрифты и значки посчитаны от него, и по одному их
     подгонять больше не придётся. */
  --sb-k: 1.6;
  /* Кит — это слово («Стрелок», «Тандем (ПТ)»), а не значок: колонке нужна
     настоящая ширина, иначе название режется на втором символе. */
  /* Ширины подобраны так, чтобы ДВЕ команды стояли в линию. Команды рядом —
     это главное на табло, ради него и ужимаем колонки, а не наоборот.
     Поэтому каждая колонка тянущаяся: у жёсткой ширины таблица не может
     сжаться ниже суммы колонок, и вторая команда уезжала за край экрана.
     Минимум — предел читаемости, максимум — как выглядит на просторе. */
  --sb-tpl:
    /* Знак ранга — картинка 31x15 в исходном масштабе, то есть около 50 px
       при --sb-k: 1.6. Колонке нужно не меньше: плашка шире ячейки
       центрируется наружу и вылезает за её левый край. */
    minmax(calc(33px * var(--sb-k)), calc(36px * var(--sb-k)))
    /* Кит — самое длинное слово в строке: «Сквад-лидер», «Водитель-SL»,
       «Тандем (ПТ)». На старом потолке они обрезались многоточием, поэтому
       колонке дан запас: лишнее всё равно заберёт ник своим 1fr. */
    minmax(calc(51px * var(--sb-k)), calc(84px * var(--sb-k)))
    minmax(calc(30px * var(--sb-k)), calc(45px * var(--sb-k)))
    minmax(calc(24px * var(--sb-k)), calc(28px * var(--sb-k)))
    /* Ник — то, ради чего строку читают: минимум держим по реальному нику
       ВМЕСТЕ со значком SL, который стоит в той же ячейке. По голому имени
       минимум занижен, и у лидеров ник обрезался. */
    minmax(calc(95px * var(--sb-k)), 1fr)
    /* Трёхзначные значения — обычное дело: 460 очков за цели, пинг 120.
       На старых ширинах они обрезались многоточием, поэтому минимум колонки
       считается по трём цифрам, а не по двум. */
    repeat(8, minmax(calc(26px * var(--sb-k)), calc(34px * var(--sb-k))))
    minmax(calc(22px * var(--sb-k)), calc(28px * var(--sb-k)))
    minmax(calc(30px * var(--sb-k)), calc(34px * var(--sb-k)));
  display:flex;flex-direction:column;
}
.sb-row{
  /* stretch, а не center: при центрировании каждая ячейка становится ровно
     по своему содержимому, и её правая граница выходит короче строки —
     колонка клана давала обрубок в 10 px вместо линии в 38. Теперь ячейки
     во всю высоту строки, а содержимое центрируется внутри них. */
  display:grid;grid-template-columns:var(--sb-tpl);align-items:stretch;
  border-bottom:1px solid var(--line);
}
/* Ячейка. Числа к правому краю и моноширинными цифрами — так столбец
   читается как столбец, а не как рваный край. */
.sb-c{
  /* Числа по центру ячейки, а не по краю: иконка в шапке тоже по центру,
     и колонка читается как колонка. Центрируем флексом, потому что ячейка
     теперь тянется на всю высоту строки — одного text-align мало. */
  display:flex;align-items:center;justify-content:center;
  padding:calc(3px * var(--sb-k)) calc(6px * var(--sb-k));
  text-align:center;font-variant-numeric:tabular-nums;
  border-right:1px solid var(--line);min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.sb-c:last-child{border-right:0}
.sb-c.l{text-align:left;display:flex;align-items:center;gap:5px}
/* «Итого по команде» и название отряда занимают колонки до счётчиков:
   ранг, кит, клан и ник. */
.sb-c.wide{grid-column:1 / 6}

/* Шапка колонок. Вся кликабельная: клик сортирует.
   Имя .sb-head уже занято шапкой самого окна табло в index.html — отсюда
   .sb-hrow, иначе одно правило перебивало бы другое. */
.sb-hrow{
  font-size:calc(9px * var(--sb-k));text-transform:uppercase;letter-spacing:.05em;color:var(--dim);
  background:var(--bg2);position:sticky;top:0;z-index:2;
}
.sb-h{
  padding:calc(5.1px * var(--sb-k)) calc(6px * var(--sb-k));text-align:center;border-right:1px solid var(--line);
  cursor:pointer;user-select:none;display:flex;align-items:center;
  justify-content:center;gap:3px;min-width:0;
}
.sb-h.l{justify-content:flex-start}
.sb-h:last-child{border-right:0}
.sb-h:hover{color:var(--fg);background:var(--bg3)}
.sb-h.on{color:var(--acc)}
.sb-arrow{font-style:normal;font-size:calc(9px * var(--sb-k));line-height:1}

.sb-total{font-size:calc(11.1px * var(--sb-k));font-weight:600;background:var(--bg2)}
.sb-total .sb-c.wide{color:var(--dim);font-weight:400}

.sb-squad{border-bottom:1px solid var(--line)}
.sb-squad-hdr{
  background:var(--bg2);font-size:calc(11.1px * var(--sb-k));color:var(--dim);
  cursor:pointer;user-select:none;font-weight:600;
}
.sb-squad-hdr:hover{background:var(--bg3)}
.sb-squad-hdr b{color:var(--fg);font-weight:600}
.sb-squad-hdr .lock{font-size:10px}
.sb-caret{display:inline-block;width:calc(9.9px * var(--sb-k));transition:transform .12s;flex:none}
.sb-squad.collapsed .sb-caret{transform:rotate(-90deg)}
.sb-squad.collapsed .sb-rows{display:none}
.sb-badge{
  width:calc(20.1px * var(--sb-k));height:calc(18px * var(--sb-k));
  flex:none;display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--acc);border-radius:3px;font-weight:700;color:var(--acc);
  font-size:calc(11.1px * var(--sb-k));
}

.sb-prow{font-size:calc(12px * var(--sb-k))}
.sb-prow:hover{background:var(--bg2)}
/* Ранг и ник ведут в профиль игрока. Подчёркивание только по наведению —
   иначе табло из ста строк превращается в сплошную линейку ссылок. */
.sb-rank,.sb-nm{text-decoration:none;color:inherit;cursor:pointer}
.sb-rank{display:flex;align-items:center;justify-content:center}
.sb-nm:hover .nm-t{color:var(--acc);text-decoration:underline}
.sb-nm .nm-t{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Своя, узкая горизонтальная подкладка. Общая (6px * k) с каждой стороны
   съедала 19 px из 98-пиксельной колонки, и после увеличения значка под
   слово оставалось 45 px — «Стрелок» не влезал. */
.sb-kit{display:flex;align-items:center;justify-content:flex-start;overflow:hidden;
  padding-left:3px;padding-right:2px}
.sb-clan{display:flex;align-items:center;justify-content:center;overflow:hidden}
/* Состояние игрока: техника, кит пехотинца, ранение или смерть. */
/* Своя, узкая горизонтальная подкладка: общая (2px * k) вместе со значком
   не помещалась в колонку, и он налезал на разделительные линии соседей. */
.sb-veh{display:flex;align-items:center;justify-content:center;
  padding-left:2px;padding-right:2px;overflow:hidden}
.sb-veh-ic{height:calc(11px * var(--sb-k));width:auto;max-width:100%;opacity:.9}
.sb-veh-q{color:var(--dim);font-weight:700}
/* Ранение и смерть подкрашиваем: значок сам по себе на тёмном фоне читается
   как «просто ещё одна иконка», а состояние должно бросаться в глаза. */
.sb-veh-ic.st-bad{filter:brightness(0) saturate(100%) invert(52%) sepia(72%)
  saturate(1200%) hue-rotate(340deg) brightness(95%)}
.sb-veh-ic.st-dead{opacity:.5}
/* Клантег приглушённо: это не имя, и путать его с ником не надо. */
.clan-tag{
  flex:none;color:var(--dim);border:1px solid var(--line);border-radius:3px;
  font-size:calc(9.9px * var(--sb-k));padding:0 calc(3.9px * var(--sb-k));
  line-height:calc(15px * var(--sb-k));
}
/* Название отряда, если лидер его задал. */
.sq-name{color:var(--acc);font-weight:400}
/* Внутри ячейки чип не должен распирать колонку — режем его, а не сетку. */
.sb-kit .kit-chip{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
/* Чип кита и значок SL общие с панелью игроков — там свой размер. В табло
   поднимаем их тем же множителем, иначе на крупной строке они выглядят
   случайной мелочью. */
/* Чип кита набран мельче строки: это подпись к значку, а не сам текст
   строки, и в свою колонку он на крупном масштабе иначе не помещался. */
.sb-grid .kit-chip{font-size:calc(9px * var(--sb-k));gap:calc(3px * var(--sb-k));
  padding:1px calc(3px * var(--sb-k)) 1px calc(1.5px * var(--sb-k))}
/* Значок кита в полтора раза крупнее подписи: по нему кит и узнают,
   а текст рядом — уточнение. */
.sb-grid .kit-chip-ic{width:calc(13.5px * var(--sb-k));height:calc(13.5px * var(--sb-k))}
.sb-grid .sl-badge{font-size:calc(9px * var(--sb-k));padding:0 calc(3px * var(--sb-k));
  border-radius:calc(2px * var(--sb-k))}
.rank-badge{height:calc(15px * var(--sb-k));width:auto;flex:none;vertical-align:middle}
/* Ранг 1 (Рядовой) — своего PNG-знака нет (см. RankBadge.jsx), поэтому
   голая шестиугольная плашка процедурно, тем же контуром, что и арт. */
.rank-badge.rank-plate{
  display:inline-block;width:calc(30.9px * var(--sb-k));height:calc(15px * var(--sb-k));
  background:linear-gradient(160deg,#242628 0%,#141618 48%,#1d1f21 100%);
  border:1px solid #55585c;
  clip-path:polygon(9% 0,91% 0,100% 50%,91% 100%,9% 100%,0 50%);
}
/* Команды всегда рядом, в линию: табло читают, сравнивая стороны, и одна под
   другой это сравнение убивает. Если экран уже, чем две таблицы, включается
   горизонтальная прокрутка — колонки уезжают за край, но не сминаются. */
.sb-body{overflow-x:auto}
/* min-width:0 обязателен: без него флекс-элемент не даёт сжать себя ниже
   содержимого, и вторая команда выдавливалась бы за край. Своя прокрутка —
   на случай, когда и минимума колонок не хватает. */
.sb-team{min-width:0;overflow-x:auto}

.ev{display:flex;gap:8px;padding:5px 10px;border-bottom:1px solid #1a2127;cursor:pointer;
  font-size:12px}
.ev:hover{background:#1a2229}
.ev .et{color:var(--dim);font-variant-numeric:tabular-nums;font-size:11px;min-width:38px}
.ev .eb{flex:1;min-width:0}

.ins{padding:12px}
.ins h3{margin:0 0 2px;font-size:15px}
/* Превью машины. Каталожные рендеры 480x270, поэтому держим пропорцию —
   иначе на узкой панели картинка прыгала бы по высоте. */
.ins-photo{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;
  border-radius:5px;margin:8px 0 4px;background:var(--bg3)}
/* Название поверх снимка. Тень двойная: рендеры бывают и светлые, и тёмные,
   одной обводки на всех не хватает. */
.ins-shot{position:relative;margin:2px 0 4px}
.ins-shot .ins-photo{margin:0}
.ins-shot-name{
  position:absolute;left:9px;top:7px;right:9px;
  font-size:15px;font-weight:700;line-height:1.2;
  text-shadow:0 1px 2px #000,0 0 9px rgba(0,0,0,.85);
  pointer-events:none;
}
.ins h3 .wound-icon{width:15px;height:15px;vertical-align:-2px;margin-right:4px}
.wound-dt{color:#ff8c82}
.wound-dd{color:#ff8c82}
.ins .sub{color:var(--dim);font-size:11px;margin-bottom:12px}
.kv{display:grid;grid-template-columns:auto 1fr;gap:5px 12px;font-size:12px}
.kv dt{color:var(--dim)}
.kv dd{margin:0;font-variant-numeric:tabular-nums}
.hpbar{height:5px;background:var(--bg3);border-radius:3px;overflow:hidden;margin-top:3px}
.hpbar i{display:block;height:100%;background:var(--ok)}

/* Админ-блок в карточке игрока — виден только владельцу/админу (см.
   isStaff в app.js), сервер всё равно перепроверит право на каждое
   действие. Визуально отделён от остальной карточки чертой и подписью. */
.ins-admin{margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}
.ins-admin-h{color:var(--dim);font-size:11px;text-transform:uppercase;letter-spacing:.06em;margin-bottom:7px}
.ins-admin-row{display:flex;flex-wrap:wrap;gap:6px}
.ins-admin-punish{margin-top:8px}
.adm-btn{
  background:var(--bg3);border:1px solid var(--line);border-radius:4px;
  padding:5px 10px;font-size:11.5px;color:var(--fg);
}
.adm-btn:hover{border-color:var(--acc)}
.adm-btn.bad{border-color:#5a2b26;color:#ff8c82}
.adm-btn.bad:hover{border-color:var(--bad)}
.adm-reason{
  width:100%;background:var(--bg3);border:1px solid var(--line);border-radius:4px;
  padding:6px 8px;font:inherit;color:var(--fg);margin-bottom:7px;
}
.ins-admin-msg{margin-top:7px;font-size:11.5px;color:var(--dim);min-height:14px}

/* ---------- транспорт: полоса во всю ширину + строка кнопок ---------- */
.transport{
  height:var(--ftr);
  display:flex;flex-direction:column;justify-content:flex-end;
  /* Тёмная подложка ютуба и никакой рамки сверху: самый верхний элемент —
     сама полоса перемотки, как в плеере. */
  background:#0f0f0f;
}

/* Полоса перемотки — геометрия ютуба: трек 3px, под курсором 5px,
   голова 13px появляется масштабом. Идёт во всю ширину, без отступов. */
.scrub{position:relative;height:14px;cursor:pointer;touch-action:none}
.scrub-hit{position:absolute;left:0;right:0;top:0;bottom:0;display:flex;align-items:center}
.scrub-track{
  position:relative;width:100%;height:3px;
  background:rgba(255,255,255,.2);transition:height .1s cubic-bezier(0,0,.2,1);
}
.scrub-hover,.scrub-fill{position:absolute;top:0;bottom:0;left:0;width:0}
.scrub-hover{background:rgba(255,255,255,.5)}
.scrub-fill{background:var(--live)}
.scrub-head{
  position:absolute;top:50%;left:0;width:13px;height:13px;border-radius:50%;
  background:var(--live);transform:translate(-50%,-50%) scale(0);
  transition:transform .1s cubic-bezier(0,0,.2,1);
}
.transport:hover .scrub-track,.scrub.drag .scrub-track{height:5px}
.transport:hover .scrub-head,.scrub.drag .scrub-head{transform:translate(-50%,-50%) scale(1)}

/* дыры записи: агент в это время не писал (перезапуск, обрыв) */
.scrub-gaps{position:absolute;left:0;right:0;top:0;bottom:0;pointer-events:none}
.scrub-gaps i{position:absolute;top:0;bottom:0;background:#63686f;min-width:2px}

/* отметки событий на полосе (килы, захваты) */
.scrub-events{position:absolute;left:0;right:0;top:50%;height:0}
.scrub-events i{position:absolute;top:0;border-radius:1px;width:2px;transform:translate(-50%,-50%);opacity:.72}

/* подсказка времени под курсором */
.scrub-tip{
  position:absolute;bottom:19px;transform:translateX(-50%);
  background:rgba(10,13,16,.94);border:1px solid var(--line);border-radius:4px;
  padding:3px 8px;font-size:11px;white-space:nowrap;pointer-events:none;
  font-variant-numeric:tabular-nums;z-index:5;
}
.scrub-tip span{color:var(--dim)}
.scrub-tip span:not(:empty){margin-left:7px}

/* Строка кнопок — метрики ютуба: высота 48, кнопка 48x48, иконка 36x36,
   белая с opacity .9, без фона на ховере. */
/* Три колонки: слева время, справа статус эфира, посередине — все
   органы управления. auto в средней колонке держит её по содержимому,
   а равные 1fr по бокам центрируют её независимо от того, что лежит
   слева/справа (перемотка на 10с шире «Прямого эфира» — со флексом и
   одной стороной auto центр бы всё время съезжал). */
.tbar{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;height:48px;padding:0 10px;column-gap:8px}
.tbar-left{display:flex;align-items:center;gap:8px;min-width:0;overflow:hidden}
.tbar-center{display:flex;align-items:center;gap:2px}
.tbar-right{display:flex;align-items:center;justify-content:flex-end;gap:8px;min-width:0}
.ytb{
  width:48px;height:48px;flex:none;padding:0;
  display:flex;align-items:center;justify-content:center;
  opacity:.9;transition:opacity .1s;
}
.ytb:hover{opacity:1}
.ytb svg{width:100%;height:100%;fill:#fff}
.ytb svg text{fill:#fff;font-family:inherit;font-weight:600}
/* play/pause — одна кнопка, показываем нужную иконку */
#btnPlay .ic-pause{display:none}
body.playing #btnPlay .ic-play{display:none}
body.playing #btnPlay .ic-pause{display:block}

.time{
  font-variant-numeric:tabular-nums;font-size:13px;color:#fff;
  padding:0 5px;white-space:nowrap;
}
.time .tsep{color:#fff;opacity:.7}
#tEnd{opacity:.7}

/* Скорость — как пункты меню ютуба: без рамок, подсветка активного. */
.speeds{display:flex;gap:2px;margin:0 4px}
.speeds button{
  padding:5px 9px;border-radius:2px;font-size:12px;color:#fff;opacity:.7;
  font-variant-numeric:tabular-nums;
}
.speeds button:hover{opacity:1;background:rgba(255,255,255,.1)}
.speeds button.on{opacity:1;color:var(--live);font-weight:600}

/* карточка техники: история посадок */
.vh-title{margin:14px 0 6px;font-size:11px;color:var(--dim);text-transform:uppercase;letter-spacing:.06em}
.vh{max-height:260px;overflow-y:auto;border:1px solid var(--line);border-radius:5px}
.vh-row{display:flex;gap:9px;padding:4px 8px;border-bottom:1px solid #1a2127;font-size:12px}
.vh-row:last-child{border-bottom:0}

/* карточка FOB: прочность, пожар, осада */
.hpbar{
  height:5px;border-radius:3px;background:#1a2127;overflow:hidden;margin:2px 0 4px;
}
.hpbar i{display:block;height:100%;border-radius:3px}
.fob-fire,.fob-siege{
  margin:8px 0 2px;padding:6px 9px;border-radius:5px;font-size:12px;
  border:1px solid transparent;
}
.fob-fire{background:rgba(255,106,77,.12);border-color:rgba(255,106,77,.45);color:#ff8a7a}
.fob-fire b{color:#ff6a4d;letter-spacing:.06em}
.fob-why{margin-top:3px;color:var(--fg)}
.fob-siege{background:rgba(245,200,50,.1);border-color:rgba(245,200,50,.4);color:#f5c832}

/* карточка техники: места и кто на них сидит */
.seats{border:1px solid var(--line);border-radius:5px;overflow:hidden}
.seat{
  display:grid;grid-template-columns:18px 74px 1fr;align-items:baseline;
  gap:8px;padding:4px 8px;font-size:12px;border-bottom:1px solid #1a2127;
}
.seat:last-child{border-bottom:0}
.seat-n{color:var(--dim);font-variant-numeric:tabular-nums;text-align:right}
.seat-role{color:var(--dim);font-size:11px}
.seat.on{background:rgba(255,255,255,.03)}
.seat.on .seat-role{color:var(--acc)}
.seat-who b{font-weight:600;cursor:pointer}
.seat-who b:hover{text-decoration:underline}
.seat-guns{display:flex;flex-wrap:wrap;gap:4px 10px;margin-top:2px}
.seat-guns .gun{font-size:11px;color:var(--dim)}
.seat-guns .gun b{color:var(--fg);font-weight:600}

/* боекомплект: что несёт боец и сколько к этому патронов */
.kit{border:1px solid var(--line);border-radius:5px;overflow:hidden}
.kit-row{
  display:flex;justify-content:space-between;gap:10px;align-items:baseline;
  padding:4px 8px;font-size:12px;border-bottom:1px solid #1a2127;
}
.kit-row:last-child{border-bottom:0}
.kit-row.on{background:rgba(255,255,255,.03)}
.kit-row.on .kit-name{color:var(--acc)}
.kit-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kit-ammo{font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--dim)}
.kit-ammo b{color:var(--fg);font-weight:600}
.kv dd a{color:var(--t1);text-decoration:none}
.kv dd a:hover{text-decoration:underline}

.kv dd.mono{font-family:Consolas,monospace;font-size:10px;word-break:break-all}

/* прямой эфир: индикатор «Прямой эфир» и отставание от головы */
/* «Прямой эфир» — как у ютуба: точка + текст, красная только в эфире. */
.livebtn{
  display:flex;align-items:center;gap:6px;height:48px;padding:0 9px;
  font-size:13px;color:#fff;opacity:.7;
}
.livebtn i{width:9px;height:9px;border-radius:50%;background:currentColor;flex:none}
.livebtn:hover{opacity:1}
.livebtn.on{opacity:1;color:var(--live);cursor:default}
.livebtn.on i{animation:pulse 1.6s ease-in-out infinite}
/* В записи кнопка эфира появляется, только когда агент реально пишет
   (класс livable). Часы «отставания» при этом не нужны — они про эфир. */
body:not(.live):not(.livable) .livebtn{display:none}
body:not(.live) .clock{display:none}
/* Предложение перейти в эфир: заметный акцентный цвет, но без пульсации —
   пульсирует только то, что идёт прямо сейчас у тебя на экране. */
body.livable:not(.live) .livebtn{opacity:1;color:var(--live)}
.clock{font-variant-numeric:tabular-nums;font-size:12px;color:#fff;opacity:.7;margin-left:4px}
.clock.warn{color:var(--acc);opacity:1}
/* на самой голове эфира скорость ни на что не влияет */
body.athead .speeds{opacity:.45}

/* --- схема повреждений техники ------------------------------------------
   Симметрично, как машина сверху: парные узлы по сторонам, корпус и
   двигатель в середине. Видно не только сколько осталось, но и с какой
   стороны разбито. */
.schema{margin:6px 0 10px}

/* Плашка общей прочности — как в игровом попапе техники (F, наведение на
   машину): полоса с гаечным ключом слева, сверху словами. Цвет по остатку
   прочности (hullTier в app.js): 71-100% зелёный, 30-70% жёлтый, 1-30%
   красный, 0% — чёрный (выбит совсем, а не просто «сильно повреждён»). */
.vhull{
  background:rgba(76,207,106,.07);border:1px solid rgba(76,207,106,.25);
  border-radius:5px;padding:8px 10px;margin-bottom:8px;
}
.vhull-words{font-size:12px;margin-bottom:5px}
.vhull-row{display:flex;align-items:center;gap:8px}
.vhull-ic{width:18px;height:18px;flex:none;color:#4ccf6a}
.vhull-ic svg{width:100%;height:100%;display:block}
.vhull-bar{flex:1;height:8px;border-radius:4px;background:rgba(255,255,255,.10);overflow:hidden}
.vhull-bar i{display:block;height:100%;border-radius:4px;background:#4ccf6a}

.vhull.t-warn{background:rgba(232,193,74,.08);border-color:rgba(232,193,74,.30)}
.vhull.t-warn .vhull-ic{color:#e8c14a}
.vhull.t-warn .vhull-bar i{background:#e8c14a}

.vhull.t-crit{background:rgba(255,90,77,.09);border-color:rgba(255,90,77,.32)}
.vhull.t-crit .vhull-ic{color:#ff5a4d}
.vhull.t-crit .vhull-bar i{background:#ff5a4d}

.vhull.t-dead{background:#000;border-color:rgba(255,255,255,.10)}
.vhull.t-dead .vhull-ic{color:#5b636b}
.vhull.t-dead .vhull-bar i{background:#000}
.schema .srow{display:grid;grid-template-columns:1fr 1.15fr 1fr;gap:8px;margin-top:6px}
.schema .sside,.schema .smid{display:flex;flex-direction:column;gap:5px}
.part{display:grid;grid-template-columns:1fr;gap:2px;
  background:rgba(255,255,255,.03);border-radius:4px;padding:5px 6px}
.part .pl{font-size:10px;color:var(--dim);letter-spacing:.02em}
.part .pb{height:5px;border-radius:3px;background:rgba(255,255,255,.10);overflow:hidden}
.part .pb i{display:block;height:100%;border-radius:3px}
.part .pv{font-size:11px;font-variant-numeric:tabular-nums}
.part.dead{background:rgba(255,90,77,.10)}
.part.dead .pl{color:#ff8c82}

/* Плитки узлов: иконка (колесо / гусеница / двигатель…), окрашенная остатком
   прочности. По силуэту сразу видно, колёсная машина или гусеничная. */
.schema .srow.ico .sside,.schema .srow.ico .smid{gap:8px;align-items:center;justify-content:flex-start}
.pcell{display:flex;flex-direction:column;align-items:center;gap:2px;
  width:100%;padding:6px 4px;border-radius:4px;background:rgba(255,255,255,.03)}
.pcell .pic{width:26px;height:26px;position:relative}
.pcell .pic svg{width:100%;height:100%;display:block}
/* Высота фиксирована под две строки: «Колесо справа N» переносится,
   «Колесо слева N» — нет, и без этого колонки левого/правого борта
   расползались по высоте уже со второй плитки. */
.pcell .pcl{font-size:10px;color:var(--dim);letter-spacing:.03em;
  min-height:26px;line-height:13px;text-align:center}
.pcell .pcb{width:100%;height:4px;border-radius:2px;background:rgba(255,255,255,.10);overflow:hidden}
.pcell .pcb i{display:block;height:100%;border-radius:2px}
.pcell .pcv{font-size:11px;font-variant-numeric:tabular-nums}
.pcell .pcv span{color:var(--dim);font-size:10px}
.pcell.dead{background:rgba(255,90,77,.10)}
.pcell.dead .pcl{color:#ff8c82}
/* Узел выведен из строя — перечёркиваем значок красной чертой, как «двигатель
   заглох» в игровом попапе: крест виднее, чем просто цвет иконки. */
.pcell.dead .pic::after{
  content:'';position:absolute;left:-2px;right:-2px;top:50%;height:2px;
  background:#ff5a4d;border-radius:2px;transform:rotate(-35deg);
}

/* Груз техники: патроны/стройка, как в игровом попапе снабжения — два
   значка с числами сверху, общая полоса под ними, шкала 0…ёмкость снизу. */
.cargobar{background:rgba(255,255,255,.03);border-radius:6px;
  padding:10px 12px;margin:10px 0}
.cargobar-row{display:flex;gap:20px;margin-bottom:9px}
.cargobar-item{display:flex;align-items:center;gap:8px}
.cargobar-ic{width:28px;height:28px;border-radius:50%;background:var(--bg3);
  display:flex;align-items:center;justify-content:center;flex:none}
.cargobar-ic svg{width:17px;height:17px;display:block}
.cargobar-num{font-size:16px;font-weight:700;font-variant-numeric:tabular-nums}
.cargobar-num.ammo{color:#e0563a}
.cargobar-num.build{color:#f5c832}
.cargobar-track{display:flex;height:7px;border-radius:4px;overflow:hidden;
  background:rgba(255,255,255,.08)}
.cargobar-track i{display:block;height:100%}
.cargobar-track i.ammo{background:#e0563a}
.cargobar-track i.build{background:#f5c832}
.cargobar-scale{display:flex;justify-content:space-between;font-size:10px;
  color:var(--dim);margin-top:4px;font-variant-numeric:tabular-nums}

/* --- кит бойца в экипаже --------------------------------------------------
   Значок класса + подпись: место в экипаже читается, не вчитываясь.
   Названо kit-chip, а не .kit — то имя уже занято списком снаряжения в
   карточке игрока (renderKit ниже), и с одинаковым классом это правило,
   идущее позже в файле, перебивало вертикальный список на inline-flex:
   снаряжение съезжало в одну строку и уходило за край панели. */
.seat-meta{display:flex;align-items:center;gap:8px;margin-top:2px;flex-wrap:wrap}
.kit-chip{display:inline-flex;align-items:center;gap:4px;font-size:11px;
  color:var(--fg);background:rgba(255,255,255,.06);border-radius:3px;padding:1px 6px 1px 3px}
.kit-chip-ic{width:13px;height:13px;object-fit:contain;
  filter:brightness(0) invert(1) opacity(.85)}

/* Обратный отсчёт до выхода следующей машины этого типа — из очереди
   доступности, которую агент снимает у сервера (meta.availLog). Стоит рядом
   со счётчиком «живых/всего»: это про один и тот же тип техники. */
.vrow .vwait{
  padding:1px 7px;border-radius:3px;
  font-size:11px;font-variant-numeric:tabular-nums;
  color:#e0c47a;border:1px solid #6b5a2f;
}