/* ==========================================================================
   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}

/* Native page transitions: keep the previous frame opaque while the next
   appears. No navigation interception, timers, or speculative requests. */
@view-transition{navigation:auto}
html{background:#0e1013;color-scheme:dark}
.sidebar{view-transition-name:sidebar}
.topbar{view-transition-name:topbar}
::view-transition{pointer-events:none}
::view-transition-group(*){animation-duration:140ms;animation-timing-function:ease-out}
::view-transition-old(root){animation:none;opacity:1;mix-blend-mode:normal}
::view-transition-new(root){animation:arena-page-in 140ms ease-out both;mix-blend-mode:normal}
::view-transition-group(sidebar),::view-transition-group(topbar){animation:none}
::view-transition-old(sidebar),::view-transition-old(topbar){display:none}
::view-transition-new(sidebar),::view-transition-new(topbar){animation:none;opacity:1}
@keyframes arena-page-in{from{opacity:0}to{opacity:1}}
@media(prefers-reduced-motion:reduce){
  @view-transition{navigation:none}
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
}

/* --------------------------------------------------------------------------
   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;
  /* Высота кнопок и поля поиска в шапке: одна на все элементы ряда */
  --control-h:38px;

  /* Движение. Нажатие — быстро вниз, обратно с небольшой пружиной;
     наведение и смена цвета — коротко. Подробности в DESIGN.md. */
  --dur-press:80ms;
  --dur-hover:150ms;
  --dur-release:520ms;
  --ease-out:cubic-bezier(.2,0,0,1);
  --spring-pop:cubic-bezier(.3,1.35,.5,1);
}
/* Пружина точнее через linear(); старые браузеры берут кривую выше */
@supports (transition-timing-function:linear(0,1)){
  :root{--spring-pop:linear(0,.044,.155,.307,.475,.642,.794,.922,1.023,1.094,1.139,1.16,1.162,1.15,1.129,1.103,1.075,1.049,1.025,1.006,.991,.981,.976,.973,.974,.977,.981,.985,.989,.994,.997,1,1.002,1.003,1.004,1.004,1.004,1.004,1.003,1.002,1)}
}

/* --------------------------------------------------------------------------
   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;
  min-height:100dvh;          /* в мобильных браузерах 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;min-height:100dvh}

.sidebar{
  display:flex;
  flex-direction:column;
  /* Липкое меню: сайдбар тянулся на всю длину страницы, и на главной
     (больше 3000 px) при прокрутке пунктов уже не было видно */
  position:sticky;
  top:0;
  align-self:start;
  /* Во всю высоту окна: по содержимому фон и черта справа обрывались
     на 772 px, и под меню оставалась пустая полоса */
  height:100vh;
  height:100dvh;
  max-height:100dvh;
  overflow-y:auto;
  scrollbar-width:thin;
  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}

.side-nav-home{margin-bottom:18px}

.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:var(--control-h);height:var(--control-h);
  border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface);color:var(--text-2);
  transition:border-color var(--dur-hover),color var(--dur-hover),background var(--dur-hover)}
.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}}
/* Средняя ширина (901–1100 px): рядом с широким сайдбаром шапке тесно.
   Поиск фиксированной ширины, крошки и кнопки выталкивали страницу вбок
   на 70–80 px, поэтому поиск здесь сжимается, крошки обрезаются, а
   «Моя статистика» остаётся одной иконкой — подпись есть в title */
