/* ==========================================================================
   COLLECTION — коллекция, Кротодекс и стойка молотов (§119-122, §326-329,
   этап 27)

   Экран состоит из четырёх частей.

   **Шапка** — трофейный зал картинкой, поверх него два процента рядом:
   игровая коллекция и косметическая (§333). Полосы разной длины стоят
   бок о бок нарочно — так видно, что это два разных счёта, а не один
   разбитый надвое.

   **Витрина** — сетка карточек-полок. Найденное показано картинкой,
   ненайденное — тем же изображением, превращённым в силуэт фильтром
   (§121). Отдельного рисунка-заглушки нет: силуэт обязан совпадать по
   форме с настоящим предметом, иначе он ничего не обещает.

   **Стойка молотов** (§329) — выбранный экспонат крупно, остальные
   строкой под ним. Это единственная витрина со своим устройством:
   вопрос «чем я бью сейчас» важнее, чем ровная сетка.

   **Полка профиля** (§335) — слоты для трёх-пяти трофеев. Пустые слоты
   рисуются всегда: игрок должен видеть, сколько мест есть.

   Цвета, отступы, радиусы и тени — из ui-tokens.css и common.css.
   ========================================================================== */

/* ----- Шапка ------------------------------------------------------------- */

/*
 * Картинка задаётся через `::before`, как в Хронике и лаборатории.
 *
 * Геометрия шапки берётся у `.trumpamole__skins-hero`, а её собственный
 * псевдоэлемент рисует фон раздела скинов и непрозрачен. Назначать фон
 * самому блоку бесполезно — поверх него всё равно ляжет бутик с
 * костюмами.
 */
.tam-col__hero {
    position: relative;
    overflow: hidden;
}

.tam-col__hero::before {
    background-image: url('../collection/collection_bg.webp?26090901');
    background-position: center 52%;
    filter: none;
    transform: none;
    opacity: 1;
}

.tam-col__hero::after {
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--ui-bg-dark) 80%, transparent) 0%,
        color-mix(in srgb, var(--ui-bg-dark) 50%, transparent) 42%,
        color-mix(in srgb, var(--ui-bg-dark) 94%, transparent) 100%);
}

/* ----- Два трека прогресса ------------------------------------------------ */

/*
 * Пара треков занимает ВСЮ ширину полосы.
 *
 * `flex: 1 1 0` у самих треков работал только на бумаге: блок лежит
 * внутри `.trumpamole__title-block`, а тому §2 рамы ставит
 * `align-items: center` — колонка сжимала ряд по содержимому, и «Игровая»
 * с «Косметической» сбивались в комок посреди экрана шириной в 146px из
 * 390. Именно это владелец назвал «едут эти блоки». Ряду нужна явная
 * ширина и `align-self: stretch`, иначе центрирование колонки его
 * пересилит.
 */
.tam-col__tracks {
    display: flex;
    gap: var(--space-2, 10px);
    width: 100%;
    align-self: stretch;
    margin: var(--space-2, 10px) 0 var(--space-1, 6px);
}

/*
 * Материал — плитка счётчика §10 рамы, та же, что «ТРОФЕИ» и «ПОБЕДЫ»
 * на кадре профиля. Здесь стояла её копия числами (#1d1351 → #160e3d),
 * то есть на полтона мимо счётчиков остальной игры; в файле раздела
 * остаётся только геометрия ряда.
 */
.tam-col__track {
    flex: 1 1 0;
    min-width: 0;
    padding: 10px 12px 11px;
}

/* Игровая коллекция — главная: её кант золотой, косметическая тише. */
.tam-col__track.is-game {
    border-color: var(--ui-gold-dark);
    box-shadow: var(--ui-inner-well),
                inset 0 0 0 1px color-mix(in srgb, var(--ui-gold) 28%, transparent);
}

/*
 * Подпись стоит над числом, а не рядом с ним.
 *
 * В одну строку «Косметическая» и «9%» не помещались на 360px: слово
 * обрезалось до «Космет…», и трек переставал читаться. Столбиком оба
 * умещаются целиком на любом экране.
 */
.tam-col__track-top {
    display: flex;
    flex-direction: column;
    margin-bottom: 6px;
}

