/* ==========================================================================
   story.css — сцена мира, собранная слоями.

   §414 ТЗ требует собирать окружение из «базовый арт + сюжетный оверлей +
   оверлей события + эффекты», а не рисовать тридцать полных копий одной
   комнаты. Сервер называет слои и порядок (`server/Models/Environment.php`),
   здесь они складываются стопкой.

   Правила стопки простые. Слои занимают контейнер целиком и лежат друг на
   друге; порядок задаёт сам DOM, поэтому z-index не нужен нигде, кроме
   содержимого поверх сцены. Базовый арт кроется целиком, оверлеи —
   вписываются, чтобы прозрачные края не растягивались. Ввода слои не
   перехватывают: интерактивные объекты кабинета лежат над сценой и должны
   получать нажатия.

   Собственных цветов файл не вводит: всё из common.css и ui-tokens.css.
   ========================================================================== */

.trumpamole__scene {
    position: relative;
    overflow: hidden;
    width: 100%;
    background: var(--brown-0);
    border-radius: var(--ui-radius-md);
}

.trumpamole__scene-layer {
    position: absolute;
    inset: 0;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    pointer-events: none;
}

/*
 * Базовый арт закрывает сцену целиком: под ним ничего нет и быть не должно.
 * Он же задаёт высоту — остальные слои лежат поверх и своей высоты не имеют.
 * Пропорции берутся из `--scene-ratio`, чтобы кабинет и карта могли просить
 * свою форму, не переписывая правило.
 */
.trumpamole__scene-layer--base {
    position: relative;
    background-size: cover;
    aspect-ratio: var(--scene-ratio, 4 / 3);
}

/*
 * Сюжетный слой — след истории игрока: пролом, заплатка, новый холмик.
 * Он никогда не заменяет базу, только ложится поверх (§49).
 */
.trumpamole__scene-layer--story {
    background-size: cover;
}

/*
 * Оверлей события живёт до срока и уходит, не трогая сюжетный слой
 * под собой (§413). Смешение осветлением, чтобы тревожный свет читался
 * как свет, а не как наклейка.
 */
.trumpamole__scene-layer--event {
    background-size: cover;
    mix-blend-mode: screen;
}

.trumpamole__scene-layer--fx {
    background-size: cover;
    mix-blend-mode: screen;
    opacity: .82;
}

/* ── Движение слоёв ────────────────────────────────────────────────── */

.trumpamole__scene-layer--float {
    animation: trumpamole-scene-float 9s ease-in-out infinite;
}

.trumpamole__scene-layer--pulse {
    animation: trumpamole-scene-pulse 3.2s ease-in-out infinite;
}

.trumpamole__scene-layer--shimmer {
    animation: trumpamole-scene-shimmer 6s linear infinite;
}

@keyframes trumpamole-scene-float {
    0%, 100% { transform: translate3d(0, 0, 0); }
    50%      { transform: translate3d(0, -6px, 0); }
}

@keyframes trumpamole-scene-pulse {
    0%, 100% { opacity: .55; }
    50%      { opacity: 1; }
}

@keyframes trumpamole-scene-shimmer {
    0%   { transform: scale(1); }
    50%  { transform: scale(1.03); }
    100% { transform: scale(1); }
}

/*
 * Просьба уменьшить движение — не рекомендация. Сцена остаётся собранной,
 * пропадает только её колыхание.
 */
@media (prefers-reduced-motion: reduce) {
    .trumpamole__scene-layer--float,
    .trumpamole__scene-layer--pulse,
    .trumpamole__scene-layer--shimmer {
        animation: none;
    }
}

/* ==========================================================================
   Проигрыватель сцены (этап 22)

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

   Цветов файл не вводит: всё из common.css и ui-tokens.css.
   ========================================================================== */

.trumpamole__story {
    position: fixed;
    inset: 0;
    /*
     * Сцена выше любых окон. По §60 сюжетная сцена — приоритет P0, и
     * подложка окна не должна её закрывать: игрок в этот момент смотрит
     * сцену, а не окно. Ступень «поверх окна» — в `game-ui.css`.
     */
    z-index: var(--tam-z-over);
    display: none;
    background: var(--brown-0);
    overflow: hidden;
    -webkit-tap-highlight-color: transparent;
}

.trumpamole__story.is-on {
    display: block;
    animation: trumpamole-story-in var(--tam-t-modal) ease-out;
}

/* Пока сцена открыта, страница под ней не прокручивается. */
body.trumpamole--story-open {
    overflow: hidden;
}

.trumpamole__story-scene {
    position: absolute;
    inset: 0;
    border-radius: 0;
}

/*
 * Сцена в проигрывателе — весь экран, а не кадр в потоке страницы.
 * В общей стопке высоту задаёт базовый слой пропорцией (`--scene-ratio`),
 * и на телефоне под ним оставалась пустая полоса в треть экрана: кадр
 * кончался, дальше шёл голый фон, а персонаж висел в пустоте. Здесь
 * высоту задаёт экран, и слои кроют его целиком.
 */
.trumpamole__story-scene .trumpamole__scene-layer--base {
    position: absolute;
    inset: 0;
    aspect-ratio: auto;
}

/* Собственный кадр узла: ночь на газоне — другая картинка, а не оверлей. */
.trumpamole__story-shot {
    position: absolute;
    inset: 0;
    background-repeat: no-repeat;
    background-position: center top;
    background-size: cover;
}

/*
 * Затемнение снизу. Без него светлый кадр съедает текст: на утреннем
 * газоне кремовая реплика читается только на подложке.
 */
