/* ============================================================
   Страница профиля игрока — редизайн: hero-карточка, блок сессий,
   современные анимированные графики, цветовая шкала винрейта.
   Подключается после style.css и tank-hud.css, переопределяет их.
   ============================================================ */

/* ---- Цвет процента побед: до 50 белый, 50–60 зелёный, 60–70 синий, 70+ фиолетовый.
   Дублируем с усиленной специфичностью — .metric-card strong и подобные
   правила из style.css задают свой color и иначе перебивают классы. ---- */
.wr-white,  .metric-card strong.wr-white,  .sess-stat strong.wr-white,
.mchart-val.wr-white,  .hbar-val.wr-white,  #tanksBox .tank-table tr td.wr-white  { color: #dfe5df; }
.wr-green,  .metric-card strong.wr-green,  .sess-stat strong.wr-green,
.mchart-val.wr-green,  .hbar-val.wr-green,  #tanksBox .tank-table tr td.wr-green  { color: #8fd13f; }
.wr-blue,   .metric-card strong.wr-blue,   .sess-stat strong.wr-blue,
.mchart-val.wr-blue,   .hbar-val.wr-blue,   #tanksBox .tank-table tr td.wr-blue   { color: #4fa8ff; }
.wr-purple, .metric-card strong.wr-purple, .sess-stat strong.wr-purple,
.mchart-val.wr-purple, .hbar-val.wr-purple, #tanksBox .tank-table tr td.wr-purple { color: #c26bff; }

/* ---- Hero-карточка игрока ---- */

.profile-hero {
  position: relative;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: var(--shadow-2);
}

.profile-hero-banner {
  position: relative;
  z-index: 1;
  /* 220 px было под кнопки, стоявшие абсолютом у нижнего края; после переезда
     ряда действий под баннер лишняя высота оставалась пустой полосой. */
  min-height: 168px;
  padding: 28px 26px 20px;
  background:
    radial-gradient(90% 140% at 12% 0%, rgba(255, 201, 77, 0.14), transparent 55%),
    radial-gradient(70% 120% at 88% 10%, rgba(73, 243, 214, 0.08), transparent 60%),
    linear-gradient(160deg, #141a2c 0%, #1b1430 45%, #131120 75%, #100e18 100%);
  border-bottom: 1px solid var(--border);
  overflow: hidden;
}

/* Фон профиля — отдельный слой-сиблинг баннера (см. .profile-hero-bleed
   ниже): баннер сверху остаётся прозрачным, чтобы картинка была видна и
   в его окне, и в полосе, вылезающей за карточку на всю ширину окна. */
.profile-hero-banner.has-custom-bg { background: transparent; border-bottom: none; }

/* Со своим фоном баннер и полоса статистики — один цельный блок: шов и
   отдельная подложка карточек убраны, фон (.profile-hero-bleed) тянется под
   оба сразу (высоту считает syncProfileHeroBleed в player.js). */
.profile-hero.has-custom-bg .profile-metric-row { position: relative; z-index: 1; border-top: none; }
.profile-hero.has-custom-bg .profile-hero-actions { position: relative; z-index: 1; }
/* Со своим фоном рамка карточки и рамки плиток статистики лишние: роль
   границы берёт на себя сама подложка. */
.profile-hero.has-custom-bg { border-color: transparent; }
/* Плитки поверх своего фона — просто затемнение, без backdrop-filter. Размытие
   в два пикселя поверх фотографии почти не читалось, а стоило браузеру снимка
   и повторного размытия подложки на каждый кадр — и это ровно у тех, у кого
   свой фон в профиле стоит. Отсюда и жалобы «шапка лагает у некоторых».
   Взамен фон плитки чуть плотнее: текст поверх пёстрой картинки читается так
   же, как читался с размытием. */
.profile-hero.has-custom-bg .metric-card {
  background: rgba(10, 14, 12, 0.52);
  border-color: transparent;
}

/* Тонкая техно-сетка + акцентная линия сверху */
.profile-hero-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: linear-gradient(180deg, rgba(0,0,0,0.9), transparent 80%);
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0.9), transparent 80%);
  pointer-events: none;
}

.profile-hero-banner::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent) 30%, var(--accent) 70%, transparent);
  opacity: 0.75;
}

.profile-hero-glow {
  position: absolute;
  top: -60px; left: 10%;
  width: 340px; height: 160px;
  /* Размытия здесь нет намеренно. Пятно и так задано радиальным градиентом с
     мягким краем — blur(10px) поверх него на глаз ничего не менял, зато
     держал слой с фильтром, который браузер пересчитывает на каждом кадре
     бесконечной анимации. В ангаре этот же профиль лежит над WebGL-холстом
     (см. #siteProfileMount), и там пересчёт шёл поверх живой сцены — шапка
     заметно подтормаживала при открытии «Статистики». */
  background: radial-gradient(closest-side, rgba(255, 201, 77, 0.22), transparent);
  pointer-events: none;
  animation: heroGlowDrift 9s ease-in-out infinite alternate;
}

@keyframes heroGlowDrift {
  from { transform: translateX(0); opacity: 0.85; }
  to { transform: translateX(120px); opacity: 0.55; }
}

@media (prefers-reduced-motion: reduce) {
  .profile-hero-glow { animation: none; }
}

.profile-hero-main {
  position: relative;
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}

/* Буквенный плейсхолдер — только когда своей аватарки нет: центрируется
   внутри того же шестигранного каркаса, что и картинка (см. ниже). */
.profile-avatar {
  width: 64px;
  height: 64px;
  flex: none;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Oswald", "Inter", sans-serif;
  font-size: 30px;
  font-weight: 700;
  color: var(--accent-ink);
  background: var(--accent-grad);
  box-shadow: 0 8px 26px rgba(255, 201, 77, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

/* ---- Своя аватарка/фон (см. uploads/avatars, uploads/profile-backgrounds) ---- */

.profile-avatar-wrap { position: relative; flex: none; width: 70px; height: 70px; }

/* Шестигранная рамка — как в игре у иконок-эмблем: тонкое кольцо-градиент
   снаружи, само изображение (или буква по умолчанию) обрезано тем же
   контуром на пару пикселей внутрь. */
.profile-avatar-hex {
  position: absolute;
  inset: 0;
  clip-path: polygon(50% 0%, 93.3% 25%, 93.3% 75%, 50% 100%, 6.7% 75%, 6.7% 25%);
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0.06));
  display: flex;
  align-items: center;
  justify-content: center;
}

.profile-avatar-hex-inner {
  position: absolute;
  inset: 3px;
  clip-path: polygon(50% 0%, 93.3% 25%, 93.3% 75%, 50% 100%, 6.7% 75%, 6.7% 25%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Oswald", "Inter", sans-serif;
  font-size: 29px;
  font-weight: 700;
  color: var(--accent-ink);
  background: var(--accent-grad);
}
.profile-avatar-hex-inner.has-pic { background: var(--surface-2); }
.profile-avatar-hex-inner img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Карандаш фона — в правом верхнем углу баннера: на аватарке его место
   занимает переключение в режим ангара, там смена фона — часть игрового
   интерфейса, а не этой кнопки. */
.profile-bg-edit {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(10, 14, 12, 0.7);
  color: var(--text-dim);
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  backdrop-filter: blur(4px);
}
.profile-bg-edit:hover { color: var(--text); border-color: var(--border-strong); }

/* Фон профиля: слой в границах карточки — края картинки совпадают с краями
   рамки, наружу ничего не вылезает. Высоту (баннер + полоса статистики)
   считает JS (см. syncProfileHeroBleed в player.js). Синий тон специально
   бледный — фон должен угадываться, а не спорить с содержимым. */
.profile-hero-bleed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  border-radius: var(--radius) var(--radius) 0 0;
}
.profile-hero-bleed::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(160deg, rgba(20, 26, 44, 0.52) 0%, rgba(27, 20, 48, 0.5) 45%, rgba(19, 17, 32, 0.64) 100%),
    var(--profile-bg-image) center 50% / cover no-repeat;
}

/* ---- Пикер аватарки/фона ---- */

.pcust-overlay {
  position: fixed;
  inset: 0;
  background: rgba(6, 8, 7, 0.72);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 200;
  padding: 20px;
}

.pcust-modal {
  width: 100%;
  max-width: 560px;
  max-height: 84vh;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  box-shadow: var(--shadow-2);
  overflow: hidden;
}

.pcust-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
}
.pcust-title { font-family: "Oswald", sans-serif; font-size: 16px; font-weight: 700; }
.pcust-close {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--surface-2); border: 1px solid var(--border);
  color: var(--text-dim); cursor: pointer; font-size: 13px;
}
.pcust-close:hover { color: var(--text); }

.pcust-tabs { display: flex; gap: 8px; padding: 12px 16px 0; }
.pcust-tab {
  padding: 7px 14px; border-radius: 999px; border: 1px solid var(--border);
  background: var(--surface-2); color: var(--text-dim); font-size: 13px; font-weight: 600; cursor: pointer;
}
.pcust-tab.active { background: var(--accent); color: #14180f; border-color: var(--accent); }

.pcust-body { padding: 14px 16px; overflow-y: auto; flex: 1; }

.pcust-grid { display: grid; gap: 10px; }
.pcust-grid-avatar { grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); }
.pcust-grid-bg { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }

.pcust-item {
  padding: 0; border-radius: 10px; border: 2px solid transparent; cursor: pointer;
  background: var(--surface-2); overflow: hidden; aspect-ratio: 1 / 1;
}
.pcust-grid-bg .pcust-item { aspect-ratio: 4 / 3; }
.pcust-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pcust-item.active { border-color: var(--accent); }
.pcust-item:hover { border-color: var(--border-strong); }

.pcust-foot { display: flex; gap: 10px; padding: 12px 16px; border-top: 1px solid var(--border); }
.pcust-clear-btn {
  flex: 1; padding: 8px; border-radius: var(--radius-sm); border: 1px solid var(--border);
  background: var(--surface-2); color: var(--text-dim); font-size: 12.5px; cursor: pointer;
}
.pcust-clear-btn:hover { color: var(--text); border-color: var(--border-strong); }

.profile-hero-id { min-width: 0; }

.profile-hero-title-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.profile-nick {
  margin: 0;
  font-size: 37px;
  line-height: 1.1;
  letter-spacing: -0.02em;
  text-transform: none;
}

/* Клантег — после ника */
.profile-clan-tag {
  color: var(--accent);
  font-weight: 800;
  font-size: 22px;
  letter-spacing: -0.01em;
  text-decoration: none;
}
a.profile-clan-tag:hover { text-decoration: underline; }

.copy-id-btn {
  width: 33px;
  height: 33px;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-dim);
  cursor: pointer;
  padding: 0;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;
}

.copy-id-btn svg { width: 17px; height: 17px; }
.copy-id-btn:hover { color: var(--accent); border-color: var(--accent); background: rgba(255, 201, 77, 0.08); transform: translateY(-1px); }
.copy-id-btn.copied { color: var(--green); border-color: var(--green); background: rgba(143, 209, 63, 0.1); }

.profile-hero-sub {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 7px;
  color: var(--muted);
  font-size: 15px;
}

.profile-hero-sub::before { content: none; }

.profile-id-hint {
  color: var(--text-dim);
  font-size: 12.5px;
  font-weight: 600;
  padding: 2px 9px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid var(--line-soft);
}

.profile-online-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 8px rgba(143, 209, 63, 0.7);
  flex: none;
}

