/* ==========================================================================
   BOSS — встреча с боссом (§29-30, §107-110, этап 25)

   Три слоя, которые здесь описаны, живут в разных местах экрана и
   намеренно не смешаны.

   **Узел на карте.** Опечатанный маркер и значок предупреждения поверх
   него. До первой встречи маркер притемнён: имени у босса нет, и карта
   не должна выдавать его раньше времени (§107).

   **Кинематик и карточка.** Портрет, предупреждение, реплики. Силуэт —
   это тот же рисунок, затемнённый фильтром: второй, «тёмной» картинки
   для этого не рисуют — она разошлась бы с первой при перерисовке.

   **Полоса босса и реакция арены.** Полоса лежит на body под боевым HUD,
   реакция — внутри сцены, чтобы трястись вместе с полем. Точки полосы
   показывают не проценты, а сколько раз ещё придётся достать босса.

   Материал поверхностей приходит из `ui-frame.css`: гнездо портрета и
   сцена кадра — выемки §8, факты и клеймо фазы — чипы §10, полоса
   босса — карточка §6. Здесь остались геометрия, набор и состояния.
   ========================================================================== */

/* ----- Узел карты --------------------------------------------------------
   Маркер босса крупнее обычного: это не «ещё одна дверь хранилища», а
   место, мимо которого нельзя пройти не заметив. */
.trumpamole__map-node.is-boss .trumpamole__map-node-shield {
    width: 62px;
    height: 52px;
    filter: drop-shadow(var(--ui-art-shadow-md));
}

.trumpamole__map-node.is-boss .trumpamole__map-node-label {
    max-width: 84px;
    background: color-mix(in srgb, var(--ui-red-deep) 86%, transparent);
    color: var(--ui-ivory);
}

/* Босс без имени: маркер стоит в тени, подпись приходит с сервера как
   `???`. Замок здесь не нужен — узел открыт, неизвестен только хозяин. */
.trumpamole__map-node.is-boss.is-unknown .trumpamole__map-node-shield {
    filter: brightness(0.55) contrast(1.1) drop-shadow(var(--ui-art-shadow-md));
}

/*
 * Восклицательного знака В УГЛУ у босса больше нет.
 *
 * Он повторял то, что уже нарисовано: у босса весь щит красный, и
 * внутри него стоит тот же самый знак вместо номера. Два одинаковых
 * значка на одном узле вдобавок вылезали за габарит щита и налезали на
 * звёзды соседнего уровня — на ярусе «Золотой резерв» знак босса лежал
 * ровно поверх звёзд уровня 5.
 *
 * Правило оставлено объявлением, а не удалено: разметка узла его
 * по-прежнему строит, и элемент нужно погасить.
 */
.trumpamole__map-node-warn { display: none; }


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

.trumpamole__boss-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--ui-space-3);
}

/* Гнездо портрета — выемка §8 рамы: босс СТОИТ в вырезанной нише, а не
   лежит наклейкой на теле окна. Здесь остаётся только размер. */
.trumpamole__boss-face {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 148px;
    height: 148px;
    overflow: hidden;
}

.trumpamole__boss-face img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/*
 * Силуэт — тот же портрет, погашенный до тени.
 *
 * `brightness(0)` красил фигуру в чистый чёрный, и на тёмной выемке она
 * пропадала целиком: игрок видел пустое гнездо, а не «кто-то там есть».
 * Осталась ступень серого над дном ниши плюс золотой кант по контуру —
 * шляпа и счётная машинка читаются, лицо нет.
 */
.trumpamole__boss-face.is-silhouette img {
    filter:
        brightness(0.16) saturate(0.1)
        drop-shadow(0 0 var(--ui-glow-md) color-mix(in srgb, var(--ui-gold-light) 55%, transparent))
        drop-shadow(0 0 2px color-mix(in srgb, var(--ui-gold) 70%, transparent));
}

.trumpamole__boss-face.is-empty img { display: none; }

/*
 * Предупреждение — красная плашка опасности (§58, §36): единственная
 * красная поверхность окна, и она обязана отличаться от корпуса не
 * только цветом. Фактура тёмной парой, кромка цвета опасности.
 */
