/* ==========================================================================
   tutorial.css — контекстная подсказка обучения.

   Подсказка появляется в момент действия и не мешает его сделать: она не
   затемняет экран, не ловит нажатия мимо себя и не держит игрока. Это
   требование ТЗ об обучении через действие, а не через чтение (§216-218).

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

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

.trumpamole__coachtip {
    position: fixed;
    inset: 0;
    /*
     * Ступень обучения — выше навигации.
     *
     * Кольцо стояло на 1200: выше шапки (1000), но НИЖЕ нижнего меню
     * (2000). Два шага обучения из четырёх наводят как раз на меню —
     * `tut_ui_map` на центральную ячейку, `tut_ui_tasks` на «задания», —
     * и подсветка уходила под полосу: игрок читал подпись «нажми сюда»,
     * а куда именно, не видел. Ступень та же, что у подсветки `.tam-coach`
     * в `mvp.css`: обучение — один слой, из какого бы семейства оно ни
     * пришло.
     */
    z-index: var(--tam-z-coach);
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--tam-t-panel) ease;
}

.trumpamole__coachtip.is-on {
    opacity: 1;
    visibility: visible;
}

/*
 * Карточка подсказки. Стоит над нижним меню и над полосой боя: в бою
 * меню скрыто, но полоса жизней остаётся, и наезжать на неё нельзя.
 */
.trumpamole__coachtip-card {
    position: absolute;
    left: var(--space-3, 14px);
    right: var(--space-3, 14px);
    bottom: calc(var(--tam-nav-h, 68px) + var(--space-4, 18px) + var(--safe-bottom, 0px));
    padding: var(--space-2, 10px) var(--space-3, 14px);
    border-radius: var(--ui-radius-md);
    border: 1px solid var(--gold-4);
    background: linear-gradient(180deg, var(--brown-1) 0%, var(--brown-0) 100%);
    box-shadow: var(--shadow-md, 0 12px 28px rgba(0, 0, 0, .34));
    pointer-events: auto;
    animation: trumpamole-hint-in var(--tam-t-panel) ease-out;
}

.trumpamole__coachtip-title {
    font-family: var(--font-heading), sans-serif;
    font-size: var(--ui-size-body);
    color: var(--gold-2);
    margin-bottom: 2px;
}

.trumpamole__coachtip-text {
    font-family: var(--font-main), sans-serif;
    font-size: var(--ui-size-body);
    line-height: 1.4;
    color: var(--cream-2);
}

/*
 * Кольцо вокруг элемента, о котором речь. Только контур: закрашенная
 * подсветка мешала бы увидеть сам элемент.
 */
.trumpamole__coachtip-ring {
    position: fixed;
    border-radius: var(--ui-radius-md);
    border: 2px solid var(--gold-2);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-gold-light) 18%, transparent);
    pointer-events: none;
    animation: trumpamole-hint-ring 1.6s ease-in-out infinite;
}

@keyframes trumpamole-hint-in {
    from { opacity: 0; transform: translateY(10px); }
}

@keyframes trumpamole-hint-ring {
    0%, 100% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-gold-light) 18%, transparent); }
    50%      { box-shadow: 0 0 0 7px color-mix(in srgb, var(--ui-gold-light) 8%, transparent); }
}

@media (prefers-reduced-motion: reduce) {
    .trumpamole__coachtip-card,
    .trumpamole__coachtip-ring {
        animation: none;
    }
}