/* Ряд действий вынесен из баннера и стоит под ним, прижатый вправо: поверх
   баннера кнопки спорили за строку с ником и резали фон. Все три —
   одинаковые иконки без подписей, различаются только смыслом. */
/* Ряд действий стоит отдельной строкой между карточкой профиля и
   достижениями. Кнопки минимальные — только иконки. */
/* Ряд переносится: на узком экране пять кнопок в строку не влезали и последние
   уезжали за край окна. Подписи при этом сохраняем — без них «сравнить» и
   «обновить» различаются только рисунком стрелок. */
.profile-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
  margin: 8px 0 0;
  padding: 0;
}

.profile-hero-actions .hero-btn-icon {
  width: 32px;
  height: 32px;
  min-height: 32px;
  padding: 0;
  justify-content: center;
  border-radius: 3px;
}

.profile-hero-actions .hero-btn-icon svg { width: 15px; height: 15px; }

/* Кнопка сравнения — с подписью, а не квадратной иконкой рядом с обновить/
   выйти: это единственное действие в ряду, ведущее на отдельную страницу, и
   без текста стрелки читались как «обновить», а не «сравнить». */
.profile-hero-actions #comparePlayerBtn {
  height: 32px;
  padding: 0 14px;
  gap: 6px;
  font-size: 12.5px;
}
.profile-hero-actions #comparePlayerBtn svg { width: 15px; height: 15px; flex: none; }

/* «Обновить» и «Выйти» — с подписями: на широком экране места хватает, а две
   похожие стрелки без текста различались только наведением. На узком экране
   (ниже) текст прячется и кнопки снова становятся квадратными иконками. */
.profile-hero-actions .hero-btn-labeled {
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 14px;
  gap: 6px;
  font-size: 12.5px;
}
.profile-hero-actions .hero-btn-labeled svg { width: 15px; height: 15px; flex: none; }

@media (max-width: 760px) {
  .profile-nick { font-size: 27px; }
  /* Блок ника тянется на остаток строки, иначе при длинной подписи
     «#id · Был в бою…» он не влезает рядом с аватаром и уезжает под него. */
  .profile-hero-id { flex: 1 1 0; }
  .profile-hero-sub { flex-wrap: wrap; row-gap: 4px; }
}

/* Телефон: аватар компактный и стоит слева от ника в одну строку —
   большой квадрат над ником съедал половину экрана. */
@media (max-width: 640px) {
  /* На телефоне аватар компактный, действия — своей строкой, банер не
     обязан тянуть 168px из десктопной раскладки под тот же контент. */
  .profile-hero-banner { min-height: 108px; }
  .profile-hero-main { gap: 12px; }
  .profile-avatar {
    width: 44px;
    height: 44px;
    align-self: flex-start;
    margin-top: 2px;
    font-size: 21px;
    box-shadow: 0 4px 14px rgba(255, 201, 77, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.4);
  }
  .profile-avatar-wrap { width: 44px; height: 44px; align-self: flex-start; margin-top: 2px; }
  .profile-avatar-hex-inner { font-size: 19px; }
  .profile-nick { font-size: 24px; }
  .profile-clan-tag { font-size: 17px; }
  .copy-id-btn { width: 26px; height: 26px; }
  .copy-id-btn svg { width: 13px; height: 13px; }
  /* Подпись под ником — строчным текстом, а не flex: при переносе точка
     статуса остаётся перед «Был в бою…», а не повисает после #id. */
  /* Подпись «был в бою» — вдвое мельче ника: это служебная строка, а на
     телефоне она отъедала место у самого имени. */
  .profile-hero-sub { display: block; margin-top: 4px; line-height: 1.5; font-size: 7.5px; }
  .profile-hero-sub .profile-online-dot { width: 4px; height: 4px; }
  .profile-hero-sub .profile-online-dot { display: inline-block; vertical-align: middle; margin: 0 4px 0 6px; }
  /* Плашка #id на телефоне только съедает место — прячем визуально
     (в разметке остаётся, кнопка «скопировать» работает как раньше). */
  .profile-hero-sub .profile-id-hint { display: none; }
  .profile-hero-sub .profile-online-dot { margin-left: 0; }

  /* Кнопки действий поджимаем, чтобы весь ряд с подписями умещался в одну-две
     строки, а не расползался по одной кнопке на строку. */
  .profile-hero-actions { gap: 5px; }
  .profile-hero-actions .hero-btn { min-width: 0; padding: 0 9px; font-size: 11.5px; gap: 5px; }
  .profile-hero-actions #comparePlayerBtn { padding: 0 9px; font-size: 11.5px; }
  .profile-hero-actions .hero-btn svg { width: 14px; height: 14px; flex: none; }
  .profile-hero-actions .hero-btn-icon { width: 30px; height: 30px; min-height: 30px; padding: 0; }
  /* Подписи «Обновить»/«Выйти» на телефоне не влезают: ряд и так переносится
     на две строки. Оставляем иконки. */
  .profile-hero-actions .hero-btn-labeled {
    width: 30px;
    height: 30px;
    min-height: 30px;
    padding: 0;
    justify-content: center;
  }
  .profile-hero-actions .hero-btn-labeled .hero-btn-text { display: none; }
}

.hero-btn { position: relative; }

.hero-btn-ghost { background: transparent; border-color: var(--line-soft); color: var(--text-dim); }
.hero-btn-ghost:hover:not(:disabled) { color: var(--text); }

.soon-chip {
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--accent-ink);
  background: var(--accent-grad);
  border-radius: 4px;
  padding: 1.5px 5px;
  margin-left: 2px;
}

/* Тост-заглушка */
.site-toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  transform: translate(-50%, 16px);
  background: rgba(18, 24, 20, 0.96);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  color: var(--text);
  font-size: 14px;
  font-weight: 600;
  padding: 11px 20px;
  z-index: 120;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
  box-shadow: var(--shadow-2);
}

.site-toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ---- Общие секции ---- */

.section-title-sm {
  margin: 0;
  font-size: 19px;
  letter-spacing: -0.01em;
}

/* ---- Блок «Сессии» ---- */

.sessions-block {
  position: relative;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background:
    radial-gradient(120% 90% at 50% -20%, rgba(255, 201, 77, 0.05), transparent 55%),
    linear-gradient(180deg, #171c19 0%, #131714 45%, #10130f 100%);
  padding: 20px 22px 22px;
  margin-bottom: 20px;
  box-shadow: var(--shadow-1), inset 0 1px 0 rgba(255, 255, 255, 0.04);
  overflow: hidden;
  transition: border-color 0.2s ease;
}

/* Одна тонкая акцентная линия сверху — фирменный янтарный, без «RGB» */
.sessions-block::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 5%, rgba(255, 201, 77, 0.55) 50%, transparent 95%);
}

.sessions-block > * { position: relative; }

.sessions-block:not(.open):hover { border-color: var(--border-strong); }

.sessions-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.sessions-sub {
  color: var(--text-faint);
  font-size: 12.5px;
  margin-top: 3px;
  display: block;
}

/* Заголовок-тумблер: блок свёрнут по умолчанию, разворачивается по клику */
.sessions-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  color: var(--text);
  font-family: inherit;
  text-align: left;
}

.sessions-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.sessions-title::before {
  content: '';
  display: inline-block;
  width: 3px;
  height: 16px;
  border-radius: 1px;
  background: var(--accent);
}

/* Шеврон-кружок — общий вид со всеми сворачиваемыми блоками профиля
   (см. .bb-chev в best-battles.css и .pgoal-chev в player-goals.css):
   раньше это была голая галочка, и она читалась как опечатка, а не кнопка. */
.sess-chev {
  flex: none;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.05);
  color: #dfe5df;
  font-style: normal;
  font-size: 15px;
  line-height: 1;
  transition: transform 0.25s ease, color 0.15s ease, border-color 0.15s ease;
}

.sessions-toggle:hover .sess-chev,
.eff-collapse:hover .sess-chev { color: var(--accent); border-color: rgba(255, 201, 77, 0.35); }
.sessions-block.open .sess-chev,
.eff-collapse.open .sess-chev {
  color: var(--accent);
  border-color: rgba(255, 201, 77, 0.35);
  transform: rotate(180deg);
}
.sessions-block.open .sessions-toggle { margin-bottom: 16px; }

/* Ряд управления: вкладки слева, выбор периода справа */
.sessions-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.sessions-controls .sessions-tabs { margin-bottom: 0; border-bottom: none; }

/* Легенда общего графика */
.sess-legend {
  display: flex;
  justify-content: center;
  gap: 18px;
  flex-wrap: wrap;
  padding: 8px 0 2px;
}

.sess-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-dim);
}

.sess-legend-item i {
  display: inline-block;
  width: 16px;
  height: 3px;
  border-radius: 2px;
}

/* Выпадающее окно выбора периода */
.sess-period { position: relative; }

.sess-period-btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px 16px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border);
  color: var(--text);
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.sess-period-btn i { font-style: normal; font-size: 11px; color: var(--text-dim); transition: transform 0.2s ease; }
.sess-period-btn:hover, .sess-period-btn.open { border-color: var(--accent); }
.sess-period-btn.open i { transform: rotate(180deg); }

.sess-period-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 30;
  width: min(340px, calc(100vw - 32px));
  background: linear-gradient(175deg, rgba(20, 24, 21, 0.99), rgba(13, 16, 14, 0.99));
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  box-shadow: var(--shadow-2);
  padding: 12px;
  animation: sessMenuIn 0.18s cubic-bezier(0.2, 0.8, 0.2, 1);
}

@keyframes sessMenuIn {
  from { opacity: 0; transform: translateY(-6px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.sess-presets {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}

.sess-preset {
  padding: 8px 4px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line-soft);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-dim);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.sess-preset:hover { border-color: var(--border-strong); color: var(--text); }
.sess-preset.active { background: var(--accent-grad); border-color: transparent; color: var(--accent-ink); }

.sess-days-caption {
  font-size: 10.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-faint);
  margin: 12px 2px 6px;
}

.sess-days-list,
.sess-period-list {
  max-height: 240px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.sess-period-list .sess-days-caption:first-child { margin-top: 12px; }

.sess-period-item > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sess-day-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  background: transparent;
  color: var(--text);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
  transition: background 0.12s ease, border-color 0.12s ease;
}

.sess-day-item small { color: var(--text-faint); font-weight: 600; white-space: nowrap; }
.sess-day-item:hover { background: rgba(255, 255, 255, 0.06); }
.sess-day-item.active { border-color: var(--accent); background: rgba(255, 201, 77, 0.08); }
.sess-day-item.active small { color: var(--accent); }

.sess-days-empty { color: var(--text-faint); font-size: 12.5px; padding: 8px 10px; }

/* Сводка периода */
.sessions-summary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 16px;
}

.sess-rating-note {
  margin: -2px 0 12px;
  color: var(--muted, #8f9a92);
  font-size: 12px;
  line-height: 1.45;
}

@keyframes sessStatIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.sess-stat {
  position: relative;
  padding: 14px 16px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line-soft);
  background: rgba(255, 255, 255, 0.035);
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow: hidden;
  animation: sessStatIn 0.45s cubic-bezier(0.2, 0.8, 0.2, 1) both;
  animation-delay: calc(var(--i) * 70ms);
}

.sess-stat::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--accent), transparent 70%);
  opacity: 0.6;
}

/* Карточки — спокойные, тёмные; связь с линиями графика — только маленькая
   цветная метка перед подписью, без цветных заливок и рамок */
