/* ==========================================================================
   ui-modal.css — модальный фреймворк (этап 13).

   §370-386 части 4 ТЗ: у всех окон игры один каркас с четырьмя типами и
   девятью категориями. Тип задаёт размер и раскладку, категория — язык
   оформления. Цвет, кромка, грань и типографика приходят из словаря
   (`ui-tokens.css`); материалы панелей — оттуда же, здесь их не повторяем.

       тип        когда                       ширина
       small      подтверждение, короткий     320px
                  ответ
       standard   предмет, детали, список     400px
       hero       победа, награда, находка    440px + крупная графика
       fullscreen сюжет, регион, босс         весь экран

   Категории (§62 части 1): standard, reward, character, discovery, story,
   boss, commercial, system, cinematic. Они меняют свет и кант, но не
   форму: окно остаётся одной и той же дорогой игровой панелью.
   ========================================================================== */

/* ==========================================================================
   СЛОЙ И ПОДЛОЖКА
   ========================================================================== */

.tam-modal-layer {
    position: fixed;
    inset: 0;
    /* Ступень окна: выше навигации и шапки — окно перекрывает игру, а не
       соседствует с ней; ниже тоста — уведомлению нужно быть видимым и
       поверх окна. Ступени живут в `game-ui.css`, число сюда не писать.
       Ступень та же, что у подложки старого окна (`modal.css`): два
       семейства окон вместе не открываются — каркас закрывает чужое. */
    z-index: var(--tam-z-modal);
    display: grid;
    place-items: center;
    /*
     * Строка ровно в высоту слоя.
     *
     * Без неё строка сетки растёт по содержимому, и `max-height: 100%` у
     * окна считается от него же — то есть не ограничивает ничего. Итог
     * боя с победной позой вырастал до 1006px на экране в 844 и уезжал
     * кнопками за нижний край: «Дальше» нажать было нечем.
     */
    grid-template-rows: minmax(0, 1fr);
    grid-template-columns: minmax(0, 1fr);
    /* §371: безопасные поля, окно не прилипает к верху экрана. */
    padding: calc(var(--ui-space-5) + var(--tam-inset-top, 0px)) var(--ui-space-4)
             calc(var(--ui-space-5) + var(--tam-inset-bottom, 0px));
    opacity: 0;
    transition: opacity var(--tam-t-state) ease;
}

.tam-modal-layer.is-open { opacity: 1; }

/*
 * Пока окно открыто, раздел под ним не прокручивается: иначе палец листает
 * страницу вместо содержимого окна, и игрок теряет место, куда вернётся.
 * Положение прокрутки при этом сохраняется — меняется только возможность
 * её двигать.
 */
body.modal-open { overflow: hidden; }

.tam-modal-backdrop {
    position: absolute;
    inset: 0;
    /* §63: тёмная, слегка размытая подложка — сцена под ней должна
       оставаться различимой, иначе игрок теряет, где он находится. */
    background: color-mix(in srgb, var(--ui-bg-deep) 62%, transparent);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}

/* ==========================================================================
   ОКНО
   ========================================================================== */

.tam-modal {
    position: relative;
    width: 100%;
    max-width: 400px;
    max-height: 100%;
    display: flex;
    flex-direction: column;
    padding: var(--ui-space-5);
    gap: var(--ui-space-3);
    border-radius: var(--ui-radius-xl);
    text-align: center;
    transform: translateY(10px) scale(0.98);
    opacity: 0;
    /* §387: переход окна — масштаб и затухание, 150-250 мс. */
    transition: transform var(--tam-t-panel) cubic-bezier(0.2, 0.9, 0.3, 1.2), opacity var(--tam-t-state) ease;
}

.tam-modal-layer.is-open .tam-modal {
    transform: translateY(0) scale(1);
    opacity: 1;
}

/* Крестик — иконочная кнопка библиотеки, приколотая к углу окна. */
/*
 * Крестик держится за угол окна, а не висит рядом с ним.
 *
 * Отрицательные отступы в четыре и два шага уносили его на восемнадцать
 * пикселей выше окна и на десять правее: на узком экране он налезал на
 * строку ресурсов в шапке, а выглядел деталью, отвалившейся от панели.
 * Половина его собственного размера — ровно столько, чтобы он читался
 * приклеенным к углу и при этом не закрывал заголовок.
 */
.tam-modal__close {
    position: absolute;
    top: -14px;
    right: -6px;
    z-index: 3;
}

