/* ==========================================================================
   VAULT — хранилище припасов (§123-125, §330-332, этап 27)

   Экран выглядит как склад, но остаётся обычной сеткой: рисованный
   стеллаж с «настоящими» полками ломался бы на каждом новом предмете и
   не поддавался бы прокрутке (§330).

   Пустая карточка не прячется и не выцветает до невидимости: у предмета,
   которого нет, стоит подпись «нет» и приглушённая картинка, а по тапу
   открывается карточка с кнопкой «где получить» (§332).

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

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

.tam-vault__hero {
    position: relative;
    overflow: hidden;
}

/* Тот же приём, что в Хронике: подменяется псевдоэлемент шапки скинов,
   иначе поверх склада виден бутик с костюмами. */
.tam-vault__hero::before {
    background-image: url('../vault/vault_bg.webp?26090901');
    background-position: center 50%;
    filter: none;
    transform: none;
    opacity: 1;
}

.tam-vault__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) 52%, transparent) 44%,
        color-mix(in srgb, var(--ui-bg-dark) 94%, transparent) 100%);
}

/* ----- Сетка припасов ----------------------------------------------------- */

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

/* Корпус, кромка и кольцо редкости приходят из ui-frame.css (§6): здесь
   остаётся только геометрия плитки. Свой градиент с волосяной рамкой,
   стоявший тут раньше, раму не перебивал и просто дублировал её хуже. */
.tam-vault__card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    padding: 9px 6px 8px;
    cursor: pointer;
}

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

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

.tam-vault__card-art img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.tam-vault__card-name {
    overflow: hidden;
    width: 100%;
    color: var(--ui-text-main);
    font-family: var(--ui-font-condensed);
    font-size: var(--ui-size-small);
    font-weight: 900;
    line-height: 1.15;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Количество — золотой чип в углу картинки (§64): добро на плитке видно
   значком, а не строкой текста под названием. */
.tam-vault__card-count {
    position: absolute;
    right: -2px;
    bottom: -2px;
    min-width: 20px;
    padding: 1px 5px;
    border-radius: var(--ui-radius-pill);
    background: var(--ui-dirt-lite),
                linear-gradient(180deg, var(--ui-gold-light) 0%, var(--ui-gold-mid) 100%);
    border: 2px solid var(--ui-panel-edge);
    color: var(--ui-text-dark);
    font-family: var(--ui-font-condensed);
    font-size: var(--ui-size-small);
    font-weight: 900;
    line-height: 1.3;
    text-align: center;
}

/* Замок на месте чипа: §58 просит показывать закрытое замком, а не
   словом. Подпись «где берут» игрок читает в карточке предмета.
   Материал кружка — §23.3 рамы, общий с замком музея. */
.tam-vault__card-lock {
    position: absolute;
    right: -2px;
    bottom: -2px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
}

/* Подпись редкости — третий признак рядом с кольцом и свечением (§15). */
.tam-vault__card-rarity {
    font-family: var(--ui-font-condensed);
    font-size: var(--ui-size-micro);
    font-weight: 900;
    letter-spacing: 0.08em;
    line-height: 1;
    text-transform: uppercase;
    color: var(--ui-rar-common);
}

.tam-vault__card-rarity--uncommon  { color: var(--ui-rar-uncommon); }
.tam-vault__card-rarity--rare      { color: var(--ui-rar-rare); }
.tam-vault__card-rarity--epic      { color: var(--ui-rar-epic); }
.tam-vault__card-rarity--legendary { color: var(--ui-rar-legendary); }
.tam-vault__card-rarity--mythic    { color: var(--ui-rar-mythic); }

/* Предмета нет: гаснет картинка, а не вся плитка вместе с названием —
   иначе половину хранилища не прочитать. */
.tam-vault__card.is-empty .tam-vault__card-art img {
    opacity: 0.42;
    filter: grayscale(0.7);
}

.tam-vault__card.is-empty .tam-vault__card-name { color: var(--ui-text-muted); }
.tam-vault__card.is-empty .tam-vault__card-rarity { opacity: 0.6; }

/* Подпись «ЧЕГО НЕТ» отделяет вторую половину сетки от первой. */
.tam-vault__section-title {
    margin: var(--space-3, 14px) 0 var(--space-2, 10px);
    text-align: center;
}

/* ----- Карточка предмета в окне ------------------------------------------- */

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

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

.tam-vault__card-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    padding: 7px 10px;
    border-radius: var(--ui-radius-sm);
    background: linear-gradient(180deg, var(--ui-row-a) 0%, var(--ui-panel-dark) 100%);
    box-shadow: var(--ui-inner-well);
}

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

.tam-vault__card-value {
    color: var(--ui-text-main);
    font-family: var(--ui-font-condensed);
    font-size: var(--ui-size-body);
    text-align: right;
}

/* ----- Пустое состояние --------------------------------------------------- */

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