/* Натиск — статистика.
   Оформление повторяет экран ранговой системы клиента. Палитра, размеры и
   графика взяты из распакованных ресурсов:
     токены      gui/gameface/.../mono/lobby/lib/lib.css
     блок ранга  .../season_statistics/season_statistics.css (Rating_*)
     индикаторы  .../meta_root_view/meta_root_view.css (StatisticsIndicators_*, Bar_*)
   Картинки переносит tools/extract_assets.py в assets/. */

:root {
    --text: #ede6d9;            /* --color-general-primary */
    --dim: #b2afab;             /* --color-general-secondary */
    --dim-2: #8e867d;           /* --color-general-tertiary */
    --faint: rgba(142, 134, 125, .65);
    --line: rgba(237, 230, 217, .13);
    --gold: #fecc88;            /* --color-currency-gold */
    --cream: #fcf6eb;           /* --color-status-link */
    --link: rgba(255, 228, 192, .55);   /* StatisticsIndicators_linkText */
    --good: #16c116;            /* Diff_base__positive */
    --bad: #c13816;             /* Diff_base__negative */
    --neutral: #b9cccc;         /* StatisticsIndicators_subIndicatorValue */
    --red: #c8323c;
    --lace: #c0deef;            /* LaceDivider_line */
    --p1: #fecc88;
    --p2: #63c8e8;

    /* высота столбца графика — от неё зависит и текстура столбца */
    --chart-h: 320px;
}

* { box-sizing: border-box; }

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

html {
    /* Фон только на html. Если покрасить ещё и body, его непрозрачный фон
       перекроет .backdrop с отрицательным z-index — и картинка пропадёт
       везде, кроме коротких страниц, где body не дотягивается до низа. */
    background: #05121f;
}

html, body {
    margin: 0;
    padding: 0;
    min-height: 100%;
    color: var(--text);
    /* PFDINMax — шрифт клиента, в системе его нет. Bahnschrift это DIN 1451
       от Microsoft, идёт с Windows и держит тот же характер. */
    font: 14px/1.2 "PF DIN Max", "PF DIN", Bahnschrift, "Segoe UI", Tahoma, Arial, sans-serif;
    letter-spacing: .02em;
    -webkit-font-smoothing: antialiased;
}

body { overflow-x: hidden; }

/* ------------------------------------------------------------------- фон */

.backdrop {
    position: fixed;
    inset: 0;
    z-index: -2;
    background: url("assets/bg_season.jpg") no-repeat center center;
    background-size: cover;
    /* Лёгкое размытие: детали фона перестают спорить с мелким текстом таблиц.
       scale — чтобы блюр не осветлил края кадра, подтянув прозрачность. */
    filter: blur(7px);
    transform: scale(1.06);
}

.backdrop::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(1400px 900px at 50% 30%, rgba(5, 18, 31, .18) 0%, rgba(5, 18, 31, .68) 72%),
        linear-gradient(180deg, rgba(5, 18, 31, .38) 0%, rgba(5, 18, 31, .6) 60%, rgba(4, 12, 20, .92) 100%);
}

/* Вертикальный луч из клиента — тот же, что подсвечивает эмблему в игре. */
.shine {
    position: fixed;
    top: 4%;
    left: 18%;
    width: 900px;
    height: 900px;
    z-index: -1;
    background: url("assets/vertical_highlight.png") no-repeat center/contain;
    opacity: .45;
    pointer-events: none;
}

@media (max-width: 1250px) { .shine { display: none; } }

/* ---------------------------------------------------------- хлебные крошки */

.crumbs {
    position: fixed;
    top: 22px;
    left: 26px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--dim-2);
    z-index: 30;
}

.crumbs b { color: rgba(237, 230, 217, .9); font-weight: 600; }
.crumbs i { font-style: normal; }
.crumbs__sep { color: var(--faint); }

.crumbs__icon { width: 22px; height: 15px; fill: none; stroke: var(--text); stroke-width: 1.4; }

/* --------------------------------------------------------- островок меню */

/* Островок собран как вкладки меты в клиенте: тёмная полупрозрачная колонка,
   иконки из metaTabs, активная вкладка — тёплая подсветка с полосой слева. */
.island {
    position: fixed;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 8px 6px;
    background: linear-gradient(180deg, rgba(14, 24, 34, .82), rgba(8, 16, 24, .88));
    border: 1px solid rgba(237, 230, 217, .09);
    border-radius: 3px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .55), inset 0 1px rgba(237, 230, 217, .06);
    backdrop-filter: blur(10px);
    z-index: 30;
}