/* ----- Графика ----------------------------------------------------------- */

/*
 * §374: у крупного окна есть картинка, свечение за ней и передний план.
 * Рисунок остаётся рисунком: текст внутрь картинки не кладём (§373),
 * поэтому заголовок и описание живут ниже, в чистой текстовой области.
 */
.tam-modal__art {
    position: relative;
    display: grid;
    place-items: center;
    margin-top: calc(var(--ui-space-2) * -1);
    /* Картинка стоит вне прокручиваемого тела и своей высоты не отдаёт:
       ужать контейнер, не ужав саму картинку, значит положить её поверх
       заголовка — заголовок «Победа» так и пропадал за сундуком. */
    flex: 0 0 auto;
}

/*
 * Высота картинки считается и от экрана.
 *
 * Жёсткие 180px на телефоне в 640 съедали треть окна, и сводке боя
 * оставалось две строки с прокруткой. Четверть высоты экрана — та же
 * картинка на большом телефоне и заметно скромнее на маленьком.
 */
.tam-modal__art img {
    max-width: 100%;
    max-height: min(180px, 24vh);
    object-fit: contain;
    filter: drop-shadow(var(--ui-art-shadow-lg));
}

/* Свет за картинкой — часть материала окна, а не отдельный эффект. */
.tam-modal__art::before {
    content: "";
    position: absolute;
    width: 78%;
    height: 78%;
    border-radius: 50%;
    background: radial-gradient(circle, color-mix(in srgb, var(--ui-gold) 22%, transparent) 0%, transparent 70%);
    pointer-events: none;
}

/* ----- Текст ------------------------------------------------------------- */

.tam-modal__body {
    display: flex;
    flex-direction: column;
    gap: var(--ui-space-2);
    min-height: 0;
    /* §371: длинное содержимое прокручивается внутри окна, а не растягивает
       его за пределы экрана. */
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--ui-ivory) 22%, transparent) transparent;
}

.tam-modal__body::-webkit-scrollbar { width: 4px; }
.tam-modal__body::-webkit-scrollbar-track { background: transparent; }

.tam-modal__body::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--ui-ivory) 22%, transparent);
    border-radius: var(--ui-radius-pill);
}

/*
 * Подсказка «ниже есть ещё» — та же, что у окон старого поколения
 * (`modal.css`). Тело, обрезанное ровно по кромке над кнопкой, читается
 * как конец списка: под ним оставались невидимыми ещё восемь строк, и
 * игрок про них не узнавал. Класс ставит `modal-framework.js` по замеру.
 */
.tam-modal__body.is-scrollable {
    -webkit-mask-image: linear-gradient(180deg, #000 0, #000 calc(100% - 24px), transparent 100%);
    mask-image: linear-gradient(180deg, #000 0, #000 calc(100% - 24px), transparent 100%);
}

.tam-modal__body.is-scrollable.is-at-end {
    -webkit-mask-image: none;
    mask-image: none;
}

.tam-modal__title {
    /* Поля по бокам — место для крестика: без них длинный заголовок
       («Заявки на вступление») упирался в кнопку закрытия и последняя
       буква пряталась под ней. */
    padding: 0 var(--ui-space-4);
    font-family: var(--ui-font-title);
    font-weight: var(--ui-weight-title);
    font-size: var(--ui-size-title);
    line-height: 1.15;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    color: var(--ui-text-main);
    text-shadow: var(--ui-title-shadow);
}

.tam-modal__text {
    font-family: var(--ui-font-main);
    font-weight: var(--ui-weight-body);
    font-size: var(--ui-size-body);
    line-height: 1.45;
    color: var(--ui-text-muted);
}

.tam-modal__content {
    display: block;
    text-align: left;
}

.tam-modal__content:empty { display: none; }

/* ----- Кнопки ------------------------------------------------------------ */

/*
 * Кнопки не сжимаются и не прокручиваются вместе с содержимым.
 *
 * Они — единственный выход из окна, и прокручивать до них длинную сводку
 * боя игрок не обязан: прокручивается тело, кнопки стоят на месте.
 */
.tam-modal__actions {
    display: grid;
    gap: var(--ui-space-2);
    flex: 0 0 auto;
}

/* Две короткие кнопки встают в строку, длинные — друг под другом. */
.tam-modal__actions--row {
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
}

/* ==========================================================================
   ТИПЫ
   ========================================================================== */

.tam-modal-layer[data-type="small"] .tam-modal {
    max-width: 320px;
    padding: var(--ui-space-4);
    gap: var(--ui-space-2);
}

.tam-modal-layer[data-type="small"] .tam-modal__title {
    font-size: var(--ui-size-section);
}

.tam-modal-layer[data-type="hero"] .tam-modal { max-width: 440px; }
.tam-modal-layer[data-type="hero"] .tam-modal__art img { max-height: 230px; }

/*
 * FULLSCREEN MOMENT: окно занимает экран целиком — регион, босс, сюжет.
 * Графика уходит вверх и на весь кадр, текст и действие остаются внизу,
 * чтобы палец дотягивался и картинку не закрывал.
 */
.tam-modal-layer[data-type="fullscreen"] {
    padding: 0;
}

.tam-modal-layer[data-type="fullscreen"] .tam-modal {
    max-width: none;
    width: 100%;
    height: 100%;
    max-height: none;
    border-radius: 0;
    border: 0;
    justify-content: flex-end;
    padding: calc(var(--ui-space-6) + var(--tam-inset-top, 0px)) var(--ui-space-5)
             calc(var(--ui-space-6) + var(--tam-inset-bottom, 0px));
    box-shadow: none;
}

.tam-modal-layer[data-type="fullscreen"] .tam-modal__art {
    position: absolute;
    inset: 0;
    margin: 0;
    align-items: center;
}

.tam-modal-layer[data-type="fullscreen"] .tam-modal__art img {
    width: 100%;
    height: 100%;
    max-height: none;
    object-fit: cover;
}

/* Тёмная растяжка снизу: без неё текст ложится на светлые места рисунка. */
.tam-modal-layer[data-type="fullscreen"] .tam-modal__art::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--ui-bg-dark) 15%, transparent) 0%,
        color-mix(in srgb, var(--ui-bg-dark) 55%, transparent) 52%,
        color-mix(in srgb, var(--ui-bg-deep) 92%, transparent) 100%);
}