.sess-stat::before { content: none; }

.sess-stat {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.015));
  border-color: var(--line-soft);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.sess-stat-label::before {
  content: '';
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 1px;
  margin-right: 8px;
  vertical-align: 1px;
}

.sess-stat:nth-child(1) .sess-stat-label::before { background: #ffc94d; }
.sess-stat:nth-child(2) .sess-stat-label::before { background: #49f3d6; }
.sess-stat:nth-child(3) .sess-stat-label::before { background: #c26bff; }

.sess-stat-label {
  font-size: 10.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-faint);
}

.sess-stat strong {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
}

/* Три KPI сессии в столбик занимали ~290 px — столько же, сколько весь
   график под ними. В строку они читаются не хуже, а места просят втрое
   меньше. */
@media (max-width: 640px) {
  .sessions-summary { grid-template-columns: repeat(3, 1fr); gap: 6px; }
  .sess-stat { padding: 10px 8px; }
  .sess-stat-label { font-size: 9.5px; letter-spacing: 0.06em; }
  .sess-stat strong { font-size: 19px; }
}

@media (prefers-reduced-motion: reduce) {
  .sess-stat { animation: none; }
}

/* Вкладки сессий */
.sessions-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--line-soft);
  padding-bottom: 0;
}

.sess-tab {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--text-faint);
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 6px 12px 9px;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.sess-tab:hover { color: var(--text-dim); }
.sess-tab.active { color: var(--text); border-bottom-color: var(--accent); }

.sess-metric-toggle { margin-top: 1rem; }

.sess-day-caption {
  text-align: center;
  color: var(--text-dim);
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 12px;
}

.sess-day-caption::first-letter { text-transform: uppercase; }

/* Линейный график сессий */
.sess-chart {
  position: relative;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
  background:
    radial-gradient(80% 100% at 50% 0%, rgba(255, 201, 77, 0.035), transparent 70%),
    rgba(8, 11, 9, 0.55);
  padding: 8px 6px 2px;
}

/* Окошко с цифрами при наведении на точку графика */
.sess-tip {
  position: absolute;
  z-index: 6;
  min-width: 158px;
  background: rgba(13, 17, 19, 0.97);
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  padding: 10px 13px 9px;
  pointer-events: none;
  opacity: 0;
  transform: translateY(5px) scale(0.97);
  transition: opacity 0.16s ease, transform 0.16s cubic-bezier(0.2, 0.8, 0.2, 1);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.55);
}

.sess-tip.show { opacity: 1; transform: translateY(0) scale(1); }

.sess-tip-date {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--text-dim);
  margin-bottom: 7px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--line-soft);
  white-space: nowrap;
}

.sess-tip-date::first-letter { text-transform: uppercase; }

.sess-tip-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-dim);
  padding: 2.5px 0;
  white-space: nowrap;
}

.sess-tip-row i { width: 8px; height: 8px; border-radius: 3px; flex: none; }
.sess-tip-row b { margin-left: auto; padding-left: 16px; color: var(--text); font-weight: 800; font-variant-numeric: tabular-nums; }

.sess-chart-svg { display: block; width: 100%; height: auto; }