.tam-col__track-label {
    color: var(--ui-ivory-dark);
    font-family: var(--font-condensed);
    font-size: var(--ui-size-small);
    line-height: 1.2;
}

.tam-col__track-value {
    color: var(--ui-gold);
    font-family: var(--font-heading);
    font-size: var(--ui-size-value);
}

/* Цвет примечания приходит из выемок §8 рамы — счёт «13 / 45» вырезан
   в плитке, как любое значение. */
.tam-col__track-note {
    margin-top: 5px;
    font-family: var(--font-condensed);
    font-size: var(--ui-size-small);
}

/* ----- Ссылки в соседние разделы ------------------------------------------ */

/*
 * Материал и раскладка ряда — §9.1 рамы («ХРАНИЛИЩЕ · ГАРДЕРОБ ·
 * ЛАБОРАТОРИЯ · ХРОНИКА»). Здесь оставался только отступ сверху:
 * остальное рама перебивала целиком, и правила были мёртвыми.
 */
.tam-col__links,
.tam-vault__links {
    margin-top: var(--space-2, 10px);
}

/* ----- Вкладки ------------------------------------------------------------ */

/* Перенос строки задаёт §11 рамы: ряд вкладок прокручивается, а не
   переносится, и `flex-wrap: wrap` здесь не срабатывал ни разу. */
.tam-col__tabs,
.tam-vault__tabs {
    display: flex;
    gap: 6px;
}

/* Цвет счётчика — §22 рамы: на выбранной вкладке кремовый тише подписи,
   на невыбранной приглушённый. */
.tam-col__tab-count,
.tam-vault__tab-count {
    margin-left: 4px;
    /* Счётчик стоит ВНУТРИ подписи вкладки и удлиняет её: ступенью ниже
       самой подписи он не спорит с ней за ширину ряда на 320px. */
    font-size: var(--ui-size-micro);
    font-style: normal;
}

/* ----- Витрина ------------------------------------------------------------ */

.tam-col__shelf {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-2, 10px);
}

/* Материал полки — карточка §6 рамы; здесь только раскладка содержимого. */
.tam-col__card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 10px 6px 9px;
    cursor: pointer;
}

.tam-col__card:active { transform: translateY(1px); }

.tam-col__card-art {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 62px;
    color: var(--ui-ivory-deep);
}

/*
 * Ширина экспоната ограничена отдельно от карточки.
 *
 * Среди трофеев есть широкие картинки регионов: растянутые во всю
 * карточку, они превращались в чёрную плашку на месте силуэта. С
 * ограничением по ширине предмет стоит на полке, а не закрывает её.
 *
 * Тень — ступень `-card` (§108 ТЗ: character presentation). Крупный крот
 * стойки (`.tam-col__rack-hero` ниже) её имел, а те же кроты в сетке
 * находок — нет: одна и та же фигура в одном разделе стояла на доске и
 * лежала на ней. Именно `-card`, а не `-md`: под находкой светлая доска
 * карточки, и плотная тень героя выглядела бы на ней грязью.
 */
.tam-col__card-art img {
    max-width: 84px;
    max-height: 100%;
    object-fit: contain;
    filter: drop-shadow(var(--ui-art-shadow-card));
}

