/* ── столбики вертикальных графиков (блайнды, типы турниров, HUD, столы) ── */
.chart-bar-striped {
  background-color: #0d9488; /* teal-600 */
  opacity: 0.2;
  background-image: repeating-linear-gradient(
    -45deg,
    transparent,
    transparent 4px,
    rgba(255, 255, 255, 0.25) 4px,
    rgba(255, 255, 255, 0.25) 6px
  );
}

.chart-bar-filled {
  background-color: #0f766e; /* teal-700 */
}

.chart-bar-error-filled {
  background-color: #334155; /* slate-700 */
}

.chart-bar-error-striped {
  background-color: #334155; /* slate-700 */
  background-image: repeating-linear-gradient(
    -45deg,
    transparent,
    transparent 4px,
    rgba(255, 255, 255, 0.15) 4px,
    rgba(255, 255, 255, 0.15) 6px
  );
}

/*
  ── горизонтальный бар «По БИ турниров» ──
  Общая часть обоих значений — нейтральная серая штриховка. Раньше она была
  бирюзовой и занимала почти весь бар, поэтому читалась как «заполненность»,
  хотя показывает чужой результат.
*/
.chart-bar-base {
  background-color: var(--color-c-gray-4);
  opacity: 0.35;
  background-image: repeating-linear-gradient(
    -45deg,
    transparent,
    transparent 4px,
    rgba(255, 255, 255, 0.14) 4px,
    rgba(255, 255, 255, 0.14) 6px
  );
}

/* Промежуток расхождения: привес над планкой уровня и недобор до неё. */
.chart-bar-delta-up {
  background-color: var(--color-c-chart-up);
}

.chart-bar-delta-down {
  background-color: var(--color-c-chart-down);
}



/*
  Подписи значений прямо на графике. Размеры взяты у соседних подписей того же
  графика: 11px как у делений оси, 14px как у названия строки. Шрифт не задаём —
  наследуется Nunito Sans, общий для всего приложения.
*/
.chart-bar-benchmark-label {
  position: absolute;
  bottom: calc(100% + 3px);
  transform: translateX(-50%);
  font-size: 12px;
  font-weight: 300;
  line-height: 1;
  color: var(--color-c-gray-5);
  white-space: nowrap;
  pointer-events: none;
}

.chart-bar-value-label {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  pointer-events: none;
}

/*
  Те же подписи в столбчатых графиках: ось развёрнута, поэтому они стоят по
  центру столбика и отсчитываются от его низа, а не от левого края бара.
*/
.chart-bar-value-label--vertical {
  left: 50%;
  right: auto;
  top: auto;
  bottom: 0;
  transform: translateX(-50%);
  text-align: center;
}

/*
  Подпись планки прижата к правому краю столбика: по центру она ложилась бы
  на цветную зону недобора и терялась на розовом.
*/
.chart-bar-benchmark-label--vertical {
  left: auto;
  right: 2px;
  top: auto;
  bottom: 0;
  transform: none;
  padding-bottom: 2px;
}

/* Подпись недобора стоит внутри серой части, поэтому растёт влево от точки. */
.chart-bar-value-label.is-inside {
  transform: translate(-100%, -50%);
}

.chart-bar-value-label.is-up {
  color: var(--color-c-chart-up-soft);
}

.chart-bar-value-label.is-down {
  color: var(--color-c-chart-down-soft);
}

/* Подпись, развёрнутая внутрь полосы, лежит на самой заливке: светлый тон на
   ней не читается, поэтому берём тёмный. */
.chart-bar-value-label.on-fill.is-down {
  color: var(--color-c-chart-down-ink);
}

.chart-bar-value-label.on-fill.is-up {
  color: var(--color-c-gray-1);
}

.chart-horizontal-container {
  position: relative;
  width: 100%;
  padding-bottom: 32px;
}

.chart-grid {
  position: absolute;
  left: 120px;
  right: 0;
  top: 0;
  bottom: 32px;
}

