/* ==========================================================================
   COSMETICS — гардероб: слои молота, косметика профиля и офиса
   (§488-500, §624-631, этап 36)

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

   **Сцена предпросмотра** — самая крупная и всегда сверху. У каждой
   группы она своя: манекен с молотом, свой аватар в рамке, комната
   офиса. Предпросмотр в ТЗ обязателен и честен (§680), поэтому он
   занимает место, а не прячется в окне по кнопке.

   **Стойка базы** — единственное место экрана с числами. База молота
   игровая, множители у неё показаны; ниже, у косметики, чисел нет
   вовсе — это и есть разделение §488, видимое глазом.

   **Слои** — сетка карточек. Своё показано картинкой, чужое — той же
   карточкой, но приглушённой, с подписью, откуда предмет берётся (§629).
   Эффекты, следы и звуки картинки не имеют и показаны цветным образцом:
   подставлять им чужую иллюстрацию было бы обманом предпросмотра.

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

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

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

.tam-cos__hero::after {
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--ui-bg-dark) 78%, transparent) 0%,
        color-mix(in srgb, var(--ui-bg-dark) 52%, transparent) 44%,
        color-mix(in srgb, var(--ui-bg-dark) 94%, transparent) 100%);
}

/* Ряд счётчика и ссылки в магазин — общий ряд плиток шапки (§10 рамы);
   здесь остались перенос на узком экране и отбивка от заголовка. */
.tam-cos__stats {
    flex-wrap: wrap;
    margin-top: var(--space-2);
}

/*
 * Плитка «собрано» и ссылка в магазин описывались здесь целиком:
 * полупрозрачная чернота с волосяной рамкой в 1px и кремовой подписью —
 * ровно то стекло, которое §62 ТЗ запрещает. Обе давно стоят в списках
 * рамы (§10 и §12), и ни одно из двадцати объявлений до экрана не
 * доходило.
 */

/* ----- Заголовки разделов ------------------------------------------------- */

/*
 * Пояснение уходит под заголовок, а не встаёт рядом.
 *
 * Общий заголовок раздела ставит подпись справа, но у гардероба
 * заголовки длинные («Основа молота», «Победная поза»), и на узком
 * экране подпись налезала на второй строкой перенесённое название.
 */
.tam-cos .trumpamole__skins-section-header {
    flex-direction: column;
    /* По центру, как подписи секций на всех кадрах референса `as/4.png`;
       колонка остаётся — она и решала исходную беду с переносом. */
    align-items: center;
    text-align: center;
    gap: 2px;
}

.tam-cos .trumpamole__skins-section-header span {
    color: var(--ui-text-muted);
    font-family: var(--ui-font-condensed);
    font-size: var(--ui-size-small);
}

/* ----- Сцена предпросмотра ------------------------------------------------ */

/* Корпус, кромка, грань и радиус — из рамы (§6 ui-frame.css).
   Здесь остаётся только геометрия сцены. */
.tam-cos__stage {
    display: flex;
    gap: var(--space-3);
    align-items: center;
    margin-bottom: var(--space-3);
    padding: var(--space-3);
}

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

.tam-cos__stage-title {
    margin: 0 0 4px;
    color: var(--ui-text-main);
    font-family: var(--ui-font-title);
    font-size: var(--ui-size-value);
    line-height: 1.25;
}

.tam-cos__stage-text {
    margin: 6px 0 8px;
    color: var(--ui-text-muted);
    font-family: var(--ui-font-main);
    font-size: var(--ui-size-body);
    line-height: 1.4;
}

.tam-cos__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 6px;
}

/* Метка — маленькая утопленная плашка (§8 рамы), а не текст в волосяной
   рамке: на тёмной доске линия в 1px пропадает, и метка читается
   подписью. Материал был выписан здесь числами (#181043 → #0e0927) —
   копия общей выемки на полступени темнее. */
.tam-cos__tag {
    display: inline-flex;
    align-items: center;
    padding: 4px 9px;
    font-family: var(--ui-font-condensed);
    font-weight: 900;
    font-size: var(--ui-size-small);
    text-transform: uppercase;
    letter-spacing: .04em;
}

/* Редкость — только цвет подписи и кант: силы она не означает (§489).
   Цвета берутся из словаря (`--ui-rar-*`), а не пишутся заново:
   раньше «редкий» был #4da3ff здесь и #3f8cc9 в коллекции. */
.tam-cos__tag.is-rare      { color: var(--ui-rar-rare);      border-color: var(--ui-rar-rare); }
.tam-cos__tag.is-epic      { color: var(--ui-rar-epic);      border-color: var(--ui-rar-epic); }
.tam-cos__tag.is-legendary { color: var(--ui-rar-legendary); border-color: var(--ui-rar-legendary); }
.tam-cos__tag.is-mythic    { color: var(--ui-rar-mythic);  border-color: var(--ui-rar-mythic); }

