/* ==========================================================================
   ARENA — арена, лиги, защита, немезис и журнал (§139, §142, §146-152,
   §306-311, этап 28)

   Раздел собран как сцена колизея, и порядок блоков задан ТЗ: герой-блок
   с гербом лиги, подиум соперников, своя защита, розыскной плакат
   немезиса, журнал боёв.

   **Подиум — не сетка.** Три карточки стоят по-разному: центральная выше
   и крупнее боковых (§306). На 360px это единственный способ показать
   троих соперников и не превратить каждого в строку списка. Боковые
   карточки живут в той же строке и сжимаются, поэтому горизонтальной
   прокрутки нет.

   **Немезис — доска, а не бумага.** Плакат розыска был единственным
   светлым блоком раздела с тёмным текстом; в сине-фиолетовом мире он
   читался обычной белой веб-карточкой (§62) и выпадал из экрана. Теперь
   корпус тот же, что у соперников и защиты, старая бумага лежит под
   содержимым фактурой, а выделяет плакат золотой счёт встреч.

   **Забег живёт оверлеем.** Тридцать секунд боя не делят экран с
   прокруткой страницы: `position: fixed`, свои отступы под безопасные
   зоны и никакого доступа к тому, что под ним.

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

/* ----- Шапка -------------------------------------------------------------- */

/*
 * Картинка колизея подменяет `::before`, как в коллекции и Хронике:
 * геометрия шапки берётся у `.trumpamole__skins-hero`, чей собственный
 * псевдоэлемент непрозрачен и рисует бутик скинов.
 */
.tam-arena__hero {
    position: relative;
    overflow: hidden;
}

.tam-arena__hero::before {
    background-image: url('../arena/arena_bg.webp?26090901');
    background-position: center 46%;
    filter: none;
    transform: none;
    opacity: 1;
}

.tam-arena__hero::after {
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--ui-bg-dark) 72%, transparent) 0%,
        color-mix(in srgb, var(--ui-bg-dark) 44%, transparent) 38%,
        color-mix(in srgb, var(--ui-bg-dark) 94%, transparent) 100%);
}

/* Герб слева, всё остальное справа: у скинов наоборот, и это осознанно —
   герб лиги важнее любой подписи и должен читаться первым. */
.tam-arena__hero-inner {
    grid-template-columns: 96px 1fr;
    align-items: center;
}

.tam-arena__crest-wrap {
    position: relative;
    width: 96px;
    height: 96px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/*
 * Пятно света под гербом.
 *
 * Нижние лиги нарисованы землёй и ржавым железом и на тёмной трибуне
 * колизея пропадают целиком. Прожектор — не украшение: без него первые
 * два герба из восьми игрок просто не видит.
 */
.tam-arena__crest-wrap::before {
    content: "";
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    background: radial-gradient(circle,
        color-mix(in srgb, var(--ui-gold) 34%, transparent) 0%,
        color-mix(in srgb, var(--ui-gold-dark) 16%, transparent) 46%,
        transparent 72%);
    pointer-events: none;
}

.tam-arena__crest {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(var(--ui-art-shadow-md));
}

/* Низкий экран (§29 рамы): герб лиги отдаёт разделу треть своей высоты.
   На 640 шапка арены занимала 340px из 508, и до первого соперника дело
   не доходило. Цифра лиги на гербе остаётся читаемой: она подписана
   отдельным чипом, а не вырезана в рисунке. */
@media (max-height: 700px) {
    .tam-arena__crest-wrap {
        width: 64px;
        height: 64px;
    }
}

.tam-arena__crest-index {
    position: absolute;
    right: 2px;
    bottom: 0;
    padding: 2px 7px;
    border-radius: var(--ui-radius-sm);
    border: 1px solid color-mix(in srgb, var(--ui-gold) 42%, transparent);
    background: color-mix(in srgb, var(--ui-bg-dark) 88%, transparent);
    font-family: var(--ui-font-condensed);
    font-size: var(--ui-size-small);
    font-weight: 800;
    color: var(--ui-gold);
}

.tam-arena__title-block { gap: 6px; }

.tam-arena__title {
    font-size: var(--ui-size-value);
    line-height: 1.15;
}

.tam-arena__rating-row {
    display: flex;
    align-items: baseline;
    gap: 6px;
    flex-wrap: wrap;
}

.tam-arena__rating {
    font-family: var(--ui-font-title);
    font-size: 24px;
    font-weight: 800;
    line-height: 1;
    color: var(--ui-gold);
    text-shadow: var(--ui-text-shadow-md);
}

.tam-arena__rating-label {
    font-size: var(--ui-size-small);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--ui-text-muted);
}

