@import url('https://fonts.googleapis.com/css2?family=Amatic+SC:wght@700&family=Bad+Script&family=Caveat:wght@600&family=Comfortaa:wght@600&family=Cormorant+Garamond:wght@600&family=Exo+2:wght@600&family=Jura:wght@600&family=Lobster&family=Marck+Script&family=Neucha&family=Oswald:wght@500&family=Philosopher:wght@700&family=Play:wght@700&family=Press+Start+2P&family=Rubik+Mono+One&family=Russo+One&family=Tektur:wght@600&family=Ubuntu+Mono:wght@700&family=Unbounded:wght@600&family=Yeseva+One&display=swap');
/* Внешка: шапка с вкладками, списки ивентов/кланов, модалка топа.
   Плеер (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}
/* Правило проекта (владелец, 13.09.2026): на страницах внешки никаких видимых
   ползунков прокрутки — ни вертикального, ни горизонтального. Прокрутка
   остаётся (колесо, клавиши, тач), сам ползунок спрятан; по горизонтали
   страница не прокручивается вовсе — то, что не влезло, обязано
   переноситься или ужиматься, а не двигать страницу. Единственный ползунок
   разрешён внутри своих блоков (лента на главной), не у документа. */
html:has(body.site){scrollbar-width:none;-ms-overflow-style:none;overflow-x:hidden}
html:has(body.site)::-webkit-scrollbar{display:none;width:0;height:0}
body.site{overflow-x:hidden}
body.site::-webkit-scrollbar{display:none;width:0;height:0}
.site-wrap{max-width:1060px;margin:0 auto;padding:24px 20px 70px}

/* Тлеющий край экрана — фирменный красный винтаж по контуру вьюпорта на
   каждой странице внешки. position:fixed относительно вьюпорта (а не body,
   у которого высота — вся страница), pointer-events:none — клики проходят
   насквозь, box-shadow только внутрь, середина экрана остаётся прозрачной,
   поэтому поверх контента можно не думать про z-index конфликтов. */
body.site::before{
  content:'';position:fixed;inset:0;pointer-events:none;z-index:1;
  box-shadow:inset 0 0 90px rgba(229,0,0,.14);
  animation:siteEdgeGlow 7s ease-in-out infinite;
}
@keyframes siteEdgeGlow{
  0%,100%{box-shadow:inset 0 0 70px rgba(229,0,0,.10)}
  50%{box-shadow:inset 0 0 140px rgba(229,0,0,.22)}
}
@media (prefers-reduced-motion:reduce){body.site::before{animation:none}}

/* ---------- шапка с логотипом и вкладками ---------- */
/* Три колонки: вкладки — логотип — пользователь. Логотип стоит ровно по
   центру строки, поэтому боковые колонки равны (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}
/* Логотип-монетка: раз в несколько секунд переворачивается вокруг
   вертикальной оси (11.09.2026). perspective на ссылке даёт объём, сам
   переворот — 1.2 с из 7-секундного цикла, остальное время лого стоит.
   При наведении — переворот сразу. Без оговорки на prefers-reduced-motion
   нарочно: на телефонах «уменьшить анимацию» включено у многих, и у них
   лого просто стояло — владелец хочет переворот у всех (11.09.2026). */
.sitebar .brand{perspective:900px}
.sitebar .brand img{
  transform-style:preserve-3d;backface-visibility:visible;
  animation:logoFlip 7s cubic-bezier(.45,.05,.2,1) infinite;
}
.sitebar .brand:hover img{animation:logoFlipOnce 1s cubic-bezier(.45,.05,.2,1) 1}
@keyframes logoFlip{
  0%,82%{transform:rotateY(0deg)}
  100%{transform:rotateY(360deg)}
}
@keyframes logoFlipOnce{
  from{transform:rotateY(0deg)}
  to{transform:rotateY(360deg)}
}
/* Вкладок со временем становится больше, а ширина окна не растёт: полоса
   должна скроллиться сама, а не растягивать документ и не вешать на страницу
   горизонтальный скролл. Скроллбар прячем — полоса и так узкая. Обрезаем не
   встык к логотипу, а затуханием: иначе последняя вкладка выглядит как
   наехавшая на лого, а не как обрезанная. */
.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);
}
/* Метка BETA у вкладки (Калькулятор): жёлтая, мелкая, не тянет высоту вкладки. */
.snav-beta{
  display:inline-block;margin-left:6px;padding:1px 5px;border-radius:4px;vertical-align:1px;
  font-size:9px;font-weight:800;letter-spacing:.08em;line-height:1.3;
  color:#1a1400;background:#ffd23c;border:1px solid #e0b400;
}
.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. Раньше стояла
   плиткой прямо в шапке и тянула за собой отдельный лэйаут шапки на каждом
   брейкпоинте, потом переехала в fixed-угол экрана — но там перекрывала
   собой лого и вкладки. Теперь nav.js кладёт её внутрь самой шапки
   (.sitebar), а тут она просто прибита к нижнему краю: раз шапка залипающая
   (position:sticky, сама себе positioning context), «top:100%» держит
   иконку строго под ней на любой ширине экрана и высоте шапки, ничего
   не перекрывая. Рисует её nav.js только тем, чья роль до неё дотягивает. */
.panel-fab{position:absolute;top:100%;right:20px;margin-top:12px;z-index:15}
.panel-fab.hidden{display:none}
.panel-fab-btn{
  width:44px;height:44px;flex:none;border-radius:50%;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#ff3333,#e50000);
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 6px 18px rgba(229,0,0,.35);
  transition:var(--t-hover),box-shadow var(--dur);
}
.panel-fab-btn:hover,.panel-fab.open .panel-fab-btn{
  box-shadow:0 6px 22px rgba(229,0,0,.55),0 0 0 3px rgba(229,0,0,.22);
}
/* Мостик между иконкой и списком, чтобы курсор не «терял» его по пути. */
.panel-fab::after{content:'';position:absolute;left:0;right:0;top:100%;height:14px}
.panel-fab-pop{
  position:absolute;top:calc(100% + 10px);right:0;width:200px;z-index:30;
  display:flex;flex-direction:column;gap:8px;
  opacity:0;visibility:hidden;transform:translateY(-6px) scale(.98);
  transition:opacity .16s,transform .16s,visibility .16s;
}
.panel-fab:hover .panel-fab-pop,.panel-fab:focus-within .panel-fab-pop,.panel-fab.open .panel-fab-pop{
  opacity:1;visibility:visible;transform: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:#e50000;box-shadow:0 0 0 1px rgba(229,0,0,.35)}
.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,#ff3333,#e50000);
}
.ptile-mark i{width:11px;height:11px;border-radius:3px;background:#fff;display:block}
.ptile-l{font-size:var(--fs-13)}

/* Блок пользователя в шапке внешки крупнее, чем в плеере: там та же разметка
   .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(229,0,0,.16), transparent 62%),
    linear-gradient(180deg,#161616 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:#1a1a1a}
.sb-head{
  font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:var(--dim);
  background:#141414;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:#333333}  /* не .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:#737373}
.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:#737373;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:#1a1a1a}
.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:#1a1a1a}
.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:#404040;color:#999999}
.badge.finished{border-color:#333333;color:#999999}
.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:#1a1a1a}
.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);position:relative;animation:step-now-pulse 2.2s ease-out infinite}
.step.now i::after{content:"";position:absolute;inset:-1px;border-radius:50%;border:1px solid var(--acc);
  animation:step-now-ring 2.2s ease-out infinite}
@keyframes step-now-pulse{0%,100%{box-shadow:0 0 0 0 rgba(229,0,0,.45)}50%{box-shadow:0 0 0 4px rgba(229,0,0,0)}}
@keyframes step-now-ring{0%{transform:scale(1);opacity:.8}100%{transform:scale(2.1);opacity:0}}
.step-line{flex:1;min-width:22px;height:1px;background:var(--line);margin:0 10px;position:relative;overflow:hidden}
.step-line.done{background:#2f6b45}
/* Линия, ведущая к текущему этапу (последняя из пройденных), с бегущим бликом. */
.step-line.done:has(+ .step.now)::after{content:"";position:absolute;top:0;bottom:0;width:40%;
  background:linear-gradient(90deg,transparent,var(--acc),transparent);animation:step-line-run 1.8s linear infinite}
@keyframes step-line-run{from{left:-40%}to{left:100%}}
@media (prefers-reduced-motion:reduce){.step.now i,.step.now i::after,.step-line.done::after{animation:none}}

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

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

/* ================== Раскачка серверов (web/seed.html) ==================
   Полный редизайн 08.09.2026 вместо прежней «страницы-кнопки». Смысл экрана
   теперь не «нажми и жди», а «видно, как сидится»: пульт с обратным отсчётом
   до следующей проверки, цель с полосой до порога и живая сетка серверов.
   Анимации служебные и приглушённые: пульс «в эфире», бегущие полосы на
   заполняемой шкале, мягкое проявление карточек. Ничего не мигает и не
   прыгает — страницу держат открытой часами.                             */

.sd-wrap{display:grid;gap:14px;padding-bottom:40px}

.sd-hero{text-align:center;padding:26px 0 6px}
.sd-hero h1{margin:8px 0 6px;font-size:30px;font-weight:700;letter-spacing:-.02em}
.sd-hero h1 .acc{color:var(--acc)}
.sd-hero p{margin:0 auto;max-width:560px;color:var(--dim);font-size:13px;line-height:1.6}
.sd-eyebrow{
  display:inline-flex;align-items:center;gap:7px;font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--dim);border:1px solid var(--line);
  border-radius:999px;padding:5px 12px;background:var(--bg2);
}
.sd-eyebrow i{width:6px;height:6px;border-radius:50%;background:var(--acc);
  animation:sdPulse 1.6s ease-in-out infinite}

/* ---- пульт ---- */
.sd-deck{
  display:grid;grid-template-columns:auto 1fr auto;gap:22px;align-items:center;
  background:var(--bg2);border:1px solid var(--line);border-radius:12px;
  padding:20px 22px;position:relative;overflow:hidden;transition:border-color .3s ease;
}
.sd-deck.live{border-color:var(--ok-line)}
/* Блик по карточке, пока раскачка идёт: единственный «декоративный» эффект
   на странице, и он же признак, что вкладка жива. */
.sd-deck.live::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(100deg,transparent 30%,rgba(95,208,138,.07) 50%,transparent 70%);
  background-size:220% 100%;animation:sdSweep 4.5s linear infinite;
}

.sd-ring{position:relative;width:118px;height:118px;flex:none}
.sd-ring svg{width:118px;height:118px;transform:rotate(-90deg)}
.sd-ring circle{fill:none;stroke-width:7;stroke-linecap:round}
.sd-ring-bg{stroke:var(--bg3)}
.sd-ring-fg{stroke:var(--ok);transition:stroke-dashoffset .9s linear}
.sd-ring-c{
  position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:2px;
}
.sd-ring-c b{font-size:24px;font-variant-numeric:tabular-nums}
.sd-ring-c span{font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}

.sd-target{min-width:0}
.sd-t-eyebrow{font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ok)}
.sd-target h2{margin:4px 0 2px;font-size:19px;font-weight:600}
.sd-t-layer{margin:0 0 10px;color:var(--dimmer);font-size:11.5px}
.sd-t-num{margin:8px 0 0;color:var(--dim);font-size:12px}
.sd-t-num b{color:var(--fg)}
.sd-t-empty b{display:block;font-size:16px;margin-bottom:4px}
.sd-t-empty span{color:var(--dim);font-size:12px;line-height:1.6}

.sd-acts{display:flex;flex-direction:column;align-items:stretch;gap:8px;min-width:190px}
.sd-go{
  background:#1f7a45;border:1px solid #2a9457;color:#fff;border-radius:8px;
  padding:12px 24px;font-size:14px;font-weight:600;text-align:center;text-decoration:none;
  transition:background .18s ease,box-shadow .18s ease;
}
.sd-go:hover{background:#249152;box-shadow:0 0 0 3px rgba(95,208,138,.12)}
.sd-go.on{background:#7a2f2f;border-color:#94433a}
.sd-go.on:hover{background:#8f3838;box-shadow:0 0 0 3px rgba(255,107,91,.12)}
.sd-again{
  border:1px solid var(--line);border-radius:8px;padding:9px 20px;text-align:center;
  font-size:12px;color:var(--fg);text-decoration:none;
}
.sd-again:hover{border-color:var(--ok-line);color:var(--ok)}
.sd-note{font-size:10.5px;color:var(--dimmer);text-align:center;line-height:1.5}

/* ---- шкала раскачки ---- */
.sd-bar{height:8px;border-radius:999px;background:var(--bg3);overflow:hidden}
.sd-bar i{
  display:block;height:100%;border-radius:999px;background:var(--ok);
  background-image:linear-gradient(115deg,rgba(255,255,255,.16) 25%,transparent 25%,
    transparent 50%,rgba(255,255,255,.16) 50%,rgba(255,255,255,.16) 75%,transparent 75%);
  background-size:16px 16px;animation:sdStripes 1.1s linear infinite;
  transition:width .8s cubic-bezier(.22,.61,.36,1);
}
.sd-bar.done i{background-color:var(--acc);animation:none}

/* ---- плитки итогов ---- */
.sd-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.sd-tile{
  background:var(--bg2);border:1px solid var(--line);border-radius:10px;
  padding:14px 16px;display:flex;flex-direction:column;gap:2px;
}
.sd-tile b{font-size:24px;font-variant-numeric:tabular-nums}
.sd-tile span{font-size:11px;color:var(--dim)}

/* ---- блоки ---- */
.sd-block{background:var(--bg2);border:1px solid var(--line);border-radius:12px;padding:16px 18px}
.sd-h{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:12px}
.sd-h h2{margin:0;font-size:15px;font-weight:600}
.sd-h-note{font-size:11px;color:var(--dimmer)}
.sd-h-note b{color:var(--dim)}
.sd-empty{color:var(--dim);font-size:12px;margin:0}

/* ---- сетка серверов ---- */
.sd-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.sd-srv{
  background:var(--bg3);border:1px solid var(--line);border-radius:10px;padding:13px 14px;
  display:grid;gap:8px;animation:sdRise .35s ease both;
  background-size:cover;background-position:center;
}
.sd-srv-h{display:flex;align-items:center;justify-content:space-between;gap:8px}
.sd-srv-h b{font-size:13px}
.sd-srv-lbl{font-size:9.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--dimmer)}
.sd-srv-layer{margin:0;font-size:11px;color:var(--dimmer)}
.sd-srv-f{display:flex;align-items:center;justify-content:space-between;font-size:12px;color:var(--dim)}
.sd-srv-f b{color:var(--fg);font-variant-numeric:tabular-nums}
.sd-srv-go{
  font-size:11px;color:var(--fg);border:1px solid var(--line);border-radius:6px;
  padding:3px 10px;text-decoration:none;
}
.sd-srv-go:hover{border-color:var(--ok-line);color:var(--ok)}
.sd-srv.target{border-color:var(--ok-line);box-shadow:0 0 0 1px rgba(95,208,138,.1) inset}
.sd-srv.target .sd-srv-lbl{color:var(--ok)}
.sd-srv.done .sd-srv-lbl{color:var(--acc)}
.sd-srv.off{opacity:.55}
.sd-srv.off .sd-bar i{background:var(--dimmest);animation:none}

/* ---- шаги ---- */
/* «Вы уже сидите» на /seed: зелёное дыхание плашки, бегущая точка у
   подписи, плитка своего сервера с пульсирующей рамкой. */
.sd-you{color:#5fd08a!important}
.sd-you-note{display:flex;align-items:center;gap:8px;margin:10px 0 0;font-size:12.5px;color:#9fe3b8}
.sd-you-note i{width:8px;height:8px;border-radius:50%;background:#5fd08a;flex:none;animation:sdYouDot 1.6s ease-in-out infinite}
@keyframes sdYouDot{0%,100%{box-shadow:0 0 0 0 rgba(95,208,138,.6);transform:scale(1)}50%{box-shadow:0 0 0 7px rgba(95,208,138,0);transform:scale(1.25)}}
.sd-onsrv .sd-deck{animation:sdYouDeck 3.2s ease-in-out infinite}
@keyframes sdYouDeck{0%,100%{box-shadow:0 0 0 1px rgba(95,208,138,.15),0 0 0 rgba(95,208,138,0)}50%{box-shadow:0 0 0 1px rgba(95,208,138,.5),0 0 28px rgba(95,208,138,.28)}}
.sd-onsrv .sd-ring-fg{stroke:#5fd08a}
.sd-srv.you{border-color:rgba(95,208,138,.7);animation:sdYouTile 2.4s ease-in-out infinite}
.sd-srv.you .sd-srv-lbl{color:#5fd08a}
@keyframes sdYouTile{0%,100%{box-shadow:0 0 0 0 rgba(95,208,138,0)}50%{box-shadow:0 0 0 3px rgba(95,208,138,.25),0 0 18px rgba(95,208,138,.35)}}
.sd-go.you,.sd-go.you:hover{
  position:relative;overflow:hidden;cursor:default;color:#fff;opacity:1;
  background:linear-gradient(135deg,#141414,#0a0a0a);border:1px solid rgba(255,60,60,.85);
  animation:hlCtaEdge 1.8s ease-in-out infinite;
}
.sd-go.you::after{
  content:'';position:absolute;top:0;bottom:0;left:0;width:45%;pointer-events:none;
  background:linear-gradient(105deg,transparent 0%,rgba(255,255,255,.45) 50%,transparent 100%);
  transform:translateX(-140%) skewX(-12deg);animation:sdYouSheen 3.6s ease-in-out infinite;
}
@keyframes sdYouSheen{0%,60%{transform:translateX(-140%) skewX(-12deg)}100%{transform:translateX(320%) skewX(-12deg)}}
.sd-steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px}
.sd-step{display:flex;gap:11px;align-items:flex-start;font-size:12px;color:var(--dim);line-height:1.55}
.sd-step b{
  flex:none;width:24px;height:24px;border-radius:50%;background:var(--bg3);
  border:1px solid var(--line);display:flex;align-items:center;justify-content:center;
  font-size:11px;color:var(--fg);
  /* Шаги пульсируют по очереди 1 → 2 → 3 по кругу: один цикл 4.5 с, у каждого
     кружка своя треть, остальное время он спокоен. Текст шага подсвечивается
     в такт (см. .sd-step span). */
  animation:sdStepPulse 4.5s ease-in-out infinite;
}
.sd-step:nth-child(2) b,.sd-step:nth-child(2) span{animation-delay:1.5s}
.sd-step:nth-child(3) b,.sd-step:nth-child(3) span{animation-delay:3s}
.sd-step span{animation:sdStepText 4.5s ease-in-out infinite}
@keyframes sdStepPulse{
  0%,33%,100%{transform:scale(1);border-color:var(--line);background:var(--bg3);box-shadow:0 0 0 0 rgba(229,0,0,0)}
  8%{transform:scale(1.18);border-color:rgba(255,80,80,.9);background:rgba(229,0,0,.28);box-shadow:0 0 0 6px rgba(229,0,0,.25),0 0 16px rgba(229,0,0,.6)}
  20%{transform:scale(1.06);border-color:rgba(255,80,80,.7);background:rgba(229,0,0,.18);box-shadow:0 0 0 2px rgba(229,0,0,.12),0 0 10px rgba(229,0,0,.35)}
}
@keyframes sdStepText{
  0%,33%,100%{color:var(--dim)}
  8%,20%{color:var(--fg)}
}

/* ---- журнал ---- */
.sd-log{max-height:230px;overflow-y:auto;display:grid;gap:2px}
.sd-lg{font-size:11.5px;color:var(--dim);display:flex;gap:9px;padding:4px;
  border-bottom:1px solid var(--line-soft);animation:sdRise .25s ease both}
.sd-lg span{font-variant-numeric:tabular-nums;color:var(--dimmest);flex:none}
.sd-lg.ok{color:var(--ok)}
.sd-lg.warn{color:var(--warn)}
.sd-lg.bad{color:var(--bad)}

@keyframes sdPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.82)}}
@keyframes sdStripes{to{background-position:16px 0}}
@keyframes sdSweep{to{background-position:-220% 0}}
@keyframes sdRise{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}

/* Уважение к системной настройке: анимации здесь — украшение, без них
   страница работает ровно так же. */
@media (prefers-reduced-motion: reduce){
  .sd-eyebrow i,.sd-bar i,.sd-deck.live::after,.sd-srv,.sd-lg{animation:none}
  .sd-bar i,.sd-ring-fg{transition:none}
}

@media (max-width:820px){
  .sd-deck{grid-template-columns:1fr;justify-items:center;text-align:center}
  .sd-acts{width:100%;max-width:320px}
  .sd-tiles{grid-template-columns:1fr}
}

/* ---------- личный кабинет ---------- */
.cab-hero{
  background:linear-gradient(180deg,#161616,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:#1a1a1a}
.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 #1f1f1f;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(229,0,0,.12);border-right:1px solid rgba(229,0,0,.45);
}
.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 #1f1f1f;
}
.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 #1f1f1f;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:#1a1a1a}

@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)}

/* Клеймо VIP — везде, где висит .rb-vip_*: состав сервера, кабинет, панель,
   главная (через тот же класс из RoleBadge.jsx/site.css). Три разные
   анимации, чтобы тир был виден даже без чтения подписи. */
.rb-vip_gold{border-color:#8a6f1f;color:#f0d060;background:rgba(138,111,31,.18);
  position:relative;overflow:hidden;animation:rbGoldPulse 2.6s ease-in-out infinite}
@keyframes rbGoldPulse{0%,100%{box-shadow:0 0 0 rgba(240,193,75,0)}50%{box-shadow:0 0 8px rgba(240,193,75,.65)}}
.rb-vip_gold::after{content:'';position:absolute;inset:0;
  background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.5) 50%,transparent 65%);
  background-size:220% 100%;animation:rbSweep 2.2s linear infinite}