.island button {
    position: relative;
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 2px;
    background: transparent;
    cursor: pointer;
    transition: background .15s;
}

.island button i {
    width: 30px;
    height: 30px;
    background: no-repeat center/contain;
    opacity: .45;
    transition: opacity .15s, filter .15s;
}

.island button:hover { background: rgba(237, 230, 217, .07); }
.island button:hover i { opacity: .8; }

.island button.is-active {
    background: linear-gradient(90deg, rgba(200, 50, 60, .42), rgba(200, 50, 60, .1));
}

.island button.is-active i {
    opacity: 1;
    filter: drop-shadow(0 0 6px rgba(255, 190, 170, .55));
}

.island button.is-active::before {
    content: "";
    position: absolute;
    left: -6px;
    top: 6px;
    bottom: 6px;
    width: 2px;
    background: var(--red);
    box-shadow: 0 0 12px var(--red);
}

.island button::after {
    content: attr(data-label);
    position: absolute;
    left: 62px;
    padding: 6px 12px;
    border-radius: 2px;
    background: rgba(10, 18, 26, .96);
    border: 1px solid rgba(237, 230, 217, .12);
    font-size: 13px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: rgba(237, 230, 217, .9);
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity .12s;
}

.island button:hover::after { opacity: 1; }

.island hr {
    width: 60%;
    margin: 6px auto;
    border: 0;
    border-top: 1px solid rgba(237, 230, 217, .1);
}

/* --------------------------------------------------------------- поиск */

.search-open {
    position: fixed;
    top: 18px;
    right: 26px;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 8px 14px;
    border-radius: 20px;
    border: 1px solid var(--line);
    background: rgba(8, 14, 20, .5);
    color: var(--dim);
    font: inherit;
    font-size: 13px;
    cursor: pointer;
    z-index: 30;
    backdrop-filter: blur(6px);
}

.search-open:hover { color: var(--text); border-color: rgba(237, 230, 217, .35); }

.search-open svg, .search__field svg {
    width: 16px; height: 16px; fill: none; stroke: currentColor;
    stroke-width: 1.6; stroke-linecap: round;
}

.search {
    position: fixed;
    inset: 0;
    background: rgba(6, 12, 18, .74);
    backdrop-filter: blur(3px);
    z-index: 60;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding-top: 14vh;
}

.search__box {
    width: min(560px, 92vw);
    background: #0d1720;
    border: 1px solid rgba(237, 230, 217, .18);
    border-radius: 8px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, .6);
    overflow: hidden;
}

.search__field {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 15px 17px;
    border-bottom: 1px solid var(--line);
    color: var(--dim-2);
}

.search__field input {
    flex: 1; border: 0; background: transparent; color: var(--text);
    font: inherit; font-size: 16px; outline: none;
}

.search__close {
    font: inherit; font-size: 11px; color: var(--dim-2); background: transparent;
    border: 1px solid var(--line); border-radius: 3px; padding: 3px 8px; cursor: pointer;
}

.search__close:hover { color: var(--text); border-color: rgba(237, 230, 217, .4); }

.search__results { max-height: 46vh; overflow-y: auto; }

.search__item {
    display: flex; align-items: center; gap: 12px; width: 100%;
    padding: 11px 17px; border: 0; background: transparent; color: var(--text);
    font: inherit; text-align: left; cursor: pointer;
}

.search__item:hover, .search__item.is-cursor { background: rgba(237, 230, 217, .1); }
.search__item b { flex: 1; font-weight: 600; }
.search__item span { font-size: 12px; color: var(--dim-2); }
.search__item mark { background: transparent; color: var(--gold); }

.search__hint {
    padding: 10px 17px; font-size: 12px; color: var(--dim-2);
    border-top: 1px solid var(--line);
}

/* ---------------------------------------------------------------- экран */

main {
    padding: 70px 44px 60px 96px;
    max-width: 1900px;
    margin: 0 auto;
}

.screen {
    display: grid;
    grid-template-columns: minmax(330px, 440px) minmax(0, 1fr);
    gap: 60px;
    align-items: start;
}

@media (max-width: 1250px) {
    .screen { grid-template-columns: 1fr; gap: 34px; }
    main { padding: 70px 20px 56px 84px; }
}

/* сезон */

