/* Внешка: шапка с вкладками, списки ивентов/кланов, модалка топа.
   Плеер (index.html) живёт на style.css — здесь только публичные страницы. */

/* style.css фиксирует тело под плеер (height:100%; overflow:hidden) — там это
   нужно, чтобы карта занимала ровно экран. Страницам внешки, наоборот, нужен
   обычный скролл документа, иначе position:sticky у шапки считается от body
   как от скролл-контейнера и залипание ломается. */
html:has(body.site){height:auto}
body.site{height:auto;min-height:100%;overflow:visible}
.site-wrap{max-width:1060px;margin:0 auto;padding:24px 20px 70px}

/* ---------- шапка с логотипом и вкладками ---------- */
/* Три колонки: вкладки — логотип — пользователь. Логотип стоит ровно по
   центру строки, поэтому боковые колонки равны (1fr) и обе умеют сжиматься:
   с minmax(0,1fr) вместо 1fr трек считается по содержимому и полоса вкладок
   наезжала бы на лого вместо того, чтобы скроллиться внутри себя. */
.sitebar{
  height:var(--hdr-site);display:grid;
  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  align-items:center;gap:32px;padding:0 18px;
  background:var(--bg2);border-bottom:1px solid var(--line);
  position:sticky;top:0;z-index:20;
}
/* Логотип и есть вкладка «Главная» — отдельной текстовой в списке нет. */
.sitebar .brand{
  display:flex;align-items:center;justify-content:center;
  flex:none;text-decoration:none;
}
.sitebar .brand img{height:var(--logo-h);width:auto;display:block}
/* Вкладок со временем становится больше, а ширина окна не растёт: полоса
   должна скроллиться сама, а не растягивать документ и не вешать на страницу
   горизонтальный скролл. Скроллбар прячем — полоса и так узкая. Обрезаем не
   встык к логотипу, а затуханием: иначе последняя вкладка выглядит как
   наехавшая на лого, а не как обрезанная. */
.sitenav{
  display:flex;gap:4px;min-width:0;overflow-x:auto;
  scrollbar-width:none;-ms-overflow-style:none;
  -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - var(--nav-fade)),transparent);
  mask-image:linear-gradient(90deg,#000 calc(100% - var(--nav-fade)),transparent);
}
.sitenav::-webkit-scrollbar{display:none}
.snav{
  flex:none;white-space:nowrap;
  padding:9px 15px;border-radius:var(--r-6);font-size:var(--fs-16);color:var(--dim);
  text-decoration:none;border:1px solid transparent;transition:var(--t-hover);
}
.snav:hover{color:var(--fg);background:var(--bg3)}
.snav.on{color:var(--fg);background:var(--bg3);border-color:var(--line)}
.siteright{display:flex;align-items:center;justify-content:flex-end;gap:12px;min-width:0}

/* ---------- плитки панелей (Owner Panel / Admin Panel) ---------- */
/* Не вкладка, а вход в отдельное приложение — Server Control. Поэтому плитка
   стоит справа рядом с пользователем, а не в общей полосе разделов, и носит
   индиговую марку панели, а не золото сайта: так видно, что за ней другой
   интерфейс. Плитку рисует nav.js только тем, чья роль до неё дотягивает. */
