/* ggplay — дизайн-система
   ------------------------------------------------------------------
   База — тёплый графит #272523. Глубина строится границами 1px,
   радиусами и минимальным перепадом поверхностей: ни заливочных
   градиентов, ни теней. Точечная сетка фона — текстура, а не градиент.

   Акцент #FF8101 маркирует ИСКЛЮЧЕНИЯ и интерактив. Массив данных
   акцентом не заливается: иначе бренд-цвет перестаёт что-либо значить.
   ------------------------------------------------------------------ */

:root{
  /* поверхности: перепад намеренно крошечный, работают границы */
  --bg:#272523;
  --surface:#2B2926;
  --surface-2:#34322E;
  --surface-3:#3F3D39;
  --line:#35332F;
  --line-strong:#4A4742;

  /* текст */
  --text:#F2F0EC;
  --muted:#C0BAB1;
  --dim:#A39C93;   /* 4.71:1 к самой светлой поверхности под текстом — AA для малого текста */

  /* бренд */
  --accent:#FF8101;
  --accent-ink:#1A1206;
  --accent-soft:rgba(255,129,1,.14);
  --accent-line:rgba(255,129,1,.34);

  /* нейтральная кнопка-«белая», как в референсе */
  --solid:#F2F0EC;
  --solid-ink:#211E1B;

  /* категории событий — все проверены на 4.5:1 к --surface */
  --c-Kill:#FF6165;      --c-Ban:#F065BC;       --c-Building:#6FA8FF;
  --c-Loot:#4ADE9B;      --c-AntiCheat:#FF8101; --c-Chat:#BDA6FF;
  --c-Player:#45DFF0;    --c-Admin:#FFCC4D;     --c-Server:#9E968B;
  --c-Error:#FF8A8A;     --c-Team:#55E8AC;      --c-Economy:#FFDF5C;
  --c-Custom:#A39B90;

  /* геометрия: одна шкала радиусов, без разнобоя */
  --r-pill:999px;
  --r-card:14px;
  --r-ctl:10px;
  --r-xs:7px;

  /* плотная шкала отступов (дашборд) */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px;

  --shell:1440px;

  /* моушен */
  --ease:cubic-bezier(.22,1,.36,1);
  --ease-soft:cubic-bezier(.4,0,.2,1);
  --t-fast:130ms; --t:200ms; --t-slow:340ms;
}

*{box-sizing:border-box}

/* Атрибут hidden должен побеждать любые display из классов ниже,
   иначе скрытые экраны продолжают рисоваться поверх видимого. */
[hidden]{display:none!important}

html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--text);
  font-family:Montserrat,system-ui,sans-serif;
  font-size:14px; line-height:1.5;
  -webkit-font-smoothing:antialiased;
  font-variant-numeric:tabular-nums;
}
button,input,select{font:inherit;color:inherit}
svg{fill:currentColor}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:var(--r-xs)}

/* Точечная сетка — текстура фона из референса. Радиальная функция
   рисует точку 1px, это не заливочный градиент. */
body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:radial-gradient(circle,rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:22px 22px;
}
body>*{position:relative;z-index:1}

/* ================================================================= вход */
.login{min-height:100dvh;display:grid;place-items:center;padding:var(--s5)}
.login__card{
  width:100%;max-width:380px;text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:var(--s3);
  animation:rise var(--t-slow) var(--ease) both;
}
.login__mark{display:block;border-radius:16px;margin-bottom:var(--s2)}
.login__title{margin:0;font-size:32px;font-weight:800;letter-spacing:-.03em}
.login__sub{margin:0 0 var(--s4);color:var(--muted);font-size:14px;font-weight:500}
.login__note{margin:var(--s1) 0 0;color:var(--dim);font-size:12px;font-weight:600}
.login__error{margin:0;min-height:18px;color:var(--c-Kill);font-size:13px;font-weight:600}