.tam-arena__streak {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: var(--ui-radius-md);
    background: color-mix(in srgb, var(--ui-gold-dark) 34%, transparent);
    border: 1px solid color-mix(in srgb, var(--ui-gold-light) 38%, transparent);
    font-size: var(--ui-size-small);
    font-weight: 800;
    color: var(--ui-gold-light);
}

/* ----- Прогресс до следующей лиги ---------------------------------------- */

.tam-arena__progress { margin-top: 2px; }

.tam-arena__progress-top {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
    font-size: var(--ui-size-small);
    font-weight: 800;
    color: color-mix(in srgb, var(--ui-ivory) 88%, transparent);
}

.tam-arena__progress-crest {
    width: 18px;
    height: 18px;
    object-fit: contain;
    opacity: 0.9;
}

.tam-arena__progress-left {
    margin-left: auto;
    color: var(--ui-gold-mid);
}

.tam-arena__hero-links {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

/* Ссылки шапки («правила рейтинга», «живая дуэль») целиком живут в раме
   (§9 и §20): она стоит позже и задаёт им материал, кегль и нажатие. Всё,
   что было здесь, — стеклянная пилюля в 1px, которую рама и так перебивала. */

.tam-arena__season {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: var(--ui-size-small);
    font-weight: 700;
    color: var(--ui-text-muted);
}

/* ----- Общее для панели --------------------------------------------------- */

/*
 * Свои боковые отступы: `.trumpamole__skins-main-inner` их не даёт — в
 * разделе скинов их добавляют вкладки и сетка. Без этого на 360px
 * крайние карточки подиума упирались в края экрана.
 */
.tam-arena {
    gap: 6px;
    padding: 0 12px;
}

.tam-arena__section { margin-top: 6px; }

.tam-arena__reroll {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    /* 29px по высоте под палец не попадали: кнопка стоит одна посреди
       пустой полосы, и промах по ней читается как «ничего не работает». */
    min-height: 40px;
    padding: 6px 14px;
    border-radius: var(--ui-radius-sm);
    /* Деревянная кнопка, а не полупрозрачная серо-бурая плашка: на арене
       под ней проходит арт трибун, и сквозь заливку в 0.72 он просвечивал
       разным цветом на каждом кадре. */
    border: var(--ui-border) solid var(--ui-panel-edge);
    background:
        var(--ui-dirt-wide),
        var(--ui-dirt),
        linear-gradient(180deg, var(--ui-wood) 0%, var(--ui-wood-dark) 100%);
    box-shadow: 0 3px 0 rgba(0, 0, 0, 0.45), var(--ui-inner-top);
    color: var(--ui-ivory-light);
    font-family: var(--ui-font-condensed);
    font-size: var(--ui-size-small);
    font-weight: 900;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    text-shadow:
        -1px -1px 0 color-mix(in srgb, var(--ui-text-outline) 80%, transparent), 1px -1px 0 color-mix(in srgb, var(--ui-text-outline) 80%, transparent),
        -1px  1px 0 color-mix(in srgb, var(--ui-text-outline) 80%, transparent), 1px  1px 0 color-mix(in srgb, var(--ui-text-outline) 80%, transparent);
    cursor: pointer;
}

.tam-arena__reroll:active {
    transform: translateY(var(--ui-press));
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.45);
}

/*
 * Суточные попытки (§32).
 *
 * Строка стоит между заголовком раздела и подиумом: цена боя должна
 * попадаться на глаза раньше кнопки «в бой», а не после списания.
 */
.tam-arena__attempts {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 2px 0 6px;
    padding: 7px 10px;
    border-radius: var(--ui-radius-sm);
    /* Материал — утопленная плашка рамы (§8): цена боя вырезана В панели,
       как любое значение, а не наклеена стеклянным прямоугольником. */
    font-size: var(--ui-size-small);
    font-weight: 700;
    color: var(--ui-text-muted);
}

.tam-arena__attempts.is-paid {
    border-color: color-mix(in srgb, var(--ui-gold) 40%, transparent);
    color: var(--ui-gold-light);
}

.tam-arena__attempts svg { flex: 0 0 auto; }

/* Вопрос о списании: обычный абзац окна, но с воздухом по краям. */
.tam-arena__ask {
    margin: 0;
    padding: 4px 2px 8px;
    font-size: var(--ui-size-body);
    line-height: 1.45;
    color: var(--ui-text-main);
}

/* ----- Подиум соперников -------------------------------------------------- */

.tam-arena__podium {
    display: grid;
    grid-template-columns: 1fr 1.18fr 1fr;
    align-items: end;
    gap: 6px;
    padding: 4px 0 8px;
}

