/*
 * Доменные компоненты серии (ТЗ ч.3, разд. 99; ч.4, разд. 267).
 * Общий слой: метка игры, прогресс, строки миссий и коллекционных предметов,
 * карточки персонажа, ограбления и бизнеса.
 *
 * Содержимое у них разное, язык один: радиус, тень, граница, паддинг и иерархия
 * текста наследуются от базовых .card / .list-row / .progress (ТЗ ч.4, разд. 219–220).
 * Здесь описаны только доменные надстройки — базовые примитивы не переопределяются.
 */

/* --- GameBadge (ТЗ ч.3, разд. 9–10) ---------------------------------------
   Тематизация точечная: две локальные переменные задают цвет метки, всё
   остальное — общая система. Карточки, кнопки и таблицы не перекрашиваются. */

.game-badge,
.game-theme {
    --game-color: var(--text-secondary);
    --game-soft: var(--bg-soft);
}

.game-badge--gta6   { --game-color: var(--game-gta6);   --game-soft: var(--game-gta6-soft); }
.game-badge--gta5   { --game-color: var(--game-gta5);   --game-soft: var(--game-gta5-soft); }
.game-badge--online { --game-color: var(--game-online); --game-soft: var(--game-online-soft); }
.game-badge--gta4   { --game-color: var(--game-gta4);   --game-soft: var(--game-gta4-soft); }
.game-badge--sa     { --game-color: var(--game-sa);     --game-soft: var(--game-sa-soft); }
.game-badge--vc     { --game-color: var(--game-vc);     --game-soft: var(--game-vc-soft); }
.game-badge--gta3   { --game-color: var(--game-gta3);   --game-soft: var(--game-gta3-soft); }
.game-badge--fivem  { --game-color: var(--game-fivem);  --game-soft: var(--game-fivem-soft); }

/* Те же токены для hero и подсветки таба раздела */
.game-theme--gta6   { --game-color: var(--game-gta6);   --game-soft: var(--game-gta6-soft); }
.game-theme--gta5   { --game-color: var(--game-gta5);   --game-soft: var(--game-gta5-soft); }
.game-theme--online { --game-color: var(--game-online); --game-soft: var(--game-online-soft); }
.game-theme--gta4   { --game-color: var(--game-gta4);   --game-soft: var(--game-gta4-soft); }
.game-theme--sa     { --game-color: var(--game-sa);     --game-soft: var(--game-sa-soft); }
.game-theme--vc     { --game-color: var(--game-vc);     --game-soft: var(--game-vc-soft); }
.game-theme--gta3   { --game-color: var(--game-gta3);   --game-soft: var(--game-gta3-soft); }
.game-theme--fivem  { --game-color: var(--game-fivem);  --game-soft: var(--game-fivem-soft); }

.game-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    height: 24px;
    padding-inline: var(--space-1) var(--space-3);
    border-radius: var(--radius-sm);
    background: var(--game-soft);
    color: var(--game-color);
    font-size: var(--fs-label);
    font-weight: var(--fw-bold);
    letter-spacing: 0.01em;
    white-space: nowrap;
}

.game-badge__mark {
    display: grid;
    place-items: center;
    min-width: 20px;
    height: 18px;
    padding-inline: 4px;
    border-radius: var(--radius-xs);
    background: var(--game-color);
    color: var(--text-on-primary);
    font-size: 10px;
    line-height: 1;
}

.game-badge--lg {
    height: 30px;
    padding-inline: var(--space-2) var(--space-4);
    font-size: var(--fs-caption);
}

.game-badge--lg .game-badge__mark {
    min-width: 24px;
    height: 22px;
    font-size: var(--fs-label);
}

/* Поверх изображения — на белой подложке, чтобы читалось на любом кадре */
.game-badge--onmedia {
    background: var(--bg-card);
    box-shadow: var(--shadow-xs);
}

a.game-badge:hover {
    color: var(--game-color);
    filter: brightness(.96);
}

/* --- ProgressCard (100%-трекер, прогресс по играм) ------------------------- */

.progress-card__figure {
    display: flex;
    align-items: center;
    gap: var(--space-5);
    padding-bottom: var(--space-4);
    border-bottom: var(--border-w) solid var(--border-soft);
}

.progress-ring {
    position: relative;
    flex: none;
    width: 92px;
    height: 92px;
}