/* ============================================================== кнопки */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);
  border:1px solid var(--line);background:var(--surface-2);color:var(--text);
  border-radius:var(--r-pill);padding:11px 20px;
  font-weight:600;font-size:13.5px;cursor:pointer;text-decoration:none;
  white-space:nowrap;
  transition:background var(--t) var(--ease-soft),border-color var(--t) var(--ease-soft),
             transform var(--t-fast) var(--ease-soft);
}
.btn:hover{background:var(--surface-3);border-color:var(--line-strong)}
.btn:active{transform:scale(.975)}
.btn--solid{background:var(--solid);border-color:var(--solid);color:var(--solid-ink);font-weight:700}
.btn--solid:hover{background:#FFFFFF;border-color:#FFFFFF}
.btn--accent{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);font-weight:700}
.btn--accent:hover{background:#FF9328;border-color:#FF9328}
.btn--ghost{background:transparent}
.btn--ghost:hover{background:var(--surface-2)}
.btn--full{width:100%}

/* ============================================================== каркас */
.app{min-height:100dvh;display:flex;flex-direction:column}

/* Контейнер с боковыми линиями — приём из референса: контент
   ограничен, а поля за ним помечены вертикальными волосками. */
.shell{
  width:100%;max-width:var(--shell);margin:0 auto;padding:0 var(--s5);
  border-left:1px solid var(--line);border-right:1px solid var(--line);
}

.top{
  position:sticky;top:0;z-index:20;
  background:var(--bg);border-bottom:1px solid var(--line);
}
.top__in{
  display:flex;align-items:center;gap:var(--s4);
  padding-top:var(--s3);padding-bottom:var(--s3);
}
.top__mark{border-radius:11px;flex:0 0 auto}
.top__right{margin-left:auto;display:flex;align-items:center;gap:var(--s2)}

/* таблеточная навигация вместо иконочного рельса:
   4 раздела, подписи читаются, цель нажатия крупнее 44px */
.nav{display:flex;align-items:center;gap:var(--s1);min-width:0;flex:0 1 auto;overflow-x:auto;scrollbar-width:none}
.nav::-webkit-scrollbar{display:none}
.nav__btn{
  display:inline-flex;align-items:center;gap:var(--s2);
  border:1px solid transparent;background:transparent;color:var(--muted);
  border-radius:var(--r-pill);padding:9px 15px;min-height:40px;
  font-size:13.5px;font-weight:600;cursor:pointer;white-space:nowrap;
  transition:color var(--t) var(--ease-soft),background var(--t) var(--ease-soft),
             border-color var(--t) var(--ease-soft);
}
.nav__btn svg{width:16px;height:16px;opacity:.85}
.nav__btn:hover{color:var(--text);background:var(--surface-2)}
.nav__btn.is-active{
  color:var(--text);background:var(--surface-3);border-color:var(--line-strong);
}
.nav__btn.is-active svg{color:var(--accent);opacity:1}

.pulse{
  display:inline-flex;align-items:center;gap:var(--s2);
  border:1px solid var(--line);border-radius:var(--r-pill);
  padding:7px 13px;font-size:11.5px;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;color:var(--dim);
  transition:color var(--t) var(--ease-soft),border-color var(--t) var(--ease-soft);
}
.pulse i{width:7px;height:7px;border-radius:50%;background:var(--dim);transition:background var(--t)}
.pulse.is-live{color:var(--muted);border-color:var(--line-strong)}
.pulse.is-live i{background:var(--c-Loot);animation:breathe 2.4s var(--ease-soft) infinite}

.select,.input{
  background:var(--surface-2);border:1px solid var(--line);
  border-radius:var(--r-pill);padding:10px 16px;
  font-size:13.5px;font-weight:500;width:100%;min-height:40px;
  transition:border-color var(--t) var(--ease-soft),background var(--t) var(--ease-soft);
}
.select{cursor:pointer;width:auto;padding-right:var(--s4)}
.input::placeholder{color:var(--dim)}
.input:focus,.select:focus{border-color:var(--accent-line);background:var(--surface-2);outline:none}

/* ============================================================== экраны */
.view{
  padding-top:var(--s5);padding-bottom:var(--s6);
  display:flex;flex-direction:column;gap:var(--s4);
  animation:fade var(--t) var(--ease) both;
}
.view__head{display:flex;align-items:baseline;gap:var(--s3);margin-bottom:var(--s1)}
.view__title{margin:0;font-size:26px;font-weight:800;letter-spacing:-.03em}
.view__sub{color:var(--dim);font-size:13px;font-weight:500}

/* ------------------------------------------------- полоса показателей */
/* Один блок, разделённый волосками, вместо четырёх плавающих коробок. */
.stats{
  display:grid;grid-template-columns:repeat(4,1fr);
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);
  overflow:hidden;
}
.stat{
  padding:var(--s4) var(--s5);border-left:1px solid var(--line);
  animation:rise var(--t-slow) var(--ease) both;
  animation-delay:calc(var(--i,0) * 55ms);
}
.stat:first-child{border-left:0}
.stat__k{
  font-size:11.5px;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--dim);
}
.stat__v{font-size:32px;font-weight:800;letter-spacing:-.035em;margin-top:var(--s1);line-height:1.1}
.stat__v--accent{color:var(--accent)}

/* ------------------------------------------------------------- панели */
.panel{
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-card);overflow:hidden;
  animation:rise var(--t-slow) var(--ease) both;
}
.panel__head{
  display:flex;align-items:center;gap:var(--s3);
  padding:var(--s3) var(--s5);border-bottom:1px solid var(--line);
}
.panel__title{
  margin:0;font-size:11.5px;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--dim);
}
.panel__note{margin-left:auto;font-size:11.5px;font-weight:600;color:var(--dim)}
.panel__body{padding:var(--s5)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:var(--s4)}