.sess-chart .grid { stroke: rgba(255, 255, 255, 0.07); stroke-width: 1; stroke-dasharray: 3 4; }
.sess-chart .axis-y, .sess-chart .axis-x { fill: #6d7a71; font-size: 10.5px; font-family: "Inter", sans-serif; font-weight: 600; }

.sess-chart .line {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2.4;
  stroke-linecap: round;
  filter: drop-shadow(0 0 6px rgba(255, 201, 77, 0.45));
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 1.1s cubic-bezier(0.4, 0, 0.2, 1) 0.1s;
}

.sess-chart.in .line { stroke-dashoffset: 0; }

.sess-chart .area { opacity: 0; transition: opacity 0.8s ease 0.55s; }
.sess-chart.in .area { opacity: 1; }

.sess-chart .dot {
  fill: #0d110e;
  stroke: var(--accent);
  stroke-width: 2.2;
}

.sess-chart .pt {
  opacity: 0;
  transform: scale(0.3);
  transform-origin: center;
  transform-box: fill-box;
  transition: opacity 0.35s ease, transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
  transition-delay: calc(0.25s + var(--i) * 0.045s);
}

.sess-chart.in .pt { opacity: 1; transform: scale(1); }

.sess-chart .dot-val {
  font-size: 10.5px;
  font-weight: 800;
  font-family: "Inter", sans-serif;
  fill: var(--text);
  paint-order: stroke;
  stroke: rgba(10, 14, 12, 0.85);
  stroke-width: 3px;
}

.sess-chart .dot-val.wr-green { fill: #8fd13f; }
.sess-chart .dot-val.wr-blue { fill: #4fa8ff; }
.sess-chart .dot-val.wr-purple { fill: #c26bff; }
.sess-chart .dot-val.wr-white { fill: #f2f5f2; }

@media (prefers-reduced-motion: reduce) {
  .sess-chart .line { stroke-dasharray: none; transition: none; }
  .sess-chart .area, .sess-chart .pt { transition: none; opacity: 1; transform: none; }
}

/* Таблица техники внутри сессий: видно ~7 танков, остальные — скролл внутри окна */
.sess-tanks-wrap {
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
  overflow-x: auto;
  overflow-y: auto;
  max-height: 462px;
}

.sess-tank-table { margin-top: 0; border-spacing: 0; }
.sess-tank-table th { background: #181d1a; border: none; }
.sess-tank-table thead th { position: sticky; top: 0; z-index: 2; border-top: none; border-bottom: 1px solid var(--border); }
.sess-tank-table thead th:last-child { border-right: none; }
.sess-tank-table th.tnum, .sess-tank-table td.tnum { text-align: right; }
.sess-tank-table td.tnum { font-weight: 700; }
.sess-tank-table tr { cursor: default; }

@keyframes sessRowIn {
  from { opacity: 0; transform: translateX(-8px); }
  to { opacity: 1; transform: translateX(0); }
}

.sess-tank-table tbody tr {
  animation: sessRowIn 0.4s ease both;
  animation-delay: calc(var(--i) * 40ms);
}

@media (prefers-reduced-motion: reduce) {
  .sess-tank-table tbody tr { animation: none; }
}

/* На телефоне ширины колонок из десктопного .tank-table (иконка 4.9rem +
   тип + уровень + отступы) в сумме шире экрана — таблица вылезала за
   карточку. Сжимаем иконку, прячем колонку типа техники (тип виден по
   силуэту иконки и уровню) и урезаем отступы/шрифт. */
@media (max-width: 640px) {
  /* table-layout:auto растягивает колонку под самое длинное название танка
     несмотря на white-space:nowrap — только fixed заставляет колонки
     реально уважать заданную ширину. */
  .sess-tank-table { table-layout: fixed; width: 100%; font-size: 0.78rem; }
  .sess-tank-table td, .sess-tank-table th { padding: 0.35rem 0.3rem; }
  .sess-tank-table td.ticon, .sess-tank-table th.ticon { width: 2.4rem; height: 1.6rem; }
  .sess-tank-table td.ticon img { width: 2.3rem; height: 1.6rem; }
  .sess-tank-table td.ttype, .sess-tank-table th.ttype { display: none; }
  .sess-tank-table td.ttier, .sess-tank-table th.ttier { width: 1.1rem; padding-left: 0; }
  .sess-tank-table td.ttier { font-size: 0.85rem; }
  .sess-tank-table td.tname, .sess-tank-table th.tname { font-size: 0.78rem; width: auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .sess-tank-table td.tnum, .sess-tank-table th.tnum { width: 3.1rem; padding-left: 0.15rem; padding-right: 0.15rem; }
  /* Средний урон — самая необязательная из трёх цифр на телефоне: бои и
     винрейт важнее для беглого взгляда, а колонке с именем танка эта
     ширина куда нужнее. */
  .sess-tank-table td.tavgdmg, .sess-tank-table th.tavgdmg { display: none; }
}

/* ---- Флажки-чипы: прямоугольные флаги карусели ангара (256×128, 2:1),
   полностью заполняют рамку без прозрачных зазоров ---- */

.flag-chip {
  width: 40px;
  height: 20px;
  /* Кадр берём с запасом и от левого верхнего угла: у исходников карусели
     справа и снизу идёт пустая тёмная кайма, и без обрезки флаг не заполнял
     чип целиком. */
  background-size: 152% 150%;
  background-position: 2% 12%;
  background-repeat: no-repeat;
  border-radius: 3px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  display: inline-block;
  vertical-align: middle;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.45);
}

.flag-chip-sm { width: 30px; height: 15px; border-radius: 2px; }

/* ---- Современный столбиковый график (вкладки Эффективность / Бои) ---- */

.mchart-box {
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
  background:
    radial-gradient(80% 100% at 50% 0%, rgba(255, 201, 77, 0.035), transparent 70%),
    rgba(8, 11, 9, 0.55);
  padding: 18px 14px 14px;
}

.mchart {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: clamp(6px, 2.2vw, 26px);
  height: 230px;
}

.mchart-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: clamp(34px, 8vw, 64px);
  min-width: 0;
}

.mchart-val {
  width: 100%;
  font-size: 12.5px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  margin-bottom: 6px;
  text-align: center;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  transition-delay: calc(var(--i) * 60ms + 0.45s);
}

.mchart.in .mchart-val { opacity: 1; transform: translateY(0); }

.mchart-track {
  flex: 1;
  width: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

.mchart-fill {
  width: min(58%, 30px);
  height: 3%;
  border-radius: 4px 4px 0 0;
  background: linear-gradient(180deg, #ffd166 0%, #f2a93b 55%, #b87a1e 100%);
  box-shadow: 0 0 14px rgba(255, 201, 77, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.45);
  transition: height 0.85s cubic-bezier(0.22, 0.9, 0.26, 1);
  transition-delay: calc(var(--i) * 60ms);
}

.mchart.in .mchart-fill { height: var(--h); }

.mchart-lbl {
  width: 100%;
  margin-top: 8px;
  min-height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-dim);
  text-align: center;
  line-height: 1.2;
  overflow-wrap: break-word;
  word-break: break-word;
  hyphens: auto;
}

.mchart-lbl .ttype-icon { width: 22px; height: 22px; object-fit: contain; }

/* align-items:center на .mchart-col сжимал -val/-lbl по содержимому вместо
   ширины колонки — длинные подписи («Выживаемость») и числа с процентом
   не переносились и наезжали на соседние столбцы вместо переноса внутри
   своих ~34px. width:100% (выше) заставляет их уважать ширину колонки; на
   телефоне вдобавок ужимаем шрифт цифр, иначе даже в свою ширину не влезают. */
/* На телефоне пять вертикальных столбиков делят ~340 px, и подписи под ними
   приходилось ужимать до 7 px, а числа до 9 px — вдвое меньше того, что
   вообще читается с руки. Разворачиваем график горизонтально: подпись слева,
   полоса посередине, значение справа — по строке на показатель, шрифты
   возвращаются к нормальным 13 px. */
@media (max-width: 640px) {
  .mchart {
    flex-direction: column;
    align-items: stretch;
    height: auto;
    gap: 10px;
  }
  .mchart-col {
    flex-direction: row;
    align-items: center;
    width: 100%;
    gap: 10px;
  }

  .mchart-lbl {
    order: 1;
    flex: none;
    width: 118px;
    margin-top: 0;
    min-height: 0;
    justify-content: flex-start;
    text-align: left;
    font-size: 13px;
    line-height: 1.25;
  }
  .mchart-lbl .flag-chip { width: 30px; height: 15px; }

  .mchart-track {
    order: 2;
    flex: 1;
    width: auto;
    height: 12px;
    align-items: stretch;
    justify-content: flex-start;
    border-bottom: none;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.05);
    overflow: hidden;
  }

  /* Столбик стал полосой: рост идёт по ширине, а не по высоте, поэтому
     --h (проценты) применяем к width и анимируем её же. */
  .mchart-fill {
    width: 3%;
    height: 100%;
    border-radius: 6px;
    background: linear-gradient(90deg, #b87a1e 0%, #f2a93b 45%, #ffd166 100%);
    transition: width 0.85s cubic-bezier(0.22, 0.9, 0.26, 1);
    transition-delay: calc(var(--i) * 60ms);
  }
  .mchart.in .mchart-fill { width: var(--h); height: 100%; }

  .mchart-val {
    order: 3;
    flex: none;
    width: 62px;
    margin-bottom: 0;
    text-align: right;
    font-size: 13.5px;
    transform: none;
  }
  .mchart.in .mchart-val { transform: none; }
}


@media (prefers-reduced-motion: reduce) {
  .mchart-fill, .mchart-val { transition: none; }
  .mchart-fill { height: var(--h); }
  .mchart-val { opacity: 1; transform: none; }
}

/* ---- Горизонтальные полосы (танки за день) ---- */

.hbars { display: flex; flex-direction: column; gap: 7px; }

.hbar-row {
  display: grid;
  grid-template-columns: minmax(150px, 230px) 1fr 76px;
  align-items: center;
  gap: 12px;
}

.hbar-label {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}

.hbar-tier { color: #e4e9e4; font-weight: 700; font-size: 11.5px; flex: none; width: 22px; text-align: center; }
.hbar-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Премиум и коллекционная техника — уровень и название в цвет подсветки */
.hbar-label.tank-rare .hbar-tier,
.hbar-label.tank-rare .hbar-name { color: var(--tank-rarity); }

.hbar-track {
  height: 12px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.05);
  overflow: hidden;
}

.hbar-fill {
  height: 100%;
  width: 2%;
  border-radius: 6px;
  background: linear-gradient(90deg, #b87a1e 0%, #f2a93b 45%, #ffd166 100%);
  box-shadow: 0 0 10px rgba(255, 201, 77, 0.3);
  transition: width 0.8s cubic-bezier(0.22, 0.9, 0.26, 1);
  transition-delay: calc(var(--i) * 50ms);
}

.hbars.in .hbar-fill { width: var(--w); }

.hbar-val {
  font-size: 13px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}

@media (max-width: 560px) {
  .hbar-row { grid-template-columns: minmax(110px, 150px) 1fr 62px; gap: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .hbar-fill { transition: none; width: var(--w); }
}

/* ---- Секция «Техника» внизу страницы ---- */

.tanks-section-head {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding-top: 6px;
  margin-top: 8px;
  border-top: 1px solid var(--line-soft);
}

.tanks-section-head .breakdown-title { margin-right: auto; }

/* Маску-затухание у строк с флагом отключаем: она делала прозрачным не только
   флаг, но и текст правой части строки (винрейт/бои/опыт/урон было не видно).
   Само затухание флага теперь рисуется градиентным слоем в background-image.
   background-position: первый слой — градиент (на месте), второй — флаг,
   сдвинут левее, чтобы не упирался в иконку танка. */
#tanksBox .tank-table tr.flag-row {
  -webkit-mask-image: none;
  mask-image: none;
  background-position: left top, -14px top;
}

/* Читаемость таблицы техники: жирнее, но не слепяще-белый — чуть серее */
#tanksBox .tank-table td {
  color: #ccd4ce;
  font-weight: 700;
  font-size: 0.92rem;
}

#tanksBox .tank-table td.tname {
  color: #e4e9e4;
  font-weight: 800;
  font-size: 0.95rem;
  padding-left: 0.25rem;
}

/* Иконка танка крупнее и чуть светлее, колонка ужата — всё левее */
#tanksBox .tank-table td.ticon { width: 6.6rem; height: 3.6rem; padding-right: 0.2rem; }
#tanksBox .tank-table td.ticon img {
  width: 6.4rem;
  height: 3.6rem;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.7)) brightness(1.18);
}

/* Значок типа техники крупнее; уровень — вплотную к значку, того же размера */
#tanksBox .tank-table td.ttype { width: 1.7rem; text-align: right; padding-right: 0; padding-left: 0.3rem; }
#tanksBox .tank-table td.ttype img.ttype-icon { width: 1.7rem; height: 1.7rem; }

#tanksBox .tank-table td.ttier {
  width: 1.8rem;
  padding-left: 0.15rem;
  text-align: left;
  color: #e4e9e4;
  font-weight: 800;
  font-size: 1.15rem;
}

/* Премиум и коллекционная техника — значок класса, уровень и название в цвет
   подсветки (см. public/tankRarity.js). Повторяем селекторы с #tanksBox:
   правила выше задают этим ячейкам свой цвет и без ID перебивают общие. */
#tanksBox .tank-table tr.tank-rare td.tname,
#tanksBox .tank-table tr.tank-rare td.ttier { color: var(--tank-rarity); }
#tanksBox .tank-table tr.tank-rare td.ttype img.ttype-icon { filter: var(--tank-rarity-tint); }

/* Общий тон текста и цифр по странице — приглушённо-светлый вместо чисто белого */
.metric-card strong { color: #e4e9e4; }
/* Короткий вариант подписи живёт только на телефоне (см. медиазапрос ниже) */
.metric-label-short { display: none; }
.sess-stat strong { color: #e4e9e4; }
.mchart-val { color: #dfe5df; }
.hbar-val { color: #dfe5df; }
.side-stat-row b { color: #dde3dd; }
.sess-chart .dot-val { fill: #dfe5df; }
.sess-tip-row b { color: #dfe5df; }
.profile-nick { color: #ecefec; }

/* Цветные проценты в общей таблице техники должны перебивать цвет ячейки,
   в том числе при hover/active-строке (те правила имеют специфичность 0,2,2) */
.tank-table tr td.wr-green { color: #8fd13f; }
.tank-table tr td.wr-blue { color: #4fa8ff; }
.tank-table tr td.wr-purple { color: #c26bff; }
.tank-table tr td.wr-white { color: #f2f5f2; }

/* ============================================================
   Редизайн: заметные скругления и живые акценты вместо «армейского»
   минимализма — правила ниже перебивают style.css / tank-hud.css.
   ============================================================ */

/* Окна и карточки — минимальные скругления: только самый кончик, 2–3px */
.profile-hero { border-radius: 3px; }
.profile-avatar { border-radius: 3px; }
.metric-card { border-radius: 3px; }
.hero-btn { border-radius: 2px; }
.copy-id-btn { border-radius: 2px; }
.profile-id-hint { border-radius: 2px; }
.soon-chip { border-radius: 2px; }
.site-toast { border-radius: 3px; }
.sessions-block { border-radius: 3px; }
.sess-stat { border-radius: 3px; }
.sess-period-btn { border-radius: 2px; }
.sess-period-menu { border-radius: 3px; }
.sess-preset { border-radius: 2px; }
.sess-day-item { border-radius: 2px; }
.sess-tip { border-radius: 3px; }
.sess-chart, .mchart-box { border-radius: 3px; }
.sess-tanks-wrap { border-radius: 3px; }
.hbar-track, .hbar-fill { border-radius: 2px; }
.mchart-fill { border-radius: 2px 2px 0 0; }
.flag-chip { border-radius: 2px; }
.flag-chip-sm { border-radius: 2px; }
.stats-page .rec-card, .stats-page .mark-card { border-radius: 3px; }
.stats-page .tanks-table-wrap, #tanksBox .tanks-table-wrap { border-radius: 3px; }
.stats-page .tanks-sidebar, #tanksBox .tanks-sidebar { border-radius: 3px; }
.details-toggle { border-radius: 2px; }
.eff-info-box { border-radius: 3px; }
#tanksBox .marks-input { border-radius: 2px; }

/* Карточки рекордов — цветной верхний кант, как у карточек сессий */
.stats-page .rec-card, .stats-page .mark-card { position: relative; overflow: hidden; }
.stats-page .rec-card::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--cyan), transparent 70%);
  opacity: 0.55;
}

/* Вкладки статистики: сегментный переключатель-пилюля вместо подчёркивания */
.stats-page .stats-tabs {
  display: flex;
  width: fit-content;
  margin: 0 auto 1.6rem;
  gap: 4px;
  padding: 5px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
  border-radius: 3px;
}

.stats-page .stats-tab {
  padding: 8px 20px;
  border-radius: 2px;
  color: var(--text-dim);
  transition: color 0.15s ease, background 0.15s ease;
}

.stats-page .stats-tab:hover:not(.active) { color: var(--text); background: rgba(255, 255, 255, 0.05); }
.stats-page .stats-tab.active { background: var(--accent-grad); color: var(--accent-ink); }
.stats-page .stats-tab.active::after { content: none; }

/* Вкладки сессий — тот же сегментный стиль */
.sessions-tabs {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
  border-radius: 3px;
  margin-bottom: 0;
}

.sess-tab {
  border: none;
  border-radius: 2px;
  padding: 7px 16px;
  color: var(--text-dim);
  transition: color 0.15s ease, background 0.15s ease;
}

.sess-tab:hover:not(.active) { color: var(--text); background: rgba(255, 255, 255, 0.05); }
.sess-tab.active { background: var(--accent-grad); color: var(--accent-ink); border-bottom: none; }

/* Кнопки-переключатели графиков (из tank-hud) — округлые стеклянные чипы */
.stats-page .chart-toggle button,
.sessions-block .chart-toggle button {
  border-radius: 2px;
  padding: 0.5rem 1.1rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--line-soft);
  color: var(--text-dim);
  font-weight: 600;
  transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}

.stats-page .chart-toggle button:hover:not(.active),
.sessions-block .chart-toggle button:hover:not(.active) { color: var(--text); border-color: var(--border-strong); }

.stats-page .chart-toggle button.active,
.sessions-block .chart-toggle button.active {
  background: var(--accent-grad);
  border-color: transparent;
  color: var(--accent-ink);
  font-weight: 700;
}

.stats-page { margin-bottom: 24px; }

/* Большая таблица «Техника» (вкладка Бои, весь каталог танков игрока) —
   9 колонок с десктопными ширинами (иконка 6.6rem и т.д.) в сумме далеко
   не влезают в экран телефона. Правила ниже — в конце файла намеренно:
   при равной специфичности с безусловными #tanksBox-правилами выше по
   файлу выигрывает тот, что позже в каскаде, иначе мобильные ширины
   просто перетирались обратно на десктопные. */
@media (max-width: 780px) {
  #tanksBox .tank-table { table-layout: fixed; width: 100%; font-size: 0.78rem; }
  #tanksBox .tank-table td, #tanksBox .tank-table th { padding: 0.35rem 0.25rem; }

  #tanksBox .tank-table td.ticon, #tanksBox .tank-table th.ticon { width: 2.3rem; }
  #tanksBox .tank-table td.ticon { height: 1.5rem; }
  #tanksBox .tank-table td.ticon img { width: 2.2rem; height: 1.5rem; }

  #tanksBox .tank-table td.ttype, #tanksBox .tank-table th.ttype { display: none; }

  #tanksBox .tank-table td.ttier, #tanksBox .tank-table th.ttier { width: 1.5rem; padding-right: 0.4rem; }
  #tanksBox .tank-table td.ttier { font-size: 0.8rem; }

  /* width:100% — приём для таблиц: колонка забирает всё, что осталось от
     колонок с фиксированной шириной, вместо того чтобы делить остаток
     поровну и оставлять пустоту справа. */
  #tanksBox .tank-table td.tname, #tanksBox .tank-table th.tname {
    width: 100%; font-size: 0.78rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }

  /* Опыт и урон за бой на телефоне убираем: четыре числовые колонки в ряд
     не помещаются даже ужатыми — цифры налезали друг на друга. Винрейт и
     бои остаются, полные показатели видны в карточке танка ниже. */
  #tanksBox .tank-table td.txp, #tanksBox .tank-table th.txp,
  #tanksBox .tank-table td.tdmg, #tanksBox .tank-table th.tdmg { display: none; }

  #tanksBox .tank-table td.twr, #tanksBox .tank-table th.twr {
    width: 2.9rem; text-align: right; padding-left: 0.1rem; padding-right: 0.1rem;
  }
  #tanksBox .tank-table td.tbattles, #tanksBox .tank-table th.tbattles {
    width: 3.3rem; text-align: right; padding-left: 0.5rem; padding-right: 0.1rem;
  }

  /* Флаг нации рисуется фоном строки в размер 160% высоты и обрывался на
     середине — на узкой строке это выглядело как случайное цветное пятно.
     Растягиваем на всю строку, затухание вправо задаёт градиент в inline-стиле. */
  #tanksBox .tank-table tr.flag-row { background-size: 100% 100%; }
}

/* Пилюля вкладок статистики (.stats-tabs) держит ширину по контенту и
   центрируется — на телефоне «Эффективность» + «Бои» + «Рекорды» с их
   паддингами шире экрана и вылезали вправо, растягивая всю страницу
   по горизонтали. На мобильном тянем пилюлю на всю ширину колонки и
   делим поровну между вкладками вместо fit-content. */
@media (max-width: 640px) {
  .stats-page .stats-tabs { max-width: 100%; overflow-x: auto; }
  .stats-page .stats-tab {
    padding: 8px 10px;
    font-size: 0.82rem;
    white-space: nowrap;
  }
}


/* ---- Телефон: hero собран под один экран ----------------------------------
   Разбор мобильной версии показал, что до первой цифры статистики человек
   доскролливал ~700 px при доступных ~730. Ниже — три правки, которые
   вычитают оттуда ~200 px: метрики в одну строку вместо сетки 2×2,
   действия расставлены по весу, заглушка ангара уходит вниз и тише. */
@media (max-width: 640px) {
  /* Метрики — четыре колонки в одну строку (~78 px) вместо 2×2 на ~150 px:
     иконка сверху, под ней число, подпись — последней. */
  .profile-metric-row {
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
    padding: 10px;
  }
  .metric-card {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 3px;
    padding: 9px 4px;
  }
  .metric-icon { width: 22px; height: 22px; }
  .metric-card strong { font-size: 17px; }
  .metric-label {
    font-size: 10px;
    line-height: 1.15;
    white-space: normal;
  }
  /* «Средний урон» в колонку ~78 px не влезает и переносится в две строки,
     ломая ритм ряда — на телефоне подпись сокращается до «Ср. урон». */
  .metric-label-long { display: none; }
  .metric-label-short { display: inline; }

  /* Действия по весу: «Сравнить» забирает остаток строки как единственная
     первичная, обновление и выход — иконки-таргеты 44×44 без подписи. */
  .profile-hero-actions {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    align-items: center;
  }
  /* Ряд поднят вплотную к карточке профиля: её собственный нижний отступ
     (20 px) съедаем отрицательным полем, иначе кнопки висят в пустоте. */
  .profile-hero-actions { margin-top: -16px; gap: 5px; }
  .profile-hero-actions .hero-btn-icon { width: 30px; height: 30px; min-height: 30px; }
  .profile-hero-actions .hero-btn-icon svg { width: 14px; height: 14px; }
  .profile-hero-actions .hero-btn-labeled {
    width: 30px;
    height: 30px;
    min-height: 30px;
    padding: 0;
    justify-content: center;
  }
  .profile-hero-actions .hero-btn-labeled .hero-btn-text { display: none; }
  .profile-hero-actions .hero-btn-labeled svg { width: 14px; height: 14px; }
  .hero-btn-icon {
    flex: none;
    width: 44px;
    height: 44px;
    padding: 0;
    justify-content: center;
  }
  .hero-btn-icon .hero-btn-text { display: none; }
  /* Заглушка ангара («скоро» + тост) на телефоне только отнимает место у
     живых действий — на узком экране её нет совсем. */
  .hero-btn-soon { display: none; }
}

.hero-btn-icon svg { width: 18px; height: 18px; flex: none; }
.hero-btn-icon { display: inline-flex; align-items: center; gap: 8px; }

/* Ниже по файлу .mchart-fill получает квадратный «столбиковый» радиус —
   для горизонтальной полосы на телефоне возвращаем скруглённый. */
@media (max-width: 640px) {
  .mchart-fill { border-radius: 6px; }
}

/* Намеренно в самом конце файла: общий блок prefers-reduced-motion выше
   ставит .mchart-fill{height:var(--h)} — для горизонтальных полос на
   телефоне высота должна остаться 100%, а по --h растёт ширина. */
@media (max-width: 640px) {
  @media (prefers-reduced-motion: reduce) {
    .mchart-fill { transition: none; width: var(--h); height: 100%; }
  }
}


/* ---- Превью достижений -----------------------------------------------------
   Раньше блок был свёрнут в серую пилюлю «Достижения (147) ▾» с нулём
   превью, а счётчик красился классом .loading — то есть выглядел как
   недогруженный текст. Теперь пять самых частых медалей видно сразу. */
.ach-preview-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.ach-preview-title {
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--text);
}

.ach-preview-more {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 12px;
  background: none;
  border: none;
  color: var(--accent);
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
}

.ach-preview-more i { font-style: normal; }
.ach-preview-more:hover { color: var(--text); }

.ach-preview-row {
  /* Ровно столько колонок, сколько медалей (--n задаётся при отрисовке): с
     auto-fill в строке оставались пустые ячейки и вся полоска выглядела
     прижатой влево, потому что плиток всегда меньше, чем мест. */
  display: grid;
  grid-template-columns: repeat(var(--n, 12), minmax(0, 1fr));
  gap: 6px;
}

/* Развёрнутый список повторяет те же медали — полоску превью на это время
   убираем, иначе над открытым окном висит её огрызок. */
.achievements-block.ach-open .ach-preview-row { display: none; }

.ach-preview-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 7px;
  padding: 9px 3px 8px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.035);
  transition: border-color 0.15s ease, transform 0.15s ease;
}

.ach-preview-item:hover { border-color: var(--accent); transform: translateY(-2px); }

.ach-preview-item img,
.ach-preview-placeholder {
  width: 100%;
  max-width: 58px;
  aspect-ratio: 1;
  height: auto;
  object-fit: contain;
  font-size: 34px;
  text-align: center;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.45));
}

/* Счётчик — под иконкой на отдельной табличке: угловатая рамка в тон
   остальным панелям профиля, а не круглая пилюля. Абсолютом в углу плитки он
   налезал на саму медаль и сбивал её с центра. */
.ach-preview-count {
  display: block;
  width: 100%;
  padding: 2px 4px;
  border: 1px solid rgba(255, 201, 77, 0.38);
  border-radius: 3px;
  background: linear-gradient(180deg, rgba(255, 201, 77, 0.16), rgba(255, 201, 77, 0.04));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07);
  font-size: 11.5px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  color: #ffd97a;
  text-align: center;
  line-height: 1.4;
}