.progress-ring svg {
    display: block;
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.progress-ring__track {
    stroke: var(--bg-soft);
}

.progress-ring__value {
    stroke: var(--primary);
    stroke-linecap: round;
    transition: stroke-dashoffset var(--dur-slow) var(--ease-out);
}

.progress-ring__label {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font-size: var(--fs-h4);
    font-weight: var(--fw-extrabold);
    font-variant-numeric: tabular-nums;
    letter-spacing: var(--ls-snug);
}

.progress-card__summary {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    min-width: 0;
}

.progress-card__value {
    font-size: var(--fs-h3);
    font-weight: var(--fw-extrabold);
    font-variant-numeric: tabular-nums;
    letter-spacing: var(--ls-snug);
}

.progress-card__rows {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding-top: var(--space-4);
}

/* Строка прогресса с меткой игры вместо текстовой подписи */
.progress-row--game {
    grid-template-columns: minmax(104px, 140px) 1fr auto;
}

/* --- MissionRow (ТЗ ч.3, разд. 84) ---------------------------------------- */

.mission-row {
    gap: var(--space-3);
}

.mission-row__num {
    display: grid;
    flex: none;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: var(--radius-sm);
    background: var(--bg-soft);
    color: var(--text-secondary);
    font-size: var(--fs-small);
    font-weight: var(--fw-bold);
    font-variant-numeric: tabular-nums;
}

.mission-row.is-done .mission-row__num {
    background: var(--primary-light);
    color: var(--primary);
}

.mission-row__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1) var(--space-3);
    color: var(--text-secondary);
    font-size: var(--fs-caption);
}

.mission-row__meta-item {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
}

.mission-row__bar {
    width: 96px;
}

.mission-row__chevron {
    flex: none;
    color: var(--text-muted);
}

/* --- CharacterCard (ТЗ ч.3, разд. 78) ------------------------------------- */

.character-card .card__media {
    aspect-ratio: var(--ratio-portrait);
}

.character-card__role {
    color: var(--text-secondary);
    font-size: var(--fs-small);
}

.character-card__faction {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    margin-top: auto;
    padding-top: var(--space-2);
    color: var(--text-secondary);
    font-size: var(--fs-caption);
}

/* --- CollectibleRow ------------------------------------------------------- */

.collectible-row__icon {
    display: grid;
    flex: none;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: var(--radius-sm);
    background: var(--accent-blue-soft);
    color: var(--accent-blue);
}

.collectible-row__count {
    color: var(--text-secondary);
    font-size: var(--fs-small);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.collectible-row.is-found .list-row__title {
    color: var(--text-secondary);
}

.collectible-row.is-found .collectible-row__icon {
    background: var(--primary-light);
    color: var(--primary);
}

/* --- HeistCard (ТЗ ч.3, разд. 115) ---------------------------------------
   Крупная «кинематографичная» карточка: заголовок лежит на изображении,
   но текст остаётся читаемым за счёт мягкого затемнения снизу. */

.heist-card .card__media {
    aspect-ratio: var(--ratio-hero);
}

.heist-card__overlay {
    position: absolute;
    inset: auto 0 0 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-5);
    background: linear-gradient(to top, rgba(23, 26, 24, .78), rgba(23, 26, 24, 0));
    color: var(--text-on-dark);
}

.heist-card__title {
    font-size: var(--fs-h3);
    font-weight: var(--fw-bold);
    letter-spacing: var(--ls-snug);
    line-height: var(--lh-snug);
}

.heist-card__title a {
    color: inherit;
}

.heist-card__facts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-3);
}

.heist-card__fact {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.heist-card__fact-label {
    color: var(--text-secondary);
    font-size: var(--fs-caption);
}

.heist-card__fact-value {
    font-size: var(--fs-body-sm);
    font-weight: var(--fw-bold);
    font-variant-numeric: tabular-nums;
}

.heist-card__fact-value--empty {
    color: var(--text-muted);
    font-weight: var(--fw-medium);
}

/* --- BusinessCard (ТЗ ч.3, разд. 110) ------------------------------------
   Карточка бизнеса ориентирована на данные, а не на картинку. */

.business-card__head {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
}

.business-card__type {
    color: var(--text-secondary);
    font-size: var(--fs-caption);
}

.business-card .spec-list {
    margin-top: var(--space-2);
}

@media (max-width: 768px) {
    .progress-card__figure {
        gap: var(--space-4);
    }

    .progress-ring {
        width: 76px;
        height: 76px;
    }

    .mission-row__bar {
        display: none;
    }

    .heist-card__overlay {
        padding: var(--space-4);
    }
}