/* ==========================================================================
   HOME — кабинет как живая сцена (§274-281)

   Экран состоит из двух частей: сцена и одна карточка «что делать».
   Сцена — нарисованная комната, поверх которой лежат слои состояния
   мира, персонаж и области нажатия на предметах.

   Главное правило файла: внутри сцены всё позиционируется долями кадра,
   которые приходят с сервера в атрибуте style. Здесь задаётся только
   оформление — размеры в пикселях внутри сцены сломали бы совпадение
   области нажатия с нарисованным предметом на другой ширине экрана.

   Второе правило: кадр обрезается сверху. Вертикальная картинка в
   доступную высоту не влезает никогда, а нужное нарисовано в нижних двух
   третях, поэтому сцена прижата к низу и лишний потолок уходит под
   обрезку.
   ========================================================================== */

.trumpamole__home {
    display: flex;
    flex-direction: column;
    gap: var(--space-2, 10px);
    /*
     * Ровно содержимое коробки страницы, ни пикселем больше.
     *
     * Раньше здесь стояла высота всей страницы плюс собственный отступ
     * под меню — а такой же отступ уже даёт `.page`. Двойной счёт
     * добавлял главной около ста двадцати лишних пикселей, и она
     * прокручивалась, что §6 редизайна запрещает прямо.
     */
    min-height: calc(var(--tam-viewport-h, 100vh)
                     - var(--tam-page-top, 144px)
                     - var(--tam-nav-h, 68px)
                     - 34px
                     - var(--safe-bottom, 0px));
    padding: 0 var(--space-2, 10px);
    box-sizing: border-box;
}

/* ----- Сцена -------------------------------------------------------------
   Коробка занимает всю оставшуюся высоту и обрезает кадр; сам кадр внутри
   держит пропорции картинки и стоит на её нижнем крае. */
/* Материал коробки — §6 рамы: та же кромка и та же грань, что у карточки
   под ней. Здесь только размер и обрезка. */
.trumpamole__home-scene {
    position: relative;
    flex: 1 1 auto;
    min-height: 280px;
    overflow: hidden;
}

.trumpamole__home-art {
    position: absolute;
    /*
     * Кадр стоит по центру коробки, а не прижат к её левому краю.
     *
     * Ниже стоят пропорции и минимальная высота: на узком экране кадр
     * выходит за коробку по ширине (на 320px — 321 при 284 доступных).
     * При `left: 0; right: 0` весь лишок уходил вправо, и правый столбец
     * макета срезался целиком: «Аркада» теряла четверть постройки и
     * подпись («АРКА…»), а клан стоял вплотную к кромке. Центр делит
     * лишок пополам, и оба края остаются в кадре.
     */
    left: 50%;
    transform: translateX(-50%);
    /* Без ширины по коробке кадр считает её из одной высоты и на обычном
       экране становится уже сцены — по бокам открывались полосы панели. */
    min-width: 100%;
    bottom: 0;
    /*
     * Пропорции мастер-фона штаба. Кадр стоит на нижнем крае коробки:
     * весь макет владений нарисован внизу, а лишний потолок уходит под
     * обрезку сверху — обратное решение резало бы здания.
     */
    aspect-ratio: 720 / 1024;
    /* Ниже минимума здания мельчают так, что перестают читаться; тогда
       кадр вылезает вверх за обрезку — это дешевле, чем нечитаемый
       макет. */
    min-height: 100%;
}

.trumpamole__home-layer {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
}

/* Слой-предмет: центр задан долями, размер — долей ширины кадра. */
.trumpamole__home-layer--object {
    inset: auto;
    height: auto;
    object-fit: contain;
    transform: translate(-50%, -50%);
}

/* Свечение фрагмента ядра — единственная анимация слоя. Медленная и
   без смены положения: сцена не должна мигать. */
.trumpamole__home-layer.is-glow {
    animation: tamHomeGlow 4.6s ease-in-out infinite;
}

@keyframes tamHomeGlow {
    0%, 100% {
        filter: drop-shadow(0 0 var(--ui-glow-sm)
            color-mix(in srgb, var(--ui-gold-light) 35%, transparent));
    }
    50% {
        filter: drop-shadow(0 0 var(--ui-glow-lg)
            color-mix(in srgb, var(--ui-gold-light) 75%, transparent));
    }
}