.tam-cos__note {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
    color: var(--ui-text-muted);
    font-family: var(--ui-font-condensed);
    font-size: var(--ui-size-small);
}

/* ----- Манекен и пробные удары -------------------------------------------- */

/* Материал выемки — из рамы (§8): своя заливка тут уходила к чёрному
   и посреди сцены читалась дырой, а не вырезом в доске. */
.tam-cos__dummy {
    position: relative;
    flex: 0 0 132px;
    width: 132px;
    height: 132px;
    overflow: hidden;
}

/*
 * Крот-мишень стоит на подложке, а не лежит на ней (§108 ТЗ: character
 * presentation). Тень была только у молотка ниже — вырезанный крот в
 * той же сцене шёл без неё и читался наклейкой поверх фона, хотя
 * замахиваются именно по нему. Ступень `-sm`: мишень 87px, это мелкая
 * фигура на корпусе, а не герой карточки.
 */
.tam-cos__dummy-art {
    position: absolute;
    left: 50%;
    bottom: 6px;
    width: 68%;
    transform: translateX(-50%);
    filter: drop-shadow(var(--ui-art-shadow-sm));
}

.tam-cos__hammer {
    position: absolute;
    right: 4px;
    top: 8px;
    width: 62%;
    transform-origin: 62% 88%;
    transform: rotate(38deg);
    filter: drop-shadow(var(--ui-art-shadow-md));
}

/* Удар демонстрации: тот же короткий замах, что и в бою, — предпросмотр
   обязан показывать то, что игрок увидит на поле. */
.tam-cos__dummy.is-hit .tam-cos__hammer {
    animation: tamCosStrike var(--tam-t-modal) cubic-bezier(.3, .9, .35, 1);
}

.tam-cos__dummy.is-hit .tam-cos__dummy-art {
    animation: tamCosSquash var(--tam-t-modal) ease-out;
}

.tam-cos__spark {
    position: absolute;
    left: 50%;
    bottom: 28%;
    width: 46px;
    height: 46px;
    border-radius: var(--ui-radius-pill);
    transform: translate(-50%, 50%) scale(.4);
    background: radial-gradient(circle, var(--tam-cos-spark, var(--ui-gold-light)), rgba(255, 255, 255, 0) 68%);
    opacity: 0;
}

.tam-cos__dummy.is-hit .tam-cos__spark {
    animation: tamCosSpark var(--tam-t-modal) ease-out;
}

@keyframes tamCosStrike {
    0%   { transform: rotate(58deg); }
    30%  { transform: rotate(2deg); }
    52%  { transform: rotate(16deg); }
    100% { transform: rotate(38deg); }
}

@keyframes tamCosSquash {
    0%   { transform: translateX(-50%) scale(1, 1); }
    32%  { transform: translateX(-50%) scale(1.12, .84); }
    100% { transform: translateX(-50%) scale(1, 1); }
}

@keyframes tamCosSpark {
    0%   { opacity: 0; transform: translate(-50%, 50%) scale(.4); }
    35%  { opacity: .9; transform: translate(-50%, 50%) scale(1); }
    100% { opacity: 0; transform: translate(-50%, 50%) scale(1.3); }
}

.tam-cos__try {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
}

/* ----- Профиль и офис ----------------------------------------------------- */

.tam-cos__avatar {
    position: relative;
    flex: 0 0 118px;
    width: 118px;
    height: 118px;
}

