@font-face{
  font-family:"Furore";
  src:url("../fonts/furore-subset.woff2") format("woff2");
  font-weight:400;font-style:normal;font-display:swap;
}
:root{
  /* палитра из брендбука Strike.uz */
  --ink:#121212;          /* фон */
  --ink-deep:#0C0C0C;     /* провалы и подложки */
  --panel:#181818;
  --panel-2:#1F1F1F;
  --line:#2C2C2C;
  --line-hot:#3D3128;
  --text:#FCFCFC;         /* основной белый */
  --mute:#8C8C8C;
  --dim:#B5B5B5;
  --brand:#F08800;        /* цвет логотипа */
  --brand-lo:#B86800;
  --brand-hi:#FFA733;
  /* семантика, отдельно от бренда */
  --live:#5FD35F;
  --tt:#E0473B;
  --ct:#4A90E2;
  --display:"Furore","Arial Narrow",Impact,system-ui,sans-serif;
  --body:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,monospace;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{
  margin:0;background:var(--ink);color:var(--text);font-family:var(--body);font-size:15px;line-height:1.5;
  background-image:
    radial-gradient(920px 520px at 80% -10%, rgba(240,136,0,.14), transparent 62%),
    radial-gradient(680px 400px at 6% 2%, rgba(240,136,0,.06), transparent 64%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.012) 0 1px, transparent 1px 3px);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}

.shell{max-width:1240px;margin:0 auto;padding:0 20px}

/* ---------- шапка ---------- */
.top{position:sticky;top:0;z-index:40;background:rgba(18,18,18,.86);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.top-in{display:flex;align-items:center;gap:16px;min-height:62px}
.logo img{height:26px;width:auto;display:block}
.nav{display:flex;gap:2px;margin-left:6px;flex-wrap:nowrap}
.nav a{
  font-family:var(--display);font-size:13px;text-transform:uppercase;letter-spacing:.04em;color:var(--mute);white-space:nowrap;
  padding:8px 10px;border:1px solid transparent;border-radius:3px;transition:color .15s,border-color .15s,background .15s;
}
.nav a:hover{color:var(--text);border-color:var(--line-hot);background:rgba(240,136,0,.06)}
.nav a.on{color:var(--ink);background:linear-gradient(180deg,var(--brand-hi),var(--brand));border-color:var(--brand)}
.top-right{margin-left:auto;display:flex;align-items:center;gap:10px}
.lang{display:flex;border:1px solid var(--line);border-radius:3px;overflow:hidden}
.lang button{
  font-family:var(--display);font-size:12px;letter-spacing:.1em;text-transform:uppercase;background:none;border:0;color:var(--mute);
  padding:6px 10px;cursor:pointer;transition:color .15s,background .15s;
}
.lang button.on{background:rgba(240,136,0,.16);color:var(--brand)}
.btn{
  font-family:var(--display);text-transform:uppercase;letter-spacing:.05em;font-size:13px;white-space:nowrap;
  display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border-radius:3px;cursor:pointer;border:1px solid transparent;
  transition:transform .12s,box-shadow .2s,background .2s,border-color .2s;
}
.btn:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.btn-primary{background:linear-gradient(180deg,var(--brand-hi),var(--brand));color:#161616;box-shadow:0 6px 20px rgba(240,136,0,.28)}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 10px 28px rgba(240,136,0,.4)}
.btn-ghost{border-color:var(--line-hot);color:var(--text);background:rgba(255,255,255,.02)}
.btn-ghost:hover{border-color:var(--brand);color:var(--brand)}

/* ---------- герой ---------- */
/*
 * Первый экран отдан картинке. Текст занимает левую половину, правая
 * остаётся под фотографию — поэтому здесь одна колонка с ограничением
 * ширины, а не сетка с панелью справа, как было раньше.
 */
.hero{position:relative;padding:96px 0 86px;overflow:hidden;display:flex;align-items:center;min-height:min(76vh,600px)}
.hero-in{position:relative;width:100%}
.hero-in > *{max-width:580px}
.eyebrow{
  display:inline-flex;align-items:center;gap:9px;font-family:var(--display);font-size:13px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--brand);border:1px solid var(--line-hot);border-radius:2px;padding:6px 12px;
  background:rgba(240,136,0,.07);
}
h1{
  font-family:var(--display);font-weight:700;text-transform:uppercase;
  font-size:clamp(38px,5.6vw,74px);line-height:1.02;letter-spacing:.01em;margin:20px 0 0;text-wrap:balance;
}
h1 .flame{color:var(--brand)}
.lede{max-width:50ch;color:var(--dim);margin:18px 0 0;font-size:16px}
.hero-cta{display:flex;gap:12px;margin-top:28px;flex-wrap:wrap}

/*
 * Живой онлайн одной строкой. Раньше здесь была панель со списком серверов,
 * но она слово в слово повторяла таблицу ниже и закрывала полкартинки.
 */
.hero-live{display:flex;align-items:baseline;flex-wrap:wrap;gap:9px;margin:26px 0 0;font-size:14px;color:var(--mute)}
.hero-live .dot{align-self:center}
.hl-label{font-family:var(--display);text-transform:uppercase;letter-spacing:.16em;font-size:11px}
.hero-live b{font-family:var(--mono);font-size:19px;color:var(--text);font-variant-numeric:tabular-nums;font-weight:400}
.hero-live b small{font-size:13px;color:var(--mute);margin-left:7px}
.hl-sep{color:var(--line-hot)}
.hl-mut{font-family:var(--mono);font-size:13px}

/* зелёная точка «сейчас в игре» */
.dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--live);margin-right:7px;box-shadow:0 0 0 0 rgba(95,211,95,.6);animation:pulse 2s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 9px rgba(95,211,95,0)}100%{box-shadow:0 0 0 0 rgba(95,211,95,0)}}

/* ---------- секции ---------- */
section{padding:64px 0}
/* шапка липкая: без отступа якорь прятал заголовок секции под неё */
section[id]{scroll-margin-top:78px}
.sec-head{display:flex;align-items:flex-end;gap:16px;margin-bottom:22px;flex-wrap:wrap}
h2{
  font-family:var(--display);text-transform:uppercase;font-size:clamp(23px,2.8vw,32px);letter-spacing:.02em;margin:0;
  padding-left:14px;border-left:4px solid var(--brand);line-height:1.05;
}
.sec-note{color:var(--mute);font-size:13px;margin-left:auto;font-family:var(--mono)}