/* ----- Персонаж ---------------------------------------------------------- */
.trumpamole__home-hero {
    position: absolute;
    transform: translateX(-50%);
    width: auto;
    filter: drop-shadow(var(--ui-art-shadow-md));
    /* Нажатие ловит сам персонаж, но не мешает предметам под ним: у него
       нет прямоугольного фона, а прозрачные углы прикрывали бы стол. */
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: transform var(--tam-t-state) ease;
}

/* Толчок героя снимается из `mvp/views/home.view.js` через 420 мс, поэтому
   ступень взята та, что даёт ровно это число: короче — и класс висел бы на
   замершем герое, длиннее — движение обрубит на середине. */
.trumpamole__home-hero.is-nudge {
    animation: tamHomeNudge var(--tam-t-sheet) ease;
}

@keyframes tamHomeNudge {
    0%   { transform: translateX(-50%) translateY(0) rotate(0); }
    35%  { transform: translateX(-50%) translateY(-6px) rotate(-1.5deg); }
    70%  { transform: translateX(-50%) translateY(0) rotate(1deg); }
    100% { transform: translateX(-50%) translateY(0) rotate(0); }
}

/* ----- Предметы ----------------------------------------------------------
   Область нажатия невидима, видны кромка при нажатии, подпись и точка
   индикатора. Обводить каждый предмет постоянной рамкой значило бы
   превратить нарисованную комнату в схему. */
.trumpamole__home-spot {
    position: absolute;
    /*
     * Порядок глубины задаётся явно, а не порядком в разметке.
     *
     * Арена стоит в макете ближе всех, и её молоток вылезает за свою
     * коробку вверх — прямо на подпись башни, которая рисуется раньше.
     * На 320px от подписи оставалось «TOWE». Постройки получают первый
     * слой, арена — нулевой: рукоять молотка уходит под подпись башни,
     * а сама арена ничего не теряет, потому что с остальными
     * постройками её коробка не пересекается.
     */
    z-index: 1;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

.trumpamole__home-spot-ring {
    position: absolute;
    inset: -4px;
    border-radius: var(--ui-radius-md);
    border: 2px solid transparent;
    background: transparent;
    transition: border-color var(--tam-t-state) ease, background-color var(--tam-t-state) ease;
    pointer-events: none;
}

/* ----- Здание на макете --------------------------------------------------
   Шесть направлений игры — настоящие постройки, а не одинаковые кнопки
   (§9 редизайна). Картинка вписывается в отведённую долю кадра и стоит на
   её нижней кромке: здание должно касаться подставки, а не парить над ней.
   Рамки у здания нет — её роль играет сам силуэт. */
.trumpamole__home-spot-art {
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: bottom center;
    transform: translateX(-50%);
    filter: drop-shadow(var(--ui-art-shadow-sm));
    transition: transform var(--tam-t-tap, 0.1s) var(--tam-ease-out, ease),
                filter var(--tam-t-tap, 0.1s) ease;
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
}

.trumpamole__home-spot[data-kind="building"]:active .trumpamole__home-spot-art {
    transform: translateX(-50%) translateY(2px) scale(0.96);
    filter: drop-shadow(var(--ui-art-shadow-pin)) brightness(1.12);
}

@media (hover: hover) {

    .trumpamole__home-spot[data-kind="building"]:hover .trumpamole__home-spot-art {
        transform: translateX(-50%) translateY(-3px);
        filter: drop-shadow(var(--ui-art-shadow-md)) brightness(1.06);
    }
}

/* У здания рамка нажатия не нужна: постройка сама показывает нажатие. */
.trumpamole__home-spot[data-kind="building"] .trumpamole__home-spot-ring {
    display: none;
}

/*
 * Арена — главная цель экрана (§9, §76).
 *
 * Она и крупнее прочих по данным, и единственная, кому позволено тихо
 * покачиваться: пять качающихся зданий превратили бы макет в мельтешение.
 */
.trumpamole__home-spot[data-code="arena"] {
    z-index: 0;
}

.trumpamole__home-spot[data-code="arena"] .trumpamole__home-spot-art {
    animation: tamHomeArena var(--tam-t-ambient) ease-in-out infinite;
    filter: drop-shadow(var(--ui-art-shadow-md))
            drop-shadow(0 0 var(--ui-glow-md) color-mix(in srgb, var(--ui-gold) 30%, transparent));
}

@keyframes tamHomeArena {
    0%, 100% { transform: translateX(-50%) translateY(0)    rotate(0); }
    50%      { transform: translateX(-50%) translateY(-3px) rotate(-0.8deg); }
}

/* Закрытое здание обесцвечивается вместе с притемнением области: §49
   запрещает обозначать замок одной лишь прозрачностью. */
.trumpamole__home-spot.is-locked .trumpamole__home-spot-art {
    filter: saturate(0.2) brightness(0.55) drop-shadow(var(--ui-art-shadow-sm));
    animation: none;
}

.trumpamole__home-spot:active .trumpamole__home-spot-ring {
    border-color: color-mix(in srgb, var(--ui-gold-light) 85%, transparent);
    background: color-mix(in srgb, var(--ui-gold-light) 16%, transparent);
}

@media (hover: hover) {

    .trumpamole__home-spot:hover .trumpamole__home-spot-ring {
        border-color: color-mix(in srgb, var(--ui-gold-light) 50%, transparent);
    }
}

/* Подпись под предметом: маленькая, но всегда видимая. Без неё экран
   превращается в поиск предметов, что §280 запрещает прямо.
   Материал — чип §10 рамы; здесь место, размер и набор. */
.trumpamole__home-spot-label {
    position: absolute;
    bottom: -15px;
    left: 50%;
    transform: translateX(-50%);
    /* Подпись шире своего предмета, но не настолько, чтобы дотянуться до
       соседнего: у сейфа и лифта между центрами меньше пятой части
       кадра. */
    max-width: 96px;
    padding: 2px 8px;
    /* Цвет подписи — светлый из чипа §10: на кадре 8 подписи предметов
       кабинета («SHOP», «BRAWLERS», «QUESTS») набраны белым, золото там
       занято значениями и кнопками. */
    font-family: var(--ui-font-condensed), sans-serif;
    font-weight: var(--ui-weight-title);
    font-size: var(--ui-size-small);
    letter-spacing: 0.03em;
    text-transform: uppercase;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.6);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    pointer-events: none;
}

