/* Manrope — шрифт макета StreamVibe. Лежит локально в web/fonts, CDN нет.
   Подключён здесь, а не в tokens.css: style.css единственный, который есть на
   всех страницах (плеер index.html токены не грузит). Файл вариативный,
   поэтому один @font-face на весь диапазон 400-800. */
@font-face{font-family:Manrope;font-style:normal;font-weight:400 800;font-display:swap;
  src:url(fonts/manrope-cyrillic-ext.woff2) format('woff2');
  unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}
@font-face{font-family:Manrope;font-style:normal;font-weight:400 800;font-display:swap;
  src:url(fonts/manrope-cyrillic.woff2) format('woff2');
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:Manrope;font-style:normal;font-weight:400 800;font-display:swap;
  src:url(fonts/manrope-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Manrope;font-style:normal;font-weight:400 800;font-display:swap;
  src:url(fonts/manrope-latin.woff2) format('woff2');
  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}

:root{
  --bg:#0f0f0f;
  --bg2:#141414;
  --bg3:#1f1f1f;
  --line:#262626;
  --fg:#ffffff;
  --dim:#999999;
  --acc:#e50000;
  --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:500 13px/1.45 Manrope,"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:rgba(15,15,15,.62);
  -webkit-backdrop-filter:blur(14px) saturate(.9);
          backdrop-filter:blur(14px) saturate(.9);
  border-bottom:1px solid var(--line);
}
/* Имя вдвое крупнее прежнего и самым жирным начертанием, какое есть у
   Manrope (переменная ось идёт до 800). Разрядку при этом убавили: на 26px
   прежние .09em растащили бы строку почти на треть шире, и она полезла бы
   на название карты справа. */
.brand{display:flex;align-items:center;gap:9px;letter-spacing:.04em;
       font-size:26px;font-weight:800;line-height:1}
.brand b{color:var(--acc);font-weight:800}
/* Знак — сама монограмма BZP (assets/bzp-mark.png, вырезана из фоновой
   графики без чёрной подложки), а не абстрактный глиф ▚. */
/* Высота знака подобрана под шапку в 52px: она фиксированная (--hdr), и
   всё, что выше ~40px, начало бы упираться в её края. */
.logo{height:38px;width:auto;flex:none;display:block}

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

/* Полосы очков — ровно по середине шапки, а не прижаты к правому краю:
   это главное на панели, и центр читается симметрично для обеих команд.
   Абсолютом, потому что в потоке центр «поплыл» бы от длины названия
   карты слева и статуса справа. */
.tickets{
  position:absolute;left:50%;transform:translateX(-50%);
  display:flex;gap:8px;
}
/* Остальное — как было: инфо о матче слева, кнопки и вход справа. */
.topright{margin-left:auto}
/* Полоса остатка очков. Плашка с процентом сбоку заменена самой полосой:
   сколько осталось — видно длиной заливки, а цифра стоит внутри неё. */
.tk{
  position:relative;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  min-width:236px;
  background:var(--bg3);border:1px solid var(--line);
  border-radius:5px;padding:5px 11px;
}
/* Заливка — командным цветом, вполсилы: поверх неё идёт белый текст.
   Растёт из нуля той же анимацией, что полосы на графиках (sr-fill), а
   дальше следит за тикетами переходом. Масштабом, а не шириной: ширину
   пришлось бы пересчитывать layout'ом на каждое очко. */
.tk-fill{
  position:absolute;left:0;top:0;bottom:0;width:100%;
  transform-origin:left;transform:scaleX(var(--tk-p, 1));
  transition:transform .45s var(--sr-ease, cubic-bezier(.2,.8,.2,1));
  background:var(--c, var(--line));opacity:.34;
}
.tk-in{position:relative;display:flex;align-items:center;gap:7px}
/* Флаг крупный: у фракции это главный опознавательный знак в шапке, а
   картинка квадратная 64x64 с полями — само полотнище внутри заметно
   меньше рамки, и на 16px от него оставалась марка. */
.tk-flag{width:26px;height:auto;flex:none;border-radius:2px}
.tk-name{color:var(--fg);font-size:11px}
/* Значок и число — одна связка, поэтому зазор внутри меньше общего. */
.tk-count{display:flex;align-items:center;gap:4px}
/* Исход раунда — плашкой после очков, только когда раунд дошёл до конца
   (см. syncMatchResult). Победа — зелёная, поражение — приглушённая: в
   шапке и так две цветные полосы, третьему яркому цвету там тесно. */
.tk-res{
  margin-left:4px;padding:1px 6px;border-radius:3px;
  font-size:10px;font-weight:700;letter-spacing:.1em;line-height:1.5;
  background:rgba(0,0,0,.45);color:#8b8b8b;
}
.tk.win .tk-res{color:#5ee08a;background:rgba(20,80,40,.55)}
.tk.win{box-shadow:inset 0 0 0 1px rgba(94,224,138,.55)}
.tk.lose .tk-in{opacity:.8}
.tk-ico{
  width:14px;height:14px;flex:none;
  fill:none;stroke:currentColor;stroke-width:1.4;
  stroke-linejoin:round;opacity:.75;
}
.tk b{font-variant-numeric:tabular-nums;font-size:14px}

.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}

/* ---------- Settings: выбор подложки карты ---------- */
.settings-wrap{position:relative}
.settings-menu{
  position:absolute;top:calc(100% + 6px);left:0;min-width:172px;z-index:80;
  background:var(--bg2);border:1px solid var(--line);border-radius:7px;
  padding:6px;box-shadow:0 10px 28px rgba(0,0,0,.45);
  display:flex;flex-direction:column;gap:2px;
}
/* [hidden] и .settings-menu{display:flex} — оба один класс специфичности,
   а наш стиль в каскаде идёт позже дефолтного `[hidden]{display:none}` из
   стилей браузера и молча его перебивает: меню виднелось бы открытым сразу
   после загрузки страницы. Явно повторяем правило с нужным весом. */
.settings-menu[hidden]{display:none}
.settings-title{
  font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--dim);
  padding:4px 8px 6px;
}
.settings-opt{
  background:none;border:0;border-radius:5px;padding:7px 9px;
  font-size:12.5px;color:var(--fg);text-align:left;cursor:pointer;
}
.settings-opt:hover{background:var(--bg3)}
.settings-opt.on{background:var(--acc);color:#0f0f0f}
/* Слоя нет у этой карты (не качали terrainmap/topomap, или подложки на
   squadmaps вообще нет) — пункт виден, но не нажимается: так понятно, что
   вариант существует в принципе, просто не для текущей карты. */
.settings-opt[disabled]{color:var(--dim);cursor:default;opacity:.5}
.settings-opt[disabled]:hover{background:none}

/* ---------- 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:#2b2b2b;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:absolute;inset:0;
  display:flex;
}
.topbar,.transport{position:absolute;left:0;right:0;z-index:50}
.topbar{top:0}
.transport{bottom:0}
/* Боковик прижат к правому краю и тоже стеклянный. */
.side{position:absolute;top:0;right:0;bottom:0;z-index:45}
/* Карта уходит под обвязку целиком — иначе стекло не над чем показывать. */
.stage{padding:0}
.stage{position:relative;flex:1;min-width:0;background:#0a0a0a}
#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:calc(var(--hdr) + 10px);right:calc(var(--side) + 12px);pointer-events:auto;
  display:flex;flex-direction:column;align-items:flex-end;
}
.overlay.bl{bottom:12px;left:12px}
.overlay.hint{bottom:calc(var(--ftr) + 10px);right:calc(var(--side) + 14px);
  color:#4c4c4c;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:#999999}
body.stale .livebtn.on i{animation:none;background:#999999}

.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:#999999}
.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(0,0,0,.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:#0f0f0f}
.zoomlbl{color:var(--dim);padding:0 5px;font-variant-numeric:tabular-nums}

/* ---------- килфид: плавающее окно ---------- */
.kfwin{
  /* Отступ считается от высоты перемотки, а не числом: 78 было подобрано под
     прежнюю раскладку и разъехалось бы при первой же её правке. z-index выше
     боковика (45) — это плавающее окно, его таскают мышью, и заезжать под
     панель оно не должно. Табло (80) по-прежнему перекрывает всё. */
  position:fixed;left:12px;bottom:calc(var(--ftr) + 16px);z-index:55;
  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}
/* Счётчик — плашкой, а не голой цифрой: рядом с подписью и двумя кнопками
   одинокий «0» читался как обрывок текста, а не как значение. */
.kfcount{
  margin-left:auto;flex:none;
  min-width:22px;padding:2px 7px;border-radius:999px;
  background:var(--bg3);color:var(--dim);
  font-size:10px;line-height:1.3;text-align:center;
  font-variant-numeric:tabular-nums;
}
/* Кнопки шапки. Квадрат 24 — это нижняя граница удобного попадания: прежние
   22×20 были и мельче, и несимметричны, отчего значки стояли неровно. */
.kfbtn{
  width:24px;height:24px;flex:none;padding:0;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  border-radius:6px;color:var(--dim);
  background:transparent;border:1px solid transparent;
  transition:background .12s,color .12s,border-color .12s;
}
.kfbtn svg{
  width:14px;height:14px;display:block;
  fill:none;stroke:currentColor;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round;
}
.kfbtn:hover{background:var(--bg3);color:var(--fg);border-color:var(--line)}
.kfbtn:active{background:#2a2a2a}
/* Обводка по бренду и только с клавиатуры: мышью её показывать незачем, а
   человеку на Tab иначе нечем понять, где он. */
.kfbtn:focus-visible{outline:2px solid var(--acc);outline-offset:1px;color:var(--fg)}
@media (prefers-reduced-motion:reduce){.kfbtn{transition:none}}
.kfbody{
  overflow-y:auto;overscroll-behavior:contain;min-height:0;
  scrollbar-width:thin;scrollbar-color:#333333 transparent;
}
.kfbody::-webkit-scrollbar{width:8px}
.kfbody::-webkit-scrollbar-thumb{background:#333333;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 #1a1a1a;
  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(229,0,0,.14);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:#bfbfbf}
.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-mw{position:relative;display:inline-flex;line-height:0}
.kf-w i.kf-mod{
  position:absolute;top:-2px;right:-3px;
  font-style:normal;font-size:8px;font-weight:700;line-height:1;
  letter-spacing:.02em;padding:1px 3px;border-radius:3px;
  background:#f5c832;color:#1a1400;
  /* Тёмный кант: иконки светлые, и без него жёлтое по белому сливается. */
  box-shadow:0 0 0 1px rgba(10,13,16,.85);
  pointer-events:none;
}
.kf-w i{font-style:normal;font-size:9px;color:var(--dim);line-height:1.2}

/* кнопка «показать», когда окно скрыто */
.kfshow{
  /* Над перемоткой, а не под ней. Перемотка теперь лежит поверх карты
     (стекло во всю ширину, z-index 50), и кнопка на bottom:12px оказалась
     ровно под ней: свернул килл-фид — и развернуть его больше нечем, клик
     уходил в надпись длительности. */
  position:absolute;left:12px;bottom:calc(var(--ftr) + 12px);z-index:55;pointer-events:auto;
  display:flex;align-items:center;gap:6px;
  background:rgba(0,0,0,.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)}

/* ---------- чат игры: то же плавающее окно, но только на чтение ----------

   Раскладку и шапку берём у килфида (.kfwin/.kfhead/.kfbody) — это тот же
   род окна, и заводить ему собственный вид значило бы просто развести два
   почти одинаковых набора правил. Своё здесь только место по умолчанию
   (справа от килфида, вдоль нижнего края) и сами строки: они плотнее, потому
   что реплик за бой на порядок больше, чем убийств. */
.chatwin{left:376px;width:300px;max-height:38vh}
.chatshow{left:132px}
.ch{
  padding:3px 9px 4px 8px;border-bottom:1px solid #161616;
  border-left:2px solid transparent;
  line-height:1.32;animation:kfin .18s ease-out;
}
.ch:hover{background:rgba(255,255,255,.04)}
/* Канал — цветом полоски слева, а не словом: подпись «команде» у каждой
   строки съедала бы половину ширины, ради которой карточка и делалась. */
.ch.c-team{border-left-color:#4aa3ff}
.ch.c-squad{border-left-color:#57c46a}
.ch.c-admin{border-left-color:var(--acc)}
.ch-hd{display:flex;align-items:center;gap:5px;min-width:0}
.ch-t{color:var(--dim);font-size:10px;font-variant-numeric:tabular-nums;flex:none}
.ch-ic{width:13px;height:13px;flex:none;opacity:.85;object-fit:contain}
.ch-n{
  font-weight:600;font-size:11px;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.ch-x{display:block;color:#d7d7d7;word-wrap:break-word;overflow-wrap:anywhere}
@media (max-width:900px){
  /* Рядом два окна по 300+ уже не помещаются — чат уходит под килфид. */
  .chatwin{left:12px;width:352px;max-height:26vh}
}

/* Плашка при наводке на игрока на карте — вид как у нативного оверлея
   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:#e6e6e6;
  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:#bfbfbf;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:8px;margin-top:4px;
  font-size:14px;font-weight:600;color:#f2f2f2;line-height:1.3}
.hudtip .ht-wpn svg{width:24px;height:24px;fill:#cfcfcf;flex:none}
.hudtip .ht-wpn img{height:22px;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:rgba(15,15,15,.62);
  -webkit-backdrop-filter:blur(14px) saturate(.9);
          backdrop-filter:blur(14px) saturate(.9);
  border-left:1px solid var(--line);
  display:flex;flex-direction:column;min-height:0;
  /* Шапка сверху и перемотка снизу лежат поверх, поэтому список начинается
     под первой и заканчивается над второй. */
  padding-top:var(--hdr);padding-bottom:var(--ftr);
}
.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:#383838}
.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:#2e2e2e;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 #1f1f1f;cursor:pointer;
}
.prow:hover{background:#1f1f1f}
.prow.sel{background:#262626}
.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 #1a1a1a;
}
.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:#0f0f0f;border-radius:2px;padding:0 3px;font-size:9px;
  font-weight:700}

/* ---------- scoreboard ---------- */
/* Табло — тем же стеклом, что и остальная обвязка: карта под ним видна и не
   даёт потерять, где ты на записи. */
.sb-overlay{
  position:fixed;inset:0;z-index:80;background:rgba(10,10,10,.66);
  -webkit-backdrop-filter:blur(16px) saturate(.9);
          backdrop-filter:blur(16px) saturate(.9);
  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)}
/* align-items:flex-start — чтобы колонки команд росли ПО СОДЕРЖИМОМУ, а не
   растягивались на высоту окна. Растянутая колонка со скрытым переполнением
   просто обрезала нижние строки, и до них было не добраться ничем: своя
   прокрутка у неё выключена, а общей нечего было прокручивать. */
.sb-body{flex:1;overflow-y:auto;display:flex;gap:1px;background:transparent;
  align-items:flex-start}
.sb-team{flex:1;min-width:0;background:transparent;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,#262626 0%,#141414 48%,#1a1a1a 100%);
  border:1px solid #4c4c4c;
  clip-path:polygon(9% 0,91% 0,100% 50%,91% 100%,9% 100%,0 50%);
}
/* Команды всегда рядом, в линию: табло читают, сравнивая стороны, и одна под
   другой это сравнение убивает. Если экран уже, чем две таблицы, включается
   горизонтальная прокрутка — колонки уезжают за край, но не сминаются. */
.sb-body{overflow-x:auto}
/* min-width:0 обязателен: без него флекс-элемент не даёт сжать себя ниже
   содержимого, и вторая команда выдавливалась бы за край. Своя прокрутка —
   на случай, когда и минимума колонок не хватает. */
/* overflow-y:hidden обязателен. По правилам CSS, если по одной оси стоит
   `auto`, а по другой осталось `visible`, вторая тоже становится `auto` — и у
   КАЖДОЙ команды появлялся свой вертикальный ползунок. Их было три на экран:
   два внутри и один общий, и таблица ездила под рукой то одна, то другая.
   Прокрутка вверх-вниз должна быть одна на всё табло — она у .sb-body. */
.sb-team{min-width:0;overflow-x:auto;overflow-y:hidden}

.ev{display:flex;gap:8px;padding:5px 10px;border-bottom:1px solid #1f1f1f;cursor:pointer;
  font-size:12px}
.ev:hover{background:#1f1f1f}
.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:rgba(15,15,15,.62);
  -webkit-backdrop-filter:blur(14px) saturate(.9);
          backdrop-filter:blur(14px) saturate(.9);
}

/* Полоса перемотки — геометрия ютуба: трек 3px, под курсором 5px,
   голова 13px появляется масштабом. Идёт во всю ширину, без отступов. */
/* user-select обязателен: без него рывок мышью по полосе запускает родное
   выделение текста, браузер забирает указатель себе и перетаскивание
   обрывается на полпути (см. pointerdown у полосы в app.js). */
.scrub{position:relative;height:14px;cursor:pointer;touch-action:none;
  -webkit-user-select:none;user-select:none}
/* Волна потерь над полосой: сколько очков команда теряла в эти секунды.
   Мышь её не ловит — вся полоса остаётся одной большой кнопкой перемотки,
   как была. Появляется вместе с утолщением полосы, при наведении. */
.scrub-wave{
  position:absolute;left:0;right:0;bottom:9px;width:100%;height:26px;
  display:block;pointer-events:none;
  opacity:.45;transition:opacity .12s cubic-bezier(0,0,.2,1);
}
.transport:hover .scrub-wave,.scrub.drag .scrub-wave{opacity:1}
.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:#737373;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 #1f1f1f;font-size:12px}
.vh-row:last-child{border-bottom:0}
/* Значок ствола в хронике — та же картинка, что в килфиде, но по высоте
   строки списка. Своё правило для <svg> обязательно: без ширины и высоты
   он разворачивается в дефолтные 300×150 и разносит карточку. */
.vh-w{display:inline-flex;align-items:center;vertical-align:-3px;color:#bfbfbf}
.vh-w svg{display:block;width:30px;height:10px;fill:currentColor;opacity:.9}
.vh-w img{display:block;width:36px;height:auto;opacity:.95}
.vh-w img.vh-veh{width:auto;height:15px}
.vh-w .kf-mw{position:relative;display:inline-flex}

/* карточка FOB: прочность, пожар, осада */
.hpbar{
  height:5px;border-radius:3px;background:#1f1f1f;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 #1f1f1f;
}
.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:grid;grid-template-columns:26px 1fr auto;
  gap:8px;align-items:center;
  padding:4px 8px;font-size:12px;border-bottom:1px solid #1f1f1f;
}
.kit-ic{display:flex;align-items:center;justify-content:center;min-width:0}
/* Ширину не задаём: у стволов картинка вытянутая, у гранаты почти квадрат —
   держим по высоте, а по ширине пусть ложится как есть, в свои 26 px. */
.kit-ic .kit-wi{height:14px;width:auto;max-width:100%;object-fit:contain;opacity:.9}
/* Значки техники квадратные и рисуются крупнее — им своя высота. */
.kit-ic .kit-veh{height:16px}
.kit-ic svg{width:22px;height:10px;fill:none;stroke:#9a9a9a;stroke-width:1.4}
.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;
}
/* Кнопка стоит в центральной группе, слева от скоростей: небольшой отступ,
   чтобы «Прямой эфир» и «0.5×» не слипались. */
.tbar-center .livebtn{margin-right:8px}
.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:#737373}
.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;
}


/* Ники кликабельны во всех панелях: ЛКМ — профиль, ПКМ — следить за игроком.
   Цвет не задаём: его ставит команда игрока инлайном, а ссылка не должна
   перекрашивать имя в общий цвет ссылок. Подчёркивание только под курсором —
   иначе лента убийств превращается в сплошной частокол линий. */
.nick {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}
.nick:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* --- хронология тикетов ---------------------------------------------------
   Тот же полноэкранный оверлей, что у табло: график сверху, лента снизу.
   Лента прокручивается сама, график остаётся на месте — иначе, листая
   события, теряешь из виду кривую, ради которой всё и открывали. */
.tl-hint{margin-left:12px;font-size:11px}
.tl-body{flex:1;min-height:0;display:flex;flex-direction:column;padding:12px}
#tlChart{flex:none;display:block;margin-bottom:10px}
.tl-list{
  flex:1;min-height:0;overflow-y:auto;
  border-top:1px solid var(--line);font-size:12px;
  /* Полоса прокрутки — в цвет сайта, а не системная белая: она стоит на
     тёмном стекле поверх карты и белой бросалась в глаза (12.09.2026). */
  scrollbar-width:thin;scrollbar-color:var(--acc) transparent;
}
.tl-list::-webkit-scrollbar{width:8px}
.tl-list::-webkit-scrollbar-track{background:transparent}
.tl-list::-webkit-scrollbar-thumb{background:var(--acc);border-radius:4px}
.sb-body{scrollbar-width:thin;scrollbar-color:var(--acc) transparent}
.sb-body::-webkit-scrollbar{width:8px;height:8px}
.sb-body::-webkit-scrollbar-track{background:transparent}
.sb-body::-webkit-scrollbar-thumb{background:var(--acc);border-radius:4px}
/* Полоса цвета команды слева — по ней видно, чьи очки утекли, ещё до чтения. */
.tl-row{
  display:grid;grid-template-columns:64px 46px 52px 1fr;
  gap:10px;align-items:baseline;
  padding:5px 10px 5px 8px;border-bottom:1px solid #1a1a1a;
  border-left:3px solid var(--c);cursor:pointer;
}
.tl-row:hover{background:rgba(255,255,255,.04)}
.tl-t{color:var(--dim);font-variant-numeric:tabular-nums}
.tl-d{color:#ff8a7a;font-weight:600;font-variant-numeric:tabular-nums;text-align:right}
.tl-left{font-variant-numeric:tabular-nums;text-align:right}
.tl-wh{display:flex;flex-wrap:wrap;gap:4px 12px;min-width:0}
.tl-why{white-space:nowrap}
.tl-why.tk{color:#ffb066}
.tl-why.veh{color:#ffd24a}
.tl-why.fob{color:#ff6a4d}
.tl-nick{font-weight:600;cursor:pointer}
.tl-nick:hover{color:var(--acc)}

/* Подсказка у точки на графике. Абсолютом внутри тела оверлея, а не рядом с
   курсором в document: канва прокручивается вместе с лентой, и фиксированная
   позиция уехала бы от точки. */
.tl-body{position:relative}
.tl-tip{
  position:absolute;z-index:5;pointer-events:none;max-width:340px;
  background:rgba(10,13,16,.96);border:1px solid var(--line);border-radius:5px;
  padding:7px 10px;font-size:12px;line-height:1.45;
  box-shadow:0 6px 20px rgba(0,0,0,.55);
}
.tl-tip-h{font-weight:600;margin-bottom:3px}
#tlChart{cursor:crosshair}
.tl-d.up{color:#7fd692}
.tl-why.cap{color:#7fd692}
.tl-why.bleed{color:#b9a6c9}
.tl-tip-s{font-size:11px;margin-bottom:4px}
/* Цена строки разбора: прижата влево и моноширинная, чтобы столбик читался. */
.tl-c{
  font-style:normal;display:inline-block;min-width:26px;margin-right:5px;
  color:#ff8a7a;font-weight:600;font-variant-numeric:tabular-nums;text-align:right;
}
.tl-why.self{color:#c9a0f5}

/* ---------- состав отряда в карточке лидера ----------

   Плитка живёт под сводкой по самому лидеру и повторяет раскладку игрового
   списка отряда: полоса полуотряда слева, значок состояния, ник, кит и где
   человек сейчас. Ширина панели невелика, поэтому строка в две колонки:
   слева кто, справа где и счёт. */
.sqr{margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}
.sqr-h{
  color:var(--dim);font-size:11px;text-transform:uppercase;letter-spacing:.06em;
  margin-bottom:8px;display:flex;justify-content:space-between;gap:8px;
}
.sqr-h .dim{text-transform:none;letter-spacing:0}
/* Полоса слева — цвет полуотряда, как «A»/«B» в игре. */
.sqr-ft{border-left:2px solid var(--c);padding-left:8px;margin-bottom:8px}
.sqr-ft-h{
  font-size:10px;font-weight:700;color:var(--c);letter-spacing:.08em;
  margin:2px 0 4px;
}
.sqr-ft-h .dim{font-weight:400;letter-spacing:0}
.sqr-row{
  display:grid;grid-template-columns:20px 1fr auto;gap:6px;align-items:start;
  padding:4px;border-radius:4px;
}
.sqr-row.on{background:rgba(255,255,255,.07)}
.sqr-ic{display:flex;align-items:center;justify-content:center;--sb-k:1.4;padding-top:1px}
.sqr-mid{min-width:0;display:flex;flex-direction:column;line-height:1.3;gap:1px}
.sqr-nm{display:flex;align-items:center;gap:5px;min-width:0}
.sqr-nm .nick{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Кит и место — второй строкой, во всю ширину: в одну строку с ником они не
   помещались, и ник обрезался до буквы с многоточием. */
.sqr-sub{font-size:10px;overflow-wrap:anywhere}
.sqr-sub a{color:inherit;text-decoration:underline;text-decoration-style:dotted}
.sqr-dot{opacity:.5}
/* Кого нет на карте — приглушаем: строка остаётся (лидеру важно, что человек
   в отряде есть), но взгляд по ней не цепляется. */
.sqr-row.off{opacity:.55}
.sqr-kd{font-size:10px;font-variant-numeric:tabular-nums;white-space:nowrap;padding-top:1px}
/* Лидер и командир: подпись коротким жетоном, чтобы не съедать ширину. */
.sqr-sl{
  font-size:9px;font-weight:700;letter-spacing:.04em;padding:0 3px;border-radius:3px;
  background:rgba(255,255,255,.14);color:#e8eef3;flex:none;
}
.sqr-cmd{color:#f5c832;font-size:12px;line-height:1;flex:none}
.sqr-note{
  font-size:9px;padding:0 3px;border-radius:3px;
  background:rgba(255,255,255,.10);cursor:help;
}

/* ---------- звание в карточке игрока ----------

   Знак рисуется своим цветом металла (--m1/--m2): медь, серебро, золото —
   ровно та же лестница, что в кабинете, только считает её сервер. */
.rk{
  display:grid;grid-template-columns:58px 1fr;gap:10px;align-items:center;
  margin:10px 0 2px;padding:8px 9px;border-radius:6px;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07);
}
/* Знак — картинка из кабинета, без своей плашки: она у знака уже нарисована.
   Пропорции у файлов вытянутые (ширина примерно вдвое больше высоты). */
.rk-ic{display:flex;align-items:center;justify-content:flex-start}
.rk-art{width:58px;height:auto;display:block;object-fit:contain}
.rk-body{min-width:0}
.rk-t{font-weight:600;font-size:12px;color:var(--m1)}
.rk-p{font-size:10px;font-variant-numeric:tabular-nums;margin-top:1px}
.rk-left{opacity:.75}
.rk-bar{
  height:3px;border-radius:2px;background:rgba(255,255,255,.10);
  overflow:hidden;margin-top:5px;
}
.rk-bar i{display:block;height:100%;background:var(--m1)}



/* Полуотряд — цветом всей строки, а не буквой рядом с ником: букву на
   плотной таблице приходилось искать глазами, а полосу слева и лёгкую
   заливку видно сразу, и Bravo от Charlie отделяется одним взглядом.
   Alpha не красим — это весь отряд по умолчанию, и подсветка у большинства
   строк перестала бы что-либо значить.

   Полоса 5px и заливка в четверть: прежние 3px и 7% на полсотне строк
   терялись — просили ярче (12.09.2026). Цвета те же, что у подписи
   полуотряда в карточке (FIRETEAM в app.js), Bravo от Charlie отличимы
   и на тёмном стекле табло. */
.sb-prow.ft1{box-shadow:inset 5px 0 0 #c9b3ff;background:rgba(185,163,240,.22)}
.sb-prow.ft2{box-shadow:inset 5px 0 0 #5cf0e8;background:rgba(79,214,207,.22)}
.sb-prow.ft1:hover{background:rgba(185,163,240,.34)}
.sb-prow.ft2:hover{background:rgba(79,214,207,.34)}
/* Ник — в цвет полуотряда: полосу видно, а к кому она относится — читается
   по имени, не сверяя строки. */
.sb-prow.ft1 .sb-nm .nm-t{color:#d9caff}
.sb-prow.ft2 .sb-nm .nm-t{color:#9df3ee}

/* Переключатель служебных записей относится только к ленте событий — на
   остальных вкладках он бы вводил в заблуждение. */
.side:not([data-tab="events"]) #fService{display:none}

/* ---------- режим таймлапса (?tl=1, снимает timelapse.py) ----------
   Карта во весь холст, из шапки остаются только тикеты; всё, чем управляет
   человек, спрятано — в кадре ему делать нечего. */
body.timelapse .side, body.timelapse .transport, body.timelapse .kfwin,
body.timelapse .kfshow, body.timelapse .overlay, body.timelapse .hudtip,
body.timelapse .topright, body.timelapse #status{display:none !important}
body.timelapse .stage{position:fixed;inset:0;z-index:1}
body.timelapse header, body.timelapse .hdr{position:fixed;top:0;left:0;right:0;z-index:5;
  background:rgba(8,11,14,.55);pointer-events:none}
body.timelapse #tlClock{
  position:fixed;right:16px;bottom:14px;z-index:6;
  font:700 22px/1 "Segoe UI",sans-serif;letter-spacing:.06em;color:#fff;
  padding:6px 10px;border-radius:6px;background:rgba(8,11,14,.7);
  font-variant-numeric:tabular-nums;
}