/* ==========================================================================
   БОНУСНАЯ ИГРА (награда за новый уровень)

   Партия в карточки: доска 6×6, пять попыток, три одинаковых предмета —
   награда. Раздел жил вообще без стилей: разметка ссылалась на классы
   `bonus-game-grid`, `card`, `stat-box`, `reward-item-large`, `btn
   primary` — ни одного из них нет ни в одном файле игры. Доска
   показывалась столбиком картинок во всю ширину окна, кнопки — ссылками
   браузера, награда — списком слов. Это ровно тот «обычный HTML посреди
   игры», который запрещает §62 ТЗ.

   Здесь только ГЕОМЕТРИЯ и состояния карточки. Материал доски, счётчиков
   и кнопок приходит из `ui-frame.css` (§8 — выемка, §10 — чип, §9 —
   кнопки): свои градиенты и рамки раздел не заводит.
   ========================================================================== */

/*
 * Окно партии шире и теснее обычного.
 *
 * Шесть карточек в ряд при штатных 14px полей давали ячейку в 39px на
 * телефоне 320px — меньше пальца (§49). Поля сжаты до 10px, и ячейка
 * дотягивает до 43px, а на 360px и шире — до полноценных 48-52px.
 */
.tam-bonusgame-modal .trumpamole__modal-card {
    padding: 12px 10px;
}

/* ===== СЧЁТЧИКИ ПАРТИИ ===== */

.tam-bonusgame__stats {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: var(--space-1);
    margin: 0 0 var(--space-2);
}

/* Подсказка — квадратная кнопка в строке счётчиков. Материал §12 рамы,
   здесь только размер: ссылка раздела вытянута под подпись, а тут значок. */
.tam-bonusgame__stats .tam-bonusgame__hint {
    justify-content: center;
    /* 48px, а не полный тап в 56: на 320px строка счётчиков состоит из
       трёх плашек, и лишние восемь пикселей забирали у ряда находок
       третий предмет — «жизни» уезжали за край чипа. Палец достаёт: §49
       требует минимум 44. */
    width: 48px;
    min-width: 48px;
    padding: 0;
    color: var(--ui-gold-light);
}

.tam-bonusgame__stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 6px 8px;
    /* Плашка находок должна уметь сжиматься: без `min-width: 0` элемент
       грида держит ширину содержимого и вылезает за край окна. */
    min-width: 0;
}

.tam-bonusgame__stat:first-child { min-width: 58px; }

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

/* Попыток осталось — самое важное число партии: игрок считает по нему,
   стоит ли открывать наугад. */
.tam-bonusgame__stat-value {
    font-family: var(--font-condensed);
    font-weight: 900;
    font-size: var(--ui-size-title);
    line-height: 1;
    color: var(--ui-gold-light);
    text-shadow: 0 2px 0 rgba(0, 0, 0, .55);
    display: inline-block;
    transition: transform var(--tam-t-state) cubic-bezier(.2, .8, .2, 1);
}

.tam-bonusgame__stat-value.is-bump {
    animation: tamBonusBump var(--tam-t-modal) cubic-bezier(.2, .8, .2, 1);
}

@keyframes tamBonusBump {
    0%   { transform: scale(1); }
    38%  { transform: scale(1.28); }
    100% { transform: scale(1); }
}

.tam-bonusgame__tally-row {
    display: flex;
    align-items: center;
    justify-content: space-around;
    gap: 4px;
    min-width: 0;
}

.tam-bonusgame__tally {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 4px 2px 2px;
    flex: 0 1 auto;
    border-radius: var(--ui-radius-pill);
    border: 1px solid transparent;
    line-height: 1;
}

.tam-bonusgame__tally img {
    width: 24px;
    height: 24px;
    object-fit: contain;
    /* Пока тройка не собрана, предмет лежит приглушённым: ряд подсказывает,
       ЧТО можно собрать, но не притворяется добычей. Обесцвечивать сильно
       нельзя — цвет здесь и есть опознавательный знак предмета (§81):
       на 24px золотая монета и красное сердце различаются прежде всего им,
       и в сером виде оба читались одинаковым пятном. */
    filter: saturate(.55) brightness(.82);
    opacity: .8;
    transition: filter var(--tam-t-state) ease, opacity var(--tam-t-state) ease;
}

.tam-bonusgame__tally b {
    font-family: var(--font-condensed);
    font-weight: 900;
    font-size: var(--ui-size-body);
    color: var(--ui-text-main);
    text-shadow: 0 2px 0 rgba(0, 0, 0, .5);
}

/* Тройка собрана — счётчик загорается золотом: это и есть условие
   награды, и видеть его игрок должен на доске, а не в итоге партии. */
.tam-bonusgame__tally.is-full {
    border-color: var(--ui-gold-dark);
    background: radial-gradient(closest-side,
        color-mix(in srgb, var(--ui-gold-light) 26%, transparent), transparent 78%);
}

.tam-bonusgame__tally.is-full img { filter: none; opacity: 1; }
.tam-bonusgame__tally.is-full b   { color: var(--ui-gold-light); }

/* ===== ДОСКА ===== */