/*
 * Подпись здания живёт внутри его коробки, а не под ней.
 *
 * Здания на макете стоят плотно и заходят друг за друга по глубине;
 * подпись, вынесенная наружу, ложилась бы на соседнюю постройку. Внутри
 * она садится на нижнюю кромку — ровно там, где у постройки основание.
 */
.trumpamole__home-spot[data-kind="building"] .trumpamole__home-spot-label {
    bottom: -2px;
    /* Доля, а не пиксели: на 320px коробка постройки ужимается до 67px, и
       при пределе в 118% «Mole House» не помещался — подпись обрывалась
       многоточием («MOLE HO…»). Полторы коробки хватает самому длинному
       названию во всех пяти языках, а до соседней подписи остаётся
       больше двадцати пикселей. */
    max-width: 150%;
    letter-spacing: 0.04em;
    font-size: var(--ui-size-micro);
}

/* У главной цели подпись крупнее — она и есть CTA экрана; золото ей
   даёт §17 рамы. */
.trumpamole__home-spot[data-code="arena"] .trumpamole__home-spot-label {
    font-size: var(--ui-size-small);
    padding: 3px 12px;
}

/* Точка «здесь тебя ждут». Одна и та же у всех предметов: разноцветные
   значки на семи предметах читаются как ошибка, а не как подсказка. */
.trumpamole__home-spot-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    animation: tamHomeBadge 2.4s ease-in-out infinite;
    pointer-events: none;
}

@keyframes tamHomeBadge {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.18); }
}

.trumpamole__home-spot-lock {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    color: var(--ui-ivory-dark);
    filter: drop-shadow(var(--ui-art-shadow-pin));
    pointer-events: none;
}