.tam-cos__avatar-art,
.tam-cos__avatar-frame {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.tam-cos__avatar-art {
    padding: 12%;
    border-radius: var(--ui-radius-pill);
    object-fit: cover;
}

/*
 * Табличка имени — предмет, а не текстовое поле.
 *
 * Заливку и цвет надписи ставит сама косметика (`data.bg`, `data.ink`),
 * поэтому материал сюда не подставить. Но волосяная золотая линия в 1px
 * оставляла плоский прямоугольник ровно того вида, что запрещает §62:
 * объём даёт толстая тёмная кромка, светлая фаска сверху и грань снизу —
 * тот же приём, что у любой доски рамы.
 */
.tam-cos__plate {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-bottom: 8px;
    padding: 8px 12px;
    border: var(--ui-border-thick) solid var(--ui-panel-edge);
    border-radius: var(--ui-radius-sm);
    box-shadow:
        0 3px 0 var(--ui-panel-edge),
        var(--ui-shadow-soft),
        inset 0 2px 0 rgba(255, 255, 255, 0.14);
    font-family: var(--ui-font-condensed);
    font-weight: 900;
    /* Чернила берутся из предмета и бывают любыми — от кремовых до
       сиреневых «Кротограда». Обводка обязательна ровно по той же
       причине, что и в шапке: имя обязано читаться на любой заливке. */
    text-shadow:
        -1px -1px 0 color-mix(in srgb, var(--ui-text-outline) 85%, transparent), 1px -1px 0 color-mix(in srgb, var(--ui-text-outline) 85%, transparent),
        -1px  1px 0 color-mix(in srgb, var(--ui-text-outline) 85%, transparent), 1px  1px 0 color-mix(in srgb, var(--ui-text-outline) 85%, transparent);
}

.tam-cos__plate b {
    font-family: var(--ui-font-title);
    font-size: var(--ui-size-body);
}

.tam-cos__plate span {
    font-size: var(--ui-size-small);
    opacity: .78;
}

.tam-cos__room {
    flex: 0 0 140px;
    width: 140px;
    height: 104px;
    overflow: hidden;
}

.tam-cos__room img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.tam-cos__offices {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
}

/* ----- Стойка базы -------------------------------------------------------- */

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

/* Корпус и кромка — из рамы (§6). */
.tam-cos__base-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: var(--space-2);
    text-align: center;
}

/* Выбранная база отмечена золотой кромкой, закрытая — приглушена
   `filter`, а не `opacity`: сквозь полупрозрачную карточку просвечивал
   фон страницы, и она читалась сбоем отрисовки, а не запретом. */
.tam-cos__base-card.is-on {
    border-color: color-mix(in srgb, var(--ui-gold) 62%, transparent);
}

.tam-cos__base-card.is-locked {
    filter: saturate(.7) brightness(.7);
}

/*
 * Крупный размер — ТОЛЬКО у самого молота.
 *
 * Правило писалось для одной картинки в карточке, но монета в строке
 * множителей — тоже `<img>` (валюты в игре рисуются картинкой, а не
 * вектором, `mvp/icons.js`), и она раздувалась с 13px до 56px: строка
 * бонусов вылезала за карточку и налезала на соседнюю.
 */
.tam-cos__base-card > img {
    width: 56px;
    height: 56px;
    object-fit: contain;
}

.tam-cos__base-card h3 {
    margin: 0;
    color: var(--ui-text-main);
    font-family: var(--ui-font-condensed);
    font-size: var(--ui-size-small);
    line-height: 1.2;
}

/* Два множителя в карточке шириной ~110px не всегда встают в строку:
   при «+50%» и «+40%» перенос обязателен, иначе счётчики съезжают. */
.tam-cos__base-stats {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2px 8px;
    max-width: 100%;
    color: var(--ui-gold-light);
    font-family: var(--ui-font-condensed);
    font-weight: 900;
    font-size: var(--ui-size-small);
}

.tam-cos__base-stats span {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    white-space: nowrap;
}

.tam-cos__base-stats .tam-icon {
    flex: 0 0 auto;
    width: 13px;
    height: 13px;
}

/* ----- Карточки слоёв ----------------------------------------------------- */

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

/* Корпус и кромка — из рамы (§6). */
.tam-cos__card {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: var(--space-2);
    text-align: center;
    cursor: pointer;
}

/*
 * Выбор и «надето» стоят ПОВЕРХ кольца редкости.
 *
 * Кольцо редкости карточка получает из §6 рамы, а рама подключена
 * последней и при равном весе перебивает раздел. Поэтому оба состояния
 * написаны с родителем: иначе выбранная карточка теряла золотую кромку,
 * а надетая — своё кольцо.
 */
[data-page="cosmetics"] .tam-cos__card.is-selected {
    border-color: color-mix(in srgb, var(--ui-gold) 68%, transparent);
}

[data-page="cosmetics"] .tam-cos__card.is-on {
    box-shadow:
        0 5px 0 var(--ui-panel-edge),
        var(--ui-shadow-soft),
        inset 0 0 0 2px color-mix(in srgb, var(--ui-gold) 70%, transparent),
        inset 0 0 14px color-mix(in srgb, var(--ui-gold) 26%, transparent);
}

/* Чужое видно, но приглушено: игрок знает, что искать (§121, §629).
   Приглушение — `filter`: сквозь `opacity` просвечивала выемка под
   рисунком, и предмет читался наполовину стёртым. */
.tam-cos__card.is-locked .tam-cos__card-art img,
.tam-cos__card.is-locked .tam-cos__swatch {
    /* Тень повторена намеренно: `filter` не складывается, и без неё
       закрытая вещь теряла подложку, которую только что получила
       открытая, — половина сетки стояла на доске, половина лежала. */
    filter: grayscale(.6) brightness(.62) drop-shadow(var(--ui-art-shadow-card));
}

