/* ── Отау: номер внутри, счёт снаружи ───────────────────────────────────────
 *
 * Нормативный владелец расположения цифр отау. Загружается последним и
 * переопределяет milestone.css сознательно, а не по случайности.
 *
 * Что было: `.pit-number` и `.pit-value` — две круглые плашки по
 * `var(--counter-size)` каждая, обе прижаты к верху отау и стоят рядом. На
 * телефоне 390px отау шириной 40.9px, а плашки 17.9px каждая: вдвоём они
 * занимают 87% ширины, и отау выглядит узким, хотя таковым не является.
 *
 * Что стало: счёт уезжает из отау в ряды `#pit-counts-top` / `#pit-counts-bottom`.
 * Эти ряды уже есть в разметке и уже заполняются `renderBoard()` при каждом
 * рендере — их только скрывал `display: none` в milestone.css. Номер отау
 * остаётся внутри, но становится обычной цифрой в углу, а не плашкой.
 *
 * Сетка доски получает две строки вместо прежних пяти строк из milestone.css
 * (474 — общая, 1902 — под @media (max-width: 600px)); обе перечислены здесь
 * целиком, потому что обе объявлены с `!important`.
 * ────────────────────────────────────────────────────────────────────────── */

#screen-game .board-container {
    grid-template-rows:
        minmax(0, 1fr)              /* 1 · row-top          */
        auto                        /* 2 · pit-counts-top   */
        clamp(62px, 11%, 72px)      /* 3 · kazan-top        */
        6px                         /* 4 · board-join       */
        clamp(62px, 11%, 72px)      /* 5 · kazan-bottom     */
        auto                        /* 6 · pit-counts-bottom*/
        minmax(0, 1fr)              /* 7 · row-bottom       */
        !important;
}

#screen-game .row-top          { grid-row: 1 !important; }
#screen-game #pit-counts-top   { grid-row: 2 !important; }
#screen-game .kazan-top        { grid-row: 3 !important; }
#screen-game .board-join       { grid-row: 4 !important; }
#screen-game .kazan-bottom     { grid-row: 5 !important; }
#screen-game #pit-counts-bottom{ grid-row: 6 !important; }
#screen-game .row-bottom       { grid-row: 7 !important; }

/* Ряд счётчиков повторяет сетку отау колонка в колонку, иначе цифра уедет
   от своего отау на узком экране. */
#screen-game .pit-counts-row {
    display: grid !important;
    grid-template-columns: repeat(9, minmax(0, 1fr)) !important;
    gap: var(--pit-gap) !important;
    align-items: center !important;
    min-width: 0 !important;
    min-height: 0 !important;
    z-index: 4 !important;
}

#screen-game .pit-count-label {
    display: block !important;
    min-width: 0 !important;
    text-align: center !important;
    color: rgba(51, 31, 14, 0.9) !important;
    font-size: clamp(12px, 2.6vw, 17px) !important;
    font-weight: 800 !important;
    font-variant-numeric: tabular-nums !important;
    line-height: 1.25 !important;
    text-shadow: 0 1px 0 rgba(255, 246, 226, 0.5) !important;
}

/* Пустой отау: ноль подан приглушённо, чтобы ряд читался как рельеф позиции,
   а не как стена одинаковых цифр. */
#screen-game .pit-count-label[data-empty="true"] {
    color: rgba(88, 62, 36, 0.42) !important;
    text-shadow: none !important;
}

/* Счёт теперь снаружи; внутри отау он был бы вторым источником правды. */
#screen-game .pit .pit-value {
    display: none !important;
}

/* Номер отау — обычная цифра в углу, без плашки: она и создавала ощущение
   узкого отау на пару с плашкой счёта. */
#screen-game .pit .pit-number {
    top: clamp(3px, 0.5vw, 6px) !important;
    left: clamp(4px, 0.7vw, 8px) !important;
    min-width: 0 !important;
    height: auto !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: none !important;
    color: rgba(74, 49, 24, 0.6) !important;
    font-size: clamp(8px, 1.5vw, 11px) !important;
    font-weight: 700 !important;
}

/* Кумалаки начинались ниже плашек. Плашек больше нет — стопка забирает
   освободившуюся высоту обратно, и потеря от двух новых строк сетки почти
   полностью компенсируется. */
#screen-game .stones-stack {
    inset: clamp(13px, 13%, 20px) 5px 5px !important;
}

@media (max-width: 600px) {
    #screen-game .board-container {
        grid-template-rows:
            minmax(0, 1fr) auto 36px 3px 36px auto minmax(0, 1fr) !important;
    }
    #screen-game .pit-count-label { font-size: clamp(11px, 3.2vw, 15px) !important; }
    #screen-game .stones-stack { inset: clamp(11px, 12%, 17px) 4px 4px !important; }
}