/* Деления стоят каждое на своей позиции: влево от нуля шкала логарифмическая. */
.chart-grid-line {
  position: absolute;
  top: 0;
  width: 1px;
  height: 100%;
  background-image: repeating-linear-gradient(
    to bottom,
    rgba(75, 85, 99, 0.4),
    rgba(75, 85, 99, 0.4) 4px,
    transparent 4px,
    transparent 8px
  );
}

/*
  Ось нуля на шкале, уходящей в минус. Штрихи вдвое длиннее, чем у сетки, и
  линия немного выступает за края области — так она читается как отдельная
  отметка, а не как ещё одно деление.
*/
.chart-zero-line {
  position: absolute;
  top: -6px;
  bottom: -6px;
  /* Два пикселя и полная непрозрачность: линия в один пиксель стояла вплотную
     к краю серой зоны и читалась как её граница, а не как отметка нуля. */
  width: 2px;
  transform: translateX(-1px);
  /* Поверх баров: сетку они закрывают собой, и ноль вместе с ней пропадал. */
  z-index: 3;
  background-image: repeating-linear-gradient(
    to bottom,
    var(--color-c-foreground),
    var(--color-c-foreground) 9px,
    transparent 9px,
    transparent 15px
  );
}

.chart-x-axis {
  position: absolute;
  left: 120px;
  right: 0;
  bottom: 0;
  height: 32px;
  padding-top: 8px;
}

.chart-x-axis-label {
  position: absolute;
  top: 8px;
  transform: translateX(-50%);
  font-size: var(--text-caption);
  line-height: 1.2;
  color: var(--color-c-gray-5);
  text-align: center;
  white-space: nowrap;
}

.chart-bars-area {
  position: relative;
  margin-left: 120px;
  padding: 8px 0;
}

.chart-bar-row {
  display: flex;
  align-items: center;
  margin-bottom: 16px;
  position: relative;
}

.chart-bar-row:last-child {
  margin-bottom: 0;
}

.chart-bar-label {
  position: absolute;
  left: -120px;
  width: 110px;
  font-size: var(--text-caption);
  line-height: 1.2;
  color: #e5e7eb;
  text-align: right;
  padding-right: 10px;
}

.chart-bar-wrapper {
  flex: 1;
  position: relative;
  display: flex;
  align-items: center;
}

.chart-bar-container {
  position: relative;
  width: 100%;
}

.chart-bar {
  position: absolute;
  left: 0;
  top: 0;
  transition: all 0.3s ease;
}

/* Столбчатый вариант: отсчёт от низа, поэтому верхнюю привязку снимаем —
   иначе top: 0 вместе с height растянул бы отрезок от потолка карточки. */
.chart-bar--vertical {
  top: auto;
  bottom: 0;
}

.chart-bar:hover {
  opacity: 0.9;
}

.chart-bar-base:hover {
  opacity: 0.35;
}

.chart-bar-striped:hover {
  opacity: 0.2;
}

/* Верхушка столбика в вертикальных графиках. */
.chart-bar-peak-indicator {
  position: absolute;
  top: 0;
  width: 3px;
  border-radius: 0 0.5rem 0.5rem 0;
  background-color: #5eead4; /* teal-300 */
  box-shadow: 0 0 12px rgba(94, 234, 212, 0.6);
}

.chart-bar-error-peak-indicator {
  background-color: var(--color-c-gray-5);
  box-shadow: 0 0 12px rgba(159, 159, 169, 0.55);
}

/*
  Акцентная кромка — один стиль на все графики: верхушка столбика в вертикальных
  и разделитель среднего по пулу в горизонтальном. Раньше эти 4 пикселя со
  свечением жили в трёх местах порознь — инлайном в шаблоне столбика и двумя
  почти одинаковыми классами здесь, — и разъезжались по толщине и цвету.
*/
.chart-accent-edge {
  background-color: #5eead4; /* teal-300 */
  box-shadow: 0 0 12px rgba(94, 234, 212, 0.6);
}