.tam-modal-layer[data-type="fullscreen"] .tam-modal__body,
.tam-modal-layer[data-type="fullscreen"] .tam-modal__actions {
    position: relative;
    z-index: 2;
}

.tam-modal-layer[data-type="fullscreen"] .tam-modal__close {
    top: calc(var(--ui-space-4) + var(--tam-inset-top, 0px));
    right: var(--ui-space-4);
}

/* ==========================================================================
   КАТЕГОРИИ

   §62: у каждой категории свой визуальный язык. Меняется свет и кант —
   не форма: рамка остаётся одной и той же дорогой панелью.
   ========================================================================== */

/* REWARD — победа и награда: золотой кант и тёплое свечение. */
.tam-modal-layer[data-category="reward"] .tam-modal {
    border-color: color-mix(in srgb, var(--ui-gold) 42%, transparent);
    box-shadow: var(--ui-edge-panel), var(--ui-shadow-deep),
                0 0 42px color-mix(in srgb, var(--ui-gold) 16%, transparent), var(--ui-inner-top);
}

/* CHARACTER — знакомство с героем: янтарный свет снизу, как рампа сцены. */
.tam-modal-layer[data-category="character"] .tam-modal__art::before {
    background: radial-gradient(circle, color-mix(in srgb, var(--ui-gold) 28%, transparent) 0%, transparent 72%);
}

/*
 * DISCOVERY — находка. §66 прямо требует тишины: ни конфетти, ни лучей,
 * только тёмный кадр и пятно света на предмете. Праздник здесь всё портит.
 */
.tam-modal-layer[data-category="discovery"] .tam-modal-backdrop {
    background: color-mix(in srgb, var(--ui-bg-deep) 82%, transparent);
}

.tam-modal-layer[data-category="discovery"] .tam-modal__art::before {
    width: 62%;
    height: 62%;
    background: radial-gradient(circle, color-mix(in srgb, var(--ui-ivory) 26%, transparent) 0%, transparent 68%);
}

/* STORY — сюжет: кремовая панель, как страница досье. */
.tam-modal-layer[data-category="story"] .tam-modal__title {
    color: var(--ui-text-ivory);
    /* Тёмная тень нужна светлому тексту на тёмной панели; на кремовой она
       превращается в грязь под буквами. */
    text-shadow: none;
}
.tam-modal-layer[data-category="story"] .tam-modal__text  { color: var(--ui-panel-dark); }

