/* ==========================================================================
   STORE — магазин (§359-362, §535-543)

   Экран собран сверху вниз по порядку важности: вывеска и баланс, затем
   **одно** главное предложение золотой панелью, затем несколько
   подходящих карточек, и только внизу прилавок с разделами.

   Материал — по главному референсу `as/4.png`, кадр «МАГАЗИН»: золотая
   панель особого предложения с составом на утопленной подложке, сетка
   товаров карточками с ценовой полосой внизу, сегментированные вкладки
   прилавка. Прежняя версия рисовала витрину почти чёрными карточками с
   волосяной рамкой в 1px — на телефоне такая карточка выглядела строкой
   таблицы, а не товаром.

   Цвета берутся только из словаря `ui-tokens.css`.
   ========================================================================== */

/* ----- Шапка с лавкой ---------------------------------------------------- */

/* Материал ленты — §4 рамы: она перечислена там вместе с лентами профиля,
   рейтинга и заданий. Здесь остаётся только форма. */
.tam-store__top {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: 0 0 var(--ui-radius-xl) var(--ui-radius-xl);
}

.tam-store__top-art {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.tam-store__top-art img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 40%;
    display: block;
}

/*
 * Затемнение над картинкой лавки: здесь только сам слой, цвет — §4 рамы.
 *
 * Копия градиента лежала прямо тут и уже разошлась с общим: 0.44 против
 * 0.46 в середине, 0.86 против 0.88 ниже и другой оттенок синего. Рама
 * сама предупреждает, что этим двум слоям расходиться нельзя, — поэтому
 * `.tam-store__top-art::after` дописан в её список, а копия снята.
 */
.tam-store__top-art::after {
    content: '';
    position: absolute;
    inset: 0;
}

/* Вывеска и баланс стоят по центру полосы — как на всех кадрах референса. */
.tam-store__top-body {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--ui-space-3);
    padding: var(--ui-space-3) var(--ui-space-3) var(--ui-space-4);
}

.tam-store__top-body .trumpamole__page-title {
    margin: 0;
}

/* ----- Баланс ------------------------------------------------------------ */

.tam-store__chips {
    display: flex;
    gap: var(--ui-space-2);
    width: 100%;
}

/* Материал чипа — §10 рамы (тёмный чип значения). Здесь размер и то, что
   чип магазина нажимается: тап по нему ведёт к покупке валюты. */
.tam-store__chip {
    flex: 1 1 0;
    display: flex;
    align-items: center;
    gap: var(--ui-space-2);
    min-height: 46px;
    padding: var(--ui-space-2) var(--ui-space-3);
    font-family: var(--ui-font-main);
    cursor: pointer;
}

.tam-store__chip-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.1;
}

/* Подпись и значение чипа набраны в §10 рамы вместе с чипами скинов,
   заданий и арены: кегль, цвет и обводка у них общие. */
.tam-store__chip-label {
    font-weight: var(--ui-weight-body);
}

.tam-store__chip-value {
    font-family: var(--ui-font-main);
    font-weight: var(--ui-weight-value);
}

/* ----- Главное предложение ----------------------------------------------
   Золотая панель: на референсе особое предложение — единственный золотой
   прямоугольник экрана, и потому его невозможно пропустить.
   ------------------------------------------------------------------------ */

/*
 * Панель предложения — одна, фиолетовая. Материал в §6 рамы.
 *
 * Здесь лежали два корпуса: золотой у `.tam-store__hero` и фиолетовый у
 * `.tam-store__hero.is-premium`. Разметку собирает `shop.view.js`, и
 * класс `is-premium` он ставит ВСЕГДА — золотой набор до экрана не
 * доходил ни разу и держал мимо словаря запасной цвет прежнего мира.
 * Вместе с ним умирали тёмная подпись, коричневый лимит и амбровая
 * подложка картинки: их перекрывал тот же `is-premium`.
 */
.tam-store__hero {
    display: flex;
    gap: var(--ui-space-3);
    margin: var(--ui-space-4) var(--ui-space-3) 0;
    padding: var(--ui-space-3);
}

.tam-store__hero-art {
    flex: 0 0 96px;
    width: 96px;
    height: 96px;
    overflow: hidden;
}

.tam-store__hero-art img,
.tam-store__card-art img,
.tam-store__item-art img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.tam-store__hero-body {
    flex: 1 1 auto;
    min-width: 0;
}

/* Значок выгоды — красная наклейка §23.2 рамы: единственное красное пятно
   панели, поэтому читается мгновенно. Здесь только место в потоке. */