.season {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 18px;
    font-size: 20px;
    font-weight: 600;
    color: rgba(237, 230, 217, .9);
}

.season__cal {
    width: 26px; height: 26px;
    background: url("assets/calendar.png") no-repeat center/contain;
    opacity: .85;
}

/* Узорный разделитель из клиента: «венздя» по краям и двойная линия. */
.lace {
    display: flex;
    align-items: center;
    min-width: 180px;
    width: var(--lace-w, 290px);
    margin: var(--lace-m, 34px) auto;
    opacity: .2;
}

.lace__peak {
    flex: 0 0 auto;
    width: 43px;
    height: 14px;
    background: url("assets/venzel_peak.png") no-repeat center/cover;
}

.lace__peak--right { transform: rotateY(180deg); }

.lace__line {
    flex: 1 1 auto;
    height: 14px;
    background: linear-gradient(180deg, transparent 3px, var(--lace) 3px, var(--lace) 4px,
                transparent 4px, transparent 6px, var(--lace) 6px, var(--lace) 7px, transparent 7px);
    background-size: 1px 14px;
}

/* ----------------------------------------------------- блок ранга слева */

.hero { position: relative; text-align: center; padding-top: 6px; }

.hero__title {
    font-size: 36px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: rgba(237, 230, 217, .9);
}

.hero__sub { margin-top: 4px; font-size: 18px; color: rgba(237, 230, 217, .5); }

.hero__emblemBox {
    position: relative;
    display: grid;
    place-items: center;
    margin: 6px auto 0;
    width: min(340px, 82%);
    aspect-ratio: 1;
}

/* divine_glow из клиента — сияние за эмблемой */
.hero__glow {
    position: absolute;
    width: 190%;
    height: 190%;
    background: url("assets/divine_glow.png") no-repeat center/contain;
    filter: saturate(.8);
    opacity: .85;
    pointer-events: none;
}

.hero__emblem {
    position: relative;
    width: 100%;
    height: 100%;
    background: no-repeat center/contain;
}

.hero__score {
    margin-top: 4px;
    font-size: clamp(64px, 6.4vw, 100px);
    font-weight: 700;
    line-height: 1;
    color: rgba(237, 230, 217, .9);
}

.hero__scoreDesc { font-size: 18px; color: rgba(237, 230, 217, .5); }

.hero__delta { margin-top: 10px; font-size: 20px; font-weight: 700; }

.hero__note {
    margin: 0 auto;
    max-width: 360px;
    font-size: 16px;
    line-height: 1.45;
    color: rgba(237, 230, 217, .5);
}

.hero__note + .hero__note { margin-top: 12px; }
.hero__note b { color: rgba(237, 230, 217, .8); font-weight: 600; }

.hero__points { display: flex; justify-content: center; gap: 10px; margin-top: 14px; }
.hero__point { width: 48px; height: 48px; background: no-repeat center/cover; }

/* ---------------------------------------------------- правая колонка */

.pane__head {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 18px;
    flex-wrap: wrap;      /* на узком экране переключатели уходят на вторую строку */
}

.pane__back {
    display: flex; align-items: center; gap: 7px;
    border: 0; background: transparent; padding: 0;
    color: rgba(237, 230, 217, .9);
    font: inherit; font-size: 15px; font-weight: 600;
    letter-spacing: .1em; text-transform: uppercase; cursor: pointer;
}