/* Приглушённая кромка: столбик в состоянии ошибки. Тон светло-серый из палитры
   подписей — тёмно-синий #62748e на почти чёрном фоне не читался. */
.chart-accent-edge--muted {
  background-color: var(--color-c-gray-5);
  box-shadow: 0 0 12px rgba(159, 159, 169, 0.55);
}

/* Кромка на результате игрока, когда он не дотянул до среднего по фонду. */
.chart-accent-edge--negative {
  background-color: #ffa2b4; /* rose-300 */
  box-shadow: 0 0 12px rgba(255, 99, 126, 0.6);
}

/*
  Разделитель на среднем EV по пулу. Толщина и свечение одинаковые на любой
  строке: высота бара показывает объём выборки и к самой планке отношения не
  имеет, поэтому меняться вместе с ней засечке незачем.
*/
.chart-bar-benchmark-marker {
  position: absolute;
  top: 0;
  width: 4px;
  height: 100%;
  border-radius: 0.5rem;
}

/*
  ── точки линейных графиков (профит/ABI/дистанция, аналитика финансов, радар) ──
  При наведении точка слегка вырастает и светится тем же тоном, что и акцентные
  кромки столбиков. Transform вместо размеров: геометрия графика не дёргается,
  анимация дешёвая.
*/
.chart-dot {
  transition: transform 150ms ease-out, box-shadow 150ms ease-out;
}

.chart-dot:hover,
.chart-dot:focus-visible {
  transform: scale(1.4);
  box-shadow: 0 0 12px rgba(94, 234, 212, 0.6); /* как .chart-accent-edge */
}

/* Серая точка-предупреждение светится приглушённо, как кромка ошибки. */
.chart-dot--muted:hover,
.chart-dot--muted:focus-visible {
  box-shadow: 0 0 12px rgba(159, 159, 169, 0.55);
}

/* Значок «!» у среза без раздач: красноватое свечение видно всегда,
   при наведении на колонку оно разгорается. Тень живёт здесь, а не
   в style — инлайн перебивал бы любое правило :hover. */
.chart-dot--alert {
  box-shadow: 0 0 8px rgba(248, 113, 113, 0.45);
}

.chart-column:hover .chart-dot--alert,
.chart-dot--alert:hover,
.chart-dot--alert:focus-visible {
  box-shadow: 0 0 14px rgba(248, 113, 113, 0.7);
}

/*
  SVG-точки графика профиля. У SVG-элемента transform по умолчанию
  считается от угла холста (transform-box: view-box, origin 0 0), и scale
  уводил точку на 0.4·cx вправо: курсор терял её, наведение снималось,
  точка возвращалась под курсор — и так по кругу. fill-box масштабирует
  от центра самого кружка.

  Наведение ловит не сама точка, а прозрачная зона вокруг неё
  (.chart-dot-hit — группа из зоны и точки): зона крупнее выросшей точки
  и своих размеров не меняет, поэтому никакая анимация не выведет точку
  из-под курсора, а тултип не поедет за её габаритом. box-shadow к SVG
  не применяется — свечение даёт drop-shadow.
*/
circle.chart-dot {
  transform-box: fill-box;
  transform-origin: center;
  pointer-events: none;
  transition: transform 150ms ease-out, filter 150ms ease-out;
}

.chart-dot-hit {
  cursor: help;
  outline: none;
}

.chart-dot-hit:hover circle.chart-dot,
.chart-dot-hit:focus-visible circle.chart-dot {
  transform: scale(1.4);
  filter: drop-shadow(0 0 6px rgba(94, 234, 212, 0.6));
}

.chart-dot-hit:hover circle.chart-dot--muted,
.chart-dot-hit:focus-visible circle.chart-dot--muted {
  filter: drop-shadow(0 0 6px rgba(159, 159, 169, 0.55));
}