/* Кремовый капслок с обводкой ярлык получает из §22.3 рамы. */
.tam-col__card-name {
    overflow: hidden;
    width: 100%;
    font-size: var(--ui-size-small);
    line-height: 1.15;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Сколько раз предмет найден. Это значение, а не зов нажать, поэтому
   тёмная выемка с золотой цифрой, а не красный круг §23.1. */
.tam-col__card-count {
    position: absolute;
    top: 6px;
    right: 6px;
    min-width: 20px;
    padding: 1px 5px;
    border-radius: var(--ui-radius-sm);
    background:
        var(--ui-dirt),
        linear-gradient(180deg, var(--ui-row-b) 0%, var(--ui-bg-deep) 100%);
    box-shadow: var(--ui-inner-well);
    color: var(--ui-gold);
    font-family: var(--font-condensed);
    font-size: var(--ui-size-small);
    text-align: center;
}

.tam-col__card-lock,
.tam-col__card-pin {
    position: absolute;
    top: 6px;
    left: 6px;
    display: flex;
    color: var(--ui-ivory-deep);
}

.tam-col__card-pin { color: var(--ui-gold); }

/*
 * Ненайденное — силуэт §121.
 *
 * Картинка та же, что у найденного, но погашена до тёмной формы: игрок
 * видит очертания и понимает, что предмет существует, не получая ни
 * названия, ни подробностей.
 */
.tam-col__card.is-locked .tam-col__card-art img {
    /*
     * Не полная чернота: у предметов с прозрачным фоном она даёт ровный
     * силуэт, а у широких картинок регионов — глухую плашку. Сильное
     * затемнение с обесцвечиванием оставляет очертания видимыми в обоих
     * случаях.
     */
    filter: brightness(0.22) saturate(0.2);
    opacity: 0.8;
}

.tam-col__card.is-locked .tam-col__card-name { color: var(--ui-locked-text); }

/*
 * Выбранный в витрину профиля трофей помечен золотой рамкой.
 *
 * Кольцо редкости у карточек коллекции живёт в §6 рамы вместе с
 * хранилищем, музеем и снаряжением: здесь стояли четыре собственных
 * `border-color`, и рама перебивала их все — редкость показывалась
 * рамой, а не файлом раздела.
 */
.tam-col__card.is-chosen {
    border-color: var(--ui-gold);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--ui-gold) 45%, transparent) inset,
                0 5px 0 var(--ui-panel-edge), var(--ui-shadow-soft);
}

/* ----- Стойка молотов §329 ------------------------------------------------ */

/*
 * Сцена стойки — такая же доска, как карточки §6 рамы.
 *
 * Держала свой градиент по прозрачной черноте и золотую линию в 1px:
 * самая крупная поверхность вкладки висела на экране без кромки и без
 * направленной грани — ровно тот плоский card, что запрещает §62.
 */
.tam-col__rack-stage {
    display: flex;
    gap: var(--space-3, 14px);
    padding: var(--space-3, 14px);
}

.tam-col__rack-hero {
    width: 96px;
    height: 116px;
    flex: 0 0 auto;
    object-fit: contain;
    filter: drop-shadow(var(--ui-art-shadow-md));
}

.tam-col__rack-info { min-width: 0; flex: 1 1 auto; }

.tam-col__rack-title {
    color: var(--ui-gold);
    font-family: var(--font-heading);
    font-size: var(--ui-size-value);
}

.tam-col__rack-desc {
    margin-top: 5px;
    color: var(--ui-ivory-dark);
    font-family: var(--font-condensed);
    font-size: var(--ui-size-body);
    line-height: 1.3;
}

.tam-col__rack-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: var(--space-2, 10px);
}

/* Прибавки молота — тёмный чип §10 рамы: значение, которое не зовёт
   нажать. Заливал себя чернотой в 30 % и в ряду читался пятном. */
.tam-col__stat {
    display: flex;
    flex-direction: column;
    padding: 5px 9px;
}

/* Подпись чипа набрана §10 рамы; кегль значения остаётся здесь —
   в ряду из трёх прибавок на 320px общие 16px не помещаются. */
.tam-col__stat-value {
    color: var(--ui-text-main);
    font-family: var(--font-condensed);
    font-size: var(--ui-size-body);
}

/* Цвет примечания приходит из выемок §8 рамы. */
.tam-col__rack-note {
    margin-top: var(--space-2, 10px);
    font-family: var(--font-condensed);
    font-size: var(--ui-size-body);
}

.tam-col__rack-row {
    display: flex;
    gap: 8px;
    margin-top: var(--space-2, 10px);
    padding-bottom: 4px;
    overflow-x: auto;
    scrollbar-width: none;
}

.tam-col__rack-row::-webkit-scrollbar { display: none; }

/* Плитка молота в ряду — карточка §6 рамы, как плитка снаряжения. */
.tam-col__rack-item {
    position: relative;
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    width: 78px;
    padding: 8px 4px;
    cursor: pointer;
}

/* Молот в руках помечен золотым кантом — единственный в ряду. */
.tam-col__rack-item.is-active {
    border-color: var(--ui-gold);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--ui-gold) 42%, transparent) inset,
                0 5px 0 var(--ui-panel-edge), var(--ui-shadow-soft);
}

.tam-col__rack-art { height: 44px; }

