/* Графики (charts.py) и интерактив (app.js, блок «Графики»).
   Все цвета — только через --ch-*: скин переопределяет их одной строкой, например
   :root[data-skin="wg"]{--ch-bat:#f25322;--ch-heat:#f28c22} */
:root{
  --ch-surface:var(--panel,#161a21);          /* фон карточки: кольцо вокруг точек, подложка подписей */
  --ch-surface-2:var(--panel-2,#1c212a);      /* пустые клетки календаря, дорожки */
  --ch-ink:var(--text,#e7eaef);               /* значения, крупные числа */
  --ch-muted:var(--muted,#8a93a2);            /* подписи осей, даты, пояснения */
  --ch-grid:color-mix(in srgb,var(--line,#262d38) 75%,transparent); /* сетка (волосяная линия) */
  --ch-accent:var(--accent,#3fb0e8);          /* «сегодня» в календаре, рамка фокуса */
  --ch-wn8:var(--c-wn8,#b38c18);              /* серия «рейтинг»: WN8, % побед, WTR */
  --ch-bat:var(--c-bat,#4a95d6);              /* серия «количество»: бои, игроки */
  --ch-up:var(--good,#4cc46e);                /* рост ▲ */
  --ch-down:var(--bad,#e5534b);               /* падение ▼ */
  --ch-heat:#45c98a;                          /* календарь: самый активный день (тусклые дни — смесь с --ch-heat-0) */
  --ch-heat-0:var(--panel-2,#1c212a);         /* календарь: день без боёв */
  --ch-area:.34;                              /* непрозрачность площади под линией у линии (дальше — в ноль) */
  --ch-glow:.55;                              /* сила свечения линий/столбиков (0 — выключить) */
  --ch-tip-bg:color-mix(in srgb,var(--bg,#0e1116) 74%,transparent); /* стеклянная подсказка */
  --ch-tip-line:rgba(255,255,255,.09);        /* рамка подсказки */
  --ch-h:210px;                               /* высота области графика */
}
@media (max-width:560px){:root{--ch-h:170px;--ch-rs:.72}}

.chart{position:relative;margin:0;min-width:0}
.chart h3{display:none}

/* ---- шапка: значение крупно + изменение ---- */
.ch-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:4px 16px;margin:2px 0 14px}
.ch-kpi{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 10px}
.ch-v{font-size:30px;font-weight:700;letter-spacing:-.02em;line-height:1.05;color:var(--ch-ink);white-space:nowrap}
.ch-v small{font-size:13px;font-weight:500;letter-spacing:0;color:var(--ch-muted)}
.ch-d{display:inline-flex;align-items:center;gap:5px;align-self:center;padding:2px 9px 2px 7px;border-radius:999px;font-size:12.5px;
  font-weight:600;white-space:nowrap;color:var(--ch-up);background:color-mix(in srgb,var(--ch-up) 13%,transparent)}
.ch-d i{font-style:normal;font-size:9px}
.ch-d.down{color:var(--ch-down);background:color-mix(in srgb,var(--ch-down) 13%,transparent)}
.ch-d.flat{color:var(--ch-muted);background:color-mix(in srgb,var(--ch-muted) 12%,transparent)}
.ch-per{font-size:12px;color:var(--ch-muted);white-space:nowrap}
.chart .sub{font-size:12px;color:var(--ch-muted);max-width:46ch}
.ch-head .sub{text-align:right}
@media (max-width:700px){.ch-head .sub{text-align:left}}
@media (max-width:560px){.ch-v{font-size:25px}}

/* ---- область графика ---- */
.ch-body{position:relative;padding:8px 6px 28px 42px}
.ch-plot{position:relative;height:var(--ch-h);outline:none;touch-action:pan-y;cursor:crosshair;-webkit-tap-highlight-color:transparent}
.ch-plot:focus-visible{box-shadow:0 0 0 2px var(--ch-surface),0 0 0 4px var(--ch-accent);border-radius:4px}
.ch-plot svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.ch-grid line{stroke:var(--ch-grid);stroke-width:1;vector-effect:non-scaling-stroke;shape-rendering:crispEdges}
.ch-grid line:last-child{stroke:color-mix(in srgb,var(--ch-muted) 35%,transparent)}
.ch-y{position:absolute;left:-42px;top:0;bottom:0;width:34px;pointer-events:none}
.ch-y span{position:absolute;right:0;transform:translateY(-50%);font-size:11px;line-height:1;color:var(--ch-muted);
  font-variant-numeric:tabular-nums;white-space:nowrap}
.ch-x{position:absolute;left:0;right:0;top:calc(100% + 9px);height:14px;pointer-events:none}
.ch-x span{position:absolute;transform:translateX(-50%);font-size:11px;line-height:1;color:var(--ch-muted);white-space:nowrap}
.ch-x span.first{transform:none}
.ch-x span.last{transform:translateX(-100%)}
@media (max-width:560px){.ch-x span.alt{display:none}}

/* линия */
.ch-draw{position:absolute;inset:0}
.ch-ln{fill:none;stroke-width:2.25;stroke-linejoin:round;stroke-linecap:round}
.ch-area.bd{opacity:.6}
.ch-glow{fill:none;stroke-width:7;opacity:var(--ch-glow)}
.ch-pt{--rr:calc(var(--r,4px)*var(--ch-rs,1));position:absolute;width:calc(var(--rr)*2);height:calc(var(--rr)*2);margin:calc(var(--rr)*-1) 0 0 calc(var(--rr)*-1);
  border-radius:50%;background:var(--pc,var(--c));box-shadow:0 0 0 2px var(--ch-surface);pointer-events:none}
.ch-pt.now{box-shadow:0 0 0 2px var(--ch-surface),0 0 12px 1px color-mix(in srgb,var(--pc,var(--c)) calc(var(--ch-glow)*100%),transparent)}
.ch-pt.now::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--pc,var(--c));animation:ch-pulse 2.6s cubic-bezier(.2,.6,.3,1) 1.6s infinite}
@keyframes ch-pulse{0%{transform:scale(1);opacity:.55}70%,100%{transform:scale(3.2);opacity:0}}

/* перекрестие и маркер под курсором */
.ch-cross{position:absolute;top:0;bottom:0;width:1px;margin-left:-.5px;pointer-events:none;opacity:0;transition:opacity .15s;
  background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--ch-ink) 45%,transparent) 18%,color-mix(in srgb,var(--ch-ink) 45%,transparent))}
.ch-mark{position:absolute;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;pointer-events:none;opacity:0;transition:opacity .15s;
  background:var(--mc,var(--c));box-shadow:0 0 0 2.5px var(--ch-surface),0 0 16px 3px color-mix(in srgb,var(--mc,var(--c)) 70%,transparent)}
.ch-plot.hov .ch-cross,.ch-plot.hov .ch-mark{opacity:1}
.ch-bar .ch-cross,.ch-bar .ch-mark{display:none}

/* столбики */
.ch-bars{position:absolute;inset:0;display:flex}
.ch-b{flex:1 1 0;min-width:0;height:100%;display:flex;align-items:flex-end;justify-content:center}
.ch-b i{display:block;width:min(26px,calc(100% - 2px));min-height:2px;border-radius:5px 5px 0 0;transform-origin:50% 100%;
  background:linear-gradient(180deg,color-mix(in srgb,var(--c),#fff 14%) 0%,var(--c) 30%,color-mix(in srgb,var(--c) 30%,transparent) 100%);
  transition:opacity .2s,filter .2s}
.ch-b i.z{min-height:0}
.ch-bars.dense .ch-b i{border-radius:2px 2px 0 0;width:calc(100% - 1.5px)}
.ch-b.last i{box-shadow:0 0 18px -4px color-mix(in srgb,var(--c) calc(var(--ch-glow)*100%),transparent)}
.ch-plot.hov .ch-b i{opacity:.32}
.ch-plot.hov .ch-b.on i{opacity:1;filter:brightness(1.18) saturate(1.1);box-shadow:0 0 20px -3px var(--c)}
.ch-avg{position:absolute;left:0;right:0;height:0;border-top:1px dashed color-mix(in srgb,var(--ch-ink) 32%,transparent);pointer-events:none}
.ch-avg span{position:absolute;left:calc(100% + 6px);top:-8px;font-size:10.5px;line-height:15px;color:var(--ch-muted);white-space:nowrap}
.ch-bar .ch-body{padding-right:44px}
.ch-maxl{position:absolute;transform:translate(-50%,calc(-100% - 6px));font-size:11px;font-weight:600;line-height:1;color:var(--ch-ink);
  white-space:nowrap;pointer-events:none}
.ch-maxl.l{transform:translate(-25%,calc(-100% - 6px))}
.ch-maxl.r{transform:translate(-75%,calc(-100% - 6px))}

/* ---- подсказка (стекло) ---- */
.ch-tip{position:absolute;left:0;top:0;z-index:6;pointer-events:none;min-width:128px;max-width:260px;padding:9px 12px 10px;border-radius:12px;
  background:var(--ch-tip-bg);-webkit-backdrop-filter:blur(14px) saturate(1.5);backdrop-filter:blur(14px) saturate(1.5);
  border:1px solid var(--ch-tip-line);box-shadow:0 14px 34px -10px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.06);
  opacity:0;transform:translateY(4px) scale(.97);transition:opacity .16s,transform .16s;font-size:12px;line-height:1.35;color:var(--ch-ink)}
.ch-tip.on{opacity:1;transform:none;transition:opacity .16s,transform .16s,left .14s ease-out,top .14s ease-out}
.ch-tip.jump{transition:opacity .16s,transform .16s}
.ch-tip .t-d{font-size:11px;color:var(--ch-muted);white-space:nowrap}
.ch-tip .t-v{display:flex;align-items:center;gap:8px;margin-top:2px;font-size:20px;font-weight:700;letter-spacing:-.01em;white-space:nowrap}
.ch-tip .t-v::before{content:"";flex:none;width:12px;height:3px;border-radius:2px;background:var(--mc,var(--c))}
.ch-tip .t-v small{font-size:12px;font-weight:500;color:var(--ch-muted);margin-left:-3px}
.ch-tip .t-dl{margin-top:2px;font-size:12px;font-weight:600;color:var(--ch-muted)}
.ch-tip .t-dl.up{color:var(--ch-up)}.ch-tip .t-dl.down{color:var(--ch-down)}
.ch-tip .t-n{margin-top:4px;padding-top:5px;border-top:1px solid var(--ch-tip-line);font-size:11.5px;color:var(--ch-muted)}

/* ---- таблица под графиком (доступность) ---- */
.ch-tbl{margin-top:6px;font-size:12px;color:var(--ch-muted)}
.ch-tbl summary{display:inline-flex;align-items:center;gap:6px;cursor:pointer;list-style:none;opacity:.65;transition:opacity .15s;user-select:none}
.ch-tbl summary::-webkit-details-marker{display:none}
.ch-tbl summary::before{content:"";width:5px;height:5px;border:solid currentColor;border-width:0 1.5px 1.5px 0;transform:rotate(-45deg);transition:transform .15s}
.ch-tbl[open] summary::before{transform:rotate(45deg)}
.ch-tbl summary:hover,.ch-tbl[open] summary{opacity:1}
.ch-tbl table{display:block;max-height:240px;overflow:auto;border-collapse:collapse;margin-top:8px}
.ch-tbl td{padding:3px 18px 3px 0;border-bottom:1px solid var(--ch-grid);font-variant-numeric:tabular-nums}
.ch-tbl td:last-child{color:var(--ch-ink);text-align:right}

/* ---- пусто / одна точка ---- */
.ch-empty .empty,.ch-single .empty{display:grid;justify-items:center;gap:10px;padding:16px 0 8px;color:var(--ch-muted);font-size:13px;text-align:center}
.ch-ghost{width:min(280px,80%);height:54px;overflow:visible}
.ch-ghost path{fill:none;stroke:var(--ch-grid);stroke-width:2;stroke-dasharray:5 6;stroke-linecap:round}
.ch-empty .sub{margin-bottom:4px}
.ch-single .ch-head{margin-bottom:4px}

/* ---- календарь активности ---- */
.ch-hm-scroll{overflow-x:auto;overflow-y:hidden;padding:4px 5px 6px 4px;scrollbar-width:thin;scrollbar-color:var(--ch-grid) transparent}
.ch-hm{display:grid;grid-template-columns:22px minmax(0,1fr);gap:5px 6px;min-width:calc(var(--w)*12px + 28px);max-width:calc(var(--w)*26px + 28px)}
.ch-hm-m{grid-column:2;display:grid;grid-template-columns:repeat(var(--w),minmax(0,1fr));gap:3px;height:14px;font-size:11px;line-height:14px;color:var(--ch-muted)}
.ch-hm-m span{white-space:nowrap;overflow:visible}
.ch-hm-d{position:sticky;left:-4px;z-index:2;background:var(--ch-surface);box-shadow:-6px 0 0 var(--ch-surface);grid-column:1;grid-row:1/3;padding-top:19px;display:grid;grid-template-rows:repeat(7,minmax(0,1fr));gap:3px;font-size:10px;color:var(--ch-muted)}
.ch-hm-d span{display:flex;align-items:center;line-height:1}
.ch-hm-g{grid-column:2;grid-row:2;display:grid;grid-auto-flow:column;grid-template-rows:repeat(7,auto);
  grid-template-columns:repeat(var(--w),minmax(0,1fr));gap:3px}
.ch-hm-g i{display:block;aspect-ratio:1;border-radius:28%;background:var(--ch-heat-0);transition:transform .15s,box-shadow .15s}
.ch-hm-g i.on,.ch-hm-lg i{background:color-mix(in oklab,var(--ch-heat) calc(var(--k)*100%),var(--ch-heat-0))}
.ch-hm-g i.hi{box-shadow:0 0 10px -2px color-mix(in srgb,var(--ch-heat) calc(var(--ch-glow)*100%),transparent)}
.ch-hm-g i.nd{background:transparent;box-shadow:inset 0 0 0 1px var(--ch-grid)}
.ch-hm-g i.fut{background:transparent;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ch-grid) 45%,transparent)}
.ch-hm-g i.now{outline:1.5px solid var(--ch-accent);outline-offset:1px}
.ch-hm-g i[data-t]{cursor:pointer}
.ch-hm-g i.sel{box-shadow:0 0 0 1.5px var(--ch-surface),0 0 0 3px var(--ch-ink);position:relative;z-index:1}
.ch-hm-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 18px;margin-top:10px;font-size:12px;color:var(--ch-muted)}
.ch-hm-sum{display:flex;flex-wrap:wrap;gap:4px 16px}
.ch-hm-sum b{color:var(--ch-ink);font-weight:600}
.ch-hm-lg{display:inline-flex;align-items:center;gap:3px}
.ch-hm-lg i{width:11px;height:11px;border-radius:3px}
.ch-hm-lg i:first-child{margin-left:5px}.ch-hm-lg i:last-child{margin-right:5px}
.ch-heat .ch-tip{min-width:0}
.ch-heat .ch-tip .t-v{font-size:16px}
.ch-heat .ch-tip .t-v::before{background:var(--ch-heat)}

/* ---- горизонтальные полосы (отметки, классность, цвета WN8) ---- */
.ch-hb-r{display:grid;grid-template-columns:var(--lw) minmax(0,1fr);align-items:center;gap:10px;margin:7px 0}
@media (max-width:560px){.ch-hb-r{grid-template-columns:min(var(--lw),104px) minmax(0,1fr)}}
.ch-hb-r b{font-size:12px;font-weight:600;color:var(--ch-muted);text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ch-hb-t{display:flex;align-items:center;gap:2px;height:18px;padding-right:46px}
.ch-hb-t i{flex:none;height:100%;min-width:3px;display:flex;align-items:center;justify-content:center;font-style:normal;font-size:10.5px;
  font-weight:700;border-radius:2px;background:linear-gradient(180deg,color-mix(in srgb,var(--sc),#fff 16%),var(--sc));transition:opacity .15s,filter .15s}
.ch-hb-t i:first-child{border-top-left-radius:5px;border-bottom-left-radius:5px}
.ch-hb-t i:last-of-type{border-top-right-radius:5px;border-bottom-right-radius:5px}
.ch-hb-t:hover i{opacity:.5}
.ch-hb-t i:hover{opacity:1;filter:brightness(1.15)}
.ch-hb-t em{flex:none;margin-left:8px;font-style:normal;font-size:12px;font-weight:600;color:var(--ch-ink);font-variant-numeric:tabular-nums}
.ch-lg{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:12px;font-size:12px;color:var(--ch-muted)}
.ch-lg i{display:inline-block;width:10px;height:10px;margin-right:6px;border-radius:3px;vertical-align:-1px;background:var(--sc)}

/* ---- появление (app.js ставит .ch-a, при попадании в экран — .in) ---- */
.ch-a:not(.in) .ch-draw{clip-path:inset(-20% 100% -20% 0)}
.ch-a.in .ch-draw{clip-path:inset(-20% -2% -20% 0);transition:clip-path 1.4s cubic-bezier(.3,.6,.2,1)}
.ch-a:not(.in) .ch-area{opacity:0!important}
.ch-a.in .ch-area{transition:opacity 1.1s .35s}
.ch-a:not(.in) .ch-pt{opacity:0;transform:scale(.2)}
.ch-a.in .ch-pt{transition:opacity .3s,transform .5s cubic-bezier(.3,1.7,.5,1);transition-delay:calc(var(--o,100)*13ms + 60ms)}
.ch-a:not(.in) .ch-b i{transform:scaleY(0)}
.ch-a.in .ch-b i{transition:transform .9s cubic-bezier(.2,.9,.25,1) calc(var(--i)*var(--st)),opacity .2s,filter .2s,box-shadow .2s}
.ch-a:not(.in) .ch-avg,.ch-a:not(.in) .ch-maxl{opacity:0}
.ch-a.in .ch-avg,.ch-a.in .ch-maxl{transition:opacity .5s .9s}
.ch-a:not(.in) .ch-y,.ch-a:not(.in) .ch-x,.ch-a:not(.in) .ch-grid{opacity:0}
.ch-a.in .ch-y,.ch-a.in .ch-x,.ch-a.in .ch-grid{transition:opacity .6s}
.ch-a:not(.in) .ch-hm-g i{opacity:0;transform:scale(.3)}
.ch-a.in .ch-hm-g i{transition:opacity .35s,transform .5s cubic-bezier(.3,1.5,.5,1),box-shadow .15s;transition-delay:calc(var(--col,0)*14ms)}
.ch-a.in .ch-hm-g i.sel{transition-delay:0s}
.ch-a:not(.in) .ch-hb-t{clip-path:inset(-4px 100% -4px 0)}
.ch-a.in .ch-hb-t{clip-path:inset(-4px -60px -4px 0);transition:clip-path 1s cubic-bezier(.25,.8,.25,1) calc(var(--i)*70ms)}
@media (prefers-reduced-motion:reduce){
  .chart *,.chart *::after{transition:none!important;animation:none!important}
}