.ach-preview-item:hover .ach-preview-count { border-color: var(--accent); }

/* На телефоне двенадцать колонок превратились бы в марки по 25 px — там
   полоска сворачивается в сетку из шести и переносится на второй ряд. */
@media (max-width: 640px) {
  .ach-preview-row { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 5px; }
  .ach-preview-item { padding: 7px 2px 6px; gap: 5px; }
  .ach-preview-count { font-size: 10.5px; }
}


/* ---- Техника на телефоне: карточки вместо урезанной таблицы ---------------
   Восемь колонок в 390 px не помещаются, и таблица выживала только за счёт
   уступок: скрытых тип/опыт/урона, названия танка 12.5 px против чисел
   14.7 px (менее важное — громче) и вложенного скролла 60vh внутри
   вертикальной страницы. Разворачиваем строку в карточку: имя крупное,
   винрейт справа, остальные цифры — второй строкой; ничего не скрыто и
   вложенной прокрутки нет (длину списка держит «Показать ещё»). */
@media (max-width: 780px) {
  #tanksBox .tanks-table-wrap {
    height: auto;
    max-height: none;
    overflow: visible;
    border: none;
    border-radius: 0;
  }

  #tanksBox .tank-table { display: block; width: 100%; border-spacing: 0; font-size: inherit; }

  /* Шапка остаётся только ради кнопок сортировки — строкой иконок над
     списком, а не как заголовки колонок, которых больше нет. */
  #tanksBox .tank-table thead { display: block; }
  #tanksBox .tank-table thead tr { display: flex; gap: 6px; padding: 0 0 10px; background: none; }
  #tanksBox .tank-table thead th {
    display: block;
    width: auto;
    padding: 0;
    border: none;
    background: none;
  }
  #tanksBox .tank-table thead th.tname { display: none; }
  #tanksBox .tank-table thead th.ttype { display: block; }

  #tanksBox .tank-table tbody { display: block; }

  #tanksBox .tank-table tbody tr {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 8px;
    row-gap: 2px;
    min-height: 56px;
    padding: 8px 10px;
    margin-bottom: 6px;
    border: 1px solid var(--line-soft);
    border-radius: var(--radius-sm);
    cursor: pointer;
  }

  /* Принудительный перенос между «шапкой» карточки и строкой цифр: без него
     порядок зависел бы от того, влезли ли ячейки в строку. */
  #tanksBox .tank-table tbody tr::after {
    content: '';
    order: 6;
    flex-basis: 100%;
    height: 0;
  }

  #tanksBox .tank-table tbody tr.active-row {
    border-color: var(--accent);
    background: rgba(255, 201, 77, 0.06);
  }

  #tanksBox .tank-table tbody td {
    display: block;
    width: auto;
    padding: 0;
    border: none;
    background: none;
    text-align: left;
  }

  #tanksBox .tank-table td.ticon { order: 1; flex: none; width: 44px; height: auto; }
  #tanksBox .tank-table td.ticon img { width: 44px; height: 30px; object-fit: contain; }

  #tanksBox .tank-table td.ttier {
    order: 3;
    flex: none;
    width: 22px;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--text-dim);
    text-align: center;
  }

  /* Название танка — самое важное в строке, поэтому оно и самое крупное. */
  #tanksBox .tank-table td.tname {
    order: 4;
    flex: 1 1 0;
    min-width: 0;
    font-size: 14.5px;
    font-weight: 700;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  #tanksBox .tank-table td.twr {
    order: 5;
    flex: none;
    width: auto;
    font-size: 15px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    text-align: right;
  }

  /* Тип техники — в первой строке, сразу слева от уровня: вместе они
     читаются как одна пометка «какой танк», а не как два разных признака
     в разных строках карточки. */
  #tanksBox .tank-table td.ttype {
    order: 2;
    flex: none;
    display: block;
    width: 14px;
    text-align: center;
  }
  #tanksBox .tank-table td.ttype .ttype-icon { width: 12px; height: 12px; vertical-align: middle; }

  /* Бои, урон и опыт — второй строкой. Тише названия, но именно тише, а не
     на грани читаемости: --text-faint на тёмной подложке карточки уходил
     почти в фон. */
  #tanksBox .tank-table td.tbattles { order: 7; }
  #tanksBox .tank-table td.tdmg { order: 8; }
  #tanksBox .tank-table td.txp { order: 9; }

  #tanksBox .tank-table td.tbattles,
  #tanksBox .tank-table td.tdmg,
  #tanksBox .tank-table td.txp {
    display: block;
    flex: none;
    width: auto;
    font-size: 12px;
    font-weight: 700;
    color: #dfe5df;
    font-variant-numeric: tabular-nums;
  }
  #tanksBox .tank-table td.tbattles::before,
  #tanksBox .tank-table td.tdmg::before,
  #tanksBox .tank-table td.txp::before {
    font-weight: 500;
    color: var(--text-dim);
  }
  #tanksBox .tank-table td.tbattles::before { content: 'боёв '; }
  #tanksBox .tank-table td.tdmg::before { content: '· урон '; }
  #tanksBox .tank-table td.txp::before { content: '· опыт '; }

  /* Флаг нации — фоном всей карточки с затуханием вправо (градиент задан
     инлайном при рендере строки). */
  #tanksBox .tank-table tr.flag-row { background-size: 100% 100%; }
}