/* BOSS — приглушённый красный кант; кричащего красного в игре нет. */
.tam-modal-layer[data-category="boss"] .tam-modal {
    border-color: color-mix(in srgb, var(--ui-red) 38%, transparent);
    box-shadow: var(--ui-edge-danger), var(--ui-shadow-deep), var(--ui-inner-top);
}

/* COMMERCIAL — предложение: золото сдержанное, окно меньше праздника. */
.tam-modal-layer[data-category="commercial"] .tam-modal {
    border-color: color-mix(in srgb, var(--ui-gold) 30%, transparent);
}

/* SYSTEM — служебное сообщение: без свечения и без картинки-героя. */
.tam-modal-layer[data-category="system"] .tam-modal__art::before { display: none; }

/* CINEMATIC — сцена: чёрные поля сверху и снизу, как в кино. */
.tam-modal-layer[data-category="cinematic"] .tam-modal-backdrop {
    background: rgba(0, 0, 0, 0.88);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.tam-modal-layer[data-category="cinematic"] .tam-modal__title {
    font-size: var(--ui-size-title);
    letter-spacing: 0.04em;
}

/* ==========================================================================
   ИТОГ БОЯ: ПОБЕДА И ПОРАЖЕНИЕ

   §66 и §67 просят у двух исходов разные лица, а не одну рамку с разным
   заголовком. Признак `data-result` ставит `battle-result.js` по ответу
   сервера — до ответа его нет, и окно ожидания остаётся нейтральным.

   Меняется свет вокруг героя и кант панели; форма окна одна и та же —
   иначе победа и поражение перестанут читаться как один экран игры.
   ========================================================================== */

/*
 * Смена картинки — событие.
 *
 * Герой не подменяется молча: он выскакивает с перелётом, как выскакивает
 * плитка награды. Без этого игрок, смотрящий на бегущий счёт, не замечал
 * подмены вовсе.
 */
.tam-modal__art.is-fresh img {
    animation: tamArtPop var(--tam-t-sheet) cubic-bezier(0.2, 1.5, 0.4, 1) both;
}

@keyframes tamArtPop {
    0%   { transform: scale(0.72) translateY(10px); opacity: 0; }
    100% { transform: scale(1) translateY(0); opacity: 1; }
}

/* ПОБЕДА — герой крупнее, за ним золотой венец лучей (§66, §46). */
.tam-modal-layer[data-result="victory"] .tam-modal__art img {
    max-height: min(230px, 30vh);
    /* Свечение и лучи — абсолютные, то есть по умолчанию лежат ПОВЕРХ
       обычной картинки. Герой поднимается над ними своим слоем: лучи
       обязаны идти из-за его спины, а не по его лицу. */
    position: relative;
    z-index: 1;
}

.tam-modal-layer[data-result="victory"] .tam-modal__art::before {
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, color-mix(in srgb, var(--ui-gold) 34%, transparent) 0%, transparent 68%);
}