.rb-vip_silver{border-color:#737373;color:#bfbfbf;background:rgba(153,153,153,.16);
  position:relative;overflow:hidden}
.rb-vip_silver::after{content:'';position:absolute;inset:0;
  background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.35) 50%,transparent 65%);
  background-size:220% 100%;animation:rbSweep 3s linear infinite}
.rb-vip_bronze{border-color:#7a5238;color:#d99e6e;background:rgba(122,82,56,.16);
  animation:rbBronzeBreathe 4.2s ease-in-out infinite}
@keyframes rbBronzeBreathe{0%,100%{background-color:rgba(122,82,56,.16)}50%{background-color:rgba(122,82,56,.32)}}
@keyframes rbSweep{0%{background-position:150% 0}100%{background-position:-70% 0}}
@media (prefers-reduced-motion: reduce){
  .rb-vip_gold,.rb-vip_silver,.rb-vip_bronze,.rb-vip_gold::after,.rb-vip_silver::after{animation:none}
}
.rb-eventadmin{border-color:#7a4f2f;color:#ffb27a;background:rgba(122,79,47,.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(0,0,0,.74);
  display:flex;align-items:center;justify-content:center;padding:20px}
.kits-dlg{position:relative;width:min(680px,100%);max-height:90vh;overflow:auto;
  background:#1a1a1a;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:#1a1a1a;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:#4c4c4c}
.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:#4c4c4c}

.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:#1a1a1a}
.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:#0a0a0a;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:#b3b3b3;padding:2px 0;
  border-bottom:1px solid #141414;white-space:pre-wrap;word-break:break-word;
}
.ag-log .lg span{color:#808080;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:#1a1a1a}
.lv-srv.on{background:#1f1f1f;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 #1f1f1f;cursor:pointer;
}
.lv-p:first-of-type{border-top:0}
.lv-p:hover{background:#1a1a1a}
.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:#808080}
.lv-kit.dim{color:var(--dim)}

/* Раскрытая карточка игрока: то, что известно из записи. */
.lv-info{
  display:flex;flex-wrap:wrap;gap:4px 14px;padding:7px 11px;background:#141414;
  border-top:1px solid #1f1f1f;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:#141414;
  border-top:1px solid #1f1f1f}
.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:#808080;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 #1f1f1f;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(0,0,0,.74);
  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 #1f1f1f;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:#bfbfbf}
.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)}
  /* Сверху на телефоне иконка наезжала бы на кнопку входа через Steam —
     шапка там растёт по высоте контента, а не стоит на фиксированных 108px.
     Переносим иконку в нижний угол экрана (снова fixed — на десктопе она
     теперь абсолютная внутри шапки), список у неё раскрывается вверх. */
  .panel-fab{position:fixed;top:auto;margin-top:0;bottom:16px;right:16px}
  .panel-fab-btn{width:40px;height:40px}
  .panel-fab-pop{top:auto;bottom:calc(100% + 10px);width:180px}
  .panel-fab::after{top:auto;bottom:100%}
  .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)}

  /* Герой был рассчитан на десктоп: на телефоне 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}
}

/* ======================= главная: живой пульт (ds/home-live.jsx) ======================= */
/* Три колонки: витрины разделов — плитки серверов и состав — демо-панель.
   Ширины фиксированы по краям, центр берёт остаток: состав в два столбца
   должен получить не меньше 640px, иначе ники режутся. */
/* Центр и оба борта закреплены явным grid-column, а не порядком в DOM —
   иначе авторазмещение расставило бы их по трекам в порядке разметки. */
/* Борта — треки фиксированной ширины (левый — свой, более широкий, --hl-rail-l:
   лента слева рабочая, ей нужно быть под рукой у центра, а не жаться к краю
   экрана, как декоративная правая колонка), центр между ними тянется до 700
   и первым отдаёт место, когда его не хватает. Так центр всегда ровно
   посередине по построению, а борт физически не может уехать за край экрана:
   раньше сетка была `1fr | центр | 1fr`, центр забирал свои 700, борту
   оставался огрызок трека, и панель просто вылезала за окно (при 1366px
   страница была шире окна на 52px — панели не было видно). */
.hl{
  /* Борта ОДНОЙ ширины — иначе центр физически не может стоять под логотипом:
     он смещается ровно на (правый − левый)/2. Было 520/473 в базе и 598/770
     с 1800px, из-за чего центр уезжал влево на 86px (замер на 1905px). */
  --hl-rail:470px;                 /* одна панель 429 + 41 отступа от центра */
  --hl-rail-l:470px;
  display:grid;grid-template-columns:var(--hl-rail-l) minmax(0,910px) var(--hl-rail);
  gap:22px;justify-content:center;
  margin:0 auto;padding:22px 20px 70px;align-items:start;
}
/* margin-left, а не justify-self:end: трек справа — minmax(0,1fr), поэтому
   лишний отступ просто отодвигает блок от центра, не растягивая трек и не
   сдвигая центральную колонку (см. .hl выше). */
/* justify-self:end — панель прижата к дальнему краю своего трека, то есть
   отступ от центра задаётся шириной самого трека (--hl-rail), а не полями. */
.hl-rightwrap{grid-column:3;display:grid;grid-template-columns:429px;gap:22px;justify-self:end;align-items:start;min-width:0}
/* Левый борт — не зеркало правого по посадке: правый специально отставлен
   от центра (justify-self:end внутри более широкого трека), а лента должна
   быть рабочей и под рукой, поэтому просто занимает весь свой трек
   (--hl-rail-l) и получается прижата вплотную к центральной колонке. */
/* Клеймо «ЗАБАНЕН» в профиле (BanStamp в InfantryStatsScreen.jsx) — WASTED
   из GTA V: страница уходит в серый и темнеет, полоса через весь экран,
   надпись въезжает с ударом. Полоса липнет к середине экрана, страница под
   ней остаётся рабочей (pointer-events:none). */