/* Панель «Показатели танка» — две вкладки: цифры и медали на этой машине.
   Медали заменяют статистику, а не растут под ней: панель узкая и высокая,
   и два длинных блока подряд читались бы хуже, чем один по выбору. */
.tank-side-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 12px;
  padding: 3px;
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.03);
}
.tank-side-tab {
  flex: 1;
  min-height: 28px;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--text-dim);
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.tank-side-tab:hover { color: var(--text); }
.tank-side-tab.on {
  background: rgba(255, 201, 77, 0.14);
  color: var(--amber-2);
  box-shadow: inset 0 0 0 1px rgba(255, 201, 77, 0.3);
}
.tank-medals { margin-top: 12px; }
.tank-medals-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.tank-medals-note { margin: 0; font-size: 12.5px; color: var(--text-faint); }

.tanks-more-btn {
  display: block;
  width: 100%;
  min-height: 44px;
  margin-top: 4px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.03);
  color: var(--text-dim);
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
}

.tanks-more-btn:hover { color: var(--text); border-color: var(--border-strong); }


/* ---- Скелетоны загрузки ----------------------------------------------------
   Вместо одного спиннера по центру пустой страницы — заготовки в габаритах
   будущих блоков: каркас читается сразу, и когда приходят данные, ничего не
   прыгает и не «дёргается пачкой». */
@keyframes skelPulse {
  0%, 100% { opacity: 0.45; }
  50% { opacity: 0.8; }
}

.skel {
  display: block;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.06);
  animation: skelPulse 1.4s ease-in-out infinite;
  animation-delay: var(--skel-delay, 0ms);
}

@media (prefers-reduced-motion: reduce) {
  .skel { animation: none; }
}

.skel-hero-main { display: flex; align-items: center; gap: 18px; }
.skel-avatar { width: 64px; height: 64px; border-radius: 14px; background: rgba(255, 201, 77, 0.18); flex: none; }
.skel-hero-lines { display: flex; flex-direction: column; gap: 9px; flex: 1; min-width: 0; }
.skel-line { height: 14px; }
.skel-line-nick { width: 55%; height: 26px; }
.skel-line-sub { width: 38%; height: 12px; }
.skel-line-action { width: 190px; height: 38px; margin-top: 18px; }
.skel-metric { height: 70px; }
.skel-block { margin: 12px 0; }
.skel-block .skel { width: 100%; }

@media (max-width: 640px) {
  .skel-avatar { width: 44px; height: 44px; }
  .skel-hero-main { gap: 12px; }
  .skel-line-nick { height: 22px; }
  .skel-line-action { width: 100%; height: 44px; }
  .skel-metric { height: 78px; }
}

/* ===== Сессии: наведение по колонке, лента дня, карточка танка, медали ===== */

/* Курсор-подсказка: цифры показываются при движении над всей областью графика,
   попадать в точку больше не нужно. */
.sess-chart { cursor: crosshair; touch-action: pan-y; }

.sess-cross {
  stroke: rgba(255, 255, 255, 0.28);
  stroke-width: 1;
  stroke-dasharray: 4 4;
  opacity: 0;
  transition: opacity 0.15s ease;
}

.sess-cross.on { opacity: 1; }

/* Точка выбранного дня — крупнее и залита акцентом во всех сериях сразу */
.sess-chart .pt.on .dot { stroke-width: 3.4; r: 5.4; fill: var(--accent); }
.sess-chart.probing .pt:not(.on) .dot { opacity: 0.55; }

/* Уровень техники в таблице сессий — светлый, как в общем списке техники,
   у премиума и коллекционок — в цвет подсветки. */
.sess-tank-table td.ttier { color: #e4e9e4; font-weight: 800; }
.sess-tank-table tr.tank-rare td.ttier,
.sess-tank-table tr.tank-rare td.tname { color: var(--tank-rarity); }
.sess-tank-table tr.tank-rare td.ttype img.ttype-icon { filter: var(--tank-rarity-tint); }

/* Строки техники и полосы дня открывают карточку танка */
.sess-tank-table tr.sess-tank-row { cursor: pointer; }
.sess-tank-table tr.sess-tank-row:hover td { background: rgba(255, 201, 77, 0.07); }
.hbar-row-tap { cursor: pointer; }
.hbar-row-tap:hover .hbar-name { color: var(--accent); }

/* ---- Лента боёв за день ---- */

.sess-flow {
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
  background: rgba(8, 11, 9, 0.55);
  padding: 10px 12px 11px;
  margin-bottom: 12px;
}

.sess-flow-title {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--text-dim);
  margin-bottom: 8px;
}

.sess-flow-bar {
  display: flex;
  height: 16px;
  border-radius: 8px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.05);
  gap: 2px;
}

.sess-flow-seg {
  width: var(--w);
  background: var(--c);
  cursor: pointer;
  transform: scaleX(0);
  transform-origin: left center;
  animation: sessFlowIn 0.5s cubic-bezier(0.22, 0.9, 0.26, 1) both;
  animation-delay: calc(var(--i) * 60ms);
  transition: filter 0.15s ease;
}

@keyframes sessFlowIn {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

.sess-flow-seg.hot { filter: brightness(1.35) saturate(1.2); }

.sess-flow-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin-top: 9px;
}

.sess-flow-key {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-dim);
  font-family: inherit;
}

.sess-flow-key i { width: 8px; height: 8px; border-radius: 3px; flex: none; }
.sess-flow-key b { color: var(--text); font-variant-numeric: tabular-nums; }
.sess-flow-key.hot, .sess-flow-key:hover { color: var(--text); }
.sess-flow-rest { font-size: 12px; color: var(--text-faint); align-self: center; }

/* ---- День, режим «Общий»: бои, урон и винрейт одной строкой ---- */

.sess-comb { gap: 6px; }

.sess-comb-head,
.sess-comb-row {
  display: grid;
  grid-template-columns: minmax(150px, 230px) 1fr 148px;
  align-items: center;
  gap: 12px;
}

.sess-comb-head { padding-bottom: 2px; }
.sess-comb-head i {
  font-style: normal;
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-faint);
  text-align: right;
}

.sess-comb-row {
  background: none;
  border: none;
  padding: 3px 0;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
}

.sess-comb-row:hover .hbar-name { color: var(--accent); }

.sess-comb-name {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}

.sess-comb-name.tank-rare .hbar-tier,
.sess-comb-name.tank-rare .hbar-name { color: var(--tank-rarity); }

.sess-comb-track {
  display: block;
  height: 12px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.05);
  overflow: hidden;
}

.sess-comb-track .hbar-fill { display: block; }

.sess-comb-nums {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  font-size: 13px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.sess-comb-b { color: #ffc94d; }
.sess-comb-d { color: #49f3d6; }

@media (max-width: 560px) {
  .sess-comb-head, .sess-comb-row { grid-template-columns: minmax(96px, 130px) 1fr 118px; gap: 8px; }
  .sess-comb-nums { font-size: 12px; gap: 5px; }
}

/* ---- Карточка танка за период ---- */

.sess-tank-overlay {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(4, 6, 5, 0.62);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.sess-tank-overlay.open { opacity: 1; pointer-events: auto; }

.sess-tank-card {
  position: relative;
  width: min(560px, 100%);
  max-height: 86vh;
  overflow-y: auto;
  background: linear-gradient(180deg, rgba(22, 27, 23, 0.98), rgba(12, 16, 13, 0.98));
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  padding: 18px 18px 20px;
  transform: translateY(12px) scale(0.98);
  transition: transform 0.24s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.sess-tank-overlay.open .sess-tank-card { transform: none; }

.sess-tank-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 30px;
  height: 30px;
  border-radius: var(--radius-sm);
  background: none;
  border: 1px solid var(--line);
  color: var(--text-dim);
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
}

.sess-tank-close:hover { border-color: var(--accent); color: var(--accent); }

.sess-tank-head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-right: 38px;
  margin-bottom: 4px;
}

.sess-tank-img {
  width: 108px;
  height: 61px;
  object-fit: contain;
  flex: none;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.7)) brightness(1.15);
}

.sess-tank-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 17px;
  font-weight: 800;
  color: #e9ede9;
}

.sess-tank-title img.ttype-icon { width: 18px; height: 18px; }
.sess-tank-title.tank-rare { color: var(--tank-rarity); }
.sess-tank-title.tank-rare img.ttype-icon { filter: var(--tank-rarity-tint); }

.sess-tank-sub {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-dim);
}

.sess-tank-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

.sess-tank-cell {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
  padding: 9px 11px;
  background: rgba(8, 11, 9, 0.5);
}