/* ------------------------------------------------------------ графики */
/* Столбцы нейтральные: акцентом подсвечен только пик — то самое
   исключение, ради которого на график и смотрят. */
.chart{width:100%}
.chart svg{display:block;width:100%;overflow:visible}
.chart__bar{
  fill:var(--surface-3);
  transition:fill var(--t-fast) var(--ease-soft);
  transform-origin:bottom;
  animation:growY var(--t-slow) var(--ease) both;
  animation-delay:calc(var(--i,0) * 9ms);
}
.chart__bar:hover{fill:var(--muted)}
.chart__bar.is-peak{fill:var(--accent)}
.chart__base{stroke:var(--line);stroke-width:1}

.bars{display:flex;flex-direction:column;gap:var(--s2)}
.bar{
  display:grid;grid-template-columns:118px 1fr 52px;gap:var(--s3);
  align-items:center;font-size:13px;border-radius:var(--r-xs);
  transition:background var(--t-fast) var(--ease-soft);
}
.bar--click{cursor:pointer;margin:0 -8px;padding:3px 8px}
.bar--click:hover{background:var(--surface-2)}
.bar__l{
  color:var(--muted);font-weight:600;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.bar__track{height:6px;background:var(--surface-2);border-radius:var(--r-pill);overflow:hidden}
.bar__fill{
  display:block;height:100%;background:var(--muted);border-radius:var(--r-pill);
  transform-origin:left;animation:grow var(--t-slow) var(--ease) both;
  animation-delay:calc(var(--i,0) * 35ms);
}
.bar__v{text-align:right;font-weight:700;font-size:12.5px}

/* ============================================================= журнал */
.filters{display:flex;gap:var(--s2);flex-wrap:wrap;align-items:center}
.filters .input{flex:1;min-width:220px}
.filters .select{min-width:158px}
.check{
  display:inline-flex;align-items:center;gap:var(--s2);
  border:1px solid var(--line);border-radius:var(--r-pill);
  padding:9px 15px;min-height:40px;
  font-size:13px;font-weight:600;color:var(--muted);cursor:pointer;user-select:none;
  transition:border-color var(--t) var(--ease-soft),color var(--t) var(--ease-soft);
}
.check:hover{border-color:var(--line-strong);color:var(--text)}
.check input{accent-color:var(--accent);width:15px;height:15px;cursor:pointer}

.stream{display:grid;grid-template-columns:18px 1fr;gap:var(--s3);align-items:start}

/* «Хребет событий» — сигнатурный элемент: плотность активности
   читается глазом как гистограмма. На мобильном скрыт. */
.spine{
  position:sticky;top:84px;height:calc(100dvh - 120px);
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-pill);
  overflow:hidden;display:flex;flex-direction:column;padding:4px 0;
}
.spine__tick{
  height:2px;flex:0 0 2px;margin:0 3px 2px;border-radius:2px;opacity:.8;
  animation:tickIn var(--t) var(--ease) both;
}

/* Лента, а не стопка карточек: сплошной список с волосками. */
.stream__list{
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-card);overflow:hidden;min-width:0;
}
.row{
  position:relative;display:grid;
  grid-template-columns:66px 122px 1fr auto;gap:var(--s3);align-items:center;
  padding:10px var(--s4) 10px 20px;cursor:pointer;min-width:0;
  border-top:1px solid var(--line);
  transition:background var(--t-fast) var(--ease-soft);
}
.row:first-child{border-top:0}
.row::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:var(--cat,var(--dim));
  transform:scaleY(.34);transform-origin:center;
  transition:transform var(--t) var(--ease);
}
.row:hover,.row:focus-visible{background:var(--surface-2)}
.row:hover::before,.row:focus-visible::before{transform:scaleY(1)}
.row.is-new{animation:slideIn var(--t-slow) var(--ease) both}
.row__time{font-size:12px;font-weight:600;color:var(--dim)}
.row__type{
  font-size:11.5px;font-weight:800;letter-spacing:.04em;color:var(--cat,var(--muted));
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.row__body{
  min-width:0;font-size:13px;font-weight:500;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.row__who{font-weight:700}
.row__grid{display:flex;justify-content:flex-end}
.grid__tag{cursor:pointer;transition:border-color var(--t-fast),color var(--t-fast)}
.grid__tag:hover{border-color:var(--accent-line);color:var(--accent)}
.row__detail{color:var(--muted)}

/* ============================================================= игроки */
.players{display:grid;grid-template-columns:repeat(auto-fill,minmax(272px,1fr));gap:var(--s3)}
.pcard{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);
  padding:var(--s4);cursor:pointer;display:flex;flex-direction:column;gap:var(--s3);
  transition:border-color var(--t) var(--ease-soft),background var(--t) var(--ease-soft),
             transform var(--t) var(--ease);
  animation:rise var(--t-slow) var(--ease) both;
  animation-delay:calc(var(--i,0) * 22ms);
}
.pcard:hover{border-color:var(--line-strong);background:var(--surface-2);transform:translateY(-2px)}
/* карточку выделяет только реальный риск, а не факт существования */
.pcard.is-flagged{border-color:var(--accent-line)}
.pcard__top{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--s2)}
.pcard__name{
  font-weight:700;font-size:14.5px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.pcard__id{font-size:11.5px;color:var(--dim);font-weight:500;margin-top:1px}
.pcard__stats{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s2)}
.pcard__s{display:flex;flex-direction:column;gap:2px}
.pcard__sk{font-size:11.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--dim)}
.pcard__sv{font-size:15.5px;font-weight:700}

