/* ==========================================================================
   SHARE + CHALLENGE LANDING — вызовы, помощь и карточки «поделиться»
   (§836-852, §883-889, этап 38)

   Два экрана в одном файле, потому что они об одном: человек пришёл по
   ссылке друга или собирается такую ссылку отправить.

   Приземление вызова (§849) — не карточка среди других, а весь экран:
   лицо зовущего, результат, который надо побить, и одна кнопка. Ничего
   больше на нём нет намеренно.

   Карточка «поделиться» — два слоя (§889): статичный фон из assets/share
   и динамика поверх. Ни имя, ни счёт, ни призыв к действию в картинку не
   рисуются, поэтому весь текст здесь — обычная разметка.

   Цвета, отступы, радиусы и тени — из ui-tokens.css и common.css.
   ========================================================================== */

/* ==========================================================================
   Приземление вызова
   ========================================================================== */

/*
 * `--tam-page-top` — это расстояние от верха окна до начала страницы, а
 * не отступ внутри неё: шапка с ресурсами стоит в потоке, и страница уже
 * начинается под ней. Отступом сверху эта величина ставилась второй раз,
 * и верхняя треть приземления вызова оставалась пустой — лицо соперника
 * начиналось почти с середины экрана. В расчёте высоты величина верна и
 * остаётся.
 */
.tam-challenge {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-3)
             calc(var(--tam-nav-h, 68px) + 24px + var(--safe-bottom, 0px));
    min-height: calc(var(--tam-viewport-h, 100vh) - var(--tam-page-top, 144px));
    text-align: center;
}

/* ----- Кто зовёт ---------------------------------------------------------- */

/* Свободная высота делится поровну над лицом соперника и над кнопкой:
   иначе на длинном экране весь блок прижимался к шапке, а верхняя треть
   страницы оставалась пустой. */
.tam-challenge__caller {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    margin-top: auto;
}

/* Золотой кант в тёмной обводке — тот же приём, что у портрета в
   профиле (§16 рамы): лицо соперника обязано читаться на любом фоне и
   выглядеть предметом на доске, а не картинкой, приклеенной к фону. */
.tam-challenge__avatar {
    width: 104px;
    height: 104px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--ui-panel-dark);
    box-shadow: 0 0 0 3px var(--ui-gold), 0 0 0 6px var(--ui-panel-edge),
                var(--ui-shadow-soft);
}

.tam-challenge__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Заголовок отличается от текста весом и обводкой, а не семейством. */
.tam-challenge__title {
    margin: 0;
    font-family: var(--ui-font-title);
    font-weight: 900;
    font-size: var(--ui-size-title);
    line-height: 1.24;
    color: var(--ui-text-main);
    text-shadow: 0 2px 0 rgba(0, 0, 0, 0.55);
}

.tam-challenge__level {
    font-family: var(--ui-font-condensed);
    font-weight: 900;
    font-size: var(--ui-size-body);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ui-text-muted);
}

/* ----- Цель --------------------------------------------------------------- */

/* Материал доски — из рамы (§6): здесь только геометрия. */
.tam-challenge__target {
    padding: var(--space-4) var(--space-3);
}

.tam-challenge__target-label {
    font-family: var(--ui-font-condensed);
    font-weight: 900;
    font-size: var(--ui-size-body);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ui-text-muted);
}

/* Цель забега — главное число экрана: золото с тёмной обводкой. */
.tam-challenge__score {
    margin-top: var(--space-1);
    font-family: var(--ui-font-title);
    font-weight: 900;
    font-size: 46px;
    line-height: 1;
    color: var(--ui-gold-light);
    text-shadow: 0 3px 0 rgba(0, 0, 0, 0.55), 0 0 18px color-mix(in srgb, var(--ui-gold) 35%, transparent);
}

.tam-challenge__rarity {
    margin-top: var(--space-1);
    font-family: var(--ui-font-main);
    font-size: var(--ui-size-body);
    font-weight: 700;
    color: var(--ui-gold);
}

.tam-challenge__rules,
.tam-challenge__left {
    margin-top: var(--space-1);
    font-family: var(--ui-font-main);
    font-size: var(--ui-size-body);
    color: var(--ui-text-muted);
}

/* ----- Счёт серии --------------------------------------------------------- */

/* Табло серии вырезано в экране (§8 рамы) — здесь только раскладка. */
.tam-challenge__series {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
}

.tam-challenge__series-side {
    font-family: var(--ui-font-condensed);
    font-weight: 900;
    font-size: var(--ui-size-body);
    letter-spacing: 0.10em;
    color: var(--ui-text-muted);
}

.tam-challenge__series-score {
    font-family: var(--ui-font-title);
    font-weight: 900;
    font-size: var(--ui-size-title);
    color: var(--ui-text-main);
    text-shadow: 0 2px 0 rgba(0, 0, 0, 0.5);
}

/* ----- Действия ----------------------------------------------------------- */

.tam-challenge__actions {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin-top: auto;
}

/* Причина отказа — обычный текст, а не красная ошибка: «правила поля
   изменились» это не сбой, а объяснение (§870). */
.tam-challenge__reason {
    font-family: var(--ui-font-main);
    font-size: var(--ui-size-value);
    line-height: 1.4;
    color: var(--ui-text-muted);
}

/* Второстепенное действие подписью, а не кнопкой: главная кнопка на
   экране одна. */
.tam-challenge__later {
    min-height: 44px;
    background: none;
    border: 0;
    font-family: var(--ui-font-main);
    font-size: var(--ui-size-body);
    color: var(--ui-text-muted);
    cursor: pointer;
}