.tam-arena__rival {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 10px 6px 10px;
    cursor: pointer;
    min-width: 0;
    /* Корпус, кромка и радиус — карточка рамы (§9.2): свой градиент здесь
       был набран цветами прежнего тёплого мира и рамой перебивался. */
}

/*
 * Центральная карточка подиума выше боковых и выделена золотом — но
 * кольцом ВНУТРИ кромки, а не самой кромкой: тем же приёмом, которым рама
 * показывает редкость. Золотая рама во весь периметр спорила бы с золотой
 * кнопкой боя, стоящей внутри этой же карточки.
 */
.tam-arena__rival.is-main {
    padding: 14px 8px 12px;
    box-shadow:
        0 5px 0 var(--ui-panel-edge),
        var(--ui-shadow-deep),
        inset 0 0 0 2px color-mix(in srgb, var(--ui-gold) 70%, transparent);
}

.tam-arena__rival.is-blocked { opacity: 0.62; }

.tam-arena__rival-top {
    position: relative;
    width: 100%;
    display: flex;
    justify-content: center;
}

.tam-arena__rival-avatar {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid color-mix(in srgb, var(--ui-gold) 36%, transparent);
    background: var(--ui-bg-dark);
}

.tam-arena__rival.is-main .tam-arena__rival-avatar {
    width: 66px;
    height: 66px;
}

.tam-arena__rival-crest {
    position: absolute;
    right: 0;
    bottom: -4px;
    width: 26px;
    height: 26px;
    object-fit: contain;
    filter: drop-shadow(var(--ui-art-shadow-sm));
}

.tam-arena__rival-name {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--ui-size-small);
    font-weight: 800;
    color: var(--ui-text-main);
}

.tam-arena__rival-rating {
    display: flex;
    align-items: center;
    gap: 3px;
    font-family: var(--ui-font-condensed);
    font-size: var(--ui-size-small);
    font-weight: 800;
    color: var(--ui-gold-mid);
}

/*
 * Относительная сила §142 — словом, а не полоской: «сильнее» понятно без
 * легенды, а шкала из пяти делений потребовала бы объяснения, которого
 * на карточке негде разместить.
 */
.tam-arena__power {
    padding: 1px 6px;
    border-radius: var(--ui-radius-md);
    font-size: var(--ui-size-micro);
    font-weight: 800;
    text-transform: lowercase;
}

/*
 * Светлый оттенок исхода — примесь белого к смысловому цвету словаря, а
 * не свой хекс: чистый `--ui-red-light` на красной же подложке чипа
 * сливается с ней, а разбавленный держит и подложку, и буквы.
 */
.tam-arena__power.is-stronger {
    background: color-mix(in srgb, var(--ui-red) 30%, transparent);
    color: color-mix(in srgb, var(--ui-red-light) 55%, var(--ui-ivory));
}

.tam-arena__power.is-weaker {
    background: color-mix(in srgb, var(--ui-green) 24%, transparent);
    color: color-mix(in srgb, var(--ui-green-light) 55%, var(--ui-ivory));
}

.tam-arena__power.is-even {
    background: color-mix(in srgb, var(--ui-ivory) 12%, transparent);
    color: var(--ui-ivory-dark);
}

.tam-arena__rival-hammer {
    display: flex;
    align-items: center;
    gap: 4px;
    max-width: 100%;
    font-size: var(--ui-size-micro);
    font-weight: 700;
    color: var(--ui-text-muted);
    overflow: hidden;
}

.tam-arena__rival-hammer img {
    width: 18px;
    height: 18px;
    object-fit: contain;
    flex: 0 0 auto;
}

.tam-arena__rival-hammer span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tam-arena__rival-target {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: var(--ui-radius-sm);
    background: color-mix(in srgb, var(--ui-bg-dark) 72%, transparent);
    font-size: var(--ui-size-small);
    font-weight: 800;
    color: var(--ui-ivory);
}

/* Расчётная защита подписана словом, а не спрятана §151. */
.tam-arena__estimate {
    font-size: var(--ui-size-micro);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: var(--ui-text-muted);
}

.tam-arena__rival-reward {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-family: var(--ui-font-condensed);
    font-size: var(--ui-size-small);
    font-weight: 800;
}

.tam-arena__rival-reward span {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    color: var(--ui-gold-mid);
}

.tam-arena__rival-reward .is-win { color: color-mix(in srgb, var(--ui-green-light) 55%, var(--ui-ivory)); }
.tam-arena__rival-reward .is-risk { color: color-mix(in srgb, var(--ui-red-light) 55%, var(--ui-ivory)); }

