/* ========================================
   PLAYER PROFILE — Detail Page
   Styles with pp- prefix
   ======================================== */

/* ---- HERO ---- */
/* Баннер держит карточку игрока, а не надпись по центру: высоту задаёт
   содержимое. Верхний отступ и минимальная высота — общие для карточек
   игрока, тренера, корта и турнира */
/* ОДНА МЕРА СТРАНИЦЫ — БОКОВОЕ ПОЛЕ. Замер 09.10: шапка стояла левее тела
   на 24 (десктоп, планшет лёжа) и правее на 4 (узкие виды). Причина — поле
   было определено дважды и по-разному: у .pp-hero снаружи предела 900, у
   .pp-container внутри него. Теперь поле одно, живёт в --pp-gutter, и обе
   коробки держат его ВНУТРИ своих 900 — границы совпадают по построению,
   а не по совпадению чисел. */
.pp-hero,
.pp-container { --pp-gutter: 24px; }

.pp-hero {
    position: relative;
    min-height: 300px;
    display: flex;
    align-items: center;
    padding: 110px 0 40px;
    overflow: hidden;
}

.pp-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, var(--modal-bg-heavy) 0%, var(--alpha-black-85) 60%, var(--bg-primary) 100%);
    z-index: 1;
}

.pp-hero-bg {
    position: absolute;
    inset: 0;
    background: url('https://images.unsplash.com/photo-1554068865-24cecd4e34b8?w=1400&q=80') center/cover;
    opacity: 0.3;
}

.pp-hero-content {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    padding: 0 var(--pp-gutter);
}

/* Внутри баннера карточке не нужны ни своя рамка, ни отступ снизу */
.pp-hero-content .pp-header {
    margin-bottom: 0;
}

/* ---- CONTAINER ---- */
.pp-container {
    max-width: 900px;
    margin: 0 auto;
    padding: 32px var(--pp-gutter) 80px;
}

/* Back link — now uses global .kslt-back-wrap + .kslt-back from style.css */

/* ---- PROFILE HEADER ---- */
.pp-header {
    display: flex;
    gap: 32px;
    align-items: center;
    margin-bottom: 40px;
}

.pp-photo-wrap {
    position: relative;
    flex-shrink: 0;
}

.pp-photo {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    object-fit: cover;
    /* ЛИЧНОСТЬ НЕ БЕРЁТ НИ ЦВЕТ СТАТУСА, НИ АКЦЕНТ — Avatar 29:82 говорит это
       прямо. Было кольцо 4px лаймом: лайм принадлежит одному главному
       действию на экране, а портрет не действие. Ступень 2xl 120 заведена в
       компоненте 09.10 по слову Кости — число больше не местное. */
    border: var(--bw-heavy) solid var(--alpha-white-08);
}

.pp-online-dot {
    position: absolute;
    bottom: 6px;
    right: 6px;
    width: 18px;
    height: 18px;
    background: var(--success);
    border-radius: 50%;
    border: var(--bw-heavy) solid var(--bg-primary);
    animation: pp-pulse 2s ease-in-out infinite;
}

@keyframes pp-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.4); }
    50% { box-shadow: 0 0 0 8px rgba(34, 197, 94, 0); }
}

.pp-info {
    flex-grow: 1;
}

.pp-name {
    font-size: var(--fs-2xl);
    /* 800 в системе весов нет: 400 · 500 · 600 · 700. И межстрочный заголовка
       — ступень 1.1, а не общие 1.5: 32 x 1.5 давало строку в 48 */
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.02em;
    margin-bottom: 4px;
}

.pp-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--text-secondary);
    font-size: var(--fs-base);
    margin-bottom: 12px;
    flex-wrap: wrap;
}

.pp-meta-country {
    font-size: var(--fs-md);
}

.pp-ratings {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 12px;
}

.pp-rating-row {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: var(--fs-sm);
}

.pp-rating-label {
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--accent);
    min-width: 40px;
    font-size: var(--fs-xs);
}

.pp-rating-value {
    color: var(--text-secondary);
    font-weight: 500;
}

.pp-meta-online {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--success);
    font-weight: 600;
    font-size: var(--fs-sm);
}

.pp-meta-online::before {
    content: '';
    width: 8px;
    height: 8px;
    background: var(--success);
    border-radius: 50%;
}

.pp-badges {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.pp-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: var(--surface-glass);
    border: var(--bw-hair) solid var(--border-subtle);
    border-radius: var(--radius-full);
    padding: 4px 12px;
    font-size: var(--fs-xs);
    color: var(--text-secondary);
    font-weight: 600;
}

.pp-badge-icon {
    font-size: var(--fs-sm);
}

/* Actions */
.pp-actions {
    display: flex;
    gap: 12px;
    flex-shrink: 0;
}

.pp-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    border-radius: var(--radius-full);
    font-size: var(--fs-sm);
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    /* ПЕРЕЧИСЛЯЕМ, А НЕ «ALL». Прогон 09.10 замерил на кнопке H2H:
       :focus-visible — да, цвет контура лаймовый, стиль solid, а ширина 0px.
       «all» анимирует и outline-width: контур у клавиатурного пользователя
       не появлялся мгновенно, а наезжал от нуля. Переход остаётся там, где
       нужен, но контур фокуса под него не попадает. */
    transition: background-color var(--transition-fast),
                color var(--transition-fast),
                border-color var(--transition-fast),
                box-shadow var(--transition-fast),
                transform var(--transition-fast);
}

/* Значок крупнее текста: на 0.9rem огонь терялся рядом с жирной надписью */
.pp-action-icon {
    font-size: var(--fs-lg);
    line-height: 1;
}

.pp-action-primary {
    background: var(--accent);
    color: var(--neutral-black);
    border: none;
}

.pp-action-primary:hover {
    background: var(--accent-hover);
    transform: translateY(-2px);
}

.pp-action-secondary {
    background: none;
    border: var(--bw-hair) solid var(--accent);
    color: var(--accent);
}

.pp-action-secondary:hover {
    background: var(--accent);
    color: var(--neutral-black);
}

/* ---- STATS ROW ---- */
/* Числа в ряд, без плиток — так же, как в кабинете.

   Кабинет и публичная страница показывают одно и то же про одного человека,
   а выглядели по-разному: здесь четыре плитки во всю ширину, там строка.
   Плитки к тому же разносили числа по углам, и сравнивать их приходилось
   через пустоту. Столбцы постоянной ширины: у категории с «209» подписи
   должны стоять там же, где у категории с «50». */
.pp-stats {
    display: grid;
    grid-template-columns: 108px repeat(3, 104px);
    justify-content: start;
    align-items: baseline;
    gap: 0 10px;
    margin-bottom: 20px;
}

/* Что именно посчитано. Стоит сразу под цифрами: вопрос «почему победы не
   сходятся с историей» возникает там же, где эти цифры видны */
.pp-stats-note {
    margin: 0 0 28px;
    /* --text-dim даёт 3.19 при норме AA 4.5 — решение Кости 06.10 убирает
       его из текста; тихих уровней три, и самый тихий из них --text-muted */
    color: var(--text-muted);
    font-size: var(--fs-sm);
}

.pp-stat {
    padding: 2px 0;
    text-align: center;
}

.pp-stat-num {
    /* Stat tile 39:57 просит 32 Bold. Костя посмотрел на макете и сказал
       мельче — ступень 21, вес из системы. ГЛАЗ ГЛАВНЕЕ КОМПОНЕНТА, и
       отклонение записано на доске 722:12, а не спрятано */
    font-size: var(--fs-lg);
    font-weight: 700;
    color: var(--accent);
    line-height: 1.1;
    margin-bottom: 1px;
}

.pp-stat-label {
    /* Было --text-dim: контраст 3.14 при норме AA 4.5 — решение 06.10 убирает
       его из текста. Stat tile 39:57: подпись 12 капсом */
    color: var(--text-muted);
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.pp-stat-change {
    font-size: var(--fs-xs);
    font-weight: 700;
    margin-top: 4px;
}

.pp-stat-change.up {
    color: var(--success);
}

.pp-stat-change.down {
    color: var(--danger);
}

.pp-stat-change.neutral {
    color: var(--text-muted);
}

/* Парные и смешанные игры.

   Тот же вид, что в кабинете: числа в ряд, полоса под ними. Без очков и без
   места — рейтинга в парах не существует, есть только сыгранное. */
.pp-pair-block {
    margin-top: 22px;
}
.pp-pair-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}
/* НАЗВАНИЕ БЛОКА ВНУТРИ РАЗДЕЛА — ОДИН УРОВЕНЬ, ОДНО ОПРЕДЕЛЕНИЕ.
   «Pro-Masters» (.pp-cat-name) и «Микст» (.pp-pair-title) — одна ступень
   лестницы: 16/700. До 09.10 они были объявлены врозь, в двух концах файла
   (строки 341 и 1824), одинаковыми по случайности. Беда родилась бы на шве:
   поправят один — второй уедет. Сторож на одинаковость стоит в заморозке. */