.trumpamole__boss-warning {
    display: flex;
    align-items: flex-start;
    gap: var(--ui-space-2);
    padding: var(--ui-space-2) var(--ui-space-3);
    border-radius: var(--ui-radius-md);
    background:
        var(--ui-dirt-wide),
        var(--ui-dirt),
        linear-gradient(180deg,
        color-mix(in srgb, var(--ui-red-deep) 72%, var(--ui-panel-dark)) 0%,
        color-mix(in srgb, var(--ui-red-deep) 38%, var(--ui-bg-dark)) 100%);
    border: var(--ui-border) solid color-mix(in srgb, var(--ui-red-light) 45%, transparent);
    box-shadow: var(--ui-inner-top), 0 3px 0 rgba(0, 0, 0, 0.4);
    color: var(--ui-text-main);
    font-family: var(--ui-font-main);
    font-size: var(--ui-size-body);
    font-weight: 600;
    line-height: 1.35;
}

.trumpamole__boss-warning span:first-child {
    display: flex;
    flex: 0 0 auto;
    color: var(--ui-red-light);
}

.trumpamole__boss-subtitle {
    color: var(--ui-text-muted);
    font-family: var(--ui-font-main);
    font-size: var(--ui-size-body);
    line-height: 1.4;
    text-align: center;
}

.trumpamole__boss-facts {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--ui-space-2);
}

/* Факт встречи — чип §10: значение без нажатия, как «Выполнено» или
   «Монет». Своего корпуса у него здесь нет. */
.trumpamole__boss-fact {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    font-family: var(--ui-font-condensed);
    font-size: var(--ui-size-small);
    font-weight: 700;
}

.trumpamole__boss-fact span:first-child { display: flex; color: var(--ui-gold-light); }

/* ----- Кинематик ---------------------------------------------------------
   Кадр во весь экран: сцена сверху, реплика снизу. Крестика у категории
   `cinematic` нет — сцену листают и пропускают кнопками. */

/*
 * Кадр ставится по центру экрана, а не прижимается к низу.
 *
 * Полноэкранное окно рассчитано на сплошную картинку-фон с текстом внизу,
 * а у кинематика сцена своя: портрет говорящего меняется от кадра к кадру
 * и живёт в теле окна. Прижатый к низу кадр оставлял бы над собой
 * полэкрана пустого поля.
 */
.tam-modal-layer[data-type="fullscreen"][data-category="cinematic"] .tam-modal {
    justify-content: center;
}

.trumpamole__boss-frame {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--ui-space-3);
}

/* Сцена кадра — та же выемка §8, что кадр события и картинка облавы:
   изображение вырезано В окне. Своего градиента здесь нет. */
.trumpamole__boss-frame-stage {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    width: 100%;
    min-height: 190px;
    overflow: hidden;
}

.trumpamole__boss-frame-art {
    max-width: 100%;
    max-height: 240px;
    object-fit: contain;
    animation: tamBossEnter var(--tam-t-sheet) ease-out both;
}

.trumpamole__boss-frame-art[hidden] { display: none; }

/* Кадр без говорящего — общий план: картинка занимает кадр целиком. */
.trumpamole__boss-frame.is-hero .trumpamole__boss-frame-art {
    width: 100%;
    max-height: 260px;
    object-fit: cover;
}

@keyframes tamBossEnter {
    from { transform: translateY(14px) scale(0.96); opacity: 0; }
    to   { transform: none; opacity: 1; }
}

/* Табличка говорящего — золотая: имя героя на кадре читается как
   подпись к реплике. Кегль 12px, поэтому подпись тёмная без обводки
   (§21 рамы). */