.pane__back:hover { color: #fff; }

.pane__crumb {
    font-size: 15px; font-weight: 600; letter-spacing: .1em;
    text-transform: uppercase; color: var(--faint);
}

.pane__crumb::before { content: "|"; margin-right: 14px; }

.pane__tools { margin-left: auto; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.section-head { flex-wrap: wrap; }

/* Все кнопки — в одном ключе игры: тонкая тёплая рамка, прозрачный фон,
   выбранное состояние подсвечено заливкой. */
.seg { display: flex; border: 1px solid var(--link); border-radius: 3px; overflow: hidden; }

.seg button {
    padding: 7px 16px; border: 0; background: transparent; color: var(--link);
    font: inherit; font-size: 14px; letter-spacing: .02em; cursor: pointer;
    transition: all .2s;
}

.seg button + button { border-left: 1px solid var(--link); }
.seg button:hover { color: rgba(255, 228, 192, .95); background: rgba(255, 228, 192, .07); }

.seg button.is-active {
    background: rgba(255, 228, 192, .16);
    color: rgba(255, 240, 220, .98);
}

/* Выпадающий список типов боёв. Рамка и подсветка — те же, что у .seg,
   чтобы в шапке раздела он не выбивался из ряда переключателей. */
.drop { position: relative; }

.drop__btn {
    display: inline-flex; align-items: center; gap: 10px; padding: 7px 14px;
    border: 1px solid var(--link); border-radius: 3px; background: transparent;
    color: var(--link); font: inherit; font-size: 14px; letter-spacing: .02em;
    cursor: pointer; transition: all .2s;
}

.drop__btn:hover, .drop.is-open .drop__btn {
    color: rgba(255, 240, 220, .98);
    background: rgba(255, 228, 192, .16);
}

.drop__btn svg {
    width: 11px; height: 7px; fill: none; stroke: currentColor; stroke-width: 1.8;
    transition: transform .2s;
}

.drop.is-open .drop__btn svg { transform: rotate(180deg); }

.drop__list {
    display: none; position: absolute; z-index: 40; top: calc(100% + 6px); right: 0;
    min-width: 100%; white-space: nowrap;
    border: 1px solid var(--link); border-radius: 3px;
    background: rgba(6, 14, 24, .97);
    box-shadow: 0 12px 30px rgba(0, 0, 0, .55);
}

.drop.is-open .drop__list { display: block; }

.drop__list button {
    display: flex; align-items: center; justify-content: space-between; gap: 18px;
    width: 100%; padding: 9px 14px; border: 0; background: transparent;
    color: var(--link); font: inherit; font-size: 14px; text-align: left; cursor: pointer;
    transition: all .15s;
}

.drop__list button + button { border-top: 1px solid var(--line); }
.drop__list button:hover { background: rgba(255, 228, 192, .1); color: rgba(255, 240, 220, .98); }
.drop__list button.is-active { background: rgba(255, 228, 192, .16); color: rgba(255, 240, 220, .98); }
.drop__list i { font-style: normal; opacity: .6; }

.icon-btn {
    width: 36px; height: 36px; display: grid; place-items: center;
    border: 1px solid var(--link); border-radius: 3px; background: transparent;
    color: var(--link); cursor: pointer; transition: all .2s;
}

.icon-btn:hover { color: rgba(255, 228, 192, .95); border-color: rgba(255, 228, 192, .9); }
.icon-btn svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.6; }

.link-btn {
    padding: 7px 18px;
    border: 1px solid var(--link);
    border-radius: 3px;
    background: transparent;
    color: var(--link);
    font: inherit;
    font-size: 14px;
    cursor: pointer;
    transition: all .2s;
}

.link-btn:hover { color: rgba(255, 228, 192, .95); border-color: rgba(255, 228, 192, .9); }

/* --------------------------------------------------------------- график */

.chart {
    position: relative;
    display: flex;
    align-items: stretch;
    gap: 2px;
    height: calc(var(--chart-h) + 26px);
}

/* Колонка разделена на две зоны: столбец и подпись под ним. Раньше подпись
   лежала поверх низа столбца и сливалась с его цветом. */
.col {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    cursor: pointer;
}

.col__area {
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
}

/* Столбец собран послойно, как в клиенте: base — заливка, hatch — штриховка
   поверх неё, top — светлая шапка, light — свечение выделенного столбца.
   Все слои имеют фиксированный размер фона и прижаты к низу, поэтому при
   меньшей высоте столбца текстура обрезается сверху, а не растягивается. */
.col__bar {
    position: relative;
    width: 100%;
    max-width: 34px;
    min-height: 3px;
}

.col__bar span {
    position: absolute;
    inset: 0;
    background-repeat: no-repeat;
    background-position: bottom center;
}

/* Заливка растягивается на высоту столбца. Если оставить её фиксированной
   в 320px и прижать к низу (как в клиенте), у низких столбцов виден только
   нижний, самый прозрачный край текстуры — короткие столбцы получаются
   тусклее высоких. При растяжении каждый столбец показывает весь градиент
   целиком и все выглядят одинаково насыщенно. */
.col__bar .col__fill { background-size: 100% 100%; }

/* Штриховку не растягиваем, иначе рисунок поплывёт. */
.col__bar .col__hatch { background-size: 100% var(--chart-h); }

/* Шапка перевёрнута: в исходной текстуре плотный край снизу, и если положить
   её как есть, на границе получалась чёткая горизонтальная грань. */
.col__bar .col__top {
    inset: 0 0 auto 0;
    height: 26px;
    background-position: bottom center;
    background-size: 100% 100%;
    transform: scaleY(-1);
}

/* на совсем низких столбцах шапка занимала бы весь столбец */
.col__bar--flat .col__top { display: none; }

.col__light {
    position: absolute;
    bottom: 0;
    width: 100%;
    max-width: 34px;
    background-repeat: no-repeat;
    background-position: bottom center;
    background-size: 100% var(--chart-h);
    pointer-events: none;
    opacity: .9;
}

.col__holder {
    width: 100%;
    max-width: 34px;
    height: 38%;
    background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff);
    opacity: .1;
}