.ptiles{display:flex;align-items:center;gap:8px;flex:none}
.ptile{
  display:flex;align-items:center;gap:9px;flex:none;
  padding:7px 13px 7px 7px;border-radius:var(--r-8);
  border:1px solid var(--line);background:var(--bg3);
  color:var(--fg);text-decoration:none;white-space:nowrap;
  transition:var(--t-hover),box-shadow var(--dur);
}
.ptile:hover{background:var(--bg-hover);border-color:var(--line-strong)}
.ptile.on{border-color:#7c83ff;box-shadow:0 0 0 1px rgba(124,131,255,.3)}
.ptile-mark{
  width:26px;height:26px;flex:none;border-radius:var(--r-8);
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#7c83ff,#4f46e5);
}
.ptile-mark i{width:11px;height:11px;border-radius:3px;background:#fff;display:block}
.ptile-l{font-size:var(--fs-13)}
/* Полоса разделов слева и плитки справа делят одну строку. На средних
   экранах она первой упирается в логотип, поэтому «Panel» уходит, а
   «Owner»/«Admin» остаются — их и так ни с чем не спутать. */
@media (max-width:1599px){
  .ptile-x{display:none}
}

/* Блок пользователя в шапке внешки крупнее, чем в плеере: там та же разметка
   .auth-* живёт в полосе 52px, здесь — в 108px. Базовые размеры остаются в
   style.css, здесь только надбавка под высокую шапку. */
.sitebar .auth-user{gap:15px;font-size:var(--fs-23)}
.sitebar .auth-avatar{
  width:var(--avatar-hdr);height:var(--avatar-hdr);border-radius:var(--r-7);
}
.sitebar .auth-name{max-width:260px}
.sitebar .auth-logout{font-size:var(--fs-20)}

/* ---------- главная: герой ---------- */
.hero{
  position:relative;padding:78px 20px 92px;text-align:center;
  background:
    radial-gradient(120% 100% at 50% 0%, rgba(200,162,74,.10), transparent 62%),
    linear-gradient(180deg,#11171c 0%,var(--bg) 100%);
  border-bottom:1px solid var(--line);
}
.hero-in{max-width:660px;margin:0 auto}
.hero h1{margin:0 0 12px;font-size:38px;line-height:1.15;font-weight:700;letter-spacing:-.01em}
.hero-sub{margin:0 0 24px;color:var(--dim);font-size:14px;line-height:1.6}
.hero-btns{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.hbtn{
  padding:9px 20px;border-radius:6px;font-size:13px;text-decoration:none;
  border:1px solid var(--line);color:var(--fg);transition:background .12s,border-color .12s;
}
.hbtn.discord{background:#5865f2;border-color:#5865f2;color:#fff}
.hbtn.discord:hover{background:#6b76f4}
.hbtn.ghost{background:var(--bg2)}
.hbtn.ghost:hover{border-color:var(--acc)}

/* Полосу серверов приподнимаем на нижнюю кромку героя. У .hero есть
   position:relative, а позиционированные элементы рисуются поверх обычных
   блоков в потоке — без своего z-index карточки уезжали под герой и им
   срезало верх на 14px. */
.home-wrap{position:relative;z-index:1;margin-top:-38px}

/* ---------- главная: таблица серверов ---------- */
/* Строка = сервер: имя, слой, время раунда, стороны, онлайн, очередь,
   кнопка входа. Открыта всем — новичку без Steam-логина она нужнее всего. */
.srv-board{
  border:1px solid var(--line);border-radius:8px;overflow:hidden;
  background:var(--bg2);margin-bottom:14px;
}
.sb-row{
  display:grid;align-items:center;gap:12px;padding:11px 14px;
  /* Колонки фиксированные, кроме имени и слоя: иначе заголовок «Очередь»
     оказывается шире своей ячейки, растягивает шапку и та разъезжается
     со строками — у каждой строки свой grid, общего у них только трек. */
  grid-template-columns:minmax(0,1.7fr) minmax(0,1.25fr) 78px 62px 84px 66px 156px;
  border-top:1px solid var(--line);
}
.sb-row:first-child{border-top:0}
.sb-row:not(.sb-head):hover{background:#171e24}
.sb-head{
  font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:var(--dim);
  background:#111820;padding:8px 14px;
}
.sb-row.off{color:var(--dim)}

.sb-name{display:flex;align-items:center;gap:8px;font-size:13px;min-width:0}
.live-dot{width:7px;height:7px;border-radius:50%;background:var(--ok);flex:none}
.live-dot.off{background:var(--bad)}
.sb-name span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sb-layer{font-size:12.5px;color:var(--dim);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.sb-time{font-size:12.5px;color:var(--dim);font-variant-numeric:tabular-nums}

.sb-flags{display:flex;gap:6px}
.sb-flag{width:24px;height:16px;border-radius:2px;overflow:hidden;flex:none;
  border:1px solid rgba(255,255,255,.14);line-height:0}
.sb-flag svg{width:100%;height:100%;display:block}
.sb-flag.blank{background:#39434c}  /* не .empty: в style.css так называется заглушка панели, с padding */

.sb-cnt{font-size:12.5px;font-variant-numeric:tabular-nums;color:var(--dim)}
.sb-cnt.ok{color:var(--ok)} .sb-cnt.hot{color:#e0c47a} .sb-cnt.full{color:#e09a7a}
.sb-cnt.dead{color:#6b7681}
.sb-q{font-size:12.5px;color:var(--dim);font-variant-numeric:tabular-nums}
.sb-q.has{color:var(--acc)}

.sb-join{
  display:block;width:100%;text-align:center;
  white-space:nowrap;text-decoration:none;
  background:transparent;border:1px solid var(--line);color:var(--fg);
  border-radius:6px;padding:8px 10px;font-size:12px;letter-spacing:.03em;
  text-transform:uppercase;transition:background .12s,border-color .12s;
}
.sb-join:hover{background:#1f7a45;border-color:#2a9457;color:#fff}
.sb-row.off .sb-join{color:var(--dim)}

.sb-load{padding:16px 14px;color:var(--dim);font-size:12.5px}
.sb-warn{
  background:rgba(107,58,47,.12);border-top:1px solid #6b3a2f;
  padding:10px 14px;color:#e09a7a;font-size:12px;line-height:1.55;
}

/* ---------- главная: как подключиться ---------- */
.howto{
  background:var(--bg2);border:1px solid var(--line);border-radius:8px;
  padding:14px 18px;margin-bottom:14px;
}
.howto-h{color:var(--acc);font-size:13px;font-weight:600;margin-bottom:8px}
.howto ol{margin:0;padding-left:20px;color:var(--dim);font-size:12.5px;line-height:1.75}
.howto ol b{color:var(--fg);font-weight:600}
.howto-note{margin:9px 0 0;color:#6b7681;font-size:12px;line-height:1.6}
.howto-note b{color:var(--dim);font-weight:600}

/* баннер сид-режима */
.seed-banner{
  background:rgba(52,40,12,.5);border:1px solid #4a3c18;border-radius:8px;
  padding:16px 18px;text-align:center;margin-bottom:11px;
}
.seed-title{color:var(--acc);font-size:14px;font-weight:600;margin-bottom:5px}
.seed-note{color:var(--dim);font-size:12px;line-height:1.55}

/* плитки-переходы */
.home-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:11px;
  margin-top:20px}
.home-tile{
  display:flex;flex-direction:column;gap:4px;
  background:var(--bg2);border:1px solid var(--line);border-radius:8px;
  padding:15px 17px;text-decoration:none;color:var(--fg);
  transition:border-color .12s,background .12s;
}
.home-tile:hover{border-color:var(--acc);background:#171e24}
.home-tile b{font-size:14px}
.home-tile span{color:var(--acc);font-size:12px;font-variant-numeric:tabular-nums}
.home-tile em{color:var(--dim);font-size:11.5px;font-style:normal}

/* ---------- заголовок страницы ---------- */
.page-head{display:flex;align-items:baseline;gap:14px;margin-bottom:3px}
.page-head h1{margin:0;font-size:21px;font-weight:600;letter-spacing:.01em}
.page-head .n{color:var(--dim);font-size:12px}
.page-sub{color:var(--dim);font-size:12px;margin-bottom:20px;max-width:640px}

/* под-вкладки Ивенты / Скримы */
.subtabs{display:flex;gap:18px;margin-bottom:18px;border-bottom:1px solid var(--line)}
.subtab{
  padding:0 0 9px;font-size:15px;color:var(--dim);
  border-bottom:2px solid transparent;margin-bottom:-1px;
}
.subtab:hover{color:var(--fg)}
.subtab.on{color:var(--fg);border-bottom-color:var(--acc)}

.sec-title{
  font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--dim);
  margin:26px 0 10px;
}

/* ---------- карточки ивентов ---------- */
.ev-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:11px}
.ev-card{
  background:var(--bg2);border:1px solid var(--line);border-radius:7px;
  padding:13px 15px;cursor:pointer;transition:border-color .12s,background .12s;
  display:flex;flex-direction:column;gap:7px;
}
.ev-card:hover{border-color:var(--acc);background:#171e24}
.ev-card .ev-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ev-card h3{margin:0;font-size:15px;font-weight:600}
.ev-card .vs{color:var(--dim);font-size:12px}
.ev-card .vs b{color:var(--fg);font-weight:600}
.ev-meta{display:flex;gap:14px;flex-wrap:wrap;color:var(--dim);font-size:12px;
  font-variant-numeric:tabular-nums}

.badge{
  display:inline-block;font-size:10px;letter-spacing:.05em;text-transform:uppercase;
  padding:2px 7px;border-radius:3px;border:1px solid var(--line);color:var(--dim);
  white-space:nowrap;
}
.badge.recruiting{border-color:#2f5a6b;color:#6fc0e0}
.badge.live{border-color:#2f6b45;color:var(--ok)}
.badge.draft{border-color:#3f4750;color:#95a3ae}
.badge.finished{border-color:#3a3a3a;color:#8a8a8a}
.badge.warn{border-color:#6b5a2f;color:#e0c47a}
.badge.ok{border-color:#2f6b45;color:var(--ok)}

/* ---------- таблица кланов ---------- */
.clan-tbl{border:1px solid var(--line);border-radius:7px;overflow:hidden;background:var(--bg2)}
.clan-hdr,.clan-row{
  display:grid;grid-template-columns:86px 1fr 70px 130px 132px;
  gap:14px;align-items:center;padding:10px 15px;
}
.clan-hdr{
  background:var(--bg3);color:var(--dim);font-size:10px;
  letter-spacing:.08em;text-transform:uppercase;
}
.clan-row{border-top:1px solid var(--line)}
.clan-row:hover{background:#171e24}
.clan-tag{
  font-size:11px;font-weight:700;color:var(--acc);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.clan-name{display:flex;align-items:center;gap:7px;min-width:0}
.clan-name span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.clan-num{color:var(--dim);font-variant-numeric:tabular-nums;font-size:12px}
.clan-leader{color:var(--dim);font-size:12px;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.dsc{color:#7289da;text-decoration:none;font-size:12px;flex:none}
.dsc:hover{color:#96a6ea}
.vfy{color:var(--ok);font-size:11px;flex:none}
.btn-apply{
  border:1px solid #2f6b45;color:var(--ok);background:transparent;
  border-radius:5px;padding:5px 10px;font-size:11.5px;width:100%;
}
.btn-apply:hover{background:#16281e}
.btn-apply[disabled]{border-color:var(--line);color:var(--dim);cursor:default;background:none}

/* ---------- страница ивента ---------- */
.back-link{color:var(--dim);text-decoration:none;font-size:12px}
.back-link:hover{color:var(--fg)}

.stepper{display:flex;align-items:center;gap:0;margin:16px 0 20px;flex-wrap:wrap}
.step{display:flex;align-items:center;gap:7px;color:var(--dim);font-size:12px}
.step i{
  width:19px;height:19px;border-radius:50%;border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;font-size:10px;font-style:normal;
}
.step.done{color:var(--ok)}
.step.done i{border-color:#2f6b45;color:var(--ok)}
.step.now{color:var(--acc)}
.step.now i{border-color:var(--acc);color:var(--acc)}
.step-line{flex:1;min-width:22px;height:1px;background:var(--line);margin:0 10px}
.step-line.done{background:#2f6b45}

.ev-hero{
  background:var(--bg2);border:1px solid var(--line);border-radius:8px;
  padding:18px 20px;margin-bottom:14px;
}
.ev-hero .ev-top{display:flex;align-items:center;gap:11px;margin-bottom:16px;flex-wrap:wrap}
.ev-hero h1{margin:0;font-size:22px;font-weight:600}
.ev-date{
  background:var(--bg3);border:1px solid var(--line);border-radius:6px;
  padding:6px 11px;text-align:center;flex:none;
}
.ev-date b{display:block;font-size:19px;line-height:1.1}
.ev-date span{font-size:9px;color:var(--dim);letter-spacing:.05em;text-transform:uppercase}
.ev-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:14px}
.fact dt{font-size:10px;letter-spacing:.07em;text-transform:uppercase;color:var(--dim);
  margin-bottom:3px}
.fact dd{margin:0;font-size:13px}

.teams{display:grid;grid-template-columns:1fr auto 1fr;gap:16px;align-items:center;
  background:var(--bg2);border:1px solid var(--line);border-radius:8px;padding:16px 20px}
.team .lbl{font-size:10px;letter-spacing:.07em;text-transform:uppercase;color:var(--dim)}
.team .fac{font-size:14px;font-weight:600;margin-top:3px}
.team.t2{text-align:right}
.round{text-align:center;color:var(--dim);font-size:12px}
.round b{display:block;color:var(--fg);font-size:13px;margin-top:2px}

.notice{
  background:var(--bg2);border:1px solid var(--line);border-left:3px solid var(--acc);
  border-radius:6px;padding:11px 14px;color:var(--dim);font-size:12px;margin-top:14px;
}

/* ---------- автосидинг ---------- */
.seed-wrap{max-width:720px}
.seed-hero{text-align:center;margin:14px 0 26px}
.seed-hero h1{margin:0 0 8px;font-size:30px;font-weight:700;line-height:1.2}
.seed-hero .acc{color:var(--ok)}
.seed-hero p{margin:0;color:var(--dim);font-size:13px}

.info-card{
  background:var(--bg2);border:1px solid var(--line);border-radius:8px;
  padding:14px 17px;margin-bottom:11px;
}
.info-card.ok{border-color:#2f6b45;background:rgba(47,107,69,.10)}
.info-card.warn{border-color:#6b5a2f;background:rgba(107,90,47,.09)}
.info-card.beta{border-color:#6b3a2f;background:rgba(107,58,47,.09)}
.info-h{font-size:13px;font-weight:600;margin-bottom:7px}
.info-card.ok .info-h{color:var(--ok)}
.info-card.warn .info-h{color:var(--acc)}
.info-card.beta .info-h{color:#e09a7a}
.info-card p{margin:0;color:var(--dim);font-size:12.5px;line-height:1.65}
.info-card p b{color:var(--fg)}
.chk{margin:0;padding-left:0;list-style:none;display:grid;gap:6px}
.chk li{
  color:var(--dim);font-size:12.5px;line-height:1.5;padding-left:22px;position:relative;
}
.chk li::before{
  content:'☑';position:absolute;left:0;top:0;color:var(--ok);font-size:12px;
}

.perm-box{
  background:var(--bg2);border:1px solid var(--line);border-radius:8px;
  padding:8px;margin-bottom:11px;display:grid;gap:6px;
}
.perm{
  display:flex;align-items:center;justify-content:space-between;
  background:var(--bg3);border-radius:6px;padding:10px 14px;font-size:12.5px;
}
.perm i{font-style:normal;width:20px;height:20px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-size:11px;flex:none}
.perm i.ok{border:1px solid #2f6b45;color:var(--ok)}
.perm i.ask{border:1px solid #6b5a2f;color:var(--acc)}

.seed-panel{
  background:var(--bg2);border:1px solid var(--line);border-radius:8px;
  padding:22px 20px;text-align:center;margin-bottom:11px;
}
.seed-panel h2{margin:0 0 5px;font-size:19px;font-weight:600}
.seed-panel .dim{font-size:12.5px;margin:0 0 16px}
.seed-btn{
  background:#1f7a45;border:1px solid #2a9457;color:#fff;border-radius:7px;
  padding:11px 30px;font-size:14px;font-weight:600;
}
.seed-btn:hover{background:#249152}
.seed-btn.on{background:#7a2f2f;border-color:#94433a}
.seed-btn.on:hover{background:#8f3838}

.seed-state{
  margin-top:16px;background:var(--bg3);border:1px solid var(--line);border-radius:6px;
  padding:10px 14px;font-size:12.5px;display:flex;align-items:center;gap:9px;
  justify-content:center;flex-wrap:wrap;
}
.seed-state .dot{width:8px;height:8px;border-radius:50%;background:var(--ok);flex:none;
  animation:pulse 1.4s ease-in-out infinite}
.seed-state .dot.off{background:var(--dim);animation:none}

.seed-log{margin-top:11px;text-align:left;max-height:210px;overflow-y:auto;display:grid;gap:2px}
.lg{font-size:11.5px;color:var(--dim);display:flex;gap:9px;padding:3px 4px;
  border-bottom:1px solid #1a2127}
.lg span{font-variant-numeric:tabular-nums;color:#5d6a76;flex:none}
.lg.ok{color:var(--ok)}
.lg.warn{color:var(--acc)}
.lg.bad{color:var(--bad)}

/* ---------- личный кабинет ---------- */
.cab-hero{
  background:linear-gradient(180deg,#11171c,var(--bg));
  border-bottom:1px solid var(--line);padding:26px 20px 22px;
}
.cab-head{
  max-width:1060px;margin:0 auto 22px;display:flex;align-items:center;gap:16px;
}
.cab-av{width:62px;height:62px;border-radius:50%;background:var(--bg3);
  border:1px solid var(--line);flex:none;object-fit:cover}
.cab-head h1{margin:0 0 6px;font-size:24px;font-weight:700}
.cab-sub{display:flex;align-items:center;gap:9px;flex-wrap:wrap}

.cab-tiles{
  max-width:1060px;margin:0 auto;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(112px,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:8px;overflow:hidden;
}
.ct{background:var(--bg2);padding:13px 10px;text-align:center}
.ct-ic{font-size:15px;color:var(--dim);line-height:1;margin-bottom:7px}
.ct-v{font-size:17px;font-weight:700;font-variant-numeric:tabular-nums}
.ct-l{font-size:9.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--dim);
  margin-top:4px}
.nd{font-size:10.5px;color:var(--dim);font-weight:400;border-bottom:1px dotted var(--line)}

.act{
  display:flex;align-items:flex-end;gap:3px;height:120px;
  background:var(--bg2);border:1px solid var(--line);border-radius:7px;padding:12px 14px 6px;
  overflow-x:auto;
}
.act-col{flex:1;min-width:26px;display:flex;flex-direction:column;
  align-items:center;justify-content:flex-end;height:100%;gap:5px}
.act-col i{width:100%;max-width:26px;background:var(--acc);border-radius:2px;display:block;
  opacity:.85}
.act-col:hover i{opacity:1}
.act-col span{font-size:9px;color:var(--dim);white-space:nowrap}

.cab-cols{display:grid;grid-template-columns:1fr 300px;gap:20px;align-items:start}
.cab-side{display:grid;gap:11px;position:sticky;top:68px}
.cab-card{background:var(--bg2);border:1px solid var(--line);border-radius:8px;padding:14px 16px}
.cab-card-h{font-size:12px;font-weight:600;margin-bottom:8px}
.cab-card p{margin:0 0 9px;line-height:1.55}
.cab-card select{
  background:var(--bg3);border:1px solid var(--line);border-radius:5px;
  color:var(--fg);padding:6px 9px;font:inherit;font-size:12px;width:100%;
}
.cab-card select:focus{outline:1px solid var(--acc)}

.rec-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:9px}
.rec{
  background:var(--bg2);border:1px solid var(--line);border-radius:7px;padding:11px 13px;
  text-decoration:none;color:var(--fg);display:block;transition:border-color .12s,background .12s;
}
.rec:hover{border-color:var(--acc);background:#171e24}
.rec-map{font-size:13px;font-weight:600}
.rec-sub{color:var(--dim);font-size:10.5px;margin-top:1px}
.rec-meta{display:flex;justify-content:space-between;color:var(--dim);font-size:11px;
  margin-top:7px;font-variant-numeric:tabular-nums}
.rec-kd{color:var(--acc);font-size:12px;font-variant-numeric:tabular-nums;margin-top:3px}

.tk-cols{display:grid;grid-template-columns:1fr 1fr;gap:20px;
  background:var(--bg2);border:1px solid var(--line);border-radius:7px;padding:14px 16px}
.tk-h{font-size:10px;letter-spacing:.07em;text-transform:uppercase;color:var(--dim);
  margin-bottom:7px}
.tk-r{display:grid;grid-template-columns:18px 1fr auto;gap:8px;align-items:baseline;
  padding:4px 0;border-bottom:1px solid #1a2127;font-size:12px}
.tk-i{color:var(--dim);font-variant-numeric:tabular-nums}
.tk-n{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tk-c{color:var(--acc);font-variant-numeric:tabular-nums}

/* ---------- публичный профиль игрока ---------- */

/* Полосы «кит / техника / карта». Заливка — фон строки, а не отдельный
   элемент рядом с текстом: так длина полосы читается сразу, а ник и время
   не съезжают, когда полоса короткая. */
.pbars{display:grid;gap:5px}
.pbar{
  position:relative;display:flex;align-items:center;justify-content:space-between;
  gap:12px;padding:8px 11px;border:1px solid var(--line);border-radius:6px;
  background:var(--bg2);overflow:hidden;
}
.pbar i{
  position:absolute;left:0;top:0;bottom:0;z-index:0;
  background:rgba(200,162,74,.14);border-right:1px solid rgba(200,162,74,.4);
}
.pbar-n,.pbar-t{position:relative;z-index:1}
.pbar-n{font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pbar-t{font-size:11.5px;color:var(--dim);font-variant-numeric:tabular-nums;flex:none}

.pkv{
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  font-size:12px;padding:5px 0;border-bottom:1px solid #1a2127;
}
.pkv:last-child{border-bottom:0}
.pkv span{color:var(--dim)}
.pkv b{font-variant-numeric:tabular-nums;font-weight:600}

.steam-link{text-decoration:none;font-size:11px}
.steam-link:hover{color:var(--fg)}

/* ---------- список игроков ---------- */
.finput{
  width:100%;max-width:360px;margin-bottom:14px;
  background:var(--bg2);border:1px solid var(--line);border-radius:6px;
  padding:8px 11px;color:var(--fg);font:inherit;font-size:12.5px;
}
.finput:focus{outline:1px solid var(--acc)}

.plist{border:1px solid var(--line);border-radius:8px;overflow:hidden;background:var(--bg2)}
.plist-h,.plist-r{
  display:grid;grid-template-columns:1fr 90px 110px 110px 120px;
  gap:12px;align-items:center;padding:10px 14px;
}
.plist-h{
  font-size:10px;letter-spacing:.07em;text-transform:uppercase;color:var(--dim);
  background:var(--bg3);border-bottom:1px solid var(--line);
}
.plist-r{
  border-top:1px solid #1a2127;font-size:12.5px;color:var(--fg);text-decoration:none;
  transition:background .12s;
}
.plist-r:first-of-type{border-top:0}
.plist-r:hover{background:#171e24}

@media (max-width:860px){
  .cab-cols{grid-template-columns:1fr}
  .cab-side{position:static}
  .tk-cols{grid-template-columns:1fr}
}

/* ---------- панель: состав, роли, журнал ---------- */
.mono{font-family:ui-monospace,Consolas,monospace;font-size:11.5px}
.sm{font-size:11px}
.num{font-variant-numeric:tabular-nums;text-align:right}

.rb{
  display:inline-block;font-size:10px;letter-spacing:.04em;text-transform:uppercase;
  padding:2px 8px;border-radius:3px;border:1px solid var(--line);color:var(--dim);
}
.rb-owner{border-color:#7a3a2f;color:#f0907a;background:rgba(122,58,47,.16)}
.rb-admin{border-color:#6b3a2f;color:#e09a7a;background:rgba(107,58,47,.14)}
.rb-moderator{border-color:#2f5a6b;color:#6fc0e0;background:rgba(47,90,107,.14)}
.rb-vip{border-color:#6b5a2f;color:#e0c47a;background:rgba(107,90,47,.14)}
.rb-vip_gold{border-color:#8a6f1f;color:#f0d060;background:rgba(138,111,31,.18)}
.rb-vip_silver{border-color:#5a6570;color:#c8d4de;background:rgba(90,101,112,.18)}
.rb-vip_bronze{border-color:#7a5238;color:#d99e6e;background:rgba(122,82,56,.16)}
.rb-player{border-color:var(--line);color:var(--dim)}

/* --- кабинет: VIP и киты отряда ---------------------------------------- */
.vip-perks{margin:0 0 10px;padding-left:18px;font-size:12px;color:var(--fg)}
.vip-perks li{margin:2px 0}
.kits-overlay{position:fixed;inset:0;z-index:50;background:rgba(4,6,8,.72);
  display:flex;align-items:center;justify-content:center;padding:20px}
.kits-dlg{position:relative;width:min(680px,100%);max-height:90vh;overflow:auto;
  background:#17191c;border:1px solid var(--line);border-radius:10px;
  padding:22px 24px;box-shadow:0 18px 50px rgba(0,0,0,.5)}
.kits-dlg h2{margin:0 0 6px;font-size:20px}
.kits-x{position:absolute;top:10px;right:12px;background:none;border:0;
  color:var(--dim);font-size:22px;cursor:pointer;line-height:1}
.kits-x:hover{color:var(--fg)}
.kits-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));
  gap:10px;margin:14px 0 18px}
.kit{display:flex;flex-direction:column;align-items:center;gap:8px;
  padding:14px 6px 10px;background:#1d2024;border:1px solid var(--line);
  border-radius:8px;color:var(--fg);font-size:11px;cursor:pointer;
  transition:border-color .1s, opacity .1s}
.kit img{width:34px;height:34px;image-rendering:auto}
.kit:hover{border-color:#4a5158}
.kit.off{border-color:var(--acc);opacity:.45}
.kit.off span{text-decoration:line-through}
.kits-foot{display:flex;justify-content:flex-end;gap:10px}
.btn-ghost{padding:8px 16px;background:none;border:1px solid var(--line);
  border-radius:6px;color:var(--fg);cursor:pointer}
.btn-ghost:hover{border-color:#4a5158}

.staff-tbl,.log-tbl{
  border:1px solid var(--line);border-radius:7px;overflow:hidden;background:var(--bg2);
}
.staff-hdr,.staff-row{
  display:grid;grid-template-columns:150px 1fr 118px 148px 78px 130px;
  gap:14px;align-items:center;padding:9px 15px;
}
.log-hdr,.log-row{
  display:grid;grid-template-columns:150px 150px 1fr 150px;
  gap:14px;align-items:baseline;padding:8px 15px;
}
.staff-hdr,.log-hdr{
  background:var(--bg3);color:var(--dim);font-size:10px;
  letter-spacing:.08em;text-transform:uppercase;
}
.staff-row,.log-row{border-top:1px solid var(--line);font-size:12.5px}
.staff-row:hover,.log-row:hover{background:#171e24}
.staff-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}
.log-row code{color:var(--acc);font-size:11.5px}
.role-pick{
  background:var(--bg3);border:1px solid var(--line);border-radius:4px;
  color:var(--fg);padding:4px 7px;font:inherit;font-size:11.5px;width:100%;
}
.role-pick:focus{outline:1px solid var(--acc)}
.role-pick:disabled{opacity:.5}

/* ---------- агент записи ---------- */
.ag-top{
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  background:var(--bg2);border:1px solid var(--line);border-radius:8px;
  padding:15px 18px;margin-bottom:11px;
}
.ag-state{display:flex;align-items:center;gap:11px;flex:1;min-width:220px;font-size:14px}
.ag-dot{width:11px;height:11px;border-radius:50%;background:var(--dim);flex:none}
.ag-state.ok .ag-dot{background:var(--ok);animation:pulse 1.8s ease-in-out infinite}
.ag-state.warn .ag-dot{background:var(--acc)}
.ag-state.bad .ag-dot{background:var(--bad)}
.ag-state.ok b{color:var(--ok)}
.ag-state.warn b{color:var(--acc)}
.ag-state.bad b{color:var(--bad)}
.ag-btns{display:flex;gap:8px;flex-wrap:wrap}
.ag-btn{
  border:1px solid var(--line);background:var(--bg3);color:var(--fg);
  border-radius:6px;padding:8px 16px;font-size:12.5px;
}
.ag-btn:hover{border-color:var(--acc)}
.ag-btn:disabled{opacity:.5;cursor:default}

.ag-facts{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:14px;
  background:var(--bg2);border:1px solid var(--line);border-radius:8px;
  padding:14px 18px;
}
.ag-log{
  background:#0b0e11;border:1px solid var(--line);border-radius:7px;
  padding:8px 10px;max-height:340px;overflow-y:auto;
  font-family:ui-monospace,Consolas,monospace;
}
.ag-log .lg{
  display:flex;gap:10px;font-size:11.5px;color:#9fb0bd;padding:2px 0;
  border-bottom:1px solid #141a1f;white-space:pre-wrap;word-break:break-word;
}
.ag-log .lg span{color:#5d6a76;flex:none;font-variant-numeric:tabular-nums}
.ag-log .lg.err{color:#ff8f80}
.ag-log .lg.sys{color:var(--acc)}

/* Поиск игрока над составом: без него роль можно выдать только тому,
   у кого она уже выше игрока, — то есть повысить новичка нечем. */
.staff-find{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:6px}
.find-input{
  background:var(--bg2);border:1px solid var(--line);border-radius:6px;
  color:var(--fg);padding:8px 11px;font:inherit;font-size:12.5px;min-width:290px;
}
.find-input:focus{outline:none;border-color:var(--acc)}
.find-input::placeholder{color:var(--dim)}
.staff-sec{
  font-size:10px;letter-spacing:.07em;text-transform:uppercase;color:var(--dim);
  margin:16px 0 7px;
}

.role-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:11px}
.role-card{
  background:var(--bg2);border:1px solid var(--line);border-radius:7px;padding:14px 16px;
}
.role-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.role-top .dim{font-size:11px}
.role-sec{
  font-size:10px;letter-spacing:.07em;text-transform:uppercase;color:var(--dim);
  margin:10px 0 5px;
}
.role-list{margin:0;padding-left:16px;font-size:11.5px;line-height:1.7}
.role-list li{color:var(--fg)}
.role-list.perk li{color:var(--acc)}
/* slug права мелким шрифтом справа от русского названия */
.cap-slug{margin-left:6px;font-family:var(--mono,ui-monospace,monospace);font-size:10px;color:var(--dim);opacity:.7}

@media (max-width:900px){
  .staff-hdr,.staff-row{grid-template-columns:1fr 110px 120px}
  .staff-hdr div:nth-child(1),.staff-row div:nth-child(1),
  .staff-hdr div:nth-child(4),.staff-row div:nth-child(4),
  .staff-hdr div:nth-child(5),.staff-row div:nth-child(5){display:none}
  .log-hdr,.log-row{grid-template-columns:1fr 1fr}
  .log-hdr div:nth-child(1),.log-row div:nth-child(1),
  .log-hdr div:nth-child(4),.log-row div:nth-child(4){display:none}
}

/* ---------- панель: вкладка «Сервер» (SQSTAT-стиль) ---------- */
.lv-wrap{display:grid;grid-template-columns:1fr 296px;gap:16px;align-items:start}
.lv-side{display:grid;gap:11px;position:sticky;top:68px}

/* плитки серверов */
.lv-srvs{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:8px;overflow:hidden;
  margin-bottom:10px;
}
.lv-srv{
  display:flex;align-items:center;justify-content:center;gap:8px;
  background:var(--bg2);padding:11px 10px;font-size:12px;color:var(--fg);
  white-space:nowrap;transition:background .12s;
}
.lv-srv:hover{background:#171e24}
.lv-srv.on{background:#1a2330;box-shadow:inset 0 -2px 0 var(--acc)}
.lv-cnt{
  font-size:10.5px;font-variant-numeric:tabular-nums;color:var(--dim);
  border:1px solid var(--line);border-radius:9px;padding:1px 7px;
}
.lv-cnt.ok{border-color:#2f6b45;color:var(--ok)}
.lv-cnt.full{border-color:#6b3a2f;color:#e09a7a}

.lv-power{
  width:100%;border:1px solid var(--line);background:var(--bg2);color:var(--fg);
  border-radius:7px;padding:10px;font-size:13px;margin-bottom:14px;
  transition:background .12s,border-color .12s;
}
.lv-power:hover{border-color:var(--acc)}
.lv-power.on{background:#16281e;border-color:#2f6b45;color:var(--ok)}

/* команды и сквады */
.lv-teams{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:start}
.lv-team{display:grid;gap:9px}
.lv-team-h{
  display:flex;align-items:center;gap:8px;font-size:13px;
  background:var(--bg2);border:1px solid var(--line);border-radius:7px;padding:10px 13px;
}
.lv-team-h span{margin-left:auto;color:var(--dim);font-size:11.5px;
  font-variant-numeric:tabular-nums}
.lv-sq{border:1px solid var(--line);border-radius:7px;overflow:hidden;background:var(--bg2)}
.lv-sq-h{
  display:flex;align-items:center;gap:8px;padding:7px 11px;
  background:var(--bg3);border-bottom:1px solid var(--line);font-size:11.5px;
}
.lv-sq-h b{font-weight:600;letter-spacing:.03em}
.lv-lock{font-size:9px;opacity:.75}
.lv-sq-n{margin-left:auto;color:var(--dim);font-size:10.5px;font-variant-numeric:tabular-nums}

.lv-p{
  display:flex;align-items:center;gap:8px;padding:4px 11px;font-size:12px;
  border-top:1px solid #1a2127;cursor:pointer;
}
.lv-p:first-of-type{border-top:0}
.lv-p:hover{background:#171e24}
.lv-mks{display:flex;gap:3px;flex:none;min-width:14px}
.lv-mk{font-style:normal;font-size:10.5px;line-height:1;cursor:help}
.lv-nick{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lv-kit{
  flex:none;font-size:9.5px;font-weight:700;letter-spacing:.05em;
  border:1px solid;border-radius:3px;padding:1px 5px;
}
.lv-ping{flex:none;width:26px;text-align:right;color:var(--dim);font-size:10.5px;
  font-variant-numeric:tabular-nums}
.lv-ping.hi{color:#e09a7a}

/* Строка игрока, которого нет в мире (мёртв или в респауне): он на сервере,
   но в кадре его нет — гасим, чтобы не путать с живыми. */
.lv-p.dead .lv-nick{color:#75828e}
.lv-kit.dim{color:var(--dim)}

/* Раскрытая карточка игрока: то, что известно из записи. */
.lv-info{
  display:flex;flex-wrap:wrap;gap:4px 14px;padding:7px 11px;background:#12181e;
  border-top:1px solid #1a2127;font-size:11px;color:var(--fg);
}
.lv-info b{color:var(--dim);font-weight:400;margin-right:4px}

/* Пояснение, почему данных нет или откуда они. Не ошибка — примечание. */
.lv-note{
  border:1px solid var(--line);border-left:2px solid var(--acc);border-radius:6px;
  background:var(--bg2);padding:9px 12px;margin-bottom:12px;
  font-size:11.5px;line-height:1.5;color:var(--dim);
}

.lv-acts{display:flex;gap:6px;padding:6px 11px;background:#12181e;
  border-top:1px solid #1a2127}
.lv-act{
  border:1px solid var(--line);background:var(--bg3);color:var(--fg);
  border-radius:4px;padding:3px 9px;font-size:10.5px;
}
.lv-act:hover{border-color:var(--acc)}

/* правая колонка */
.lv-sec{
  font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--dim);
  padding:2px 2px 0;
}
.lv-card{background:var(--bg2);border:1px solid var(--line);border-radius:8px;
  padding:12px 14px}
.lv-card-h{font-size:12px;font-weight:600;margin-bottom:9px}
.lv-big{font-size:26px;font-weight:700;font-variant-numeric:tabular-nums;line-height:1}
.lv-big span{font-size:12px;color:var(--dim);font-weight:400}
.lv-spark{display:flex;align-items:flex-end;gap:2px;height:44px;margin-top:10px}
.lv-spark i{flex:1;background:var(--acc);opacity:.55;border-radius:1px;min-height:3px}
.lv-spark i:last-child{opacity:1}

.lv-chat{
  max-height:220px;overflow-y:auto;display:grid;gap:3px;margin-bottom:8px;
  font-size:11.5px;line-height:1.45;
}
.lv-m{color:var(--fg);word-break:break-word}
.lv-m span{color:#5d6a76;font-variant-numeric:tabular-nums;margin-right:6px;font-size:10.5px}
.lv-m b{font-weight:600}
.lv-m b.sys{color:var(--dim)}
.lv-m b.adm{color:#e09a7a}
.lv-m b.bc{color:var(--acc)}
.lv-bc{display:flex;gap:6px}
.lv-bc input{
  flex:1;min-width:0;background:var(--bg3);border:1px solid var(--line);border-radius:5px;
  color:var(--fg);padding:6px 9px;font:inherit;font-size:11.5px;
}
.lv-bc input:focus{outline:none;border-color:var(--acc)}
.lv-bc input::placeholder{color:var(--dim)}
.lv-bc button{
  border:1px solid var(--line);background:var(--bg3);color:var(--acc);
  border-radius:5px;padding:0 11px;font-size:12px;
}
.lv-bc button:hover{border-color:var(--acc)}

.lv-map{display:flex;align-items:center;gap:9px;padding:6px 0;
  border-top:1px solid #1a2127;font-size:11.5px}
.lv-map:first-of-type{border-top:0}
.lv-map i{width:8px;height:8px;border-radius:50%;background:var(--dim);flex:none}
.lv-map.now i{background:var(--ok);animation:pulse 1.8s ease-in-out infinite}
.lv-map div b{display:block;font-weight:600}
.lv-map div span{color:var(--dim);font-size:10px;font-variant-numeric:tabular-nums}
.lv-map .lv-vs{margin-left:auto;flex:none;color:var(--dim);font-size:11px}

.lv-legend{display:grid;gap:5px}
.lv-leg{display:flex;align-items:center;gap:8px;font-size:11px;color:var(--dim)}
.lv-leg .lv-mk{width:16px;text-align:center;flex:none;font-size:11px}

@media (max-width:980px){
  .lv-wrap{grid-template-columns:1fr}
  .lv-side{position:static}
}
@media (max-width:700px){
  .lv-teams{grid-template-columns:1fr}
}

/* ---------- модалка «Топ недели» ---------- */
.tw-back{
  position:fixed;inset:0;z-index:60;background:rgba(6,9,11,.72);
  display:flex;align-items:flex-start;justify-content:center;padding:60px 20px;
  overflow:auto;
}
.tw-back.hidden{display:none}
.tw-modal{
  background:var(--bg2);border:1px solid var(--line);border-radius:9px;
  width:100%;max-width:900px;
}
.tw-head{display:flex;align-items:center;padding:14px 18px;border-bottom:1px solid var(--line)}
.tw-head h2{margin:0;font-size:17px;font-weight:600}
.tw-close{margin-left:auto;color:var(--dim);font-size:15px;padding:2px 6px;border-radius:4px}
.tw-close:hover{color:var(--fg);background:var(--bg3)}
.tw-body{padding:16px 18px}
.tw-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:22px}
.tw-cols h3{margin:0 0 9px;font-size:12px;letter-spacing:.07em;text-transform:uppercase;
  color:var(--dim)}
.tw-row{
  display:grid;grid-template-columns:20px 1fr auto;gap:8px;align-items:baseline;
  padding:5px 0;border-bottom:1px solid #1a2127;font-size:12px;
}
.tw-row.top1 .tw-name,.tw-row.top2 .tw-name,.tw-row.top3 .tw-name{font-weight:600}
.tw-row.top1 .tw-pos{color:#e3c56a}
.tw-row.top2 .tw-pos{color:#c3ccd4}
.tw-row.top3 .tw-pos{color:#c08a5a}
.tw-pos{color:var(--dim);font-variant-numeric:tabular-nums}
.tw-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tw-pts{color:var(--acc);font-variant-numeric:tabular-nums;font-size:11px}
.tw-wr{color:var(--dim);font-size:11px}
.tw-time{color:var(--dim);font-variant-numeric:tabular-nums;font-size:11px}
.tw-cols section:has(.tw-pts) .tw-row{grid-template-columns:20px 1fr auto auto auto}
.tw-empty{color:var(--dim);padding:14px 0;font-size:12px}

/* ---------- общее ---------- */
.empty-box{
  border:1px dashed var(--line);border-radius:7px;padding:30px;
  text-align:center;color:var(--dim);
}
.err{color:var(--bad)}

@media (max-width:760px){
  .clan-hdr,.clan-row{grid-template-columns:70px 1fr 108px;gap:10px}
  .clan-hdr .h-num,.clan-hdr .h-leader,.clan-row .clan-num,.clan-row .clan-leader{display:none}
  .teams{grid-template-columns:1fr;text-align:left}
  .team.t2{text-align:left}

  /* Шапка не влезает в 375px: логотип + 6 вкладок + кнопка Steam давали
     документу ширину ~720px и горизонтальный скролл всей странице.
     Сетка из трёх колонок сворачивается в две строки: логотип и
     пользователь сверху, вкладки — во всю ширину под ними. */
  .sitebar{
    height:auto;gap:10px;padding:9px 12px;
    grid-template-columns:1fr auto;
    grid-template-areas:"brand user" "nav nav";
  }
  .sitebar .brand{grid-area:brand;justify-content:flex-start}
  .siteright{grid-area:user}
  /* Затухание справа рассчитано на обрезанную полосу рядом с логотипом —
     здесь полоса своя, во всю ширину, и обрезать её нечем. */
  .sitenav{grid-area:nav;-webkit-mask-image:none;mask-image:none}
  /* 72px логотипа и 23px имени — размеры десктопной шапки в 108px. */
  .sitebar{--logo-h:44px}
  .sitebar .auth-user{gap:8px;font-size:var(--fs-13)}
  .sitebar .auth-avatar{width:28px;height:28px;border-radius:var(--r-4)}
  .sitebar .auth-name{max-width:130px}
  .sitebar .auth-logout{font-size:var(--fs-11)}
  .snav{padding:6px 11px;font-size:var(--fs-125)}
  /* В 375px плитка ужимается до марки и короткого слова. Ник и бейдж роли
     при этом уходят: в строку не помещаются и плитка, и имя, а имя здесь
     наименее полезно — кто вошёл, видно по аватару. */
  .ptile{padding:5px 9px 5px 5px;gap:7px}
  .ptile-mark{width:22px;height:22px;border-radius:var(--r-6)}
  .ptile-mark i{width:9px;height:9px}
  .ptile-l{font-size:var(--fs-115)}
  .siteright:has(.ptile) .auth-name,
  .siteright:has(.ptile) .auth-bzp,
  .siteright:has(.ptile) .auth-user .rb{display:none}

  /* Герой был рассчитан на десктоп: на телефоне 78/92px отступов и 38px
     заголовка съедали весь первый экран. */
  .hero{padding:46px 16px 62px}
  .hero h1{font-size:26px}
  .hero-sub{font-size:13px;margin-bottom:20px}
  .site-wrap{padding:20px 14px 56px}

  /* Пять колонок в 375px не живут — оставляем ник, матчи и наиграно. */
  .plist-h,.plist-r{grid-template-columns:1fr 60px 84px;gap:8px;padding:9px 11px}
  .plist-h div:nth-child(4),.plist-r div:nth-child(4),
  .plist-h div:nth-child(5),.plist-r div:nth-child(5){display:none}
}

/* На телефоне семь колонок таблицы серверов не живут: строка разворачивается
   в карточку — имя, слой, метрики в ряд, кнопка во всю ширину. */
@media (max-width:760px){
  .sb-head{display:none}
  .sb-row{
    grid-template-columns:auto auto auto 1fr;
    grid-template-areas:
      "name name name name"
      "layer layer layer layer"
      "flags time cnt q"
      "act act act act";
    gap:8px 12px;padding:13px 14px;
  }
  .sb-name{grid-area:name}
  .sb-layer{grid-area:layer}
  .sb-time{grid-area:time}
  .sb-flags{grid-area:flags}
  .sb-count{grid-area:cnt}
  .sb-queue{grid-area:q;justify-self:end}
  .sb-act{grid-area:act;margin-top:2px}
  .sb-join{display:block;text-align:center;padding:10px 0}
}