.sess-tank-cell span { font-size: 11.5px; font-weight: 600; color: var(--text-dim); }
.sess-tank-cell b { font-size: 15px; font-weight: 800; color: #e4e9e4; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sess-tank-cell .sess-up { color: #8fd13f; font-size: 11.5px; }
.sess-tank-cell .sess-down { color: #ff6b6b; font-size: 11.5px; }

.sess-tank-days {
  max-height: 220px;
  overflow-y: auto;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
}

.sess-tank-days table { margin: 0; width: 100%; }
.sess-tank-days th { position: sticky; top: 0; background: #181d1a; z-index: 1; }
.sess-tank-days td, .sess-tank-days th { font-size: 12.5px; padding: 0.4rem 0.6rem; }
.sess-tank-days .tnum { text-align: right; font-variant-numeric: tabular-nums; }

@media (max-width: 560px) {
  .sess-tank-grid { grid-template-columns: 1fr; }
  .sess-tank-img { width: 84px; height: 48px; }
  .sess-tank-title { font-size: 15px; }
}

/* ---- Вкладка «Медали» ---- */

.sess-medals-head {
  font-size: 12.5px;
  color: var(--text-dim);
  margin-bottom: 10px;
}

.sess-medals-head b { font-size: 17px; color: var(--accent); font-weight: 800; }
.sess-medals-head small { color: var(--text-faint); }

.sess-medals {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  gap: 10px;
}

.sess-medal {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  text-align: center;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
  background: rgba(8, 11, 9, 0.5);
  padding: 12px 6px 10px;
  animation: sessRowIn 0.4s ease both;
  animation-delay: calc(var(--i) * 40ms);
}

.sess-medal-pic { display: block; width: 100%; }

.sess-medal-pic img {
  width: 100%;
  max-width: 64px;
  aspect-ratio: 1;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.45));
}

/* Столько взято за период — такая же табличка, как в полоске достижений.
   «Всего N за всё время» отсюда убрано: вкладка отвечает на вопрос «что взял
   за эти дни», а карьерный итог виден в блоке достижений выше. */
.sess-medal-count {
  display: block;
  width: 100%;
  padding: 2px 4px;
  border: 1px solid rgba(255, 201, 77, 0.38);
  border-radius: 3px;
  background: linear-gradient(180deg, rgba(255, 201, 77, 0.16), rgba(255, 201, 77, 0.04));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07);
  font-size: 12.5px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  color: #ffd97a;
  line-height: 1.4;
}

.sess-medal-name {
  width: 100%;
  font-size: 11.5px;
  font-weight: 700;
  color: #dfe5df;
  line-height: 1.25;
  /* Длинные названия («Знак классности…») в узкой плитке иначе вылезали на
     соседние: рвём слово и режем на трёх строках. */
  overflow: hidden;
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

@media (prefers-reduced-motion: reduce) {
  .sess-medal, .sess-flow-seg { animation: none; transform: none; }
}

/* ---- График хода сессии по боям ---- */

.sess-flow-chart-slot:empty { display: none; }
.sess-flow-chart { margin-bottom: 12px; }

/* Ступеньки: без скруглений на стыках, иначе «полки» выглядят как кривая */
.sess-chart .line.step { stroke-linecap: butt; stroke-linejoin: miter; stroke-width: 2.6; }

/* Границы отрезков между снимками — видно, из чего сложена ступенька */
.flow-tick { stroke: rgba(255, 255, 255, 0.09); stroke-width: 1; }

.sess-legend-note { color: var(--text-faint); font-size: 11px; }

.sess-tip-tank {
  display: flex;
  gap: 12px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-dim);
  padding: 1.5px 0;
  white-space: nowrap;
}

.sess-tip-tank:first-of-type { margin-top: 5px; padding-top: 5px; border-top: 1px solid var(--line-soft); }
.sess-tip-tank b { margin-left: auto; color: var(--text); font-variant-numeric: tabular-nums; }
.sess-tip-more { color: var(--text-faint); }

/* Танк в подсказке графика по боям — над цифрами */
.sess-tip-tank-name {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: 13px;
  font-weight: 800;
  color: #e9ede9;
  white-space: nowrap;
}

.sess-tip-tank-name .sess-tip-more { font-size: 10.5px; font-weight: 700; color: var(--text-faint); }
.sess-tip-tank-name + .sess-tip-date { margin-top: 2px; }

/* ===== Телефон: всё влезает по ширине, без горизонтальных подвижек ========= */
@media (max-width: 640px) {
  /* Ряд управления сессиями: вкладки на всю ширину, период под ними.
     Раньше три вкладки и кнопка периода не помещались в 375 px и уезжали
     за правый край экрана. */
  .sessions-controls { flex-direction: column; align-items: stretch; gap: 8px; }
  .sessions-controls .sessions-tabs { display: flex; width: 100%; }
  .sess-tab { flex: 1; min-width: 0; padding: 8px 4px; font-size: 12.5px; text-align: center; }
  .sessions-controls .sess-period { width: 100%; }
  .sess-period-btn { width: 100%; justify-content: space-between; }

  /* Переключатель метрик — четыре равные кнопки в один ряд */
  .sessions-block .chart-toggle {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 5px;
    margin-top: 10px;
  }

  .sessions-block .chart-toggle button {
    padding: 8px 2px;
    font-size: 11.5px;
    white-space: nowrap;
  }

  /* Полоска достижений — ровно один ряд: лишние медали не показываем,
     все они и так за кнопкой «Все N». */
  .ach-preview-row { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .ach-preview-item:nth-child(n + 7) { display: none; }

  /* Медали за период — тем же ритмом, по шесть в ряд */
  .sess-medals { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; }
  .sess-medal { padding: 7px 2px 6px; gap: 4px; }
  .sess-medal-pic img { max-width: 40px; }
  .sess-medal-count { font-size: 10px; padding: 1px 2px; }
  .sess-medal-name { font-size: 8.6px; line-height: 1.2; }
  .sess-medals-head { font-size: 11.5px; }

  /* Техника за период: на телефоне пять колонок в 375 px не живут — ужимать
     их дальше значило бы прятать цифры (так и было со средним уроном).
     Разворачиваем строку в карточку: сверху техника и винрейт, снизу бои и
     урон. Видно семь карточек, дальше вертикальный скролл. */
  .sess-tanks-wrap { overflow-x: hidden; max-height: 448px; }
  .sess-tank-table { display: block; }
  .sess-tank-table thead { display: none; }
  .sess-tank-table tbody { display: block; }

  .sess-tank-table tbody tr {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 8px;
    row-gap: 2px;
    padding: 7px 9px;
    border-bottom: 1px solid var(--line-soft);
  }

  .sess-tank-table tbody tr:last-child { border-bottom: none; }

  /* Принудительный перенос между шапкой карточки и строкой цифр */
  .sess-tank-table tbody tr::after { content: ''; order: 5; flex-basis: 100%; height: 0; }

  .sess-tank-table tbody td {
    display: block;
    width: auto;
    padding: 0;
    border: none;
    text-align: left;
  }

  .sess-tank-table td.ticon { order: 1; flex: none; width: 40px; height: auto; }
  .sess-tank-table td.ticon img { width: 40px; height: 26px; object-fit: contain; }
  .sess-tank-table td.ttype { display: none; }
  .sess-tank-table td.ttier { order: 2; flex: none; width: 18px; font-size: 12.5px; text-align: center; }

  .sess-tank-table td.tname {
    order: 3;
    flex: 1 1 0;
    min-width: 0;
    font-size: 13.5px;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .sess-tank-table td.twr {
    order: 4;
    flex: none;
    font-size: 14px;
    font-weight: 800;
    text-align: right;
  }

  .sess-tank-table td.tbattles { order: 6; }
  .sess-tank-table td.tavgdmg { order: 7; display: block; }

  .sess-tank-table td.tbattles,
  .sess-tank-table td.tavgdmg {
    flex: none;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--text-dim);
    padding-left: 48px;
  }

  /* Ширины из табличного режима (3.1rem) здесь только мешают: «боёв 17»
     переносилось на две строки и карточка распухала. */
  .sess-tank-table tbody td.tbattles,
  .sess-tank-table tbody td.tavgdmg,
  .sess-tank-table tbody td.twr { width: auto; white-space: nowrap; }

  .sess-tank-table td.tavgdmg { padding-left: 0; }
  .sess-tank-table td.tbattles::before { content: 'боёв '; color: var(--text-faint); }
  .sess-tank-table td.tavgdmg::before { content: '· урон '; color: var(--text-faint); }
}

/* Шапка таблицы техники — она же сортировка. Подпись поля видна всегда
   (раньше на компьютере вместо неё стояли эмодзи), у активной колонки рядом
   стрелка направления. */
#tanksBox .tank-table thead th .sort-ic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: auto;
  height: auto;
  padding: 5px 6px;
  border-radius: var(--radius-sm);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  white-space: nowrap;
}
.sort-ic-label { display: inline; }
.sort-ic-dir { font-size: 10px; line-height: 1; opacity: 0.9; }
#tanksBox .tank-table thead th .sort-ic.active { color: var(--accent); background: rgba(255, 201, 77, 0.12); }

/* Узкие колонки (иконка, тип, уровень) не должны растягиваться под подпись —
   иначе таблица уезжает в горизонтальный скролл, а имя танка сжимается.
   Ширины те же, что у ячеек тела (см. tank-hud.css), подписи — сокращённые. */
@media (min-width: 781px) {
  #tanksBox .tank-table thead th.ticon { width: 4.9rem; }
  #tanksBox .tank-table thead th.ttype { width: 1.8rem; }
  #tanksBox .tank-table thead th.ttier { width: 2.2rem; }
  #tanksBox .tank-table thead th .sort-ic { padding: 4px 3px; font-size: 10px; letter-spacing: 0; }
  #tanksBox .tank-table thead th.ticon .sort-ic-label,
  #tanksBox .tank-table thead th.ttype .sort-ic-label,
  #tanksBox .tank-table thead th.ttier .sort-ic-label { font-size: 0; }
  #tanksBox .tank-table thead th.ticon .sort-ic-label::after { content: 'Нац.'; font-size: 10px; }
  #tanksBox .tank-table thead th.ttype .sort-ic-label::after { content: 'Тип'; font-size: 10px; }
  #tanksBox .tank-table thead th.ttier .sort-ic-label::after { content: 'Ур.'; font-size: 10px; }
}

/* Управление списком: поиск, фильтр и сброс одной строкой над таблицей. */
.tanks-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 10px 0;
}
.tanks-search {
  flex: 1 1 auto;
  min-width: 0;
  height: 36px;
  padding: 0 12px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.03);
  color: var(--text);
  font: inherit;
  font-size: 13.5px;
}
.tanks-search::placeholder { color: var(--text-faint); }
.tanks-search:focus { outline: none; border-color: var(--border-strong); }

.tanks-filter-btn {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 14px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.03);
  color: var(--text-dim);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.tanks-filter-btn:hover { color: var(--text); border-color: var(--border-strong); }
/* Цифра применённых фильтров: панель почти всегда свёрнута, и без неё
   урезанный список выглядел как потеря половины техники. */
.tanks-filter-count {
  min-width: 18px;
  padding: 1px 5px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-ink, #14180f);
  font-size: 11px;
  font-weight: 800;
  text-align: center;
}

/* Нация в фильтре — сам флаг и есть кнопка: рамка вокруг него оставляла
   пустое поле шире самого флага. Ни фона, ни границы у чипа нет, выбранную
   нацию показывает яркость флага и обводка по его краю (как в сравнении
   танков). Название живёт в подсказке и aria-label. */
#filterBody .filter-chip-flag {
  padding: 0;
  margin: 0 6px 6px 0;
  border: 0;
  border-radius: 0;
  background: none;
  line-height: 0;
}
#filterBody .filter-chip-flag .flag-chip-sm {
  /* Флаг целиком и в родной пропорции 2:1 — обрезка по бокам читалась как
     сжатие, даже когда картинка не искажалась. Кадрирование то же, что у
     обычного .flag-chip: снимаем пустую кайму по правому и нижнему краю
     исходников карусели. */
  width: 40px;
  height: 20px;
  margin: 0;
  background-size: 152% 150%;
  background-position: 2% 12%;
  border-radius: 3px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
  filter: brightness(1.08);
  transition: filter 0.15s ease, box-shadow 0.15s ease;
}
#filterBody .filter-chip-flag:hover .flag-chip-sm {
  filter: brightness(1.3);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3);
}
#filterBody .filter-chip-flag.active .flag-chip-sm {
  filter: brightness(1.45) saturate(1.2);
  box-shadow: 0 0 0 2px var(--accent), 0 0 10px rgba(255, 201, 77, 0.35);
}
/* Когда нация выбрана, остальные флаги приглушаются: подписи у них нет, и
   одной обводки для «выбрано вот это» мало — глаз цепляется за все девять. */