.tam-store__badge {
    display: inline-block;
    margin-bottom: 6px;
    padding: 3px 10px;
    font-size: var(--ui-size-small);
}

/*
 * Название набора — кремовый капслок в тёмной обводке.
 *
 * Копия обводки из восьми смещений лежала здесь целиком и уже разошлась
 * бы с §21 при первой же правке: сам контур теперь приходит оттуда,
 * `.tam-store__hero-title` дописан в её список. В разделе — только
 * кегль, семейство и место в потоке.
 */
.tam-store__hero-title {
    margin: 0 0 4px;
    font-family: var(--ui-font-condensed);
    font-weight: 900;
    font-size: var(--ui-size-section);
    line-height: 1.2;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

/* Пояснение под названием: на фиолетовом корпусе оно кремовое, обводки
   нет — в 13px она даёт кляксу (та же причина, что у мелких значений
   в §21). */
.tam-store__hero-sub {
    margin: 0 0 var(--ui-space-2);
    color: var(--ui-text-main);
    font-family: var(--ui-font-main);
    font-weight: 700;
    font-size: var(--ui-size-body);
    line-height: 1.35;
}

/*
 * Кнопка предложения — ЗОЛОТАЯ.
 *
 * На кадре «НАБОР ПОБЕДИТЕЛЯ» ценник зелёный, и прошлый заход повторил
 * это буквально. Но зелёный в нашей игре занят смыслом «забрать
 * награду» (§9 словаря), и владелец потребовал жёлтую кнопку. На
 * фиолетовой панели золото читается лучше зелёного: это самый светлый
 * и самый тёплый цвет на холодном корпусе, и он совпадает с золотым
 * кантом самой панели.
 *
 * Корпус тот же, что у любой золотой кнопки игры (`ui-tokens.css`,
 * `.ui-button-gold`), поэтому здесь остаются только размеры: кнопка
 * растянута во всю ширину панели.
 */
.tam-store__cta {
    width: 100%;
    min-height: var(--ui-tap);
}

/* ----- Состав товара ----------------------------------------------------- */

/*
 * Состав набора лежит на утопленной подложке — но только в панели
 * предложения.
 *
 * Подложку даёт §8 рамы, и до этого захода она доставалась ЛЮБОМУ
 * составу, включая строку «35 энергии» в карточке товара. Там внутри
 * лежит ровно один чип, и получалась плашка в плашке: у карточки VIP
 * выемка тянулась во всю ширину, а чип занимал её половину. Раздел
 * пытался эту подложку снять (`background: none; border: 0`), но рама
 * подключена последней — снятие до экрана не доживало. Теперь в списке
 * рамы стоит `.tam-store__hero .tam-store__contents`, а сам сброс убран
 * за ненадобностью.
 */
.tam-store__contents {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: var(--ui-space-2);
}

/* Строка состава — плотный тёмный чип §10 рамы: то же значение без
   нажатия, что и в чипах баланса. Здесь только кегль и поля. */
.tam-store__content {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 8px;
    font-family: var(--ui-font-main);
    font-weight: var(--ui-weight-body);
    font-size: var(--ui-size-small);
    line-height: 1.25;
}

.tam-store__content svg {
    color: var(--ui-gold-light);
    flex: 0 0 auto;
}

/*
 * Редкость облика в составе набора (§15 ТЗ).
 *
 * Слово стояло тем же цветом, что и всё остальное в чипе: набор с
 * легендарным кротом внутри выглядел так же, как набор с обычным. Цвета —
 * из словаря, ровно те, которыми редкость подписана в гардеробе и в
 * карточке предмета; обычная остаётся общим цветом строки, потому что
 * серое слово посреди чипа читается погашенным.
 */
.tam-store__rar {
    font-weight: var(--ui-weight-value);
}

/*
 * Редкость самой карточки (§28 ТЗ) — плотный капслок в утопленной
 * плашке, ровно как метка гардероба: витрина и шкаф показывают одни и те
 * же вещи, и «эпический» обязан выглядеть в них одинаково. Материал
 * плашки — §8 рамы, цвет слова — общие `--ui-rar-*` строкой ниже.
 *
 * Метка стоит по центру плитки прилавка (карточка вертикальная, всё в ней
 * центровано) и по левому краю в карточке подходящего товара — там она
 * идёт следом за названием в общем столбце текста.
 */
.tam-store__tag {
    display: inline-flex;
    align-items: center;
    align-self: center;
    margin-bottom: 6px;
    padding: 3px 8px;
    font-family: var(--ui-font-condensed);
    font-weight: 900;
    font-size: var(--ui-size-small);
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: .04em;
}

/*
 * Цвет метки набран ДВУМЯ классами намеренно.
 *
 * Материал выемки метка берёт из §8 рамы, а рама подключается последней и
 * ставит всякой выемке `color: var(--ui-text-main)`. Одноклассовое правило
 * раздела при равном весе проигрывает ей по порядку файлов, и «эпический»
 * выходил бы белым — тем же, чем набрано название товара. Метка гардероба
 * (`.tam-cos__tag.is-epic`) решает то же самое тем же способом; `!important`
 * здесь не нужен (§86).
 *
 * Обычная редкость получает свой цвет: серое слово в строке состава
 * читается погашенным, а отдельной меткой — ровно тем, чем является.
 */
.tam-store__tag.tam-store__rar--common    { color: var(--ui-rar-common); }
.tam-store__tag.tam-store__rar--uncommon  { color: var(--ui-rar-uncommon); }
.tam-store__tag.tam-store__rar--rare      { color: var(--ui-rar-rare); }
.tam-store__tag.tam-store__rar--epic      { color: var(--ui-rar-epic); }
.tam-store__tag.tam-store__rar--legendary { color: var(--ui-rar-legendary); }
.tam-store__tag.tam-store__rar--mythic    { color: var(--ui-rar-mythic); }

.tam-store__card .tam-store__tag {
    align-self: flex-start;
    margin-bottom: 8px;
}
.tam-store__rar--uncommon  { color: var(--ui-rar-uncommon); }
.tam-store__rar--rare      { color: var(--ui-rar-rare); }
.tam-store__rar--epic      { color: var(--ui-rar-epic); }
.tam-store__rar--legendary { color: var(--ui-rar-legendary); }
.tam-store__rar--mythic    { color: var(--ui-rar-mythic); }

.tam-store__contents--tight {
    gap: 4px;
    margin-bottom: 8px;
}

/* ----- Лимит и запрет ---------------------------------------------------- */

/* Цвет обеих строк задаёт §20 рамы: подсказка и запрет не бывают
   светлее панели, под которой стоят. Строка запрета вдобавок красилась
   здесь в `--ui-text-faint` — причину, по которой товар не купить,
   приглушать нельзя, и рама это объявление и так перебивала. */
.tam-store__limit,
.tam-store__note {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: var(--ui-space-2);
    font-family: var(--ui-font-main);
    font-weight: var(--ui-weight-body);
    font-size: var(--ui-size-small);
    line-height: 1.3;
}

.tam-store__note {
    margin-bottom: 0;
}

.tam-store__limit svg,
.tam-store__note svg {
    color: var(--ui-gold);
    flex: 0 0 auto;
}

/* ----- Подходящие рядом -------------------------------------------------- */

.tam-store__offers {
    display: flex;
    flex-direction: column;
    gap: var(--ui-space-3);
    margin-bottom: var(--ui-space-5);
}

/* Карточка — §6 рамы, окно под картинку — §8. Копия материала лежала
   здесь числами (#26196a, #1a1148, #0d0924) и до экрана не доживала. */
.tam-store__card {
    display: flex;
    gap: var(--ui-space-3);
    padding: var(--ui-space-3);
}

.tam-store__card-art {
    flex: 0 0 72px;
    width: 72px;
    height: 72px;
    overflow: hidden;
}

.tam-store__card-body {
    flex: 1 1 auto;
    min-width: 0;
}

.tam-store__card-title {
    margin: 0 0 2px;
    color: var(--ui-text-main);
    font-family: var(--ui-font-main);
    font-size: var(--ui-size-value);
    font-weight: var(--ui-weight-section);
    line-height: 1.2;
    text-shadow: 0 2px 0 rgba(0, 0, 0, 0.4);
}

.tam-store__card-sub {
    margin: 0 0 8px;
    color: var(--ui-text-muted);
    font-family: var(--ui-font-main);
    font-weight: var(--ui-weight-body);
    font-size: var(--ui-size-small);
    line-height: 1.3;
}

/* Недоступный товар остаётся плотной карточкой: `opacity` на пёстром
   фоне читается как сбой отрисовки, а не как запрет (общее правило
   проекта, §58 ТЗ). Причину при этом всегда пишет строка `__note`. */
.tam-store__card.is-locked,
.tam-store__item.is-locked {
    opacity: 1;
    filter: saturate(0.55) brightness(0.7);
}

/* ----- Прилавок ---------------------------------------------------------- */

/*
 * Прилавок — один физический контрол, а не пять отдельных кнопок (§16 ТЗ):
 * вкладки стоят в утопленной дорожке. Материал дорожки — §11 рамы, туда
 * же дописан `.tam-store__tabs`; сами вкладки рама красит с самого
 * начала, и весь их набор здесь (дерево в покое, золото на выборе,
 * подпись) до экрана не доходил ни одним объявлением.
 */
.tam-store__tabs {
    display: flex;
    gap: 4px;
    margin-bottom: var(--ui-space-3);
    padding: 4px;
}

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

/* Плитка товара — та же карточка §6, окно под картинку — §8. */
.tam-store__item {
    display: flex;
    flex-direction: column;
    padding: var(--ui-space-2);
}

.tam-store__item-art {
    width: 100%;
    aspect-ratio: 1 / 1;
    margin-bottom: 8px;
    overflow: hidden;
}

.tam-store__item-title {
    margin: 0 0 6px;
    color: var(--ui-text-main);
    font-family: var(--ui-font-main);
    font-size: var(--ui-size-body);
    font-weight: var(--ui-weight-section);
    line-height: 1.2;
    text-align: center;
    text-shadow: 0 2px 0 rgba(0, 0, 0, 0.4);
}

/*
 * Прибавки снаряжения (§10 задания): состава у него нет, есть строка
 * вида «монеты ×1.2, энергия +3». Мелкий шрифт и два ряда максимум —
 * карточка не должна вырасти вдвое из-за длинного набора прибавок.
 */
.tam-store__gear-mods {
    margin: 0 0 6px;
    font-size: var(--ui-size-small);
    line-height: 1.3;
    color: var(--ui-gold-light);
    text-align: center;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Ценовая полоса внизу карточки — как на кадре «СКИНЫ» референса: цена
   не теряется в тексте, а лежит отдельной планкой. */
.tam-store__item-cta,
.tam-store__card-cta {
    margin-top: auto;
    align-self: stretch;
    min-height: 40px;
    border-radius: var(--ui-radius-sm);
}

.tam-store__price {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: var(--ui-font-main);
    font-weight: var(--ui-weight-value);
    font-size: var(--ui-size-value);
}

/* ----- Окно покупки ------------------------------------------------------ */

.tam-store__window-head {
    margin-bottom: var(--ui-space-2);
}

.tam-store__window-label {
    margin-bottom: 6px;
    color: var(--ui-text-muted);
    font-family: var(--ui-font-main);
    font-size: var(--ui-size-small);
    font-weight: var(--ui-weight-section);
    letter-spacing: .06em;
    text-transform: uppercase;
}

.tam-store__window-line {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 0;
    border-bottom: 1px solid color-mix(in srgb, var(--ui-ivory) 8%, transparent);
    color: var(--ui-text-main);
    font-family: var(--ui-font-main);
    font-weight: var(--ui-weight-body);
    font-size: var(--ui-size-body);
}

.tam-store__window-line:last-child {
    border-bottom: 0;
}

.tam-store__window-line svg {
    color: var(--ui-gold-light);
    flex: 0 0 auto;
}

/* ----- Пустое состояние и загрузка --------------------------------------- */

.tam-store__skeleton {
    display: flex;
    flex-direction: column;
    gap: var(--ui-space-2);
    padding: var(--ui-space-2) 0;
}

.tam-store__skeleton-bar {
    height: 18px;
    border-radius: var(--ui-radius-sm);
    background: linear-gradient(90deg,
        var(--ui-panel-dark) 0%, var(--ui-panel-main) 50%, var(--ui-panel-dark) 100%);
    background-size: 200% 100%;
    animation: tam-store-shimmer 1.4s linear infinite;
}

.tam-store__skeleton-bar--tall { height: 96px; }
.tam-store__skeleton-bar--short { width: 58%; }

@keyframes tam-store-shimmer {
    from { background-position: 200% 0; }
    to   { background-position: -200% 0; }
}

@media (prefers-reduced-motion: reduce) {
    .tam-store__skeleton-bar { animation: none; }
}

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

@media (max-width: 360px) {
    .tam-store__hero {
        flex-direction: column;
    }

    .tam-store__hero-art {
        flex: 0 0 auto;
        width: 100%;
        height: 120px;
    }

    .tam-store__grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ----- Выход в гардероб --------------------------------------------------- */

/*
 * Кнопка стоит под разделом косметики и нигде больше: примерить можно
 * только облик, а из раздела ресурсов вести в гардероб незачем (§680).
 */
.tam-store__wardrobe {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    margin-top: var(--ui-space-3);
}