@media(max-width:1100px){
  .topbar{gap:12px}
  .crumb{flex:0 1 auto;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
  .top-actions{flex:1;min-width:0;justify-content:flex-end;gap:8px}
  .top-actions .search-box{flex:1;min-width:0;max-width:290px}
  .top-actions .search{width:100%;min-width:0}
  .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}
/* Рамки-награды за дружбу: выдаются за совместные матчи, а не выбираются */
[data-frame="brotherhood"]{--frame:linear-gradient(140deg,#ffd9a0,#e08a3c);--frame-glow:#e08a3c;--frame-ring:#f0aa63}
[data-frame="duo"]{--frame:linear-gradient(140deg,#a9e8ff,#8a5bd0);--frame-glow:#8a5bd0;--frame-ring:#9fb6ef}
[data-frame="soul"]{--frame:linear-gradient(140deg,#ffe9a3,#ff9f5a);--frame-glow:#ff9f5a;--frame-ring:#ffc978}
[data-frame="champion"]{--frame:linear-gradient(140deg,#fff0b0,#d2a24d 55%,#fff0b0);--frame-glow:#f3d08a;--frame-ring:#f0dca0}
/* Общие плашки дружбы: профиль игрока и кабинет */
.social-line{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 10px;font-size:var(--fs-sm)}
.social-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.social-chip{display:inline-flex;align-items:center;gap:7px;padding:5px 10px;border:1px solid var(--line);
  border-radius:var(--r-full);background:var(--surface-2);color:var(--text-2);font-size:var(--fs-sm)}
.social-chip.on{border-color:var(--accent-line);background:var(--accent-soft);color:var(--accent)}
.social-chip small{color:var(--text-3)}
/* Значок награды: иконка сайта вместо эмодзи */
.social-ico{display:inline-grid;place-items:center;width:18px;height:18px;color:inherit}
.social-ico svg{width:18px;height:18px}
.frame-dot[disabled]{opacity:.45;cursor:not-allowed}

/* Мелкие аватарки (шапка, чат, переписка) обводятся тенью: градиентную
   рамку в 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}
.chat-tool[data-chat-create-poll][hidden]{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;
  --tier-4:#aeb4bf;
}
.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}
/* Tier 4 — Квалификация: бело-серый, тише дивизионов лиги */
.badge-tier-4{border-color:#aeb4bf59;background:#aeb4bf1a;color:#d3d7de}
/* Значок ⓘ с подсказкой: наведение или нажатие (фокус) показывает текст */
.info-tip{position:relative;display:inline-grid;place-items:center;width:15px;height:15px;margin-left:5px;padding:0;
  border:1px solid var(--line-strong);border-radius:50%;background:none;color:var(--text-3);
  font:700 9px/1 var(--font);letter-spacing:0;text-transform:none;vertical-align:middle;cursor:help}
.info-tip:hover,.info-tip:focus-visible{border-color:var(--accent-line);color:var(--accent);outline:none}
.info-tip::after{content:attr(data-tip);position:absolute;z-index:40;top:calc(100% + 8px);right:-12px;width:min(280px,76vw);
  padding:10px 12px;border:1px solid var(--line-strong);border-radius:var(--r-md);background:var(--bg-elev);
  box-shadow:0 12px 32px #0008;color:var(--text-2);font:400 var(--fs-xs)/1.55 var(--font);letter-spacing:0;
  text-align:left;text-transform:none;white-space:normal;opacity:0;visibility:hidden;transition:opacity .15s;pointer-events:none}
.info-tip:hover::after,.info-tip:focus::after{opacity:1;visibility:visible}
.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{display:block;border-radius:var(--r-sm);
  background:linear-gradient(90deg,var(--surface-2) 25%,var(--surface-3) 37%,var(--surface-2) 63%);
  background-size:400% 100%;animation:shimmer 1.4s ease infinite}
.sk-line{height:12px;max-width:100%}
.sk-line.sm{height:9px}
.sk-mark{width:32px;height:32px;flex:none}
.sk-row{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--line)}
.sk-row:last-child{border-bottom:0}
.sk-stack{display:grid;gap:7px;flex:1;min-width:0}
td .skeleton{height:12px}
.sk-card{border-radius:var(--r-lg)}
@media(prefers-reduced-motion:reduce){.skeleton{animation:none}}
@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(min-width:641px) and (max-width:900px){
  .sidebar .side-nav a .nav-badge{
    position:absolute;top:1px;right:0;z-index:1;margin:0;
    min-width:16px;height:16px;padding:0 4px;font-size:9px;line-height:16px;
    box-shadow:0 0 0 2px var(--surface);pointer-events:none;
  }
}

@media(max-width:640px){
  /* На телефоне боковая колонка становится нижней панелью: узкая полоса
     иконок сбоку съедала треть ширины, а листать её было нечем. */
  .app{grid-template-columns:minmax(0,1fr)}
  .sidebar{
    position:fixed;
    /* top и max-height сбрасываем: они остались от липкого меню на широком
       экране, и с ними панель растягивалась на всю высоту и уходила наверх */
    top:auto;
    height:auto;
    max-height:none;
    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="/matches"],[href="/team"],[href="/training"],[href="/strategy"]):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(var(--cp-width,500px),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}
.cp{container-type:inline-size;container-name:chat-panel}
.cp-resize{position:absolute;left:-6px;top:0;bottom:0;width:12px;z-index:4;cursor:ew-resize;touch-action:none;outline:none}
.cp-resize::after{content:'';position:absolute;top:calc(50% - 24px);left:4px;width:4px;height:48px;border-radius:6px;background:var(--line-strong);transition:background .12s}
.cp-resize:hover::after,.cp-resize:focus-visible::after{background:var(--accent-hover)}
.cp-resize:focus-visible{box-shadow:inset 2px 0 var(--accent-hover)}
html.cp-resizing,html.cp-resizing *{cursor:ew-resize!important;user-select:none!important}
.cp-thread-stage{position:relative;display:flex;flex-direction:column;flex:1;min-height:0}
.cp-open-page{display:flex;align-items:center;justify-content:center;gap:9px;flex:0 0 100%;order:6;min-height:38px;padding:8px 12px;border:1px solid var(--line-strong);border-radius:9px;background:var(--surface-2);color:var(--text);font:600 12px/1.3 var(--font);text-decoration:none}
.cp-open-page svg{width:17px;height:17px;flex:none}
.cp-open-page:hover{background:var(--surface-3);border-color:var(--accent-line);color:var(--text);text-decoration:none}
.cp-open-page:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.cp-head{flex-wrap:wrap}
.cp-row-aside{align-self:stretch;display:flex;flex-direction:column;justify-content:center;align-items:flex-end;gap:7px;flex:none}
.cp-row-aside time{font-size:10px;color:var(--text-3);font-variant-numeric:tabular-nums}
.cp-general{flex:none}
.cp-general img{display:block;object-fit:contain}
@media(max-width:640px){.cp-resize{display:none}}
@container chat-panel (min-width:700px){.cp-open-page{flex:0 0 auto;order:0}}
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{flex:none;aspect-ratio:1;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}

/* Друзья: кнопка в шапке разговора и в профиле, полоса входящей заявки,
   круглые «принять / отклонить» в списках */
.friend-btn[hidden]{display:none}
.friend-btn svg{flex:none;width:16px;height:16px}
.btn.friend-btn{display:inline-flex;align-items:center;gap:6px}
.friend-btn[data-state="friends"]{color:var(--win)}
.friend-btn[data-state="outgoing"]{color:var(--text-3)}
.friend-btn[data-state="incoming"]{border-color:var(--accent-line);background:var(--accent-soft);color:var(--accent)}
.friend-btn[data-armed]{border-color:#e4636f66;color:var(--loss)}
.cp-friend svg{width:18px;height:18px}
.cp-friend-bar{display:flex;align-items:center;flex-wrap:wrap;gap:8px;padding:9px 14px;border-bottom:1px solid var(--line);
  background:var(--accent-soft);color:var(--text-2);font-size:var(--fs-sm)}
.cp-friend-bar[hidden]{display:none}
.cp-friend-bar span{flex:1;min-width:150px}
.cp-friend-bar b{color:var(--text)}
.friend-mini{display:grid;place-items:center;flex:none;width:30px;height:30px;padding:0;border:1px solid var(--line);
  border-radius:50%;background:var(--surface-2);color:var(--text-3);cursor:pointer;
  transition:border-color .15s,color .15s,background .15s}
.friend-mini svg{width:15px;height:15px}
.friend-mini:hover{border-color:var(--line-strong);color:var(--text)}
.friend-mini.ok{border-color:var(--accent-line);background:var(--accent-soft);color:var(--accent)}
.friend-mini:disabled{opacity:.5;cursor:default}

/* Переписка: подряд идущие сообщения одного автора склеиваются */
.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{flex:none;aspect-ratio:1;width:28px;height:28px;font-size:10px}
.cp-msg .chat-profile{text-decoration:none}
.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;text-decoration:none;cursor:pointer}
.cp-from:hover{text-decoration:underline}
.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)}
/* Quiet chat surfaces and readable line lengths, shared by page and panels. */
.cp-msg{max-width:min(90%,680px);margin-top:12px}
.cp-msg.tail{margin-top:4px}
.cp-bubble{padding:10px 13px 7px;background:#1b2027;border-color:#303843}
.cp-msg.mine .cp-bubble{background:#202c3c;border-color:#3b5270}
.cp-author{display:flex;align-items:center;flex-wrap:wrap;gap:6px 9px;margin-bottom:5px}
.cp-from{margin:0;font-size:13px;color:#8eb8f1;line-height:1.4}
.cp-team{max-width:100%;padding:1px 7px;border:1px solid #414b5866;border-radius:6px;background:#ffffff05;color:#adb7c5;font-size:11px;font-weight:500;overflow-wrap:anywhere}
.cp-body{font-size:14px;line-height:1.6;color:#e1e6ee}
.cp-meta{align-items:center;gap:7px;margin-top:5px;min-height:22px;color:#9aa6b6;font-size:11px}
.cp-day{margin:20px 0 8px;background:transparent;color:#9aa6b6;font-size:11px;letter-spacing:.04em}
.cp-more{display:grid;place-items:center;width:30px;height:26px;padding:0;border:0;border-radius:6px;background:transparent;color:#a9b6c8;font:700 21px/1 sans-serif;cursor:pointer}
.cp-more:hover,.cp-more[aria-expanded="true"]{background:#ffffff0c;color:#e1e6ee}
.cp-reply{display:grid;place-items:center;flex:none;width:30px;height:28px;padding:0;border:0;border-radius:6px;background:transparent;color:#98bce9;cursor:pointer}
.cp-reply svg{width:18px;height:18px;pointer-events:none}
.cp-reply:hover{background:#83b4ff14;color:#c2dcff}
.cp-reply:active{background:#83b4ff24}
.cp-reply:focus-visible,.cp-more:focus-visible,.cp-action-menu button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.cp-action-menu{position:fixed;inset:auto;margin:0;padding:5px;min-width:164px;max-width:calc(100vw - 16px);border:1px solid #414c5c;border-radius:10px;background:#202730;color:#e1e6ee;box-shadow:0 8px 28px #0005;z-index:2000}
.cp-action-menu[hidden]{display:none}
.cp-action-menu button{display:block;width:100%;min-height:40px;padding:9px 12px;border:0;border-radius:6px;background:transparent;color:inherit;font-family:inherit;font-size:14px;font-weight:500;line-height:1.4;text-align:left;cursor:pointer}
.cp-action-menu button:hover{background:#ffffff09}
.cp-action-menu button.cp-action-danger{color:#ed9da7}
.thread .cp-body{font-size:15px}
@media(max-width:600px){.cp-msg{max-width:96%;gap:6px}.cp-bubble{padding:9px 11px 6px}.cp-more,.cp-reply{width:36px;height:36px}.cp-reply svg{width:20px;height:20px}.cp-action-menu button{min-height:44px}}
.cp-edited{font-style:normal;opacity:.8}
.entity-link{color:inherit;text-decoration:none;border-radius:4px}
a.entity-link:hover{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
a.entity-link:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.cp-quote{display:flex;flex-direction:column;gap:3px;width:100%;min-width:0;margin:0 0 8px;padding:8px 10px;border:0;border-left:3px solid #78aaf0;border-radius:4px 8px 8px 4px;background:#83b4ff0d;color:#b8c6d8;font:inherit;text-align:left;cursor:pointer}
.cp-quote b{font-size:12px;color:#9cc4ff;overflow-wrap:anywhere}
.cp-quote span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere;font-size:12px;line-height:1.45}
.cp-quote:hover{background:#83b4ff19}
.cp-quote:disabled{border-left-color:#586476;color:#98a5b7;cursor:default;background:#ffffff04}
.cp-quote:focus-visible,.cp-reply-draft button:focus-visible,.cp-history-back:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.cp-reply-draft{display:flex;flex:none;align-items:center;gap:10px;min-width:0;padding:10px 14px;border-top:1px solid var(--line);background:#182230;color:#a4bde1}
.cp-reply-draft[hidden],.cp-history-back[hidden]{display:none}
.cp-reply-draft>div{min-width:0;flex:1}
.cp-reply-draft b,.cp-reply-draft span:not(.cp-reply-mark){display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;line-height:1.5}
.cp-reply-draft b{color:#a9ccff}
.cp-reply-draft span:not(.cp-reply-mark){color:#a9b5c6}
.cp-reply-mark{font-size:24px;flex:none}
.cp-reply-draft button{display:grid;place-items:center;flex:0 0 36px;height:36px;padding:0;border:0;border-radius:8px;background:transparent;color:#a9b5c6;font:24px/1 var(--font);cursor:pointer}
.cp-reply-draft button:hover{background:#ffffff0a;color:#fff}
.cp-history-back{flex:none;padding:10px 14px;border:0;border-bottom:1px solid var(--accent-line);background:#192638;color:#a9ccff;font:600 12px/1.5 var(--font);cursor:pointer}
.cp-msg.cp-quoted-target .cp-bubble{outline:2px solid #82b4fa;outline-offset:3px;box-shadow:0 0 0 6px #82b4fa18}
.chat-unread-divider{display:flex;align-items:center;gap:12px;color:#9cbeed;font-size:11px;margin:22px 0 0;flex:none}
.chat-unread-divider::before,.chat-unread-divider::after{content:'';height:1px;background:#91b6ea27;flex:1}
.cp-edit{display:block;margin:4px 0 2px}
.cp-edit textarea{width:100%;min-height:54px;resize:vertical;font:inherit;font-size:var(--fs-sm)}
.cp-edit-row{display:flex;justify-content:flex-end;gap:6px;margin-top:6px}
.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}
/* Высоту окна в мини-приложении задаёт сам Telegram и меняет её, когда
   открывается клавиатура: берём его переменную, а не высоту экрана.
   «Резинка» прокрутки выключена — свайп вниз закрывал приложение. */
html.tg-app,html.tg-app body{overscroll-behavior:none}
html.tg-app body,html.tg-app .app{min-height:var(--tg-viewport-stable-height,100dvh)}
/* Нижняя панель не должна налезать на полосу жеста «домой» */
@media(max-width:900px){
  html.tg-app .sidebar{padding-bottom:calc(10px + env(safe-area-inset-bottom,0px))}
}

/* Единое меню на всех страницах. */
@media(min-width:901px){.sidebar .nav-group{display:flex;align-items:center;gap:10px;font-size:10px;letter-spacing:.08em}.sidebar .nav-group::after{content:"";height:1px;flex:1;background:var(--line)}.sidebar .side-nav a{padding-top:8px;padding-bottom:8px}.sidebar .side-nav i{width:28px;height:28px;border:1px solid transparent;border-radius:8px;background:var(--surface-2)}.sidebar .side-nav i svg{width:18px;height:18px}.sidebar .side-nav a.active i{background:var(--accent-glow);border-color:var(--line)}}

/* LIVE в шапке не вытесняет поиск на узком экране. */
.top-live,.top-live:visited{display:inline-flex;align-items:center;justify-content:center;gap:7px;flex:none;min-height:var(--control-h);padding:0 10px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface);color:var(--text-2);font-size:11px;font-weight:700;letter-spacing:.04em;text-decoration:none}
.top-live svg{width:18px;height:18px}.top-live b{min-width:17px;padding:2px 4px;border-radius:5px;background:#b57ce025;font-size:10px;line-height:1}.top-live b[hidden]{display:none}.top-live.is-live{color:#d3b0f2;border-color:#b57ce055;background:#b57ce00c}.top-live:hover,.top-live[aria-current="page"]{color:var(--text);background:var(--surface-2);border-color:var(--line-strong)}.top-live:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
@media(max-width:900px){.top-actions{min-width:0;flex:1;gap:6px}.top-actions .search-box{min-width:0;flex:1}.top-actions .search{width:100%;min-width:0}.top-live{gap:4px;padding:0 7px}.top-live svg{display:none}}
/* Clear on-air state and prominent Telegram setup. LIVE — фиолетовый, в тон Tier 1 */
.top-live.is-live,.top-live.is-live[aria-current="page"]{color:#e9e9ed;background:#1f1829;border-color:#553a78}.top-live.is-live:hover{background:#2a1f3b;border-color:#7d55b0;color:#fff}.top-live.is-live b{background:#b57ce022;color:#dcc2f5}.top-live.is-live svg{color:#c08cf0}
.home-telegram{display:flex;align-items:center;gap:20px;padding:24px;margin-bottom:22px;border:1px solid #339ddd55;border-radius:16px;background:radial-gradient(ellipse at 0 0,#229ed923,transparent 65%),var(--surface)}.home-telegram-icon{flex:none;display:grid;place-items:center;width:56px;height:56px;border-radius:16px;background:#229ed9;color:#fff;box-shadow:0 6px 22px #229ed925}.home-telegram-icon svg{width:30px;height:30px}.home-telegram>div{flex:1;min-width:0}.home-telegram-kicker{color:#61c5f6;font-size:10px;font-weight:700;letter-spacing:.12em}.home-telegram h2{font-size:19px;line-height:1.35;margin:6px 0}.home-telegram p{color:var(--text-2);font-size:13px;line-height:1.65;margin:0;max-width:650px}.home-telegram-action,.home-telegram-action:visited{flex:none;display:flex;gap:12px;background:#229ed9;color:#fff;border-color:#229ed9;text-decoration:none}.home-telegram-action:hover{background:#188bc5;color:#fff}.home-telegram-action:focus-visible{outline:2px solid #8bd9ff;outline-offset:4px}@media(max-width:700px){.home-telegram{padding:18px;gap:14px;flex-wrap:wrap}.home-telegram-icon{width:44px;height:44px;border-radius:12px}.home-telegram h2{font-size:16px}.home-telegram-action{width:100%;justify-content:center}}

/* Compact desktop navigation */
@media(min-width:901px){
  .sidebar{padding:16px 12px}
  .sidebar .brand{padding-bottom:18px}
  .sidebar .side-nav{gap:1px}
  .sidebar .side-nav a{min-height:38px;padding:6px 10px;gap:9px;font-size:13px;line-height:1.35}
  .sidebar .side-nav a>span:not(.nav-badge){min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .sidebar .side-nav i{width:24px;height:24px;border-radius:6px;background:transparent}
  .sidebar .side-nav i svg{width:18px;height:18px}
  .sidebar .side-nav a.active i{background:var(--accent-glow)}
  .sidebar .nav-group{padding:0 10px 5px;font-size:9px;letter-spacing:.08em;gap:8px}
  .sidebar .nav-group:not(:first-of-type){margin-top:13px}
  .sidebar .side-nav-account{margin-bottom:12px;padding-bottom:10px}
  .sidebar .side-nav-about{margin-top:13px;padding-top:9px}
}
@media(min-width:901px) and (pointer:coarse){.sidebar .side-nav a{min-height:44px}}

/* Primary arena tools, separated from personal and competition links */
@media(min-width:901px){
 .sidebar .nav-group{color:var(--text-2);font-size:9px;font-weight:700;padding-top:2px;padding-bottom:8px}
 .sidebar .nav-group::after{background:var(--line-strong)}
 .sidebar .side-nav-about{margin-top:15px}
}
/* Quieter hierarchy with readable secondary navigation */
@media(min-width:901px){
}
@media(min-width:601px){.sidebar .nav-group{font-size:0;line-height:0;letter-spacing:0;padding:0;height:1px;min-height:1px;margin:12px 10px 10px;background:var(--line-strong);overflow:hidden}.sidebar .nav-group::after{display:none}.sidebar .nav-group:first-of-type{display:none}.sidebar .nav-group:not(:first-of-type){margin-top:14px}}

/* Consistent outline icons across every desktop navigation group. */
@media(min-width:901px){
 .sidebar .side-nav a{gap:10px}
 .sidebar .side-nav a i{display:grid;place-items:center;flex:0 0 28px;width:28px;height:28px;padding:0;border:0;border-radius:7px;background:transparent;color:var(--text-2)}
 .sidebar .side-nav a i svg{width:21px;height:21px}
 .sidebar .side-nav a.active i{color:var(--accent);background:transparent;border:0}
 .sidebar .side-nav a:hover i{color:var(--text)}
}

/* Return to the page heading without covering navigation or dialogs. */
.back-to-top{position:fixed;right:22px;bottom:22px;z-index:40;display:flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 14px;border:1px solid #52647d;border-radius:12px;background:#1c2532;color:#c6d8f2;box-shadow:0 6px 24px #0005;font:600 12px/1.2 var(--font);cursor:pointer;transition:background .15s,border-color .15s}
.back-to-top[hidden]{display:none}
.back-to-top svg{width:20px;height:20px}
.back-to-top:hover{background:#27364b;border-color:#7fa6db;color:#fff}
.back-to-top:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
@media(max-width:640px){.back-to-top{right:14px;bottom:calc(82px + env(safe-area-inset-bottom,0px));width:44px;padding:0}.back-to-top span{display:none}}
@media(prefers-reduced-motion:reduce){.back-to-top{transition:none}}

/* Opaque mobile chrome avoids repainting the scrolling page through blur. */
@media(max-width:768px){
  .topbar,.sidebar{backdrop-filter:none;-webkit-backdrop-filter:none;background:#11161d}
  .modal{backdrop-filter:none;-webkit-backdrop-filter:none}
  .top-msg.has-new b::after{animation:none}
  @view-transition{navigation:none}
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
}

/* Mobile navigation: four workflows, quiet active state and safe-area spacing. */
@media(max-width:640px){
 .sidebar .side-nav a.mobile-primary{order:var(--mobile-order);min-height:52px;padding:7px 2px;gap:5px}
 .sidebar .nav-more{order:5;min-height:52px}
 .sidebar .side-nav a.mobile-primary span[data-mobile-label]{font-size:0;max-width:none}
 .sidebar .side-nav a.mobile-primary span[data-mobile-label]::after{content:attr(data-mobile-label);font-size:10px}
 .sidebar .side-nav a.mobile-primary i svg{width:23px;height:23px}
 .sidebar .side-nav a.mobile-primary.active{background:#202936;color:var(--text)}
 .sidebar .side-nav a.mobile-primary.active i{color:#91b5e8}
 .nav-sheet-card a{min-height:64px}
}

/* Full-page chat composer: all controls share one baseline and hit area. */
.msg-form .chat-tool,.msg-form .msg-send{position:relative;display:grid;place-items:center;flex:0 0 44px;width:44px;height:44px;min-height:44px;padding:0;border-radius:12px;box-sizing:border-box}
.msg-form .chat-tool{color:#abb9cb;background:#1b222c;border-color:#344151}
.msg-form .chat-tool:hover{color:#d4e5fc;background:#232e3d;border-color:#58779c}
.msg-form .chat-tool svg,.msg-form .msg-send svg{display:block;width:22px;height:22px}
.msg-form .input{height:44px;min-height:44px;box-sizing:border-box;padding:0 14px;border-radius:12px;line-height:normal}
.msg-form .chat-tool input[type=file]{display:block;position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
.msg-form .chat-tool:focus-within,.msg-form .msg-send:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media(max-width:600px){.msg-main .msg-form{gap:6px;padding:10px}.msg-form .input{padding:0 10px;font-size:16px}}
.msg-form:has(textarea),.cp-form:has(textarea){align-items:flex-end}
.msg-form textarea.input,.cp-form textarea.input{height:44px;min-height:44px;max-height:132px;padding:10px 12px;resize:none;line-height:22px;box-sizing:border-box;overflow-y:hidden;border-radius:12px;white-space:pre-wrap}

/* Keep the page shortcut clear of chat composers, especially on phones. */
html.cp-lock .back-to-top,body:has(.msg-main input:focus,.msg-main textarea:focus,.chat input:focus,.chat textarea:focus) .back-to-top{display:none}

/* --------------------------------------------------------------------------
   17. Шапка: один ряд одной высоты
   Поле поиска было 43 px, LIVE и сообщения — 36, аватар — 32: ряд
   читался неровным. Теперь все элементы высотой --control-h, а на телефоне
   — 44 px, чтобы по ним было удобно попадать пальцем.
   -------------------------------------------------------------------------- */
.topbar .search{height:var(--control-h);padding-top:0;padding-bottom:0}
.topbar .top-stats{min-height:var(--control-h)}
.topbar .avatar{width:var(--control-h);height:var(--control-h);cursor:pointer;
  transition:box-shadow var(--dur-hover),border-color var(--dur-hover),color var(--dur-hover)}
/* Гость: вместо прочерка — значок профиля в той же рамке, что у соседних кнопок */
.topbar .avatar.avatar-guest{border:1px solid var(--line);background:var(--surface);color:var(--text-2)}
.topbar .avatar.avatar-guest svg{display:block;width:19px;height:19px}
.topbar .avatar.avatar-guest:hover{border-color:var(--accent-line);background:var(--surface-2);color:var(--accent)}
@media(max-width:640px){:root{--control-h:44px}}

/* Текст только для экранного диктора */
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}