.pp-pair-title,
.pp-cat-name {
    font-size: var(--fs-base);
    font-weight: 700;
}
.pp-pair-note {
    font-size: var(--fs-xs);
    color: var(--text-muted);
}
.pp-pair-tag {
    font-size: var(--fs-2xs);
    font-weight: 700;
    padding: 1px 7px;
    border-radius: var(--radius-full);
    white-space: nowrap;
}
.pp-pair-tag-dbl { background: var(--info-subtle); color: var(--info); }
.pp-pair-tag-mix { background: rgba(168,85,247,0.18); color: var(--role-manager); }
/* Полоса идёт сразу под числами, без отступа сверху от блока категорий */
.pp-pair-block .pp-stats { margin-bottom: 10px; }

/* ---- SECTIONS ---- */
.pp-section {
    margin-bottom: 48px;
}

/* ---- Rating history chart ---- */
.pp-chart-box {
    position: relative;
    height: 340px;
    background: var(--alpha-white-04);
    border: var(--bw-hair) solid var(--alpha-white-08);
    border-radius: 14px;
    padding: 16px;
}

.pp-chart-box-sm {
    height: 180px;
}

.pp-chart-label {
    font-size: var(--fs-xs);
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 20px 0 8px;
}

@media (max-width: 640px) {
    .pp-chart-box { height: 260px; padding: 10px; }
    .pp-chart-box-sm { height: 150px; }

    /* ЦИФРА ПОКАЗАТЕЛЯ НА ТЕЛЕФОНЕ — СТУПЕНЬЮ НИЖЕ. Замер 09.10 на 390:
       карточка 86.5 шириной, подпись «Поражения» 12 занимает ровно 87 —
       впритык. Пара «цифра + подпись» стояла 21/12, через три ступени;
       на 18/12 это две, и ряд из четырёх читается как один блок, а не как
       четыре отдельных числа. Так же поступают компактный класс iOS и
       dense-вариант Material: крупное число опускается на ступень, подпись
       остаётся — 11 была бы ниже порога читаемости. */
    .pp-stat-num { font-size: var(--fs-md); }
}

.pp-section-title {
    font-size: var(--fs-lg);
    font-weight: 700;
    /* Лестница 86:10: заголовку 1.1–1.3, а не общие 1.5 */
    line-height: 1.3;
    /* ВОЗДУХ МЕЖДУ СЕКЦИЯМИ — ступень 40. Жил отдельным объявлением
       .pp-section-title в другом конце файла: один класс, два блока — тот же
       шов, что и у «Pro-Masters» с «Микстом». Сведено 09.10 */
    margin-top: var(--space-10);
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: var(--bw-hair) solid var(--border-subtle);
}

.pp-section-title span {
    color: var(--accent);
}

/* ---- MATCH HISTORY ---- */
.pp-matches {
    display: grid;
    gap: 8px;
}

.pp-match {
    display: grid;
    /* ОДИН ШАБЛОН КОЛОНОК НА ВСЕ СТРОКИ. Замер 09.10: у восьми строк было
       ШЕСТЬ разных шаблонов — `auto` и `1fr` считаются внутри КАЖДОЙ строки,
       а у строк с кнопкой H2H колонок шесть против пяти. Счёт из-за этого
       стоял на пяти вертикалях — разброс 99 px, и список «гулял».
       Теперь ширины названы: дата 80, турнир 190 (самое длинное в замере),
       имя забирает остаток, счёт 96, исход 44, H2H 48 — всё кратно 8.
       Строке без H2H последняя колонка просто остаётся пустой, и все
       предыдущие стоят на одной вертикали. */
    grid-template-columns: 80px 190px minmax(0, 1fr) 96px 44px 48px;
    gap: 16px;
    align-items: center;
    padding: 16px 20px;
    background: var(--surface-glass);
    border: var(--bw-hair) solid var(--border-subtle);
    border-radius: var(--radius-md);
    transition: border-color var(--transition-fast);
}

/* Кликабельная строка больше не заводит своего шаблона: он один на все */
.pp-match.pp-match-clickable {
    cursor: pointer;
}

.pp-match:hover {
    border-color: var(--border-light);
}

/* H2H button in match row */
.pp-match-h2h {
    background: transparent;
    border: var(--bw-hair) solid var(--accent);
    color: var(--accent);
    font-size: var(--fs-2xs);
    font-weight: 700;
    letter-spacing: 0.05em;
    padding: 4px 10px;
    border-radius: var(--radius-full);
    cursor: pointer;
    /* ЦЕЛЬ НАЖАТИЯ 44 ПРОЗРАЧНЫМ СЛОЕМ, решение 04.10: красится ступень,
       нажимается палец. Замер 09.10: кнопка была 47 x 23, и таких на
       странице десять. Цвет не трогаю — лайм на карточке даёт 16:1,
       моя первая запись про 1.18 была ошибкой прибора */
    position: relative;
    /* ПЕРЕЧИСЛЯЕМ, А НЕ «ALL». Прогон 09.10 замерил на кнопке H2H:
       :focus-visible — да, цвет контура лаймовый, стиль solid, а ширина 0px.
       «all» анимирует и outline-width: контур у клавиатурного пользователя
       не появлялся мгновенно, а наезжал от нуля. Переход остаётся там, где
       нужен, но контур фокуса под него не попадает. */
    transition: background-color var(--transition-fast),
                color var(--transition-fast),
                border-color var(--transition-fast),
                box-shadow var(--transition-fast),
                transform var(--transition-fast);
    white-space: nowrap;
}

.pp-match-h2h:hover {
    background: var(--accent);
    color: var(--neutral-black);
    transform: scale(1.05);
}

.pp-match-date {
    color: var(--text-muted);
    font-size: var(--fs-sm);
    font-weight: 500;
}

/* Название турнира и метка рода матча. Имя укорачиваем многоточием,
   метку — никогда, иначе от «дружеский» останется «дру…» */
/* Колонка турнира стоит столбиком: название с меткой рода матча, а под
   ними — с кем играли в паре. Строка с напарником есть только у парных и
   микста, поэтому одиночные строки остаются прежней высоты */
.pp-match-tournament {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    color: var(--text-muted);
    font-size: var(--fs-xs);
    max-width: 190px;
    min-width: 0;
}

.pp-match-tournament-row {
    display: flex;
    align-items: center;
    max-width: 100%;
    min-width: 0;
}

.pp-match-tournament-row > a {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* «в паре с Имя». Ступень ниже названия турнира: 11 против 12. Цвет не
   --text-dim — он даёт 3.22 : 1 на фоне строки при норме AA 4.5; muted даёт
   5.30, имя на --text-secondary — 9.84 (померено 11.10). И не --accent, как
   в кабинете: здесь имя соперника ссылкой не является, и лаймовое имя
   читалось бы как ссылка */
.pp-match-mate {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--fs-2xs);
    line-height: 1.3;
    color: var(--text-muted);
}

.pp-match-mate-name {
    color: var(--text-secondary);
    font-weight: 600;
}

/* НЕТ ФОТОГРАФИИ — ИНИЦИАЛЫ, А НЕ ЗАПРОС НА ЧУЖОЙ CDN.
   Здесь стоял адрес placehold.co: серый вопросительный знак на каждый кружок,
   запрос наружу на каждый из них и пустой короб, когда сеть до него не дошла.
   Краски те же, что у кабинета (css/dashboard.css:1426) и у карточек вызова:
   лайм в десятую долю под буквами акцентного цвета. */
.pp-photo-ph {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--alpha-lime-12);
    color: var(--accent);
    font-size: var(--fs-sm);
    font-weight: 700;
    line-height: 1;
    /* Буквы не выделяются при протяжке по строке: это картинка, а не текст */
    user-select: none;
}

/* Кружок крупнее — буквы ступенью выше: отношение держится, буквы занимают
   примерно треть кружка. 36 → 14, 72 → 26, 120 → 40, 96 → 32 */
.h2h-photo.pp-photo-ph {
    font-size: var(--fs-xl);
}

/* ПОРТРЕТ НЕ БЕРЁТ АКЦЕНТ — РЕШЕНИЕ 09.10 ДЕЙСТВУЕТ И НА ЗАГЛУШКУ.
   В строке списка и в окне буквы лаймовые, как в кабинете. Но лайм
   принадлежит одному главному действию на экране, а портрет — не действие,
   и лаймовый кружок 120 в шапке кричал бы громче всего остального.
   Здесь буквы тихие, на том же сером, что и обводка портрета. */