/* Кнопка боя: со значком земли, когда бой платный (§32). */
.tam-arena__rival-go {
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

/* Материал утопленной плашки — §8 рамы; здесь только кегль и выключка. */
.tam-arena__rival-block {
    padding: 6px 8px;
    font-size: var(--ui-size-micro);
    font-weight: 800;
    text-align: center;
}

/* ----- Моя защита §151 ---------------------------------------------------- */

.tam-arena__defense {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px;
    /* Корпус — карточка рамы (§9.2), как у соперников и плаката рядом. */
}

.tam-arena__defense-main {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.tam-arena__defense-score {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.tam-arena__defense-value {
    font-family: var(--ui-font-title);
    font-size: 30px;
    font-weight: 800;
    line-height: 1;
    color: var(--ui-gold);
}

.tam-arena__defense-label {
    font-size: var(--ui-size-small);
    font-weight: 700;
    color: var(--ui-text-muted);
}

.tam-arena__defense-hammer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    max-width: 44%;
    font-size: var(--ui-size-micro);
    font-weight: 700;
    text-align: center;
    color: var(--ui-ivory-dark);
}

.tam-arena__defense-hammer img {
    width: 40px;
    height: 40px;
    object-fit: contain;
}

.tam-arena__defense-note {
    padding: 8px 10px;
    font-size: var(--ui-size-small);
    line-height: 1.4;
}

.tam-arena__defense-note.is-warn {
    border-left: 3px solid var(--ui-gold-dark);
    color: var(--ui-ivory);
}

.tam-arena__defense-rows {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px 10px;
}

.tam-arena__defense-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 6px;
    padding: 4px 0;
    border-bottom: 1px solid color-mix(in srgb, var(--ui-ivory) 8%, transparent);
    font-size: var(--ui-size-small);
    color: var(--ui-text-muted);
    min-width: 0;
}

.tam-arena__defense-row strong {
    color: var(--ui-text-main);
    font-weight: 800;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tam-arena__defense-buttons {
    display: flex;
    gap: 6px;
}

.tam-arena__defense-buttons .ui-btn { flex: 1 1 0; }

/* ----- Розыскной плакат немезиса §147 ------------------------------------- */

.tam-arena__poster {
    position: relative;
    display: grid;
    grid-template-columns: 92px 1fr;
    gap: 10px;
    padding: 12px;
    overflow: hidden;
    cursor: pointer;
}

/*
 * Плакат больше не светлая бумага: посреди сине-фиолетового раздела она
 * читалась обычной белой карточкой из веба. Корпус берётся из рамы, а
 * старая бумага живёт под содержимым фактурой — так же, как любая
 * фотография в игре: приглушённая и тёмная, чтобы поверх неё читались
 * и буквы, и кромка панели.
 */
.tam-arena__poster::before {
    content: "";
    position: absolute;
    inset: 0;
    background: url('../arena/poster_bg.webp?26090901') center/cover no-repeat;
    opacity: 0.2;
    filter: brightness(0.55) saturate(0.5);
    pointer-events: none;
}

.tam-arena__poster-portrait,
.tam-arena__poster-body {
    position: relative;
    z-index: 2;
    min-width: 0;
}

.tam-arena__poster-portrait img {
    width: 92px;
    height: 92px;
    object-fit: cover;
    border-radius: var(--ui-radius-sm);
    border: 3px solid var(--ui-panel-edge);
    background: var(--ui-panel-dark);
}

.tam-arena__poster-body {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.tam-arena__poster-vs {
    display: flex;
    align-items: center;
    gap: 5px;
    font-family: var(--ui-font-condensed);
    font-size: var(--ui-size-small);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--ui-text-main);
    min-width: 0;
}

.tam-arena__poster-vs span:last-child {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tam-arena__poster-x {
    padding: 0 5px;
    border-radius: var(--ui-radius-sm);
    background: var(--ui-red);
    color: var(--ui-ivory);
}

.tam-arena__poster-score {
    font-family: var(--ui-font-title);
    font-size: 28px;
    font-weight: 900;
    line-height: 1;
    color: var(--ui-gold-light);
    text-shadow: 0 2px 0 var(--ui-panel-edge);
}

.tam-arena__poster-note {
    font-size: var(--ui-size-small);
    font-weight: 700;
}

.tam-arena__poster-last {
    font-size: var(--ui-size-small);
    font-weight: 800;
}

.tam-arena__poster-last.is-win { color: var(--ui-green-light); }
.tam-arena__poster-last.is-lose { color: var(--ui-red-light); }
.tam-arena__poster-last.is-draw { color: var(--ui-ivory-dark); }

.tam-arena__poster-go {
    margin-top: 4px;
    align-self: flex-start;
}

/* Отказ подбора на плакате — штамп поверх доски, а не вторая панель. */
.tam-arena__poster .tam-arena__rival-block {
    position: relative;
    z-index: 2;
    margin-top: 4px;
    border: 1px dashed color-mix(in srgb, var(--ui-ivory-dark) 34%, transparent);
    background: color-mix(in srgb, var(--ui-bg-deep) 42%, transparent);
    color: var(--ui-text-muted);
}

/* ----- Журнал боёв §152 --------------------------------------------------- */

.tam-arena__log {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.tam-arena__log-row {
    display: grid;
    grid-template-columns: 38px 1fr auto;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    cursor: pointer;
}

/* Материал и чередование строк живут в раме (§7): здесь только цветная
   грань исхода боя, и она нарочно записана двумя классами — иначе кромка
   рамы, идущая позже, съедает её вместе с шириной. Свои заливки отсюда
   убраны: они были заданы хексом прежнего мира и перебивали раму на
   каждой чётной строке. */
.tam-arena__log-row.is-win { border-left: 3px solid var(--ui-green-light); }
.tam-arena__log-row.is-lose { border-left: 3px solid var(--ui-red-light); }
.tam-arena__log-row.is-draw { border-left: 3px solid var(--ui-ivory-deep); }

.tam-arena__log-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--ui-bg-dark);
}

.tam-arena__log-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.tam-arena__log-top {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.tam-arena__log-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--ui-size-small);
    font-weight: 800;
    color: var(--ui-text-main);
}

.tam-arena__kind {
    flex: 0 0 auto;
    padding: 1px 6px;
    border-radius: var(--ui-radius-sm);
    font-size: var(--ui-size-micro);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    background: color-mix(in srgb, var(--ui-ivory) 10%, transparent);
    /* Подпись рода боя набрана в 9px: на контуре светлого (`--ui-ivory-deep`)
       такой кегль на панели раздела уже не читается, нужен светлый текст. */
    color: var(--ui-ivory-dark);
}

.tam-arena__kind.is-defense {
    background: color-mix(in srgb, var(--ui-blue) 22%, transparent);
    color: color-mix(in srgb, var(--ui-blue-light) 60%, var(--ui-ivory));
}

.tam-arena__kind.is-revenge {
    background: color-mix(in srgb, var(--ui-gold-dark) 30%, transparent);
    color: var(--ui-gold-light);
}

.tam-arena__kind.is-nemesis {
    background: color-mix(in srgb, var(--ui-red) 30%, transparent);
    color: color-mix(in srgb, var(--ui-red-light) 55%, var(--ui-ivory));
}

.tam-arena__log-bottom {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--ui-font-condensed);
    font-size: var(--ui-size-small);
    font-weight: 800;
    color: var(--ui-text-muted);
}