.tam-challenge__later:active { color: var(--ui-text-main); }

/* ----- Вызова нет вовсе --------------------------------------------------- */

/*
 * Пустое место — не строка текста посреди экрана (§56): разметку даёт
 * `TAM.UI.emptyHtml`, поэтому здесь остаётся только поставить блок в
 * середину страницы, а не прижать его к верхнему краю.
 */
.tam-challenge--lost { justify-content: center; }

.tam-challenge--lost .ui-empty { width: 100%; }

/* ----- Пока идёт запрос --------------------------------------------------- */

.tam-challenge--skeleton { align-items: center; }

.tam-challenge__bar {
    width: 100%;
    height: 84px;
    border-radius: var(--ui-radius-md);
}

.tam-challenge__bar--wide { height: 148px; }

.tam-challenge__shimmer {
    background: linear-gradient(90deg,
        color-mix(in srgb, var(--ui-ivory) 5%, transparent) 0%,
        color-mix(in srgb, var(--ui-ivory) 12%, transparent) 50%,
        color-mix(in srgb, var(--ui-ivory) 5%, transparent) 100%);
    background-size: 200% 100%;
    animation: tam-share-shimmer 1.4s linear infinite;
}

@keyframes tam-share-shimmer {
    from { background-position: 200% 0; }
    to   { background-position: -200% 0; }
}

@media (prefers-reduced-motion: reduce) {
    .tam-challenge__shimmer { animation: none; }
}

/* ==========================================================================
   Карточка «поделиться»
   ========================================================================== */

.tam-share {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

/*
 * Пропорция 3:4 — ровно та, в которой нарисованы шаблоны. Любое другое
 * отношение обрезало бы кадр по краям, а вместе с ним и спокойные зоны,
 * ради которых шаблон и рисовался. Фон приходит файлом из assets/share;
 * если он не загрузился, остаётся коричневая подложка, и текст всё равно
 * читается: битая картинка не должна ломать экран.
 */
.tam-share__card {
    position: relative;
    aspect-ratio: 3 / 4;
    border-radius: var(--ui-radius-lg);
    overflow: hidden;
    background-color: var(--brown-1);
    background-size: cover;
    background-position: center;
    border: 2px solid var(--gold-4);
    box-shadow: var(--shadow-md);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* Спокойные зоны шаблона: верхняя середина под результат, нижние 25% под
   призыв к действию (§889, шаблон T7). Затемнение делает текст читаемым
   поверх любой картинки. */
.tam-share__veil {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--ui-bg-dark) 72%, transparent) 0%,
        color-mix(in srgb, var(--ui-bg-dark) 18%, transparent) 38%,
        color-mix(in srgb, var(--ui-bg-dark) 20%, transparent) 62%,
        color-mix(in srgb, var(--ui-bg-dark) 88%, transparent) 100%);
    pointer-events: none;
}

.tam-share__top,
.tam-share__bottom {
    position: relative;
    padding: var(--space-3);
    text-align: center;
}

.tam-share__copy {
    font-family: var(--font-heading);
    font-size: var(--ui-size-section);
    line-height: 1.28;
    color: var(--text);
    text-shadow: var(--ui-text-shadow-md);
}

.tam-share__value {
    margin-top: var(--space-1);
    font-family: var(--font-heading);
    font-size: 40px;
    line-height: 1;
    color: var(--gold-2);
    text-shadow: var(--ui-text-shadow-lg);
}

.tam-share__who {
    font-family: var(--font-condensed);
    font-size: var(--ui-size-body);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--cream-3);
}

/* Призыв к действию — часть карточки, но не кнопка: нажимать его в чате
   всё равно нельзя, нажимают саму ссылку. */
.tam-share__cta {
    margin-top: var(--space-1);
    display: inline-block;
    padding: 8px 18px;
    border-radius: var(--ui-radius-sm);
    background: linear-gradient(180deg, var(--gold-2) 0%, var(--gold-4) 100%);
    font-family: var(--font-condensed);
    font-size: var(--ui-size-body);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--brown-0);
    box-shadow: 0 2px 0 rgba(0, 0, 0, 0.34);
}

.tam-share__note {
    font-family: var(--font-main);
    font-size: var(--ui-size-small);
    line-height: 1.35;
    color: var(--muted);
    text-align: center;
}

/* Готовая картинка карточки (§14): в чат уходит именно этот JPEG,
   поэтому предпросмотр показывает его без наложений. */
.tam-share__photo {
    display: block;
    width: 100%;
    max-height: min(300px, 34vh);
    object-fit: contain;
    border-radius: var(--ui-radius-md);
    border: var(--ui-border, 2px) solid var(--ui-panel-edge);
    box-shadow: var(--shadow-md);
    background: var(--ui-wood-dark);
}

.tam-share__caption {
    margin-top: var(--space-2);
    font-family: var(--font-main);
    font-size: var(--ui-size-body);
    line-height: 1.4;
    color: var(--ui-text-main);
    text-align: center;
}

/*
 * Низкий экран: карточка не должна выталкивать кнопки окна за край.
 *
 * Ограничивается высота, а не пропорция: при другой пропорции кадр
 * обрезался бы сверху и снизу — ровно по тем спокойным зонам, ради
 * которых шаблон и рисовался. Карточка просто становится уже и
 * остаётся по центру.
 */
@media (max-height: 700px) {
    .tam-share__card {
        max-height: 46vh;
        margin: 0 auto;
    }
    .tam-share__value { font-size: 32px; }
}