/* «чисто» — это отсутствие сигнала, поэтому и выглядит как фон.
   Рамку и цвет получают только те, кого стоит смотреть. */
.risk{
  font-size:11.5px;font-weight:700;padding:4px 10px;border-radius:var(--r-pill);
  letter-spacing:.03em;white-space:nowrap;border:1px solid transparent;color:var(--dim);
}
.risk--low{color:var(--dim)}
.risk--mid{color:var(--c-Admin);border-color:rgba(255,204,77,.4)}
.risk--high{color:var(--accent);border-color:var(--accent-line);background:var(--accent-soft)}
.risk--crit{color:var(--c-Kill);border-color:rgba(255,97,101,.45);background:rgba(255,97,101,.12)}

/* ============================================================ профиль */
.sheet{position:fixed;inset:0;z-index:60;display:flex;justify-content:flex-end}
.sheet__scrim{position:absolute;inset:0;background:rgba(15,14,13,.7);animation:fade var(--t) var(--ease) both}
.sheet__panel{
  position:relative;width:min(680px,100%);height:100dvh;overflow-y:auto;
  background:var(--bg);border-left:1px solid var(--line-strong);padding:var(--s5);
  animation:slideLeft var(--t-slow) var(--ease) both;
}
.sheet__close{
  position:absolute;top:18px;right:20px;width:36px;height:36px;
  display:grid;place-items:center;
  background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-pill);
  color:var(--muted);font-size:20px;line-height:1;cursor:pointer;
  transition:color var(--t) var(--ease-soft),background var(--t) var(--ease-soft);
}
.sheet__close:hover{color:var(--text);background:var(--surface-3)}

.phead{display:flex;flex-direction:column;gap:var(--s2);margin-bottom:var(--s5);padding-right:44px}
.phead__name{margin:0;font-size:26px;font-weight:800;letter-spacing:-.03em}
.phead__id{font-size:12.5px;color:var(--dim);font-weight:500}

.mini{
  display:grid;grid-template-columns:repeat(4,1fr);
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);
  overflow:hidden;margin-bottom:var(--s5);
}
.mini__c{padding:var(--s3) var(--s4);border-left:1px solid var(--line);border-top:1px solid var(--line)}
.mini__c:nth-child(-n+4){border-top:0}
.mini__c:nth-child(4n+1){border-left:0}
.mini__k{font-size:11.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--dim)}
.mini__v{font-size:19px;font-weight:800;margin-top:2px}

.sec{margin-bottom:var(--s5)}
.sec__t{
  font-size:11.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--dim);margin:0 0 var(--s3);
}

.tl{display:flex;gap:2px;align-items:flex-end;height:62px}
.tl__b{
  flex:1;background:var(--surface-3);border-radius:3px;min-height:2px;
  transform-origin:bottom;animation:growY var(--t-slow) var(--ease) both;
  animation-delay:calc(var(--i,0) * 22ms);
  transition:background var(--t-fast) var(--ease-soft);
}
.tl__b:hover{background:var(--muted)}
.tl__b.is-peak{background:var(--accent)}

/* ========================================================== сравнение */
.compare__pick{display:flex;flex-direction:column;gap:var(--s3);position:relative}
.chips{display:flex;gap:var(--s2);flex-wrap:wrap}
.chip{
  display:inline-flex;align-items:center;gap:var(--s2);
  background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-pill);
  padding:7px 8px 7px 15px;font-size:13px;font-weight:600;
  animation:rise var(--t) var(--ease) both;
}
.chip button{
  width:22px;height:22px;display:grid;place-items:center;
  background:transparent;border:0;border-radius:var(--r-pill);
  color:var(--dim);cursor:pointer;font-size:16px;line-height:1;
  transition:color var(--t-fast),background var(--t-fast);
}
.chip button:hover{color:var(--c-Kill);background:var(--surface-3)}
.suggest{
  position:absolute;top:52px;left:0;right:0;z-index:30;
  background:var(--surface-2);border:1px solid var(--line-strong);
  border-radius:var(--r-ctl);max-height:280px;overflow-y:auto;
  animation:rise var(--t-fast) var(--ease) both;
}
.suggest__i{
  padding:11px 16px;cursor:pointer;font-size:13px;font-weight:600;
  border-top:1px solid var(--line);transition:background var(--t-fast),color var(--t-fast);
}
.suggest__i:first-child{border-top:0}
.suggest__i:hover{background:var(--surface-3);color:var(--accent)}