#filterBody .filter-group-nation.has-active .filter-chip-flag:not(.active) .flag-chip-sm {
  filter: brightness(0.75) saturate(0.5);
  opacity: 0.6;
}
#filterBody .filter-group-nation.has-active .filter-chip-flag:not(.active):hover .flag-chip-sm {
  filter: brightness(1.15) saturate(0.9);
  opacity: 1;
}
/* Фон и подсветка активного чипа — общие для .filter-chip.active — здесь
   только мешали бы: кнопка невидима, светится сам флаг. */
#filterBody .filter-chip-flag.active { background: none; box-shadow: none; color: inherit; }

/* Применённые фильтры — чипы под строкой управления, снимаются крестиком. */
.tanks-active-filters { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
.tanks-active-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border: 1px solid rgba(255, 201, 77, 0.35);
  border-radius: var(--radius-pill);
  background: rgba(255, 201, 77, 0.1);
  color: var(--accent);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.tanks-active-chip i { font-style: normal; font-size: 11px; opacity: 0.75; }
.tanks-active-chip:hover { background: rgba(255, 201, 77, 0.18); }
.tanks-active-chip:hover i { opacity: 1; }

@media (max-width: 780px) {
  #tanksBox .tank-table thead tr { flex-wrap: wrap; gap: 5px; }

  /* Шапка-сортировка на телефоне должна укладываться в одну строку: перенос
     разрывал ряд на «…бои» и «опыт урон», и он читался как две разные
     панели. Поэтому компактные отступы и сокращённые подписи у узких полей. */
  #tanksBox .tank-table thead tr { flex-wrap: nowrap; gap: 3px; }
  #tanksBox .tank-table thead th[class] { flex: 1 1 0; min-width: 0; }
  #tanksBox .tank-table thead th .sort-ic {
    width: 100%;
    padding: 6px 2px;
    font-size: 10.5px;
    letter-spacing: 0;
    gap: 2px;
  }
  #tanksBox .tank-table thead th.ticon .sort-ic-label,
  #tanksBox .tank-table thead th.ttier .sort-ic-label { font-size: 0; }
  #tanksBox .tank-table thead th.ticon .sort-ic-label::after { content: 'Нац.'; font-size: 10.5px; }
  #tanksBox .tank-table thead th.ttier .sort-ic-label::after { content: 'Ур.'; font-size: 10.5px; }

  /* Опыт и урон в карточке танка на телефоне показываются, поэтому и кнопки
     сортировки по ним нужны: правило ниже перебивает общее «спрятать колонки
     txp/tdmg», которое касается только тела таблицы. */
  #tanksBox .tank-table thead th.txp,
  #tanksBox .tank-table thead th.tdmg { display: block; }

  /* Ширины колонок к панели сортировки отношения не имеют: пока они
     действовали, кнопки не помещались в свои ячейки и налезали друг на друга.
     [class] — чтобы перебить правила ширины для конкретных колонок. */
  #tanksBox .tank-table thead th[class] { width: auto; padding: 0; }
}

/* Фильтр техники на телефоне: ровные сетки вместо ряда разнокалиберных чипов,
   которые переносились как попало и читались кашей. */
@media (max-width: 640px) {
  .filter-panel-inner { padding: 12px; }

  /* Каждая группа — одна строка: перенос делил варианты на неровные куски и
     группа читалась как две разные. Колонок ровно столько, сколько
     вариантов, ширина делится поровну. */
  .filter-group {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 5px;
    margin-bottom: 14px;
  }

  .filter-group-label { grid-column: 1 / -1; margin-bottom: 0; font-size: 11.5px; }

  .filter-group-tier { grid-template-columns: repeat(10, minmax(0, 1fr)); }
  .filter-group-mark { grid-template-columns: repeat(5, minmax(0, 1fr)); }

  /* Подписи ужимаются под свою колонку: у уровней остаются римские цифры,
     у отметок — короткие формы из data-short (см. renderFilterChips). */
  .filter-panel .filter-chip {
    padding: 6px 2px;
    font-size: 12px;
    white-space: nowrap;
    overflow: hidden;
  }
  .filter-group-tier .filter-chip { font-size: 11px; }
  .filter-group-mark .chip-label { font-size: 0; }
  .filter-group-mark .chip-label::after { content: attr(data-short); font-size: 11.5px; }
  /* Нации — тем же принципом, но флексом: у флагов своя пропорция. */
  .filter-group-nation { display: flex; flex-wrap: wrap; gap: 5px; }
  /* Пять флагов в ряд (девять — это две строки): в один ряд они выходили
     29 px шириной и не читались. Высота идёт за шириной (2:1), поэтому флаг
     не искажается при любой ширине экрана. */
  .filter-group-nation .filter-chip-flag {
    flex: 1 1 calc((100% - 4 * 5px) / 5);
    max-width: calc((100% - 4 * 5px) / 5);
    min-width: 0;
  }
  #filterBody .filter-chip-flag .flag-chip-sm { width: 100%; height: auto; aspect-ratio: 2 / 1; }
  /* Заголовок группы — отдельной строкой: в общем flex-ряду он вставал бы
     вровень с флагами и читался как подпись к первому из них. */
  .filter-group-nation .filter-group-label { flex: 1 1 100%; margin-bottom: 0; }
  /* Отступы у чипа-флага заданы через #filterBody (id перевешивает эти
     селекторы), поэтому обнуляем их тем же весом — иначе к ширине каждого
     флага добавлялись лишние 6 px и в ряд влезало четыре вместо пяти. */
  #filterBody .filter-group-nation .filter-chip-flag { margin: 0; }

  .filter-panel .filter-chip {
    margin: 0;
    justify-content: center;
    padding: 8px 4px;
    font-size: 12px;
    border-radius: 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    text-align: center;
  }

  /* Компактные числа медалей (8.8k) — им хватает и меньшего кегля */
  .ach-preview-count, .achievement-count { font-size: 10px; letter-spacing: 0; }
}

/* ---- Раскрывающийся блок «Показатели эффективности» ---- */

.eff-collapse {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 6px;
  background: none;
  border: none;
  color: inherit;
  font-family: inherit;
  cursor: pointer;
}

.eff-collapse h3 { margin: 0; }
/* У «Показателей эффективности» кружок мельче: заголовок там подзаголовочный,
   и кнопка со «Сессиями» одного размера перевешивала бы его. */
.eff-collapse .sess-chev { width: 24px; height: 24px; font-size: 13px; }
.eff-collapse:hover h3 { color: var(--accent); }

/* Панель повторяет механику фильтров: высота едет от 0 до scrollHeight */
.eff-panel { overflow: hidden; }

/* ---- Карточка рейтинга справа в баннере (по мотивам игровой) ---- */

.profile-rating {
  position: absolute;
  /* Прижата к низу баннера, а не по центру: сверху справа стоит карандаш
     смены фона, и по центру карточка залезала под него. */
  bottom: 14px;
  right: 22px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 14px;
  /* Без рамки и подложки — значок и цифры лежат прямо на баннере. Читаемость
     поверх пользовательского фона держит тень у текста и самого значка. */
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.75);
}

.profile-rating-icon {
  width: 54px;
  height: auto;
  flex: none;
  filter: drop-shadow(0 3px 8px rgba(0, 0, 0, 0.55));
}

.profile-rating-body { display: flex; flex-direction: column; gap: 1px; min-width: 0; }

.profile-rating-cap {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.profile-rating-league {
  font-size: 19px;
  font-weight: 800;
  line-height: 1.1;
  color: #d9a2ff;
  white-space: nowrap;
}

/* Цвет названия — по лиге, как в игре */
.profile-rating-bronze .profile-rating-league { color: #e09a5c; }
.profile-rating-silver .profile-rating-league { color: #d3dde6; }
.profile-rating-gold .profile-rating-league { color: #ffd166; }
.profile-rating-platinum .profile-rating-league { color: #8fe6ff; }
.profile-rating-brilliant .profile-rating-league { color: #d9a2ff; }
.profile-rating-calib .profile-rating-league { color: #cfd8d2; }

.profile-rating-stat {
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid rgba(255, 255, 255, 0.09);
}

.profile-rating-value {
  font-size: 22px;
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: #f0f4f0;
}

/* На узком экране карточка встаёт под шапкой отдельной строкой: поверх
   баннера она перекрыла бы ник. */
/* На узком экране карточка не может висеть справа поверх баннера — она встаёт
   в поток. Баннер при этом становится колонкой, чтобы ник с аватаром остались
   первыми (как были), а карточка легла под ними — то есть прямо над рядом
   кнопок, который идёт сразу за баннером. */
@media (max-width: 860px) {
  .profile-hero-banner { display: flex; flex-direction: column; }
  .profile-hero-main { order: 1; }

  .profile-rating {
    position: static;
    order: 2;
    /* Прижата вправо — ровно над рядом кнопок обновления и выхода,
       который идёт сразу за баннером. */
    align-self: flex-end;
    /* auto сверху прижимает карточку к нижнему краю баннера — вплотную к
       ряду кнопок, который идёт следом. */
    margin: 12px 0 0;
    margin-top: auto;
  }

  /* Карточка стоит вплотную к ряду кнопок: свои отступы низ баннера и верх
     ряда кнопок отдают целиком, иначе между ними висит пустая полоса. */
  .profile-hero-banner { padding-bottom: 14px; }
}

/* Телефон: карточка мельче — она подпись к профилю, а не его главный элемент */
@media (max-width: 640px) {
  .profile-rating { gap: 8px; margin-top: 10px; }
  .profile-rating-icon { width: 30px; }
  .profile-rating-cap { font-size: 8.5px; letter-spacing: 0.05em; }
  .profile-rating-league { font-size: 12.5px; }
  .profile-rating-value { font-size: 14px; }
  .profile-rating-stat { margin-top: 3px; padding-top: 3px; }
}


/* ============================================================
   Порядок блоков профиля (.psort-*) — стрелки у разделов основной колонки.
   Логика в public/profileSort.js.
   ============================================================ */

/* Стрелки раньше висели поверх раздела абсолютным блоком — на части экранов
   налезали на собственные кнопки заголовка (переключатели «Сессии»,
   «Тестовые бои», «Фильтр»: у них там же свой правый верхний угол). Теперь
   это отдельная строка над разделом, в обычном потоке — пересекаться не с
   чем, но раздел становится на её высоту ниже. */
.psort-sec { display: flex; flex-direction: column; }
.psort-sec.is-hidden .psort-nav { display: none; }

.psort-nav {
  order: -1;
  display: flex;
  justify-content: flex-end;
  gap: 2px;
  padding: 0 2px 4px;
}

.psort-btn {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: none;
  border-radius: 3px;
  background: none;
  color: var(--text);
  cursor: pointer;
  transition: color 0.15s ease, background 0.15s ease;
}
.psort-btn svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.psort-btn:hover:not(:disabled) { color: var(--accent); background: rgba(255, 255, 255, 0.07); }
.psort-btn:disabled { opacity: 0.25; cursor: default; }
.profile-source-notice {
  color: #efc780;
  font-size: 13px;
  line-height: 1.5;
  max-width: 680px;
  margin: 8px 0 0;
}