/* Собственный display перебивает браузерное правило для [hidden], и без
   этой строки замок горел на всех предметах разом, включая открытые. */
.trumpamole__home-spot-lock[hidden],
.trumpamole__home-spot-badge[hidden] {
    display: none;
}

/* Закрытый предмет остаётся в комнате: он притемнён, но не вырезан.
   Серый квадрат на его месте выглядел бы как незагрузившаяся картинка. */
.trumpamole__home-spot.is-locked {
    cursor: default;
}

/* Притемнение мягкое и с растушёвкой к краям: сплошной серый
   прямоугольник поверх нарисованной комнаты читается как ошибка
   отрисовки, а не как замок. */
.trumpamole__home-spot.is-locked .trumpamole__home-spot-ring {
    background: radial-gradient(ellipse at center,
        color-mix(in srgb, var(--ui-bg-deep) 72%, transparent) 0%,
        color-mix(in srgb, var(--ui-bg-deep) 44%, transparent) 62%,
        transparent 100%);
    border-color: transparent;
}

/* Замок метит и подпись: закрытая постройка теряет золото и уходит в
   серый — состояние читается буквой и цветом, а не одной прозрачностью. */
.trumpamole__home-spot.is-locked .trumpamole__home-spot-label {
    color: var(--ui-ivory-deep);
}

/* ----- Реплика кабинета -------------------------------------------------- */
/*
 * Реплика висит вверху сцены, а не внизу.
 *
 * Внизу теперь стоит макет владений: реплика закрывала собой арену,
 * скины и развлечения — то есть половину направлений экрана. Наверху
 * над ней только стена и окно.
 */
/* Материал реплики — §17 рамы; здесь место, размер и появление. */
.trumpamole__home-bubble {
    position: absolute;
    left: 50%;
    top: 10px;
    transform: translate(-50%, -8px);
    max-width: 84%;
    padding: 10px 14px;
    font-family: var(--ui-font-main), sans-serif;
    font-size: var(--ui-size-body);
    line-height: 1.35;
    text-align: center;
    opacity: 0;
    transition: opacity var(--tam-t-panel) ease, transform var(--tam-t-panel) ease;
    pointer-events: none;
}

.trumpamole__home-bubble.is-on {
    opacity: 1;
    transform: translate(-50%, 0);
}

/* ----- Карточка Current Objective ----------------------------------------
   Одна на экран. Крупная кнопка справа, значок слева, между ними текст. */
/*
 * Раскладка в две строки, а не в три колонки.
 *
 * Колонками карточка не помещалась на телефоне: значок 44px, кнопка в
 * 40% ширины, и тексту оставалось около 150px — заголовок обрывался
 * многоточием («Сейф ж…»), а подпись самой кнопки не влезала в кнопку
 * («ТКРЫТЬ СЕЙ»). Обрезанная главная кнопка экрана — это не мелочь
 * вёрстки, это единственное действие, которое игра предлагает.
 *
 * В референсе (кадр 1) главное действие тоже отдельной широкой кнопкой
 * под текстом, а не сбоку от него.
 */
/* Материал карточки, значка и заголовка — §17 рамы. */
.trumpamole__home-objective {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: var(--space-2, 10px);
    flex: 0 0 auto;
    padding: var(--space-2, 10px) var(--space-3, 14px);
    border-radius: var(--ui-radius-lg);
}

.trumpamole__home-objective-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border-radius: var(--ui-radius-md);
}

.trumpamole__home-objective-text {
    flex: 1 1 auto;
    min-width: 0;
}

/*
 * Заголовок переносится, а не обрывается.
 *
 * Многоточие было мерой против трёх строк, но на телефоне съедало уже
 * второе слово: «Сейф ж…» не сообщает ничего. Двух строк карточке
 * хватает, третья отрезается по-прежнему.
 */