body.ban-wasted #root{animation:banGrey 2.4s ease-out both}
/* Спустя 10 с: серость отпускает, клеймо растворяется (1.5 с). */
body.ban-fade #root{animation:banUngrey 1.5s ease-in both}
@keyframes banUngrey{from{filter:grayscale(.85) brightness(.75)}to{filter:none}}
body.ban-fade .ban-stamp{animation:banGone 1.5s ease-in both}
@keyframes banGone{to{opacity:0;transform:scale(1.08);filter:blur(4px)}}
@keyframes banGrey{from{filter:none}to{filter:grayscale(.85) brightness(.75)}}
.ban-stamp{
  position:fixed;left:0;right:0;top:42%;z-index:60;pointer-events:none;
  display:flex;justify-content:center;
}
.ban-stamp-band{
  width:100%;padding:26px 20px 30px;text-align:center;
  background:linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.72) 18%,rgba(0,0,0,.82) 50%,rgba(0,0,0,.72) 82%,rgba(0,0,0,0) 100%);
  animation:banBand .9s cubic-bezier(.2,.8,.2,1) .35s both;
}
@keyframes banBand{from{opacity:0;transform:scaleY(.2)}to{opacity:1;transform:none}}
.ban-stamp-word{
  font-family:'Bebas Neue','Impact',var(--font-ui);font-weight:900;letter-spacing:.12em;
  font-size:clamp(72px,13vw,220px);line-height:.95;color:#c8102e;
  text-shadow:0 0 2px #000,0 4px 0 #5a0010,0 8px 24px rgba(0,0,0,.9),0 0 40px rgba(200,16,46,.55);
  animation:banWord 1.1s cubic-bezier(.15,.9,.2,1) .55s both,banShake .5s ease-out 1.55s 1;
}
@keyframes banWord{0%{opacity:0;transform:scale(2.6) translateY(-12px);filter:blur(6px)}60%{opacity:1;transform:scale(.96);filter:none}100%{transform:scale(1)}}
@keyframes banShake{0%,100%{transform:none}20%{transform:translate(-3px,2px)}40%{transform:translate(3px,-2px)}60%{transform:translate(-2px,1px)}80%{transform:translate(2px,-1px)}}
.ban-stamp-sub{
  margin-top:6px;display:flex;justify-content:center;gap:18px;flex-wrap:wrap;
  font-size:14px;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.85);
  animation:banSub .6s ease-out 1.5s both;
}
@keyframes banSub{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.hl-news-loop{text-align:center;font-size:11px;letter-spacing:.12em;text-transform:uppercase;padding:10px 0 6px;opacity:.6}
/* Плитка «Убийства» день→неделя→месяц (SlideTopCycle в home-live.jsx). */
.hl-cyc{overflow:hidden}
.hl-cyc-in{animation:hlCycIn .42s cubic-bezier(.2,.8,.2,1) both}
.hl-cyc-out{animation:hlCycOut .42s cubic-bezier(.6,0,.8,.2) both}
@keyframes hlCycIn{from{opacity:0;transform:translateX(36px)}to{opacity:1;transform:none}}
@keyframes hlCycOut{from{opacity:1;transform:none}to{opacity:0;transform:translateX(-36px)}}
.hl-cyc-f{display:flex;align-items:center;justify-content:space-between;gap:10px}
.hl-cyc-dots{display:inline-flex;gap:6px}
.hl-cyc-dots i{width:7px;height:7px;border-radius:50%;background:var(--line-strong);cursor:pointer;transition:background .2s,transform .2s}
.hl-cyc-dots i.on{background:var(--acc);transform:scale(1.25);box-shadow:0 0 8px rgba(229,0,0,.6)}
/* 12.09.2026: лента ужата на 40% (60% трека) и прижата к центру; трек не
   трогаем — борта должны оставаться одной ширины ради центровки. */
.hl-leftwrap{grid-column:1;width:60%;min-width:0;justify-self:end}
.hl .dim{color:var(--dim)}
.hl-tag{
  display:inline-block;font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;
  padding:2px 7px;border-radius:var(--r-3);border:1px solid var(--line);color:var(--dim);white-space:nowrap;
}
.hl-tag.ok{border-color:var(--ok-line);color:var(--ok)}
.hl-tag.warn{border-color:#6b5a2f;color:#e0c47a}
.hl-tag.live{border-color:var(--ok-line);color:var(--ok)}
.hl-tag.recruiting{border-color:#2f5a6b;color:#6fc0e0}
.hl-tag.finished,.hl-tag.draft{border-color:#333;color:#999}
.hl-tag.owner{border-color:var(--acc-line);color:var(--acc)}
/* Роль-плашка в демо-панели крутится по кругу (ROLE_CYCLE) — своя рамка на
   каждую роль, чтобы смена читалась даже боковым зрением, без анимации. */
.hl-tag.admin{border-color:var(--acc-line);color:var(--role-admin)}
.hl-tag.vip{border-color:#8a6f1f;color:var(--role-vip-gold);background:rgba(138,111,31,.14)}
.hl-tag.mod{border-color:var(--info-line);color:var(--role-moderator)}
.hl-tag.eventadmin{border-color:var(--warn-line);color:var(--acc-warm)}
.hl-btn{
  display:inline-block;padding:7px 14px;border-radius:var(--r-6);font-size:12px;font-weight:600;
  border:1px solid var(--line);color:var(--fg);text-decoration:none;background:var(--bg3);
  transition:var(--t-hover);white-space:nowrap;
}
.hl-btn:hover{border-color:var(--line-strong)}
.hl-btn-acc{background:var(--acc);border-color:var(--acc);color:#fff}
.hl-btn-acc:hover{background:var(--acc-hi);border-color:var(--acc-hi)}
.hl-btn.discord{background:var(--discord);border-color:var(--discord);color:#fff}
.hl-btn.discord:hover{background:var(--discord-hi)}
/* kit.css красит любую ссылку в #root акцентом (#root a — id сильнее класса):
   кнопкам и карточкам-ссылкам главной нужен свой цвет. */
#root .hl-btn,#root .hl-seed{color:var(--fg)}
#root .hl-btn-acc,#root .hl-btn.discord{color:#fff}
.hl-link{color:var(--acc);text-decoration:none;font-size:12px;white-space:nowrap;flex:none}
.hl-link:hover{color:var(--acc-warm)}

/* ---- левый борт: лента новостей ----
   Прижата к центру (--hl-rail-l — свой, более широкий трек, см. .hl), а не
   к внешнему краю, как декоративная правая колонка: это рабочий список, ему
   нужно быть под рукой, а не прятаться у края экрана.
   Прокрутка настоящая (overflow-y:auto на .hl-news-view) — колесом мыши или
   перетаскиванием полосы ленту можно пролистать самому в любой момент
   (см. NewsFeed в home-live.jsx); плавный автоход по scrollTop работает,
   только пока её не трогали. Наклон (rotateY) — тот же приём, что у правой
   панели статистики (.hl-demo), зеркально: та «уходит» вправо от центра,
   эта — влево; по наведению наклон снимается, чтобы легче было прицелиться
   курсором в ссылку. */
.hl-news-tilt{position:sticky;top:calc(var(--hdr-site) + 16px);width:100%;min-width:0;perspective:1400px}
.hl-news-view{
  height:calc(100vh - var(--hdr-site) - 40px);overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;
  scrollbar-width:none;-ms-overflow-style:none;
}
.hl-news-view::-webkit-scrollbar{display:none}
/* Ползунок: плавающая красная «таблетка» на 2px уже трека — рамка того же
   цвета, что и трек, плюс background-clip:padding-box создают этот зазор,
   не трогая ширину скроллбара. Свечение растёт при наведении/перетаскивании,
   чтобы было видно, что лентой можно управлять руками, а не только смотреть. */
.hl-news-view::-webkit-scrollbar{width:10px}
.hl-news-view::-webkit-scrollbar-track{background:var(--bg2);border-radius:5px}
.hl-news-view::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg,var(--acc-warm),var(--acc)) padding-box;
  border:2px solid transparent;border-radius:5px;
  box-shadow:0 0 6px rgba(229,0,0,.35);
}
.hl-news-view::-webkit-scrollbar-thumb:hover{
  background:linear-gradient(180deg,#ff6b6b,var(--acc-warm)) padding-box;
  box-shadow:0 0 10px rgba(229,0,0,.55);
}
.hl-news-view::-webkit-scrollbar-thumb:active{background:var(--acc) padding-box;box-shadow:0 0 14px rgba(229,0,0,.7)}
.hl-news-box{
  transform:rotateY(6deg) rotateX(1deg) translateX(-4px);transform-origin:right center;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 5%,#000 92%,transparent 100%);
          mask-image:linear-gradient(180deg,transparent 0,#000 5%,#000 92%,transparent 100%);
  transition:transform .3s,-webkit-mask-image .3s;
}
.hl-news-view:hover .hl-news-box{
  transform:rotateY(0deg) rotateX(0deg) translateX(0);
  -webkit-mask-image:none;mask-image:none;
}
.hl-news-col{display:grid;gap:12px;padding-bottom:12px}
/* Жидкое стекло: почти прозрачная подложка + блюр того, что под карточкой
   (плитки серверов), а не сплошной фон — лента должна быть частью экрана,
   а не перекрывать его плашками. */
.hl-news-empty{
  padding:14px 16px;background:rgba(255,255,255,.035);
  backdrop-filter:blur(16px) saturate(140%);-webkit-backdrop-filter:blur(16px) saturate(140%);
  border:1px solid rgba(255,255,255,.07);border-radius:var(--r-8);font-size:13px;
}
.hl-news-slide{
  position:relative;background:rgba(255,255,255,.035);
  backdrop-filter:blur(16px) saturate(140%);-webkit-backdrop-filter:blur(16px) saturate(140%);
  border:1px solid rgba(255,255,255,.07);border-radius:var(--r-8);
  padding:14px 16px 12px;box-shadow:0 6px 24px rgba(0,0,0,.16);
}
.hl-news-kicker{
  display:flex;align-items:center;gap:6px;font-size:10.5px;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;margin-bottom:8px;color:var(--dim);
}
.hl-news-kicker i{font-style:normal;font-size:9px;line-height:1}
.hl-news-ts{margin-left:auto;font-weight:600;letter-spacing:0;text-transform:none;color:var(--dim);font-size:10px;white-space:nowrap;flex:none}
.hl-news-slide.live{border-color:var(--ok-line);animation:hlNewsGlow 2.2s ease-in-out infinite}
.hl-news-slide.live .hl-news-kicker{color:var(--ok)}
.hl-news-slide.live .hl-news-kicker i{color:var(--ok);animation:hlNewsBlink 1.1s ease-in-out infinite}
@keyframes hlNewsBlink{0%,100%{opacity:1}50%{opacity:.25}}
@keyframes hlNewsGlow{
  0%,100%{box-shadow:0 6px 24px rgba(0,0,0,.16),0 0 0 rgba(95,208,138,0)}
  50%{box-shadow:0 6px 24px rgba(0,0,0,.16),0 0 22px 3px rgba(95,208,138,.45)}
}
.hl-news-slide.soon .hl-news-kicker{color:var(--acc-warm)}
.hl-news-slide.result .hl-news-kicker{color:var(--warn)}
.hl-news-slide.top .hl-news-kicker{color:var(--role-vip-gold,#e0b84a)}
.hl-news-slide.ban{border-color:var(--bad-line)}
.hl-news-slide.ban .hl-news-kicker{color:var(--bad)}
.hl-news-slide.clan{border-color:var(--info-line)}
.hl-news-slide.clan .hl-news-kicker{color:var(--info)}
/* Свой не занятый нигде оттенок (лиловый) — «топ» уже забрал золото, «клан»
   синий, «жив» и «баны» зелёный/красный: донату нужен цвет, который ни с чем
   не путается на пробегающей мимо ленте. */
.hl-news-slide.donate{border-color:#5a4a8a}
.hl-news-slide.donate .hl-news-kicker{color:#b18cff}
.hl-news-body{display:block;color:inherit;text-decoration:none}
a.hl-news-body:hover .hl-news-t{color:var(--acc-warm)}
.hl-news-t{display:block;font-size:14.5px;line-height:1.3;margin-bottom:8px;transition:color .15s}
.hl-news-vs{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:13px;font-weight:600;margin-bottom:8px}
.hl-news-vs.sm{font-size:12px;opacity:.9}
.hl-news-vs em{font-style:normal;font-size:10px;color:var(--dim);flex:none}
.hl-news-vs span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.hl-news-line{font-size:13px;margin-bottom:6px}
.hl-news-line .acc{color:var(--acc)}
.hl-news-reason{font-size:12px;color:var(--dim);font-style:italic;margin-bottom:6px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hl-news-f{display:block;font-size:11px;text-decoration:none;color:var(--dim)}
a.hl-news-f:hover{color:var(--acc)}
.hl-ban-row+.hl-ban-row{margin-top:8px;padding-top:8px;border-top:1px dashed var(--bad-line)}
.hl-top.news{margin-bottom:8px}
/* В ленте число ставим сразу за ником. У .hl-name стоит flex:1 — в узкой
   панели справа это правильно (числа выстраиваются в колонку), но карточка
   ленты шире, и между «Косой» и «43» получалась ладонь пустоты. Правим
   только .news: обычный .hl-top в правом борту остаётся как был. */
.hl-top.news .hl-name{flex:0 1 auto}
.hl-top.news .hl-top-r b{margin-left:8px}
@media (max-width:1220px){
  .hl-leftwrap{grid-column:1;order:0;justify-self:stretch;position:static}
  .hl-news-tilt{max-width:none;position:static;perspective:none}
  .hl-news-view{height:420px}
  .hl-news-box{transform:none;-webkit-mask-image:none;mask-image:none}
}

/* ---- центр: плитки ---- */
.hl-center{grid-column:2;display:grid;gap:14px;min-width:0;container-type:inline-size}
.hl-tiles{display:grid;grid-template-columns:1fr 1fr;gap:12px}
/* Центр — единственный резиновый трек (minmax(0,910px)), борта фиксированной
   ширины его не уступают. На мониторах уже ~1800px это стабильно душит центр
   до полоски в сотню-другую пикселей (замерено: 1450px окна -> центр 358px)
   — из-за этого «съезжает» и выглядит нецентрированной вся раскладка, хотя
   формально ничего не сломано. Плитки в один узкий центр не переходят. */
@container (max-width:520px){
  .hl-tiles{grid-template-columns:1fr}
}
.hl-tile{
  background:var(--bg2);border:1px solid var(--line);border-radius:var(--r-8);padding:14px 16px 12px;
  cursor:pointer;display:flex;flex-direction:column;gap:7px;min-width:0;
  transition:border-color .15s,box-shadow .25s,transform .25s;position:relative;
}
.hl-tile.on{box-shadow:0 0 0 1px var(--acc),0 10px 30px rgba(229,0,0,.12);transform:translateY(-1px)}
.hl-tile.dead{opacity:.72}
/* Друг в игре: свой сервер узнаётся по зелёной рамке, а не по box-shadow —
   иначе плитка «выбрано» (.on, красное свечение) и плитка «здесь друг»
   спорили бы за одно и то же свойство. border-color не мешает box-shadow. */
.hl-tile.friend{border-color:var(--ok-line)}
.hl-tile-h{display:flex;align-items:center;gap:9px;min-width:0}
.hl-tile-h b{font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hl-dot{width:9px;height:9px;border-radius:50%;flex:none;background:#4c4c4c}
.hl-dot.ok,.hl-dot.hot{background:var(--ok);box-shadow:0 0 0 3px rgba(95,208,138,.15)}
.hl-dot.hot{background:var(--acc-warm)}
.hl-dot.full{background:var(--acc)}
.hl-dot.dead{background:#4c4c4c}
.hl-tile-sub{font-size:12px;color:var(--dim);display:flex;gap:5px;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hl-tile-friend{font-size:11.5px;color:var(--ok);display:flex;align-items:center;gap:5px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hl-tile-friend b{font-weight:700}
/* margin-top:auto — подвал прижат к низу плитки. Плитки в ряду сетка тянет
   до одной высоты, но без этого подвал у плитки без строки «Играет …» стоял
   выше соседнего, и кнопки в ряду оказывались на разной высоте. */
.hl-tile-f{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:auto;padding-top:2px}
.hl-online{font-size:15px;font-variant-numeric:tabular-nums}
.hl-online b{font-weight:700;color:var(--ok)}
.hl-online em{font-style:normal;color:var(--acc-warm);font-size:12px;margin-left:5px}
.hl-join{
  font:inherit;font-size:11.5px;font-weight:600;padding:6px 12px;border-radius:var(--r-5);
  color:#fff;background:#1f7a45;border:1px solid #2a9457;white-space:nowrap;cursor:pointer;
}
.hl-join:hover{background:#249152}
.hl-join.off{
  color:var(--dim);background:var(--bg3);border-color:var(--line);cursor:default;
}
.hl-join.off:hover{background:var(--bg3)}

/* Кнопка с Uiverse.io (by polina066): неоновая рамка-обводка + стрелка,
   влетающая при наведении. Цвет — одна переменная (--uiv-c, "R,G,B" без
   rgb()), поэтому у «Подключиться» и «ЗаSEEDить» разный оттенок при одном
   и том же классе — переопределяется инлайном на конкретной кнопке. */
.uiv-btn{
  --uiv-c:180,255,100;
  display:inline-flex;align-items:center;justify-content:center;
  font-family:monospace;font-weight:700;font-size:12.5px;line-height:1;text-transform:uppercase;letter-spacing:.06em;
  padding:.6em 1em;border-radius:.5em;border:2px solid rgba(var(--uiv-c),.7);
  background-color:rgba(var(--uiv-c),.10);color:rgba(var(--uiv-c),.9);fill:rgba(var(--uiv-c),.9);
  box-shadow:0 0 8px rgba(var(--uiv-c),.22);cursor:pointer;text-decoration:none;white-space:nowrap;
  transition:box-shadow .3s,background-color .3s,border-color .3s,color .3s;
}
/* Полная яркость — только под курсором; в покое кнопка приглушена, чтобы
   четыре плитки не кричали разом. */
.uiv-btn:hover{border-color:rgb(var(--uiv-c));color:rgb(var(--uiv-c));fill:rgb(var(--uiv-c));background-color:rgba(var(--uiv-c),.16);box-shadow:0 0 0 4px rgba(var(--uiv-c),.45)}
/* text-indent = letter-spacing: межбуквенный зазор добавляется и ПОСЛЕ
   последней буквы, без компенсации текст стоит на .06em левее центра. */
.uiv-btn span{display:inline-block;text-indent:.06em;transform:scale(.94);transition:transform .3s}
.uiv-btn:hover span{transform:scale(1)}
/* Стрелка до наведения не занимает места вовсе (ни ширины, ни отступа) —
   иначе flex-gap оставлял пустоту справа, и текст съезжал влево. */
.uiv-btn svg{width:0;margin-left:0;opacity:0;overflow:hidden;transform:scale(.5) rotate(-180deg);transition:.3s}
.uiv-btn:hover svg{width:16px;margin-left:6px;opacity:1;transform:scale(1) rotate(0deg)}

/* ---- запись реплея ---- */
.hl-rec{
  display:flex;align-items:center;gap:12px;padding:11px 16px;border-radius:var(--r-8);
  background:var(--bg2);border:1px solid var(--line);
}
.hl-rec.on{border-color:rgba(255,0,0,.35);background:linear-gradient(90deg,rgba(229,0,0,.10),var(--bg2) 60%)}
.hl-rec-dot{width:10px;height:10px;border-radius:50%;background:#4c4c4c;flex:none}
.hl-rec.on .hl-rec-dot{background:var(--live);animation:hlPulse var(--pulse) ease-in-out infinite}
@keyframes hlPulse{0%,100%{box-shadow:0 0 0 0 rgba(255,0,0,.45)}50%{box-shadow:0 0 0 6px rgba(255,0,0,0)}}
.hl-rec-t{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1;font-size:12px;color:var(--dim)}
.hl-rec-t b{color:var(--fg);font-size:13px}

/* ---- состав: раскрывается по клику ---- */
/* grid-template-rows 0fr→1fr — единственный способ плавно раскрыть блок
   неизвестной высоты без max-height-костылей. */
.hl-roster{display:grid;grid-template-rows:0fr;transition:grid-template-rows .55s cubic-bezier(.2,.8,.2,1),opacity .4s;opacity:0}
.hl-roster.open{grid-template-rows:1fr;opacity:1}
.hl-roster-clip{overflow:hidden;min-height:0}
.hl-roster-in{padding-top:2px}
.hl-roster-cap{display:flex;align-items:center;gap:10px;font-size:14px;font-weight:600;margin:4px 2px 12px;flex-wrap:wrap}
.hl-roster-cap .dim{font-weight:500;font-size:12px}
.hl-roster-empty{padding:22px 4px;color:var(--dim);font-size:13px;text-align:center}
.hl-teams{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:start;position:relative}
/* Ники должны читаться целиком, а не обрезаться в двух узких колонках:
   как только фактическая ширина центра (а не ширина окна — рельсы по бокам
   на средних экранах съедают своё, и мимо этого легко промахнуться) не
   тянет две колонки состава, отряды переходят в одну. Контейнерный запрос,
   а не медиа-запрос: реагирует на реальный .hl-center, какие бы борта у
   него ни были. */
@container (max-width:640px){
  .hl-teams{grid-template-columns:1fr}
}
.hl-vs{
  position:absolute;left:50%;top:14px;width:38px;height:38px;transform:translateX(-50%);z-index:3;
  border-radius:50%;background:#b5271a;border:1.5px solid #e0483a;color:#fff;font-weight:800;font-size:12px;
  display:flex;align-items:center;justify-content:center;letter-spacing:.03em;
  animation:hl-vs-pulse 1.8s ease-in-out infinite;
}
@keyframes hl-vs-pulse{
  0%,100%{box-shadow:0 0 0 0 rgba(224,72,58,.55);transform:translateX(-50%) scale(1)}
  50%{box-shadow:0 0 0 8px rgba(224,72,58,0);transform:translateX(-50%) scale(1.08)}
}
@media (prefers-reduced-motion:reduce){
  .hl-vs{animation:none}
}
@container (max-width:640px){
  .hl-vs{position:relative;left:auto;margin:2px auto;transform:none}
}
/* Искры разлетаются от VS во все стороны — «столкновение команд». Каждая
   точка летит по своему углу (--rot) и на свою дистанцию (--dist), старт со
   сдвигом по фазе, чтобы шли не залпом, а непрерывной сыпью. */
.hl-vs i{
  position:absolute;top:50%;left:50%;width:3px;height:3px;border-radius:50%;
  background:#ffd76a;box-shadow:0 0 5px 1px #ff8a00,0 0 1px #fff;
  opacity:0;pointer-events:none;
  animation:hl-spark 1.44s cubic-bezier(.2,.6,.3,1) infinite;
}
.hl-vs i:nth-child(2){--rot:0deg;--dist:20px;animation-delay:0s}
.hl-vs i:nth-child(3){--rot:45deg;--dist:16px;animation-delay:.18s}
.hl-vs i:nth-child(4){--rot:90deg;--dist:22px;animation-delay:.36s}
.hl-vs i:nth-child(5){--rot:135deg;--dist:15px;animation-delay:.54s}
.hl-vs i:nth-child(6){--rot:180deg;--dist:21px;animation-delay:.72s}
.hl-vs i:nth-child(7){--rot:225deg;--dist:17px;animation-delay:.9s}
.hl-vs i:nth-child(8){--rot:270deg;--dist:23px;animation-delay:1.08s}
.hl-vs i:nth-child(9){--rot:315deg;--dist:16px;animation-delay:1.26s}
@keyframes hl-spark{
  0%{opacity:0;transform:translate(-50%,-50%) rotate(var(--rot)) translateX(2px) scale(1)}
  12%{opacity:1}
  100%{opacity:0;transform:translate(-50%,-50%) rotate(var(--rot)) translateX(var(--dist)) scale(.15)}
}
@media (prefers-reduced-motion:reduce){
  .hl-vs i{display:none}
}
.hl-team{display:grid;gap:10px;min-width:0;align-content:start}
.hl-team-h{
  display:flex;align-items:center;gap:10px;font-size:17px;font-weight:600;min-width:0;
  background:var(--bg2);border:1px solid var(--line);border-radius:var(--r-8);padding:11px 14px;
}
/* Team 1 = синяя сторона, Team 2 = красная — как в спортивных табло, чтобы
   было видно «кто есть кто» с одного взгляда, а не только по флагу. */
.hl-teams .hl-team:first-of-type .hl-team-h{
  border-color:rgba(59,130,246,.4);
  background:linear-gradient(90deg,rgba(59,130,246,.14),var(--bg2) 65%);
}
.hl-teams .hl-team:last-of-type .hl-team-h{
  border-color:rgba(224,72,58,.4);
  background:linear-gradient(90deg,rgba(224,72,58,.14),var(--bg2) 65%);
}
.hl-team-h img{width:34px;height:23px;border-radius:3px;display:block;flex:none}
.hl-team-n{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;min-width:0}
.hl-cnt{margin-left:auto;flex:none;color:var(--dim);font-size:12px;font-variant-numeric:tabular-nums;font-weight:500}
.hl-team-kd{display:flex;gap:18px;font-size:12.5px;color:var(--dim);padding:0 3px}
.hl-team-kd b{color:var(--fg)}
.hl-squad{border:1px solid var(--line);border-radius:var(--r-8);overflow:hidden;background:var(--bg2)}
.hl-squad-h{display:flex;align-items:center;gap:8px;padding:7px 12px;background:var(--bg3);border-bottom:1px solid var(--line);font-size:12.5px}
.hl-squad-h b{font-weight:600;letter-spacing:.03em;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.hl-lock{display:inline-flex;align-items:center;color:var(--dim);opacity:.85}
.hl-lock-ico{display:block;width:26px;height:26px}
.hl-solo .hl-squad-h{color:var(--dim)}
.hl-cmd .hl-squad-h{background:linear-gradient(90deg,rgba(224,184,74,.16),var(--bg3) 70%)}
.hl-cmd .hl-squad-h i{font-style:normal;color:var(--role-vip-gold,#e0b84a);font-size:12px}
.hl-row{display:flex;align-items:center;gap:7px;padding:6px 10px;font-size:14px;min-width:0}
.hl-role{width:22px;height:22px;flex:none;opacity:.9}
.hl-name{flex:1;min-width:64px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hl-veh{color:var(--dim);font-size:13px;flex:none}
.hl-vip{
  font-size:10.5px;letter-spacing:.05em;padding:2px 8px;border-radius:var(--r-4);flex:none;
  border:1px solid #8a6f1f;color:var(--role-vip-gold);background:rgba(138,111,31,.18);
}
.hl-staff{font-size:9.5px;letter-spacing:.06em;padding:2px 6px;border-radius:var(--r-4);flex:none;border:1px solid var(--acc-line);color:var(--acc)}
.hl-friend{font-size:9.5px;letter-spacing:.06em;padding:2px 6px;border-radius:var(--r-4);flex:none;border:1px solid var(--ok-line);color:var(--ok)}
.hl-row{cursor:pointer}
/* Знак клана в строке состава: лого с прозрачным фоном может быть широким
   (надпись), поэтому высота фиксирована, ширина — по картинке до предела. */
/* Знак клана — во всю высоту строки (.hl-row: 26px контент + 6px отступы
   сверху/снизу, отсюда 38px и минусовые поля), ширина по картинке. */
.hl-cemb{height:38px;margin:-6px 0;width:auto;max-width:96px;object-fit:contain;flex:none;filter:drop-shadow(0 1px 1px rgba(0,0,0,.6))}
/* Отряд одного клана (>60 % состава): лого клана фоном в правой части
   отряда, вырезано маской по форме знака, и раз в 6 с по нему пробегает
   хромовый отблеск. Само лого еле видно, чтобы не мешать строкам. */
.hl-squad.hl-sq-clan{position:relative}
.hl-squad.hl-sq-clan>*{position:relative;z-index:1}
.hl-squad.hl-sq-clan::before,.hl-squad.hl-sq-clan::after{content:'';position:absolute;z-index:0;pointer-events:none;
  top:36px;bottom:6px;right:8px;width:min(46%,220px);
  -webkit-mask:var(--clan-logo) center/contain no-repeat;mask:var(--clan-logo) center/contain no-repeat}
.hl-squad.hl-sq-clan::before{background:#fff;opacity:.07}
.hl-squad.hl-sq-clan::after{background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.15) 42%,rgba(255,255,255,.95) 50%,rgba(180,200,220,.6) 55%,transparent 68%);
  background-size:300% 100%;background-position:100% 0;animation:clanChrome 6s ease-in-out infinite}
@keyframes clanChrome{0%,55%{background-position:100% 0;opacity:0}60%{opacity:1}90%,100%{background-position:0 0;opacity:0}}
@media (prefers-reduced-motion:reduce){.hl-squad.hl-sq-clan::after{animation:none}}
/* Лого в плитке клана рядом с фото (ClanTile). */
.clanx-tile-logo{height:56px;width:auto;max-width:150px;object-fit:contain;flex:none;filter:drop-shadow(0 2px 4px rgba(0,0,0,.6))}
.clanx-tile-logo-solo{height:84px;max-width:220px}
/* Топ среди кланов (clans.SHOP top) и фон страницы клана (background). */
.clanx-top{box-shadow:0 0 0 1px #e8c15a,0 0 18px rgba(232,193,90,.35)}
.clanx-pagebg{position:fixed;inset:0;z-index:-1;background-size:cover;background-position:center;opacity:.28;pointer-events:none}
.clanx-pagebg::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,10,12,.2),rgba(10,10,12,.9))}
.hl-ctag{font-size:10px;padding:1px 5px;border:1px solid var(--line-strong);border-radius:3px;color:var(--dim);flex:none;white-space:nowrap;max-width:56px;overflow:hidden;text-overflow:ellipsis}
/* Анимированный клан-тег (clans.py: tag_style_catalog/tag_styles_by_tag) —
   тот же .nstyle-sm, что у стилей ника, просто с данными клана; сжимаем под
   размер обычного .hl-ctag, чтобы строка состава не поехала. */
.hl-ctag-wrap{flex:none;max-width:64px;overflow:hidden}
.hl-ctag-wrap .nstyle{font-size:10px;max-width:100%}
.hl-ctag-wrap .nstyle-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:inline-block;max-width:100%;vertical-align:bottom}
/* "both": клан красит тег, VIP добавляет золотое кольцо сверху — независимые
   эффекты накладываются, а не подменяют друг друга. */
.hl-ctag-vipglow .nstyle{box-shadow:0 0 0 1px rgba(240,193,75,.55);animation:hlCtagVip 2.4s ease-in-out infinite}
@keyframes hlCtagVip{0%,100%{box-shadow:0 0 0 1px rgba(240,193,75,.4)}50%{box-shadow:0 0 0 1px rgba(240,193,75,.85),0 0 8px rgba(240,193,75,.5)}}
@media (prefers-reduced-motion:reduce){.hl-ctag-vipglow .nstyle{animation:none}}
/* Ник целиком — window.nickHtml (nav.js) / NickChip (ds/srdata.js): знак
   клана или тег + ник со стилем магазина. Один вид на весь сайт, эталон —
   строка состава на главной. Размеры в em: чип живёт и в шапке (13px), и в
   заголовке профиля (64px), масштабируясь со шрифтом. Знак чуть выше строки
   (минусовые поля), чтобы не раздувать строку, как .hl-cemb выше. */
.nk{display:inline-flex;align-items:center;gap:.4em;min-width:0;max-width:100%;vertical-align:middle;color:inherit;text-decoration:none;font:inherit}
a.nk:hover .nk-name{text-decoration:underline;text-underline-offset:.15em}
.nk-emb{height:1.6em;max-height:64px;margin:-.3em 0;width:auto;max-width:2.8em;object-fit:contain;flex:none;filter:drop-shadow(0 1px 1px rgba(0,0,0,.6))}
.nk-name{min-width:3.2em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nk-name .nstyle{max-width:100%;vertical-align:baseline}
.nk-name .nstyle-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:inline-block;max-width:100%;vertical-align:bottom}
.nk .hl-ctag,.nk .hl-ctag-wrap .nstyle{font-size:max(10px,.75em)}
/* Купленный фон (правило владельца, CLAUDE.md) накрывает весь чип: иконку
   класса, знак/тег, ник, плашки. .nstyle режет overflow — знак без минусовых
   полей, чип сам вырастает до его высоты; отступы плотнее магазинной плашки. */
.nk.nstyle{padding:1px 8px 1px 5px;justify-content:flex-start;gap:.4em;height:auto;min-width:0;max-width:100%}
.nk.nstyle .nk-emb{margin:0;height:1.5em}
.nk.nstyle .nk-name{position:relative;z-index:1}
.nk.nstyle .hl-ctag,.nk.nstyle .hl-ctag-wrap,.nk.nstyle .hl-staff,.nk.nstyle .hl-vip,.nk.nstyle .hl-friend,.nk.nstyle .nk-role,.nk.nstyle .nk-emb{position:relative;z-index:1}
.nk.nstyle .hl-staff,.nk.nstyle .hl-friend{text-shadow:0 1px 2px rgba(0,0,0,.7)}
.nk-role{height:1.3em;width:auto;flex:none;opacity:.9}
.nk .hl-staff,.nk .hl-vip,.nk .hl-friend{font-size:max(9px,.62em);white-space:nowrap}
.nk-lg .hl-staff,.nk-lg .hl-vip,.nk-lg .hl-friend{font-size:.22em;letter-spacing:.06em}
.nk-lg.nstyle{padding:.05em .3em .05em .2em;border-radius:.2em}
/* nk-wrap: ник в несколько строк (подиум «Лучших»), без многоточия. */
.nk-wrap{display:inline}
.nk-wrap .nk-name,.nk-wrap .nk-name .nstyle-name{white-space:normal;overflow:visible;display:inline}
/* Крупный чип (заголовок профиля): знак ещё выше, тег не ужимается в 56px. */
.nk-lg .nk-emb{height:1.3em;margin:-.15em 0;max-width:3.2em}
.nk-lg .hl-ctag,.nk-lg .hl-ctag-wrap{max-width:none;font-size:.4em;padding:.1em .4em}
.hl-kd{flex:none;min-width:34px;text-align:right;font-size:11.5px;color:var(--dim);font-variant-numeric:tabular-nums}
/* карточка игрока */
.hl-card{display:grid;gap:12px;justify-items:center;text-align:center;padding:4px 0 2px}
.hl-card-ava{position:relative;width:104px;height:104px}
.hl-card-glow{position:absolute;inset:-8px;border-radius:50%;background:radial-gradient(circle,rgba(229,0,0,.32),transparent 72%)}
.hl-card-ring{position:relative;width:100%;height:100%;border-radius:50%;background:var(--bg3);display:flex;align-items:center;justify-content:center;
  box-shadow:0 0 0 2.5px var(--acc),0 0 0 6px var(--bg-dialog);animation:hlRing 3s ease-in-out infinite}
@keyframes hlRing{0%,100%{box-shadow:0 0 0 2.5px var(--acc),0 0 0 6px var(--bg-dialog)}50%{box-shadow:0 0 0 2.5px var(--acc-hi),0 0 0 6px var(--bg-dialog),0 0 26px rgba(229,0,0,.45)}}
.hl-card-ring img{width:52px;height:52px;opacity:.95}
.hl-card-vip{position:absolute;right:-6px;bottom:2px;font-size:10px;letter-spacing:.05em;padding:2px 7px;border-radius:var(--r-4);border:1px solid #8a6f1f;color:var(--role-vip-gold);background:var(--bg-dialog)}
.hl-card-n{font-size:20px;font-weight:800;letter-spacing:.01em;display:flex;align-items:center;gap:8px;max-width:100%;min-width:0}
.hl-card-n .hl-ctag{font-size:11px}
.hl-card-r{display:flex;align-items:center;justify-content:center;gap:8px;font-size:12px;color:var(--dim);margin:2px 0}
.hl-card-kd{width:100%;display:grid;gap:6px;justify-items:center}
.hl-card-kd span{font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--dim)}
.hl-card-kd b{font-size:40px;line-height:1;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.hl-card-kd .hl-bar{width:100%}
.hl-card .hl-cells{width:100%;grid-template-columns:repeat(3,1fr)}
.hl-card .hl-cells > div:nth-child(4){border-left:0}
.hl-card .hl-cells > div:nth-child(n+4){border-top:1px solid var(--line)}
.hl-card .hl-cells b{font-size:14px}
.hl-card-none{font-size:12px;color:var(--dim);line-height:1.5}

/* ---- плитка «Скоро ивент» ---- */
.hl-event{
  display:flex;flex-direction:column;gap:6px;background:var(--bg2);border:1px solid var(--acc-line);
  border-radius:var(--r-8);padding:14px 16px;text-decoration:none;color:var(--fg);transition:var(--t-hover);
  background-size:cover;background-position:right center;position:relative;overflow:hidden;
}
.hl-event:hover{border-color:var(--acc)}
.hl-event.live{border-color:var(--ok-line)}
.hl-event-k{display:flex;align-items:center;gap:8px;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--acc)}
.hl-event.live .hl-event-k{color:var(--ok)}
.hl-event-k i{width:7px;height:7px;border-radius:50%;background:currentColor;box-shadow:0 0 0 0 rgba(229,0,0,.6);animation:hlEvPulse 1.6s ease-out infinite}
.hl-event-k .dim{letter-spacing:0;text-transform:none;font-size:11px}
@keyframes hlEvPulse{to{box-shadow:0 0 0 8px rgba(229,0,0,0)}}
.hl-event > b{font-size:17px;font-weight:700;line-height:1.2}
.hl-event-vs{display:flex;align-items:center;gap:8px;font-size:13px}
.hl-event-vs em{font-style:normal;color:var(--acc);font-weight:800;font-size:11px}
.hl-event-f{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:4px;font-size:11.5px;flex-wrap:wrap}

/* ---- под составом ---- */
.hl-below{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.hl-seed{
  display:flex;flex-direction:column;gap:8px;background:var(--bg2);border:1px solid var(--line);
  border-radius:var(--r-8);padding:14px 16px;text-decoration:none;color:var(--fg);transition:var(--t-hover);
}
.hl-seed:hover{border-color:var(--ok-line)}
.hl-seed-h{display:flex;align-items:center;gap:10px}
.hl-seed-h b{font-size:14px}
.hl-seed p{margin:0;color:var(--dim);font-size:12px;line-height:1.55}
.hl-seed-f{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:auto;font-size:11.5px}
.hl-seed-f .hl-btn{background:#1f7a45;border-color:#2a9457;color:#fff}
/* Активный сид: плитка подсвечивается, рядом с «Запустить» появляется прямой
   вход на цель (home-live.jsx: SeedTile, ссылка от /api/autoseed/info). */
.hl-seed.on{border-color:#6b5a2f;background:linear-gradient(180deg,rgba(224,196,122,.07),var(--bg2) 70%)}
.hl-seed p .ok{color:var(--ok)}
.hl-seed-btns{display:flex;align-items:center;gap:8px}
/* #root a из kit.css красит ссылки акцентом и по специфичности сильнее
   класса — без #root вторая кнопка плитки выходила красной. */
#root .hl-seed-f .hl-btn.ghost,.hl-seed-f .hl-btn.ghost{
  background:transparent;border-color:var(--line);color:var(--fg)}
.hl-support{
  display:flex;flex-direction:column;gap:12px;justify-content:space-between;
  background:linear-gradient(180deg,rgba(229,0,0,.08),var(--bg2) 70%);border:1px solid var(--line);
  border-radius:var(--r-8);padding:14px 16px;
}
.hl-support b{font-size:14px}
.hl-support p{margin:6px 0 0;color:var(--dim);font-size:12px;line-height:1.55}
.hl-support-b{display:flex;gap:8px;flex-wrap:wrap}

/* ---- справа: демо-панель ---- */
/* Декорация, не интерфейс: чуть под углом, без событий мыши, края уходят в
   фон. Наклон — на обёртке, чтобы содержимое рисовалось обычной сеткой. */
.hl-right{position:sticky;top:calc(var(--hdr-site) + 16px);min-width:0;perspective:1400px}
.hl-demo{
  pointer-events:none;user-select:none;
  transform:rotateY(-5deg) rotateX(1deg) translateX(4px);transform-origin:left center;
  -webkit-mask-image:linear-gradient(180deg,#000 78%,transparent 100%);
          mask-image:linear-gradient(180deg,#000 78%,transparent 100%);
  opacity:.5;
}
.hl-demo-in{display:grid;gap:10px;position:relative;padding-top:6px}
.hl-demo-badge{
  position:absolute;right:0;top:-4px;z-index:2;font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
  padding:3px 9px;border-radius:var(--r-pill);border:1px solid var(--acc-line);color:var(--acc);background:rgba(229,0,0,.10);
}
.hl-id{display:flex;align-items:center;gap:12px;padding:6px 2px 2px;min-width:0}
.hl-ava{width:52px;height:52px;border-radius:var(--r-7);border:1px solid var(--line);flex:none;object-fit:cover;background:var(--bg3)}
.hl-ava.placeholder{object-fit:contain;padding:9px;opacity:.55}
.hl-id-n{font-size:21px;font-weight:800;letter-spacing:.02em;text-transform:uppercase;color:var(--acc);line-height:1.1;white-space:nowrap}
.hl-id>div{min-width:0}
.hl-id-n .nk{max-width:100%}
.hl-id-n .nk-emb{height:1.5em;margin:-.2em 0;max-width:3em}
.hl-id-n>span:not(.nk){color:var(--fg)}
.hl-id-n .nk .hl-ctag{color:var(--fg)}
.hl-id-s{display:flex;align-items:center;gap:8px;font-size:11px;color:var(--dim);margin-top:4px;flex-wrap:wrap}
.hl-id-s .mono{font-size:10px}
.hl-p{background:var(--bg2);border:1px solid var(--line);border-radius:var(--r-8);padding:11px 13px;display:grid;gap:8px;min-width:0;transition:border-color .3s,box-shadow .3s}
.hl-p.promo{border-color:var(--acc);box-shadow:0 0 0 1px var(--acc),0 0 24px rgba(229,0,0,.25)}
.hl-p-h{font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--dim);display:flex;align-items:center;gap:8px}
.hl-promo{color:var(--acc);font-weight:700;animation:hlPromo .5s ease-out}
@keyframes hlPromo{from{opacity:0;transform:translateX(-6px)}}
.hl-rank{display:flex;align-items:center;gap:12px;min-width:0}
.hl-rank-b{display:grid;gap:5px;min-width:0;flex:1}
.hl-rank-b b{font-size:13px}
.hl-rank-b .dim{font-size:10.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hl-bar{height:6px;border-radius:3px;background:var(--bg3);overflow:hidden}
.hl-bar i{display:block;height:100%;background:var(--acc);border-radius:3px;transition:width .1s linear}
.hl-two{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.hl-big{font-size:34px;font-weight:800;letter-spacing:-.02em;line-height:1;font-variant-numeric:tabular-nums}
.hl-p .dim{font-size:10.5px}
.hl-cells{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--line);border-radius:var(--r-6);overflow:hidden;margin-top:2px}
.hl-cells.two{grid-template-columns:1fr 1fr}
.hl-cells > div{padding:7px 6px;text-align:center;display:grid;gap:2px;border-left:1px solid var(--line)}
.hl-cells > div:first-child{border-left:0}
.hl-cells span{font-size:8px;letter-spacing:.04em;text-transform:uppercase;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Значение — самое длинное, что бывает в ячейке (317 371, 429ч 07м). Ячейки
   узкие и их три в ряд, поэтому число не переносим и не даём раздуть колонку:
   min-width:0 разрешает треку сжаться, ellipsis обрезает крайний случай. */
.hl-cells b{font-size:13px;font-variant-numeric:tabular-nums;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hl-cells em{font-style:normal;color:var(--acc)}
.hl-donut{display:grid;justify-items:center;gap:4px}
.hl-donut span{font-size:9px;letter-spacing:.07em;text-transform:uppercase;color:var(--dim)}
.hl-tiles-s{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-8);overflow:hidden}
.hl-tiles-s > div{background:var(--bg2);padding:10px 6px;display:grid;gap:3px;text-align:center;min-width:0}
.hl-tiles-s b{font-size:14px;font-variant-numeric:tabular-nums;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hl-tiles-s span{font-size:8.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--dim)}
.hl-svc{display:grid;grid-template-columns:18px 1fr 14px;grid-template-rows:auto auto;column-gap:8px;row-gap:4px;align-items:center;font-size:11.5px}
.hl-svc img{width:18px;height:18px;grid-row:1;opacity:.85}
.hl-svc span{grid-row:1}
.hl-svc .hl-bar{grid-column:1/3;grid-row:2}
.hl-svc em{grid-row:2;color:var(--acc);font-style:normal;font-size:10px;text-align:center}

/* ---- вторая правая колонка: детали статистики ---- */
.hl-right2{position:sticky;top:calc(var(--hdr-site) + 16px);min-width:0;perspective:1200px}
.hl-demo2{
  pointer-events:none;user-select:none;
  transform:rotateY(-8deg) rotateX(1.5deg) translateX(-2px);transform-origin:left center;
  height:calc(100vh - var(--hdr-site) - 40px);overflow:hidden;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 9%,#000 86%,transparent 100%);
          mask-image:linear-gradient(180deg,transparent 0,#000 9%,#000 86%,transparent 100%);
  opacity:.5;
}
/* Лента: две копии плиток друг под другом, сдвиг на половину высоты за
   --tk секунд — вторая копия встаёт ровно на место первой, шва нет. */
.hl-ticker{display:grid;padding-top:6px;will-change:transform}
.hl-tk-copy{display:grid;gap:12px;padding-bottom:12px}
@media (prefers-reduced-motion:no-preference){
  .hl-ticker{animation:hlTicker var(--tk,140s) linear infinite}
}
@keyframes hlTicker{to{transform:translateY(-50%)}}
/* клан */
.hl-clan-h{display:flex;align-items:center;gap:10px;min-width:0}
.hl-em{position:relative;width:44px;height:44px;flex:none;display:flex;align-items:center;justify-content:center}
.hl-em i{position:absolute;inset:0;border-radius:50%;background:conic-gradient(var(--acc) 0 25%,transparent 25% 50%,var(--acc) 50% 75%,transparent 75%);
  -webkit-mask:radial-gradient(circle,transparent 62%,#000 64%);mask:radial-gradient(circle,transparent 62%,#000 64%);animation:hlSpin 9s linear infinite}
/* Шрифт мелкий и без трекинга: в шестиугольник 30px влезает тег до восьми
   букв («КЛАНТЕГ»), а не только трёхбуквенный. */
.hl-em b{font-size:6.5px;font-weight:800;letter-spacing:0;color:var(--acc);width:30px;height:30px;display:flex;align-items:center;justify-content:center;overflow:hidden;
  background:var(--bg3);clip-path:polygon(25% 3%,75% 3%,100% 50%,75% 97%,25% 97%,0 50%)}
@keyframes hlSpin{to{transform:rotate(360deg)}}
.hl-clan-t{display:grid;gap:3px;min-width:0}
.hl-clan-t b{font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Строка «27 игроков · с 2024 · набор открыт» переносилась и вылезала из
   карточки — держим её в одну строку с обрезкой по краю. */
.hl-clan-t .dim{font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.hl-clan-t em{font-style:normal;color:var(--ok)}
.hl-top{display:grid;gap:2px}
.hl-top-r{display:flex;align-items:center;gap:7px;font-size:11px;padding:3px 0;border-top:1px solid var(--line-soft)}
.hl-top-r:first-child{border-top:0}
.hl-top-r b{font-variant-numeric:tabular-nums;font-size:11px;flex:none;white-space:nowrap}
.hl-top-i{width:16px;height:16px;border-radius:4px;background:var(--bg3);font-size:9px;display:flex;align-items:center;justify-content:center;color:var(--dim);flex:none}
.hl-top-i.p1{color:var(--pos1);border:1px solid var(--pos1)}
.hl-top-i.p2{color:var(--pos2);border:1px solid var(--pos2)}
.hl-top-i.p3{color:var(--pos3);border:1px solid var(--pos3)}
/* сервер */
.hl-srv{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.hl-srv > div{display:grid;gap:2px;padding:7px 9px;border:1px solid var(--line);border-radius:var(--r-6);background:var(--bg3)}
.hl-srv span{font-size:8.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hl-srv b{font-size:14px;font-variant-numeric:tabular-nums;display:flex;align-items:center;gap:6px}
.hl-srv .hl-dot{width:7px;height:7px}
.hl-sparks{display:flex;align-items:flex-end;gap:3px;height:44px;padding:0 2px}
.hl-sparks.tall{height:58px;gap:2px}
.hl-sparks i{flex:1;background:linear-gradient(180deg,var(--acc),rgba(229,0,0,.35));border-radius:2px 2px 0 0;min-height:2px;transition:height .1s linear}
/* медали */
.hl-medals{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.hl-medal{display:grid;justify-items:center;gap:2px;text-align:center;padding:8px 4px;border:1px solid var(--line);border-radius:var(--r-6);background:var(--bg3)}
.hl-medal img{width:34px;height:34px;object-fit:contain;animation:hlBob 3.2s ease-in-out var(--md,0s) infinite}
@keyframes hlBob{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-3px) scale(1.06)}}
.hl-medal b{font-size:12px;font-variant-numeric:tabular-nums}
.hl-medal span{font-size:8px;letter-spacing:.04em;text-transform:uppercase;color:var(--dim)}
.hl-medal em{font-style:normal;font-size:8.5px;color:var(--dim)}
.hl-medal em.p1{color:var(--pos1)}.hl-medal em.p2{color:var(--pos2)}.hl-medal em.p3{color:var(--pos3)}
/* бои */
.hl-trail{width:100%;height:64px;display:block}
/* Жёсткий график: позиции точек фиксированы (победа/поражение — да/нет, не
   плавающая величина), «жизнь» даёт только периодический всплеск — будто
   результат только что лёг в ленту, один за другим по кругу. */
@media (prefers-reduced-motion:no-preference){
  .hl-trail circle{
    transform-box:fill-box;transform-origin:center;
    animation:hlPop 6s ease-in-out infinite;animation-delay:calc(var(--i,0) * .45s);
  }
}
@keyframes hlPop{0%,82%,100%{transform:scale(1)}88%{transform:scale(.15)}93%{transform:scale(1.35)}}
/* Панели парят: у каждой своя длительность (--fl) и сдвиг фазы (--fd). */
@media (prefers-reduced-motion:no-preference){
  .hl-float{animation:hlFloat var(--fl,7s) ease-in-out var(--fd,0s) infinite}
}
@keyframes hlFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
.hl-p-r{margin-left:auto;color:var(--acc);letter-spacing:.02em;text-transform:none}
.hl-kits{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.hl-kit{display:grid;gap:5px;padding:9px 9px 8px;border:1px solid var(--line);border-radius:var(--r-7);background:var(--bg3);min-width:0}
.hl-kit img{width:24px;height:24px;margin:0 auto;opacity:.9}
.hl-wpn img{width:40px;height:22px;object-fit:contain}
.hl-kit b{font-size:10.5px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hl-kit .hl-bar{height:3px;margin-bottom:2px}
/* «Наиграно 195ч 16м» в карточке шириной ~110px не помещалось и вылезало за
   её край: flex по умолчанию не даёт тексту сжиматься ниже min-content.
   Подпись ужимается и обрезается, число остаётся целым — оно и есть смысл. */
.hl-kv{display:flex;justify-content:space-between;gap:5px;font-size:9.5px;color:var(--dim);font-variant-numeric:tabular-nums;min-width:0}
.hl-kv > span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hl-kv b{color:var(--fg);font-weight:600;flex:none;white-space:nowrap}
.hl-kv.line{font-size:11px;padding:5px 0;border-top:1px solid var(--line-soft)}
.hl-kv.line:first-of-type{border-top:0}
.hl-map{position:relative;display:flex;justify-content:space-between;align-items:center;padding:7px 10px;border:1px solid var(--line);border-radius:var(--r-6);background:var(--bg3);font-size:11.5px;overflow:hidden}
.hl-map i{position:absolute;left:0;top:0;bottom:0;background:rgba(229,0,0,.18);border-right:2px solid var(--acc);transition:width .1s linear}
.hl-map span,.hl-map em{position:relative}
.hl-map em{font-style:normal;color:var(--dim);font-size:10.5px;font-variant-numeric:tabular-nums}

/* ---- узкие экраны: одна колонка, панель без наклона ---- */
/* До 1500px лента не помещается — прячем, основная панель остаётся. */
/* Лестница ширин правого борта. Она нужна из-за требования «центр всегда
   ровно посередине»: раз слева под симметрию резервируется столько же
   пустоты, сколько занимает борт справа, каждый его пиксель стоит двух.
   Формула запаса: борт ≤ (ширина окна − 604) / 2, где 604 — это поля (40),
   зазоры сетки (44) и минимум центра (520).
   Без лестницы борт просто уезжал за край экрана — при 1366px страница
   была шире окна на 52 пикселя, и панели не было видно вовсе. */
/* Вторая панель (лента) — с Full HD и шире: борт становится 330 + 22 + 240,
   и столько же пустоты зеркалится слева. Ниже этой ширины лента прячется,
   иначе центр ужимался бы ради декорации. */
/* Вторая панель (лента) стоит 312 + 22 пикселей борта, а борт зеркалится
   влево — значит каждый её пиксель стоит двух. По формуле запаса выше борт
   770 окупается только с 2534px (770*2 + 910 центра + 84 полей и зазоров).
   Раньше её включали с 1800px, и центр на Full HD ужимался до 453px. */
@media (min-width:2534px){
  .hl{--hl-rail:770px;--hl-rail-l:770px}
  .hl-rightwrap{grid-template-columns:429px 312px}
}
@media (max-width:2533px){
  .hl-right2{display:none}
}
/* Ниже 1800 борт ужимается до панели без запаса (429 + 11), иначе центру
   остаётся полоска: на 1450px он был 358px. */
@media (max-width:1799px){
  .hl{--hl-rail:440px;--hl-rail-l:440px}
}
/* На узких — борт без отступа от центра, иначе центру остаётся мало. Левый
   трек и здесь остаётся немного шире правого (та же логика — лента рабочая,
   ей нужно больше места), но по той же формуле запаса, что и у правого. */
/* Порог 1640, а не 1599: монитор 1600px в медиазапросе даёт ровно 1600 (полоса
   прокрутки входит в ширину), и правило на 1599 его не ловило — борта
   оставались по 440, центру доставалось 620px, лента ужималась до 264. */
@media (max-width:1640px){
  .hl{--hl-rail:330px;--hl-rail-l:330px}
  .hl-rightwrap{grid-template-columns:300px}
  /* Лента на 60% от 330 — это 198px, слова не влезают; тут ей весь трек. */
  .hl-leftwrap{width:100%}
  /* K/D и «Командная игра» перестают делить борт пополам: в половине от
     300px три ячейки счётчиков ужимались до ~30px, и «1368» обрезалось в
     «13…». В одну колонку каждой панели достаётся вся ширина борта. */
  .hl-two{grid-template-columns:1fr}
}
@media (max-width:1220px){
  /* Одна колонка — оба грид-элемента возвращаются в неё явно: без сброса
     grid-column они остались бы в треках 2/3, которых в узком .hl больше
     нет, и вылезли бы за пределы страницы. */
  .hl{grid-template-columns:1fr;max-width:1170px}
  .hl-center{grid-column:1;order:1}
  .hl-rightwrap{grid-column:1;order:2;justify-self:stretch;grid-template-columns:1fr;margin-left:0}
  .hl-right{position:static;perspective:none}
  .hl-demo{transform:none;mask-image:none;-webkit-mask-image:none;opacity:1}
}
@media (max-width:720px){
  .hl-tiles,.hl-below,.hl-teams,.hl-two{grid-template-columns:1fr}
  .hl-vs{display:none}
}

/* ======================================================================
   Шапка 2.0 (04.09.2026): стекло поверх фона-силуэта, BZP-коины с
   подсказкой, вкладка «Пожертвовать проекту», карточка пользователя.
   Правила ниже перекрывают базовые выше — специально в конце файла.
   ====================================================================== */

/* ---------- фон-силуэт BZP ---------- */
/* Один фиксированный слой под всей внешкой: картинка растянута на экран,
   притушена и затемнена по краям, чтобы силуэт читался, а текст — не спорил
   с ним. z-index:-1 у первого ребёнка body кладёт слой между холстом
   страницы и её содержимым. Панели (.sc) непрозрачные и его не показывают. */
.site-bg{
  position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:#0f0f0f url(assets/art/bzp-bg.png) center 42%/cover no-repeat;
  opacity:.34;
}
.site-bg::after{
  content:'';position:absolute;inset:0;
  background:
    radial-gradient(ellipse 62% 70% at 50% 46%, transparent 0%, rgba(15,15,15,.45) 55%, #0f0f0f 100%),
    linear-gradient(180deg, rgba(15,15,15,.55) 0%, transparent 25%, transparent 70%, #0f0f0f 100%);
}
/* Герой главной раньше был сплошным — теперь пропускает силуэт. */
.hero{
  background:
    radial-gradient(120% 100% at 50% 0%, rgba(229,0,0,.18), transparent 62%),
    linear-gradient(180deg, rgba(22,22,22,.55) 0%, rgba(15,15,15,.55) 100%);
}

/* ---------- полоса шапки ---------- */
.sitebar{
  background:rgba(14,14,14,.82);
  -webkit-backdrop-filter:blur(10px) saturate(1.1);
          backdrop-filter:blur(10px) saturate(1.1);
  border-bottom:1px solid rgba(255,255,255,.07);
  box-shadow:0 1px 0 rgba(229,0,0,.18), 0 12px 40px rgba(0,0,0,.35);
}
.sitebar .brand img{filter:drop-shadow(0 6px 18px rgba(0,0,0,.6))}
.sitebar .brand{transition:transform .2s}
.sitebar .brand:hover{transform:scale(1.03)}
/* Крупнее и с собственным контуром: раньше рамка появлялась только по
   ховеру/на активной, и вкладки читались плоским текстом, а не плитками. */
.snav{
  padding:10px 16px;font-size:16.5px;font-weight:600;letter-spacing:.005em;
  border-color:rgba(255,255,255,.09);
}
.snav.on{
  background:linear-gradient(180deg,rgba(229,0,0,.16),rgba(229,0,0,.06));
  border-color:rgba(229,0,0,.38);color:#fff;
  box-shadow:inset 0 -2px 0 var(--acc);
}
.snav-slot{display:contents}

/* «Пожертвовать проекту» — тёплая вкладка с сердцем, отдельно от серых. */
.snav-donate{
  display:inline-flex;align-items:center;gap:7px;
  color:#ffb3a8;border-color:rgba(229,0,0,.35);
  background:linear-gradient(135deg,rgba(229,0,0,.2),rgba(229,0,0,.05));
}
.snav-donate svg{color:#ff4d4d;flex:none;transition:transform .2s}
.snav-donate:hover{color:#fff;background:linear-gradient(135deg,rgba(229,0,0,.32),rgba(229,0,0,.1));border-color:rgba(229,0,0,.6)}
.snav-donate:hover svg{transform:scale(1.18)}
.snav-donate.on{color:#fff;border-color:var(--acc)}
@keyframes bzp-heart{0%,100%{transform:scale(1)}50%{transform:scale(1.22)}}
.snav-donate:hover svg{animation:bzp-heart 1.2s ease-in-out infinite}

/* Иконка Discord-канала в шапке — витринная ссылка, канал ещё не привязан
   ни к одной интеграции, просто анонс сообщества. */
.snav-discord{
  display:inline-flex;align-items:center;justify-content:center;flex:none;
  width:32px;height:32px;border-radius:50%;
  background:var(--discord,#5865f2);color:#fff;
  transition:transform .18s ease,box-shadow .18s ease;
}
.snav-discord svg{width:15px;height:15px}
/* Логотип-картинка занимает весь кружок: кружок и есть логотип. */
.snav-discord{width:38px;height:38px;box-shadow:0 0 0 0 rgba(88,101,242,.5);animation:snavDc 3s ease-in-out infinite}
.snav-discord .ico-discord{width:38px;height:38px;border-radius:50%;display:block}
@keyframes snavDc{50%{box-shadow:0 0 0 6px rgba(88,101,242,0),0 0 14px rgba(88,101,242,.55)}}
.ico-steam{width:18px;height:18px;flex:none;border-radius:50%}
/* Кнопка входа в шапке — та же, что большая на главной (.hl-cta.steam), в
   уменьшенном виде: градиент Steam, свечение, логотип, блик при наведении. */
.sitebar .auth-btn{
  position:relative;overflow:hidden;gap:9px;padding:8px 16px;border-radius:10px;
  font-size:13px;font-weight:700;color:#fff;
  background:linear-gradient(135deg,#1b2838 0%,#171d33 55%,#1387b8 100%);
  border:1px solid rgba(102,192,244,.55);
  animation:hlCtaGlowSteam 2.8s ease-in-out infinite;
  transition:transform .2s,box-shadow .2s,filter .2s;
}
.sitebar .auth-btn:hover{color:#fff;background:linear-gradient(135deg,#1b2838 0%,#171d33 55%,#1387b8 100%);
  transform:translateY(-1px) scale(1.03);filter:brightness(1.12);
  box-shadow:0 0 0 3px rgba(102,192,244,.3),0 8px 20px rgba(27,158,222,.45)}
.sitebar .auth-btn .ico-steam{width:22px;height:22px;box-shadow:0 0 0 2px rgba(255,255,255,.25)}
.sitebar .auth-btn::after{
  content:'';position:absolute;top:0;bottom:0;left:0;width:45%;pointer-events:none;
  background:linear-gradient(105deg,transparent 0%,rgba(255,255,255,.55) 50%,transparent 100%);
  transform:translateX(-140%) skewX(-12deg);opacity:0;
}
.sitebar .auth-btn:hover::after{animation:hlCtaWink .9s ease-out 1}
.auth-dc .ico-discord{width:14px;height:14px;border-radius:4px}
.hl-btn.discord img{width:16px;height:16px;border-radius:4px;margin-right:6px;vertical-align:-3px}
.snav-discord:hover{transform:scale(1.08);box-shadow:0 4px 14px rgba(88,101,242,.5)}

/* ---------- BZP-коины ---------- */
.bzp{
  position:relative;display:inline-flex;align-items:center;gap:7px;flex:none;
  padding:6px 13px 6px 8px;border-radius:999px;cursor:pointer;
  background:linear-gradient(180deg,#2b2211 0%,#1a1408 100%);
  border:1px solid rgba(227,179,65,.45);
  color:#ffd76a;font-weight:700;line-height:1;
  box-shadow:inset 0 1px 0 rgba(255,226,122,.18), 0 2px 10px rgba(0,0,0,.35);
  transition:border-color .15s,box-shadow .15s,transform .15s;
  overflow:visible;
}
.bzp:hover,.bzp:focus-visible,.bzp.open{
  border-color:rgba(255,215,106,.85);
  box-shadow:inset 0 1px 0 rgba(255,226,122,.25), 0 0 0 3px rgba(227,179,65,.16), 0 4px 16px rgba(0,0,0,.4);
  outline:none;
}
/* Блик — только по наведению: вечная анимация поверх backdrop-filter шапки
   заставляла бы перерисовывать размытие каждый кадр. */
.bzp::before{
  content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(110deg,transparent 30%,rgba(255,236,170,.16) 50%,transparent 70%);
  background-size:220% 100%;background-position:120% 0;
}
.bzp:hover::before{animation:bzp-shine 1.6s linear infinite}
@keyframes bzp-shine{0%{background-position:120% 0}100%{background-position:-120% 0}}
.bzp-coin{flex:none;filter:drop-shadow(0 1px 2px rgba(0,0,0,.5))}
.bzp:hover .bzp-coin{animation:bzp-flip .7s ease}
@keyframes bzp-flip{0%{transform:rotateY(0)}100%{transform:rotateY(360deg)}}
.bzp-val{font-size:16px;font-variant-numeric:tabular-nums;letter-spacing:.01em;color:#ffe08a}
.bzp-cur{font-size:10px;letter-spacing:.14em;color:rgba(255,215,106,.7);font-weight:700}
.bzp-up{
  font-size:10.5px;padding:2px 6px;border-radius:999px;margin-left:2px;
  background:rgba(95,208,138,.14);border:1px solid rgba(95,208,138,.4);color:#7fe0a3;
  font-variant-numeric:tabular-nums;
}
.bzp-pop{
  position:absolute;top:calc(100% + 12px);right:0;width:312px;z-index:30;
  background:#161616;border:1px solid rgba(255,255,255,.09);border-radius:14px;
  padding:14px 16px 12px;box-shadow:0 18px 50px rgba(0,0,0,.6);
  color:var(--fg);font-weight:500;text-align:left;cursor:default;
  opacity:0;visibility:hidden;transform:translateY(-6px) scale(.98);
  transition:opacity .16s,transform .16s,visibility .16s;
}
.bzp-pop::before{
  content:'';position:absolute;top:-7px;right:26px;width:12px;height:12px;
  background:#161616;border-left:1px solid rgba(255,255,255,.09);border-top:1px solid rgba(255,255,255,.09);
  transform:rotate(45deg);
}
.bzp:hover .bzp-pop,.bzp:focus-within .bzp-pop,.bzp.open .bzp-pop{
  opacity:1;visibility:visible;transform:none;
}
/* Мостик между пилюлей и подсказкой, чтобы курсор не «терял» её по пути. */
.bzp::after{content:'';position:absolute;left:0;right:0;top:100%;height:14px}
.bzp-pop-top{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:10px}
.bzp-pop-k{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.bzp-pop-bal{font-size:22px;color:#ffe08a;font-variant-numeric:tabular-nums;font-family:'Bebas Neue',var(--font-ui);letter-spacing:.03em}
.bzp-pop-bal small{font-size:12px;color:rgba(255,215,106,.6);letter-spacing:.12em;font-family:var(--font-ui)}
.bzp-pop-rows{display:flex;flex-direction:column;gap:5px;font-size:12.5px}
.bzp-pop-rows>div{display:flex;justify-content:space-between;gap:10px;padding:5px 0;border-bottom:1px solid rgba(255,255,255,.05)}
.bzp-pop-rows span{color:var(--dim)}
.bzp-pop-rows b{font-variant-numeric:tabular-nums}
.bzp-pop b.plus,.bzp-op b.plus{color:#7fe0a3}
.bzp-pop b.minus,.bzp-op b.minus{color:#ff8a80}
.bzp-pop-last{margin-top:10px;display:flex;flex-direction:column;gap:4px;font-size:12px}
.bzp-dim{color:var(--dimmer);font-size:11.5px}
.bzp-op{display:flex;justify-content:space-between;gap:10px}
.bzp-op-r{color:var(--dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bzp-pop-foot{margin-top:11px;padding-top:9px;border-top:1px solid rgba(255,255,255,.06);font-size:11px;color:var(--dimmer);line-height:1.5}
.bzp-pop-foot a{color:#ffb3a8;text-decoration:none;white-space:nowrap}
.bzp-pop-foot a:hover{color:#fff}

/* ---------- пользователь ---------- */
.sitebar .auth-user{gap:12px;font-size:var(--fs-13)}
.auth-me{
  display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--fg);
  padding:4px 10px 4px 4px;border-radius:12px;border:1px solid transparent;min-width:0;
  transition:background .15s,border-color .15s;
}
.auth-me:hover{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.08)}
.sitebar .auth-avatar{width:44px;height:44px;border-radius:10px;border:1px solid rgba(255,255,255,.1);object-fit:cover}
.auth-avatar-x{display:block;background:var(--bg3)}
.auth-txt{display:flex;flex-direction:column;gap:3px;min-width:0}
.sitebar .auth-name{font-size:15px;font-weight:700;max-width:200px;line-height:1.15}
/* Знак клана в шапке (nickHtml): не выше строки ника, чтобы не лезть на плашку роли. */
.sitebar .auth-name .nk{max-width:100%}
.sitebar .auth-name .nk-emb{height:24px;margin:-3px 0;max-width:52px}
.auth-sub{display:flex;align-items:center;gap:6px;min-width:0}
.auth-sub .rb{font-size:10px;padding:1px 7px}
.auth-dc{display:inline-flex;color:var(--discord-link)}
.sitebar .auth-logout{
  display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--dim);
  padding:8px 10px;border-radius:10px;border:1px solid transparent;transition:all .15s;
}
.sitebar .auth-logout:hover{color:#ff8a80;background:rgba(229,0,0,.08);border-color:rgba(229,0,0,.3)}

@media (max-width:1599px){
  .sitebar .auth-logout span{display:none}
  .sitebar .auth-name{max-width:150px}
}
@media (max-width:1279px){
  .auth-txt{display:none}
  .snav-donate span{display:none}
  .snav-donate{padding:9px 10px}
}
@media (max-width:760px){
  .sitebar{background:rgba(14,14,14,.94)}
  .bzp{padding:5px 9px 5px 6px}
  .bzp-val{font-size:13px}
  .bzp-cur{display:none}
  .bzp-pop{position:fixed;left:12px;right:12px;top:auto;width:auto;margin-top:8px}
  .bzp-pop::before{display:none}
  .sitebar .auth-avatar{width:30px;height:30px;border-radius:7px}
}

/* ---------- шапка: две полосы вкладок вокруг логотипа ----------
   Слева от логотипа — Ивенты, Реплеи, Топ недели; справа — Игроки, Кланы,
   Статистика, «Пожертвовать» и блок пользователя. Раньше все вкладки шли одной
   полосой слева и на средних экранах наезжали на логотип. Боковые колонки
   равны (1fr), логотип ровно по центру; левая полоса прижата к логотипу,
   правая начинается от него. Сжиматься колонкам не даём наезжать: у полос
   overflow:hidden, а на экранах уже 1500px шапка раскладывается в две строки. */
.sitebar{grid-template-areas:"navl brand navr"}
.sitenav{overflow:hidden;-webkit-mask-image:none;mask-image:none;flex-wrap:nowrap}
.sitenav.left{grid-area:navl;justify-content:flex-end}
.sitebar .brand{grid-area:brand}
.siteright-wrap{grid-area:navr;display:flex;align-items:center;gap:10px;min-width:0}
/* Полоса вкладок отдаёт ширину блоку пользователя, а не выталкивает его за
   экран: раньше обе части были flex:none, и правая колонка (вкладки + плитки
   панелей + коины + аватар) молча вылезала за свою половину — документ
   становился шире окна, внизу появлялся горизонтальный ползунок, а
   отцентрованное содержимое страниц уезжало вправо (05.09.2026, у админа на
   1920). Пороги ниже почти всегда уводят шапку в две строки раньше, чем
   вкладкам придётся ужиматься. */
.siteright-wrap .sitenav.right{flex:0 1 auto}
.siteright-wrap .siteright{margin-left:auto;flex:none}

@media (max-width:1740px){
  .sitebar{
    height:auto;padding:8px 18px 10px;row-gap:4px;column-gap:20px;
    grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
    grid-template-areas:"navl brand navr" "navb navb navb";
    --logo-h:83px;
  }
  /* Блок пользователя (Steam-вход/Discord) уходит во вторую строку, к правому
     краю. Сами вкладки остаются в первой строке рядом с лого и по-прежнему
     расходятся от него в обе стороны — как и на широких экранах; раньше тут
     стояло justify-content:flex-start у левой полосы, и она вместо того,
     чтобы жаться к лого, жалась к левому краю экрана — большая пустая дыра
     перед логотипом и разная логика по бокам (owner, 07.09.2026).
     display:contents делает детей обёртки прямыми ячейками сетки. */
  .siteright-wrap{display:contents}
  .sitenav.left{grid-area:navl;justify-content:flex-end;align-self:end}
  .sitenav.right{grid-area:navr;justify-content:flex-start;align-self:end}
  .siteright{grid-area:navb;justify-content:flex-end}
  .sitebar .brand{align-self:center}
}
@media (max-width:1100px){
  .sitebar{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"brand user" "navl navl" "navr navr"}
  .sitenav.left,.sitenav.right{justify-content:flex-start;overflow-x:auto}
  .siteright{grid-area:user}
  .sitebar .brand{justify-content:flex-start}
}
@media (max-width:760px){
  .sitebar{--logo-h:44px;padding:9px 12px;gap:8px}
}

/* «Топ недели» из базы: ник — ссылка в профиль, подпись под колонкой. */
.tw-name a{color:inherit;text-decoration:none}
.tw-name a:hover{color:var(--acc)}
.tw-foot{margin-top:12px;font-size:11px;color:var(--dimmer);text-align:right}

/* ---------- «Топ недели» 2.0: медали, аватарки, ваниль/моды ---------- */
/* 1240px, а не 1080: со знаком клана перед ником (nickHtml) стили-плашки в
   трёх колонках иначе режутся до «С…» уже на 1600px. */
.tw-modal{max-width:1240px;border-radius:16px;background:#141414;
  box-shadow:0 40px 100px rgba(0,0,0,.7),0 0 0 1px rgba(229,0,0,.15)}
.tw-head{gap:14px;padding:16px 22px}
.tw-head h2{font-size:20px;font-weight:800;letter-spacing:.01em}
.tw-tabs{display:inline-flex;padding:3px;border-radius:10px;background:var(--bg3);border:1px solid var(--line);margin-left:6px}
.tw-tab{padding:6px 14px;border-radius:8px;font-size:12.5px;font-weight:700;color:var(--dim);border:1px solid transparent;transition:all .15s}
.tw-tab:hover{color:var(--fg)}
.tw-tab.on{color:#fff;background:linear-gradient(135deg,#e50000,#8a0000);border-color:rgba(255,255,255,.12)}
.tw-tab.on[data-pool="mod"]{background:linear-gradient(135deg,#6b2fb3,#3c1a70)}
.tw-tab.on[data-pool="event"]{background:linear-gradient(135deg,#b8860b,#6b4a00)}
.tw-tab.on[data-pool=""]{background:var(--bg2);border-color:var(--line-strong)}
.tw-body{padding:18px 22px 16px}
.tw-cols{gap:18px;grid-template-columns:repeat(auto-fit,minmax(290px,1fr))}
.tw-col{background:rgba(255,255,255,.02);border:1px solid var(--line);border-radius:14px;padding:12px 12px 6px}
.tw-cols h3{display:flex;align-items:center;gap:8px;margin:0 4px 10px;font-size:12px;letter-spacing:.14em;color:var(--fg)}
.tw-col-ico{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:8px;
  background:rgba(229,0,0,.12);border:1px solid rgba(229,0,0,.3);font-size:13px;color:#ff6b5b}
.tw-col-sl .tw-col-ico{color:#ffd76a}
.tw-col-seed .tw-col-ico{color:#7fe0a3}
.tw-col-sl .tw-col-ico{background:rgba(227,179,65,.12);border-color:rgba(227,179,65,.35)}
.tw-col-seed .tw-col-ico{background:rgba(95,208,138,.12);border-color:rgba(95,208,138,.35)}
.tw-row{
  display:grid;grid-template-columns:30px 34px minmax(0,1fr) auto;gap:10px;align-items:center;
  padding:7px 8px;margin:0 0 2px;border-radius:10px;border-bottom:0;font-size:13px;
  transition:background .12s;
}
.tw-row:hover{background:rgba(255,255,255,.04)}
.tw-pos{text-align:center;font-size:12.5px;font-weight:700;color:var(--dimmer);font-variant-numeric:tabular-nums}
.tw-row.top .tw-pos{font-size:22px;line-height:1;filter:drop-shadow(0 2px 6px rgba(0,0,0,.6))}
.tw-av{width:34px;height:34px;border-radius:9px;object-fit:cover;background:var(--bg3);border:1px solid var(--line);display:block}
.tw-av-x{display:flex;align-items:center;justify-content:center;font-weight:800;color:var(--dim);font-size:14px}
.tw-who{display:flex;flex-direction:column;gap:2px;min-width:0}
.tw-name{font-weight:600;font-size:13.5px}
.tw-name .nk{max-width:100%}
.tw-name .nk-emb{height:1.5em;max-width:2.6em;margin:-.25em 0}
.tw-name .nk-name .nstyle-sm{padding:1px 7px}
.tw-name a{color:inherit;text-decoration:none}
.tw-name a:hover{color:#ff8a80}
.tw-sub{font-size:11px;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tw-val{font-family:'Bebas Neue',var(--font-ui);font-size:22px;line-height:1;letter-spacing:.03em;color:#fff;
  font-variant-numeric:tabular-nums;white-space:nowrap;text-align:right}
.tw-row.top1{background:linear-gradient(90deg,rgba(227,197,106,.18),rgba(227,197,106,.04));border:1px solid rgba(227,197,106,.35)}
.tw-row.top2{background:linear-gradient(90deg,rgba(191,191,191,.14),rgba(191,191,191,.03));border:1px solid rgba(191,191,191,.28)}
.tw-row.top3{background:linear-gradient(90deg,rgba(192,138,90,.16),rgba(192,138,90,.03));border:1px solid rgba(192,138,90,.32)}
.tw-row.top1 .tw-val{color:#ffe08a;text-shadow:0 0 14px rgba(227,197,106,.4)}
.tw-row.top2 .tw-val{color:#e6e6e6}
.tw-row.top3 .tw-val{color:#e0a978}
.tw-row.top1 .tw-av{border-color:rgba(227,197,106,.7);box-shadow:0 0 0 2px rgba(227,197,106,.25)}
.tw-row.top2 .tw-av{border-color:rgba(191,191,191,.6)}
.tw-row.top3 .tw-av{border-color:rgba(192,138,90,.6)}
.tw-row.top .tw-name{font-size:14.5px;font-weight:800}
/* Место залогиненного игрока ниже топ-N: он играл на неделе, но не попал в
   видимую десятку (statsdb._with_my_rank отдаёт me только в этом случае). */
.tw-me-sep{margin:8px 0 4px;padding-top:8px;border-top:1px dashed var(--line);
  font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--dimmer)}
.tw-row.tw-me{background:rgba(229,0,0,.08);border:1px solid rgba(229,0,0,.3)}
.tw-foot{margin-top:14px;padding-top:12px;border-top:1px solid var(--line);text-align:center;font-size:11.5px}
@media (max-width:760px){
  .tw-head{flex-wrap:wrap}
  .tw-tabs{order:3;width:100%;margin:8px 0 0;justify-content:center}
  .tw-close{margin-left:auto}
  .tw-back{padding:16px 10px}
  .tw-body{padding:12px}
}

/* карточка игрока на главной: девять ячеек, три в ряд */
.hl-card .hl-cells > div:nth-child(3n+1){border-left:0}

/* Панель статистики справа на главной: широкая кнопка внизу. */
.hl-btn-wide{display:block;text-align:center;padding:12px 14px;font-size:13.5px;border-radius:10px;white-space:normal}
.hl-demo .hl-btn-wide{pointer-events:auto;user-select:auto}
/* Большая кнопка ПОВЕРХ правого борта (BigCta в ds/home-live.jsx): гость —
   «Войти через Steam» в цветах Steam, вошедший — «Полная статистика». Лежит
   в той же строке сетки, что и панели, растянута на обе колонки, липнет
   к середине экрана вместе с ними; сама сетка тянется на всю высоту. */
.hl-rightwrap{position:relative}
.hl-ctawrap{
  grid-column:1/-1;grid-row:1;align-self:start;justify-self:stretch;z-index:5;pointer-events:none;
  position:sticky;top:calc(var(--hdr-site) + 50vh - 120px);
  display:flex;justify-content:center;perspective:1400px;
}
.hl-ctawrap .hl-cta{pointer-events:auto;margin:0;width:min(480px,92%);padding:20px 26px;font-size:clamp(16px,1.3vw,22px);border-radius:14px;white-space:nowrap}
.hl-ctawrap .hl-cta img{width:34px;height:34px;flex:none;border-radius:50%;box-shadow:0 0 0 2px rgba(255,255,255,.25)}
/* «Полная статистика» (вошедшему): чёрная, красные грани, кромка пульсирует. */
.hl-cta.dark{
  background:linear-gradient(135deg,#141414,#0a0a0a);border:1px solid rgba(255,60,60,.85);
  animation:hlCtaEdge 1.8s ease-in-out infinite;
}
.hl-cta.dark:hover{filter:brightness(1.25);box-shadow:0 0 0 3px rgba(229,0,0,.35),0 0 26px rgba(255,40,40,.75),inset 0 0 14px rgba(255,40,40,.35)}
@keyframes hlCtaEdge{
  0%,100%{border-color:rgba(255,60,60,.55);box-shadow:0 0 6px rgba(255,40,40,.35),inset 0 0 6px rgba(255,40,40,.15),0 6px 20px rgba(0,0,0,.35)}
  50%{border-color:rgba(255,90,90,1);box-shadow:0 0 22px rgba(255,40,40,.85),inset 0 0 14px rgba(255,40,40,.4),0 6px 20px rgba(0,0,0,.35)}
}
/* Та же кнопка на /seed (вместо зелёной .sd-go): без наклона, по размеру карточки. */
.sd-steam,.sd-steam:hover{transform:none;margin:0;padding:14px 22px;font-size:16px;white-space:nowrap}
.sd-steam:hover{transform:translateY(-2px) scale(1.02)}
.sd-steam img{width:26px;height:26px;border-radius:50%;box-shadow:0 0 0 2px rgba(255,255,255,.25)}
.hl-cta.steam{
  background:linear-gradient(135deg,#1b2838 0%,#171d33 55%,#1387b8 100%);border-color:rgba(102,192,244,.55);
  animation-name:hlCtaGlowSteam;
}
.hl-cta.steam:hover{box-shadow:0 0 0 4px rgba(102,192,244,.3),0 10px 26px rgba(27,158,222,.45)}
@keyframes hlCtaGlowSteam{
  0%,100%{box-shadow:0 0 0 0 rgba(102,192,244,.45),0 6px 20px rgba(0,0,0,.35)}
  50%{box-shadow:0 0 0 6px rgba(102,192,244,0),0 6px 24px rgba(27,158,222,.5)}
}
@media (max-width:1220px){
  .hl-ctawrap{position:static;grid-row:auto;grid-column:1;order:3;perspective:none;margin-top:12px}
  .hl-ctawrap .hl-cta,.hl-ctawrap .hl-cta:hover{transform:none}
}
/* Кнопка «в мою статистику» под демо-панелью (StatsCta в ds/home-live.jsx).
   Красная, непрозрачная, дышит свечением; при наведении «подмигивает»:
   блик пробегает слева направо, стрелка отскакивает, кнопка чуть всплывает. */
.hl-cta{
  position:relative;display:flex;align-items:center;justify-content:center;gap:10px;
  margin-top:12px;padding:13px 16px;border-radius:10px;overflow:hidden;
  font-size:13.5px;font-weight:700;letter-spacing:.01em;text-decoration:none;color:#fff;
  background:linear-gradient(135deg,#ff2a2a,#b40000);border:1px solid rgba(255,90,90,.6);
  box-shadow:0 0 0 0 rgba(229,0,0,.45),0 6px 20px rgba(0,0,0,.35);
  animation:hlCtaGlow 2.8s ease-in-out infinite;
  transition:transform .2s,box-shadow .2s,filter .2s;
  /* Тот же наклон, что у демо-панели над ней (.hl-demo: rotateY(-5deg)
     rotateX(1deg)) — кнопка стоит с плитками в одной плоскости, но без их
     прозрачности и затухания. Перспектива — у общего родителя .hl-right. */
  transform:rotateY(-5deg) rotateX(1deg) translateX(4px);transform-origin:left center;
}
/* #root a{color:var(--acc)} из ds/kit.css сильнее одиночного класса —
   кнопка выходила красным по красному. Дублируем цвет с id в селекторе. */
#root .hl-cta,#root .hl-cta:hover{color:#fff}
.hl-cta i{font-style:normal;font-size:16px;line-height:1;transition:transform .2s}
.hl-cta::after{
  content:'';position:absolute;top:0;bottom:0;left:0;width:45%;pointer-events:none;
  background:linear-gradient(105deg,transparent 0%,rgba(255,255,255,.55) 50%,transparent 100%);
  transform:translateX(-140%) skewX(-12deg);opacity:0;
}
.hl-cta:hover{transform:rotateY(-5deg) rotateX(1deg) translateX(4px) translateY(-2px) scale(1.02);filter:brightness(1.12);
  box-shadow:0 0 0 4px rgba(229,0,0,.35),0 10px 26px rgba(229,0,0,.35)}
.hl-cta:hover::after{animation:hlCtaWink .9s ease-out 1}
.hl-cta:hover i{animation:hlCtaArrow .9s ease-out 1}
@keyframes hlCtaGlow{
  0%,100%{box-shadow:0 0 0 0 rgba(229,0,0,.45),0 6px 20px rgba(0,0,0,.35)}
  50%{box-shadow:0 0 0 6px rgba(229,0,0,0),0 6px 24px rgba(229,0,0,.45)}
}
@keyframes hlCtaWink{
  0%{transform:translateX(-140%) skewX(-12deg);opacity:0}
  15%{opacity:1}
  100%{transform:translateX(320%) skewX(-12deg);opacity:0}
}
@keyframes hlCtaArrow{
  0%,100%{transform:translateX(0)}
  35%{transform:translateX(6px)}
  70%{transform:translateX(-2px)}
}

/* ---------- Стили ников (магазин /shop, styleshop.py) ----------
   Плашка вокруг ника — общая база .nstyle + один из 10 «двигателей»
   .nstyle-eng-*, цвет приходит тройкой --c1/--c2/--c3 из каталога на
   бэкенде. .nstyle-sm — тот же движок в размере строки состава (Member в
   web/ds/home-live.jsx), .nstyle без модификатора — крупный вид в карточке
   магазина. Имена классов внутри (.nstyle-tag/.nstyle-name) специально не
   .num/.name — те заняты глобально (см. .num строкой выше в этом файле). */
.nstyle{
  position:relative;display:inline-flex;align-items:center;justify-content:center;
  min-width:188px;height:44px;padding:0 18px;
  border-radius:10px;border:1px solid rgba(255,255,255,.08);
  font-weight:600;font-size:15px;color:#f5f6fa;overflow:hidden;isolation:isolate;background:#12141c;
}
.nstyle-sm{min-width:0;height:auto;padding:2px 10px;border-radius:7px;font-size:inherit;font-weight:inherit}
/* Купленный стиль на ВСЮ строку состава (Member в ds/home-live.jsx и
   ds/screens/PlayersScreen.jsx): носитель движка — сама .hl-row, а не
   плашка вокруг ника. Сбрасываем размеры плашки до строки; .nstyle
   объявлен позже .hl-row и иначе перебил бы её display/padding/шрифт. */
.nstyle-row{
  display:flex;justify-content:flex-start;min-width:0;height:auto;
  padding:6px 10px;border-radius:0;border:0;font-size:14px;font-weight:inherit;color:inherit;
}
/* Блики/частицы движков — под контент строки: иконка кита, знак ранга и
   бейджи прав остаются чёткими (isolation:isolate у .nstyle не даёт
   z-index:-1 провалиться под фон страницы). */
.nstyle-row::before,.nstyle-row::after{z-index:-1}
/* На ярких движках (sweep/hue/aurora) бейджи прав, клантег и K/D тонут в
   заливке — тёмная подложка и тень, только внутри купленной строки. */
.nstyle-row .hl-vip,.nstyle-row .hl-staff,.nstyle-row .hl-friend,.nstyle-row .hl-ctag{
  position:relative;z-index:1;background:rgba(10,10,12,.6);
}
.nstyle-row .hl-kd{position:relative;z-index:1;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.75)}
/* hue крутит filter на самом элементе — на строке это перекрашивало бы
   иконки и бейджи. Заливку с анимацией выносим в слой под контентом. */
.nstyle-row.nstyle-eng-hue{animation:none;background:#12141c}
.nstyle-row.nstyle-eng-hue::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(135deg,var(--c1),var(--c2),var(--c3));animation:nstyle-hue 4s linear infinite;
}
.nstyle-tag{
  position:absolute;top:4px;right:7px;font-size:9px;letter-spacing:.03em;color:rgba(255,255,255,.55);
  text-shadow:0 1px 2px rgba(0,0,0,.7);
}
.nstyle-sm .nstyle-tag{display:none}
.nstyle-name{position:relative;z-index:1;text-shadow:0 1px 3px rgba(0,0,0,.55)}

.nstyle-eng-sweep{background:linear-gradient(135deg,var(--c1),var(--c2))}
.nstyle-eng-sweep::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(115deg,transparent 42%,rgba(255,255,255,.6) 50%,transparent 58%);
  transform:translateX(-130%);animation:nstyle-sweep 2.6s ease-in-out infinite;
}
@keyframes nstyle-sweep{to{transform:translateX(130%)}}

.nstyle-eng-flicker{background:#101218;border-color:var(--c1);animation:nstyle-flicker-bg 3s linear infinite}
@keyframes nstyle-flicker-bg{
  0%,19%,21%,23%,55%,57%,100%{box-shadow:inset 0 0 22px -4px var(--c1)}
  20%,22%,56%{box-shadow:inset 0 0 4px -2px var(--c1)}
}

.nstyle-eng-aurora{
  background:linear-gradient(120deg,var(--c1),var(--c2),var(--c3),var(--c1));
  background-size:280% 280%;animation:nstyle-aurora 6s ease-in-out infinite;
}
@keyframes nstyle-aurora{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}

.nstyle-eng-orbit{background:linear-gradient(135deg,var(--c1),#12141a 72%)}
.nstyle-eng-orbit::before{
  content:'';position:absolute;top:60%;left:-10%;width:14px;height:14px;
  margin:-7px 0 0 -7px;border-radius:50%;opacity:0;
  background:radial-gradient(circle,var(--c3) 0%,var(--c2) 45%,transparent 75%);
  filter:blur(1.5px);
  animation:nstyle-orbit 3.4s ease-in-out infinite;
}
@keyframes nstyle-orbit{
  0%{left:-10%;top:70%;opacity:0}
  12%{opacity:1}
  50%{left:50%;top:20%;opacity:1}
  88%{opacity:1}
  100%{left:112%;top:65%;opacity:0}
}

.nstyle-eng-glitch{background:#0f1015;animation:nstyle-glitch-bg 2.6s infinite steps(2,end)}
@keyframes nstyle-glitch-bg{
  0%,88%,100%{box-shadow:inset 0 0 0 0 transparent}
  90%{box-shadow:inset -2px 0 0 0 var(--c1),inset 2px 0 0 0 var(--c2)}
  92%{box-shadow:inset 2px 0 0 0 var(--c1),inset -2px 0 0 0 var(--c2)}
}

.nstyle-eng-scan{background:linear-gradient(180deg,var(--c1),var(--c2))}
.nstyle-eng-scan::after{
  content:'';position:absolute;left:0;right:0;height:40%;top:-45%;
  background:linear-gradient(180deg,transparent,rgba(255,255,255,.4),transparent);
  animation:nstyle-scan 2.4s linear infinite;
}
@keyframes nstyle-scan{to{top:120%}}

.nstyle-eng-crack{background:linear-gradient(135deg,var(--c1),var(--c2))}
.nstyle-eng-crack::after{
  content:'';position:absolute;inset:0;opacity:0;
  background:linear-gradient(100deg,transparent 45%,rgba(255,255,255,.95) 49%,transparent 53%);
  animation:nstyle-crack 2.8s ease-in-out infinite;
}
@keyframes nstyle-crack{
  0%,86%,100%{opacity:0;transform:translateX(-14%)}
  89%{opacity:1;transform:translateX(0)}
  93%{opacity:0;transform:translateX(14%)}
}

.nstyle-eng-pulse{background:linear-gradient(135deg,var(--c1),var(--c2));animation:nstyle-pulse 1.8s ease-in-out infinite}
@keyframes nstyle-pulse{0%,100%{box-shadow:inset 0 0 0 0 transparent}50%{box-shadow:inset 0 0 26px 4px var(--c2)}}

.nstyle-eng-hue{background:linear-gradient(135deg,var(--c1),var(--c2),var(--c3));animation:nstyle-hue 4s linear infinite}
@keyframes nstyle-hue{0%{filter:hue-rotate(0deg) saturate(1.35)}100%{filter:hue-rotate(360deg) saturate(1.35)}}

.nstyle-eng-particles{background:linear-gradient(160deg,var(--c1),#101218 72%)}
.nstyle-eng-particles::before{
  content:'';position:absolute;inset:0;opacity:.95;
  background-image:radial-gradient(circle,var(--c2) 1px,transparent 1.6px),
                   radial-gradient(circle,var(--c3) 1px,transparent 1.6px),
                   radial-gradient(circle,var(--c2) 1px,transparent 1.6px);
  background-size:34px 34px,48px 48px,26px 26px;
  background-position:6px 30px,22px 6px,30px 20px;
  animation:nstyle-particles 3.6s linear infinite;
}
/* Сдвиг ровно на размер тайла каждого слоя (34/48/26px) — иначе узор
   на стыке цикла дёргается, а не течёт бесконечно. */
@keyframes nstyle-particles{to{background-position:6px -4px,22px -42px,30px -6px}}

/* Хром — бегущий металлический блик (титан iPhone / объектив камеры).
   repeating-linear-gradient уже бесконечен сам по себе — сдвигаем ровно на
   период узора (32%), поэтому шов цикла не виден. */
.nstyle-eng-chrome{
  background:repeating-linear-gradient(100deg,
    var(--c1) 0%,var(--c3) 10%,var(--c2) 16%,var(--c3) 22%,var(--c1) 32%);
  animation:nstyle-chrome 4.5s linear infinite;
}
@keyframes nstyle-chrome{to{background-position:-32% 0}}

/* Слоты «Шрифт» и «Цвет шрифта» (styleshop.py): класс и --fc на нике. */
.nfont-oswald{font-family:'Oswald',sans-serif;font-weight:500}
.nfont-russo{font-family:'Russo One',sans-serif}
.nfont-pixel{font-family:'Press Start 2P',monospace;font-size:.72em}
.nfont-marck{font-family:'Marck Script',cursive;font-size:1.25em}
.nfont-lobster{font-family:'Lobster',cursive;font-size:1.1em}
.nfont-comfortaa{font-family:'Comfortaa',sans-serif;font-weight:600}
.nfont-play{font-family:'Play',sans-serif;font-weight:700}
.nfont-exo{font-family:'Exo 2',sans-serif;font-weight:600}
.nfont-rubikmono{font-family:'Rubik Mono One',sans-serif;font-size:.85em}
.nfont-caveat{font-family:'Caveat',cursive;font-size:1.3em;font-weight:600}
.nfont-cormorant{font-family:'Cormorant Garamond',serif;font-size:1.15em;font-weight:600}
.nfont-unbounded{font-family:'Unbounded',sans-serif;font-weight:600;font-size:.9em}
.nfont-jura{font-family:'Jura',sans-serif;font-weight:600}
.nfont-philosopher{font-family:'Philosopher',sans-serif;font-weight:700}
.nfont-neucha{font-family:'Neucha',cursive;font-size:1.15em}
.nfont-badscript{font-family:'Bad Script',cursive;font-size:1.2em}
.nfont-tektur{font-family:'Tektur',sans-serif;font-weight:600}
.nfont-yeseva{font-family:'Yeseva One',serif}
.nfont-amatic{font-family:'Amatic SC',cursive;font-size:1.35em;font-weight:700}
.nfont-ubuntumono{font-family:'Ubuntu Mono',monospace;font-weight:700}
/* Анимированный цвет букв (cc-*): градиент через background-clip:text
   (тень текста убираем — сквозь прозрачные буквы она видна), либо цвет и
   text-shadow по кадрам. Цвета --k1/--k2/--k3. */
.nca{display:inline-block}
.nca-clip,.nca-cc-rainbow,.nca-cc-flow,.nca-cc-fire,.nca-cc-ice,.nca-cc-gold,.nca-cc-wave,.nca-cc-diag,.nca-cc-candy,.nca-cc-aurora,.nca-cc-lava,.nca-cc-matrix{
  -webkit-background-clip:text!important;background-clip:text!important;color:transparent!important;text-shadow:none!important;
}
.nca-cc-rainbow{background-image:repeating-linear-gradient(90deg,#e50000 0,#ff9d00 .5em,#ffe600 1em,#00d26a 1.5em,#00a3ff 2em,#8a2be2 2.5em,#e50000 3em);animation:nca-x3em 2.4s linear infinite}
.nca-cc-flow{background-image:repeating-linear-gradient(90deg,var(--k1) 0,var(--k2) 1em,var(--k3) 2em,var(--k1) 3em);animation:nca-x3em 2.4s linear infinite}
.nca-cc-fire{background-image:repeating-linear-gradient(0deg,#ff3b00 0,#ffb300 .45em,#fff1a8 .7em,#ff3b00 1.1em);animation:nca-y11em 1s linear infinite}
.nca-cc-ice{background-image:repeating-linear-gradient(180deg,#7fd6ff 0,#eaffff .4em,#4fa8e8 .8em,#7fd6ff 1.2em);animation:nca-y12em 2s linear infinite}
.nca-cc-gold{background-image:repeating-linear-gradient(100deg,#a97e1c 0,#ffe27a 1em,#a97e1c 2em);animation:nca-x2em 1.6s linear infinite}
.nca-cc-wave{background-image:repeating-linear-gradient(180deg,var(--k1) 0,var(--k2) .4em,var(--k3) .8em,var(--k1) 1.2em);animation:nca-y12em 1.6s linear infinite}
.nca-cc-diag{background-image:repeating-linear-gradient(45deg,var(--k1) 0,var(--k1) .35em,var(--k3) .35em,var(--k3) .7em);animation:nca-x07em .8s linear infinite}
.nca-cc-candy{background-image:repeating-linear-gradient(-45deg,var(--k1) 0,var(--k1) .4em,#fff .4em,#fff .8em);animation:nca-x08em 1s linear infinite}
.nca-cc-aurora{background-image:linear-gradient(90deg,var(--k1),var(--k2),var(--k3),var(--k2),var(--k1));background-size:300% 100%;animation:nca-aurora 4s ease-in-out infinite}
.nca-cc-lava{background-image:repeating-linear-gradient(90deg,#c8321a 0,#ff5b1f .8em,#ffce54 1.3em,#ff5b1f 1.8em,#c8321a 2.6em);animation:nca-x26em 2.4s linear infinite}
.nca-cc-matrix{background-image:repeating-linear-gradient(180deg,#1f9a45 0,#3dff6b .45em,#c8ffd6 .65em,#1f9a45 1.1em);animation:nca-y11em .9s linear infinite;filter:drop-shadow(0 0 4px #3dff6b)}
@keyframes nca-x07em{to{background-position:.7em 0}}
@keyframes nca-x08em{to{background-position:.8em 0}}
@keyframes nca-x2em{to{background-position:2em 0}}
@keyframes nca-x26em{to{background-position:2.6em 0}}
@keyframes nca-x3em{to{background-position:3em 0}}
@keyframes nca-y11em{to{background-position:0 1.1em}}
@keyframes nca-y12em{to{background-position:0 1.2em}}
@keyframes nca-aurora{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}

.nca-cc-pulse{color:var(--k1)!important;animation:nca-pulse 1.6s ease-in-out infinite}
@keyframes nca-pulse{0%,100%{color:var(--k1)}50%{color:var(--k3)}}
.nca-cc-tri{color:var(--k1)!important;animation:nca-tri 3s linear infinite}
@keyframes nca-tri{0%,100%{color:var(--k1)}33%{color:var(--k2)}66%{color:var(--k3)}}
.nca-cc-hue{color:var(--k1)!important;animation:nca-hue 3s linear infinite}
@keyframes nca-hue{to{filter:hue-rotate(360deg)}}
.nca-cc-glow{color:var(--k1)!important;animation:nca-glow 2s ease-in-out infinite}
@keyframes nca-glow{0%,100%{text-shadow:0 0 3px var(--k1)}50%{text-shadow:0 0 10px var(--k2),0 0 22px var(--k1)}}
.nca-cc-neon{color:var(--k3)!important;animation:nca-neon 2.6s linear infinite}
@keyframes nca-neon{0%,19%,21%,23%,55%,57%,100%{text-shadow:0 0 6px var(--k1),0 0 16px var(--k1)}20%,22%,56%{text-shadow:none;opacity:.55}}
.nca-cc-orbit{color:var(--k1)!important;animation:nca-orbit 2s linear infinite}
@keyframes nca-orbit{0%,100%{text-shadow:0 -3px 6px var(--k2)}25%{text-shadow:3px 0 6px var(--k3)}50%{text-shadow:0 3px 6px var(--k2)}75%{text-shadow:-3px 0 6px var(--k3)}}
.nca-cc-heart{color:var(--k1)!important;animation:nca-heart 1.4s ease-in-out infinite}
@keyframes nca-heart{0%,40%,100%{color:var(--k1);transform:scale(1)}12%{color:var(--k3);transform:scale(1.06)}24%{color:var(--k1);transform:scale(1)}32%{color:var(--k3);transform:scale(1.04)}}
.nca-cc-electric{color:var(--k1)!important;animation:nca-electric 1.8s steps(1,end) infinite}
@keyframes nca-electric{0%,100%{color:var(--k1);text-shadow:0 0 4px var(--k1)}8%{color:#fff;text-shadow:0 0 10px var(--k3)}11%{color:var(--k1)}47%{color:#fff;text-shadow:0 0 12px var(--k3)}50%{color:var(--k1);text-shadow:0 0 4px var(--k1)}73%{color:#fff}75%{color:var(--k1)}}
.nca-cc-ghost{color:var(--k1)!important;animation:nca-ghost 3s ease-in-out infinite}
@keyframes nca-ghost{0%,100%{opacity:1;color:var(--k1)}50%{opacity:.35;color:var(--k3)}}

.ncolor{color:var(--fc)!important}
.ncolor .nstyle-name{color:var(--fc)}

/* Нет фона, но надет клантег/края: строка без заливки. */
.nstyle-eng-none{background:transparent;border-color:transparent}
.nstyle-row.nstyle-eng-none{background:transparent}

/* ---------- Слот «Клантег» (ct-*): плашка тега .nstyle-sm ----------
   Все движки симметричны и закольцованы: либо 0% и 100% совпадают, либо
   сдвиг ровно на период узора, либо видимая часть уезжает за край. */
.nstyle-eng-ct-ring,.nstyle-eng-ct-ring3,.nstyle-eng-ct-radar{background:#12141c}
.nstyle-eng-ct-ring::before,.nstyle-eng-ct-ring3::before{
  content:'';position:absolute;inset:-60%;
  animation:nstyle-spin 2.4s linear infinite;
}
.nstyle-eng-ct-ring::before{background:conic-gradient(from 0deg,var(--c2) 0%,transparent 25%,var(--c2) 50%,transparent 75%,var(--c2) 100%)}
.nstyle-eng-ct-ring3::before{background:conic-gradient(from 0deg,var(--c1),var(--c2),var(--c3),var(--c2),var(--c1))}
.nstyle-eng-ct-ring::after,.nstyle-eng-ct-ring3::after{content:'';position:absolute;inset:2px;border-radius:5px;background:#12141c}
@keyframes nstyle-spin{to{transform:rotate(360deg)}}

.nstyle-eng-ct-breathe{background:linear-gradient(135deg,var(--c1),#12141c);animation:nstyle-ct-breathe 2.2s ease-in-out infinite}
@keyframes nstyle-ct-breathe{0%,100%{box-shadow:inset 0 0 0 1px var(--c2),inset 0 0 4px var(--c2)}50%{box-shadow:inset 0 0 0 1px var(--c3),inset 0 0 14px 2px var(--c2)}}

.nstyle-eng-ct-flow{background:repeating-linear-gradient(90deg,var(--c1) 0,var(--c2) 20px,var(--c1) 40px);animation:nstyle-ct-flow 1.6s linear infinite}
@keyframes nstyle-ct-flow{to{background-position:40px 0}}

.nstyle-eng-ct-barber{
  background:linear-gradient(45deg,var(--c1) 25%,var(--c2) 25% 50%,var(--c1) 50% 75%,var(--c2) 75%);
  background-size:20px 20px;animation:nstyle-ct-barber 1.2s linear infinite;
}
@keyframes nstyle-ct-barber{to{background-position:20px 0}}

.nstyle-eng-ct-scan{background:linear-gradient(180deg,var(--c1),#12141c)}
.nstyle-eng-ct-scan::after{content:'';position:absolute;left:0;right:0;height:35%;top:-40%;
  background:linear-gradient(180deg,transparent,var(--c3),transparent);animation:nstyle-ct-scan 1.8s linear infinite}
@keyframes nstyle-ct-scan{to{top:110%}}

.nstyle-eng-ct-pulse{background:#12141c;border-color:var(--c1)}
.nstyle-eng-ct-pulse::before{content:'';position:absolute;inset:0;border-radius:inherit;
  background:radial-gradient(circle,var(--c2),transparent 70%);opacity:0;animation:nstyle-ct-pulse 1.8s ease-out infinite}
@keyframes nstyle-ct-pulse{0%{transform:scale(0);opacity:1}100%{transform:scale(2.2);opacity:0}}

.nstyle-eng-ct-orbit2{background:linear-gradient(135deg,var(--c1),#12141c)}
.nstyle-eng-ct-orbit2::before,.nstyle-eng-ct-orbit2::after{
  content:'';position:absolute;left:50%;top:50%;width:200%;height:6px;margin:-3px 0 0 -100%;
  background:radial-gradient(circle at 0 50%,var(--c3) 0 3px,transparent 4px),radial-gradient(circle at 100% 50%,var(--c3) 0 3px,transparent 4px);
  animation:nstyle-spin 2.6s linear infinite;
}
.nstyle-eng-ct-orbit2::after{animation-direction:reverse;filter:hue-rotate(60deg)}

.nstyle-eng-ct-glow{background:linear-gradient(135deg,var(--c1),var(--c2));animation:nstyle-ct-glow 2s ease-in-out infinite}
@keyframes nstyle-ct-glow{0%,100%{box-shadow:0 0 4px var(--c2)}50%{box-shadow:0 0 14px 3px var(--c2),inset 0 0 10px var(--c3)}}

.nstyle-eng-ct-hue{background:linear-gradient(90deg,#e50000,#ff9d00,#ffe600,#00d26a,#00a3ff,#8a2be2,#e50000);background-size:300% 100%;animation:nstyle-ct-hue 3s linear infinite}
@keyframes nstyle-ct-hue{to{background-position:300% 0}}

.nstyle-eng-ct-aurora{background:linear-gradient(120deg,var(--c1),var(--c2),var(--c3),var(--c2),var(--c1));background-size:300% 100%;animation:nstyle-ct-aurora 4s ease-in-out infinite}
@keyframes nstyle-ct-aurora{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}

.nstyle-eng-ct-shimmer{background:linear-gradient(135deg,var(--c1),var(--c2))}
.nstyle-eng-ct-shimmer::after{content:'';position:absolute;inset:0;
  background:linear-gradient(115deg,transparent 40%,rgba(255,255,255,.7) 50%,transparent 60%);
  transform:translateX(-120%);animation:nstyle-ct-shimmer 1.8s ease-in-out infinite}
@keyframes nstyle-ct-shimmer{to{transform:translateX(120%)}}

.nstyle-eng-ct-heart{background:linear-gradient(135deg,var(--c1),var(--c2));animation:nstyle-ct-heart 1.4s ease-in-out infinite}
@keyframes nstyle-ct-heart{0%,40%,100%{transform:scale(1)}12%{transform:scale(1.08)}24%{transform:scale(1)}32%{transform:scale(1.06)}}

.nstyle-eng-ct-ants{background:#12141c;border-color:transparent;
  background-image:repeating-linear-gradient(90deg,var(--c2) 0 5px,transparent 5px 10px),repeating-linear-gradient(90deg,var(--c2) 0 5px,transparent 5px 10px),
                   repeating-linear-gradient(180deg,var(--c2) 0 5px,transparent 5px 10px),repeating-linear-gradient(180deg,var(--c2) 0 5px,transparent 5px 10px);
  background-size:100% 1px,100% 1px,1px 100%,1px 100%;background-repeat:no-repeat;
  background-position:0 0,0 100%,0 0,100% 0;animation:nstyle-ct-ants .8s linear infinite}
@keyframes nstyle-ct-ants{to{background-position:10px 0,-10px 100%,0 -10px,100% 10px}}

.nstyle-eng-ct-radar::before{content:'';position:absolute;inset:-60%;
  background:conic-gradient(from 0deg,transparent 0 70%,var(--c2) 100%);animation:nstyle-spin 2s linear infinite}
.nstyle-eng-ct-radar::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(18,20,28,.35),transparent)}

.nstyle-eng-ct-wave{background:repeating-linear-gradient(180deg,var(--c1) 0,var(--c2) 8px,var(--c1) 16px);animation:nstyle-ct-wave 1.2s linear infinite}
@keyframes nstyle-ct-wave{to{background-position:0 16px}}

.nstyle-eng-ct-sparks{background:linear-gradient(160deg,var(--c1),#12141c)}
.nstyle-eng-ct-sparks::before{content:'';position:absolute;inset:0;
  background-image:radial-gradient(circle,var(--c3) 1px,transparent 1.5px),radial-gradient(circle,var(--c2) 1px,transparent 1.5px);
  background-size:16px 16px,24px 24px;animation:nstyle-ct-sparks 2s linear infinite}
@keyframes nstyle-ct-sparks{to{background-position:0 -16px,0 -24px}}

.nstyle-eng-ct-ice{
  background:linear-gradient(45deg,var(--c1) 25%,var(--c2) 25% 50%,var(--c1) 50% 75%,var(--c2) 75%);
  background-size:14px 14px;animation:nstyle-ct-barber 2.4s linear infinite,nstyle-ct-glow 2.4s ease-in-out infinite;
}

.nstyle-eng-ct-neon{background:#101218;border-color:var(--c2);animation:nstyle-ct-neon 2.4s ease-in-out infinite}
@keyframes nstyle-ct-neon{0%,100%{box-shadow:0 0 3px var(--c2),inset 0 0 3px var(--c2)}50%{box-shadow:0 0 10px var(--c2),0 0 20px var(--c1),inset 0 0 8px var(--c2)}}

.nstyle-eng-ct-checker{
  background:conic-gradient(var(--c1) 25%,var(--c2) 25% 50%,var(--c1) 50% 75%,var(--c2) 75%);
  background-size:12px 12px;animation:nstyle-ct-checker 1.6s linear infinite;
}
@keyframes nstyle-ct-checker{to{background-position:12px 12px}}

/* ---------- Слот «Края фона» (ed-*): строка состава .hl-row ----------
   Только рамка, тень и border-image: фон и ::before/::after строки заняты
   движками фона. Цвет — --e1/--e2/--e3. Угол и сдвиг крутятся через
   @property, иначе border-image не анимируется. */
@property --edge-a{syntax:'<angle>';inherits:false;initial-value:0deg}
@property --edge-p{syntax:'<length>';inherits:false;initial-value:0px}
.nedge{position:relative}
.nedge-eng-ed-glow{box-shadow:0 0 0 1px var(--e1);animation:nedge-glow 2.4s ease-in-out infinite}
@keyframes nedge-glow{0%,100%{box-shadow:0 0 0 1px var(--e1),0 0 6px var(--e1)}50%{box-shadow:0 0 0 1px var(--e2),0 0 16px 2px var(--e1)}}

.nedge-eng-ed-double{animation:nedge-double 2.6s ease-in-out infinite}
@keyframes nedge-double{0%,100%{box-shadow:inset 0 0 0 1px var(--e1),inset 0 0 0 4px transparent}50%{box-shadow:inset 0 0 0 1px var(--e2),inset 0 0 0 4px var(--e3)}}

.nedge-eng-ed-neon{animation:nedge-neon 2s ease-in-out infinite}
@keyframes nedge-neon{0%,100%{box-shadow:inset 0 0 0 1px var(--e1),inset 0 0 6px var(--e1)}50%{box-shadow:inset 0 0 0 1px var(--e2),inset 0 0 18px var(--e1),0 0 10px var(--e1)}}

.nedge-eng-ed-tb{animation:nedge-tb 2s ease-in-out infinite}
@keyframes nedge-tb{0%,100%{box-shadow:inset 0 2px 0 var(--e1),inset 0 -2px 0 var(--e1)}50%{box-shadow:inset 0 3px 0 var(--e2),inset 0 -3px 0 var(--e2)}}

.nedge-eng-ed-sides{animation:nedge-sides 2s ease-in-out infinite}
@keyframes nedge-sides{0%,100%{box-shadow:inset 3px 0 0 var(--e1),inset -3px 0 0 var(--e1)}50%{box-shadow:inset 5px 0 0 var(--e2),inset -5px 0 0 var(--e2)}}

.nedge-eng-ed-outline{outline:1px solid var(--e1);animation:nedge-outline 2.2s ease-in-out infinite}
@keyframes nedge-outline{0%,100%{outline-offset:-4px;outline-color:var(--e1)}50%{outline-offset:-1px;outline-color:var(--e2)}}

.nedge-eng-ed-conic,.nedge-eng-ed-conic2,.nedge-eng-ed-conic3,.nedge-eng-ed-conic4,.nedge-eng-ed-frame{
  border-width:2px!important;border-style:solid!important;border-color:transparent!important;animation:nedge-spin 3s linear infinite;
}
.nedge-eng-ed-conic{border-image:conic-gradient(from var(--edge-a),var(--e1),var(--e2),var(--e1)) 1}
.nedge-eng-ed-conic2{border-image:conic-gradient(from var(--edge-a),var(--e1) 0%,var(--e2) 25%,var(--e1) 50%,var(--e2) 75%,var(--e1) 100%) 1}
.nedge-eng-ed-conic3{border-image:conic-gradient(from var(--edge-a),#e50000,#ffe600,#00d26a,#00a3ff,#8a2be2,#e50000) 1}
.nedge-eng-ed-conic4{border-image:conic-gradient(from var(--edge-a),var(--e1) 0 12.5%,var(--e2) 12.5% 25%,var(--e1) 25% 37.5%,var(--e2) 37.5% 50%,var(--e1) 50% 62.5%,var(--e2) 62.5% 75%,var(--e1) 75% 87.5%,var(--e2) 87.5% 100%) 1}
.nedge-eng-ed-frame{border-image:conic-gradient(from var(--edge-a),var(--e3) 0 78%,var(--e2) 88%,var(--e3) 98% 100%) 1;animation-duration:2.4s}
@keyframes nedge-spin{to{--edge-a:360deg}}

.nedge-eng-ed-stripes,.nedge-eng-ed-dash{border-width:2px!important;border-style:solid!important;border-color:transparent!important;animation:nedge-shift 1s linear infinite}
.nedge-eng-ed-stripes{border-image:repeating-linear-gradient(45deg,var(--e1) calc(var(--edge-p) + 0px),var(--e1) calc(var(--edge-p) + 6px),var(--e2) calc(var(--edge-p) + 6px),var(--e2) calc(var(--edge-p) + 12px)) 1}
.nedge-eng-ed-dash{border-image:repeating-linear-gradient(90deg,var(--e1) calc(var(--edge-p) + 0px),var(--e1) calc(var(--edge-p) + 8px),transparent calc(var(--edge-p) + 8px),transparent calc(var(--edge-p) + 16px)) 1;animation-duration:.8s}
@keyframes nedge-shift{from{--edge-p:0px}to{--edge-p:-12px}}
.nedge-eng-ed-dash{animation-name:nedge-shift16}
@keyframes nedge-shift16{from{--edge-p:0px}to{--edge-p:-16px}}

.nedge-eng-ed-linear{border-width:2px!important;border-style:solid!important;border-color:transparent!important;border-image:linear-gradient(var(--edge-a),var(--e1),var(--e2),var(--e1)) 1;animation:nedge-spin 4s linear infinite}

.nedge-eng-ed-thick{animation:nedge-thick 2s ease-in-out infinite}
@keyframes nedge-thick{0%,100%{box-shadow:inset 0 0 0 1px var(--e1)}50%{box-shadow:inset 0 0 0 3px var(--e2)}}

.nedge-eng-ed-beat{animation:nedge-beat 1.4s ease-in-out infinite}
@keyframes nedge-beat{0%,40%,100%{box-shadow:inset 0 0 0 1px var(--e1)}12%{box-shadow:inset 0 0 0 2px var(--e2),0 0 10px var(--e1)}24%{box-shadow:inset 0 0 0 1px var(--e1)}32%{box-shadow:inset 0 0 0 2px var(--e2),0 0 8px var(--e1)}}

.nedge-eng-ed-swing{animation:nedge-swing 2s ease-in-out infinite}
@keyframes nedge-swing{0%,100%{box-shadow:inset 4px 0 0 var(--e1),inset -1px 0 0 var(--e3)}50%{box-shadow:inset 1px 0 0 var(--e3),inset -4px 0 0 var(--e1)}}

.nedge-eng-ed-swing-tb{animation:nedge-swing-tb 2s ease-in-out infinite}
@keyframes nedge-swing-tb{0%,100%{box-shadow:inset 0 3px 0 var(--e1),inset 0 -1px 0 var(--e3)}50%{box-shadow:inset 0 1px 0 var(--e3),inset 0 -3px 0 var(--e1)}}

.nedge-eng-ed-halo{animation:nedge-halo 3s ease-in-out infinite}
@keyframes nedge-halo{0%,100%{box-shadow:0 0 0 1px var(--e1),0 0 8px var(--e1)}33%{box-shadow:0 0 0 1px var(--e2),0 0 12px var(--e2)}66%{box-shadow:0 0 0 1px var(--e3),0 0 8px var(--e3)}}

.nedge-eng-ed-orbit{animation:nedge-orbit 2.4s linear infinite}
@keyframes nedge-orbit{
  0%,100%{box-shadow:0 -5px 10px var(--e1),inset 0 0 0 1px var(--e3)}
  25%{box-shadow:6px 0 10px var(--e2),inset 0 0 0 1px var(--e3)}
  50%{box-shadow:0 5px 10px var(--e1),inset 0 0 0 1px var(--e3)}
  75%{box-shadow:-6px 0 10px var(--e2),inset 0 0 0 1px var(--e3)}
}

@media (prefers-reduced-motion:reduce){
  .nstyle,.nstyle::before,.nstyle::after,.nedge{
    animation:none!important;
  }
}


/* ---------- Кланы 2.0: состав и колонки на узких экранах ----------
   Имена с приставкой clanx-: `.clan-row` и соседние уже заняты старой
   таблицей кланов на классических страницах, и переопределение сломало бы её.
   Строка бойца была решёткой из шести фиксированных колонок (~470 px) — на
   телефоне она не помещалась и растягивала страницу. Теперь имя занимает
   свободное место, цифры переносятся под него, вкладки клана прокручиваются,
   а правая колонка настроек уходит под левую. */
.clanx-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px}
.clanx-who{flex:1 1 210px;min-width:0;display:flex;align-items:center;gap:9px}
.clanx-cells{display:flex;gap:14px;flex-wrap:wrap;margin-left:auto}
.clanx-cells > div{min-width:54px;text-align:right}
.clanx-two{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:14px;align-items:start}
.clanx-tabs{overflow-x:auto;scrollbar-width:none}
.clanx-tabs::-webkit-scrollbar{display:none}
@media (max-width:860px){
  .clanx-two{grid-template-columns:minmax(0,1fr)}
  .clanx-cells{margin-left:0;width:100%;justify-content:space-between;gap:8px}
}

/* Услуги клана: живая эмблема (свечение), баннер-шапка, витрина магазина. */
.clanx-shop{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:10px}
.clanx-anim{position:relative;animation:clanx-glow 2.6s ease-in-out infinite}
.clanx-anim::after{content:'';position:absolute;inset:-3px;border-radius:inherit;pointer-events:none;
  background:conic-gradient(from 0deg,transparent 0 55%,rgba(255,255,255,.35) 70%,transparent 85% 100%);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 0);
          mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 0);
  animation:clanx-spin 3.2s linear infinite}
@keyframes clanx-glow{0%,100%{filter:drop-shadow(0 0 3px rgba(255,215,120,.45))}
  50%{filter:drop-shadow(0 0 12px rgba(255,215,120,.85))}}
@keyframes clanx-spin{to{transform:rotate(1turn)}}
@media (prefers-reduced-motion:reduce){.clanx-anim,.clanx-anim::after{animation:none}}
.clanx-banner{position:absolute;inset:0 0 auto 0;height:120px;overflow:hidden}
.clanx-banner img{width:100%;height:100%;object-fit:cover;display:block;
  -webkit-mask-image:linear-gradient(180deg,#000 30%,transparent);mask-image:linear-gradient(180deg,#000 30%,transparent)}

/* ---------- Кланы 3.0: крупный интерфейс и переходы (06.09.2026) ----------
   По просьбе владельца интерфейс кланов крупнее и разборчивее, чем на
   остальном сайте: раскладка вся на px (не em), переписывать сотню инлайн-
   стилей ради +1-2px избыточно — масштабируем zoom целиком. zoom — не
   стандарт CSS: Firefox его не понимает и просто показывает обычный
   размер (мягкая деградация, не поломка), Chromium/Edge/Safari 15.4+ —
   как задумано. На узком экране масштаб снят — телефону крупнее некуда.
   (Проверено: скролл после захода на страницу в скриншотах инструмента
   разработки иногда рисует шапку не на месте — но это воспроизводится и без
   zoom, координаты DOM всегда верные, это особенность самого превью, не
   страницы.) */
/* Экраны кланов на 30% крупнее (просьба владельца 11.09.2026): zoom на
   корне масштабирует и шрифт, и раскладку разом — ширина контейнера
   (1060px) считается уже в увеличенных пикселях, поэтому на узком окне
   плитки просто перестраиваются, а не вылезают за край. */
.clanx-scale{zoom:1.3}
@media (max-width:1100px){.clanx-scale{zoom:1.1}}
@media (max-width:760px){.clanx-scale{zoom:1}}
/* Список кланов: три квадратные плитки в ряд. aspect-ratio держит квадрат,
   содержимое внутри — по центру (см. ClanTile в ds/screens/ClansScreen.jsx). */
.clanx-grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.clanx-sq{aspect-ratio:1/1;min-height:0}
@media (max-width:900px){.clanx-grid3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.clanx-grid3{grid-template-columns:1fr}.clanx-sq{aspect-ratio:auto;min-height:220px}}

/* Переход между списком кланов и страницей клана, и между вкладками внутри
   неё — лёгкое всплытие, а не резкая подмена контента. key={tag}/{tab} на
   обёртке заставляет React перемонтировать блок при каждой смене. */
@keyframes clanx-enter{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
.clanx-enter{animation:clanx-enter .34s cubic-bezier(.16,1,.3,1)}
@keyframes clanx-fade{from{opacity:0}to{opacity:1}}
.clanx-fade{animation:clanx-fade .22s ease-out}

/* Плитка клана — лёгкий подъём и цветное свечение СВОИМ цветом клана при
   наведении (--clan-glow ставится инлайном на плитке). Минимализм: никакой
   лишней хромы, только то, что уже есть на карточке, чуть живее. */
/* Свечение при наведении убрали (06.09.2026) — вместе с постоянным
   RGB-кольцом на значке (услуга клана) плитка «горела» уже отовсюду,
   лишнее. Подъём карточки при наведении остался. */
.clanx-tile{transition:transform .22s cubic-bezier(.2,.8,.2,1),border-color .22s ease}
.clanx-tile:hover{transform:translateY(-3px)}

/* Бегущий блик по шапке страницы клана — единственный «цветной» акцент,
   специально один на весь экран, чтобы не пестрить. */
@keyframes clanx-sheen{0%{transform:translateX(-60%)}100%{transform:translateX(160%)}}
.clanx-sheen{position:absolute;top:0;bottom:0;width:40%;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.10),transparent);
  animation:clanx-sheen 5s ease-in-out infinite}

@media (prefers-reduced-motion:reduce){
  .clanx-tile,.clanx-enter,.clanx-fade,.clanx-sheen{animation:none!important;transition:none!important}
}

/* ---------- Кланы: прозрачные плитки (06.09.2026) ----------
   Владелец хочет видеть фоновую картину сквозь панели, а не сплошную
   заливку. Card/StatTile/KitStatCard/Dialog везде ссылаются на переменные
   --bg2/--bg3/--bg-dialog, а не на сырые hex — переопределяем их только
   внутри .clanx-scale, и подтягиваются разом все плитки экрана «Кланы»,
   ничего больше на сайте не трогая. 20% прозрачности = 80% альфы. */
.clanx-scale{
  --bg2: rgba(20,20,20,.8);
  --bg3: rgba(31,31,31,.8);
  --bg-dialog: rgba(26,26,26,.85);
}

/* «Точность и инженерка»: 8 плиток фиксированной сеткой 4×2, а не auto-fit —
   на части экранов auto-fit укладывал 6 в первый ряд и оставлял во втором
   ряду пустые пустые ячейки без карточек (чёрная дыра во всю ширину). */
.clanx-extra-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:8px;overflow:hidden}
@media (max-width:640px){.clanx-extra-grid{grid-template-columns:repeat(2,1fr)}}

/* ---------- Услуга «RGB-свечение» (06.09.2026) ----------
   Второй, независимый от «Живой эмблемы» эффект — оба разом не спорят:
   блик (.clanx-anim) крутится ВНУТРИ обрезанного контура значка, кольцо
   радуги — на отдельной, необрезанной обёртке снаружи (ClanMark сам решает,
   что во что вложить). object-fit картинки-эмблемы кольцо не трогает. */
.clanx-glow{position:relative}
.clanx-glow::before{
  content:'';position:absolute;inset:-4px;border-radius:inherit;z-index:-1;pointer-events:none;
  background:conic-gradient(from 0deg,#ff2d55,#ff9500,#ffd60a,#34c759,#00c7be,#0a84ff,#5e5ce6,#ff2d55);
  filter:blur(4px) saturate(1.3);opacity:.85;
  animation:clanx-hue 3.4s linear infinite;
}
@keyframes clanx-hue{to{transform:rotate(1turn)}}
@media (prefers-reduced-motion:reduce){.clanx-glow::before{animation:none}}

/* Лог старой панели (web/admin-classic.html). Правила жили в блоке
   автосидинга и уехали вместе с его редизайном 08.09.2026 — возвращены сюда,
   к самой панели они и относятся. */
.lg{font-size:11.5px;color:var(--dim);display:flex;gap:9px;padding:3px 4px;
  border-bottom:1px solid var(--line-soft)}
.lg span{font-variant-numeric:tabular-nums;color:var(--dimmest);flex:none}
.lg.ok{color:var(--ok)}
.lg.warn{color:var(--acc)}
.lg.bad{color:var(--bad)}

/* Панель «Нарушения» в профиле: сбоку от тела статистики (1180px по центру),
   в правом поле страницы; когда полей не хватает — уходит под тело. */
.prof-side{position:absolute;top:76px;right:24px;width:300px}
/* Ниже круглой кнопки панели в правом верхнем углу — она там же. */
.prof-side-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:11px;align-items:start}
/* minmax(0,1fr), а не 1fr: у 1fr минимум — min-content, и карточка с тремя
   счётчиками клана раздувала колонку до 360px при треке 300 — правый край
   уезжал за экран (карточки резались на «Подключитьс…»). */
.prof-side-grid>section{min-width:0}
@media (max-width:1799px){
  .prof-side{position:static;width:auto;max-width:1140px;margin:16px auto 0;padding:0 20px}
  .prof-side-grid{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
}

/* --- магазин клана 2.0 (ClansScreen ShopView): состояние, сервера, «Выполнено» --- */
.clanx-shop{grid-template-columns:repeat(auto-fill,minmax(290px,1fr))}
.clanx-hdot{display:inline-block;width:8px;height:8px;border-radius:50%;flex:none}
.clanx-hdot.ok{animation:clanx-hpulse 1.8s ease-in-out infinite}
@keyframes clanx-hpulse{0%,100%{box-shadow:0 0 0 0 rgba(61,220,132,.55)}60%{box-shadow:0 0 0 5px rgba(61,220,132,0)}}
.clanx-kind{font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--dim);border:1px solid var(--line);border-radius:3px;padding:1px 5px;white-space:nowrap}
.clanx-srvchip{display:inline-flex;align-items:center;gap:5px;font:inherit;font-size:11px;color:var(--fg);background:var(--bg3);border:1px solid var(--line);border-radius:6px;padding:3px 7px;cursor:default;transition:border-color .15s,background .15s,transform .15s}
.clanx-srvchip i{width:7px;height:7px;border-radius:50%;flex:none}
.clanx-srvchip small{font-size:10px;color:var(--dim)}
.clanx-srvchip b{color:var(--fg);font-size:11px;line-height:1}
.clanx-srvchip.can{cursor:pointer}
.clanx-srvchip.can:hover{border-color:var(--line-strong);transform:translateY(-1px)}
.clanx-srvchip.picked{border-color:var(--fg);box-shadow:inset 0 0 0 1px var(--fg)}
.clanx-srvchip.none{color:var(--dim)}
.clanx-svcsum{display:flex;gap:16px;align-items:center;flex-wrap:wrap;font-size:11.5px;color:var(--dim);border:1px solid var(--line);border-radius:8px;background:var(--bg2);padding:8px 12px}
.clanx-svcsum span{display:inline-flex;align-items:center;gap:6px}
.clanx-chargebar{transition:width .6s cubic-bezier(.16,1,.3,1)}
.clanx-cf-row{display:flex;justify-content:space-between;gap:12px;padding:5px 0;border-bottom:1px solid var(--line-soft)}
.clanx-cf-row span{color:var(--dim)}
.clanx-cf-row.big{font-size:15px;border-bottom:1px solid var(--line)}
/* покупка прошла: карточка вспыхивает зелёным, поверх всплывает «Выполнено» */
.clanx-okflash{animation:clanx-okflash 1.4s ease-out}
@keyframes clanx-okflash{0%{box-shadow:0 0 0 0 rgba(61,220,132,.7);border-color:#3ddc84}40%{box-shadow:0 0 0 10px rgba(61,220,132,0)}100%{box-shadow:0 0 0 0 rgba(61,220,132,0)}}
.clanx-done{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:8px;background:rgba(10,20,14,.82);color:#3ddc84;font-weight:800;font-size:16px;letter-spacing:.04em;z-index:2;animation:clanx-donein 2.4s ease forwards;pointer-events:none}
.clanx-done span{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;border:2px solid #3ddc84;animation:clanx-pop .5s cubic-bezier(.34,1.56,.64,1)}
@keyframes clanx-pop{from{transform:scale(.3);opacity:0}to{transform:scale(1);opacity:1}}
@keyframes clanx-donein{0%{opacity:0}10%{opacity:1}80%{opacity:1}100%{opacity:0}}
/* очередь объявлений: точка статуса — крутится в очереди, зелёная ушло, красная нет */
.clanx-shdot{width:9px;height:9px;border-radius:50%;flex:none;background:var(--dim)}
.clanx-shdot.queued{border:2px solid #e8c15a;border-top-color:transparent;background:none;animation:clanx-spin .9s linear infinite}
.clanx-shdot.sent{background:#3ddc84}
.clanx-shdot.failed{background:#ff5c5c}
.clanx-shout.sent{animation:clanx-fade .4s ease-out}
@media (prefers-reduced-motion:reduce){.clanx-hdot.ok,.clanx-okflash,.clanx-done,.clanx-done span,.clanx-shdot.queued{animation:none}}

/* --- «Живучесть» клана (VitalityView, ClansScreen ShopView-соседняя вкладка) --- */
.clanx-vtbar{height:8px;background:var(--bg3);border-radius:4px;overflow:hidden;margin-top:10px}
.clanx-vtbar i{display:block;height:100%;transition:width .6s cubic-bezier(.16,1,.3,1)}
.clanx-vtdot{display:inline-block;width:11px;height:11px;border-radius:50%;flex:none}
.clanx-vtdot.ok{background:#3ddc84}
.clanx-vtdot.bad{background:#ff5c5c}
.clanx-vtdot.grace{background:var(--dim);opacity:.6}
.clanx-vtarchived{margin:0 0 14px;padding:12px 16px;border:1px solid #ff5c5c55;background:#ff5c5c14;border-radius:9px;font-size:12.5px;line-height:1.5;color:var(--fg)}