.ctable{width:100%;border-collapse:collapse;font-size:13px}
.ctable th,.ctable td{padding:11px var(--s3);text-align:left;border-top:1px solid var(--line)}
.ctable thead th{
  font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--dim);border-top:0;
}
.ctable tbody th{font-weight:600;color:var(--muted)}
/* Лидирующее значение выделяется яркостью, а не акцентом: на экране
   разбора читеров оранжевый должен значить «аномалия», и только её.
   Иначе половина таблицы горит и сигнал теряется. */
.ctable td{font-weight:700;color:var(--muted)}
.ctable .is-best{color:var(--text)}

.flag{
  display:inline-flex;align-items:center;gap:var(--s2);
  font-size:12.5px;font-weight:700;padding:6px 12px;border-radius:var(--r-pill);
  border:1px solid rgba(255,97,101,.45);background:rgba(255,97,101,.12);
  color:var(--c-Kill);margin:0 var(--s1) var(--s1) 0;
}
.flag--warn{border-color:rgba(255,204,77,.4);background:rgba(255,204,77,.1);color:var(--c-Admin)}

.empty{padding:var(--s6) var(--s4);text-align:center;color:var(--dim);font-size:13px;font-weight:500}
.note{color:var(--dim);font-size:12px;font-weight:500;line-height:1.6}

/* =============================================== переключатель сегментов */
.seg{display:inline-flex;gap:2px;background:var(--surface-2);border:1px solid var(--line);
  border-radius:var(--r-pill);padding:3px}
.seg__b{border:0;background:transparent;color:var(--muted);cursor:pointer;
  border-radius:var(--r-pill);padding:7px 15px;font-size:13px;font-weight:600;min-height:34px;
  transition:background var(--t) var(--ease-soft),color var(--t) var(--ease-soft)}
.seg__b:hover{color:var(--text)}
.seg__b.is-active{background:var(--surface-3);color:var(--text)}

/* ============================================================== карта */
.maptools{display:flex;gap:var(--s2);flex-wrap:wrap;align-items:center}
.maptools .input{flex:1;min-width:200px}
.mapwrap{display:grid;grid-template-columns:1fr 268px;gap:var(--s4);align-items:start}
.mapbox{position:relative;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-card);overflow:hidden;aspect-ratio:1}
.mapbox canvas{display:block;width:100%;height:100%;cursor:crosshair}
.maptip{position:absolute;pointer-events:none;background:var(--surface-3);
  border:1px solid var(--line-strong);border-radius:var(--r-xs);
  padding:6px 10px;font-size:12px;font-weight:600;white-space:nowrap;z-index:3}
.maptip b{display:block;font-size:13px}
.maptip span{color:var(--muted);font-weight:500}

.maplist{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);
  max-height:560px;overflow-y:auto}
.mrow{display:flex;align-items:center;gap:var(--s2);padding:9px var(--s3);
  border-top:1px solid var(--line);cursor:pointer;font-size:12.5px;
  transition:background var(--t-fast) var(--ease-soft)}
.mrow:first-child{border-top:0}
.mrow:hover{background:var(--surface-2)}
.mrow__d{width:8px;height:8px;border-radius:50%;flex:0 0 8px;background:var(--st,var(--dim))}
.mrow__n{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0}
.mrow__g{color:var(--dim);font-weight:600;font-size:11.5px}

/* =============================================================== чат */
.chatlist{max-height:60vh;overflow-y:auto}
.msg{display:grid;grid-template-columns:34px 1fr;gap:var(--s3);
  padding:10px var(--s5);border-top:1px solid var(--line);
  animation:rise var(--t) var(--ease) both}
.msg:first-child{border-top:0}
.msg:hover{background:var(--surface-2)}
.msg__av{width:34px;height:34px;border-radius:var(--r-pill);display:grid;place-items:center;
  font-size:13px;font-weight:800;color:var(--accent-ink);
  background:hsl(var(--h,30) 45% 62%);cursor:pointer;user-select:none}