.tam-col__rack-art img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    filter: drop-shadow(var(--ui-art-shadow-card));
}

.tam-col__rack-item.is-locked .tam-col__rack-art img {
    filter: brightness(0.22) saturate(0.2);
    opacity: 0.8;
}

.tam-col__rack-name {
    overflow: hidden;
    width: 100%;
    color: var(--ui-ivory-dark);
    font-family: var(--font-condensed);
    font-size: var(--ui-size-small);
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tam-col__rack-lock {
    position: absolute;
    top: 5px;
    right: 5px;
    color: var(--ui-ivory-deep);
}

/* ----- Полка профиля §335 ------------------------------------------------- */

/* Материал полки — доска §6 рамы. Держала прозрачную черноту с золотой
   линией в 1px и стояла над сеткой карточек плоским прямоугольником. */
.tam-col__showcase {
    margin-bottom: var(--space-3, 14px);
    padding: var(--space-3, 14px);
}

.tam-col__showcase-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 6px;
}

.tam-col__showcase-title {
    color: var(--ui-gold);
    font-family: var(--font-heading);
    font-size: var(--ui-size-body);
}

.tam-col__showcase-hint {
    color: var(--ui-text-muted);
    font-family: var(--font-condensed);
    font-size: var(--ui-size-small);
}

.tam-col__slots {
    display: flex;
    gap: 8px;
    margin-top: var(--space-2, 10px);
}

/* Место на полке вырезано В доске — выемка §8 рамы. */
.tam-col__slot {
    display: flex;
    flex: 1 1 0;
    align-items: center;
    justify-content: center;
    height: 62px;
}

/*
 * Пустой слот показывается всегда: полка должна быть видна целиком.
 *
 * Пунктир говорит «сюда можно поставить» сам по себе, а `opacity`
 * просвечивала фоном раздела и делала слот похожим на сбой отрисовки
 * (§26 рамы — строка ожидания рисуется пунктиром, а не прозрачностью).
 */
.tam-col__slot.is-empty {
    border-style: dashed;
    border-color: color-mix(in srgb, var(--ui-gold) 34%, transparent);
    color: var(--ui-ivory-deep);
}

.tam-col__slot img {
    max-width: 84%;
    max-height: 84%;
    object-fit: contain;
    filter: drop-shadow(var(--ui-art-shadow-card));
}

/* ----- Кнопки и пустое состояние ------------------------------------------ */

/*
 * «НАДЕТЬ» и «ПОСТАВИТЬ НА ПОЛКУ» — единственное действие своей вкладки,
 * и материал у них был свой: две ступени золота с тёмно-синей подписью
 * без обводки. Корпус приходит из §9.1 рамы, надпись — из §21; здесь
 * остаётся геометрия.
 */
.tam-col__btn {
    margin-top: var(--space-2, 10px);
    min-height: var(--ui-tap-min);
    padding: 0 var(--space-3, 14px);
    font-family: var(--font-condensed);
    font-weight: 900;
    font-size: var(--ui-size-value);
    letter-spacing: 0.02em;
    text-transform: uppercase;
    cursor: pointer;
}

.tam-col__btn:active { transform: translateY(var(--ui-press)); }

/* ----- Досье крота в окне §121 -------------------------------------------- */

.tam-col__dossier {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: var(--space-2, 10px);
    text-align: left;
}

/* Материал строки — §7 рамы; здесь только раскладка в две строки. */
.tam-col__dossier-row {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px 10px;
}

.tam-col__dossier-label {
    color: var(--ui-gold);
    font-family: var(--font-condensed);
    font-size: var(--ui-size-small);
}

.tam-col__dossier-value {
    color: var(--ui-text-main);
    font-family: var(--font-main);
    font-size: var(--ui-size-body);
    line-height: 1.35;
}

/* ----- Узкий экран -------------------------------------------------------- */

@media (max-width: 380px) {
    .tam-col__shelf { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    /* На узком экране молот и его описание встают друг под другом:
       рядом описание сжималось до двух слов в строке. */
    .tam-col__rack-stage { flex-direction: column; align-items: center; }
    .tam-col__rack-info { text-align: center; }
    .tam-col__rack-stats { justify-content: center; }

    .tam-col__slot { height: 54px; }
}