.pp-photo.pp-photo-ph,
.pp-guest-photo.pp-photo-ph {
    background: var(--alpha-white-08);
    color: var(--text-secondary);
    font-size: var(--fs-3xl);
}

/* Пара соперников: два кружка внахлёст и два имени в столбик — так же, как
   в кабинете (css/dashboard.css:1401). Одно фото и одно имя на двоих
   обманывали: на корте стояли четверо */
.pp-match-opponent-photos {
    display: flex;
    align-items: center;
    flex: none;
}

.pp-match-opponent-photo-2 {
    /* Нахлёст на ступень шкалы. Обводка цветом страницы отделяет кружки
       друг от друга: без неё они сливаются в одно пятно */
    margin-left: -8px;
    box-shadow: 0 0 0 2px var(--bg-primary);
}

.pp-match-opponent-pair {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
    min-width: 0;
}

.pp-match-opponent-pair > .pp-match-opponent-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Метка рода матча. В историю попадает всё сыгранное, а в зачёт — только
   рейтинговые одиночные. Цветом выделен лишь «рейтинг»: остальные метки
   поясняют, а не спорят за внимание. Раньше здесь стояла иконка на парные */
.pp-match-tag {
    flex: none;
    margin-left: 6px;
    padding: 1px 7px;
    border-radius: var(--radius-full);
    font-size: var(--fs-2xs);
    font-weight: 700;
    white-space: nowrap;
}
.pp-tag-rating   { background: var(--alpha-lime-12); color: var(--accent); }
.pp-tag-friendly { background: var(--alpha-white-12); color: var(--text-muted); }
.pp-tag-battle   { background: rgba(255,159,67,0.16); color: var(--orange-500); }
.pp-tag-doubles  { background: var(--info-subtle); color: var(--info); }
.pp-tag-mixed    { background: rgba(168,85,247,0.18); color: var(--role-manager); }

.pp-match-tournament a {
    color: var(--text-secondary);
    text-decoration: none;
    transition: color var(--transition-fast);
}

.pp-match-tournament a:hover {
    color: var(--accent);
}

.pp-match-opponent {
    display: flex;
    align-items: center;
    gap: 10px;
}

.pp-match-opponent-photo {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    border: var(--bw-thick) solid var(--border-subtle);
}

.pp-match-opponent-name {
    font-weight: 600;
    font-size: var(--fs-base);
}

.pp-match-score {
    font-weight: 700;
    font-size: var(--fs-base);
    /* ШИРИНУ ЦИФР ДЕРЖИТ СВОЙСТВО, А НЕ ВТОРОЕ СЕМЕЙСТВО.
       Было `'Inter', monospace`: моно включалось только там, где
       Inter не загрузился, — то есть счёт был либо пропорциональным,
       либо моно, по удаче. `tabular-nums` даёт одну ширину цифры в
       самом Inter, и счёт не дёргается при смене цифр. */
    font-family: var(--font-sans);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
}

.pp-match-result {
    padding: 4px 12px;
    border-radius: var(--radius-full);
    font-size: var(--fs-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    min-width: 32px;
    text-align: center;
}

.pp-match-result.win {
    background: rgba(34, 197, 94, 0.15);
    color: var(--success);
}

.pp-match-result.loss {
    background: var(--danger-subtle);
    color: var(--danger);
}

.pp-match-result.accepted {
    background: rgba(234, 179, 8, 0.15);
    color: #eab308;
}

.pp-match-opponent-name a,
a.pp-match-opponent-name {
    color: inherit;
    text-decoration: none;
}
a.pp-match-opponent-name:hover {
    color: var(--accent);
}

/* ---- ACHIEVEMENTS ---- */
.pp-achievements {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.pp-achievement {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--surface-glass);
    border: var(--bw-hair) solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: 16px 18px;
}

.pp-achievement-icon {
    font-size: var(--fs-xl);
    flex-shrink: 0;
}

.pp-achievement-info {
    flex-grow: 1;
}

.pp-achievement-name {
    font-weight: 700;
    font-size: var(--fs-sm);
    margin-bottom: 2px;
}

.pp-achievement-desc {
    color: var(--text-muted);
    font-size: var(--fs-sm);
}

/* ---- BADGES: Progress Bar ---- */
.pp-badges-progress {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 4px;
}

.pp-badges-progress-bar {
    flex: 1;
    height: 6px;
    background: var(--surface-glass);
    border: var(--bw-hair) solid var(--border-subtle);
    border-radius: 3px;
    overflow: hidden;
}

.pp-badges-progress-fill {
    height: 100%;
    background: var(--accent);
    border-radius: 3px;
    transition: width 0.6s ease;
}

.pp-badges-progress-text {
    color: var(--accent);
    font-size: var(--fs-sm);
    font-weight: 700;
    white-space: nowrap;
}

/* ---- BADGES: Earned vs Locked ---- */
.pp-achievement-earned {
    border-color: var(--alpha-lime-20);
}

.pp-achievement-locked {
    opacity: 0.5;
}

.pp-achievement-icon-locked {
    filter: grayscale(1);
    opacity: 0.4;
}

.pp-achievement-name-locked {
    color: var(--text-muted);
}

.pp-badges-empty {
    text-align: center;
    padding: 32px 20px;
    color: var(--text-muted);
    font-size: var(--fs-sm);
}

.pp-badges-expand {
    grid-column: 1 / -1;
    background: none;
    border: var(--bw-hair) dashed var(--border-subtle);
    border-radius: var(--radius-md);
    color: var(--accent);
    font-size: var(--fs-sm);
    font-weight: 600;
    padding: 12px 20px;
    cursor: pointer;
    /* ПЕРЕЧИСЛЯЕМ, А НЕ «ALL». Прогон 09.10 замерил на кнопке H2H:
       :focus-visible — да, цвет контура лаймовый, стиль solid, а ширина 0px.
       «all» анимирует и outline-width: контур у клавиатурного пользователя
       не появлялся мгновенно, а наезжал от нуля. Переход остаётся там, где
       нужен, но контур фокуса под него не попадает. */
    transition: background-color var(--transition-fast),
                color var(--transition-fast),
                border-color var(--transition-fast),
                box-shadow var(--transition-fast),
                transform var(--transition-fast);
    text-align: center;
}

.pp-badges-expand:hover {
    border-color: var(--accent);
    background: var(--alpha-lime-06);
}

/* ---- TOURNAMENTS ---- */
.pp-tournaments {
    display: grid;
    gap: 8px;
}

/* Селектор по классу, а не по ссылке: запись, добавленную админом руками,
   открывать нечего, и она рисуется обычным блоком. С a.pp-tournament
   оформление на неё не действовало, и строка разъезжалась столбиком */
.pp-tournament {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 16px;
    background: var(--surface-glass);
    border: var(--bw-hair) solid var(--border-subtle);
    border-radius: var(--radius-md);
    text-decoration: none;
    color: inherit;
    transition: border-color 0.2s, background 0.2s;
}
a.pp-tournament:hover {
    border-color: var(--accent);
    background: var(--alpha-lime-06);
}

/* У записи без турнира ссылки нет — и подсветки при наведении тоже */
.pp-tournament-plain:hover {
    border-color: var(--border-subtle);
    background: var(--surface-glass);
}

.pp-tournament-photo {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-sm);
    object-fit: cover;
    flex-shrink: 0;
    border: var(--bw-hair) solid var(--border-subtle);
}

.pp-tournament-photo-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-elevated);
    font-size: var(--fs-md);
}

.pp-tournament-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
}

.pp-tournament-name {
    font-weight: 600;
    font-size: var(--fs-base);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pp-tournament-date {
    font-size: var(--fs-xs);
    color: #888;
}

.pp-tournament-result {
    color: var(--accent);
    font-weight: 700;
    font-size: var(--fs-sm);
    white-space: nowrap;
    flex-shrink: 0;
}

.pp-tournament-winner {
    color: var(--warning);
}

.pp-tournament-upcoming {
    color: var(--accent);
    background: var(--alpha-lime-12);
    padding: 2px 10px;
    border-radius: var(--radius-full);
    font-size: var(--fs-xs);
}

.pp-tournament-section-label {
    font-size: var(--fs-xs);
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 4px 0;
}

/* ---- SUBSECTIONS (accordion inside My Games) ---- */
.pp-subsection {
    margin-bottom: 16px;
}

.pp-subsection:last-child {
    margin-bottom: 0;
}

.pp-subsection-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 14px 20px;
    background: var(--surface-glass);
    border: var(--bw-hair) solid var(--border-subtle);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-size: var(--fs-base);
    font-weight: 600;
    cursor: pointer;
    transition: border-color var(--transition-fast), background var(--transition-fast);
}