.msg__b{min-width:0}
.msg__h{display:flex;align-items:baseline;gap:var(--s2);flex-wrap:wrap;margin-bottom:2px}
.msg__who{font-weight:700;font-size:13px;cursor:pointer}
.msg__who:hover{color:var(--accent)}
.msg__t{font-size:11.5px;color:var(--dim);font-weight:600}
.msg__t em{font-style:normal;color:var(--line-strong)}
.msg__txt{font-size:13.5px;line-height:1.5;word-break:break-word}
.tag{font-size:10.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
  padding:2px 7px;border-radius:var(--r-pill);border:1px solid var(--line-strong);color:var(--dim)}
.tag--global{color:var(--c-Player);border-color:rgba(69,223,240,.4)}
.tag--team{color:var(--c-Team);border-color:rgba(85,232,172,.4)}
.tag--private{color:var(--c-Chat);border-color:rgba(189,166,255,.45)}
.tag--muted{color:var(--c-Kill);border-color:rgba(255,97,101,.45)}
/* Подсветка обводкой: оригинал сообщения не меняем, это доказательство. */
.bad{color:var(--c-Kill);border-bottom:1px solid rgba(255,97,101,.5);font-weight:700}

.say{display:flex;gap:var(--s2);align-items:center}
.say .input{flex:1}
.say .select{flex:0 0 auto}

/* ============================================================== таблица */
.dtable{width:100%;border-collapse:collapse;font-size:13px}
.dtable th,.dtable td{padding:12px var(--s5);text-align:left;border-top:1px solid var(--line);
  white-space:nowrap}
.dtable thead th{font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--dim);border-top:0}
.dtable tbody tr{transition:background var(--t-fast) var(--ease-soft)}
.dtable tbody tr:hover{background:var(--surface-2)}
.dtable td{font-weight:600;color:var(--muted)}
.dtable td.lead{color:var(--text);font-weight:700;cursor:pointer}
.dtable td.lead:hover{color:var(--accent)}
.dtable .wrap{white-space:normal}

.pill{font-size:11.5px;font-weight:700;padding:4px 10px;border-radius:var(--r-pill);
  border:1px solid var(--line-strong);color:var(--dim);white-space:nowrap}
.pill--on{color:var(--c-Kill);border-color:rgba(255,97,101,.45);background:rgba(255,97,101,.12)}
.pill--off{color:var(--dim)}
.pill--warn{color:var(--c-Admin);border-color:rgba(255,204,77,.4)}

/* ============================================================ галерея */
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:var(--s3)}
.sign{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);
  overflow:hidden;display:flex;flex-direction:column;
  animation:rise var(--t-slow) var(--ease) both;animation-delay:calc(var(--i,0) * 26ms);
  transition:border-color var(--t) var(--ease-soft)}
.sign:hover{border-color:var(--line-strong)}
.sign.is-reported{border-color:rgba(255,97,101,.45)}
.sign__img{aspect-ratio:2/1;background:hsl(var(--h,30) 30% 26%);display:grid;place-items:center;
  color:var(--text);font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  border-bottom:1px solid var(--line)}
.sign__b{padding:var(--s3);display:flex;flex-direction:column;gap:var(--s1);flex:1}
.sign__who{font-size:13px;font-weight:700;cursor:pointer}
.sign__who:hover{color:var(--accent)}
.sign__m{font-size:11.5px;color:var(--dim);font-weight:600}
.sign__acts{display:flex;gap:var(--s1);margin-top:auto;padding-top:var(--s2)}
.sign__acts .btn{flex:1;padding:7px 10px;font-size:12px}

/* ====================================================== комбат и контекст */
.eng{border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden;margin-bottom:var(--s3)}
.eng__h{display:flex;align-items:center;gap:var(--s2);padding:10px var(--s4);
  border-bottom:1px solid var(--line);background:var(--surface-2);font-size:12.5px;font-weight:700}
.eng__h .pill{margin-left:auto}
.hit{display:grid;grid-template-columns:58px 74px 1fr 56px 52px;gap:var(--s2);align-items:center;
  padding:7px var(--s4);border-top:1px solid var(--line);font-size:12px}