.trumpamole__home-objective-title {
    font-family: var(--ui-font-title), sans-serif;
    font-size: var(--ui-size-body);
    font-weight: var(--ui-weight-section);
    line-height: 1.2;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.trumpamole__home-objective-body {
    margin-top: 2px;
    font-family: var(--ui-font-main), sans-serif;
    font-size: var(--ui-size-small);
    line-height: 1.3;
    color: var(--ui-text-muted);
    /* Две строки: третья вытесняет сцену, а односложная карточка не
       объясняет, зачем идти. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/*
 * Главное действие — во всю ширину карточки, второй строкой.
 *
 * Ни `max-width`, ни `nowrap` с многоточием кнопке не нужны: она больше
 * не делит строку с текстом и вмещает подпись любого из пяти языков —
 * немецкий «SAFE ÖFFNEN» в прежние 40% не помещался никогда.
 */
/* Высота, поля и набор кнопки — §17 рамы: она подписана тем же плотным
   капслоком, что и остальные золотые действия игры. */
.trumpamole__home-cta {
    grid-column: 1 / -1;
    width: 100%;
    margin-top: var(--space-1, 6px);
    text-align: center;
}

/* ----- Загрузка -----------------------------------------------------------
   Ожидание повторяет раскладку самой главной: та же высота коробки, та же
   сцена и та же карточка под ней. Своей высоты у скелета быть не должно —
   на прежней формуле он был на 34px выше страницы, и карточка ожидания
   наполовину уходила под нижнее меню. Материал — §17 рамы. */
.trumpamole__home-skeleton {
    display: flex;
    flex-direction: column;
    gap: var(--space-2, 10px);
    min-height: calc(var(--tam-viewport-h, 100vh)
                     - var(--tam-page-top, 144px)
                     - var(--tam-nav-h, 68px)
                     - 34px
                     - var(--safe-bottom, 0px));
    padding: 0 var(--space-2, 10px);
    box-sizing: border-box;
}

.trumpamole__home-skeleton-scene,
.trumpamole__home-skeleton-card {
    animation: tamHomeShimmer 1.5s ease-in-out infinite;
}

.trumpamole__home-skeleton-scene { flex: 1 1 auto; min-height: 280px; }
.trumpamole__home-skeleton-card  { flex: 0 0 auto; height: 74px; }

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

/* ----- Отказ --------------------------------------------------------------
   Своей вёрстки у отказа больше нет: главная берёт общий рисованный блок
   `.ui-empty` (§56-57 ТЗ), тот же, что задания, друзья и рейтинг. Здесь —
   только то, чего у общего блока нет: он занимает место сцены целиком, а
   не жмётся к верху страницы. Отступ кнопки приходит из `.ui-empty__cta`. */
.trumpamole__home > .ui-empty {
    flex: 1 1 auto;
    justify-content: center;
}

/* ----- Узкий экран --------------------------------------------------------
   На 360 px подписи предметов начинают наезжать друг на друга, поэтому
   они мельчают вместе с кадром, а не переносятся. */
@media (max-width: 380px) {

    .trumpamole__home-spot-label {
        font-size: var(--ui-size-micro);
        bottom: -16px;
        padding: 1px 5px;
    }

    .trumpamole__home-objective-title { font-size: 13px; }
    .trumpamole__home-objective-body  { font-size: 11px; }
    .trumpamole__home-objective-icon  { width: 38px; height: 38px; }
}

/* Низкий экран: сцена ужимается первой, карточка остаётся целой —
   без неё экран перестаёт отвечать на вопрос «что делать».
   Окно обрезки становится уже, поэтому кадр опускается сильнее: иначе
   вместо предметов в него попадает потолок. */
@media (max-height: 700px) {

    .trumpamole__home-scene { min-height: 200px; }
    .trumpamole__home-bubble { font-size: var(--ui-size-small); padding: 8px 12px; }

    .trumpamole__home-objective { padding: 6px 10px; gap: 8px; }
    .trumpamole__home-objective-icon { width: 36px; height: 36px; }
    .trumpamole__home-objective-body { -webkit-line-clamp: 1; }
    /* На низком экране заголовок снова в одну строку: место здесь дороже
       второй строки, а кнопка внизу остаётся целой в любом случае. */
    .trumpamole__home-objective-title { -webkit-line-clamp: 1; }
    /* Высоту кнопке задаёт рама (§17) и на низком экране тоже: §49 требует
       крупный тап, а сжимать здесь дешевле сцену. */
    .trumpamole__home-cta { margin-top: 4px; }
}