/*
 * Chips, статус-бейджи и индикатор онлайна (ТЗ §73–75).
 * Chip — фильтр/категория, всегда pill. Badge — статус контента.
 */

.chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

/* На мобильном ряд чипов скроллится, а не переносится в пять строк */
.chips--scroll {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    margin: 0 calc(var(--container-pad) * -1);
    padding: 0 var(--container-pad);
}

.chips--scroll::-webkit-scrollbar {
    display: none;
}

.chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    height: 36px;
    padding: 0 16px;
    border: 1px solid var(--border-card);
    border-radius: var(--radius-pill);
    background: var(--bg-card);
    color: var(--text-secondary);
    font-size: var(--fs-small);
    font-weight: var(--fw-semibold);
    white-space: nowrap;
    cursor: pointer;
    transition: background var(--t-base) var(--ease),
                border-color var(--t-base) var(--ease),
                color var(--t-base) var(--ease);
}

.chip:hover {
    border-color: var(--primary-soft-2);
    background: var(--bg-soft);
    color: var(--primary);
}

.chip--active,
.chip[aria-pressed="true"],
.chip[aria-selected="true"] {
    border-color: transparent;
    background: var(--primary-soft);
    color: var(--primary-2);
}

.chip--sm {
    height: 28px;
    padding: 0 12px;
    font-size: var(--fs-micro);
}

.chip__count {
    color: var(--text-muted);
    font-weight: var(--fw-medium);
}

.chip--active .chip__count {
    color: var(--primary);
}

/* Подпись, а не кнопка: жанр на карточке игры */
.chip--static {
    cursor: default;
    pointer-events: none;
}

/* Убрать выбранный фильтр */
.chip__remove {
    display: inline-flex;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    cursor: pointer;
    opacity: .7;
}

.chip__remove:hover {
    opacity: 1;
}

/* ---------- Статус-бейджи ---------- */

.badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 26px;
    padding: 0 10px;
    border-radius: var(--radius-xs);
    background: var(--neutral-soft);
    color: var(--neutral-text);
    font-size: var(--fs-micro);
    font-weight: var(--fw-bold);
    white-space: nowrap;
}

.badge--success {
    background: var(--success-soft);
    color: var(--success-text);
}

.badge--warning {
    background: var(--warning-soft);
    color: var(--warning-text);
}

.badge--danger {
    background: var(--danger-soft);
    color: var(--danger-text);
}

.badge--info {
    background: var(--info-soft);
    color: var(--info-text);
}

.badge--violet {
    background: var(--primary-soft);
    color: var(--primary-2);
}

.badge--pill {
    border-radius: var(--radius-pill);
    padding: 0 12px;
}

.badge__dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

/* ---------- Индикатор онлайна (ТЗ §75) ---------- */

.online {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--text-secondary);
    font-size: var(--fs-small);
    font-weight: var(--fw-semibold);
}

.online__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--success);
    box-shadow: 0 0 0 3px var(--success-soft);
}

.online--muted .online__dot {
    background: var(--text-muted);
    box-shadow: 0 0 0 3px var(--neutral-soft);
}

/* Метрика в карточке: иконка + число */

.metric {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--text-secondary);
    font-size: var(--fs-small);
    font-weight: var(--fw-semibold);
}

.metric__icon {
    color: var(--text-muted);
}

.metric--up {
    color: var(--success-text);
}

.metric--down {
    color: var(--danger-text);
}