/* ── Посадка кумалака: только при самом ходе ─────────────────────────────────
 *
 * `tp-stone-settle` в milestone.css привязана к `.sown-stone`. Этот класс
 * навешивает и `renderBoard()`, который отрабатывает сразу после окончания
 * анимации сева, — и все посаженные ходом кумалаки проигрывали своё появление
 * заново, разом. Это и читалось как «доска перезагрузилась и на миг показала
 * ход ещё раз».
 *
 * Класс `.sown-stone` остаётся: он помечает, какие кумалаки принёс ход.
 * Анимация переезжает на `.is-settling`, который ставит только путь анимации.
 * ────────────────────────────────────────────────────────────────────────── */
#screen-game .stone.sown-stone {
    animation: none !important;
}

#screen-game .stone.is-settling {
    animation: tp-stone-settle var(--tp-stone-settle-ms, 170ms)
        cubic-bezier(.22, .72, .28, 1) both !important;
    will-change: opacity;
}

#screen-game[style*="--tp-stone-settle-ms: 0ms"] .stone.is-settling {
    animation: none !important;
}

@media (prefers-reduced-motion: reduce) {
    #screen-game .stone.is-settling { animation: none !important; }
}

/* Оговорка о силе уровней. Была удалена из разметки в одном из прошлых
   заходов; вернулась вместе с честными подписями уровней по времени. */
#screen-bot-setup .ai-strength-disclosure {
    grid-column: 1 / -1;
    margin: 10px 2px 0;
    color: var(--tp-product-muted, #c8b894);
    font-size: 12px;
    line-height: 1.45;
    text-align: left;
}

/* Лицо соперника-ИИ в карточке партии. Аватар-контейнер рассчитан на букву,
   поэтому картинку надо вписать в него, а не расширить его под картинку. */
#screen-game .match-avatar-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
}

/* ── Лицо уровня на экране выбора ────────────────────────────────────────────
 *
 * Карточка — грид в одну колонку из трёх строк. Добавляем слева колонку под
 * аватар и рисуем его псевдоэлементом: разметка не меняется, а значит не
 * трогается и порядок чтения для скринридера — картинка чисто декоративная,
 * название уровня рядом остаётся текстом.
 *
 * `::after` здесь занят: visual-polish.css вешает на него замок для гостя.
 * Поэтому берём `::before`, который свободен.
 * ────────────────────────────────────────────────────────────────────────── */
.ai-choice-card[data-ai-level] {
    grid-template-columns: var(--ai-face-size, 54px) minmax(0, 1fr) !important;
    column-gap: 11px;
    align-items: center;
}

.ai-choice-card[data-ai-level] > * {
    grid-column: 2;
}

.ai-choice-card[data-ai-level]::before {
    content: '';
    grid-column: 1;
    grid-row: 1 / -1;
    width: var(--ai-face-size, 54px);
    height: var(--ai-face-size, 54px);
    border-radius: 50%;
    background-color: #f2f6fd;
    background-position: center top;
    background-size: cover;
    background-repeat: no-repeat;
    border: 1px solid rgba(212, 162, 76, 0.28);
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.5);
}

.ai-choice-card[data-ai-level="1"]::before { background-image: url("/static/icons/ai-level-1-256.webp?v=1"); }
.ai-choice-card[data-ai-level="2"]::before { background-image: url("/static/icons/ai-level-2-256.webp?v=1"); }
.ai-choice-card[data-ai-level="3"]::before { background-image: url("/static/icons/ai-level-3-256.webp?v=1"); }
.ai-choice-card[data-ai-level="4"]::before { background-image: url("/static/icons/ai-level-4-256.webp?v=1"); }
.ai-choice-card[data-ai-level="5"]::before { background-image: url("/static/icons/ai-level-5-256.webp?v=1"); }
.ai-choice-card[data-ai-level="6"]::before { background-image: url("/static/icons/ai-level-6-256.webp?v=1"); }

/* Закрытый уровень подан приглушённо — как и вся его карточка. */
.ai-choice-card.is-coming-soon::before,
.ai-choice-card[aria-disabled="true"]::before {
    filter: grayscale(0.55) brightness(0.86);
    opacity: 0.7;
}

@media (max-width: 390px) {
    .ai-choice-card[data-ai-level] { --ai-face-size: 46px; column-gap: 9px; }
}

/* ── Метка тренировочного соперника ──────────────────────────────────────────
 * Аккаунт, за который играет компьютер, стоит в одной таблице с живыми
 * игроками. Без этой метки человек не может понять, с кем его сравнили.
 * ────────────────────────────────────────────────────────────────────────── */
.lb-name-row {
    display: flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
}

.lb-name-row > :first-child {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lb-bot-badge {
    flex: 0 0 auto;
    padding: 1px 7px;
    border-radius: 999px;
    border: 1px solid rgba(212, 162, 76, 0.42);
    background: rgba(212, 162, 76, 0.14);
    color: var(--tp-product-gold, #d4a24c);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    line-height: 1.6;
    cursor: help;
}

/* Та же метка в списке открытых столов и в карточке партии. Аккаунт бота
 * стоит и там, и там рядом с живыми игроками, поэтому знак один и тот же:
 * узнав его один раз в лиге, игрок узнаёт его и над доской. */
.tp-play-table-card__name-row {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.tp-play-table-card__name-row > strong {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.match-bot-badge {
    display: inline-block;
    margin-inline-start: 6px;
    vertical-align: middle;
}