.col:hover .col__holder { opacity: .18; }
.col:hover .col__bar { filter: brightness(1.18); }

/* Рамка выбранного дня растёт от подписи до верха столбца, а не висит на всю
   высоту графика: её высоту задаёт тот же процент, что и у столбца. */
.col__frame {
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 42px;
    max-width: 100%;
    transform: translateX(-50%);
    border: 1px solid rgba(255, 228, 192, .5);
    border-top-color: rgba(255, 228, 192, .8);
    background: linear-gradient(180deg, rgba(255, 228, 192, .16), transparent);
    pointer-events: none;
}

.col.is-selected .col__label { color: var(--cream); }
.col.is-selected .col__bar { filter: brightness(1.22); }

.col__q {
    position: absolute;
    bottom: 4px;
    font-size: 15px;
    color: rgba(237, 230, 217, .35);
}

.col__label {
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    color: var(--faint);
    white-space: nowrap;
    letter-spacing: 0;
}

.col:hover .col__label { color: rgba(237, 230, 217, .75); }

.chart-empty { display: grid; place-items: center; height: 100%; color: var(--dim-2); }

.chart-tip {
    position: fixed;
    pointer-events: none;
    background: rgba(8, 14, 20, .97);
    border: 1px solid rgba(237, 230, 217, .22);
    border-radius: 4px;
    padding: 9px 12px;
    font-size: 13px;
    line-height: 1.5;
    white-space: nowrap;
    box-shadow: 0 10px 34px rgba(0, 0, 0, .6);
    z-index: 70;
}

.chart-tip b { display: block; margin-bottom: 4px; color: var(--cream); }
.chart-tip span { color: rgba(237, 230, 217, .55); }

/* --------------------------------------------------- строка индикаторов */

.summary {
    display: flex;
    flex-wrap: wrap;
    gap: 42px;
    padding: 22px 2px 26px;
}

.stat { display: flex; align-items: center; }

.stat__icon {
    width: 60px;
    height: 60px;
    margin-right: 6px;
    flex: none;
    background: no-repeat center/cover;
}

.stat__value {
    font-size: 32px;
    font-weight: 700;
    line-height: 1;
    color: rgba(237, 230, 217, .9);
}

.stat__desc {
    margin-top: 6px;
    font-size: 20px;
    color: rgba(237, 230, 217, .5);
    line-height: 1;
}

.stat__row { display: flex; align-items: center; gap: 6px; margin-top: 6px; }

.sub {
    display: flex;
    align-items: center;
    gap: 2px;
    font-size: 20px;
    color: var(--neutral);
}

.sub__icon { width: 22px; height: 22px; background: no-repeat center/cover; }
.sub--win { color: var(--good); }
.sub--loss { color: var(--bad); }

.diff { font-weight: 700; }
.pos { color: var(--good); }
.neg { color: var(--bad); }
.muted { color: rgba(237, 230, 217, .45); }

/* --------------------------------------------------------------- таблицы */

.section-head {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 10px 0 12px;
}

.section-head h2 {
    margin: 0;
    font-size: 26px;
    font-weight: 600;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: rgba(235, 234, 231, .6);
    text-shadow: 0 2px 30px rgba(23, 23, 23, .4), 0 2px rgba(0, 0, 0, .3);
}

.section-head .seg, .section-head .link-btn { margin-left: auto; }
.section-head .seg + .link-btn { margin-left: 10px; }

.table-wrap { overflow-x: auto; }