.trumpamole__story-shade {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--ui-bg-dark) 55%, transparent) 0%, transparent 26%),
        linear-gradient(0deg, color-mix(in srgb, var(--ui-bg-dark) 94%, transparent) 0%, color-mix(in srgb, var(--ui-bg-dark) 72%, transparent) 22%, transparent 52%);
}

/*
 * Персонаж стоит на нижней трети кадра и не мешает тексту: карточка
 * реплики лежит поверх него, поэтому фигура обрезается снизу, а не
 * ужимается целиком в оставшуюся полоску.
 */
.trumpamole__story-actor {
    position: absolute;
    left: 50%;
    bottom: 30%;
    width: auto;
    height: 46%;
    transform: translateX(-62%);
    filter: drop-shadow(var(--ui-art-shadow-lg));
    animation: trumpamole-story-actor var(--tam-t-sheet) ease-out;
    pointer-events: none;
}

.trumpamole__story-actor.is-right {
    transform: translateX(-38%) scaleX(-1);
}

/*
 * Материал карточки реплики берётся из §6 `ui-frame.css` вместе со всеми
 * карточками игры — здесь остаётся только место на экране и поле внутри.
 */
.trumpamole__story-card {
    position: absolute;
    left: var(--space-2, 10px);
    right: var(--space-2, 10px);
    bottom: calc(var(--space-3, 14px) + var(--safe-bottom, 0px));
    padding: var(--space-3, 14px);
}

.trumpamole__story-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-2, 10px);
    margin-bottom: var(--space-1, 6px);
    min-height: 18px;
}

.trumpamole__story-speaker {
    font-family: var(--font-heading), sans-serif;
    font-size: var(--ui-size-body);
    color: var(--gold-2);
    letter-spacing: .02em;
}

.trumpamole__story-chapter {
    font-family: var(--font-condensed), sans-serif;
    font-size: var(--ui-size-small);
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--cream-4);
}

.trumpamole__story-text {
    min-height: 3.4em;
    font-family: var(--font-main), sans-serif;
    font-size: var(--ui-size-value);
    line-height: 1.45;
    color: var(--text, var(--ui-ivory));
}

/* Реплика без говорящего — голос сцены, а не персонажа. */
.trumpamole__story.is-quiet .trumpamole__story-text {
    font-style: italic;
    color: var(--cream-3);
}

.trumpamole__story-choices {
    display: grid;
    gap: var(--space-1, 6px);
    margin-top: var(--space-2, 10px);
}

/* Корпус варианта выбора — второй (§9.1.1 `ui-frame.css`): варианты в
   сцене равны между собой, главного среди них нет. */
.trumpamole__story-choice {
    min-height: var(--tap, 56px);
    padding: var(--space-2, 10px) var(--space-3, 14px);
    border-radius: var(--ui-radius-md);
    font-family: var(--font-main), sans-serif;
    font-size: var(--ui-size-body);
    text-align: left;
    cursor: pointer;
}

.trumpamole__story-choice:active {
    transform: translateY(1px);
}

.trumpamole__story-rewards {
    display: grid;
    gap: var(--space-1, 6px);
    margin-top: var(--space-2, 10px);
}

.trumpamole__story-reward {
    display: flex;
    align-items: center;
    gap: var(--space-2, 10px);
    padding: var(--space-1, 6px) var(--space-2, 10px);
    border-radius: var(--ui-radius-sm);
    background: color-mix(in srgb, var(--ui-wood-light) 28%, transparent);
    color: var(--gold-2);
}

.trumpamole__story-reward-icon {
    display: inline-flex;
    width: 18px;
    height: 18px;
}

.trumpamole__story-reward-text {
    font-family: var(--font-condensed), sans-serif;
    font-size: var(--ui-size-body);
    color: var(--cream-2);
}

.trumpamole__story-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2, 10px);
    margin-top: var(--space-2, 10px);
}

.trumpamole__story-dots {
    display: inline-flex;
    gap: 5px;
}

.trumpamole__story-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--brown-4);
}

.trumpamole__story-dot.is-on {
    background: var(--gold-3);
}

.trumpamole__story-next {
    font-family: var(--font-condensed), sans-serif;
    font-size: var(--ui-size-small);
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--gold-3);
    animation: trumpamole-story-blink 1.8s ease-in-out infinite;
}

.trumpamole__story-skip {
    position: absolute;
    top: calc(var(--space-3, 14px) + var(--safe-top, 0px));
    right: var(--space-3, 14px);
    min-height: 34px;
    padding: 0 var(--space-3, 14px);
    border-radius: var(--ui-radius-md);
    border: 1px solid var(--brown-3);
    background: color-mix(in srgb, var(--ui-bg-dark) 72%, transparent);
    color: var(--cream-3);
    font-family: var(--font-condensed), sans-serif;
    font-size: var(--ui-size-small);
    text-transform: uppercase;
    letter-spacing: .06em;
    cursor: pointer;
}

@keyframes trumpamole-story-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes trumpamole-story-actor {
    from { opacity: 0; transform: translateX(-62%) translateY(14px); }
}

@keyframes trumpamole-story-blink {
    0%, 100% { opacity: .45; }
    50%      { opacity: 1; }
}

/* Низкий экран: кадр отдаёт место тексту, персонаж уменьшается. */
@media (max-height: 680px) {
    .trumpamole__story-actor { height: 38%; bottom: 32%; }
    .trumpamole__story-text  { font-size: var(--ui-size-body); min-height: 3em; }
}

@media (prefers-reduced-motion: reduce) {
    .trumpamole__story.is-on,
    .trumpamole__story-actor,
    .trumpamole__story-next {
        animation: none;
    }
}