.tam-cos__card-art {
    position: relative;
    height: 78px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

/*
 * Ступень `-card` (§108 ТЗ): вещь лежит на светлой доске карточки, и
 * плотная тень героя здесь выглядит грязью. Без тени вовсе облик
 * выглядел наклеенным — гардероб был единственной сеткой игры, где
 * рисованный предмет стоял на доске плоско.
 */
.tam-cos__card-art img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    filter: drop-shadow(var(--ui-art-shadow-card));
}

.tam-cos__swatch {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: var(--ui-radius-pill);
    color: var(--ui-text-dark);
    background: radial-gradient(circle at 34% 32%, rgba(255, 255, 255, .5),
                rgba(255, 255, 255, 0) 58%), var(--tam-cos-swatch, var(--ui-gold));
}

.tam-cos__badge {
    position: absolute;
    left: 6px;
    top: 6px;
    padding: 2px 6px;
    font-size: var(--ui-size-micro);
}

.tam-cos__card-title {
    margin: 0;
    color: var(--ui-text-main);
    font-family: var(--ui-font-condensed);
    font-size: var(--ui-size-small);
    line-height: 1.2;
}

/* Цвет подписи задаёт §10 рамы вместе со всеми подписями плиток игры. */
.tam-cos__card-note {
    font-family: var(--ui-font-condensed);
    font-weight: 900;
    font-size: var(--ui-size-small);
    line-height: 1.25;
}

/*
 * У своего предмета подпись под названием — это его редкость (вид ставит
 * туда либо её, либо источник), и §15 ТЗ просит показывать редкость
 * рамкой, свечением И подписью сразу. Кольцо и свечение карточка уже
 * получила из §6 рамы, здесь подписи возвращается цвет набора.
 *
 * Только у своего: у чужого в той же строке стоит «где взять», и красить
 * её редкостью значило бы подписать источник цветом предмета.
 */
.tam-cos__card.is-owned.is-common .tam-cos__card-note    { color: var(--ui-rar-common); }
.tam-cos__card.is-owned.is-uncommon .tam-cos__card-note  { color: var(--ui-rar-uncommon); }
.tam-cos__card.is-owned.is-rare .tam-cos__card-note      { color: var(--ui-rar-rare); }
.tam-cos__card.is-owned.is-epic .tam-cos__card-note      { color: var(--ui-rar-epic); }
.tam-cos__card.is-owned.is-legendary .tam-cos__card-note { color: var(--ui-rar-legendary); }
.tam-cos__card.is-owned.is-mythic .tam-cos__card-note    { color: var(--ui-rar-mythic); }

.tam-cos__card .tam-cos__note { justify-content: center; }

.tam-cos__cta {
    width: 100%;
    /* Цена на кнопке карточки набирается узким шрифтом: «Купить за 42 000»
       в две строки ломало ровную сетку. */
    padding-left: 6px;
    padding-right: 6px;
    font-size: var(--ui-size-small);
    white-space: nowrap;
}

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

.tam-cos__skeleton {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.tam-cos__skeleton-bar {
    height: 72px;
    border-radius: var(--ui-radius-md);
    background: linear-gradient(90deg,
        color-mix(in srgb, var(--ui-ivory) 6%, transparent),
        color-mix(in srgb, var(--ui-ivory) 12%, transparent),
        color-mix(in srgb, var(--ui-ivory) 6%, transparent));
    animation: tamCosPulse 1.2s ease-in-out infinite;
}

.tam-cos__skeleton-bar--tall { height: 150px; }
.tam-cos__skeleton-bar--short { height: 48px; }

@keyframes tamCosPulse {
    0%, 100% { opacity: .55; }
    50%      { opacity: .95; }
}

/* Низ страницы обязан учитывать нижнее меню и безопасную зону. */
.tam-cos {
    padding-bottom: calc(var(--tam-nav-h, 68px) + 24px + var(--safe-bottom, 0px));
}

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

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

    /* На узком экране сцена встаёт в столбик: рядом манекен и текст
       сжимались до двух слов в строке. */
    .tam-cos__stage { flex-direction: column; align-items: stretch; }
    .tam-cos__dummy,
    .tam-cos__avatar,
    .tam-cos__room { align-self: center; }
}

/* Пробные удары — украшение: при системной настройке «меньше движения»
   демонстрация остаётся, но перестаёт дёргаться. */
@media (prefers-reduced-motion: reduce) {
    .tam-cos__dummy.is-hit .tam-cos__hammer,
    .tam-cos__dummy.is-hit .tam-cos__dummy-art,
    .tam-cos__dummy.is-hit .tam-cos__spark,
    .tam-cos__skeleton-bar { animation: none; }
}