/*
 * Badge, Chip, Tag, Dot (ТЗ ч.3, разд. 116, 119; ч.4, разд. 266).
 * Бейджи маленькие: официальные и community-данные различаются меткой,
 * а не громадным баннером. Статусные цвета — из tokens.css.
 */

.badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    height: 22px;
    padding-inline: var(--space-2);
    border: var(--border-w) solid transparent;
    border-radius: var(--radius-sm);
    background: var(--bg-soft);
    color: var(--text-secondary);
    font-size: var(--fs-label);
    font-weight: var(--fw-semibold);
    letter-spacing: 0.01em;
    white-space: nowrap;
}

.badge--lg {
    height: 26px;
    padding-inline: var(--space-3);
    font-size: var(--fs-caption);
}

.badge--primary { background: var(--primary-light);      color: var(--primary); }
.badge--success { background: var(--status-online-soft);  color: var(--status-online); }
.badge--warning { background: var(--status-warning-soft); color: var(--accent-orange); }
.badge--danger  { background: var(--status-offline-soft); color: var(--status-offline); }
.badge--info    { background: var(--status-info-soft);    color: var(--accent-blue); }
.badge--purple  { background: var(--accent-purple-soft);  color: var(--accent-purple); }
.badge--pink    { background: var(--accent-pink-soft);    color: var(--accent-pink); }

/* Обводка вместо заливки — для меток поверх изображений и в плотных таблицах */
.badge--outline {
    background: var(--bg-card);
    border-color: var(--border);
    color: var(--text-secondary);
}

.badge--solid {
    background: var(--primary);
    color: var(--text-on-primary);
}

/* «Продвижение» — спонсорские размещения помечаются всегда (ТЗ ч.4, разд. 249) */
.badge--sponsored {
    background: var(--accent-orange-soft);
    color: var(--accent-orange);
}

.badge__dot {
    width: 6px;
    height: 6px;
    flex: none;
    border-radius: var(--radius-pill);
    background: currentColor;
}

/* Точка статуса отдельно от бейджа: строки серверов, селектор игры */
.dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    flex: none;
    border-radius: var(--radius-pill);
    background: var(--status-neutral);
}

.dot--online  { background: var(--status-online); }
.dot--warning { background: var(--status-warning); }
.dot--offline { background: var(--status-offline); }
.dot--info    { background: var(--status-info); }

/* Пульсация только у живого статуса и только один раз в цикле — без мигания */
.dot--pulse {
    box-shadow: 0 0 0 0 rgba(47, 158, 98, .5);
    animation: gu-pulse 2.4s var(--ease-out) infinite;
}

@keyframes gu-pulse {
    70%  { box-shadow: 0 0 0 6px rgba(47, 158, 98, 0); }
    100% { box-shadow: 0 0 0 0 rgba(47, 158, 98, 0); }
}

/* --- Chip: фильтры, быстрые выборы (ТЗ ч.3, разд. 91) ---------------------- */

.chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    height: var(--control-h-sm);
    padding-inline: var(--space-4);
    background: var(--bg-soft);
    border: var(--border-w) solid transparent;
    border-radius: var(--radius-control);
    color: var(--text-primary);
    font-family: var(--font-sans);
    font-size: var(--fs-small);
    font-weight: var(--fw-semibold);
    white-space: nowrap;
    cursor: pointer;
    transition: var(--transition-color);
}

.chip:hover {
    background: var(--border);
    color: var(--text-primary);
}

.chip.is-selected,
.chip[aria-pressed='true'] {
    background: var(--primary-light);
    border-color: var(--primary-border);
    color: var(--primary);
}

.chip:disabled,
.chip[aria-disabled='true'] {
    color: var(--text-muted);
    cursor: not-allowed;
    pointer-events: none;
}

.chip--pill    { border-radius: var(--radius-pill); }
.chip--outline { background: var(--bg-card); border-color: var(--border); }

.chip--outline:hover {
    background: var(--bg-warm);
    border-color: var(--border-strong);
}

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

/* Снятие фильтра */
.chip__remove {
    display: grid;
    place-items: center;
    width: 18px;
    height: 18px;
    margin-right: calc(var(--space-2) * -1);
    padding: 0;
    border: 0;
    border-radius: var(--radius-pill);
    background: transparent;
    color: currentColor;
    cursor: pointer;
    opacity: .7;
}

.chip__remove:hover {
    background: rgba(23, 26, 24, .08);
    opacity: 1;
}

/* --- Tag: нейтральная метка без действия ----------------------------------- */

.tag {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    height: 24px;
    padding-inline: var(--space-3);
    background: var(--bg-card);
    border: var(--border-w) solid var(--border);
    border-radius: var(--radius-pill);
    color: var(--text-secondary);
    font-size: var(--fs-caption);
    font-weight: var(--fw-medium);
    white-space: nowrap;
}

/* --- «Скоро»: раздел ещё не открыт ---------------------------------------- */
/* Общая пометка для шапки, mega menu, подвала и drawer. Кнопок в никуда нет. */

.nav-soon {
    display: inline-flex;
    align-items: center;
    height: 18px;
    padding-inline: var(--space-2);
    border-radius: var(--radius-xs);
    background: var(--bg-soft);
    color: var(--text-muted);
    font-family: var(--font-sans);
    font-size: var(--fs-label);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--ls-normal);
    text-transform: none;
    white-space: nowrap;
}