.hit:first-child{border-top:0}
.hit--miss{color:var(--dim)}
.hit__b{font-weight:800;font-size:11px;letter-spacing:.04em;text-transform:uppercase}
.hit__b--head{color:var(--c-Kill)}
.hit__w{color:var(--muted);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hit__d{text-align:right;font-weight:700}
.hit__x{text-align:right;color:var(--dim);font-weight:600}
.hit__who{font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.ctx{display:flex;flex-direction:column;gap:2px}
.ctx__row{display:grid;grid-template-columns:62px 108px 1fr 54px;gap:var(--s2);align-items:center;
  padding:7px var(--s3);border-radius:var(--r-xs);font-size:12.5px;
  border-left:3px solid var(--cat,var(--dim))}
.ctx__row.is-anchor{background:var(--accent-soft);border-left-color:var(--accent)}
.ctx__t{color:var(--dim);font-weight:600;font-size:11.5px}
.ctx__e{font-weight:800;font-size:11px;color:var(--cat,var(--muted));
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ctx__d{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500}
.ctx__g{text-align:right;color:var(--dim);font-weight:700;font-size:11.5px}

/* профиль: аватар, флаг, аномалии */
.phead__row{display:flex;align-items:center;gap:var(--s3)}
.avatar{width:54px;height:54px;border-radius:var(--r-pill);flex:0 0 54px;display:grid;
  place-items:center;font-size:20px;font-weight:800;color:var(--accent-ink);
  background:hsl(var(--h,30) 45% 62%)}
.meta__row{display:flex;gap:var(--s2);flex-wrap:wrap;align-items:center;margin-top:var(--s2)}
.mini__c.is-out{background:var(--accent-soft)}
.mini__c.is-out .mini__v{color:var(--accent)}
.mini__s{font-size:10.5px;font-weight:800;color:var(--accent);letter-spacing:.04em}

.grid__tag{font-size:11px;font-weight:700;color:var(--dim);
  border:1px solid var(--line);border-radius:var(--r-xs);padding:1px 6px}

/* ================================================= страница профиля */
.backlink{align-self:flex-start;padding:8px 15px;font-size:13px}

.prof{
  display:grid;grid-template-columns:auto 1fr auto;gap:var(--s5);align-items:center;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);
  padding:var(--s5);animation:rise var(--t-slow) var(--ease) both;
}
.prof__av{
  width:84px;height:84px;border-radius:var(--r-card);flex:0 0 84px;
  display:grid;place-items:center;font-size:34px;font-weight:800;
  color:var(--accent-ink);background:hsl(var(--h,30) 45% 62%);
}
.prof__i{min-width:0}
.prof__name{margin:0;font-size:30px;font-weight:800;letter-spacing:-.03em;line-height:1.15}
.prof__id{
  display:inline-flex;align-items:center;gap:var(--s2);margin-top:var(--s1);
  font-size:13px;color:var(--dim);font-weight:600;cursor:pointer;
  background:transparent;border:0;padding:0;
  transition:color var(--t-fast) var(--ease-soft);
}
.prof__id:hover{color:var(--accent)}
.prof__tags{display:flex;gap:var(--s2);flex-wrap:wrap;margin-top:var(--s3)}
.prof__acts{display:flex;flex-direction:column;gap:var(--s2);align-items:stretch}
.prof__acts .btn{justify-content:center}

/* ==================================================== вкладки профиля */
.tabs{
  display:flex;gap:var(--s1);overflow-x:auto;scrollbar-width:none;
  border-bottom:1px solid var(--line);padding-bottom:0;
}
.tabs::-webkit-scrollbar{display:none}
.tabs__b{
  position:relative;border:0;background:transparent;color:var(--muted);
  padding:12px 16px;min-height:44px;font-size:13.5px;font-weight:600;
  cursor:pointer;white-space:nowrap;
  transition:color var(--t) var(--ease-soft);
}
.tabs__b:hover{color:var(--text)}
.tabs__b.is-active{color:var(--text)}
/* Подчёркивание активной вкладки — единственная акцентная деталь здесь */
.tabs__b.is-active::after{
  content:"";position:absolute;left:12px;right:12px;bottom:-1px;height:2px;
  background:var(--accent);border-radius:2px 2px 0 0;
  animation:grow var(--t) var(--ease) both;
}
.tabpane{display:flex;flex-direction:column;gap:var(--s4);
  animation:fade var(--t) var(--ease) both}

.pgrid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s4)}

/* полоса сессий: день за днём, длина — время в игре */
.slog{display:flex;flex-direction:column;gap:var(--s1)}
.srow{display:grid;grid-template-columns:104px 1fr 72px;gap:var(--s3);align-items:center;
  font-size:12.5px;padding:3px 0}
.srow__d{color:var(--dim);font-weight:600}
.srow__t{height:10px;background:var(--surface-2);border-radius:var(--r-pill);overflow:hidden}
.srow__f{display:block;height:100%;background:var(--muted);border-radius:var(--r-pill);
  transform-origin:left;animation:grow var(--t-slow) var(--ease) both;
  animation-delay:calc(var(--i,0) * 30ms)}
.srow__v{text-align:right;font-weight:700;color:var(--muted)}

/* след лута */
.loot{display:grid;grid-template-columns:62px minmax(0,1fr) minmax(0,1.15fr) 76px;gap:var(--s3);align-items:center;
  padding:9px var(--s4);border-top:1px solid var(--line);font-size:12.5px}