table {
    width: 100%;
    border-collapse: collapse;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

th {
    padding: 4px 14px;
    text-align: right;
    font-size: 14px;
    font-weight: 400;
    color: rgba(237, 230, 217, .35);
    cursor: pointer;
    user-select: none;
}

th:hover { color: var(--text); }
th.is-sorted { color: var(--gold); }
th.left, td.left { text-align: left; }

tbody tr { border-top: 1px solid rgba(237, 230, 217, .07); }
tbody tr:nth-child(even) { background: rgba(237, 230, 217, .03); }
tbody tr:hover { background: rgba(237, 230, 217, .08); }

td {
    height: 64px;
    padding: 6px 14px;
    text-align: right;
    font-size: 20px;
    color: rgba(237, 230, 217, .5);
}

td.strong { color: rgba(237, 230, 217, .9); font-weight: 600; }

.veh-cell { display: flex; align-items: center; gap: 14px; }

.veh-cell__icon {
    width: 32px; height: 32px; flex: none;
    background: url("assets/stats/vehicles.png") no-repeat center/contain;
    opacity: .8;
}

.veh-cell__img {
    width: 96px;
    height: 46px;
    flex: none;
    object-fit: contain;
    object-position: left center;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .5));
}

/* картинки нет ни для клона, ни для базовой машины — показываем силуэт */
.veh-cell__img.is-missing {
    width: 32px;
    height: 32px;
    background: url("assets/stats/vehicles.png") no-repeat center/contain;
    opacity: .8;
}

.veh-cell__name { color: rgba(237, 230, 217, .9); }
.veh-cell__tier { color: rgba(237, 230, 217, .45); margin-right: 10px; }

.type-icon {
    display: inline-block;
    width: 22px;
    height: 22px;
    margin-right: 8px;
    vertical-align: -5px;
    background: no-repeat center/contain;
    opacity: .75;
}

/* наградная техника — значок ярче остальных */
.type-icon.is-elite { opacity: 1; }

/* ------------------------------------------------------------ карты */

.map-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 16px;
}

.map-card {
    border: 1px solid var(--line);
    border-radius: 3px;
    background: rgba(237, 230, 217, .04);
    overflow: hidden;
}

.map-card__pic {
    position: relative;
    aspect-ratio: 16 / 9;
    background: rgba(237, 230, 217, .06);
}

.map-card__pic img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.map-card__name {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 22px 14px 10px;
    font-size: 19px;
    font-weight: 600;
    color: var(--cream);
    text-shadow: 0 2px 10px rgba(0, 0, 0, .9);
    background: linear-gradient(180deg, transparent, rgba(4, 12, 20, .85));
}

.map-card__tabs { display: flex; border-bottom: 1px solid var(--line); }

.map-card__tab {
    flex: 1;
    padding: 9px 4px;
    border: 0;
    background: transparent;
    color: var(--dim-2);
    font: inherit;
    font-size: 13px;
    cursor: pointer;
    transition: all .15s;
}

.map-card__tab + .map-card__tab { border-left: 1px solid var(--line); }
.map-card__tab i { font-style: normal; opacity: .65; }
.map-card__tab:hover:not(:disabled) { color: var(--text); background: rgba(237, 230, 217, .06); }

.map-card__tab.is-active {
    background: rgba(255, 228, 192, .14);
    color: rgba(255, 240, 220, .98);
}

.map-card__tab:disabled { opacity: .3; cursor: default; }

.map-card__pic[data-open-map] { cursor: pointer; }

/* Кнопка под карточкой: тем же числом боёв, что и в выбранной вкладке,
   уводит в список боёв именно этой карты. */
.map-card__open {
    display: block;
    width: 100%;
    padding: 10px 4px;
    border: 0;
    border-top: 1px solid var(--line);
    background: rgba(237, 230, 217, .03);
    color: var(--dim-2);
    font: inherit;
    font-size: 13px;
    letter-spacing: .02em;
    cursor: pointer;
    transition: all .15s;
}

.map-card__open:hover:not(:disabled) {
    background: rgba(255, 228, 192, .12);
    color: rgba(255, 240, 220, .98);
}

.map-card__open:disabled { opacity: .3; cursor: default; }

.map-card__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(84px, 1fr));
    gap: 10px 12px;
    padding: 14px;
}

.map-card__cell span {
    display: block;
    font-size: 12px;
    color: rgba(237, 230, 217, .45);
    margin-bottom: 2px;
}

.map-card__cell b { font-size: 19px; font-weight: 600; color: rgba(237, 230, 217, .9); }
.map-card__cell b.pos { color: var(--good); }
.map-card__cell b.neg { color: var(--bad); }