.tam-modal-layer[data-result="victory"] .tam-modal__art::after {
    content: "";
    position: absolute;
    width: 240px;
    height: 240px;
    border-radius: 50%;
    /* Лучи рисуются повтором конического градиента: двенадцать клиньев без
       единого лишнего узла в разметке (§84 — во время боя и сразу после
       него важнее кадры, чем декорация). */
    background: repeating-conic-gradient(
        color-mix(in srgb, var(--ui-gold) 16%, transparent) 0deg 8deg,
        transparent 8deg 30deg);
    -webkit-mask-image: radial-gradient(circle, #000 20%, transparent 72%);
    mask-image: radial-gradient(circle, #000 20%, transparent 72%);
    animation: tamWinRays 26s linear infinite;
    pointer-events: none;
}

@keyframes tamWinRays {
    0%   { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/*
 * ПОРАЖЕНИЕ — свет холодный и слабый, кант не золотой (§67).
 *
 * Но панель остаётся той же дорогой панелью, а герой — тем же героем под
 * дождевой тучей: §67 отдельно просит не делать проигрыш унылым. Серого
 * фильтра на картинке здесь нет намеренно — обесцвеченный герой читается
 * как «выключено», а не как «не повезло».
 */
.tam-modal-layer[data-result="defeat"] .tam-modal {
    border-color: color-mix(in srgb, var(--ui-rar-common) 34%, transparent);
    box-shadow: var(--ui-edge-panel), var(--ui-shadow-deep), var(--ui-inner-top);
}

.tam-modal-layer[data-result="defeat"] .tam-modal__art::before {
    width: 66%;
    height: 66%;
    background: radial-gradient(circle, color-mix(in srgb, var(--ui-rar-common) 20%, transparent) 0%, transparent 70%);
}

/* Ответа нет — света нет вовсе: показывать нечего, и праздновать нечего. */
.tam-modal-layer[data-result="unknown"] .tam-modal {
    border-color: color-mix(in srgb, var(--ui-rar-common) 24%, transparent);
    box-shadow: var(--ui-edge-panel), var(--ui-shadow-deep), var(--ui-inner-top);
}

.tam-modal-layer[data-result="unknown"] .tam-modal__art::before { display: none; }

@media (prefers-reduced-motion: reduce) {
    .tam-modal__art.is-fresh img,
    .tam-modal-layer[data-result="victory"] .tam-modal__art::after {
        animation: none;
    }
}

/* ==========================================================================
   ПОБЕДА НАД БОССОМ (§68 ТЗ)

   «Особенная modal/screen: графика босса, награда, артефакт или сундук,
   крупный эффект». До этого встреча заканчивалась страницей досье —
   кремовой панелью категории `story` с портретом, абзацем и двумя
   репликами. Ровно тем же окном игра рассказывает про находку в
   лаборатории: разницы между «нашёл бумажку» и «свалил босса» не было
   никакой.

   Признак `data-scene="boss-win"` ставит `boss.service.js` ПОСЛЕ открытия
   окна, поверх категории `boss`. Категория здесь не подходит одна:
   `boss` — это встреча ПЕРЕД боем, тревожный красный кант; победа над
   ним — праздник, и она обязана отличаться от угрозы.

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

.tam-modal-layer[data-scene="boss-win"] .tam-modal {
    /* Кант золотой, а не красный: красным подписана угроза, а не трофей. */
    border-color: color-mix(in srgb, var(--ui-gold) 46%, transparent);
    box-shadow: var(--ui-edge-panel), var(--ui-shadow-deep),
                0 0 52px color-mix(in srgb, var(--ui-gold) 20%, transparent), var(--ui-inner-top);
}

/* Босс крупнее обычного героя окна: он и есть главное событие сцены. */
.tam-modal-layer[data-scene="boss-win"] .tam-modal__art img {
    max-height: min(250px, 32vh);
    position: relative;
    z-index: 1;
    animation: tamBossWinDrop var(--tam-t-sheet) cubic-bezier(0.2, 1.4, 0.4, 1) both;
}

.tam-modal-layer[data-scene="boss-win"] .tam-modal__art::before {
    width: 104%;
    height: 104%;
    background: radial-gradient(circle,
        color-mix(in srgb, var(--ui-gold) 36%, transparent) 0%,
        color-mix(in srgb, var(--ui-purple-light) 24%, transparent) 46%,
        transparent 72%);
}

/*
 * Венец лучей и вспышка — один псевдоэлемент на оба.
 *
 * Лучи вращаются постоянно, вспышка проходит один раз: кольцо
 * разлетается из-за спины босса в первые полсекунды и больше не
 * повторяется. Второй анимации на том же слое не бывает, поэтому
 * расширение кольца отдано `box-shadow` — он анимируется в той же
 * последовательности, что и поворот.
 */
.tam-modal-layer[data-scene="boss-win"] .tam-modal__art::after {
    content: "";
    position: absolute;
    width: 260px;
    height: 260px;
    border-radius: 50%;
    background: repeating-conic-gradient(
        color-mix(in srgb, var(--ui-gold) 20%, transparent) 0deg 7deg,
        color-mix(in srgb, var(--ui-rar-epic) 14%, transparent) 7deg 14deg,
        transparent 14deg 32deg);
    -webkit-mask-image: radial-gradient(circle, #000 18%, transparent 74%);
    mask-image: radial-gradient(circle, #000 18%, transparent 74%);
    animation: tamBossWinRays 24s linear infinite,
               tamBossWinBurst 0.9s ease-out both;
    pointer-events: none;
}

@keyframes tamBossWinRays {
    0%   { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Вспышка: кольцо разлетается и гаснет — «крупный эффект» из §68. */
@keyframes tamBossWinBurst {
    0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--ui-gold) 55%, transparent); }
    100% { box-shadow: 0 0 0 120px transparent; }
}

/* Босс падает в кадр сверху — он только что проиграл, а не позирует. */
@keyframes tamBossWinDrop {
    0%   { opacity: 0; transform: translateY(-26px) scale(0.86) rotate(-4deg); }
    100% { opacity: 1; transform: translateY(0) scale(1) rotate(0deg); }
}

@media (prefers-reduced-motion: reduce) {
    .tam-modal-layer[data-scene="boss-win"] .tam-modal__art img,
    .tam-modal-layer[data-scene="boss-win"] .tam-modal__art::after {
        animation: none;
    }
}

/* ==========================================================================
   СОСТОЯНИЯ: ЗАГРУЗКА, ПУСТО, ОШИБКА

   §385-386: пустой ответ сервера не должен превращаться в пустую рамку, а
   на загрузку карточек ставится skeleton, а не крутящийся спиннер посреди
   пустого экрана.
   ========================================================================== */

.tam-modal__skeleton {
    display: grid;
    gap: var(--ui-space-2);
    padding: var(--ui-space-2) 0;
}

.tam-modal__skeleton-bar {
    height: 16px;
    border-radius: var(--ui-radius-sm);
    background: linear-gradient(90deg,
        color-mix(in srgb, var(--ui-ivory) 6%, transparent) 0%,
        color-mix(in srgb, var(--ui-ivory) 16%, transparent) 50%,
        color-mix(in srgb, var(--ui-ivory) 6%, transparent) 100%);
    background-size: 220% 100%;
    animation: tamSkeleton 1.4s ease-in-out infinite;
}

.tam-modal__skeleton-bar--tall { height: 56px; }
.tam-modal__skeleton-bar--short { width: 60%; margin: 0 auto; }

@keyframes tamSkeleton {
    0%   { background-position: 120% 0; }
    100% { background-position: -120% 0; }
}

/* Пустое и ошибочное состояния окна — общий блок §56 (`ui-empty`): герой,
   заголовок, объяснение. Окно — тот же экран, и «Новых писем нет» обязано
   выглядеть так же, как пустая полка скинов. Разметку собирает
   `TAM.UI.emptyHtml`, здесь — только посадка блока в тело окна. */
.tam-modal__state {
    display: grid;
    justify-items: center;
    gap: var(--ui-space-2);
    padding: var(--ui-space-2) 0;
    color: var(--ui-text-muted);
}

/* Блок в теле окна тянется во всю ширину: при `justify-items: center` он
   иначе сжимается до длины подписи и встаёт узкой колонкой посередине. */
.tam-modal__state .ui-empty { width: 100%; }

/* Крот в окне мельче, чем в разделе: тело окна ниже страницы, и фигура в
   132px съедала место у кнопки выхода. */
.tam-modal__state .ui-empty__art { width: 104px; height: 104px; }
.tam-modal__state .ui-empty__art img { width: 92px; height: 92px; }

/* Значок остался запасной веткой — на случай, когда библиотека
   компонентов не поднялась. Отбор по классу, иначе правило село бы и на
   замок внутри общего блока. */
.tam-modal__state-icon svg {
    width: 42px;
    height: 42px;
    color: var(--ui-text-faint);
}

.tam-modal-layer.is-error .tam-modal__state-icon svg { color: var(--ui-red-light); }

.tam-modal__state-text {
    font-family: var(--ui-font-main);
    font-weight: var(--ui-weight-body);
    font-size: var(--ui-size-body);
    line-height: 1.4;
}

/* ==========================================================================
   СПИСОК НАГРАД

   Объединённая выдача MomentDirector: вместо пяти окон подряд одно, где
   каждая награда — строка списка из библиотеки компонентов.
   ========================================================================== */

.tam-modal__rewards {
    display: grid;
    gap: var(--ui-space-2);
}

.tam-modal__rewards .ui-row__icon img {
    object-fit: contain;
    background: transparent;
}

/* ==========================================================================
   УЗКИЙ ЭКРАН И ПРОСЬБА УМЕНЬШИТЬ ДВИЖЕНИЕ
   ========================================================================== */

@media (max-width: 400px) {

    .tam-modal-layer { padding: var(--ui-space-4) var(--ui-space-3)
                                calc(var(--ui-space-4) + var(--tam-inset-bottom, 0px)); }
    .tam-modal { padding: var(--ui-space-4); }
    .tam-modal__title { font-size: var(--ui-size-section); }
    .tam-modal__art img { max-height: 150px; }
    .tam-modal-layer[data-type="hero"] .tam-modal__art img { max-height: 190px; }
}

@media (prefers-reduced-motion: reduce) {

    .tam-modal-layer,
    .tam-modal { transition: none; }
    .tam-modal { transform: none; }
    .tam-modal__skeleton-bar { animation: none; }
}