.loot:first-child{border-top:0}
.loot__t{color:var(--dim);font-weight:600;font-size:11.5px}
.loot__i{font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.loot__c{color:var(--muted);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.loot__g{text-align:right;color:var(--dim);font-weight:700;font-size:11.5px}
.loot.is-foreign .loot__i{color:var(--accent)}

@media (max-width:900px){
  .prof{grid-template-columns:auto 1fr;gap:var(--s4)}
  .prof__acts{grid-column:1/-1;flex-direction:row;flex-wrap:wrap}
  .prof__acts .btn{flex:1;min-width:140px}
  .pgrid{grid-template-columns:1fr}
  .loot{grid-template-columns:56px 1fr 68px;row-gap:2px}
  .loot__c{grid-column:1/-1;font-size:11.5px}
}
@media (max-width:560px){
  .prof{padding:var(--s4)}
  .prof__av{width:60px;height:60px;flex-basis:60px;font-size:24px}
  .prof__name{font-size:22px}
  .srow{grid-template-columns:78px 1fr 58px}
  .tabs__b{padding:12px 12px;font-size:13px}
}

/* =========================================================== анимации */
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes slideIn{from{opacity:0;transform:translateX(-12px)}to{opacity:1;transform:none}}
@keyframes slideLeft{from{transform:translateX(28px);opacity:0}to{transform:none;opacity:1}}
@keyframes grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes growY{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes tickIn{from{opacity:0;transform:scaleX(.2)}to{opacity:.8;transform:none}}
@keyframes breathe{0%,100%{opacity:1}50%{opacity:.3}}

/* ============================================================ адаптив */
@media (max-width:1100px){
  .shell{border-left:0;border-right:0}
}
@media (max-width:900px){
  .mapwrap{grid-template-columns:1fr}
  .maplist{max-height:300px}
  .hit{grid-template-columns:52px 1fr 52px;row-gap:2px}
  .hit__w{grid-column:2}
  .hit__x{display:none}
  .ctx__row{grid-template-columns:58px 1fr;row-gap:1px}
  .ctx__d{grid-column:1/-1}
  .ctx__g{display:none}
  .stats{grid-template-columns:repeat(2,1fr)}
  .stat:nth-child(-n+2){border-bottom:1px solid var(--line)}
  .stat:nth-child(odd){border-left:0}
  .grid2{grid-template-columns:1fr}
  .mini{grid-template-columns:repeat(2,1fr)}
  .mini__c:nth-child(n){border-top:1px solid var(--line)}
  .mini__c:nth-child(-n+2){border-top:0}
  .mini__c:nth-child(odd){border-left:0}
  .row{grid-template-columns:62px 1fr auto;row-gap:2px}
  .row__type{grid-column:2}
  .row__body{grid-column:1/-1}
  .row__grid{grid-row:1;grid-column:3}
  .spine{display:none}
  .stream{grid-template-columns:1fr}
  .bar{grid-template-columns:96px 1fr 46px}
}
/* На узком экране навигация уезжает на собственную строку:
   иначе правый блок отбирает всю ширину и разделы становятся
   недоступны. Подписи при этом сохраняются — места хватает. */
@media (max-width:760px){
  .top__in{flex-wrap:wrap;row-gap:0}
  .nav{
    order:3;width:100%;flex:1 0 100%;
    border-top:1px solid var(--line);
    margin-top:var(--s3);padding-top:var(--s2);padding-bottom:2px;
  }
  .panel__note{display:none}
}
@media (max-width:560px){
  /* цели нажатия на тач-экране: минимум 44px */
  .nav__btn,.btn,.input,.select,.check{min-height:44px}
  .shell{padding:0 var(--s3)}
  .view__title{font-size:22px}
  .view__head{flex-wrap:wrap;gap:var(--s1) var(--s3)}
  .stat{padding:var(--s3)}
  .stat__v{font-size:25px}
  .panel__body,.panel__head{padding-left:var(--s4);padding-right:var(--s4)}
  .sheet__panel{padding:var(--s4)}
  .filters .input,.filters .select{min-width:0;width:100%;flex:1 1 100%}
  .filters .check{width:100%;justify-content:center}
  .seg{width:100%;justify-content:space-between}
  .seg__b{flex:1;padding:8px 6px;font-size:12px}
  .msg{grid-template-columns:28px 1fr;padding-left:var(--s4);padding-right:var(--s4)}
  .msg__av{width:28px;height:28px;font-size:12px}
  .say{flex-wrap:wrap}
  .say .input{flex:1 1 100%;order:-1}
  .dtable th,.dtable td{padding:10px var(--s4)}
  .top__in{gap:var(--s2)}
  .nav__btn{padding:9px 13px;font-size:13px}
  .ctable th,.ctable td{padding:10px var(--s2)}
}

/* Пользователь попросил не двигать — не двигаем. Блок должен
   оставаться последним, чтобы перебивать анимации выше. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important;
  }
}