.tam-bonusgame__board {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 5px;
    padding: 7px;
    margin: 0 0 var(--space-2);
}

/* ===== КАРТОЧКА ===== */

.tam-bonusgame__cell {
    position: relative;
    aspect-ratio: 1 / 1;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    transform-style: preserve-3d;
    /* 320 мс: предмет вставляют в середине переворота, через 260 мс
       (`modules/tasks/bonusgame.js`) — сократи кадр, и он появится
       на уже развернувшейся карточке. */
    transition: transform calc(var(--tam-t-sheet) - var(--tam-t-tap)) cubic-bezier(.2, .8, .2, 1);
    -webkit-tap-highlight-color: transparent;
}

.tam-bonusgame__cell.is-open {
    transform: rotateY(180deg);
    cursor: default;
}

/* Селекторы карточки идут с родителем намеренно: рама подключена
   последней, и при равной силе её §8 и §11 перебивают файл раздела —
   лицо карточки получало бы скругление и высоту вкладки. */
.tam-bonusgame__cell .tam-bonusgame__face {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--ui-radius-sm);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    overflow: hidden;
}

/* Рубашка берёт материал контрола в покое из рамы (§11): дерево, тёмная
   кромка, фаска сверху, грань снизу. Здесь — только размер: ряд вкладок
   высотой 42px в ячейке доски вылез бы за её край. Знак на рубашке
   декоративный (§100: простой глиф — SVG). */
.tam-bonusgame__cell .tam-bonusgame__face--back {
    min-height: 0;
    padding: 0;
    color: var(--ui-gold-mid);
}

.tam-bonusgame__cell .tam-bonusgame__face--back .tam-icon {
    opacity: .55;
    filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .5));
}

/* Открытая карточка — выемка в доске (§8 рамы): предмет лежит В ней. */
.tam-bonusgame__cell .tam-bonusgame__face--front {
    transform: rotateY(180deg);
}

.tam-bonusgame__cell .tam-bonusgame__face--front img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 2px;
}

.tam-bonusgame__void {
    display: flex;
    color: var(--ui-ivory-deep);
    opacity: .7;
}

/* Находка вспыхивает золотом один раз — §46 («juice» на награду), но без
   непрерывного мерцания: тридцать шесть пульсирующих ячеек превратили бы
   доску в аттракцион (§45). */
.tam-bonusgame__cell.is-win .tam-bonusgame__face--front {
    border-color: var(--ui-gold-dark);
    box-shadow: var(--ui-inner-well), var(--ui-glow-gold);
    animation: tamBonusWin var(--tam-t-sheet) ease-out;
}

@keyframes tamBonusWin {
    0%   { box-shadow: var(--ui-inner-well), 0 0 0 transparent; }
    45%  { box-shadow: var(--ui-inner-well), var(--ui-glow-gold-hot); }
    100% { box-shadow: var(--ui-inner-well), var(--ui-glow-gold); }
}

/* Ячейка, открытая в прошлый заход: предмет на месте, вспышки нет.
   Вспышка — отклик на удар по карточке, а при возврате в партию пять
   ячеек полыхнули бы разом и читались бы как только что взятая награда. */
.tam-bonusgame__cell.is-restored .tam-bonusgame__face--front {
    animation: none;
}

.tam-bonusgame__cell.is-void .tam-bonusgame__face--front {
    opacity: .74;
}

/* Подсказка держит золотую обводку полторы секунды. */
.tam-bonusgame__cell.is-hinted .tam-bonusgame__face--back {
    border-color: var(--ui-gold);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14),
                inset 0 -3px 0 rgba(0, 0, 0, .40),
                0 0 16px color-mix(in srgb, var(--ui-gold) 75%, transparent);
}

/* Нажатие: карточка уходит вниз на свою грань — та же физика, что у
   кнопок и вкладок игры. */
.tam-bonusgame__cell:not(.is-open):active {
    transform: translateY(2px) scale(.96);
}

/* Объявление находки всплывает НАД доской, а не по центру окна: в
   середине оно накрывало три карточки, в том числе только что открытую —
   ту самую, ради которой и появилось. */
.tam-bonusgame-modal .game-message {
    top: 96px;
}

/* ===== ПРИГЛАШЕНИЕ ===== */

.tam-bonusgame__preview {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    margin: 0 0 var(--space-2);
}

.tam-bonusgame__preview-art {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-1);
}

.tam-bonusgame__preview-art img {
    width: 62px;
    height: 62px;
    object-fit: contain;
    filter: drop-shadow(var(--ui-art-shadow-sm));
}

.tam-bonusgame__preview-note {
    font-family: var(--font-condensed);
    font-weight: 900;
    font-size: var(--ui-size-small);
    letter-spacing: .04em;
    text-transform: uppercase;
    text-align: center;
    color: var(--ui-gold-light);
    text-shadow: 0 2px 0 rgba(0, 0, 0, .5);
}

/* Приглашение и итог показывают предметы крупно, поэтому подпись правила
   в самом окне партии не повторяется — там она стоит подзаголовком. */
.tam-bonusgame-modal .tam-bonusgame__board + .trumpamole__modal-actions {
    margin-top: 0;
}