/* =============================================================
   Матч&мяч — release v76. Шапка профиля, вариант «Спортивный».

   Отдельный файл и отдельный неймспейс .phx-*. Он не переопределяет
   ни одного правила v75: пересечений в именах классов нет, а разметка
   .phx-* существует на странице только когда в админке выбран вариант
   «Спортивный». При любом другом варианте файл просто ни на что не
   находит селектор — откат ничего не требует.

   Композиция (desktop):

     ┌─────────────────────────────┬───────────────┐
     │ who   — фото, имя, уровень  │ power         │
     ├─────────────────────────────┤ текущая сила  │
     │ meta  — город, покрытие, био│ пик, парный   │
     ├─────────────────────────────┴───────────────┤
     │ band  — форма · матчи · титулы              │
     └─────────────────────────────────────────────┘

   На телефоне порядок другой (сила поднимается сразу под имя, справка
   уходит в самый низ), поэтому раскладка собрана на grid-template-areas:
   переставить блоки — это переписать areas, а не трогать разметку.
   ============================================================= */

.phx {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    grid-template-areas:
        "who   power"
        "meta  power"
        "band  band";
    border-radius: 22px;
    /* overflow не скрываем: всплывающие подробности матча выходят за
       верхнюю границу полосы формы и при overflow:hidden обрезались бы. */
    overflow: visible;
    background:
        radial-gradient(120% 150% at 88% 0%, rgba(200, 255, 61, .09), transparent 56%),
        linear-gradient(168deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .02) 46%, rgba(255, 255, 255, .01));
    border: 1px solid var(--border, rgba(255, 255, 255, .09));
    box-shadow: 0 28px 52px -46px rgba(0, 0, 0, .9);
}

/* Титул — состояние самого блока, а не отдельная лента сверху.
   Цвет тот же фирменный лайм: второй акцент здесь был бы чужим. */