.pp-subsection-toggle:hover {
    border-color: var(--accent);
    background: var(--alpha-lime-06);
}

.pp-subsection-toggle.pp-subsection-open {
    border-radius: var(--radius-md) var(--radius-md) 0 0;
    border-bottom-color: transparent;
}

.pp-toggle-arrow {
    font-size: var(--fs-2xs);
    color: var(--text-muted);
    transition: transform 0.2s ease;
}

.pp-subsection-body {
    overflow: hidden;
    max-height: 2000px;
    transition: max-height 0.3s ease;
}

.pp-subsection-body.pp-subsection-collapsed {
    max-height: 0;
}

/* ---- CTA ---- */
.pp-cta {
    background: var(--surface-glass);
    border: var(--bw-hair) solid var(--border-subtle);
    border-radius: var(--radius-xl);
    padding: 48px 40px;
    text-align: center;
    margin-top: 20px;
}

.pp-cta h3 {
    font-size: var(--fs-xl);
    font-weight: 700;
    margin-bottom: 12px;
}

.pp-cta h3 span {
    color: var(--accent);
}

.pp-cta p {
    color: var(--text-secondary);
    margin-bottom: 24px;
}

.pp-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--accent);
    color: var(--neutral-black);
    font-size: var(--fs-base);
    font-weight: 700;
    padding: 14px 36px;
    border: none;
    border-radius: var(--radius-full);
    cursor: pointer;
    text-decoration: none;
    transition: background var(--transition-fast), transform var(--transition-fast);
}

.pp-cta-btn:hover {
    background: var(--accent-hover);
    transform: translateY(-2px);
}