.tam-arena__log-delta.is-win { color: color-mix(in srgb, var(--ui-green-light) 55%, var(--ui-ivory)); }
.tam-arena__log-delta.is-lose { color: color-mix(in srgb, var(--ui-red-light) 55%, var(--ui-ivory)); }

.tam-arena__log-coins {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    color: var(--ui-gold-mid);
}

/*
 * Кнопка реванша (§1 списка владельца).
 *
 * Высота была 25px — под палец такое не попадает, и владелец, промахнувшись
 * пару раз, читал это как «кнопки нет». Ставим полный шаг тапа по высоте
 * и запрещаем строке ужимать её: в узком журнале она сжималась до значка.
 */
.tam-arena__log-revenge {
    flex: 0 0 auto;
    min-height: 40px;
    min-width: 82px;
    padding: 0 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--ui-radius-sm);
    /* Деревянная кнопка со своей гранью, а не полупрозрачная ржавая
       плашка: в журнале их восемь подряд, и плоская рамка в один пиксель
       превращала список в веб-таблицу (§62, §63). */
    border: var(--ui-border) solid var(--ui-panel-edge);
    background:
        var(--ui-dirt-wide),
        var(--ui-dirt),
        linear-gradient(180deg, var(--ui-wood-light) 0%, var(--ui-wood-dark) 100%);
    box-shadow: 0 3px 0 var(--ui-panel-edge), var(--ui-inner-top);
    color: var(--ui-ivory-light);
    font-family: var(--ui-font-condensed);
    font-size: var(--ui-size-small);
    font-weight: 900;
    letter-spacing: 0.03em;
    line-height: 1;
    text-transform: uppercase;
    white-space: nowrap;
    cursor: pointer;
}

/* Долг закрыт: кнопка остаётся на месте, но гаснет и не нажимается (§15). */
.tam-arena__log-revenge.is-done {
    border-color: var(--ui-panel-edge);
    background: linear-gradient(180deg, var(--ui-panel-dark) 0%, var(--ui-bg-dark) 100%);
    box-shadow: none;
    color: var(--ui-ivory-deep);
    cursor: default;
    opacity: .7;
}