.side { font-size: 14px; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); }
.side em { font-style: normal; color: var(--alert); }

/* Результат боя — одинаковая рамка фиксированной ширины с центровкой,
   чтобы столбец читался как колонка, а не как разной длины подписи. */
.pill {
    display: inline-block;
    width: 132px;
    padding: 5px 0;
    border: 1px solid currentColor;
    border-radius: 2px;
    font-size: 15px;
    font-weight: 600;
    text-align: center;
    letter-spacing: .02em;
}

.pill--win { background: rgba(22, 193, 22, .12); color: var(--good); }
.pill--loss { background: rgba(193, 56, 22, .14); color: var(--bad); }
.pill--draw { background: rgba(185, 204, 204, .12); color: var(--neutral); }

.veh-list { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }

.veh-chip {
    font-size: 14px; padding: 2px 8px; border-radius: 2px;
    background: rgba(237, 230, 217, .07); color: rgba(237, 230, 217, .55);
}

.veh-chip b { color: rgba(237, 230, 217, .9); font-weight: 600; }

.empty-row { height: auto; padding: 34px; text-align: center; color: var(--dim-2); }

/* ------------------------------------------------ поиск «с кем играл» */

.with-box { position: relative; }

.with-box input {
    width: 210px;
    padding: 7px 12px;
    border: 1px solid var(--link);
    border-radius: 3px;
    background: transparent;
    color: var(--text);
    font: inherit;
    font-size: 14px;
    outline: none;
}

.with-box input::placeholder { color: rgba(255, 228, 192, .45); }
.with-box input:focus { border-color: rgba(255, 228, 192, .9); }

.with-list {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    min-width: 260px;
    max-height: 300px;
    overflow-y: auto;
    background: #0d1720;
    border: 1px solid rgba(237, 230, 217, .2);
    border-radius: 3px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, .6);
    z-index: 40;
}

.with-list button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    padding: 9px 14px;
    border: 0;
    background: transparent;
    color: var(--text);
    font: inherit;
    font-size: 14px;
    text-align: left;
    cursor: pointer;
}

.with-list button:hover { background: rgba(237, 230, 217, .1); }
.with-list button span { font-size: 12px; color: var(--dim-2); }
.with-list__empty { padding: 12px 14px; font-size: 13px; color: var(--dim-2); }

.with-chip {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 8px 6px 14px;
    border: 1px solid var(--link);
    border-radius: 3px;
    font-size: 14px;
    color: var(--link);
}

.with-chip b { color: rgba(255, 240, 220, .98); }

.with-chip button {
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    cursor: pointer;
    padding: 0 4px;
}