/* Scroll animations */
.pp-fade-in {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.pp-fade-in.visible {
    opacity: 1;
    transform: translateY(0);
}

/* ---- RESPONSIVE ---- */
@media (max-width: 992px) {
    /* Строка из четырёх узких столбцов помещается и здесь — ломать нечего */
    .pp-stats {
        grid-template-columns: 96px repeat(3, 92px);
    }
}

/* ГРАНИЦА 768 РАЗЛОЖЕНА ПО ДВУМ ДОМАШНИМ — 16.10, кусок 75.
   Правило уходит туда, где то же свойство задано соседней ступенью.
   Лестницы страницы игрока после разбора (все монотонные):
     обложка   300 · 280 · 240        поле жёлоба  24 · 16 · 12
     имя        32 ·  26 ·  21        призыв    48/40 · 32/24 · 28/16
   ЧЕМ ПЛАТИМ: у пилюли показателей ступеней было ЧЕТЫРЕ — 108/104,
   96/92, 84/78 и четыре равные доли. Домашних границ две, и средняя
   ступень 84/78 снята: от 641 до 768 работает 96/92. Посчитано: ряд
   занимает 96 + 3 × 92 + 3 × 6 = 390 при ширине тела 736 — помещается
   с запасом. */

/* ПЛАНШЕТ И УЖЕ */
@media (max-width: 992px) {
    .pp-hero,
    .pp-container { --pp-gutter: 16px; }
    .pp-hero {
        min-height: 280px;
        padding: 100px 0 48px;
    }
    .pp-container {
        padding: 40px var(--pp-gutter) 60px;
    }
    .pp-name {
        font-size: var(--fs-xl);
    }
    /* Строка матча перестраивается: на планшете четыре колонки рабочего
       стола (80 + 190 + остаток + 96) оставляют сопернику полоску. */
    .pp-match {
        grid-template-columns: 1fr auto;
        gap: 10px;
    }
    .pp-match.pp-match-clickable {
        grid-template-columns: 1fr auto;
    }
    .pp-match-date {
        grid-column: 1 / -1;
    }
    .pp-match-tournament {
        grid-column: 1 / -1;
        max-width: none;
    }
    .pp-match-opponent {
        grid-column: 1 / -1;
    }
    .pp-match-h2h {
        grid-column: 1 / -1;
        justify-self: end;
    }
    .pp-cta {
        /* было 36/24 — 36 не ступень шкалы отступов */
        padding: 32px 24px;
    }
}

/* ТОЛЬКО ТЕЛЕФОН. Шапка игрока складывается в колонку и встаёт по центру;
   вместе с ней по центру встают мета, значки и кнопки. На планшете стоя
   портрет и сведения помещаются в ряд. Достижения в одну колонку — тоже
   телефонное: на планшете их две по 350. */
@media (max-width: 640px) {
    .pp-header {
        flex-direction: column;
        text-align: center;
        gap: 20px;
    }
    .pp-meta {
        justify-content: center;
    }
    .pp-badges {
        justify-content: center;
    }
    .pp-actions {
        justify-content: center;
    }
    .pp-achievements {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .pp-photo {
        width: 96px;
        height: 96px;
    }
    .pp-photo.pp-photo-ph {
        font-size: var(--fs-2xl);
    }
    .pp-stats {
        grid-template-columns: repeat(4, 1fr);
        gap: 0 4px;
    }
    .pp-stat {
        padding: 2px 0;
    }
    /* ОДИН УРОВЕНЬ — ОДИН КЕГЛЬ НА ВСЕ ВИДЫ: было 16 на 480 и 18 на 375 при
       21 на широких, то есть три значения на один уровень. Замер 09.10:
       четыре цифры при 21 помещаются в ряд даже на 390 */
    .pp-actions {
        flex-direction: column;
        width: 100%;
    }
    .pp-action-btn {
        justify-content: center;
        width: 100%;
    }
}

@media (max-width: 640px) {
    .pp-hero,
    .pp-container { --pp-gutter: 12px; }
    .pp-hero {
        padding: 100px 0 40px;
        min-height: 240px;
    }
    .pp-container {
        padding: 32px var(--pp-gutter) 48px;
    }
    .pp-name {
        font-size: var(--fs-lg);
    }
    .pp-cta {
        padding: 28px 16px;
    }
    .pp-cta h3 {
        font-size: var(--fs-lg);
    }
}

/* ========================================
   LOADING STATE
   ======================================== */
.pp-loading {
    text-align: center;
    padding: 40px 20px;
    color: var(--text-muted);
    font-size: var(--fs-sm);
}

/* ========================================
   CLICKABLE MATCHES (for H2H)
   ======================================== */
.pp-match-clickable {
    cursor: pointer;
    transition: border-color var(--transition-fast), background var(--transition-fast);
}

.pp-match-clickable:hover {
    border-color: var(--accent);
    background: rgba(201, 242, 29, 0.04);
}

/* ========================================
   H2H MODAL
   Prefix: h2h-
   ======================================== */

/* Overlay */
.h2h-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: var(--modal-bg-heavy);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.h2h-overlay.visible {
    opacity: 1;
}

/* Modal */
.h2h-modal {
    background: var(--neutral-800);
    border: var(--bw-hair) solid var(--border-subtle);
    border-radius: var(--radius-xl);
    padding: 36px 32px;
    max-width: 520px;
    width: 100%;
    position: relative;
    transform: translateY(20px);
    transition: transform 0.3s ease;
    max-height: 90vh;
    overflow-y: auto;
}

.h2h-overlay.visible .h2h-modal {
    transform: translateY(0);
}

/* Close button */
/* Icon button 40:93: под палец годится только lg 44. Было 36 */
.h2h-close {
    position: absolute;
    top: 14px;
    right: 14px;
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: var(--fs-xl);
    cursor: pointer;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: color var(--transition-fast), background var(--transition-fast);
}

.h2h-close:hover {
    color: var(--text-primary);
    background: var(--surface-glass);
}

/* Loading / Empty */
.h2h-loading,
.h2h-empty {
    text-align: center;
    padding: 48px 20px;
    color: var(--text-muted);
    font-size: var(--fs-base);
}

/* ---- Header: avatars + VS + score ---- */
.h2h-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    margin-bottom: 28px;
}

.h2h-player {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 0;
}

.h2h-photo {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    object-fit: cover;
    border: var(--bw-heavy) solid var(--border-subtle);
}

.h2h-name {
    font-weight: 700;
    font-size: var(--fs-sm);
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
}

.h2h-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

.h2h-score {
    font-size: var(--fs-2xl);
    /* 800 в системе весов нет: 400 · 500 · 600 · 700. Счёт и так крупнейший
       кегль окна и красится акцентом — лишний вес ничего не добавляет */
    font-weight: 700;
    color: var(--accent);
    letter-spacing: 0.02em;
    line-height: 1;
}

.h2h-label {
    font-size: var(--fs-xs);
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 600;
}

/* ---- Stats rows ---- */
.h2h-stats {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-bottom: 24px;
    border: var(--bw-hair) solid var(--border-subtle);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.h2h-stat-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    background: var(--surface-glass);
}

.h2h-stat-row + .h2h-stat-row {
    border-top: var(--bw-hair) solid var(--border-subtle);
}

.h2h-stat-val {
    font-size: var(--fs-lg);
    font-weight: 700;
    min-width: 40px;
}

.h2h-val-left {
    text-align: left;
    color: var(--accent);
}

.h2h-val-right {
    text-align: right;
    color: var(--text-secondary);
}

.h2h-stat-label {
    font-size: var(--fs-sm);
    color: var(--text-muted);
    text-align: center;
    flex: 1;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
}

/* ---- Match timeline ---- */
.h2h-matches {
    margin-bottom: 24px;
}

.h2h-matches-title {
    font-size: var(--fs-sm);
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
    margin-bottom: 12px;
}

.h2h-match {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border-radius: var(--radius-sm);
    background: var(--surface-glass);
    margin-bottom: 6px;
}

.h2h-match-date {
    color: var(--text-muted);
    font-size: var(--fs-xs);
    font-weight: 500;
    min-width: 52px;
    flex-shrink: 0;
}

.h2h-match-tournament {
    display: flex;
    align-items: center;
    color: var(--text-secondary);
    font-size: var(--fs-xs);
    flex: 1;
    min-width: 0;
}
.h2h-tname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.h2h-match-tournament .pp-match-tag { flex: none; }

.h2h-match-score {
    font-weight: 700;
    font-size: var(--fs-sm);
    /* ШИРИНУ ЦИФР ДЕРЖИТ СВОЙСТВО, А НЕ ВТОРОЕ СЕМЕЙСТВО.
       Было `'Inter', monospace`: моно включалось только там, где
       Inter не загрузился, — то есть счёт был либо пропорциональным,
       либо моно, по удаче. `tabular-nums` даёт одну ширину цифры в
       самом Inter, и счёт не дёргается при смене цифр. */
    font-family: var(--font-sans);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
    flex-shrink: 0;
}

.h2h-match-result {
    padding: 3px 10px;
    border-radius: var(--radius-full);
    font-size: var(--fs-2xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    flex-shrink: 0;
}

/* Та же роль «победа», что и в кабинете (css/dashboard.css). Здесь жил
   третий зелёный #22c55e, ΔE 6.5 до системного. Контраст 5.29 -> 6.03. */
.h2h-match-result.win {
    background: var(--success-subtle);
    color: var(--success);
}

.h2h-match-result.loss {
    background: var(--danger-subtle);
    color: var(--danger);
}

/* ---- Profile button ---- */
.h2h-profile-btn {
    display: block;
    text-align: center;
    padding: 14px 24px;
    background: var(--accent);
    color: var(--neutral-black);
    font-weight: 700;
    font-size: var(--fs-sm);
    border: none;
    border-radius: var(--radius-full);
    text-decoration: none;
    cursor: pointer;
    transition: background var(--transition-fast), transform var(--transition-fast);
}

.h2h-profile-btn:hover {
    background: var(--accent-hover);
    transform: translateY(-2px);
}

/* ---- H2H Responsive ---- */
@media (max-width: 640px) {
    .h2h-modal {
        padding: clamp(24px, 6.4vw, 28px) clamp(16px, 4.3vw, 20px);
        border-radius: var(--radius-lg);
    }

    .h2h-header {
        gap: 16px;
    }

    .h2h-photo {
        width: clamp(48px, 12.8vw, 56px);
        height: clamp(48px, 12.8vw, 56px);
    }

    .h2h-score {
        font-size: clamp(1.3125rem, 5.6vw, 1.625rem);
    }

    .h2h-name {
        font-size: var(--fs-xs);
    }

    .h2h-stat-val {
        font-size: var(--fs-md);
    }

    .h2h-stat-row {
        padding: 12px 14px;
    }

    .h2h-match {
        gap: 8px;
        padding: 8px 10px;
    }

    .h2h-match-tournament {
        display: none;
    }
}

@media (max-width: 640px) {
    .h2h-overlay {
        padding: 12px;
    }
}

/* ========================================
   CHALLENGE MODAL (pp-chal-)
   ======================================== */
.pp-chal-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: var(--modal-bg-heavy);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
    padding: 16px;
}
.pp-chal-overlay.visible { opacity: 1; }

/* Подсветка работает как тень, а не как неон: широкий мягкий ореол вокруг
   окна даёт объём, а цвет в нём едва угадывается. Яркое кольцо спорило бы
   с лаймовой кнопкой, а она здесь главное действие */
.pp-chal-modal {
    background: rgba(30,30,30,0.95);
    border: var(--bw-hair) solid var(--alpha-lime-12);
    border-radius: 16px;
    padding: 28px 24px;
    max-width: 420px;
    width: 100%;
    position: relative;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow:
        0 30px 90px var(--modal-bg-heavy),
        0 0 50px 8px var(--alpha-lime-12),
        0 0 150px 45px var(--alpha-lime-06),
        inset 0 1px 0 var(--alpha-white-04);
}

.pp-chal-close {
    position: absolute;
    top: 12px;
    right: 16px;
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: var(--fs-xl);
    cursor: pointer;
    padding: 4px;
    line-height: 1;
}
.pp-chal-close:hover { color: var(--neutral-white); }

.pp-chal-title {
    font-size: var(--fs-md);
    font-weight: 600;
    color: var(--neutral-white);
    margin: 0 0 20px;
    /* По центру: крестик прижат вправо, и заголовок слева выглядел
       сдвинутым относительно поля и кнопки под ним */
    text-align: center;
    padding: 0 24px;
}

.pp-chal-form { display: flex; flex-direction: column; gap: 14px; }

.pp-chal-field { display: flex; flex-direction: column; gap: 4px; }

.pp-chal-label {
    font-size: var(--fs-xs);
    color: var(--text-muted);
    font-weight: 500;
}

.pp-chal-input {
    background: var(--alpha-white-08);
    border: var(--bw-hair) solid var(--alpha-white-12);
    border-radius: 8px;
    color: var(--neutral-white);
    padding: 10px 12px;
    font-size: var(--fs-sm);
    outline: none;
    transition: border-color 0.2s;
}
.pp-chal-input:focus {
    border-color: var(--accent);
}

/* Размер фиксирован: тянущееся поле ломало высоту окна.
   Высота подобрана под предел в 150 символов — при ширине поля это три
   строки, берём четыре с запасом, чтобы полосы прокрутки не появлялось */
.pp-chal-textarea {
    resize: none;
    height: 118px;
    /* ступень лестницы, было 1.45 */
    line-height: 1.5;
    /* Не «прятать лишнее»: при неудачном наборе слов последняя строка
       уходила бы под край молча. Высоты хватает на все 150 символов,
       а если текст всё же не влез — лучше полоса, чем пропажа */
    overflow-y: auto;
}

.pp-chal-req {
    color: var(--danger);
}

.pp-chal-counter {
    font-size: var(--fs-xs);
    color: var(--text-muted);
    text-align: right;
}

.pp-chal-submit {
    background: var(--accent);
    color: var(--neutral-black);
    border: none;
    border-radius: 10px;
    padding: 12px;
    font-size: var(--fs-base);
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.2s;
    margin-top: 4px;
}
.pp-chal-submit:hover { opacity: 0.9; }
.pp-chal-submit:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Challenge Toast */
/* По центру экрана, а не у нижнего края: сообщение относится к окну вызова,
   которое открыто посередине, и внизу его легко не заметить */
/* Над окном, а не по центру экрана: окно тоже по центру, и сообщение
   ложилось прямо на поле ввода */
.pp-chal-toast {
    position: fixed;
    top: 96px;
    left: 50%;
    transform: translate(-50%, -12px) scale(0.98);
    padding: 14px 26px;
    box-shadow: 0 20px 60px var(--alpha-black-50);
    border-radius: 10px;
    font-size: var(--fs-sm);
    font-weight: 500;
    z-index: 10000;
    opacity: 0;
    transition: opacity 0.3s, transform 0.3s;
    pointer-events: none;
}
.pp-chal-toast.visible {
    opacity: 1;
    transform: translate(-50%, 0) scale(1);
}
.pp-chal-toast-success {
    background: var(--accent);
    color: var(--neutral-black);
}
.pp-chal-toast-error {
    background: var(--danger);
    color: var(--neutral-white);
}

@media (max-width: 640px) {
    .pp-chal-modal {
        padding: 20px 16px;
    }
}

/* ---- GUEST BLOCK ---- */
.pp-guest-block {
    max-width: 500px;
    margin: 60px auto;
    text-align: center;
    padding: 0 20px;
}

.pp-guest-preview {
    margin-bottom: 32px;
}

.pp-guest-photo {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    object-fit: cover;
    border: var(--bw-heavy) solid var(--border-subtle);
    filter: blur(4px) grayscale(0.5);
    margin-bottom: 16px;
}

.pp-guest-name {
    font-size: var(--fs-xl);
    font-weight: 700;
    color: var(--text-primary);
}

.pp-guest-cta {
    background: var(--bg-card);
    border: var(--bw-hair) solid var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: 40px 32px;
}

.pp-guest-cta svg {
    color: var(--accent);
    margin-bottom: 16px;
}

.pp-guest-cta h3 {
    font-size: var(--fs-md);
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 8px;
}

.pp-guest-cta p {
    font-size: var(--fs-sm);
    color: var(--text-muted);
    line-height: 1.5;
    margin-bottom: 24px;
}

.pp-guest-btn {
    display: inline-block;
    padding: 12px 36px;
    background: var(--accent);
    color: var(--neutral-black);
    font-size: var(--fs-base);
    font-weight: 700;
    border-radius: var(--radius-full);
    text-decoration: none;
    /* ПЕРЕЧИСЛЯЕМ, А НЕ «ALL». Прогон 09.10 замерил на кнопке H2H:
       :focus-visible — да, цвет контура лаймовый, стиль solid, а ширина 0px.
       «all» анимирует и outline-width: контур у клавиатурного пользователя
       не появлялся мгновенно, а наезжал от нуля. Переход остаётся там, где
       нужен, но контур фокуса под него не попадает. */
    transition: background-color 0.2s ease,
                color 0.2s ease,
                box-shadow 0.2s ease,
                transform 0.2s ease;
}

.pp-guest-btn:hover {
    background: var(--accent-hover);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px var(--alpha-lime-20);
}

@media (max-width: 640px) {
    .pp-guest-block {
        margin: 40px auto;
    }

    .pp-guest-cta {
        padding: 28px 20px;
    }

    .pp-guest-photo {
        width: 80px;
        height: 80px;
    }
}

/* Контакты игрока — видны только членам клуба и только если он разрешил */
/* Способы связи — небольшие плашки в ряд, знак сети и имя рядом.
   Раньше каждая тянулась во всю ширину и с одним словом внутри выглядела
   как пустая полоса; что это ссылка, догадаться было трудно */
.pp-contacts {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.pp-contact {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 14px;
    border: var(--bw-hair) solid var(--border-subtle);
    border-radius: var(--radius-full);
    background: var(--bg-elevated);
    color: var(--text-primary);
    text-decoration: none;
    font-size: var(--fs-sm);
    line-height: 1;
    white-space: nowrap;
    transition: border-color 0.2s, background 0.2s, color 0.2s;
}

.pp-contact svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    color: var(--text-muted);
    transition: color 0.2s;
}

.pp-contact:hover {
    border-color: var(--accent);
    background: var(--surface-glass-hover);
}

/* Каждая сеть подсвечивается своим цветом — так плашка узнаётся
   быстрее, чем по надписи */
.pp-contact:hover svg { color: var(--accent); }
.pp-contact-wa:hover { border-color: #25D366; }
.pp-contact-wa:hover svg { color: #25D366; }
.pp-contact-tg:hover { border-color: var(--brand-telegram); }
.pp-contact-tg:hover svg { color: var(--brand-telegram); }
.pp-contact-ig:hover { border-color: #E1306C; }
.pp-contact-ig:hover svg { color: #E1306C; }

@media (max-width: 640px) {
    .pp-contact { font-size: var(--fs-sm); padding: 8px 12px; }
}


/* ---- Статистика по категориям ----
   Игрок может держать очки сразу в двух категориях и в рейтинге стоит
   двумя строками. Раньше на странице показывалась только домашняя, и
   вторая со страницы пропадала */
.pp-cat-block {
    margin-bottom: 20px;
}

.pp-cat-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}

/* .pp-cat-name объявлен вместе с .pp-pair-title — см. «НАЗВАНИЕ БЛОКА
   ВНУТРИ РАЗДЕЛА» выше. Здесь второго объявления нет намеренно. */

.pp-cat-home {
    font-size: var(--fs-2xs);
    font-weight: 500;
    color: var(--accent);
}

.pp-cat-place {
    margin-left: auto;
    padding: 2px 10px;
    border: var(--bw-hair) solid var(--border-subtle);
    border-radius: var(--radius-full);
    background: var(--bg-elevated);
    font-size: var(--fs-xs);
    font-weight: 700;
    color: var(--text-secondary);
}

/* Полоса побед: цвета те же, что у значков W и L в таблице матчей */
.pp-cat-bar {
    display: flex;
    height: 6px;
    margin: 10px 0 6px;
    border-radius: 3px;
    overflow: hidden;
    background: var(--alpha-white-08);
}

.pp-cat-bar-w,
.pp-cat-bar-l {
    display: block;
    height: 100%;
}

.pp-cat-bar-w { background: var(--success); }
.pp-cat-bar-l { background: var(--danger); }

.pp-cat-legend {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    font-size: var(--fs-xs);
    color: var(--text-muted);
}

.pp-cat-mark {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 2px;
    margin-right: 5px;
    vertical-align: middle;
}

.pp-cat-mark-w { background: var(--success); }
.pp-cat-mark-l { background: var(--danger); margin-left: 10px; }

.pp-cat-rate {
    font-weight: 600;
    color: var(--text-secondary);
}


/* Запись без турнира: выглядит как остальные, но не ведёт себя как ссылка */
.pp-tournament-plain {
    cursor: default;
}

/* Имя соперника — главное в заголовке: видно, кого именно вызываешь */
.pp-chal-rival {
    color: var(--accent);
}

.pp-chal-submit:disabled {
    opacity: 0.45;
    cursor: default;
}

/* ---- Возврат на странице игрока ----
   Плавает у левого края под шапкой: виден и поверх баннера, и когда баннер
   уже прокручен. В потоке он уезжал вместе с баннером, а прилипание не
   помогает — оно действует только в пределах родителя. */
/* ОБЩИЙ КОМПОНЕНТ ПРИНОСИТ ВТОРУЮ ПОДЛОЖКУ, И ОНА ЗАКРАШИВАЕТ ИМЯ.
   .kslt-back-wrap::before (css/style.css:8713) рисует полосу ВО ВСЮ ШИРИНУ
   окна сплошным --bg-primary. Здесь у ссылки есть своя таблетка, и пока
   она fixed, широкая подложка едет вместе с окном поверх шапки.
   Общее правило не трогаю: его зовут шесть мест и держат пять файлов
   заморозки — гашу подложку только на этой странице. */
.kslt-back-wrap.pp-back-float::before {
    content: none;
}

.kslt-back-wrap.pp-back-float {
    position: fixed;
    top: 76px;
    left: 24px;
    z-index: 900;
    padding: 8px 14px;
    /* Без рамки: она превращает ссылку в кнопку и спорит с шапкой, которая
       рядом и тоже обведена. Подложка нужна — поверх фотографии в баннере
       текст без неё не читается */
    border: none;
    border-radius: var(--radius-full);
    background: rgba(10, 10, 10, 0.6);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.kslt-back-wrap.pp-back-float .kslt-back {
    font-size: var(--fs-sm);
}

/* Ниже 1300 пикселей по бокам не остаётся места: кнопка наехала бы на
   содержимое. Возвращаем её в поток, над карточкой.

   11.11 · НАМЕРЕНО. Это единственная ширина в медиа мимо 640 и 992 во всём
   продукте, и она здесь не про раскладку: 1300 — ширина, при которой
   плавающая кнопка перестаёт помещаться СБОКУ ОТ КАРТОЧКИ в 1100. Число
   посчитано из содержимого, а не выбрано: 1100 карточки + 2 × 100 на
   кнопку = 1300. Увести её на 992 нельзя — между 992 и 1300 кнопка уже
   наезжает, а полоса эта живая (ноутбуки 1280). ЧИСЛО, ПОСЧИТАННОЕ ИЗ
   СОДЕРЖИМОГО, НЕ ТО ЖЕ, ЧТО ЧИСЛО, ВЗЯТОЕ С ПОТОЛКА. */
@media (max-width: 1300px) {
    .kslt-back-wrap.pp-back-float {
        position: static;
        padding: 12px var(--pad-x);
        border: none;
        border-radius: 0;
        background: var(--bg-primary);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }
}

/* Текст в окне-сообщении по центру, как и заголовок над ним */
.pp-chal-alert-text {
    margin: 14px 0 0;
    color: var(--text-muted);
    text-align: center;
    line-height: 1.5;
}

.pp-chal-alert-text:last-child {
    margin-bottom: 6px;
}

/* Отказ — красным: удачная отправка и запрет выглядели одинаково белым */
.pp-chal-title.pp-chal-title-warn {
    color: var(--danger);
}


/* Звать нельзя — кнопка это показывает подписью, но остаётся живой:
   по нажатию она объясняет причину. Отключённая на телефоне не объяснит
   ничего, подсказок по наведению там нет */
.pp-action-btn.pp-action-off {
    opacity: 0.6;
    filter: grayscale(0.5);
}

/* Метка на карточке игрока, который удалил учётную запись. Карточка
   живёт дальше — результаты и очки принадлежат турнирам, — но связи с
   человеком больше нет, и это должно быть видно */
.pp-account-gone {
    display: inline-block;
    margin-top: 6px;
    padding: 3px 10px;
    border: var(--bw-hair) solid var(--border-light);
    border-radius: var(--radius-full);
    font-size: var(--fs-xs);
    font-weight: 500;
    letter-spacing: 0.02em;
    color: var(--text-muted);
    background: var(--surface-glass);
}

/* Карточка человека, которого нет в клубе: перенесён из списков NTRP,
   членство не оформлено. Вызвать его нельзя — некому отвечать */
.pp-not-member {
    display: inline-block;
    margin-top: 10px;
    padding: 8px 14px;
    border: var(--bw-hair) solid var(--border-light);
    border-radius: var(--radius-md);
    background: var(--surface-glass);
    color: var(--text-muted);
    font-size: var(--fs-sm);
    /* ступень лестницы, было 1.4 */
    line-height: 1.5;
    max-width: 340px;
}

/* ============================================
   СТРАНИЦА ИГРОКА НА ТЕЛЕФОНЕ
   ============================================ */

/* Карточка турнира растягивалась до 659 пикселей при контейнере в 358:
   у flex-элемента min-width по умолчанию auto, и название не давало
   строке сжаться. Лишнее пряталось за краем, а само название обрезалось
   многоточием — «МАЙСКИЙ ЧЕМПИОНАТ КСЛТ — ИТО…».

   Разрешаем сжиматься и показываем название двумя строками целиком. */

/* ПЛАНШЕТ И УЖЕ: строка турнира и карточка матча ужимаются уже на
   планшете — на 768 их десктопные размеры растили карточку вдвое. */
@media (max-width: 992px) {
    .pp-tournament {
        min-width: 0;
        gap: 10px;
        padding: 10px 12px;
    }

    .pp-tournament-info {
        min-width: 0;
    }

    .pp-tournament-name {
        /* ступень лестницы, было 1.25 */
        font-size: var(--fs-sm);
        line-height: 1.3;
        white-space: normal;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .pp-tournament-date {
        font-size: var(--fs-xs);
    }

    .pp-tournament-photo {
        width: 38px;
        height: 38px;
        flex: 0 0 38px;
    }

    /* Карточка матча была 199 пикселей при полях 16×20 — вдвое выше такой
       же записи в кабинете. Размеры по общей шкале, а дата и турнир
       встают в одну строку: каждый занимал свою и растил карточку */
    .pp-match {
        padding: 10px 12px;
        gap: 4px 8px;
        /* Три колонки: счёт слева, полоса результата посередине, H2H
           справа. Раньше кнопка занимала отдельную строку и растила
           карточку на два десятка пикселей */
        grid-template-columns: auto 1fr auto;
    }

    .pp-match.pp-match-clickable {
        grid-template-columns: auto 1fr auto;
    }

    .pp-match-date {
        grid-column: 1;
        font-size: var(--fs-xs);
    }

    .pp-match-tournament {
        grid-column: 2 / -1;
        justify-self: end;
        /* Столбик прижат вправо вместе с колонкой: строка напарника встаёт
           под названием тем же краем, а не уезжает влево */
        align-items: flex-end;
        text-align: right;
        font-size: var(--fs-xs);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
    }

    .pp-match-opponent {
        grid-column: 1 / -1;
    }

    .pp-match-score {
        grid-column: 1;
    }

    .pp-match-result {
        grid-column: 2;
    }

    .pp-match-h2h {
        grid-column: 3;
        justify-self: end;
        align-self: center;
    }

    .pp-match-opponent-name {
        font-size: var(--fs-sm);
    }

    .pp-match-score {
        font-size: var(--fs-sm);
    }

    .pp-section-title {
        font-size: var(--fs-lg);
    }
}

/* ВОЗДУХ НАД ЗАГОЛОВКОМ СЕКЦИИ. Замер 09.10: margin-top у всех четырёх
   заголовков НОЛЬ — «История рейтинга» упиралась в полосу побед над ней.
   Ступень 40 шкалы отступов, как между секциями на остальных страницах. */
/* ВОЗДУХ НАД ПЕРВЫМ ЗАГОЛОВКОМ — ОДИН, А НЕ ДВА. Замер 09.10 на 390 и 768:
   от низа полосы «Назад» до заголовка 80 = padding-top контейнера 40 ПЛЮС
   межсекционный margin заголовка 40. Два определения одного понятия на одном
   месте. Межсекционный воздух нужен МЕЖДУ секциями; у первой сверху уже есть
   поле контейнера. Остаётся 40 на узких видах и 32 на десктопе — ступень. */
.pp-container > .pp-section-title:first-child {
    margin-top: 0;
}

/* ПРАВИЛО «.pp-header + .pp-section-title» СНЯТО 09.10 КАК МЁРТВОЕ.
   Названо мёртвым ПОСЛЕ ПРОВЕРКИ, а не по виду: шапка лежит в .pp-hero-content
   (pages/player.html:287), заголовки — в .pp-container, братьями они не были
   ни разу. Замер подтвердил: margin-top 40 у всех четырёх заголовков на
   десктопе и на телефоне, то есть сброс не сработал ни на одном.
   Воздух над первым даёт padding-top контейнера: 32 + 40. */

/* ============================================
   ШАПКА ИГРОКА: ЗНАЧЕНИЯ В ОДНУ КОЛОНКУ ПОД ФЛАГОМ
   ============================================ */

/* «MASTERS 660 · #5» и «NTRP 4 одиночка» шли каждая своей строкой, и
   значения начинались на разной вертикали. Собираем в сетку из двух
   колонок: слева метки, справа значения, цифры встают друг под другом.

   09.10, СЛОВО КОСТИ И ТО ЖЕ РЕШЕНИЕ У ATP, WTA И ITF: колонка стоит ПОД
   ФЛАГОМ, одной левой кромкой с именем и страной. Было justify-content:
   center и метки по правому краю — замер дал 253 px пустоты между флагом и
   метками, и глаз прыгал через середину.

   ОДНО ОПРЕДЕЛЕНИЕ: раньше .pp-ratings объявлялся в файле ДВАЖДЫ — на :124
   колонкой флекса и здесь сеткой. Выигрывало второе, первое молчало. */

.pp-ratings {
    display: grid;
    grid-template-columns: auto auto;
    justify-content: start;
    align-items: baseline;
    gap: 4px 12px;
    margin-bottom: 12px;
}

/* На узких видах шапка центрируется целиком — значит и колонка едет в
   центр ЦЕЛИКОМ, а не растягивается на всю ширину: внутри неё метки и
   значения остаются на одной левой кромке. Замер 09.10 до правки: на 768
   флаг стоял на 319, а колонка начиналась на 124. */
@media (max-width: 992px) {
    .pp-ratings {
        justify-content: center;
    }
}

/* Строка растворяется в сетке, её метка и значение становятся ячейками */
.pp-rating-row {
    display: contents;
}

.pp-rating-label {
    justify-self: start;
    text-align: left;
}

.pp-rating-value {
    justify-self: start;
}

/* Ссылка «назад» стояла в 40 пикселях от края и висела сама по себе.
   Прижимаем к общему краю страницы — к той же вертикали, где начинаются
   заголовки разделов ниже.

   И делаем липкой под шапкой, как полоса фильтров на разделах: вернуться
   к рейтингу можно с любого места страницы, а не только с самого верха.
   Подложка непрозрачная — под ссылкой едет содержимое */
/* ПЛАНШЕТ И УЖЕ: ссылка «назад» липнет к шапке там, где страница
   длинная, а экран короткий, — это и планшет тоже. */
@media (max-width: 992px) {
    .kslt-back-wrap.pp-back-float {
        position: sticky;
        top: var(--header-h);
        z-index: 40;
        padding: 10px 16px;
        background: var(--bg-primary);
        border-bottom: var(--bw-hair) solid var(--border-subtle);
    }
}

/* ============================================
   КАРТОЧКА ДОСТИЖЕНИЯ НА ТЕЛЕФОНЕ
   ============================================ */

/* Была 78 пикселей при полях 16×18 и значке в 24 — вдвое крупнее записи
   матча рядом. Приводим к общей шкале: имя 0.85rem, подпись 0.72rem */

/* ПЛАНШЕТ И УЖЕ: карточка достижения по общей шкале. */
@media (max-width: 992px) {
    .pp-achievement {
        padding: 10px 12px;
        gap: 10px;
    }

    .pp-achievement-icon {
        font-size: var(--fs-lg);
    }

    .pp-achievement-name {
        font-size: var(--fs-sm);
    }

    .pp-achievement-desc {
        font-size: var(--fs-xs);
    }

    .pp-badges-expand {
        padding: 8px 12px;
        font-size: var(--fs-xs);
    }
}

/* ============================================
   ВОЗДУХ ВНИЗУ СТРАНИЦЫ
   ============================================ */

/* Между последним блоком и спонсорами набегало 108 пикселей: 48 от
   отступа секции и ещё 60 снизу у контейнера. На широком экране это
   дыхание, на телефоне — пустой экран */

/* ПЛАНШЕТ И УЖЕ: 108 пикселей воздуха внизу — дыхание на широком
   экране и пустой экран на всём, что уже. */
@media (max-width: 992px) {
    .pp-section {
        margin-bottom: 24px;
    }

    .pp-container {
        padding-bottom: 24px;
    }
}


                                               
                                         
                                                  

                                                                           
                                                                    
                                                                         
                                                           
.pp-match-h2h::after,
.kslt-back-wrap.pp-back-float .kslt-back::after,
.pp-badges-expand::after{
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    min-height: 44px;
    transform: translateY(-50%);
}

.kslt-back-wrap.pp-back-float .kslt-back,
.pp-badges-expand {
    position: relative;
}

/* ФОКУС С КЛАВИАТУРЫ: было НОЛЬ правил на 352 при 27 :hover — страницу
   нельзя было пройти клавишей, не теряя место. Кольцо то же, что у
   Button 17:82. */
.pp-match-h2h:focus-visible,
.pp-subsection-toggle:focus-visible,
.pp-badges-expand:focus-visible,
.pp-tournament:focus-visible,
.h2h-close:focus-visible,
.h2h-profile-btn:focus-visible,
.kslt-back-wrap.pp-back-float .kslt-back:focus-visible,
.pp-action-btn:focus-visible {
    outline: var(--bw-thick) solid var(--accent);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}


/* ===== ЖАЛОБА И БЛОКИРОВКА НА СТРАНИЦЕ ИГРОКА (Apple 1.2), 04.11 =====
 *
 * ПОЧЕМУ ЭТО ЕСТЬ: правило App Store 1.2 требует четырёх вещей от
 * приложения с пользовательским содержимым; у КСЛТ была одна —
 * опубликованные контакты. Сайт и приложение показывают одно и то же,
 * иначе человек, заблокировавший с телефона, не поймёт, почему на сайте
 * кнопка другая.
 *
 * Вид принят по стенду `maket/stend-zhaloba-blokirovka-sayt.html` 04.11.
 * Стенд после переноса берёт правила ОТСЮДА, своей копии не держит.
 *
 * Числа — ступени: отступы 8·12·16·24, кегли `--fs-*`, цель нажатия 44.
 */


/* --- тихая строка под обложкой ---
   ПОЧЕМУ НЕ В `pp-actions`: обложка несёт призыв играть. Жалоба рядом с ним
   получила бы ту же громкость, а она обязана БЫТЬ (Apple 1.2), не кричать.
   ПОЧЕМУ 44 ПРИ КЕГЛЕ 12: цель нажатия от высоты строки не зависит —
   `min-height` держит 44 отступами, как `.pp-action-btn` держит 12/24. */
.pp-safety {
  display: flex; justify-content: flex-end; gap: 8px;
  max-width: 900px; margin: 0 auto;
  padding: 16px var(--pp-gutter, 24px) 0;
}
.pp-safety-btn {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 12px 16px;
  background: none; border: var(--bw-hair) solid var(--border-subtle);
  border-radius: var(--radius-full);
  color: var(--text-muted);
  font-size: var(--fs-xs); font-weight: 500;
  cursor: pointer;
}
.pp-safety-btn:hover { color: var(--text-primary); border-color: var(--border-light); }
.pp-safety-btn:focus-visible { outline: var(--bw-thick) solid var(--accent); outline-offset: 2px; }
.pp-safety-btn--block:hover { color: var(--danger); border-color: var(--danger-border); }

/* --- причины жалобы: ГАЛОЧКА, А НЕ ПОДСВЕТКА (правило `Menu item 32:44`) --- */
.pp-rep-reasons { display: flex; flex-direction: column; gap: 8px; margin: 24px 0 16px; }
.pp-rep-reason {
  display: flex; align-items: center; gap: 12px;
  min-height: 44px; padding: 8px 16px;
  border: var(--bw-hair) solid var(--border-subtle);
  border-radius: var(--radius-md);
  color: var(--text-primary); font-size: var(--fs-base); cursor: pointer;
}
.pp-rep-reason input { position: absolute; opacity: 0; width: 0; height: 0; }
.pp-rep-tick {
  flex: 0 0 auto; width: 20px; height: 20px;
  border-radius: var(--radius-full);
  border: var(--bw-hair) solid var(--border-subtle);
  display: flex; align-items: center; justify-content: center;
  font-size: var(--fs-xs); color: var(--neutral-black);
}
.pp-rep-reason:has(input:checked) { border-color: var(--accent); }
.pp-rep-reason:has(input:checked) .pp-rep-tick { background: var(--accent); border-color: var(--accent); }
.pp-rep-reason:has(input:focus-visible) { outline: var(--bw-thick) solid var(--accent); outline-offset: 2px; }
.pp-rep-note-label { display: block; margin-bottom: 8px;
  font-size: var(--fs-xs); color: var(--text-muted); }
.pp-rep-note {
  width: 100%; box-sizing: border-box; min-height: 96px; padding: 12px;
  background: var(--neutral-900, #121212);
  border: var(--bw-hair) solid var(--border-subtle);
  border-radius: var(--radius-md); color: var(--text-primary);
  font-size: var(--fs-base); resize: vertical;
}
.pp-rep-note:focus-visible { outline: var(--bw-thick) solid var(--accent); outline-offset: 2px; }
.pp-rep-send {
  width: 100%; min-height: 44px; margin-top: 24px; padding: 12px 24px;
  background: var(--accent); color: var(--neutral-black); border: none;
  border-radius: var(--radius-full);
  font-size: var(--fs-sm); font-weight: 600; cursor: pointer;
}
.pp-rep-send:disabled { opacity: .45; cursor: not-allowed; }
.pp-rep-srok { margin: 12px 0 0; text-align: center;
  font-size: var(--fs-xs); color: var(--text-muted); }

/* --- окно блокировки: ГОВОРИТ ЧТО ИЗМЕНИТСЯ, А НЕ «ВЫ УВЕРЕНЫ»
       (`Gate modal 51:60`, взято и повёрнуто) --- */
.pp-blk-what { margin: 24px 0 16px; padding: 0; list-style: none; }
.pp-blk-what li {
  display: flex; gap: 12px; padding: 8px 0;
  font-size: var(--fs-base); line-height: 1.5; color: var(--text-primary);
}
.pp-blk-what li::before { content: '—'; color: var(--text-muted); flex: 0 0 auto; }
.pp-blk-keep {
  padding: 16px; margin-bottom: 24px;
  background: var(--neutral-900, #121212);
  border: var(--bw-hair) solid var(--border-subtle);
  border-radius: var(--radius-md);
}
.pp-blk-keep strong { display: block; margin-bottom: 8px;
  font-size: var(--fs-sm); color: var(--text-primary); }
.pp-blk-keep span { font-size: var(--fs-xs); line-height: 1.5; color: var(--text-muted); }
.pp-blk-do {
  width: 100%; min-height: 44px; padding: 12px 24px;
  background: var(--danger); color: var(--danger-on); border: none;
  border-radius: var(--radius-full);
  font-size: var(--fs-sm); font-weight: 600; cursor: pointer;
}
.pp-blk-cancel {
  width: 100%; min-height: 44px; margin-top: 8px; padding: 12px;
  background: none; border: none; color: var(--text-muted);
  font-size: var(--fs-xs); cursor: pointer;
}
/* на телефоне строка распускается во всю ширину: две кнопки по 44
   в 390 минус 48 отступов сходятся, но жмутся — отдаём им всю полосу */
@media (max-width: 640px) {
  .pp-safety { justify-content: stretch; padding-top: 12px; }
  .pp-safety-btn { flex: 1 1 0; justify-content: center; }
}