/*
 * Помеха — не то же, что закрытый долг.
 *
 * «Отомщено» гаснет насовсем, а этой кнопке завтра снова можно: она
 * приглушена, но живая и на нажатие объясняет причину.
 */
.tam-arena__log-revenge.is-blocked {
    box-shadow: var(--ui-inner-well);
    color: var(--ui-text-muted);
    opacity: .82;
}

.tam-arena__log-revenge:active {
    transform: translateY(var(--ui-press));
    box-shadow: 0 1px 0 var(--ui-panel-edge);
}

/* ----- Забег §138 --------------------------------------------------------- */

.tam-arena__run {
    position: fixed;
    inset: 0;
    z-index: var(--tam-z-scene);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: calc(12px + var(--safe-top)) 12px calc(12px + var(--safe-bottom));
    background: radial-gradient(120% 90% at 50% 12%,
        var(--ui-panel-light) 0%, var(--ui-bg-dark) 62%, var(--ui-bg-deep) 100%);
}

.tam-arena__run[hidden] { display: none; }

/*
 * На время забега шапка и нижнее меню уходят — тем же способом, что и в
 * бою по уровню (battle.css): гасим их, но не снимаем через
 * `display: none`. Измеритель безопасных зон в mvp/services/telegram.js
 * читает их высоты, и обнулять их нельзя. Заодно закрывается и настоящая
 * дыра: без этого нижнее меню оставалось нажимаемым поверх боя, и
 * случайный тап по «Магазину» уносил игрока с недоигранного забега.
 */
body.tam-arena-run .trumpamole__topbar,
body.tam-arena-run .trumpamole__resources-inset,
body.tam-arena-run .trumpamole__bottom-nav {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity var(--tam-t-panel) ease, visibility var(--tam-t-panel) ease;
}

/* Прокрутки под оверлеем нет: случайный скролл — потерянный крот. */
body.tam-arena-run { overflow: hidden; }

.tam-arena__run-inner {
    width: min(440px, 100%);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.tam-arena__run-head {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 8px;
}

.tam-arena__run-side {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.tam-arena__run-side.is-rival {
    align-items: flex-end;
    text-align: right;
}

.tam-arena__run-label {
    font-size: var(--ui-size-small);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--ui-text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

.tam-arena__run-score {
    font-family: var(--ui-font-title);
    font-size: 28px;
    font-weight: 800;
    line-height: 1;
    color: var(--ui-gold);
}

.tam-arena__run-timer {
    min-width: 58px;
    padding: 6px 10px;
    border-radius: var(--ui-radius-sm);
    border: 1px solid color-mix(in srgb, var(--ui-gold) 34%, transparent);
    background: color-mix(in srgb, var(--ui-bg-dark) 86%, transparent);
    font-family: var(--ui-font-title);
    font-size: var(--ui-size-title);
    font-weight: 800;
    text-align: center;
    color: var(--ui-text-main);
}

/* Шкала забега. Материал — §14 рамы; здесь высота и скорость, с которой
   полоса догоняет счёт: в забеге она обязана двигаться заметно быстрее
   спокойных шкал разделов. */
.tam-arena__run-bar {
    height: var(--ui-bar-h-sm);
}

.tam-arena__run-bar-fill {
    height: 100%;
    width: 0;
    transition: width var(--tam-t-panel) linear;
}

/* Поле 3×3. Квадратные лунки: перспективы, как на большом поле, здесь нет
   намеренно — забег арены должен читаться с первого взгляда. */
.tam-arena__field {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.tam-arena__hole {
    position: relative;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: var(--ui-radius-md);
    background: radial-gradient(70% 60% at 50% 78%,
        var(--ui-earth-dark) 0%, var(--ui-earth-hole) 100%);
    overflow: hidden;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.tam-arena__hole-img {
    position: absolute;
    left: 50%;
    bottom: 16%;
    transform: translateX(-50%);
    width: 92%;
    object-fit: contain;
    pointer-events: none;
}

/*
 * Крот стоит не над лункой, а в ней: нижний край картинки заходит внутрь
 * тёмного зева. Иначе получается крот, стоящий позади дырки, — читается
 * как ошибка вёрстки, а не как вылезающий крот.
 */
.tam-arena__mole {
    position: relative;
    z-index: 2;
    width: 64%;
    margin-bottom: 24%;
    object-fit: contain;
    pointer-events: none;
    animation: tam-arena-pop var(--tam-t-tap) ease-out;
}

.tam-arena__mole[hidden] { display: none; }

.tam-arena__hole.is-up { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--ui-gold) 32%, transparent); }
.tam-arena__hole.is-bonus { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--ui-gold) 72%, transparent); }
.tam-arena__hole.is-hit { background: radial-gradient(70% 60% at 50% 70%, var(--ui-gold-light) 0%, var(--ui-panel-dark) 70%); }

@keyframes tam-arena-pop {
    from { transform: translateY(38%) scale(0.86); opacity: 0.4; }
    to   { transform: translateY(0) scale(1); opacity: 1; }
}

.tam-arena__run-hint {
    text-align: center;
    font-size: var(--ui-size-small);
    font-weight: 700;
    color: var(--ui-text-muted);
}

/* ----- Окна: VS-интро, результат, ритуал, правила ------------------------- */

.tam-arena__vs {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 8px;
}

.tam-arena__vs-side {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    min-width: 0;
    animation: tam-arena-in-left var(--tam-t-modal) ease-out;
}

.tam-arena__vs-side.is-rival { animation-name: tam-arena-in-right; }

@keyframes tam-arena-in-left {
    from { transform: translateX(-28px); opacity: 0; }
    to   { transform: translateX(0); opacity: 1; }
}

@keyframes tam-arena-in-right {
    from { transform: translateX(28px); opacity: 0; }
    to   { transform: translateX(0); opacity: 1; }
}

.tam-arena__vs-avatar {
    width: 68px;
    height: 68px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid color-mix(in srgb, var(--ui-gold) 42%, transparent);
    background: var(--ui-bg-dark);
}

.tam-arena__vs-crest {
    width: 30px;
    height: 30px;
    margin-top: -14px;
    object-fit: contain;
}

.tam-arena__vs-name {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--ui-size-small);
    font-weight: 800;
    color: var(--ui-text-main);
}