.with-chip button:hover { color: #fff; }

.with-tag {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 2px;
    font-size: 13px;
    font-weight: 600;
}

.with-tag--ally { background: rgba(22, 193, 22, .14); color: var(--good); }
.with-tag--enemy { background: rgba(193, 56, 22, .16); color: var(--bad); }

/* ---------------------------------------------------------- окно боя */

tbody tr.is-clickable { cursor: pointer; }

.battle {
    position: fixed;
    inset: 0;
    z-index: 65;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 8vh 20px 40px;
    background: rgba(4, 10, 18, .78);
    backdrop-filter: blur(4px);
    overflow-y: auto;
}

.battle__box {
    width: min(1060px, 100%);
    background: linear-gradient(180deg, #0e1c2a, #0a1622);
    border: 1px solid rgba(237, 230, 217, .16);
    border-radius: 4px;
    box-shadow: 0 40px 90px rgba(0, 0, 0, .65);
    overflow: hidden;
}

.battle__head {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    padding: 20px 24px;
    border-bottom: 1px solid var(--line);
}

.battle__title {
    font-size: 26px;
    font-weight: 600;
    color: rgba(237, 230, 217, .95);
}

.battle__title .side { margin-left: 12px; font-size: 14px; }

.battle__meta {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
    margin-top: 10px;
    font-size: 15px;
    color: rgba(237, 230, 217, .5);
}

.battle__meta b { color: rgba(237, 230, 217, .9); }

.battle__close {
    margin-left: auto;
    width: 34px;
    height: 34px;
    flex: none;
    border: 1px solid var(--line);
    border-radius: 3px;
    background: transparent;
    color: var(--dim);
    font-size: 15px;
    cursor: pointer;
}

.battle__close:hover { color: var(--text); border-color: rgba(237, 230, 217, .4); }

.battle__body { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); }

@media (max-width: 860px) { .battle__body { grid-template-columns: 1fr; } }

.team { background: #0a1622; padding: 4px 0 10px; }

.team__head {
    display: flex;
    justify-content: space-between;
    padding: 12px 20px 10px;
    font-size: 13px;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.team__head span { color: rgba(237, 230, 217, .45); letter-spacing: 0; text-transform: none; }
.team--ally .team__head { color: var(--good); }
.team--enemy .team__head { color: var(--bad); }

.player {
    display: grid;
    grid-template-columns: 22px minmax(0, 1.15fr) minmax(0, 1fr) 96px;
    align-items: center;
    gap: 10px;
    padding: 7px 20px;
    font-size: 15px;
}

.player:nth-child(even) { background: rgba(237, 230, 217, .03); }
.player.is-me { background: rgba(255, 228, 192, .1); }
.player.is-me .player__name { color: var(--gold); }
.player.is-dead { opacity: .55; }

.player__name { color: rgba(237, 230, 217, .9); overflow: hidden; text-overflow: ellipsis; }
.player__name em { font-style: normal; color: rgba(237, 230, 217, .45); }
.player__name i {
    display: block;
    font-style: normal;
    font-size: 12px;
    color: rgba(237, 230, 217, .35);
}

.player__veh { color: rgba(237, 230, 217, .55); overflow: hidden; text-overflow: ellipsis; }

.player__dmg { position: relative; text-align: right; }
.player__dmg b { position: relative; font-weight: 600; }
.player__dmg i {
    position: absolute;
    right: 0;
    bottom: -4px;
    height: 2px;
    background: rgba(255, 228, 192, .45);
}

/* ------------------------------------------------------------ сравнение */

.versus { display: grid; grid-template-columns: 1fr auto 1fr; gap: 22px; align-items: center; padding: 10px 0 18px; }
.versus__name { font-size: 26px; font-weight: 700; }
.versus__name--right { text-align: right; }
.versus__mid { font-size: 14px; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); }

.vs-row {
    display: grid; grid-template-columns: 1fr 230px 1fr; gap: 18px;
    align-items: center; padding: 12px 0; border-top: 1px solid rgba(237, 230, 217, .08);
}

.vs-row__label { text-align: center; font-size: 15px; color: rgba(237, 230, 217, .5); }
.vs-row__value { font-size: 26px; font-weight: 700; }
.vs-row__value--right { text-align: right; }

.vs-bar { display: flex; height: 4px; margin-top: 8px; overflow: hidden; background: rgba(237, 230, 217, .1); }
.vs-bar i { display: block; height: 100%; }

.pick {
    display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px;
    border-radius: 3px; border: 1px solid var(--link); background: transparent;
    color: var(--link); font: inherit; font-size: 14px; cursor: pointer;
}

.pick:hover { color: rgba(255, 228, 192, .95); border-color: rgba(255, 228, 192, .9); }

/* --------------------------------------------------------- список профилей */

.profiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }

.profile {
    display: flex; align-items: center; gap: 16px; text-align: left;
    padding: 16px 20px; border: 1px solid var(--line); border-radius: 4px;
    background: rgba(237, 230, 217, .04); color: var(--text); font: inherit; cursor: pointer;
}

.profile:hover { background: rgba(237, 230, 217, .09); border-color: rgba(237, 230, 217, .28); }
.profile__emblem { width: 56px; height: 56px; flex: none; background: no-repeat center/contain; }
.profile__name { font-size: 18px; font-weight: 600; color: rgba(237, 230, 217, .9); }
.profile__rating { font-size: 30px; font-weight: 700; line-height: 1.1; }
.profile__meta { font-size: 14px; color: rgba(237, 230, 217, .45); }

/* -------------------------------------------------------------- заглушка */

.blank { max-width: 640px; margin: 14vh auto; text-align: center; color: rgba(237, 230, 217, .55); }

.blank h2 {
    font-size: 28px; font-weight: 700; letter-spacing: .12em;
    text-transform: uppercase; color: rgba(237, 230, 217, .9); margin-bottom: 16px;
}

.blank p { line-height: 1.6; font-size: 17px; }
.blank__note { margin-top: 18px; font-size: 15px; color: rgba(237, 230, 217, .4); }
.blank code { background: rgba(237, 230, 217, .08); border-radius: 2px; padding: 1px 6px; color: var(--gold); }