.trumpamole__boss-frame-name {
    align-self: flex-start;
    padding: 3px 10px;
    border-radius: var(--ui-radius-sm);
    background:
        var(--ui-dirt-lite),
        linear-gradient(180deg, var(--ui-gold-btn-top) 0%, var(--ui-gold-btn-low) 100%);
    border: 1px solid var(--ui-gold-btn-edge);
    box-shadow: 0 2px 0 var(--ui-gold-btn-deep), var(--ui-inner-top);
    font-family: var(--ui-font-condensed);
    font-size: var(--ui-size-small);
    font-weight: 900;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.trumpamole__boss-frame-name[hidden] { display: none; }

.trumpamole__boss-frame-text {
    min-height: 56px;
    color: var(--ui-text-main);
    font-family: var(--ui-font-main);
    font-size: var(--ui-size-value);
    font-weight: 600;
    line-height: 1.45;
    text-align: center;
}

.trumpamole__boss-frame-dots {
    display: flex;
    gap: 6px;
}

.trumpamole__boss-frame-dots i {
    width: 22px;
    height: 4px;
    border-radius: var(--ui-radius-pill);
    background: color-mix(in srgb, var(--ui-ivory) 22%, transparent);
    transition: background var(--tam-t-state) ease;
}

.trumpamole__boss-frame-dots i.is-on { background: var(--ui-gold-light); }

/* ----- Сцена награды ----------------------------------------------------- */

.trumpamole__boss-beat {
    display: flex;
    flex-direction: column;
    gap: var(--ui-space-2);
}

/*
 * Текст сцены светлый: с §68 победа над боссом ушла с кремовой страницы
 * досье (категория `story`) на тёмную панель праздника — и тёмная буква
 * на ней пропадала совсем.
 */
.trumpamole__boss-beat-text {
    color: var(--ui-text-main);
    font-family: var(--ui-font-main);
    font-size: var(--ui-size-body);
    font-weight: 600;
    line-height: 1.45;
}

/* Реплика — утопленная в панель строка (§8) с золотым язычком слева;
   язычок и шаг скругления заданы там же, в раме: сокращённая `border`
   общего списка перебила бы их отсюда. */
.trumpamole__boss-line {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: var(--ui-space-2) var(--ui-space-3);
}

.trumpamole__boss-line-who {
    color: var(--ui-gold-light);
    font-family: var(--ui-font-condensed);
    font-size: var(--ui-size-small);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.trumpamole__boss-line-text {
    color: var(--ui-text-muted);
    font-family: var(--ui-font-main);
    font-size: var(--ui-size-body);
    line-height: 1.4;
}

/* ----- Полоса босса на поле ----------------------------------------------
   Под боевым HUD (z-index 30) и над сценой: имя, портрет и точки частей.
   Нажатий не принимает — это индикатор, а не панель. Материал — карточка
   §6 рамы: над тёмным полем полоса обязана быть светлее его. */

.tam-boss {
    position: fixed;
    left: var(--ui-space-4);
    right: var(--ui-space-4);
    /*
     * ПОД верхней строкой HUD, а не под её началом.
     *
     * Здесь стояло 64px, а верхняя строка боя кончается на 85-м: окно
     * часов накрывало полосу на 21px, и вторая половина имени босса
     * читалась сквозь него. Число собрано из тех же величин, что и сам
     * HUD: его верхний отступ, строка уровня (19px), зазор (2px), окно
     * часов (52px) и зазор до полосы.
     */
    top: calc(var(--tam-inset-top, 0px) + var(--ui-space-3) + 73px + var(--ui-space-2));
    z-index: 29;
    display: flex;
    align-items: center;
    gap: var(--ui-space-3);
    padding: var(--ui-space-2) var(--ui-space-3);
    font-family: var(--ui-font-main);
    pointer-events: none;
}

/* Портрет в полосе — круг в золотом ободке: он повторяет то же лицо,
   что стояло в карточке узла, и связывает бой со встречей. */
.tam-boss__face {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background:
        var(--ui-dirt),
        radial-gradient(circle at 50% 34%,
        color-mix(in srgb, var(--ui-gold-light) 30%, transparent) 0%,
        var(--ui-bg-deep) 72%);
    border: var(--ui-border) solid var(--ui-gold-dark);
    box-shadow: var(--ui-inner-well);
    overflow: hidden;
}

.tam-boss__face img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 18%;
}

.tam-boss__face.is-empty { border-color: rgba(0, 0, 0, 0.5); }
.tam-boss__face.is-empty img { display: none; }

.tam-boss__info {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.tam-boss__name {
    color: var(--ui-gold-light);
    font-family: var(--ui-font-condensed);
    font-size: var(--ui-size-body);
    font-weight: 900;
    letter-spacing: 0.02em;
    line-height: 1.1;
    text-transform: uppercase;
    text-shadow: 0 2px 0 color-mix(in srgb, var(--ui-bg-deep) 75%, transparent);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Точки частей: сколько раз ещё придётся достать босса. Полоса в
   процентах врала бы про темп боя — у босса из шести частей каждая
   стоит заметного куска экрана. */
.tam-boss__pips {
    display: flex;
    gap: 4px;
}

.tam-boss__pips i {
    flex: 1 1 auto;
    height: var(--ui-bar-h-thin);
    border-radius: var(--ui-radius-pill);
    background:
        var(--ui-dirt-lite),
        linear-gradient(180deg, var(--ui-red-light) 0%, var(--ui-red-deep) 100%);
    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--ui-ivory) 20%, transparent);
    transition: background var(--tam-t-state) ease, transform var(--tam-t-state) ease;
}

.tam-boss__pips i.is-down {
    background: color-mix(in srgb, var(--ui-ivory) 16%, transparent);
    transform: scaleY(0.6);
}

/* Клеймо фазы — чип §10: значение без нажатия. */
.tam-boss__phase {
    flex: 0 0 auto;
    padding: 3px 9px;
    font-family: var(--ui-font-condensed);
    font-size: var(--ui-size-small);
    font-weight: 900;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

/* Последняя часть: полоса подсвечивается — сейчас будет финальный удар. */
.tam-boss.is-final {
    border-color: var(--ui-gold);
    animation: tamBossFinal 1.1s ease-in-out infinite;
}

/* Свечение перечисляет и грань, и фаску: `box-shadow` — сокращённая
   запись, и без них полоса на каждом такте теряла нижнюю грань и
   верхний блик, которые ей даёт материал карточки §6. */
@keyframes tamBossFinal {
    0%, 100% {
        box-shadow: 0 5px 0 var(--ui-panel-edge), var(--ui-shadow-soft),
                    var(--ui-inner-top), 0 0 0 rgba(0, 0, 0, 0);
    }
    50% {
        box-shadow: 0 5px 0 var(--ui-panel-edge), var(--ui-shadow-soft),
                    var(--ui-inner-top),
                    0 0 18px color-mix(in srgb, var(--ui-gold-light) 55%, transparent);
    }
}

/* Табличка фазы: название и реплика. Держится две секунды и уходит —
   дольше она мешает бою. Красная, как предупреждение на карточке: это
   говорит босс, а не игра. */
.tam-boss__banner {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 8px);
    padding: var(--ui-space-2) var(--ui-space-3);
    border-radius: var(--ui-radius-md);
    background:
        var(--ui-dirt-wide),
        var(--ui-dirt),
        linear-gradient(180deg,
        color-mix(in srgb, var(--ui-red-deep) 78%, var(--ui-panel-dark)) 0%,
        color-mix(in srgb, var(--ui-red-deep) 34%, var(--ui-bg-dark)) 100%);
    border: var(--ui-border) solid color-mix(in srgb, var(--ui-gold-light) 40%, transparent);
    box-shadow: 0 4px 0 var(--ui-panel-edge), var(--ui-shadow-soft);
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity var(--tam-t-panel) ease, transform var(--tam-t-panel) ease;
}

.tam-boss__banner.is-on {
    opacity: 1;
    transform: none;
}

.tam-boss__banner-title {
    color: var(--ui-gold-light);
    font-family: var(--ui-font-condensed);
    font-size: var(--ui-size-body);
    font-weight: 900;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.tam-boss__banner-text {
    margin-top: 2px;
    color: var(--ui-ivory);
    font-family: var(--ui-font-main);
    font-size: var(--ui-size-small);
    font-weight: 600;
    line-height: 1.35;
}

/*
 * Плашка цели на время боя с боссом уходит.
 *
 * «Boss 0 / 6» и точки частей — одно и то же число, показанное дважды, а
 * места под шапкой ровно на одну строку. Прогресс при этом остаётся
 * серверным: полоса босса рисует его же.
 */
.tam-battle-hud.is-boss .tam-battle-hud__goal { display: none; }

/* ----- Реакция арены -----------------------------------------------------
   Слой внутри сцены: он трясётся вместе с полем и лежит под лунками —
   реакция это атмосфера фазы, а не помеха попаданию. */

.tam-boss-arena {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    overflow: hidden;
}

.tam-boss-arena__papers,
.tam-boss-arena__stamp,
.tam-boss-arena__gold,
.tam-boss-arena__flash {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity var(--tam-t-sheet) ease;
}

/* Фаза 1 — бумажная работа: документы медленно плывут над ареной. */
.tam-boss-arena__papers {
    background-image: url('../boss/papers.webp?26090901');
    background-size: 128% auto;
    background-position: center 30%;
    background-repeat: no-repeat;
    mix-blend-mode: screen;
}

.tam-boss-arena.is-papers .tam-boss-arena__papers {
    opacity: 0.32;
    animation: tamBossPapers 14s linear infinite;
}

@keyframes tamBossPapers {
    0%   { transform: translate3d(-2%, 0, 0) rotate(-0.6deg); }
    50%  { transform: translate3d(2%, -1.5%, 0) rotate(0.6deg); }
    100% { transform: translate3d(-2%, 0, 0) rotate(-0.6deg); }
}

/* Фаза 2 — штраф: арена в бордовом свете, по краям тень протокола. */
.tam-boss-arena__stamp {
    background:
        radial-gradient(ellipse at 50% 48%, rgba(0, 0, 0, 0) 42%,
        color-mix(in srgb, var(--ui-red-deep) 60%, transparent) 100%);
}

.tam-boss-arena.is-stamp .tam-boss-arena__stamp { opacity: 1; }

/* Фаза 3 — калькулятор-щит: золотой отсвет снизу, как от пересчёта. */
.tam-boss-arena__gold {
    background:
        radial-gradient(ellipse at 50% 96%,
        color-mix(in srgb, var(--ui-gold-light) 40%, transparent) 0%,
        rgba(0, 0, 0, 0) 62%);
}

.tam-boss-arena.is-gold .tam-boss-arena__gold {
    opacity: 1;
    animation: tamBossGold 3.4s ease-in-out infinite;
}

@keyframes tamBossGold {
    0%, 100% { opacity: 0.7; }
    50%      { opacity: 1; }
}

/* Смена фазы: короткая вспышка по всей арене. */
.tam-boss-arena.is-turn .tam-boss-arena__flash {
    background: radial-gradient(ellipse at 50% 50%,
                color-mix(in srgb, var(--ui-ivory) 50%, transparent) 0%,
                rgba(0, 0, 0, 0) 70%);
    animation: tamBossFlash calc(var(--tam-t-sheet) + var(--tam-t-tap)) ease-out;
}

/* Штрафной штамп за пустой тап во второй фазе. */
.tam-boss-arena.is-fine .tam-boss-arena__flash {
    background: radial-gradient(ellipse at 50% 50%,
                color-mix(in srgb, var(--ui-red-light) 48%, transparent) 0%,
                rgba(0, 0, 0, 0) 68%);
    /* 600 мс: столько же держит класс `is-fine` boss-controller.js (620). */
    animation: tamBossFlash calc(var(--tam-t-sheet) + var(--tam-t-state)) ease-out;
}

@keyframes tamBossFlash {
    0%   { opacity: 0; }
    18%  { opacity: 1; }
    100% { opacity: 0; }
}

/*
 * Финальный удар (§109).
 *
 * Настоящего замедления времени здесь нет и быть не может: расписание боя
 * серверное, растянуть его на клиенте значило бы разойтись с сервером на
 * глазах у игрока. Вместо этого — вспышка, притемнение краёв и короткая
 * остановка кадра (`FX.hitstop`), которые вместе читаются как замедление.
 */
.tam-boss-arena.is-final .tam-boss-arena__flash {
    background:
        radial-gradient(ellipse at 50% 52%,
        color-mix(in srgb, var(--ui-ivory) 72%, transparent) 0%,
        rgba(0, 0, 0, 0) 58%),
        radial-gradient(ellipse at 50% 52%, rgba(0, 0, 0, 0) 46%, rgba(0, 0, 0, 0.6) 100%);
    /* 900 мс — ровно FINAL_MS в boss-controller.js: вспышка гаснет вместе
       со снятием класса, иначе кадр обрывается на середине. */
    animation: tamBossFinalBlow var(--tam-t-reward) ease-out;
}

@keyframes tamBossFinalBlow {
    0%   { opacity: 0; transform: scale(1.1); }
    12%  { opacity: 1; transform: scale(1); }
    100% { opacity: 0; transform: scale(1); }
}

.tam-battle.is-boss-down .tam-battle__field {
    animation: tamBossDown var(--tam-t-reward) ease-out;
}

@keyframes tamBossDown {
    0%   { transform: scale(1); }
    14%  { transform: scale(1.035); }
    100% { transform: scale(1); }
}

/* Системная просьба «меньше движения» отменяет всё лишнее: остаются
   только состояния, без пульсаций и полётов. */
@media (prefers-reduced-motion: reduce) {
    .trumpamole__map-node-warn,
    .tam-boss.is-final,
    .tam-boss-arena.is-papers .tam-boss-arena__papers,
    .tam-boss-arena.is-gold .tam-boss-arena__gold,
    .tam-boss-arena.is-turn .tam-boss-arena__flash,
    .tam-boss-arena.is-fine .tam-boss-arena__flash,
    .tam-boss-arena.is-final .tam-boss-arena__flash,
    .tam-battle.is-boss-down .tam-battle__field,
    .trumpamole__boss-frame-art {
        animation: none;
    }
}

/* Узкий экран (360 px): полоса босса ужимается, но остаётся читаемой. */
@media (max-width: 380px) {
    .tam-boss {
        left: var(--ui-space-2);
        right: var(--ui-space-2);
        gap: var(--ui-space-2);
        padding: 6px var(--ui-space-2);
    }

    .tam-boss__face { width: 38px; height: 38px; }
    .tam-boss__name { font-size: var(--ui-size-small); }
    .tam-boss__phase { font-size: var(--ui-size-micro); padding: 2px 7px; }
    .trumpamole__boss-face { width: 124px; height: 124px; }
}