.tam-arena__vs-rating {
    font-family: var(--ui-font-condensed);
    font-size: var(--ui-size-body);
    font-weight: 800;
    color: var(--ui-gold-mid);
}

.tam-arena__vs-hammer {
    width: 34px;
    height: 34px;
    object-fit: contain;
}

.tam-arena__vs-mark {
    font-family: var(--ui-font-title);
    font-size: 26px;
    font-weight: 800;
    color: var(--ui-red-light);
    text-shadow: var(--ui-text-shadow-md);
    animation: tam-arena-slam var(--tam-t-modal) ease-out var(--tam-t-state) backwards;
}

@keyframes tam-arena-slam {
    from { transform: scale(2.2); opacity: 0; }
    to   { transform: scale(1); opacity: 1; }
}

.tam-arena__result,
.tam-arena__card,
.tam-arena__rules { display: flex; flex-direction: column; gap: 6px; }

.tam-arena__result-head {
    font-family: var(--ui-font-title);
    font-size: var(--ui-size-body);
    font-weight: 800;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--ui-gold);
}

/* Заголовок поражения — красный словаря. Прежний `--rose` после смены
   палитры стал тёмно-фиолетовым (#422dac) и на корпусе окна не читался
   вовсе: игрок видел пустую строку там, где написано «поражение». */
.tam-arena__result.is-lose .tam-arena__result-head { color: var(--ui-red-light); }

.tam-arena__result-row,
.tam-arena__card-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    padding: 6px 0;
    border-bottom: 1px solid color-mix(in srgb, var(--ui-ivory) 10%, transparent);
    font-size: var(--ui-size-small);
    color: var(--ui-text-muted);
}

.tam-arena__result-row strong,
.tam-arena__card-row strong {
    font-weight: 800;
    color: var(--ui-text-main);
    text-align: right;
}

.tam-arena__result-league { margin-top: 6px; }

.tam-arena__result-league-top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 4px;
    font-size: var(--ui-size-small);
    font-weight: 800;
    color: var(--ui-ivory-dark);
}

