/* ==========================================================================
   BLITZ ARENA — единая дизайн-система
   Один источник правды для всех страниц. Никаких !important, никаких
   переопределений :root на отдельных страницах.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. Шрифты и переходы между страницами
   -------------------------------------------------------------------------- */
/* Шрифты лежат на своём сервере: Google Fonts из России отвечает с задержкой,
   а его таблица стилей блокировала первую отрисовку каждой новой сессии.
   Inter и Manrope вариативные — один файл на алфавит закрывает все начертания. */
@font-face{font-family:"Inter";font-style:normal;font-weight:400 800;font-display:swap;
  src:url(assets/fonts/inter-cyrillic.woff2) format("woff2");
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Inter";font-style:normal;font-weight:400 800;font-display:swap;
  src:url(assets/fonts/inter-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Manrope";font-style:normal;font-weight:600 800;font-display:swap;
  src:url(assets/fonts/manrope-cyrillic.woff2) format("woff2");
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Manrope";font-style:normal;font-weight:600 800;font-display:swap;
  src:url(assets/fonts/manrope-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* Переход между страницами — короткая смена кадра вместо белой вспышки.
   Боковая панель одна на всех страницах, поэтому остаётся на месте. */
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:.12s}
.sidebar{view-transition-name:sidebar}
@media(prefers-reduced-motion:reduce){@view-transition{navigation:none}}

/* --------------------------------------------------------------------------
   1. Токены
   -------------------------------------------------------------------------- */
:root{
  /* Поверхности: тёплый нейтральный тёмный вместо синеватого.
     Шаг между уровнями небольшой — глубина за счёт границ, а не контраста. */
  --bg:#0e1013;
  --bg-elev:#121519;
  --surface:#16191e;
  --surface-2:#1b1f25;
  --surface-3:#21262d;
  --line:#2b313b;
  --line-strong:#3d4553;

  /* Текст: мягкий белый, не чисто белый — так он не режет глаз на тёмном */
  --text:#e6e8ec;
  --text-2:#a2a8b3;
  --text-3:#6d7480;

  /* Акцент приглушён: прежний #4f8cff был слишком насыщенным и «звенел»
     на каждой ссылке. Этот спокойнее, но остаётся заметным. */
  --accent:#5d95ec;
  --accent-hover:#84b1f7;
  --accent-soft:#5d95ec24;
  --accent-line:#5d95ec66;
  --accent-glow:#5d95ec2e;

  /* Счётчики — не показатель, шкалы у них нет, но и теряться они не должны.
     Янтарный стоит в стороне от сине-зелёно-красной шкалы и ни с чем
     не путается. */
  --count:#d9a05b;

  /* Полевик: тёплый золотистый — цвет командной роли. Стоит в стороне и от
     синего акцента, и от сиреневого первого тира, поэтому ни с рейтингом,
     ни с дивизионом не путается. */
  --role:#d2a24d;
  --role-soft:#d2a24d24;

  /* Шкала показателей в три цвета: выше среднего — фиолетовый, средний —
     синий, ниже среднего — красный. Каждый цвет в двух насыщенностях:
     ступеней по-прежнему шесть, но читаются они с одного взгляда.
     Ниже — исходные --r-* оставлены как есть: на них завязаны медали,
     статусы и кнопки, к шкале показателей они отношения не имеют. */
  --grade-high:#bb86f0;
  --grade-mid:#5d95ec;
  --grade-low:#e4636f;

  /* Серебро — для объёма выборки. Число боёв не показатель и цвета шкалы
     носить не должно: своя, нейтральная пара оттенков отделяет «сколько
     сыграно» от «насколько хорошо». */
  --silver:#dfe4ec;
  --silver-dim:#98a1ae;

  --r-red:#e4636f;
  --r-orange:#d98a8a;
  --r-yellow:#86c9a6;
  --r-green:#4ec48c;
  --r-blue:#5d95ec;
  --r-purple:#7ab6ff;

  /* Исход боя */
  --win:#4ec48c;
  --loss:#e46b78;
  --draw:#d8b455;

  /* Нации — ещё тише рейтинга, это лишь метка на карточке техники */
  --nation-0:#c07a7a;
  --nation-1:#8d949f;
  --nation-2:#6b92bd;
  --nation-3:#bfa06a;
  --nation-4:#84a8bf;
  --nation-5:#79ab90;
  --nation-6:#c08d80;
  --nation-7:#9b82c4;
  --nation-8:#6fb0ab;

  /* Скругления */
  --r-sm:6px;
  --r-md:8px;
  --r-lg:12px;
  --r-xl:16px;
  --r-full:999px;

  /* Тени */
  --shadow-1:0 1px 2px #0006;
  --shadow-2:0 8px 24px #00000059;
  --shadow-3:0 20px 50px #0000007a;

  /* Типографика */
  --font:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  /* Заголовки — Manrope: та же геометрия, что у Inter, но с более округлыми
     формами и плотнее в тяжёлых начертаниях. Данные и таблицы остаются на
     Inter: у него ровные табличные цифры. */
  --font-display:"Manrope",var(--font);
  --fs-xs:12px;
  --fs-sm:13px;
  --fs-md:15px;
  --fs-lg:17px;
  --fs-xl:21px;
  --fs-2xl:28px;
  --fs-3xl:40px;

  /* Размеры каркаса */
  --sidebar-w:252px;
  --topbar-h:68px;
  --content-max:1720px;
}

/* --------------------------------------------------------------------------
   2. База
   -------------------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}

/* Любое собственное display (flex, grid) перебивает встроенное правило для
   атрибута hidden, и скрытые блоки оставались на виду. Один общий запрет
   избавляет от этой ловушки на всех страницах разом. */
[hidden]{display:none!important}

html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  min-height:100vh;
  /* Два едва заметных пятна вместо плоской заливки: фон перестаёт быть
     мёртвым, но остаётся спокойным — пятна ниже 4% и не спорят с текстом.
     Сплошной цвет задан отдельно, он же работает запасным вариантом. */
  background:var(--bg);
  background-image:
    radial-gradient(1000px 600px at 10% -10%, #5d95ec1f, transparent 62%),
    radial-gradient(860px 540px at 100% 0%, #a887e016, transparent 64%);
  background-attachment:fixed;
  color:var(--text);
  font-family:var(--font);
  font-size:var(--fs-md);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4{margin:0;font-family:var(--font-display);font-weight:700;letter-spacing:-.022em;line-height:1.25}
h1{font-size:var(--fs-2xl)}
h2{font-size:var(--fs-xl)}
h3{font-size:var(--fs-lg)}
p{margin:0}

a{color:var(--accent);text-decoration:none}
a:hover{color:var(--accent-hover)}

/* Все числовые показатели — моноширинные цифры, чтобы колонки не «плясали» */
.num,td,th,.kpi-value,.stat-value,.rating-value,.tank-score{font-family:var(--font);font-variant-numeric:tabular-nums}

:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--line-strong);border-radius:var(--r-full);border:2px solid var(--bg)}
::-webkit-scrollbar-thumb:hover{background:#3d4a60}

/* --------------------------------------------------------------------------
   3. Каркас: сайдбар + топбар + контент
   -------------------------------------------------------------------------- */
.app{display:grid;grid-template-columns:var(--sidebar-w) minmax(0,1fr);min-height:100vh}

.sidebar{
  display:flex;
  flex-direction:column;
  padding:20px 12px;
  background:linear-gradient(180deg,#ffffff06,transparent 30%),var(--bg-elev);
  border-right:1px solid var(--line);
}

.brand{
  display:flex;
  align-items:center;
  gap:9px;
  padding:4px 12px 26px;
  color:var(--text);
  font-family:var(--font-display);
  font-size:var(--fs-xl);
  font-weight:800;
  letter-spacing:.07em;
}
.brand:hover{color:var(--text)}
.brand span{color:var(--accent)}
/* Знак логотипа: шестиугольник арены с молнией. Размер задан в em,
   поэтому он одинаково садится в любую шапку, какой бы ни был кегль. */
.brand-mark{display:block;flex:none;width:1.45em;height:1.45em;line-height:0}
.brand-mark svg{display:block;width:100%;height:100%}
.brand-text{white-space:nowrap}

.nav-group{
  padding:0 12px 8px;
  color:var(--text-3);
  font-size:var(--fs-xs);
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.nav-group:not(:first-of-type){margin-top:22px}

.side-nav{display:flex;flex-direction:column;gap:2px}
.side-nav a{
  position:relative;
  display:flex;
  align-items:center;
  gap:11px;
  padding:9px 12px;
  border-radius:var(--r-sm);
  color:var(--text-2);
  font-weight:500;
  transition:background .15s,color .15s;
}
/* Своё display перебивает встроенное [hidden] — без этого пункт «Моя команда»
   висел в меню и у гостя, и у игрока без команды */
.side-nav a[hidden]{display:none}
.side-nav a:hover{background:var(--surface-2);color:var(--text)}
.side-nav a.active{background:linear-gradient(90deg,var(--accent-glow),transparent 70%),var(--surface-2);color:var(--text);font-weight:600}
.side-nav a.active::before{
  content:"";
  position:absolute;
  left:0;top:7px;bottom:7px;
  width:2px;
  border-radius:var(--r-full);
  background:var(--accent);
}
/* Иконки меню — инлайновый SVG: одинаковая толщина линий и точный размер */
.side-nav i{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  width:20px;
  height:20px;
  font-style:normal;
  color:var(--text-3);
  transition:color .15s;
}
.side-nav i svg{display:block;width:20px;height:20px}
.side-nav a:hover i,.side-nav a.active i{color:var(--accent)}

/* Профиль стоит первым пунктом и выделен рамкой: раньше он прижимался
   к низу сайдбара, и на длинной странице его было не видно. */
.side-nav-account{margin-bottom:20px;padding-bottom:16px;border-bottom:1px solid var(--line)}
.side-nav-account a{background:var(--surface);border:1px solid var(--line)}
.side-nav-account a:hover{border-color:var(--accent-line);background:var(--surface-2)}
.side-nav-account a.active{border-color:var(--accent-line)}

/* «О проекте» — не рабочий раздел, поэтому стоит отдельно от остальных
   пунктов: под чертой, тем же разделителем, что отбивает профиль сверху.
   К самому низу не прижимаем — сайдбар тянется на всю высоту страницы,
   и на длинной странице пункт уехал бы из вида. */
.side-nav-about{margin-top:22px;padding-top:14px;border-top:1px solid var(--line)}
.side-nav-about a{color:var(--text-3)}

.main{display:flex;flex-direction:column;min-width:0}

.topbar{
  position:sticky;top:0;z-index:20;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  height:var(--topbar-h);
  padding:0 28px;
  background:linear-gradient(180deg,#151a22e6,#0e1013e6);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}

.crumb{color:var(--text-3);font-size:var(--fs-md)}
.crumb a{color:var(--text-3)}
.crumb a:hover{color:var(--text-2)}
.crumb strong{color:var(--text);font-weight:600}
.crumb .sep{margin:0 6px;color:var(--line-strong)}

.top-actions{display:flex;align-items:center;gap:12px}
/* Своя статистика под рукой на каждой странице */
/* Значок сообщений рядом с профилем. Непрочитанные показывает не серой
   цифрой, а живой точкой: счётчик пульсирует кольцом, а на новое письмо
   конверт один раз подпрыгивает. */
.top-msg{position:relative;display:grid;place-items:center;flex:none;width:36px;height:36px;
  border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface);color:var(--text-2);
  transition:border-color .15s,color .15s,background .15s}
.top-msg:hover{border-color:var(--accent-line);background:var(--surface-2);color:var(--accent)}
.top-msg svg{width:19px;height:19px}
.top-msg.has-new{border-color:var(--accent-line);color:var(--accent)}
.top-msg b{position:absolute;top:-6px;right:-6px;min-width:18px;height:18px;padding:0 5px;
  border:2px solid var(--bg-elev);border-radius:var(--r-full);
  background:linear-gradient(180deg,#ff7b86,#e4636f);color:#fff;font-size:10px;font-weight:800;
  font-variant-numeric:tabular-nums;line-height:14px;text-align:center;box-shadow:0 2px 10px #e4636f73}
/* Кольцо, расходящееся от счётчика: тихий сигнал, что письма ждут */
.top-msg.has-new b::after{content:"";position:absolute;inset:-2px;border-radius:inherit;
  border:2px solid #e4636f;animation:msgRing 2.4s ease-out infinite}
.top-msg.ping{animation:msgPop .5s cubic-bezier(.3,1.4,.5,1)}
@keyframes msgRing{0%{opacity:.7;transform:scale(1)}70%,100%{opacity:0;transform:scale(2.1)}}
@keyframes msgPop{0%,100%{transform:translateY(0)}35%{transform:translateY(-3px) scale(1.06)}}
@media(prefers-reduced-motion:reduce){.top-msg.has-new b::after,.top-msg.ping{animation:none}}
/* Значок новостей на пункте меню: то же красное пятно, что и у писем,
   но прижатое к правому краю строки, а не висящее над иконкой */
.side-nav a .nav-badge{margin-left:auto;min-width:18px;height:18px;padding:0 5px;border-radius:var(--r-full);
  background:linear-gradient(180deg,#ff7b86,#e4636f);color:#fff;font-size:10px;font-weight:800;
  font-variant-numeric:tabular-nums;line-height:18px;text-align:center;box-shadow:0 2px 10px #e4636f73}
.side-nav a .nav-badge[hidden]{display:none}
.side-nav a.has-new{color:var(--text)}
.nav-badge.ping{animation:msgPop .5s cubic-bezier(.3,1.4,.5,1)}
@media(prefers-reduced-motion:reduce){.nav-badge.ping{animation:none}}

.top-stats{display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
.top-stats svg{width:15px;height:15px;flex:none}
@media(max-width:900px){.top-stats span{display:none}}

/* margin-inline:auto — без него на широком мониторе страница прижималась
   влево, а справа оставалось пустое поле в треть экрана */
.content{flex:1;width:100%;max-width:var(--content-max);margin-inline:auto;padding:26px 32px 64px}

/* Шапка страницы. Раньше это был просто жирный текст и серая строка под
   ним, подчёркнутые линией во всю ширину — читалось как черновик. Теперь у
   заголовка есть акцентная засечка слева и градиентная заливка, а подпись
   набрана как подпись: мельче, разреженно, прописными. */
/* Шапка раздела. Раньше здесь была синяя подсветка с градиентным текстом:
   пятно обрывалось посреди заголовка, а разрядка в подписи растягивала её
   на две строки. Теперь — набор: крупный заголовок, спокойная подпись и
   тонкая линия, отделяющая шапку от содержимого. Акцент остался, но стал
   короткой чертой под заголовком, а не заливкой. */
.page-head{
  position:relative;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:18px;
  margin-bottom:22px;
  padding-bottom:16px;
  border-bottom:1px solid var(--line);
}
/* Акцентный штрих под заголовком убран со всех страниц: он ничего не значил
   и спорил с содержимым. На странице матча этот же псевдоэлемент работает
   цветной полосой слева и включается там отдельно. */
.page-head::before{
  content:"";
  display:none;
  position:absolute;
  left:0;
  bottom:-1px;
  width:46px;
  height:2px;
  border-radius:var(--r-full);
  background:linear-gradient(90deg,var(--accent),transparent);
}
.page-head > div{min-width:0}
.page-head h1{
  font-size:clamp(26px,2.6vw,34px);
  font-weight:800;
  letter-spacing:-.032em;
  line-height:1.1;
}
.page-head p{
  margin-top:6px;
  max-width:62ch;
  color:var(--text-3);
  font-size:var(--fs-sm);
  font-weight:450;
  letter-spacing:0;
  line-height:1.45;
}
.page-head p:empty{display:none}
/* Кнопки в шапке не должны прыгать по высоте вслед за заголовком */
.page-head .btn,.page-head .seg{flex:none}

/* ВОССТАНОВЛЕНО. Этот кусок стилей был утерян при правке и возвращён из
   разобранной браузером таблицы: правила и значения те же, но авторские
   комментарии внутри блока не сохранились. */
/* --------------------------------------------------------------------------
   4. Подвал и секции
   -------------------------------------------------------------------------- */
/* Подвал: разделы сайта и одна строка о проекте. Собирается в app.js. */
.footer{margin-top:34px;padding:0 28px 26px;color:var(--text-3);font-size:var(--fs-xs);border-top:1px solid var(--line)}
.foot-top{display:grid;grid-template-columns:minmax(0,1.6fr) repeat(2,minmax(0,1fr));gap:28px;padding:26px 0 22px}
.foot-brand{min-width:0;max-width:44ch}
.foot-logo{display:inline-flex;align-items:center;gap:9px;color:var(--text)}
.foot-logo .brand-mark{width:26px;height:26px;color:var(--accent)}
.foot-logo .brand-mark svg{width:100%;height:100%;display:block}
.foot-logo .brand-text{font-family:var(--font-display);font-size:var(--fs-md);font-weight:800;letter-spacing:.02em}
.foot-logo .brand-text span{color:var(--accent)}
.foot-brand p{margin-top:10px;color:var(--text-3);font-size:var(--fs-xs);line-height:1.6}
.foot-about{display:inline-flex;align-items:center;gap:6px;margin-top:12px;color:var(--text-2);
  font-size:var(--fs-sm);font-weight:600;transition:color .15s,gap .15s}
.foot-about:hover{color:var(--accent);gap:9px}
.foot-col{display:flex;flex-direction:column;gap:8px;min-width:0}
.foot-col b{margin-bottom:2px;color:var(--text-2);font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.foot-col a{color:var(--text-3);font-size:var(--fs-sm);transition:color .15s}
.foot-col a:hover{color:var(--accent)}
.foot-bottom{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;
  padding-top:16px;border-top:1px solid var(--line)}
@media(max-width:820px){.foot-top{grid-template-columns:minmax(0,1fr);gap:22px;padding-bottom:18px}}
@media(max-width:640px){.footer{padding:0 16px 20px}}
.section { margin-top: 20px; }
.section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.section-head h2 { font-size: var(--fs-lg); font-weight: 700; }
/* --------------------------------------------------------------------------
   5. Поиск и подсказки
   -------------------------------------------------------------------------- */
.search-box { position: relative; }
.search { width: 290px; padding: 9px 13px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); color: var(--text); font: inherit; outline: none; transition: border-color 0.15s, box-shadow 0.15s; }
.search::placeholder { color: var(--text-3); }
.search:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.suggestions { position: absolute; z-index: 40; top: calc(100% + 6px); left: 0px; width: 100%; min-width: 230px; padding: 4px; background: var(--surface-2); border: 1px solid var(--line-strong); border-radius: var(--r-md); box-shadow: var(--shadow-3); overflow: hidden; }
.suggestions[hidden] { display: none; }
.suggestions a, .suggestions button { display: block; width: 100%; padding: 8px 10px; border: 0px; border-radius: var(--r-sm); background: none; color: var(--text-2); font: inherit; text-align: left; cursor: pointer; }
.suggestions a:hover, .suggestions button:hover { background: var(--accent-soft); color: var(--text); }
.suggestions .hit { display: flex; align-items: center; gap: 10px; }
/* Эмблему вписываем целиком, а не кадрируем: широкие знаки (400×223 и
   похожие) при cover обрезались до средней полоски и переставали читаться */
.hit-logo { display: grid; place-items: center; overflow: hidden; flex: 0 0 auto; width: 26px; height: 26px; border-radius: var(--r-sm); background: var(--surface-3); object-fit: contain; }

/* Подложка под логотипом нужна только буквам-заглушке: у настоящей эмблемы
   она превращалась в серый квадрат вокруг прозрачной картинки. Там, где
   внутри лежит картинка, фон убираем — знак ложится прямо на страницу. */
.team-mark:has(img),.team-logo:has(img),.team-hero-logo:has(img),.hit-logo:has(img){
  background:none;
}
.hit-logo-text { color: var(--text-3); font-size: 10px; font-weight: 700; }
.hit-body { min-width: 0px; }
.hit-body b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); font-weight: 600; }
.hit-body small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-3); font-size: var(--fs-xs); }
/* --------------------------------------------------------------------------
   6. Аватары
   -------------------------------------------------------------------------- */
.avatar { display: grid; place-items: center; overflow: hidden; flex-shrink: 0; width: 32px; height: 32px; border-radius: var(--r-full); background: var(--surface-3); color: var(--text-2); font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.02em; }
.avatar img { display: block; width: 100%; height: 100%; object-fit: cover; }
.avatar-lg { width: 76px; height: 76px; border-radius: var(--r-xl); font-size: var(--fs-2xl); }
.avatar-xl { width: 96px; height: 96px; border-radius: var(--r-xl); font-size: var(--fs-3xl); }
/* --------------------------------------------------------------------------
   7. Карточки и сетки
   -------------------------------------------------------------------------- */
.card { padding: 22px; background: linear-gradient(180deg,#ffffff07,transparent 42%),var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-1); }
.card-pad-lg { padding: 26px; }
/* Шапка карточки без черты и акцентного штриха: у карточки уже есть рамка,
   а списки внутри разделены собственными линиями — две черты подряд читались
   как мусор. Заголовок держится весом, а не подчёркиванием. */
.card-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 12px; margin-bottom: 14px; min-width: 0px; }
.card-head > .status { min-width: 0px; overflow-wrap: anywhere; }
.card-head h2 { font-size: var(--fs-lg); font-weight: 700; }
.card-head a, .section-head a { display: inline-flex; align-items: center; gap: 6px; color: var(--text-3); font-size: var(--fs-sm); font-weight: 600; transition: color 0.15s, gap 0.15s; }
.card-head a:hover, .section-head a:hover { color: var(--accent); gap: 9px; }
.grid { display: grid; gap: 14px; }
.grid-main { grid-template-columns: minmax(0px, 1.55fr) minmax(270px, 0.75fr); }
.grid-2 { grid-template-columns: repeat(2, minmax(0px, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0px, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0px, 1fr)); }
/* --------------------------------------------------------------------------
   8. Плитки показателей
   -------------------------------------------------------------------------- */
.kpi-grid { display: grid; grid-template-columns: repeat(4, minmax(0px, 1fr)); gap: 12px; }
.kpi { position: relative; overflow: hidden; padding: 18px 19px; background: linear-gradient(180deg,#ffffff08,transparent 46%),var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); }
.kpi::before { content: ""; position: absolute; left: 0px; right: 0px; top: 0px; height: 2px; background: linear-gradient(90deg,transparent,var(--accent) 35%,var(--accent-line) 70%,transparent); }
.kpi-label { color: var(--text-3); font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; }
.kpi-value { margin-top: 8px; font-size: var(--fs-2xl); font-weight: 650; letter-spacing: -0.03em; line-height: 1.1; }
.kpi-value small { font-size: var(--fs-lg); font-weight: 500; color: var(--text-3); }
.kpi-meta { margin-top: 6px; color: var(--text-3); font-size: var(--fs-xs); }
/* --------------------------------------------------------------------------
   9. Кнопки и переключатели
   -------------------------------------------------------------------------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 9px 16px; border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: var(--surface-2); color: var(--text-2); font: inherit; font-weight: 500; cursor: pointer; transition: border-color 0.15s, background 0.15s, color 0.15s; }
.btn:hover { border-color: var(--accent); background: var(--surface-3); color: var(--text); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn:disabled:hover { border-color: var(--line-strong); background: var(--surface-2); color: var(--text-2); }
.btn-primary { border-color: transparent; background: linear-gradient(180deg,var(--accent-hover),var(--accent)); color: rgb(14, 16, 19); font-weight: 650; }
.btn-primary:hover { border-color: transparent; background: linear-gradient(180deg,#8fb6ef,var(--accent-hover)); color: rgb(8, 17, 31); }
.btn-ghost { border-color: transparent; background: none; color: var(--text-3); }
.btn-ghost:hover { border-color: transparent; background: var(--surface-2); color: var(--text); }
.btn-danger { color: var(--r-red); }
.btn-danger:hover { border-color: var(--r-red); color: var(--r-red); }
.btn-block { width: 100%; }
.btn-sm { padding: 7px 12px; font-size: var(--fs-sm); }
.btn-lg { padding: 12px 18px; font-size: var(--fs-lg); }
.seg { display: inline-flex; gap: 3px; padding: 3px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-md); }
.seg button { padding: 8px 16px; border: 0px; border-radius: var(--r-sm); background: none; color: var(--text-3); font: inherit; font-weight: 600; font-size: var(--fs-sm); white-space: nowrap; cursor: pointer; transition: background 0.15s, color 0.15s; }
.seg button:hover { color: var(--text); }
.seg button.active { background: linear-gradient(180deg,var(--accent-hover),var(--accent)); color: rgb(8, 17, 31); box-shadow: 0 2px 10px var(--accent-glow); }
.seg-row { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; }
.seg-row[hidden] { display: none; }
/* --------------------------------------------------------------------------
   10. Таблицы
   -------------------------------------------------------------------------- */
.table-wrap { overflow-x: auto; margin: 0px -22px; padding: 0px 22px; }
table { width: 100%; border-collapse: collapse; white-space: nowrap; }
th { padding: 0px 12px 11px; border-bottom: 1px solid var(--line); background: linear-gradient(transparent 70%, rgba(91, 141, 217, 0.06)); color: var(--text-3); font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.07em; text-align: left; text-transform: uppercase; }
th.sortable { cursor: pointer; user-select: none; transition: color 0.15s; }
th.sortable:hover { color: var(--text-2); }
th.sortable::after { content: "↕"; margin-left: 5px; opacity: 0.4; }
th.sortable[data-dir="desc"]::after { content: "↓"; opacity: 1; color: var(--accent); }
th.sortable[data-dir="asc"]::after { content: "↑"; opacity: 1; color: var(--accent); }
td { padding: 13px 12px; border-bottom: 1px solid var(--line); color: var(--text-2); }
tbody tr:last-child td { border-bottom: 0px; }
tbody tr { transition: background 0.12s; }
tbody tr:hover td { background: var(--surface-2); }
.num-cell { text-align: right; }
.rank { width: 34px; color: var(--text-3); font-size: var(--fs-sm); }
.rank-1 { color: rgb(240, 192, 74); font-weight: 700; }
.rank-2 { color: rgb(198, 204, 214); font-weight: 700; }
.rank-3 { color: rgb(208, 138, 83); font-weight: 700; }
.player-link { color: var(--text); font-weight: 600; }
.player-link:hover { color: var(--accent); }
.cell-player { display: flex; align-items: center; gap: 9px; }
/* --------------------------------------------------------------------------
   11. Шкала показателей
   -------------------------------------------------------------------------- */
/* Шкала показателей ровно в три цвета: выше среднего — фиолетовый,
   средний — синий, ниже среднего — красный. Ступеней внутри цвета нет:
   классы .r-* остались прежними (их считает ratingClass), но указывают
   всего на три значения. */
.r-purple, .r-blue { color: var(--grade-high); }
.r-green { color: var(--grade-mid); }
.r-yellow, .r-orange, .r-red { color: var(--grade-low); }
.r-none { color: var(--text-3); }
.r-purple, .r-blue, .r-green, .r-yellow, .r-orange, .r-red { font-weight: 650; }
.r-purple, .r-blue { --tint: var(--grade-high); }
.r-green { --tint: var(--grade-mid); }
.r-yellow, .r-orange, .r-red { --tint: var(--grade-low); }
.r-none { --tint: var(--text-3); }
.tinted { position: relative; border-color: color-mix(in srgb,var(--tint,var(--line)) 34%,var(--line)); background: linear-gradient(180deg,color-mix(in srgb,var(--tint,transparent) 9%,transparent),transparent 62%),var(--surface-2); }
.tinted::before { content: ""; position: absolute; left: 0px; top: 9px; bottom: 9px; width: 2px; border-radius: 0px 2px 2px 0px; background: var(--tint,var(--line-strong)); opacity: 0.85; }
.green { color: var(--r-green); }
.orange { color: var(--r-orange); }
.red { color: var(--r-red); }
.purple { color: var(--r-purple); }
.unavailable { color: var(--text-3); }
.positive { color: var(--win); }
.negative { color: var(--loss); }
/* --------------------------------------------------------------------------
   12. Значки и метки
   -------------------------------------------------------------------------- */
.badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; border: 1px solid var(--line-strong); border-radius: var(--r-full); color: var(--text-3); font-size: 10px; font-weight: 650; letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; }
.badge-accent { border-color: var(--accent-line); background: var(--accent-soft); color: var(--accent); }
/* Полевик — роль, а не показатель: синий акцент путал её с рейтингом и
   ссылками, поэтому у неё собственный тёплый цвет в палитре сайта */
.role-mark{display:inline-grid;place-items:center;width:18px;height:18px;margin-left:6px;
  border:1px solid color-mix(in srgb,var(--role) 52%,transparent);border-radius:5px;
  background:color-mix(in srgb,var(--role) 20%,transparent);color:var(--role);
  font-size:11px;font-weight:800;line-height:1;vertical-align:middle}
/* Бейдж с ролью целиком в её цвете: значок и ник читаются как одно целое */
/* Рамка аватара — украшение профиля. Кольцо рисует обёртка: у самой
   аватарки overflow:hidden, и псевдоэлемент вокруг неё обрезался бы. */
.ava-frame{display:inline-grid;place-items:center;flex:none;border-radius:var(--r-full)}
.ava-frame[data-frame]:not([data-frame=""]){padding:3px;background:var(--frame);
  box-shadow:0 0 16px -6px var(--frame-glow,transparent)}
.ava-frame:has(.avatar-lg),.ava-frame:has(.avatar-xl){border-radius:calc(var(--r-xl) + 3px)}
[data-frame="blue"]{--frame:linear-gradient(140deg,#9cc6ff,#5d95ec);--frame-glow:#5d95ec;--frame-ring:#7fb0f2}
[data-frame="gold"]{--frame:linear-gradient(140deg,#f3d08a,#d2a24d);--frame-glow:#d2a24d;--frame-ring:#e2ba6c}
[data-frame="purple"]{--frame:linear-gradient(140deg,#d5b0f2,#8a5bd0);--frame-glow:#8a5bd0;--frame-ring:#b087e1}
[data-frame="green"]{--frame:linear-gradient(140deg,#8fe0bb,#3fae79);--frame-glow:#3fae79;--frame-ring:#61c79a}
[data-frame="hot"]{--frame:linear-gradient(140deg,#ff8fb1,#ff9f5a);--frame-glow:#ff8fb1;--frame-ring:#ff9786}
[data-frame="ice"]{--frame:linear-gradient(140deg,#a9ecff,#4aa3d8);--frame-glow:#4aa3d8;--frame-ring:#79c7ea}
[data-frame="steel"]{--frame:linear-gradient(140deg,#d5dae2,#6d7480);--frame-glow:#8b93a0;--frame-ring:#a4acb8}
[data-frame="ember"]{--frame:linear-gradient(140deg,#ffb36a,#e4636f);--frame-glow:#e4636f;--frame-ring:#f28b6c}

/* Мелкие аватарки (шапка, чат, переписка) обводятся тенью: градиентную
   рамку в 28 пикселей всё равно не разглядеть, а обрезать overflow нечего */
.avatar[data-frame]:not([data-frame=""]),
.ava[data-frame]:not([data-frame=""]),
.chat-ava[data-frame]:not([data-frame=""]){
  box-shadow:0 0 0 2px var(--frame-ring,transparent),0 0 10px -4px var(--frame-glow,transparent)}

/* Выбор рамки в настройках профиля */
.frame-picker{display:flex;flex-wrap:wrap;gap:9px}
.frame-dot{position:relative;width:36px;height:36px;padding:0;border:0;border-radius:var(--r-full);
  background:var(--frame,var(--surface-3));cursor:pointer;transition:transform .15s}
.frame-dot::after{content:"";position:absolute;inset:3px;border-radius:inherit;background:var(--surface)}
.frame-dot:hover{transform:translateY(-1px)}
.frame-dot.on{box-shadow:0 0 0 2px var(--bg),0 0 0 4px var(--accent)}
.frame-dot[data-frame=""]{background:var(--line-strong)}
/* «Без рамки» — перечёркнутый кружок, чтобы выбор читался без подписи */
.frame-dot[data-frame=""]::before{content:"";position:absolute;z-index:1;left:9px;right:9px;top:calc(50% - 1px);
  height:2px;border-radius:2px;background:var(--text-3);transform:rotate(-45deg)}

/* --- вложения и эмодзи в переписке --- */
.chat-file{display:block;margin-top:6px;max-width:280px}
.chat-file.image img{display:block;width:100%;max-height:260px;object-fit:cover;
  border:1px solid var(--line);border-radius:var(--r-md)}
.chat-file.image:hover img{border-color:var(--accent-line)}
/* Вложения, которых уже нет на диске */
.chat-file.gone{display:inline-block;margin-top:6px;padding:8px 11px;border:1px dashed var(--line-strong);
  border-radius:var(--r-md);color:var(--text-3);font-size:var(--fs-xs)}
.chat-file.doc{display:flex;align-items:center;gap:10px;padding:9px 11px;border:1px solid var(--line);
  border-radius:var(--r-md);background:var(--surface-2);color:var(--text-2);transition:border-color .15s,color .15s}
.chat-file.doc:hover{border-color:var(--accent-line);color:var(--text)}
.chat-file.doc i{display:grid;place-items:center;flex:none;width:30px;height:30px;border-radius:var(--r-sm);
  background:var(--surface-3);color:var(--accent)}
.chat-file.doc svg{width:17px;height:17px}
.chat-file.doc b{display:block;font-size:var(--fs-sm);font-weight:600;overflow-wrap:anywhere}
.chat-file.doc small{display:block;margin-top:1px;color:var(--text-3);font-size:var(--fs-xs)}

/* Кнопки скрепки и смайла в строке отправки */
.chat-tool{display:grid;place-items:center;flex:none;width:34px;height:34px;padding:0;border:1px solid var(--line);
  border-radius:var(--r-sm);background:var(--surface-2);color:var(--text-3);cursor:pointer;
  transition:border-color .15s,color .15s}
.chat-tool:hover{border-color:var(--accent-line);color:var(--accent)}
.chat-tool svg{width:17px;height:17px}
.chat-tool input[type=file]{display:none}

.emoji-panel{position:absolute;z-index:40;bottom:calc(100% + 8px);left:0;display:grid;
  grid-template-columns:repeat(8,1fr);gap:2px;width:288px;padding:8px;border:1px solid var(--line-strong);
  border-radius:var(--r-md);background:var(--surface);box-shadow:var(--shadow-3)}
.emoji-panel button{width:32px;height:32px;padding:0;border:0;border-radius:var(--r-sm);background:none;
  font-size:18px;line-height:1;cursor:pointer}
.emoji-panel button:hover{background:var(--surface-3)}

/* Выбранный файл до отправки */
.chat-pending{display:flex;align-items:center;gap:9px;margin-bottom:8px;padding:7px 11px;
  border:1px solid var(--accent-line);border-radius:var(--r-md);background:var(--accent-soft);
  color:var(--accent);font-size:var(--fs-xs)}
.chat-pending[hidden]{display:none}
.chat-pending b{font-weight:600;overflow-wrap:anywhere}
.chat-pending button{margin-left:auto;border:0;background:none;color:inherit;font:inherit;font-size:15px;
  line-height:1;cursor:pointer;opacity:.7}
.chat-pending button:hover{opacity:1}

/* Постраничная навигация под длинными списками */
.pager{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:5px;margin-top:16px}
.pager button{min-width:32px;height:32px;padding:0 9px;border:1px solid var(--line);border-radius:var(--r-sm);
  background:var(--surface);color:var(--text-2);font:inherit;font-size:var(--fs-sm);font-weight:600;
  font-variant-numeric:tabular-nums;cursor:pointer;transition:border-color .15s,color .15s,background .15s}
.pager button:hover:not(:disabled){border-color:var(--accent-line);color:var(--accent)}
.pager button.on{border-color:var(--accent-line);background:var(--accent-soft);color:var(--accent)}
.pager button:disabled{opacity:.35;cursor:default}
.pager-step{font-size:var(--fs-lg);line-height:1}
.pager-gap{padding:0 2px;color:var(--text-3)}

.badge-role{border-color:color-mix(in srgb,var(--role) 45%,transparent);background:var(--role-soft);color:var(--role)}
.badge-role .role-mark{margin-left:0;margin-right:1px}
.badge-win { border-color: rgba(61, 220, 151, 0.35); background: rgba(61, 220, 151, 0.1); color: var(--win); }
.badge-loss { border-color: rgba(255, 93, 108, 0.35); background: rgba(255, 93, 108, 0.1); color: var(--loss); }
.badge-draw { border-color: rgba(199, 167, 90, 0.35); background: rgba(199, 167, 90, 0.1); color: var(--draw); }
/* Цвета тиров — те же, что у дивизионов лиги: Хардкор сиреневый,
   Тру синий, Лайт зелёный. Один цвет у команды и у её дивизиона. */
:root{
  --tier-1:#b57ce0;
  --tier-2:#5d95ec;
  --tier-3:#4ec48c;
}
.badge-tier-1{border-color:#b57ce059;background:#b57ce01f;color:#c79aea}
.badge-tier-2{border-color:#5d95ec59;background:#5d95ec1f;color:#84b1f7}
.badge-tier-3{border-color:#4ec48c59;background:#4ec48c1f;color:#6fd3a3}
.dot { width: 7px; height: 7px; border-radius: var(--r-full); background: var(--accent); flex-shrink: 0; }
.dot-online { background: var(--win); box-shadow: 0 0 8px var(--win); }
/* --------------------------------------------------------------------------
   13. Формы
   -------------------------------------------------------------------------- */
.field { display: block; margin-top: 14px; }
.field:first-child { margin-top: 0px; }
.label { display: block; margin-bottom: 6px; color: var(--text-3); font-size: var(--fs-sm); font-weight: 500; }
.input, input[type="text"], input[type="password"], input[type="email"], select, textarea { width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface-3); color: var(--text); font: inherit; outline: none; transition: border-color 0.15s, box-shadow 0.15s; }
.input::placeholder, textarea::placeholder { color: var(--text-3); }
.input:focus, input:focus, select:focus, textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
textarea { resize: vertical; }
select { cursor: pointer; }
select[multiple] { min-height: 100px; padding: 6px; }
.file-label { display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 8px 14px; border: 1px dashed var(--line-strong); border-radius: var(--r-sm); color: var(--text-2); font-weight: 500; cursor: pointer; transition: border-color 0.15s, color 0.15s, background 0.15s; }
.file-label:hover { border-color: var(--accent); background: var(--accent-soft); color: var(--text); }
.file-label input[type="file"] { display: none; }
/* --------------------------------------------------------------------------
   14. Служебные состояния
   -------------------------------------------------------------------------- */
.muted { color: var(--text-3); }
.sub { color: var(--text-3); }
.eyebrow { color: var(--text-3); font-size: 10px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; }
.empty { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 26px 16px; border: 1px dashed var(--line-strong); border-radius: var(--r-md); background: rgba(255, 255, 255, 0.016); color: var(--text-3); font-size: var(--fs-sm); text-align: center; }
.card > .empty, .card .empty { border-style: dashed; background: transparent; }
td.empty { display: table-cell; border: 0px; background: none; }
.status { color: var(--text-3); font-size: var(--fs-sm); }
.status-ok { color: var(--win); }
.error { padding: 12px 14px; border: 1px solid rgba(255, 93, 108, 0.25); border-radius: var(--r-sm); background: rgba(255, 93, 108, 0.08); color: var(--r-red); font-size: var(--fs-md); }
.note { margin-top: 10px; color: var(--text-3); font-size: var(--fs-sm); }
/* Тихая подсказка под полем или кнопкой. Была объявлена только в MyStrats,
   хотя размечена на четырёх страницах — поднимаем в общий слой. */
.hint{color:var(--text-3);font-size:var(--fs-xs);line-height:1.5}
.skeleton { border-radius: var(--r-sm); background-size: 400% 100%; animation: 1.3s ease 0s infinite normal none running shimmer; }
@keyframes shimmer { 
  0% { background-position: 100% 0px; }
  100% { background-position: 0px 0px; }
}
/* --------------------------------------------------------------------------
   15. Всплывающее окно
   -------------------------------------------------------------------------- */
.modal { position: fixed; z-index: 60; inset: 0px; display: grid; place-items: center; padding: 18px; background: rgba(5, 7, 10, 0.72); backdrop-filter: blur(2px); overflow-y: auto; }
.modal[hidden] { display: none; }
.modal-card { width: min(440px, 100%); min-width: 0px; max-width: 100%; padding: 22px; border: 1px solid var(--line-strong); border-radius: var(--r-md); background: var(--surface); box-shadow: rgba(0, 0, 0, 0.6) 0px 24px 60px; }
.modal-card h3 { margin-bottom: 6px; font-size: var(--fs-lg); }
.ask-opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 6px; }
.ask-opts button { min-width: 0px; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface-2); color: var(--text-2); font-style: inherit; font-variant: inherit; font-weight: inherit; font-stretch: inherit; line-height: inherit; font-family: inherit; font-optical-sizing: inherit; font-size-adjust: inherit; font-kerning: inherit; font-feature-settings: inherit; font-variation-settings: inherit; font-language-override: inherit; font-size: var(--fs-sm); cursor: pointer; transition: border-color 0.14s, color 0.14s, background 0.14s; }
.ask-opts button:hover { border-color: var(--line-strong); color: var(--text); }
.ask-opts button.on { border-color: var(--accent-line); background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; }

/* --------------------------------------------------------------------------
   16. Адаптив
   -------------------------------------------------------------------------- */
@media(max-width:1100px){
  .grid-main{grid-template-columns:minmax(0,1fr)}
  .grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media(max-width:900px){
  :root{--sidebar-w:60px}
  .sidebar{padding:18px 8px}
  .brand{padding:4px 0 26px;font-size:0;text-align:center}
  .brand::first-letter{font-size:20px}
  .brand span{display:none}
  .nav-group{display:none}
  .side-nav a{justify-content:center;padding:11px 0}
  .side-nav a span{display:none}
  /* Свёрнутый сайдбар: подпись группы прячется, поэтому нужен зазор */
  .nav-group{display:block;height:1px;margin:14px 8px;padding:0;overflow:hidden;background:var(--line);text-indent:-999px}
  .nav-group:first-of-type{margin-top:0}
  .side-nav-account{margin-bottom:14px;padding-bottom:12px}
  .side-nav-about{margin-top:14px;padding-top:12px}
  .topbar{padding:0 18px}
  .content{padding:20px 18px 48px}
  .footer{padding:18px}
  .kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .table-wrap{margin:0 -18px;padding:0 18px}
}

@media(max-width:640px){
  /* На телефоне боковая колонка становится нижней панелью: узкая полоса
     иконок сбоку съедала треть ширины, а листать её было нечем. */
  .app{grid-template-columns:minmax(0,1fr)}
  .sidebar{
    position:fixed;
    left:0;right:0;bottom:0;
    z-index:50;
    flex-direction:row;
    align-items:center;
    gap:2px;
    padding:6px 8px calc(6px + env(safe-area-inset-bottom,0px));
    border-right:0;
    border-top:1px solid var(--line);
    background:linear-gradient(180deg,#151a22f2,#0e1013f7);
    backdrop-filter:blur(14px);
    overflow-x:auto;
    scrollbar-width:none;
  }
  .sidebar::-webkit-scrollbar{display:none}
  .brand,.nav-group{display:none}
  .side-nav{flex-direction:row;gap:2px}
  .side-nav-account{margin:0;padding:0;border:0}
  .side-nav-account a{background:none;border-color:transparent}
  /* В нижней панели черта сверху не читается — отбиваем пункт вертикальной */
  .side-nav-about{flex:none;margin:0 0 0 4px;padding:0 0 0 6px;border-top:0;border-left:1px solid var(--line)}
  .side-nav a{flex:none;flex-direction:column;justify-content:center;gap:3px;min-width:60px;padding:7px 8px}
  .side-nav a.active::before{left:12px;right:12px;top:0;bottom:auto;width:auto;height:2px}
  .side-nav a span{display:block;font-size:9px;font-weight:600;letter-spacing:.01em;
    max-width:56px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:center}

  .topbar{height:auto;padding:12px 16px;flex-wrap:wrap}
  .search,.search-box{width:100%}
  .content{padding:16px 14px 96px}
  .footer{display:none}

  .page-head{flex-direction:column;align-items:flex-start;gap:12px;padding-bottom:14px}
  .page-head h1{font-size:25px}
  .page-head .btn{width:100%}
  .card,.card-pad-lg{padding:16px}
  .grid-2,.grid-3,.grid-4{grid-template-columns:minmax(0,1fr)}
  .kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* Переключатель шире экрана — прокручиваем его внутри себя,
     а не весь документ */
  .seg{width:100%;overflow-x:auto;scrollbar-width:none}
  .seg::-webkit-scrollbar{display:none}
  .seg button{flex:1 0 auto;padding:7px 11px;font-size:var(--fs-xs)}
  .seg-row{flex-direction:column;align-items:stretch}
  .table-wrap{margin:0 -16px;padding:0 16px}

  /* Нижняя панель: четыре главных раздела и «Ещё» (кнопку и список
     добавляет app.js). Лента из десяти пунктов уезжала за край экрана. */
  .sidebar{overflow:visible;justify-content:space-between;gap:0}
  .side-nav,.side-nav-account,.side-nav-about{display:contents}
  .side-nav a{display:none}
  .side-nav a:is([href="/"],[href="/matches"],[href="/training"],[href="/team"]):not([id]){
    display:flex;flex:1 1 0;min-width:0}
  .nav-more{position:relative;display:flex;flex:1 1 0;min-width:0;flex-direction:column;align-items:center;
    justify-content:center;gap:3px;padding:7px 4px;border:0;border-radius:var(--r-sm);background:none;
    color:var(--text-2);font:inherit;font-weight:500;cursor:pointer}
  .nav-more i{display:flex;color:var(--text-3)}
  .nav-more svg{display:block;width:20px;height:20px}
  .nav-more span{display:block;font-size:9px;font-weight:600;letter-spacing:.01em}
  .nav-more.active,.nav-more[aria-expanded="true"]{background:var(--surface-2);color:var(--text)}
  .nav-more.active i,.nav-more[aria-expanded="true"] i{color:var(--accent)}
  .nav-more.active::before{content:"";position:absolute;left:12px;right:12px;top:0;height:2px;
    border-radius:var(--r-full);background:var(--accent)}

  /* Остальные разделы выезжают снизу над панелью, сама панель остаётся видна */
  .nav-sheet{position:fixed;inset:0;z-index:49;display:flex;align-items:flex-end;background:#05070acc}
  .nav-sheet[hidden]{display:none}
  .nav-sheet-card{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;width:100%;
    padding:14px 12px calc(78px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--line);
    border-radius:var(--r-lg) var(--r-lg) 0 0;background:var(--bg-elev)}
  .nav-sheet-card a{display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 6px;
    border-radius:var(--r-md);color:var(--text-2);font-size:var(--fs-xs);font-weight:600;text-align:center}
  .nav-sheet-card a.active{background:var(--surface-2);color:var(--text)}
  .nav-sheet-card i{display:flex;color:var(--text-3)}
  .nav-sheet-card a.active i{color:var(--accent)}
  .nav-sheet-card svg{display:block;width:22px;height:22px}
  .nav-sheet-card .nav-badge{display:none}

  /* Шапка в одну строку: путь «Blitz Arena / раздел» дублировал заголовок
     страницы и отнимал у экрана целую строку */
  .crumb{display:none}
  .top-actions,.search-box{flex:1;min-width:0}

  /* Второстепенные колонки таблиц скрыты: без них таблица помещается
     в ширину экрана, подробности — в профиле игрока */
  th.opt,td.opt{display:none}
  /* Заголовок «КОМАНДА» с разрядкой был шире логотипа под ним и один
     выталкивал PERF за край */
  th{padding:0 6px 10px;font-size:10px;letter-spacing:0}
  td{padding:12px 6px}
  th:first-child,td:first-child{padding-left:0}
  th:last-child,td:last-child{padding-right:0}
  /* Длинный ник не раздвигает таблицу: обрезается многоточием, целиком он
     виден в профиле. MVP матча и так крупно подписан в шапке матча. */
  td .player-link,td .row-tank{display:inline-block;max-width:28vw;overflow:hidden;
    text-overflow:ellipsis;vertical-align:middle}
  td .row-tank{display:block}
  td .mvp-tag{display:none}
  /* В рейтинге рядом с логотипом стояло название команды — хватает логотипа */
  .cell-team > span:last-child:not(:first-child){display:none}
}
/* Кнопка «Ещё» и её список нужны только нижней панели телефона. Правило
   ограничено шириной: без этого оно перебивало мобильный блок выше. */
@media(min-width:641px){.nav-more,.nav-sheet{display:none}}

/* --------------------------------------------------------------------------
   Чат: выдвижная панель справа. Открывается поверх любой страницы из шапки
   и по кнопкам «Написать»; сама страница /messages остаётся.
   -------------------------------------------------------------------------- */
.cp-scrim{position:fixed;inset:0;z-index:70;background:#05070a8c;opacity:0;transition:opacity .2s}
.cp-scrim.open{opacity:1}
.cp{position:fixed;top:0;right:0;bottom:0;z-index:71;display:flex;flex-direction:column;width:min(420px,100vw);
  background:linear-gradient(180deg,#ffffff06,transparent 30%),var(--bg-elev);border-left:1px solid var(--line-strong);
  box-shadow:-24px 0 60px #0009;transform:translateX(102%);transition:transform .22s cubic-bezier(.3,.9,.3,1)}
.cp.open{transform:none}
html.cp-lock{overflow:hidden}
@media(prefers-reduced-motion:reduce){.cp,.cp-scrim{transition:none}}

.cp-head{display:flex;align-items:center;gap:10px;min-height:62px;padding:10px 12px 10px 14px;border-bottom:1px solid var(--line)}
.cp-title{flex:1;min-width:0}
.cp-title b{display:block;overflow:hidden;font-size:var(--fs-md);font-weight:700;letter-spacing:-.01em;text-overflow:ellipsis;white-space:nowrap}
.cp-title small{display:block;margin-top:1px;overflow:hidden;color:var(--text-3);font-size:var(--fs-xs);text-overflow:ellipsis;white-space:nowrap}
.cp-title small.live{color:var(--win)}
.cp-title small.warn{color:var(--loss)}
.cp-icon{display:grid;place-items:center;flex:none;width:34px;height:34px;padding:0;border:1px solid transparent;border-radius:var(--r-sm);
  background:none;color:var(--text-3);cursor:pointer;transition:background .15s,color .15s,border-color .15s}
.cp-icon:hover{border-color:var(--line);background:var(--surface-2);color:var(--text)}
.cp-icon[hidden]{display:none}
.cp-icon svg{width:18px;height:18px}
.cp .chat-ava{display:grid;place-items:center;overflow:hidden;width:34px;height:34px;border-radius:50%;
  background:var(--surface-3);color:var(--text-2);font-size:11px;font-weight:700}
.cp .chat-ava img{width:100%;height:100%;object-fit:cover}
.cp-pic{position:relative;flex:none}
.cp-pic[hidden]{display:none}
.cp-online{position:absolute;right:-1px;bottom:-1px;width:11px;height:11px;border:2px solid var(--bg-elev);
  border-radius:50%;background:var(--win)}

/* Список разговоров */
.cp-dialogs{display:flex;flex-direction:column;flex:1;min-height:0}
.cp-dialogs[hidden],.cp-thread[hidden]{display:none}
.cp-search-row{padding:12px 14px 4px}
.cp-search-row .input{border-radius:var(--r-full);padding-left:14px}
.cp-rows{flex:1;min-height:0;overflow-y:auto;padding:4px 8px 16px}
.cp-section{margin:14px 8px 4px;color:var(--text-3);font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.cp-row{display:flex;align-items:center;gap:11px;width:100%;padding:9px 8px;border:0;border-radius:var(--r-md);background:none;
  color:var(--text);font:inherit;text-align:left;cursor:pointer;transition:background .15s}
.cp-row:hover{background:var(--surface-2)}
.cp-row .chat-ava{width:42px;height:42px;font-size:12px}
.cp-general{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:var(--accent-soft);color:var(--accent)}
.cp-general svg{width:20px;height:20px}
.cp-row-main{flex:1;min-width:0}
.cp-row-main b{display:block;overflow:hidden;font-size:var(--fs-sm);font-weight:650;text-overflow:ellipsis;white-space:nowrap}
.cp-row-main small{display:block;margin-top:2px;overflow:hidden;color:var(--text-3);font-size:var(--fs-xs);text-overflow:ellipsis;white-space:nowrap}
.cp-row-main small em{font-style:normal;color:var(--win)}
.cp-unread{flex:none;min-width:20px;padding:1px 7px;border-radius:var(--r-full);background:var(--accent);color:#0e1013;
  font-size:10px;font-weight:800;text-align:center}
.cp-empty{padding:18px 10px;color:var(--text-3);font-size:var(--fs-sm);text-align:center}

/* Переписка: подряд идущие сообщения одного автора склеиваются */
.cp-thread{display:flex;flex-direction:column;flex:1;min-height:0}
.cp-list{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;padding:12px 14px 8px}
.cp-day{align-self:center;margin:12px 0 4px;padding:2px 10px;border-radius:var(--r-full);background:var(--surface-2);
  color:var(--text-3);font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.cp-msg{display:flex;align-items:flex-end;gap:8px;max-width:88%;margin-top:8px}
.cp-msg.tail{margin-top:2px}
.cp-msg.mine{align-self:flex-end;flex-direction:row-reverse}
.cp-msg .chat-ava{width:28px;height:28px;font-size:10px}
.cp-msg.more .chat-ava{visibility:hidden}
.cp-msg.mine .chat-ava{display:none}
.cp-bubble{min-width:0;padding:7px 11px 5px;border:1px solid var(--line);border-radius:15px 15px 15px 5px;background:var(--surface-2)}
.cp-msg.more .cp-bubble{border-bottom-left-radius:15px}
.cp-msg.mine .cp-bubble{border-color:var(--accent-line);border-radius:15px 15px 5px 15px;
  background:linear-gradient(180deg,#5d95ec38,#5d95ec1c)}
.cp-msg.mine.more .cp-bubble{border-bottom-right-radius:15px}
.cp-from{display:block;margin-bottom:2px;border:0;padding:0;background:none;color:var(--accent);font:inherit;
  font-size:var(--fs-xs);font-weight:700;text-align:left;cursor:pointer}
.cp-from small{color:var(--text-3);font-weight:500}
.cp-body{display:block;font-size:var(--fs-sm);line-height:1.45;overflow-wrap:anywhere;white-space:pre-wrap}
.cp-meta{display:flex;justify-content:flex-end;gap:4px;margin-top:2px;color:var(--text-3);font-size:10px;font-variant-numeric:tabular-nums}
.cp-meta .seen{color:var(--accent)}
.cp-msg .chat-file{margin-top:4px}
.cp-typing{display:flex;align-items:center;gap:3px;padding:2px 18px 8px;color:var(--text-3);font-size:var(--fs-xs)}
.cp-typing[hidden]{display:none}
.cp-typing i{width:5px;height:5px;border-radius:50%;background:var(--accent);animation:cpDot 1.2s ease-in-out infinite}
.cp-typing i:nth-child(2){animation-delay:.15s}
.cp-typing i:nth-child(3){animation-delay:.3s}
.cp-typing span{margin-left:6px}
@keyframes cpDot{0%,60%,100%{opacity:.35;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}
@media(prefers-reduced-motion:reduce){.cp-typing i{animation:none}}
.cp-thread .chat-pending{margin:0 14px 8px}
.cp-form{position:relative;display:flex;align-items:center;gap:8px;padding:10px 12px calc(12px + env(safe-area-inset-bottom,0px));
  border-top:1px solid var(--line);background:var(--bg-elev)}
.cp-form[hidden]{display:none}
.cp-form .input{flex:1;min-width:0;border-radius:var(--r-full);padding-left:14px}
.cp-send{display:grid;place-items:center;flex:none;width:38px;height:38px;border:0;border-radius:50%;
  background:linear-gradient(180deg,var(--accent-hover),var(--accent));color:#0e1013;cursor:pointer;transition:transform .12s}
.cp-send:active{transform:scale(.94)}
.cp-send svg{width:18px;height:18px}
.cp-guest{margin:0;padding:12px 16px 16px;border-top:1px solid var(--line);color:var(--text-3);font-size:var(--fs-sm)}
.cp-guest[hidden]{display:none}
.cp-guest a{color:var(--accent);font-weight:600}
@media(max-width:640px){.cp{width:100vw;border-left:0}}

/* Сайт внутри Telegram Web App: подвал и так прячется на телефоне, но в
   Telegram бывает и широкое окно (десктоп) — там он лишний */
html.tg-app .footer{display:none}