.phx.is-champion {
    border-color: color-mix(in srgb, var(--accent, #C8FF3D) 32%, transparent);
    background:
        radial-gradient(120% 150% at 88% 0%, color-mix(in srgb, var(--accent, #C8FF3D) 15%, transparent), transparent 56%),
        linear-gradient(168deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .02) 46%, rgba(255, 255, 255, .01));
}

/* .phx-head существует только как смысловая обёртка в разметке; в раскладке
   участвуют его дети напрямую, иначе areas пришлось бы дублировать. */
.phx-head { display: contents; }

.phx-who   { grid-area: who; }
.phx-power { grid-area: power; }
.phx-meta  { grid-area: meta; }
.phx-band  { grid-area: band; }

/* ---------- Идентичность ---------- */

.phx-who {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 20px 22px 0;
    min-width: 0;
}

.phx-avatar {
    position: relative;
    flex: 0 0 84px;
    width: 84px;
    height: 84px;
    border-radius: 17px;
    background: rgba(255, 255, 255, .06);
    border: 1px solid var(--border, rgba(255, 255, 255, .1));
}
.phx-avatar img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 16px;
}
.phx-avatar-letter {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-size: 32px;
    font-weight: 800;
    color: var(--text-dim, #92988C);
}
.phx.is-champion .phx-avatar {
    border-color: color-mix(in srgb, var(--accent, #C8FF3D) 52%, transparent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent, #C8FF3D) 13%, transparent);
}

.phx-crown {
    position: absolute;
    top: -9px;
    left: -9px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--accent, #C8FF3D);
    color: var(--accent-ink, #142006);
    box-shadow: 0 6px 14px -6px rgba(0, 0, 0, .7);
}

/* NTRP держим на фотографии: это «паспортная» характеристика игрока,
   и в полосе показателей она соперничала бы с заработанными числами. */
.phx-ntrp {
    position: absolute;
    right: -10px;
    bottom: -8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1;
    padding: 5px 9px;
    border-radius: 10px;
    background: var(--bg, #0F110E);
    border: 1px solid var(--border-strong, rgba(255, 255, 255, .14));
}
.phx-ntrp b { font-size: 14px; font-weight: 800; }
.phx-ntrp i {
    margin-top: 2px;
    font-style: normal;
    font-size: 8.5px;
    letter-spacing: .1em;
    color: var(--text-dim, #92988C);
}

.phx-who-text {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-top: 1px;
}

.phx-kicker {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--text-dim, #92988C);
}
.phx-kicker svg { vertical-align: -2px; }
.phx-kicker-title { color: var(--accent, #C8FF3D); }
.phx-kicker-sep { opacity: .45; }

.phx-name {
    margin: 0;
    font-size: clamp(23px, 2.2vw, 31px);
    line-height: 1.06;
    font-weight: 800;
    letter-spacing: var(--track-tight, -.045em);
    color: var(--text, #F1F3EC);
}
.phx-inactive {
    margin-left: 10px;
    padding: 3px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0;
    vertical-align: middle;
    color: var(--text-dim, #92988C);
    border: 1px solid var(--border, rgba(255, 255, 255, .1));
}

/* Уровень игры — второй по значимости объект слева: он объясняет, что
   означает число справа, поэтому стоит рядом с именем, а не в подвале. */
.phx-tier {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    align-self: flex-start;
    padding: 5px 10px 5px 5px;
    border-radius: 10px;
    background: rgba(255, 255, 255, .04);
    border: 1px solid var(--border, rgba(255, 255, 255, .09));
}
.phx-tier > b {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 8px;
    font-size: 12.5px;
    font-weight: 800;
    background: var(--accent, #C8FF3D);
    color: var(--accent-ink, #142006);
}
.phx-tier > span { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.phx-tier strong { font-size: 12.5px; font-weight: 700; }
.phx-tier small { font-size: 10.5px; color: var(--text-dim, #92988C); }

.phx-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-left: auto;
    padding-left: 12px;
}

/* ---------- Текущая сила ---------- */

/* Единственный крупный объект блока. Отделён линией, а не отдельной
   карточкой: карточка внутри карточки читалась бы как чужой элемент. */
.phx-power {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1px;
    padding: 20px 22px;
    border-left: 1px solid var(--border, rgba(255, 255, 255, .08));
}

.phx-power-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.phx-power-label {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--text-dim, #92988C);
}

.phx-power-delta {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 3px 8px;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}
.phx-power-delta.is-up {
    color: var(--accent, #C8FF3D);
    background: var(--accent-dim, rgba(200, 255, 61, .11));
}
.phx-power-delta.is-down {
    color: var(--danger, #DD7E76);
    background: var(--danger-glow, rgba(221, 126, 118, .18));
}
.phx-power-delta.is-flat {
    color: var(--text-dim, #92988C);
    background: rgba(255, 255, 255, .05);
}

.phx-power-value {
    font-size: clamp(42px, 4.2vw, 58px);
    line-height: .94;
    font-weight: 800;
    letter-spacing: -.05em;
    font-variant-numeric: tabular-nums;
    color: var(--text, #F1F3EC);
    margin: 6px 0 0;
}
.phx-power-sub {
    font-size: 11.5px;
    color: var(--text-dim, #92988C);
    margin-top: 6px;
}

/* Пик, расстояние до пика и парный рейтинг — свита главного числа.
   Намеренно мелкие: это его контекст, а не самостоятельные показатели. */
.phx-power-side {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-top: 12px;
    padding-top: 11px;
    border-top: 1px solid var(--border, rgba(255, 255, 255, .08));
}
.phx-power-side span { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.phx-power-side small {
    font-size: 10.5px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text-faint, #6F766A);
}
.phx-power-side b {
    font-size: 14px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* ---------- Полоса: форма · матчи · титулы ---------- */

.phx-band {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr);
    margin-top: 16px;
    border-top: 1px solid var(--border, rgba(255, 255, 255, .08));
    background: rgba(255, 255, 255, .018);
}
.phx-band-cell {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 13px 22px;
    min-width: 0;
}
.phx-band-cell + .phx-band-cell {
    border-left: 1px solid var(--border, rgba(255, 255, 255, .08));
}
.phx-band-label {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--text-dim, #92988C);
}
.phx-band-label svg { color: var(--text-faint, #6F766A); }

/* Баланс и процент побед — одна метрика, а не две плитки: без процента
   «7–1» не говорит о стабильности, без баланса процент не говорит об объёме. */
.phx-band-value {
    font-size: 23px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.03em;
    font-variant-numeric: tabular-nums;
}
.phx-band-value i {
    font-style: normal;
    margin: 0 3px;
    color: var(--text-faint, #6F766A);
    font-weight: 600;
}
.phx-band-note { font-size: 11px; color: var(--text-dim, #92988C); }

/* ---------- Форма последних матчей ---------- */

.phx-form-row { display: flex; gap: 5px; flex-wrap: wrap; }
.phx-form-empty { font-size: 12.5px; color: var(--text-faint, #6F766A); }

.phx-form-cell {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 34px;
    padding: 0;
    border-radius: 8px;
    font: inherit;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
    background: rgba(255, 255, 255, .05);
    border: 1px solid transparent;
    color: var(--text-dim, #92988C);
    transition: transform .16s var(--ease, cubic-bezier(.16, 1, .3, 1)), background .16s, border-color .16s;
}
.phx-form-cell.is-win {
    background: color-mix(in srgb, var(--accent, #C8FF3D) 16%, transparent);
    color: var(--accent, #C8FF3D);
}
.phx-form-cell.is-loss {
    background: color-mix(in srgb, var(--danger, #DD7E76) 15%, transparent);
    color: var(--danger, #DD7E76);
}
.phx-form-mark { line-height: 1; font-variant-numeric: tabular-nums; }
/* Последний матч — точка отсчёта «как я играю сейчас», поэтому у него
   собственный контур, а не просто более яркая заливка. */
.phx-form-cell.is-latest.is-win { border-color: color-mix(in srgb, var(--accent, #C8FF3D) 60%, transparent); }
.phx-form-cell.is-latest.is-loss { border-color: color-mix(in srgb, var(--danger, #DD7E76) 55%, transparent); }
.phx-form-cell:hover { transform: translateY(-2px); }

.phx-form-pop {
    position: absolute;
    bottom: calc(100% + 10px);
    left: 50%;
    transform: translate(-50%, 4px);
    z-index: 30;
    display: flex;
    flex-direction: column;
    gap: 3px;
    width: max-content;
    max-width: 230px;
    padding: 10px 12px;
    text-align: left;
    border-radius: 12px;
    background: var(--card-elevated, #20251E);
    border: 1px solid var(--border-strong, #363D31);
    box-shadow: var(--shadow-pop, 0 26px 80px -38px rgba(0, 0, 0, .95));
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .16s ease, transform .16s ease, visibility .16s;
}
.phx-form-cell:hover .phx-form-pop,
.phx-form-cell:focus-visible .phx-form-pop,
.phx-form-cell.is-open .phx-form-pop {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
}
.phx-form-pop b { font-size: 12.5px; font-weight: 700; }
.phx-form-pop b.is-up { color: var(--accent, #C8FF3D); }
.phx-form-pop b.is-down { color: var(--danger, #DD7E76); }
.phx-form-pop em {
    font-style: normal;
    font-size: 13px;
    font-weight: 600;
    color: var(--text, #F1F3EC);
}
.phx-form-pop i {
    font-style: normal;
    font-size: 13px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--text, #F1F3EC);
}
.phx-pop-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 2px;
    font-size: 11.5px;
    color: var(--text-dim, #92988C);
}
.phx-pop-delta { font-weight: 700; font-variant-numeric: tabular-nums; }
.phx-pop-delta.is-up { color: var(--accent, #C8FF3D); }
.phx-pop-delta.is-down { color: var(--danger, #DD7E76); }

/* ---------- Справка об игроке ---------- */

/* Приглушено намеренно: город, покрытие и возраст не характеризуют силу
   игрока и не должны конкурировать с показателями. */
.phx-meta {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px 22px 16px;
    min-width: 0;
}
.phx-meta-line {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    font-size: 11.5px;
    color: var(--text-dim, #92988C);
}
.phx-meta-line a { color: var(--text-dim, #92988C); text-decoration: none; border-bottom: 1px solid var(--border-strong, #363D31); }
.phx-meta-line a:hover { color: var(--accent, #C8FF3D); border-color: currentColor; }
.phx-meta-sep { opacity: .4; }
.phx-meta-line .surface-dot { margin-right: 4px; }

.phx-meta-style {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    align-self: flex-start;
    font-size: 12px;
    font-weight: 600;
    color: var(--text, #F1F3EC);
}
.phx-meta-style svg { color: var(--accent, #C8FF3D); }

.phx-bio {
    margin: 0;
    font-size: 12px;
    line-height: 1.45;
    color: var(--text-dim, #92988C);
    /* Максимум две строки: длинное био растягивает первый экран и отодвигает
       график вниз, а это самая ценная часть блока. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    max-width: 68ch;
}
.phx-bio-add {
    align-self: flex-start;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    font: inherit;
    font-size: 12.5px;
    color: var(--text-dim, #92988C);
    border-bottom: 1px dashed var(--border-strong, #363D31);
}
.phx-bio-add:hover { color: var(--accent, #C8FF3D); }

/* ---------- Планшет ---------- */

@media (max-width: 1100px) {
    .phx { grid-template-columns: minmax(0, 1fr) 268px; }
    .phx-who, .phx-power { padding-left: 22px; padding-right: 22px; }
    .phx-band-cell, .phx-meta { padding-left: 22px; padding-right: 22px; }
    .phx-power-value { font-size: clamp(38px, 4.4vw, 48px); }
}

/* ---------- Телефон ---------- */

/* Не сжатый десктоп: порядок другой. Сила поднимается сразу под имя,
   форма идёт следом, справка уходит в самый низ. */
@media (max-width: 860px) {
    .phx {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "who"
            "power"
            "band"
            "meta";
        border-radius: 18px;
    }

    .phx-who {
        display: grid;
        grid-template-columns: 76px minmax(0, 1fr);
        gap: 14px;
        padding: 20px 18px 16px;
    }
    .phx-avatar { flex: none; width: 76px; height: 76px; border-radius: 16px; }
    .phx-avatar img { border-radius: 15px; }
    .phx-avatar-letter { font-size: 30px; }
    .phx-ntrp { right: -8px; bottom: -8px; padding: 4px 7px; }
    .phx-ntrp b { font-size: 12.5px; }

    /* Кнопки уходят на всю ширину под текст: в углу они превращались бы
       в тесную мишень рядом с именем. */
    .phx-actions {
        grid-column: 1 / -1;
        margin-left: 0;
        padding-left: 0;
        margin-top: 4px;
    }
    .phx-actions .btn { flex: 1 1 auto; justify-content: center; min-height: 42px; }

    .phx-power {
        border-left: 0;
        border-top: 1px solid var(--border, rgba(255, 255, 255, .08));
        padding: 18px 18px 20px;
    }
    .phx-power-value { font-size: 62px; margin-top: 4px; }
    .phx-power-side { margin-top: 14px; }

    /* Форма — самостоятельный блок в полный ряд: это второй по важности
       ответ на вопрос «как он играет», и ужимать его в треть строки нельзя. */
    .phx-band {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        margin-top: 0;
    }
    .phx-band-form { grid-column: 1 / -1; }
    .phx-band-form + .phx-band-cell { border-left: 0; }
    .phx-band-cell { padding: 16px 18px; }
    .phx-band-cell + .phx-band-cell { border-top: 1px solid var(--border, rgba(255, 255, 255, .08)); }
    .phx-band-record { border-right: 1px solid var(--border, rgba(255, 255, 255, .08)); }
    .phx-form-cell { width: 42px; height: 44px; }

    .phx-meta { padding: 14px 18px 18px; }

    /* На узком экране всплывашка у крайних ячеек упиралась бы в край
       экрана — прижимаем её к левому краю ряда. */
    .phx-form-cell .phx-form-pop { max-width: min(230px, 74vw); }
}

@media (max-width: 420px) {
    .phx-form-cell { width: 38px; height: 42px; }
    .phx-power-value { font-size: 54px; }
    .phx-name { font-size: 26px; }
}

@media (prefers-reduced-motion: reduce) {
    .phx-form-cell,
    .phx-form-pop { transition: none; }
    .phx-form-cell:hover { transform: none; }
}

/* =============================================================
   v80 UX polish — compact performance hero approved for profile.
   Full analytics live in the "Прогресс" tab; hero keeps only the
   identity, current strength, recent form and titles.
   ============================================================= */
.phx.phx-compact {
    display: block;
    overflow: hidden;
    isolation: isolate;
    border-radius: 24px;
    background:
        radial-gradient(760px 320px at 8% 0%, color-mix(in srgb, var(--accent, #C8FF3D) 8%, transparent), transparent 62%),
        linear-gradient(145deg, rgba(255,255,255,.047), rgba(255,255,255,.014));
}
.phx.phx-compact .phx-compact-top {
    display: grid;
    grid-template-columns: minmax(0,1fr) auto;
    gap: 22px;
    align-items: start;
    padding: 24px 26px 22px;
    border-bottom: 1px solid var(--border, rgba(255,255,255,.08));
}
.phx.phx-compact .phx-compact-identity {
    display: flex;
    align-items: center;
    gap: 18px;
    min-width: 0;
}
.phx.phx-compact .phx-compact-avatar {
    flex: 0 0 94px;
    width: 94px;
    height: 94px;
    border-radius: 22px;
}
.phx.phx-compact .phx-compact-avatar img { border-radius: 21px; }
.phx.phx-compact .phx-compact-copy { min-width: 0; }
.phx.phx-compact .phx-name {
    margin-top: 6px;
    font-size: clamp(30px, 3.8vw, 46px);
    line-height: .98;
}
.phx-compact-location {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 7px;
    margin-top: 9px;
    color: var(--text-dim, #92988C);
    font-size: 12.5px;
}
.phx-compact-location a { color: inherit; text-decoration: none; }
.phx-compact-location a:hover { color: var(--accent, #C8FF3D); }
.phx-compact-location span { color: var(--text-faint, #6F766A); }
.phx-compact-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 13px;
}
.phx-compact-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 28px;
    padding: 5px 9px;
    border-radius: 9px;
    border: 1px solid var(--border, rgba(255,255,255,.09));
    background: rgba(255,255,255,.025);
    color: var(--text, #F1F3EC);
    font-size: 11.5px;
    line-height: 1;
}
.phx-compact-chip b { font-size: 12px; }
.phx-compact-chip.is-accent {
    border-color: color-mix(in srgb, var(--accent, #C8FF3D) 24%, transparent);
    background: color-mix(in srgb, var(--accent, #C8FF3D) 7%, transparent);
}
.phx-compact-chip .surface-dot { margin: 0; }
.phx.phx-compact .phx-compact-actions {
    margin: 0;
    padding: 0;
    align-items: flex-start;
    justify-content: flex-end;
}

.phx-compact-performance {
    display: grid;
    grid-template-columns: minmax(0,1.55fr) minmax(230px,.7fr) minmax(220px,.65fr);
}
.phx-compact-panel {
    min-width: 0;
    padding: 21px 26px;
}
.phx-compact-panel + .phx-compact-panel {
    border-left: 1px solid var(--border, rgba(255,255,255,.08));
}
.phx-compact-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    color: var(--text-dim, #92988C);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
}
.phx-compact-panel-head > span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.phx-compact-panel-head button {
    border: 0;
    background: transparent;
    padding: 0;
    color: var(--text-dim, #92988C);
    font: inherit;
    font-size: 10.5px;
    letter-spacing: 0;
    text-transform: none;
    cursor: pointer;
}
.phx-compact-panel-head button:hover { color: var(--accent, #C8FF3D); }
.phx-compact-panel-head .phx-power-delta {
    font-size: 11.5px;
    letter-spacing: 0;
    text-transform: none;
}
.phx-compact-panel-head .phx-power-delta small {
    font-size: 9.5px;
    font-weight: 600;
    opacity: .72;
}
.phx-compact-rating-row {
    display: flex;
    align-items: flex-end;
    gap: 13px;
    margin-top: 8px;
}
.phx.phx-compact .phx-power-value {
    margin: 0;
    font-size: clamp(54px, 5vw, 68px);
    line-height: .9;
}
.phx-compact-rating-row > span {
    padding-bottom: 7px;
    color: var(--text-dim, #92988C);
    font-size: 11.5px;
}
.phx-compact-spark {
    height: 62px;
    margin-top: 8px;
    color: var(--text-faint, #6F766A);
    font-size: 11px;
}
.phx-compact-spark svg { overflow: visible; }
.phx-compact-rating-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 17px;
    margin-top: 4px;
    color: var(--text-dim, #92988C);
    font-size: 10.5px;
}
.phx-compact-rating-meta b {
    margin-left: 4px;
    color: var(--text, #F1F3EC);
    font-size: 11.5px;
    font-variant-numeric: tabular-nums;
}
.phx-compact-record {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    margin-top: 12px;
}
.phx-compact-record b {
    font-size: 36px;
    line-height: 1;
    letter-spacing: -.04em;
    font-variant-numeric: tabular-nums;
}
.phx-compact-record b i {
    margin: 0 2px;
    color: var(--text-faint, #6F766A);
    font-style: normal;
}
.phx-compact-record > span {
    padding-bottom: 4px;
    color: var(--text-dim, #92988C);
    font-size: 11px;
}
.phx.phx-compact .phx-form-row {
    gap: 6px;
    margin-top: 13px;
    flex-wrap: nowrap;
}
.phx.phx-compact .phx-form-cell {
    width: 31px;
    height: 31px;
    border-radius: 9px;
}
.phx-compact-note {
    margin-top: 11px;
    color: var(--text-dim, #92988C);
    font-size: 10.5px;
    line-height: 1.45;
}
.phx-compact-title-value {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-top: 13px;
}
.phx-compact-title-value > i {
    display: grid;
    place-items: center;
    width: 43px;
    height: 43px;
    flex: 0 0 43px;
    border-radius: 13px;
    color: var(--accent, #C8FF3D);
    background: color-mix(in srgb, var(--accent, #C8FF3D) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent, #C8FF3D) 18%, transparent);
    font-style: normal;
}
.phx-compact-title-value > div > b {
    display: block;
    font-size: 34px;
    line-height: 1;
    letter-spacing: -.04em;
}
.phx-compact-title-value > div > span {
    display: block;
    margin-top: 3px;
    color: var(--text-dim, #92988C);
    font-size: 10.5px;
    line-height: 1.35;
}
.phx-compact-bottom {
    display: grid;
    grid-template-columns: minmax(0,1fr) auto;
    align-items: center;
    gap: 20px;
    padding: 15px 26px;
    border-top: 1px solid var(--border, rgba(255,255,255,.08));
    background: rgba(255,255,255,.014);
    border-radius: 0 0 24px 24px;
}
.phx-compact-bottom.is-minimal { grid-template-columns: 1fr; justify-items: end; }
.phx-compact-about { min-width: 0; }
.phx.phx-compact .phx-meta-style {
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--text, #F1F3EC);
    font-size: 12px;
    font-weight: 700;
}
.phx.phx-compact .phx-bio {
    margin: 5px 0 0;
    max-width: 820px;
    overflow: hidden;
    color: var(--text-dim, #92988C);
    font-size: 11.5px;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.phx-compact-progress-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
    border: 0;
    background: transparent;
    color: var(--text, #F1F3EC);
    font: inherit;
    font-size: 11.5px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
}
.phx-compact-progress-link span { color: var(--accent, #C8FF3D); }
.phx-compact-progress-link:hover { color: var(--accent, #C8FF3D); }

@media (max-width: 980px) {
    .phx-compact-performance { grid-template-columns: 1fr 1fr; }
    .phx-compact-rating { grid-column: 1 / -1; border-bottom: 1px solid var(--border, rgba(255,255,255,.08)); }
    .phx-compact-panel:nth-child(2) { border-left: 0; }
}
@media (max-width: 680px) {
    .phx.phx-compact { border-radius: 19px; }
    .phx.phx-compact .phx-compact-top { grid-template-columns: 1fr; padding: 18px; gap: 15px; }
    .phx.phx-compact .phx-compact-identity { align-items: flex-start; gap: 13px; }
    .phx.phx-compact .phx-compact-avatar { flex-basis: 72px; width: 72px; height: 72px; border-radius: 17px; }
    .phx.phx-compact .phx-compact-avatar img { border-radius: 16px; }
    .phx.phx-compact .phx-name { font-size: 29px; }
    .phx-compact-location { font-size: 11px; }
    .phx-compact-chip { min-height: 26px; font-size: 10.5px; }
    .phx.phx-compact .phx-compact-actions { justify-content: flex-start; }
    .phx-compact-performance { grid-template-columns: 1fr; }
    .phx-compact-panel { padding: 18px; }
    .phx-compact-panel + .phx-compact-panel { border-left: 0; border-top: 1px solid var(--border, rgba(255,255,255,.08)); }
    .phx-compact-rating { grid-column: auto; border-bottom: 0; }
    .phx.phx-compact .phx-power-value { font-size: 56px; }
    .phx-compact-bottom { grid-template-columns: 1fr; padding: 15px 18px; border-radius: 0 0 19px 19px; }
    .phx.phx-compact .phx-bio { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
    .phx-compact-progress-link { justify-self: start; }
}