.tam-arena__promo {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

/* Ритуал §141: старый герб трескается и уходит, новый встаёт в рамку. */
.tam-arena__promo-crests {
    position: relative;
    width: 132px;
    height: 132px;
}

.tam-arena__promo-old,
.tam-arena__promo-new {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.tam-arena__promo-old {
    animation: tam-arena-crest-out var(--tam-t-sheet) ease-in forwards;
}

.tam-arena__promo-new {
    opacity: 0;
    animation: tam-arena-crest-in var(--tam-t-sheet) cubic-bezier(.2, 1.5, .5, 1) var(--tam-t-modal) forwards;
}

@keyframes tam-arena-crest-out {
    0%   { transform: rotate(0) scale(1); opacity: 1; }
    45%  { transform: rotate(-7deg) scale(0.98); opacity: 1; }
    100% { transform: rotate(24deg) translateY(70px) scale(0.7); opacity: 0; }
}

@keyframes tam-arena-crest-in {
    from { transform: scale(0.2); opacity: 0; }
    to   { transform: scale(1); opacity: 1; }
}

.tam-arena__promo-name {
    font-family: var(--ui-font-title);
    font-size: var(--ui-size-value);
    font-weight: 800;
    text-transform: uppercase;
    color: var(--ui-gold);
}

.tam-arena__promo-note {
    text-align: center;
    font-size: var(--ui-size-small);
    color: var(--ui-ivory-dark);
}

.tam-arena__rules-line {
    margin: 0;
    font-size: var(--ui-size-small);
    line-height: 1.45;
    color: var(--ui-ivory-dark);
}

.tam-arena__ladder {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: 6px;
}

/* Материал и чередование строк лестницы — §7 рамы. */
.tam-arena__ladder-row {
    display: grid;
    grid-template-columns: 28px 1fr auto auto;
    align-items: center;
    gap: 8px;
    padding: 5px 8px;
    font-size: var(--ui-size-small);
}

.tam-arena__ladder-row img {
    width: 28px;
    height: 28px;
    object-fit: contain;
    /* Недостигнутая лига стоит силуэтом, как закрытая карточка коллекции. */
    filter: grayscale(1) brightness(0.55);
}

.tam-arena__ladder-row.is-reached img { filter: none; }

/* Текущая лига подсвечена золотом поверх материала строки, а не вместо
   него: ровная заливка одним цветом выпадает из ряда сразу — на кадрах
   яркость гуляет внутри каждой поверхности. Поэтому пыль по золоту. */
.tam-arena__ladder-row.is-current {
    background:
        var(--ui-dirt-lite),
        linear-gradient(180deg,
            color-mix(in srgb, var(--ui-gold) 26%, var(--ui-panel-light)) 0%,
            color-mix(in srgb, var(--ui-gold) 14%, var(--ui-wood)) 100%);
    color: var(--ui-text-main);
}

.tam-arena__ladder-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 800;
}

.tam-arena__ladder-from { font-family: var(--ui-font-condensed); }

.tam-arena__ladder-coins {
    min-width: 34px;
    text-align: right;
    color: var(--ui-gold-mid);
    font-weight: 800;
}

.tam-arena__taunts {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.tam-arena__taunts-note {
    margin: 0 0 2px;
    font-size: var(--ui-size-small);
    line-height: 1.4;
    color: var(--ui-text-muted);
}

.tam-arena__taunt {
    min-height: 40px;
    padding: 10px 12px;
    border-radius: var(--ui-radius-sm);
    border: 1px solid color-mix(in srgb, var(--ui-gold-light) 16%, transparent);
    background:
        var(--ui-dirt-wide),
        var(--ui-dirt),
        linear-gradient(180deg,
            color-mix(in srgb, var(--ui-bg-dark) 62%, transparent) 0%,
            color-mix(in srgb, var(--ui-bg-deep) 62%, transparent) 100%);
    color: var(--ui-ivory);
    font-size: var(--ui-size-small);
    font-weight: 800;
    text-align: left;
    cursor: pointer;
}

/* Выбранная насмешка — золото с пылью: ровная заливка тут читалась бы
   наклейкой поверх списка, а не выбранной строкой этого же списка. */
.tam-arena__taunt.is-active {
    border-color: color-mix(in srgb, var(--ui-gold) 52%, transparent);
    background:
        var(--ui-dirt-lite),
        linear-gradient(180deg,
            color-mix(in srgb, var(--ui-gold) 22%, var(--ui-panel-main)) 0%,
            color-mix(in srgb, var(--ui-gold) 12%, var(--ui-bg-dark)) 100%);
    color: var(--ui-gold-light);
}

/* ----- Узкий экран -------------------------------------------------------- */

@media (max-width: 359px) {
    .tam-arena__hero-inner { grid-template-columns: 78px 1fr; }
    .tam-arena__crest-wrap { width: 78px; height: 78px; }
    .tam-arena__rating { font-size: 21px; }
    .tam-arena__podium { gap: 4px; }
    .tam-arena__rival { padding: 8px 4px; }
    .tam-arena__rival-avatar { width: 44px; height: 44px; }
    .tam-arena__rival.is-main .tam-arena__rival-avatar { width: 56px; height: 56px; }
    .tam-arena__poster { grid-template-columns: 74px 1fr; }
    .tam-arena__poster-portrait img { width: 74px; height: 74px; }
    .tam-arena__defense-rows { grid-template-columns: 1fr; }
}