/* серверы */
.srv-wrap{border:1px solid var(--line);border-radius:4px;overflow:hidden;background:rgba(24,24,24,.7)}
.srv-scroll{overflow-x:auto}
table{width:100%;border-collapse:collapse;min-width:720px}
thead th{
  font-family:var(--display);text-transform:uppercase;letter-spacing:.13em;font-size:11px;color:var(--mute);
  text-align:left;padding:11px 16px;background:linear-gradient(180deg,#1F1F1F,#141414);border-bottom:1px solid var(--line);
}
tbody td{padding:13px 16px;border-bottom:1px solid rgba(44,44,44,.55);vertical-align:middle}
tbody tr{transition:background .15s}
tbody tr:hover{background:rgba(240,136,0,.05)}
.srv-name{font-weight:600;display:flex;align-items:center;gap:9px}
.tag{font-family:var(--display);font-size:10px;letter-spacing:.12em;text-transform:uppercase;padding:2px 6px;border-radius:2px;border:1px solid var(--line-hot);color:var(--mute)}
.tag.cw{color:var(--brand);border-color:var(--brand-lo)}
.slots{display:flex;align-items:center;gap:10px;min-width:150px}
.bar{position:relative;flex:1;height:7px;background:var(--ink-deep);border:1px solid var(--line);border-radius:4px;overflow:hidden}
.bar i{display:block;height:100%;background:linear-gradient(90deg,var(--brand-lo),var(--brand))}
.bar.hot i{background:linear-gradient(90deg,#C7401C,var(--brand))}
.slots b{font-family:var(--mono);font-size:13px;font-variant-numeric:tabular-nums;min-width:52px}
.map{font-family:var(--mono);font-size:13px;color:var(--dim)}
/* адрес сервера — главное действие в таблице: нажатие кладёт в буфер
   команду `connect адрес`. Поэтому это кнопка, а не текст */
.addr{
  font-family:var(--mono);font-size:13px;color:var(--dim);
  background:none;border:1px solid var(--line);border-radius:3px;
  padding:6px 10px;cursor:pointer;text-align:left;white-space:nowrap;
  transition:color .15s,border-color .15s,background .15s;
}
.addr:hover{color:var(--brand);border-color:var(--brand-lo);background:rgba(240,136,0,.07)}
.addr:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
/* у выключенного сервера копировать нечего — но и прятать адрес незачем */
tr.srv-off .addr{cursor:default}
.ta-r{text-align:right}
tbody tr.srv-off td{opacity:.55}
.state{font-family:var(--display);font-size:11px;text-transform:uppercase;letter-spacing:.12em}
.state.up{color:var(--live)}
.state.off{color:#6B6259}
.join{
  font-family:var(--display);font-size:12px;letter-spacing:.1em;text-transform:uppercase;padding:6px 12px;border-radius:2px;
  border:1px solid var(--line-hot);color:var(--brand);white-space:nowrap;transition:background .15s,border-color .15s;
}
.join:hover{background:rgba(240,136,0,.13);border-color:var(--brand)}

/* лента + топы */
.cols{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.panel{background:rgba(24,24,24,.72);border:1px solid var(--line);border-top:2px solid var(--brand);border-radius:4px;overflow:hidden}
.panel-h{
  font-family:var(--display);text-transform:uppercase;letter-spacing:.14em;font-size:12px;color:#FFB23D;
  padding:10px 15px;border-bottom:1px solid var(--line);background:linear-gradient(180deg,#1F1F1F,#141414);
  display:flex;align-items:center;justify-content:space-between;
}
.panel-h span{color:var(--mute);letter-spacing:.08em}
.feed{max-height:376px;overflow-y:auto}
.fi{display:flex;gap:12px;padding:11px 15px;border-bottom:1px solid rgba(44,44,44,.5);align-items:baseline;transition:background .15s}
.fi:hover{background:rgba(240,136,0,.05)}
.fi time{font-family:var(--mono);font-size:11px;color:var(--mute);min-width:64px}
.fi .who{font-weight:600}
.fi .ace{color:var(--brand);font-weight:700}
.fi .clutch{color:#FFC46B;font-weight:700}
.fi .win{color:var(--live);font-weight:700}
.fi .on-map{color:var(--mute);font-family:var(--mono);font-size:12px}

.rank{display:flex;align-items:center;gap:12px;padding:10px 15px;border-bottom:1px solid rgba(44,44,44,.5);transition:background .15s}
.rank:hover{background:rgba(240,136,0,.05)}
.pos{font-family:var(--mono);font-size:13px;color:var(--mute);min-width:22px;font-variant-numeric:tabular-nums}
.pos.medal{color:var(--brand);font-weight:700}
.lvl{
  width:26px;height:26px;flex:none;display:grid;place-items:center;font-family:var(--mono);font-size:12px;font-weight:700;color:#161616;
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
}
.lvl.l6{background:linear-gradient(180deg,#FFC46B,var(--brand))}
.lvl.l5{background:linear-gradient(180deg,var(--brand-hi),var(--brand-lo))}
.lvl.l4{background:linear-gradient(180deg,#C79A55,#8A6A2E);color:#100C06}
.nick{flex:1;font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.stat{font-family:var(--mono);font-size:13px;font-variant-numeric:tabular-nums;color:var(--dim);min-width:62px;text-align:right}
.stat.pos-v{color:var(--live)}
.elo{font-family:var(--mono);font-size:14px;color:var(--brand);font-variant-numeric:tabular-nums;min-width:56px;text-align:right;font-weight:700}

/* банлист */
.ban-search{display:flex;gap:10px;margin-bottom:16px;flex-wrap:wrap}
.ban-search input{
  flex:1;min-width:240px;background:#0F0F0F;border:1px solid var(--line);border-radius:3px;color:var(--text);
  padding:11px 14px;font-family:var(--mono);font-size:14px;
}
.ban-search input:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(240,136,0,.13)}
.ban-row{display:flex;align-items:center;gap:14px;padding:12px 15px;border-bottom:1px solid rgba(44,44,44,.5);flex-wrap:wrap}
.ban-row:hover{background:rgba(224,71,59,.05)}
.chip{
  font-family:var(--display);font-size:10px;letter-spacing:.12em;text-transform:uppercase;padding:3px 8px;border-radius:2px;
}
.chip.perm{background:rgba(224,71,59,.16);color:#FF7A6E;border:1px solid rgba(224,71,59,.42)}
.chip.temp{background:rgba(240,136,0,.14);color:#FFB23D;border:1px solid rgba(240,136,0,.4)}
.chip.done{background:rgba(95,211,95,.12);color:var(--live);border:1px solid rgba(95,211,95,.34)}
.ban-reason{color:var(--mute);font-size:13px;flex:1;min-width:150px}
.ban-admin{font-family:var(--mono);font-size:12px;color:var(--mute)}

/* скачать */
.dl{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.dl-card{
  background:linear-gradient(168deg,rgba(31,31,31,.72),rgba(18,18,18,.9));border:1px solid var(--line);border-radius:4px;
  padding:22px;display:flex;flex-direction:column;gap:10px;transition:border-color .2s,transform .15s;
}
.dl-card:hover{border-color:var(--line-hot);transform:translateY(-2px)}
.dl-card h3{font-family:var(--display);text-transform:uppercase;letter-spacing:.07em;font-size:20px;margin:0}
.dl-card p{color:var(--mute);font-size:13px;margin:0;flex:1}
.dl-card .size{font-family:var(--mono);font-size:12px;color:var(--brand)}

footer{border-top:1px solid var(--line);padding:30px 0 44px;color:var(--mute);font-size:13px}
.foot-in{display:flex;gap:24px;flex-wrap:wrap;align-items:center}
.foot-in a:hover{color:var(--brand)}
.note{
  margin:0 0 6px;font-family:var(--mono);font-size:12px;color:#7C7266;border:1px dashed var(--line-hot);
  border-radius:3px;padding:9px 13px;background:rgba(240,136,0,.04);
}

@media (max-width:1100px){
  /* места под картинку справа уже нет — заливку делаем ровнее */
  .hero-in > *{max-width:none}
  .hero.has-bg::before{background-position:72% center}
  .hero.has-bg::after{
    background:
      linear-gradient(96deg, var(--ink) 0%, rgba(18,18,18,.94) 34%, rgba(18,18,18,.6) 66%, rgba(18,18,18,.4) 100%),
      linear-gradient(180deg, rgba(18,18,18,.6) 0%, rgba(18,18,18,.35) 30%, transparent 55%, var(--ink) 100%);
  }
}
@media (max-width:960px){
  .cols{grid-template-columns:1fr}
  .dl{grid-template-columns:1fr}
}

/* ---------- телефоны ---------- */
@media (max-width:820px){
  /*
   * Меню не скрываем: с телефона заходит большинство игроков, и без
   * навигации сайт превращается в одну страницу. Вместо гамбургера —
   * прокрутка вбок: работает без скриптов и всегда видно, куда идти.
   */
  .top-in{flex-wrap:wrap;gap:10px;padding:10px 0}
  /* заголовок и подпись к нему на узком экране не помещаются в строку */
  .sec-head{flex-direction:column;align-items:flex-start}
  .top-right .btn{font-size:11px;padding:7px 10px;letter-spacing:.03em}
  .logo{order:1}
  .top-right{order:2;margin-left:auto}
  .nav{
    order:3;width:100%;overflow-x:auto;flex-wrap:nowrap;margin:0;padding-bottom:2px;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;
  }
  .nav::-webkit-scrollbar{display:none}
  .nav a{flex:none;font-size:12px;padding:7px 11px}

  .shell{padding:0 14px}
  /*
   * На телефоне блок узкий и высокий: при cover от картинки остаётся
   * вертикальный срез, где не разобрать даже, кто на ней. Поэтому кадр
   * кладём полосой во всю ширину сверху (размер по ширине, не по высоте),
   * а текст уходит под неё на плотную подложку.
   */
  .hero{padding:186px 0 36px;min-height:0}
  .hero.has-bg::before{background-size:180% auto;background-position:54% -26px;transform:none}
  .hero.has-bg::after{
    background:linear-gradient(180deg, rgba(18,18,18,.28) 0%, rgba(18,18,18,.42) 26%, rgba(18,18,18,.94) 52%, var(--ink) 68%);
  }
  .page-head{padding:22px 0 44px}
  h1{font-size:clamp(30px,9vw,44px)}
  .lede{font-size:15px}
  .hero-cta{gap:9px}
  .hero-cta .btn{flex:1;justify-content:center;min-width:140px}
  .hero-meta{gap:14px 18px}
  .hero-meta b{font-size:18px}
  .hero-meta span{font-size:10px}
  .hero-live{margin-top:20px;gap:7px}
  .hero-live b{font-size:17px}
  section{padding:44px 0}
  .sec-head{gap:6px}
  .sec-note{margin-left:0;font-size:12px}
  .chips{gap:6px}
  .chip-link{font-size:11px;padding:6px 10px}
  .rec-grid{grid-template-columns:1fr 1fr;gap:9px}
  .rec-card{padding:11px 12px}
  .rec-value{font-size:17px}
  .prof-cards{gap:8px}
  .pc{padding:10px}
  .pc b{font-size:18px}
  .filter-row{gap:8px}
  .filter-row input[type=text]{min-width:0;flex:1 1 100%}
  .foot-in{gap:12px;font-size:12px}

  /*
   * Список серверов на телефоне: таблица шириной 720px уводила адрес — то,
   * ради чего в эту таблицу и приходят — за правый край экрана. Прячем
   * колонку с картой и вписываемся в ширину.
   */
  #servers table{min-width:0}
  #servers thead th:nth-child(3),#servers tbody td:nth-child(3){display:none}
  #servers thead th,#servers tbody td{padding:11px 8px}
  /* полоса без ширины сжималась в точку — задаём её явно */
  #servers .slots{min-width:0;gap:8px}
  #servers .slots .bar{flex:0 0 40px}
  #servers .slots b{min-width:42px;font-size:12px}
  #servers .srv-name{gap:6px;flex-wrap:wrap}
  #servers .addr{font-size:11px;padding:5px 7px}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}
/* ============================================================
   Дополнения к прототипу: блоки, которых в макете не было
   ============================================================ */

/* заголовок группы серверов */
.sub-head{
  font-family:var(--display);text-transform:uppercase;font-size:13px;letter-spacing:.08em;
  color:var(--mute);margin:22px 0 9px;
}
.sub-head:first-of-type{margin-top:0}

/* шапка: ссылки-языки вместо кнопок */
.lang a{
  font-family:var(--display);font-size:12px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--mute);padding:6px 10px;transition:color .15s,background .15s;
}
.lang a.on{background:rgba(240,136,0,.16);color:var(--brand)}
.lang a:hover{color:var(--text)}

/* ссылка «вся таблица» внизу панели */
.panel-more{
  display:block;text-align:center;padding:11px;font-family:var(--display);font-size:12px;
  letter-spacing:.08em;text-transform:uppercase;color:var(--brand);
  border-top:1px solid var(--line);transition:background .15s;
}
.panel-more:hover{background:rgba(240,136,0,.08)}

/* пустое состояние и предупреждение */
.empty{padding:26px 16px;text-align:center;color:var(--mute);font-size:14px;margin:0}
.notice{
  margin:0 0 18px;padding:11px 15px;border:1px solid var(--line-hot);border-radius:4px;
  background:rgba(240,136,0,.07);color:var(--dim);font-size:14px;
}

/* строка бана: время справа */
.ban-time{font-family:var(--mono);font-size:12px;color:var(--mute);white-space:nowrap}

/* лента: текст в одну строку с переносом */
.fi-text{flex:1;min-width:0}

/* страница ошибки */
.err{padding:90px 0}
.err-box{max-width:520px}
.err-code{font-family:var(--mono);font-size:64px;color:var(--brand);line-height:1}
.err-title{font-family:var(--display);text-transform:uppercase;font-size:32px;margin:8px 0 0}

/* подвал: логотип */
.foot-logo{height:20px;width:auto;opacity:.65}

/* печать: незачем тратить краску на тёмный фон */
@media print{
  body{background:#fff;color:#000}
  .top,footer,.hero-cta,.join{display:none}
}

/* ============================================================
   Раздел статистики
   ============================================================ */
.page-head{padding:34px 0 60px}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
td.mono,th.mono{white-space:nowrap}

/* переключатели: сервер и подраздел */
.stats-nav{margin-bottom:20px}
.chips{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:10px}
.chips.sub{margin-bottom:0}
.chip-link{
  font-family:var(--display);font-size:12px;letter-spacing:.05em;text-transform:uppercase;
  padding:7px 12px;border:1px solid var(--line);border-radius:3px;color:var(--mute);
  background:rgba(255,255,255,.02);transition:color .15s,border-color .15s,background .15s;white-space:nowrap;
}
.chip-link:hover{color:var(--text);border-color:var(--line-hot)}
.chip-link.on{background:linear-gradient(180deg,var(--brand-hi),var(--brand));color:#161616;border-color:var(--brand)}
.chip-link .mut{font-family:var(--mono);letter-spacing:0}

/* строка поиска */
.filter-row{display:flex;gap:10px;margin:16px 0 18px;flex-wrap:wrap}
.filter-row input[type=text]{
  flex:1;min-width:220px;background:#0F0F0F;border:1px solid var(--line);border-radius:3px;
  color:var(--text);padding:10px 13px;font-family:var(--mono);font-size:14px;
}
.filter-row input[type=text]:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(240,136,0,.13)}

/* таблица лидеров */
table.ltable td{padding:10px 16px}
td.pos{font-family:var(--mono);color:var(--mute);width:52px;font-variant-numeric:tabular-nums}
td.pos.medal{color:var(--brand);font-weight:700}
.plink{font-weight:600;border-bottom:1px solid transparent;transition:border-color .15s,color .15s}
.plink:hover{color:var(--brand);border-bottom-color:var(--brand)}
.rank-ico{height:14px;width:auto;image-rendering:auto}

/* постраничная навигация */
.pager{display:flex;align-items:center;gap:14px;margin-top:18px;flex-wrap:wrap}
.pager-info{font-family:var(--mono);font-size:13px;color:var(--mute)}

/* ---------- профиль игрока ---------- */
.prof-top{display:grid;grid-template-columns:minmax(260px,1fr) auto;gap:26px;align-items:center;margin-bottom:24px}
.prof-id{display:flex;gap:18px;align-items:center}
.prof-rank{height:42px;width:auto;flex:none}
.prof-name{font-family:var(--display);text-transform:uppercase;font-size:clamp(26px,3.4vw,40px);margin:0;line-height:1.05}
.prof-meta{display:flex;gap:8px;flex-wrap:wrap;align-items:center;font-size:13px;color:var(--mute);margin-top:5px}
.prof-meta .mono{font-size:12px}
.dot-sep{color:var(--line-hot)}
.prof-rankline{margin-top:8px;font-size:14px;display:flex;gap:10px;flex-wrap:wrap;align-items:baseline}
.prof-rankline b{color:var(--brand);font-family:var(--display);text-transform:uppercase;letter-spacing:.04em}
.prof-progress{margin-top:8px;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.prof-progress .bar{width:190px;height:8px}
.prof-progress small{font-size:12px;color:var(--mute)}

.prof-cards{display:grid;grid-template-columns:repeat(3,minmax(96px,1fr));gap:10px}
.pc{
  background:linear-gradient(170deg,rgba(31,31,31,.8),rgba(18,18,18,.9));
  border:1px solid var(--line);border-radius:4px;padding:12px 14px;text-align:center;
}
.pc b{display:block;font-size:22px;line-height:1.1}
.pc span{display:block;font-size:10px;text-transform:uppercase;letter-spacing:.1em;color:var(--mute);margin-top:4px}

/* оружие, карты, части тела */
.wrow,.brow{display:flex;align-items:center;gap:11px;padding:9px 15px;border-bottom:1px solid rgba(44,44,44,.55)}
.wrow:last-child,.brow:last-child{border-bottom:0}
.wpn-ico{height:16px;width:auto;flex:none;opacity:.9}
.wpn-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px}
.wrow .bar,.brow .bar{width:110px;flex:none}
.wrow b,.brow b{font-size:13px;min-width:56px;text-align:right}
.wrow .mut,.brow .mut{font-size:12px;min-width:44px;text-align:right}
.bname{flex:1;font-size:13px;color:var(--dim)}

/* сводка «ключ — значение» */
.kv-list{padding:4px 0}
.kv{display:flex;justify-content:space-between;gap:12px;padding:8px 15px;border-bottom:1px solid rgba(44,44,44,.45);font-size:13px}
.kv:last-child{border-bottom:0}
.kv span{color:var(--mute)}
.kv b{font-size:13px}

/* ---------- график ---------- */
.chart-wrap{padding:14px 16px 6px;overflow-x:auto}
.chart{display:block;min-width:340px}
.c-grid{stroke:#262626;stroke-width:1}
.c-tick{fill:var(--mute);font-family:var(--mono);font-size:10px}
.c-line{fill:none;stroke:var(--brand);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.c-dot{fill:var(--brand);stroke:var(--panel);stroke-width:2}
.c-hit{fill:transparent}
.c-pt:hover .c-dot{r:5;fill:var(--brand-hi)}
.c-pt.last .c-dot{fill:var(--brand-hi)}
.c-value{fill:var(--text);font-family:var(--mono);font-size:12px;font-weight:700}
.chart-table{border-top:1px solid var(--line)}
.chart-table summary{
  cursor:pointer;padding:10px 16px;font-family:var(--display);font-size:12px;
  text-transform:uppercase;letter-spacing:.07em;color:var(--brand);
}
.chart-table summary:hover{background:rgba(240,136,0,.07)}
.chart-table table{min-width:280px}

@media (max-width:900px){
  .prof-top{grid-template-columns:1fr}
  .prof-cards{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:560px){
  .prof-cards{grid-template-columns:repeat(2,1fr)}
  .prof-id{flex-direction:column;align-items:flex-start;gap:10px}
  .wrow .bar,.brow .bar{width:66px}
}

/* окраска показателей: не путать с .pos — это номер позиции в списке */
.val-good{color:var(--live);font-weight:600}
.val-mid{color:#E8B13D;font-weight:600}
.val-bad{color:var(--tt);font-weight:600}

/* ============================================================
   Клан-вары и миксы
   ============================================================ */
.cw-meta{margin:0 0 20px}
.elo{font-family:var(--mono);color:var(--brand);font-weight:700;font-variant-numeric:tabular-nums}

/* уровень: шестиугольник с номером */
.lvl.big{width:56px;height:56px;font-size:22px}

/* счёт матча */
.scoreboard{
  display:grid;grid-template-columns:1fr auto 1fr;gap:18px;align-items:center;
  background:linear-gradient(170deg,rgba(31,31,31,.8),rgba(18,18,18,.92));
  border:1px solid var(--line);border-top:2px solid var(--brand);border-radius:4px;
  padding:22px 24px;margin-bottom:22px;
}
.sb-side{display:flex;flex-direction:column;gap:6px}
.sb-side:last-child{align-items:flex-end;text-align:right}
.sb-side.won .sb-name{color:var(--brand)}
.sb-tag{
  font-family:var(--display);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  padding:2px 7px;border-radius:2px;align-self:flex-start;
}
.sb-side:last-child .sb-tag{align-self:flex-end}
.sb-tag.tt{background:rgba(224,75,110,.16);color:var(--tt);border:1px solid rgba(224,75,110,.4)}
.sb-tag.ct{background:rgba(91,159,224,.16);color:var(--ct);border:1px solid rgba(91,159,224,.4)}
.sb-name{font-family:var(--display);text-transform:uppercase;font-size:clamp(18px,2.4vw,28px);line-height:1.1}
.sb-score{text-align:center;display:flex;flex-direction:column;gap:4px}
.sb-score b{font-family:var(--mono);font-size:clamp(30px,4.4vw,46px);line-height:1;font-variant-numeric:tabular-nums}
.sb-result{font-family:var(--display);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--brand)}
.sb-meta{font-size:12px;color:var(--mute)}

/* составы команд */
.team-panel{margin-bottom:16px}
.team-panel.tt{border-top-color:var(--tt)}
.team-panel.ct{border-top-color:var(--ct)}
.team-panel.tt .panel-h{color:#F2839B}
.team-panel.ct .panel-h{color:#8FBEEE}

/* победившая сторона в списке матчей */
.side-win{color:var(--brand);font-weight:600}

/* значки */
.badge{
  font-family:var(--display);font-size:9px;letter-spacing:.1em;text-transform:uppercase;
  padding:2px 6px;border-radius:2px;border:1px solid var(--line-hot);color:var(--mute);margin-left:6px;
  white-space:nowrap;
}
.badge.ace{background:rgba(240,136,0,.16);color:var(--brand);border-color:var(--brand-lo)}
.badge.praise{background:rgba(240,136,0,.1);color:var(--brand-hi);border-color:var(--brand-lo);margin-left:0}

@media (max-width:700px){
  .scoreboard{grid-template-columns:1fr;text-align:center}
  .sb-side,.sb-side:last-child{align-items:center;text-align:center}
  .sb-side .sb-tag,.sb-side:last-child .sb-tag{align-self:center}
}

/* SteamID под ником в банлисте */
.ban-sid{font-size:11px;margin-top:2px}

/* ============================================================
   Вход и личный кабинет
   ============================================================ */
.login-box{max-width:520px}
.tg-widget{margin:22px 0}
.login-why{list-style:none;padding:0;margin:20px 0 0;display:flex;flex-direction:column;gap:9px}
.login-why li{position:relative;padding-left:18px;color:var(--dim);font-size:14px}
.login-why li::before{content:"";position:absolute;left:0;top:8px;width:6px;height:6px;border-radius:50%;background:var(--brand)}
.acc-photo{border-radius:4px;flex:none}
.acc-cards{grid-template-columns:1.4fr 1fr}
.pc.wide b{font-size:26px}
.acc-note{font-size:12px;margin-top:2px}

/* привилегии в кабинете */
.priv-row{padding:11px 15px;border-bottom:1px solid rgba(44,44,44,.55)}
.priv-row:last-child{border-bottom:0}
.priv-main{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.priv-server{font-size:12px;margin-top:3px}

/* ============================================================
   Зал славы и сравнение игроков
   ============================================================ */
.rec-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(228px,1fr));gap:12px;margin-bottom:26px}
.rec-card{
  background:linear-gradient(168deg,rgba(31,31,31,.78),rgba(18,18,18,.9));
  border:1px solid var(--line);border-radius:4px;padding:14px 16px;
  display:flex;flex-direction:column;gap:5px;transition:border-color .2s;
}
.rec-card:hover{border-color:var(--line-hot)}
.rec-label{font-family:var(--display);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
.rec-name{font-weight:600;font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
a.rec-name:hover{color:var(--brand)}
.rec-value{font-size:21px;color:var(--brand)}

/* сравнение */
.cmp-head{display:grid;grid-template-columns:1fr auto 1fr;gap:14px;align-items:center;margin:18px 0 14px}
.cmp-side{display:flex;flex-direction:column;gap:3px}
.cmp-side.right{align-items:flex-end;text-align:right}
.cmp-name{font-family:var(--display);text-transform:uppercase;font-size:clamp(17px,2.2vw,26px);line-height:1.1}
.cmp-side.won .cmp-name{color:var(--brand)}
.cmp-side .mut{font-size:11px}
.cmp-vs{font-family:var(--display);color:var(--mute);font-size:14px;letter-spacing:.12em}
.cmp-row{display:grid;grid-template-columns:84px 1fr 84px;gap:12px;align-items:center;padding:10px 15px;border-bottom:1px solid rgba(44,44,44,.5)}
.cmp-row:last-child{border-bottom:0}
.cmp-val{font-size:14px;text-align:right;color:var(--dim)}
.cmp-row .cmp-val:last-child{text-align:left}
.cmp-val.better{color:var(--brand);font-weight:700}
.cmp-bars{display:flex;flex-direction:column;gap:5px;min-width:0}
.cmp-label{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--mute);text-align:center}
.cmp-pair{display:flex;gap:5px}
.cmp-bar{flex:1;height:7px;background:var(--ink-deep);border:1px solid var(--line);border-radius:4px;overflow:hidden;display:flex}
.cmp-bar.left{justify-content:flex-end}
.cmp-bar i{display:block;height:100%;background:#4A4A4A}
.cmp-bar i.better{background:linear-gradient(90deg,var(--brand-lo),var(--brand))}

@media (max-width:600px){
  .cmp-row{grid-template-columns:64px 1fr 64px;gap:8px}
  .cmp-val{font-size:12px}
}

/* ============================================================
   Вход по коду
   ============================================================ */
.login-steps{list-style:none;padding:0;margin:22px 0 0;display:flex;flex-direction:column;gap:20px;counter-reset:none}
.login-steps li{display:flex;gap:14px;align-items:flex-start}
.step-num{
  flex:none;width:30px;height:30px;display:grid;place-items:center;
  font-family:var(--display);font-size:15px;color:#161616;
  background:linear-gradient(180deg,var(--brand-hi),var(--brand));border-radius:3px;
}
.login-steps b{font-family:var(--display);text-transform:uppercase;letter-spacing:.05em;font-size:15px}
.login-steps p{margin:5px 0 12px;color:var(--dim);font-size:14px;max-width:46ch}
.code-form{display:flex;gap:10px;flex-wrap:wrap}
.code-form input{
  width:190px;background:#0F0F0F;border:1px solid var(--line);border-radius:3px;color:var(--text);
  padding:11px 14px;font-family:var(--mono);font-size:22px;letter-spacing:.28em;text-align:center;
}
.code-form input:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(240,136,0,.13)}

/* вход одним нажатием */
.btn-big{font-size:15px;padding:13px 24px;margin-top:20px}
.login-hint{color:var(--mute);font-size:13px;margin:10px 0 0;max-width:46ch}
.login-waiting{
  display:flex;align-items:center;gap:9px;margin:14px 0 0;
  color:var(--brand);font-size:13px;font-family:var(--display);
  text-transform:uppercase;letter-spacing:.06em;
}
.login-fallback{margin-top:26px;border-top:1px solid var(--line);padding-top:16px}
.login-fallback summary{
  cursor:pointer;font-family:var(--display);font-size:12px;text-transform:uppercase;
  letter-spacing:.07em;color:var(--mute);
}
.login-fallback summary:hover{color:var(--brand)}
.login-fallback .code-form{margin-top:12px}

/* ============================================================
   Достижения
   ============================================================ */
.ach-top{
  display:grid;grid-template-columns:auto 1fr;gap:22px;align-items:center;
  background:linear-gradient(168deg,rgba(31,31,31,.82),rgba(18,18,18,.92));
  border:1px solid var(--line);border-top:2px solid var(--brand);border-radius:4px;
  padding:18px 22px;margin-bottom:22px;
}
.ach-score{text-align:center}
.ach-score b{display:block;font-size:40px;color:var(--brand);line-height:1}
.ach-score span{font-size:10px;text-transform:uppercase;letter-spacing:.12em;color:var(--mute)}
.ach-progress-line{display:flex;align-items:center;gap:12px}
.ach-progress-line .bar{flex:1;height:9px}
.ach-progress-line b{font-size:14px;min-width:66px;text-align:right}
.ach-rarities{display:flex;flex-wrap:wrap;gap:7px;margin-top:11px}
.rar{
  font-family:var(--display);font-size:10px;letter-spacing:.09em;text-transform:uppercase;
  padding:3px 8px;border-radius:2px;border:1px solid var(--line);color:var(--mute);
}
.rar b{margin-left:4px;font-family:var(--mono)}
.rar.empty{opacity:.42}
.rar.rar-common{border-color:#4A4A4A;color:#B5B5B5}
.rar.rar-rare{border-color:#3F7F5F;color:#5CC98A}
.rar.rar-epic{border-color:#3F5F8F;color:#5B9FE0}
.rar.rar-legendary{border-color:var(--brand-lo);color:var(--brand)}
.rar.rar-mythic{border-color:#8F3F5F;color:#E04B6E}

/* сетка карточек */
.ach-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(188px,1fr));gap:11px;margin-bottom:24px}
.ach-card{
  background:linear-gradient(170deg,rgba(31,31,31,.7),rgba(18,18,18,.9));
  border:1px solid var(--line);border-radius:4px;padding:14px;
  display:flex;flex-direction:column;align-items:center;gap:7px;text-align:center;
  transition:border-color .2s,transform .15s;
}
.ach-card.open{border-color:var(--line-hot)}
.ach-card.open:hover{transform:translateY(-2px)}
.ach-card.closed{opacity:.62}
.ach-card.open.rar-legendary{border-color:var(--brand-lo);box-shadow:0 0 22px rgba(240,136,0,.13)}
.ach-card.open.rar-mythic{border-color:#8F3F5F}
.ach-card.open.rar-epic{border-color:#3F5F8F}
.ach-card.open.rar-rare{border-color:#3F7F5F}
.ach-icon{position:relative;width:72px;height:72px;display:grid;place-items:center}
.ach-icon img{max-width:72px;max-height:72px;width:auto;height:auto}
.ach-card.closed .ach-icon img{filter:grayscale(1) brightness(.5)}
.ach-lock{position:absolute;font-size:20px;opacity:.85}
.ach-name{font-size:13px;line-height:1.25;color:var(--text)}
.ach-card.open.rar-legendary .ach-name{color:var(--brand)}
.ach-card.open.rar-mythic .ach-name{color:#E04B6E}
.ach-card.open.rar-epic .ach-name{color:#5B9FE0}
.ach-card.open.rar-rare .ach-name{color:#5CC98A}
.ach-card.closed .ach-name{color:var(--dim)}
.ach-desc{font-size:11px;color:var(--mute);line-height:1.35}
.ach-card .bar{width:100%;height:6px}
.ach-meta{font-size:10px;color:var(--mute);text-transform:uppercase;letter-spacing:.07em}

/* ============================================================
   Привязка игрового аккаунта
   ============================================================ */
.link-card{
  background:linear-gradient(168deg,rgba(31,31,31,.82),rgba(18,18,18,.92));
  border:1px solid var(--line);border-top:2px solid var(--brand);border-radius:4px;
  padding:16px 20px;margin-bottom:18px;
}
.link-card-head{display:flex;align-items:baseline;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:12px}
.link-card-head b{font-family:var(--display);text-transform:uppercase;letter-spacing:.05em;font-size:15px}
.link-card-head .mut{font-size:12px;margin-left:8px}
.link-unlink{margin-top:12px}
.link-plain{
  background:none;border:0;padding:0;color:var(--mute);font-size:12px;cursor:pointer;
  border-bottom:1px dashed var(--line-hot);transition:color .15s;
}
.link-plain:hover{color:var(--tt)}
.link-invite-text{color:var(--dim);font-size:13px;margin:8px 0 0;line-height:1.45}

.link-row{
  display:flex;align-items:center;gap:14px;padding:11px 15px;flex-wrap:wrap;
  border-bottom:1px solid rgba(44,44,44,.5);
}
.link-row:hover{background:rgba(240,136,0,.05)}
.link-row.me{background:rgba(240,136,0,.09);box-shadow:inset 3px 0 0 var(--brand)}
.link-row .btn{padding:7px 13px;font-size:12px}
.link-src{font-size:12px;color:var(--mute);font-family:var(--mono)}
.link-current{font-family:var(--display);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--brand)}

@media (max-width:640px){
  .link-row{gap:8px}
  .link-row .nick{flex:1 1 100%}
  .link-row .stat{min-width:0}
}

/* ============================================================
   Страница сервера
   ============================================================ */
/* имя сервера в таблице ведёт на страницу «кто сейчас играет» */
.srv-link{border-bottom:1px solid transparent;transition:color .15s,border-color .15s}
.srv-link:hover{color:var(--brand);border-bottom-color:var(--brand-lo)}

.srv-hero{
  display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
  background:linear-gradient(168deg,rgba(31,31,31,.82),rgba(18,18,18,.92));
  border:1px solid var(--line);border-top:2px solid var(--brand);border-radius:4px;
  padding:18px 22px;margin-bottom:20px;
}
.srv-hero-main{flex:1;min-width:240px}
.srv-hero-slots{display:flex;align-items:baseline;gap:10px}
.srv-hero-slots b{font-size:32px;color:var(--text);line-height:1}
.srv-hero-slots span{font-size:11px;text-transform:uppercase;letter-spacing:.12em;color:var(--mute)}
/* .bar рассчитан на flex-строку таблицы, здесь ширину задаём явно */
.srv-hero-main .bar{display:block;width:100%;height:9px;margin-top:12px}
.srv-hero-side{display:flex;align-items:center;gap:12px;flex-wrap:wrap}

/* ============================================================
   Подсказка при копировании адреса сервера
   ============================================================ */
.toast{
  position:fixed;left:50%;bottom:26px;transform:translate(-50%,20px);z-index:80;
  max-width:min(520px,calc(100vw - 28px));
  background:linear-gradient(168deg,rgba(31,31,31,.98),rgba(14,14,14,.99));
  border:1px solid var(--line-hot);border-top:2px solid var(--brand);border-radius:4px;
  padding:14px 18px;box-shadow:0 22px 60px rgba(0,0,0,.7);
  opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;
}
.toast.on{opacity:1;transform:translate(-50%,0)}
.toast b{
  display:block;font-family:var(--display);text-transform:uppercase;letter-spacing:.08em;
  font-size:12px;color:var(--brand);
}
.toast code{
  display:block;font-family:var(--mono);font-size:15px;color:var(--text);
  margin:7px 0;word-break:break-all;
}
.toast span{display:block;font-size:12px;color:var(--dim);line-height:1.4}

/* каталог для гостя: не «закрыто», а «вот что можно получить» */
.ach-card.neutral{opacity:.9}
.ach-card.neutral .ach-icon img{filter:grayscale(.55) brightness(.85)}
.ach-card.neutral:hover{border-color:var(--line-hot);transform:translateY(-2px)}
.ach-card.neutral:hover .ach-icon img{filter:none}

/* приглашение войти над каталогом */
.ach-guest{
  display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;
  background:linear-gradient(140deg,rgba(240,136,0,.1),rgba(24,24,24,.85));
  border:1px solid var(--line-hot);border-radius:4px;padding:16px 20px;margin-bottom:22px;
}
.ach-guest b{display:block;font-family:var(--display);text-transform:uppercase;letter-spacing:.05em;font-size:16px}
.ach-guest span{display:block;color:var(--dim);font-size:13px;margin-top:5px;max-width:64ch}

/* рейтинг по наградам */
.ach-board{margin-bottom:26px}
.ach-row{
  display:flex;align-items:center;gap:12px;padding:9px 15px;
  border-bottom:1px solid rgba(44,44,44,.5);transition:background .15s;
}
.ach-row:hover{background:rgba(240,136,0,.05)}
.ach-row.me{background:rgba(240,136,0,.1);box-shadow:inset 3px 0 0 var(--brand)}
/* своя строка, оторванная от списка: показываем, что между ней и топом разрыв */
.ach-row.apart{border-top:1px dashed var(--line-hot)}
.ach-row .you{
  font-style:normal;font-family:var(--display);font-size:10px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--brand);margin-left:8px;
}
.ach-row-medals{display:flex;gap:4px;flex:none;min-width:90px;justify-content:flex-end}
.ach-row-medals img{width:26px;height:26px;border-radius:50%;padding:2px;border:1px solid var(--line)}
.ach-row-medals img.rar-legendary{border-color:var(--brand-lo)}
.ach-row-medals img.rar-mythic{border-color:#8F3F5F}
.ach-row-medals img.rar-epic{border-color:#3F5F8F}
.ach-row-medals img.rar-rare{border-color:#3F7F5F}
.ach-row .stat{min-width:96px}
.ach-row .stat .mut{font-size:11px}

@media (max-width:640px){
  .ach-row{gap:9px;padding:9px 11px}
  .ach-row-medals{min-width:0}
  .ach-row-medals img:nth-child(3){display:none}
  .ach-row .stat{min-width:0;font-size:12px}
  .ach-row .stat .mut{display:none}
}

/* блок наград в кабинете */
.ach-teaser{
  display:block;background:linear-gradient(140deg,rgba(240,136,0,.1),rgba(24,24,24,.85));
  border:1px solid var(--line-hot);border-radius:4px;padding:15px 18px;margin-bottom:18px;
  transition:border-color .2s;
}
.ach-teaser:hover{border-color:var(--brand)}
.ach-teaser-head{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.ach-teaser-head b{font-family:var(--display);text-transform:uppercase;letter-spacing:.05em;font-size:15px;color:var(--brand)}
.ach-teaser-head .mut{font-size:12px;font-family:var(--mono)}
.ach-teaser-row{display:flex;align-items:center;gap:8px;margin-top:11px;flex-wrap:wrap}
.ach-teaser-row img{width:46px;height:46px}
.ach-more{font-family:var(--mono);font-size:13px;color:var(--mute)}

@media (max-width:820px){
  .ach-top{grid-template-columns:1fr;gap:14px}
  .ach-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:8px}
  .ach-icon,.ach-icon img{width:56px;height:56px;max-width:56px;max-height:56px}
}

/* активный раздел в меню виден и по цвету, и по подчёркиванию */
.nav a.on{position:relative}
.nav a.on::after{
  content:"";position:absolute;left:10px;right:10px;bottom:-1px;height:2px;
  background:var(--brand);border-radius:2px;
}
.btn-ghost.on{border-color:var(--brand);color:var(--brand)}

/* кнопка «показать все» выглядит как ссылка внизу панели */
button.panel-more{width:100%;background:none;border:0;border-top:1px solid var(--line);cursor:pointer;font-family:var(--display)}

/* ============================================================
   Переключатели: выбор сервера, табы, сортировка
   ============================================================ */
.stats-nav{margin-bottom:22px}

/* выбор сервера — вторичный уровень, поэтому мелкие пилюли */
.srv-pick{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.srv-pick-label{
  font-family:var(--display);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);
}
.srv-pick-list{display:flex;gap:6px;flex-wrap:wrap}
.pill{
  font-size:12px;padding:5px 11px;border-radius:20px;border:1px solid var(--line);
  color:var(--mute);transition:color .15s,border-color .15s,background .15s;white-space:nowrap;
}
.pill:hover{color:var(--text);border-color:var(--line-hot)}
.pill.on{color:var(--brand);border-color:var(--brand);background:rgba(240,136,0,.09)}

/* подразделы — табы с подчёркиванием, как в приложениях */
.tabs{
  display:flex;gap:2px;overflow-x:auto;border-bottom:1px solid var(--line);
  -webkit-overflow-scrolling:touch;scrollbar-width:none;
}
.tabs::-webkit-scrollbar{display:none}
.tab{
  position:relative;flex:none;padding:10px 14px;
  font-family:var(--display);font-size:13px;letter-spacing:.05em;text-transform:uppercase;
  color:var(--mute);transition:color .15s;white-space:nowrap;
}
.tab:hover{color:var(--text)}
.tab.on{color:var(--brand)}
.tab.on::after{
  content:"";position:absolute;left:8px;right:8px;bottom:-1px;height:2px;background:var(--brand);
}

/* сортировка — самый нижний уровень, приглушённая */
.sorts{display:flex;flex-wrap:wrap;gap:6px;margin:16px 0 14px;align-items:center}
.sorts-label{
  font-family:var(--display);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--mute);margin-right:4px;
}
.sort-link{
  font-size:12px;padding:5px 10px;border-radius:3px;color:var(--mute);
  border:1px solid transparent;transition:color .15s,background .15s,border-color .15s;white-space:nowrap;
}
.sort-link:hover{color:var(--text);background:rgba(255,255,255,.03)}
.sort-link.on{color:#161616;background:linear-gradient(180deg,var(--brand-hi),var(--brand));border-color:var(--brand)}

/* ============================================================
   Фоновые изображения секций
   ============================================================ */
/*
 * Фотография из игры под заливкой-«шторкой». Заливка не равномерная:
 * слева, где текст, она почти непрозрачная, а к правому краю сходит на нет,
 * чтобы картинку было видно как картинку. Прошлый вариант (плотная заливка
 * по всей ширине поверх паттерна) читался как серое пятно.
 */
.has-bg,.section-bg{position:relative;isolation:isolate}
.has-bg::before,.section-bg::before{
  content:"";position:absolute;inset:0;z-index:-2;
  background-image:var(--bg);background-size:cover;background-repeat:no-repeat;
  opacity:1;
}
.has-bg::after,.section-bg::after{content:"";position:absolute;inset:0;z-index:-1}

/* первый экран: бойцы стоят справа, туда и смотрим.
   scale(1.08) — у исходного кадра по краям тёмная рамка, увеличение
   выводит её за границы блока (.hero с overflow:hidden). */
.hero.has-bg::before{background-position:82% center;transform:scale(1.08)}
.hero.has-bg::after{
  background:
    linear-gradient(96deg,
      var(--ink) 0%, rgba(18,18,18,.97) 26%, rgba(18,18,18,.82) 42%,
      rgba(18,18,18,.42) 60%, rgba(18,18,18,.12) 78%, rgba(18,18,18,.34) 100%),
    linear-gradient(180deg, rgba(18,18,18,.55) 0%, transparent 26%, transparent 58%, var(--ink) 100%);
}

/*
 * Полоса «скачать». Карточки здесь со своей тёмной подложкой, так что
 * фотографию видно в полях и в промежутках между ними — заливку держим
 * лёгкой, плотнее только слева, под заголовком.
 */
.section-bg::before{background-position:42% 42%}
.section-bg::after{
  background:
    linear-gradient(94deg, var(--ink) 0%, rgba(18,18,18,.9) 22%, rgba(18,18,18,.52) 52%, rgba(18,18,18,.58) 100%),
    linear-gradient(180deg, var(--ink) 0%, rgba(18,18,18,.32) 26%, rgba(18,18,18,.48) 74%, var(--ink) 100%);
}
/* карточки поверх фотографии должны оставаться читаемыми */
.section-bg .dl-card{background:linear-gradient(168deg,rgba(24,24,24,.92),rgba(14,14,14,.96))}
/* подпись секции попадает на светлый участок кадра */
.section-bg .sec-note{color:#CFC8C0;text-shadow:0 1px 4px rgba(0,0,0,.85)}
.section-bg{margin-top:14px;border-top:1px solid var(--line)}

/* подпись под заголовком секции: без неё было непонятно, что за блок */
.sec-lead{margin:7px 0 0;color:var(--dim);font-size:14px;max-width:52ch}
.sec-head{align-items:flex-start}

/* кнопка «показать свободные серверы» */
.srv-toggle{
  display:block;width:100%;margin:14px 0 0;padding:11px;
  background:rgba(255,255,255,.02);border:1px solid var(--line);border-radius:4px;
  color:var(--mute);font-family:var(--display);font-size:12px;letter-spacing:.07em;
  text-transform:uppercase;cursor:pointer;transition:color .15s,border-color .15s;
}
.srv-toggle:hover{color:var(--brand);border-color:var(--line-hot)}
.srv-idle{margin-top:12px}

/* история операций списком: в узкой колонке таблица обрезала суммы */
.op-row{
  display:flex;align-items:flex-start;justify-content:space-between;gap:14px;
  padding:11px 15px;border-bottom:1px solid rgba(44,44,44,.5);
}
.op-row:last-of-type{border-bottom:0}
.op-main{min-width:0;flex:1}
.op-main b{font-size:14px;font-weight:600;display:block}
.op-note{font-size:12px;color:var(--mute);display:block;margin-top:2px}
.op-side{text-align:right;flex:none;display:flex;flex-direction:column;gap:2px}
.op-side b{font-size:15px}
.op-when{font-size:11px;color:var(--mute)}
.op-after{font-size:10px;color:var(--mute);text-transform:uppercase;letter-spacing:.06em}