/* ═══════════════════════════════════════
   Коллекция: карточки видов с состоянием каждого слота
   ═══════════════════════════════════════ */

/*
 * Своих цветов и отступов файл не заводит — только переменные из global.css,
 * поэтому переключатель темы работает без правок здесь. Тиры редкости берут
 * общие с магазином переменные `--rarity-*`: один и тот же вид обязан
 * выглядеть одинаково на обоих экранах.
 */
.collection {
    max-width: 1100px;
    margin: 0 auto;
    padding: var(--space-xl) var(--space-lg) var(--space-3xl);
}

.collection__header {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-lg);
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: var(--space-2xl);
}

.collection__title {
    font-size: var(--font-xl);
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: var(--space-sm);
}

.collection__hint {
    max-width: 560px;
    line-height: 1.6;
    color: var(--text-secondary);
}

.collection__filters {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-md);
    align-items: center;
}

.collection__filter {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    font-size: var(--font-sm);
    color: var(--text-muted);
}

.collection__filter--checkbox {
    flex-direction: row;
    align-items: center;
    gap: var(--space-sm);
}

.collection__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--space-lg);
}

.species-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    padding: var(--space-lg);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--bg-surface);
}

.species-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm);
}

.species-card__name {
    font-size: var(--font-lg);
    font-weight: 600;
    color: var(--text-primary);
}

/* Метка редкости — цветом рамки и текста, а не заливкой: тёмная тема делает
   палитру светлее, и белый текст на ней перестал бы читаться. */
.species-card__rarity {
    padding: 2px var(--space-sm);
    border: 1px solid currentColor;
    border-radius: var(--radius-lg);
    font-size: var(--font-xs);
    white-space: nowrap;
    color: var(--rarity-common);
}

.species-card__rarity[data-rarity-value="uncommon"] { color: var(--rarity-uncommon); }
.species-card__rarity[data-rarity-value="rare"] { color: var(--rarity-rare); }
.species-card__rarity[data-rarity-value="legendary"] { color: var(--rarity-legendary); }

.species-card__meta {
    font-size: var(--font-sm);
    color: var(--text-muted);
}

.species-card__slots {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    list-style: none;
}

.species-slot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm);
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--radius-md);
    font-size: var(--font-sm);
    color: var(--text-secondary);
    background: var(--bg-panel);
}

/* Три состояния запаса вместо прежних двух «открыто / закрыто». */

/* Есть свободный экземпляр: часть можно поставить в новую химеру. */
.species-slot--free {
    color: var(--success);
    background: var(--bg-hover);
}

/* Куплена, но все экземпляры стоят в химерах: ни надеть, ни разобрать. */
.species-slot--busy {
    color: var(--text-secondary);
    background: var(--bg-hover);
}

/* Не куплена вовсе — по умолчанию, отличается только отсутствием подсветки. */
.species-slot--missing {
    color: var(--text-secondary);
}

/* Запас и держатели занимают всю ширину строки: слот стал многострочным. */
.species-slot {
    flex-wrap: wrap;
}

.species-slot__stock {
    font-variant-numeric: tabular-nums;
}

.species-slot__holders {
    flex-basis: 100%;
    margin: 0;
    font-size: var(--font-xs);
    color: var(--text-secondary);
}

.species-slot__salvage {
    border: none;
    background: none;
    color: var(--accent);
    cursor: pointer;
    font: inherit;
    text-decoration: underline;
}

.species-slot__salvage:disabled {
    color: var(--text-secondary);
    cursor: not-allowed;
    text-decoration: none;
}

/* Слот, в котором вид не даёт генов, покупать бессмысленно — он приглушён. */
.species-slot--unavailable {
    opacity: 0.5;
}

.species-slot__price {
    border: none;
    background: none;
    color: var(--accent);
    cursor: pointer;
    font: inherit;
    text-decoration: underline;
}

.species-slot__price:hover {
    color: var(--accent-hover);
}

/* ═══════════════════════════════════════
   Адаптивность
   ═══════════════════════════════════════ */
@media (max-width: 600px) {
    .collection__grid {
        grid-template-columns: 1fr;
    }

    .collection__filters {
        width: 100%;
    }
}