/*
  ── пустое состояние: срез без раздач ──
  Панели остаются на месте (колонки сравнения должны совпадать по высоте),
  но гасятся и мягко «дышат» — видно, что это заготовка под данные, а не
  посчитанные нули. Пульс медленный и неглубокий: страница статов большая,
  резкое мерцание сотни таблеток раздражало бы.
*/
.stats-empty {
  opacity: 0.45;
  filter: grayscale(0.85);
  transition: opacity 200ms ease-out, filter 200ms ease-out;
}

.stats-empty-pulse,
.stats-empty .stat-pill {
  animation: stats-empty-breathe 3s ease-in-out infinite;
}

/* Сдвиг фазы по колонкам сетки: волна вместо синхронного мигания сотни ячеек. */
.stats-empty .stat-pill:nth-child(3n + 2) { animation-delay: 0.4s; }
.stats-empty .stat-pill:nth-child(3n) { animation-delay: 0.8s; }

@keyframes stats-empty-breathe {
  0%, 100% { opacity: 0.55; }
  50% { opacity: 1; }
}

/* Уважаем системную настройку «меньше движения». */
@media (prefers-reduced-motion: reduce) {
  .stats-empty-pulse,
  .stats-empty .stat-pill {
    animation: none;
  }
}

/* Плашка «нет данных» над приглушёнными панелями — фон подсказок проекта. */
.stats-empty-note {
  background-color: var(--color-c-tooltip);
}

/* Animation initial state - bars hidden until JS animates them */
.chart-bar-animated .chart-bar {
  transform: scaleX(0);
  transform-origin: left center;
  opacity: 0;
}

.chart-bar-animated .chart-bar-peak-indicator,
.chart-bar-animated .chart-bar-benchmark-marker {
  opacity: 0;
  transform: translateX(-10px);
}


/* Наведение на столбчатый график: реагирует вся колонка, а не тонкая полоска
   расхождения — попасть в неё курсором почти невозможно. Подсветка мягкая:
   фон колонки чуть проявляется, сами отрезки становятся ярче, верхняя кромка
   приподнимается. Тот же язык отклика, что у точек графиков (.chart-dot). */
.chart-column-hit {
  background: transparent;
  transition: background 150ms ease-out;
  pointer-events: none;
}

.chart-column:hover .chart-column-hit {
  background: rgba(255, 255, 255, 0.04);
}

.chart-column:hover .chart-bar {
  filter: brightness(1.15);
}

.chart-column:hover .chart-accent-edge {
  transform: translateY(-1px);
  box-shadow: 0 0 14px rgba(70, 236, 213, 0.55);
}

.chart-column .chart-accent-edge {
  transition: transform 150ms ease-out, box-shadow 150ms ease-out;
}

.chart-column:hover .chart-bar-value-label {
  transform: translateY(-2px);
}

.chart-column .chart-bar-value-label {
  transition: transform 150ms ease-out;
}

/* Горизонтальный бар — тот же отклик на наведение, что у столбчатых колонок:
   строка подсвечивается целиком, отрезки светлеют, кромка со значением
   разгорается. Раньше строка молчала, и было непонятно, к какой из семи
   категорий относится всплывшая подсказка. */
.chart-bar-container {
  border-radius: 8px;
  transition: background 150ms ease-out;
}

.chart-bar-container:hover {
  background: rgba(255, 255, 255, 0.04);
}

.chart-bar-container:hover .chart-bar {
  filter: brightness(1.15);
}

.chart-bar-container .chart-accent-edge {
  transition: box-shadow 150ms ease-out;
}

.chart-bar-container:hover .chart-accent-edge {
  box-shadow: 0 0 14px rgba(70, 236, 213, 0.55);
}


/* Подписи графиков — две роли на всю страницу «Игровой статистики»:
   деления шкалы и названия категорий. Размер и цвет берутся из токенов
   дизайн-системы, чтобы блоки не разъезжались по типографике. */
.chart-axis-label {
  font-size: var(--text-caption);
  line-height: 1.2;
  color: var(--color-c-gray-5);
  white-space: nowrap;
}

.chart-category-label {
  font-size: var(--text-caption);
  line-height: 1.2;
  color: #e5e7eb;
  white-space: nowrap;
}