/* Лицо карты: одно и то же в таверне, на поле, в триплете и в справочнике (§10, §33).
   Файл общий для стола и страниц справочника, поэтому цвета и шрифты берутся с запасными
   значениями: набор переменных у стола и у справочника разный (§65). */

.face {
    position: relative;
    border-radius: 12px;
    border: 1px solid rgba(217, 177, 104, 0.3);
    background: linear-gradient(180deg, var(--cardTop, #2b3550), #10142a);
    /* Нижний отступ маленький: характеристики больше не «висят» в пустой полосе, а лежат на рисунке. */
    padding: 8px 8px 10px;
    min-height: 128px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    /* Имя карты и текст способности — по центру: так карта читается как табличка (§10). */
    text-align: center;
    color: var(--text, #e8e9f2);
    transition: transform 0.12s ease, box-shadow 0.16s ease;
}

/* Уровень таверны красит верх карты: цвет — это уровень, бейдж — его цифра. */
.face[data-tier="1"] { --cardTop: #2f3a58; }
.face[data-tier="2"] { --cardTop: #2c4a52; }
.face[data-tier="3"] { --cardTop: #3a3a5e; }
.face[data-tier="4"] { --cardTop: #4a3557; }
.face[data-tier="5"] { --cardTop: #553a30; }
.face[data-tier="6"] { --cardTop: #6a4a20; }

.face.golden {
    border-color: var(--gold, #d9b168);
    box-shadow: 0 0 0 1px rgba(240, 214, 144, 0.5), 0 0 22px rgba(217, 177, 104, 0.25);
}

.face.spell {
    border-color: rgba(180, 139, 255, 0.5);
}

.faceArt {
    position: relative;
    /* Арт карты квадратный и рисуется «по высоте картинки»: высота блока равна ширине (§10, §14). */
    aspect-ratio: 1 / 1;
    border-radius: 9px;
    overflow: hidden;
    background: radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.14), transparent 60%),
        linear-gradient(160deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.6));
    display: grid;
    place-items: center;
}

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

/*
 * Уровень таверны: бейдж сверху справа. Он лежит рядом с рисунком, а не внутри его рамки:
 * рамка рисунка обрезает всё лишнее по скруглению, и бейдж «уезжал под маску» (§10).
 */
.faceTier {
    position: absolute;
    top: 6px;
    right: 6px;
    z-index: 2;
    min-width: 22px;
    height: 22px;
    padding: 0 5px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    font-size: 12px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: #f4e6c4;
    background: rgba(6, 9, 16, 0.85);
    border: 1px solid rgba(217, 177, 104, 0.65);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.45);
    pointer-events: none;
}

/* Заклинание вместо уровня: знак на рисунке — уровнем таверны заклинания не меряются (§9). */
.faceMark {
    position: absolute;
    top: 6px;
    left: 6px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 12px;
    color: #efe4ff;
    background: rgba(6, 9, 16, 0.85);
    border: 1px solid rgba(180, 139, 255, 0.6);
}

/*
 * Наложенное усиление: чип внизу карты, рядом с ключевыми словами вроде щита — там игрок и ищет
 * состояние карты (§13, §18). Он стоит в потоке, поэтому не перекрывает ни рисунок, ни цифры.
 */
.faceBuffs {
    display: flex;
    justify-content: center;
}

.faceBuff {
    padding: 1px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: #d8ffd0;
    background: rgba(20, 60, 30, 0.85);
    border: 1px solid rgba(168, 233, 168, 0.75);
    white-space: nowrap;
}

/* Золотая карта: усиление поверх золота читается теплее (§11). */
.face.golden .faceBuff {
    background: rgba(70, 58, 20, 0.85);
    border-color: rgba(240, 214, 144, 0.85);
    color: #ffeec2;
}

/*
 * Ключевые слова меняют облик карты: щит, провокация и неуловимость видны по рамке, а не только
 * строкой под именем. Это «стандартные вещи», которые игрок должен узнавать с одного взгляда (§10, §18).
 */
.face.kw-shield {
    border-color: rgba(140, 200, 255, 0.75);
    box-shadow: 0 0 0 1px rgba(140, 200, 255, 0.35), 0 0 16px rgba(90, 160, 255, 0.25);
}

.face.kw-taunt {
    border-color: rgba(217, 177, 104, 0.8);
    box-shadow: inset 0 0 0 3px rgba(120, 100, 60, 0.35);
}

.face.kw-elusive {
    border-color: rgba(180, 139, 255, 0.75);
    box-shadow: 0 0 0 1px rgba(180, 139, 255, 0.35), 0 0 16px rgba(150, 110, 255, 0.22);
}

.face.kw-immunemagic {
    border-color: rgba(120, 220, 210, 0.7);
}

/* Провокация и щит вместе: рамка бойца читается как «держит удар» (§18). */
.face.kw-taunt.kw-shield {
    border-color: rgba(160, 200, 255, 0.85);
}

/*
 * Значки ключевых слов лежат на рисунке карты, а не строкой под именем: щит, провокация и
 * неуловимость видны с одного взгляда, а здоровье и атака остаются на своих местах (§10, §18).
 */
.faceArt .kwMarks {
    position: absolute;
    top: 30px;
    left: 4px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    z-index: 3;
    pointer-events: none;
}

.kwMark {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: rgba(6, 9, 16, 0.8);
    border: 1px solid rgba(217, 177, 104, 0.6);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.45);
    color: #f4e6c4;
}

.kwMark .icon {
    width: 13px;
    height: 13px;
}

.kwMark.kw-shield {
    color: #9ccaff;
    border-color: rgba(140, 200, 255, 0.8);
}

.kwMark.kw-taunt {
    color: #f0d690;
}

.kwMark.kw-elusive {
    color: #c4a7ff;
    border-color: rgba(180, 139, 255, 0.8);
}

.kwMark.kw-immunemagic {
    color: #8fe0d8;
    border-color: rgba(120, 220, 210, 0.8);
}

/*
 * Ключевые слова видно не только значком: щит накрывает рисунок голубым куполом, провокация
 * подсвечивает карту тёплым пульсирующим кольцом, неуловимость мерцает, защита от магии даёт
 * зеленоватый отблеск. Эффект живёт на карте и в бою — «что держит удар» видно сразу (§10, §18).
 */
.faceArt::after,
.battleCard::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.face.kw-shield .faceArt::after,
.battleCard.kw-shield::before {
    opacity: 1;
    background: radial-gradient(circle at 50% 40%, rgba(140, 200, 255, 0.28), transparent 68%);
    box-shadow: inset 0 0 0 2px rgba(140, 200, 255, 0.55), inset 0 0 26px rgba(90, 160, 255, 0.45);
    animation: kwShield 2.6s ease-in-out infinite;
}

.face.kw-taunt .faceArt::after,
.battleCard.kw-taunt::before {
    opacity: 1;
    background: radial-gradient(circle at 50% 50%, transparent 45%, rgba(217, 177, 104, 0.28) 100%);
    box-shadow: inset 0 0 0 3px rgba(217, 177, 104, 0.5);
    animation: kwTaunt 1.9s ease-in-out infinite;
}

.face.kw-elusive .faceArt::after,
.battleCard.kw-elusive::before {
    opacity: 1;
    background: linear-gradient(120deg, transparent 20%, rgba(180, 139, 255, 0.3) 45%, transparent 70%);
    box-shadow: inset 0 0 0 1px rgba(180, 139, 255, 0.55);
    animation: kwElusive 2.2s linear infinite;
}

.face.kw-immunemagic .faceArt::after,
.battleCard.kw-immunemagic::before {
    opacity: 1;
    box-shadow: inset 0 0 0 1px rgba(120, 220, 210, 0.6), inset 0 0 18px rgba(120, 220, 210, 0.3);
    animation: kwImmune 3s ease-in-out infinite;
}

@keyframes kwShield {

    0%,
    100% {
        box-shadow: inset 0 0 0 2px rgba(140, 200, 255, 0.45), inset 0 0 18px rgba(90, 160, 255, 0.3);
    }

    50% {
        box-shadow: inset 0 0 0 2px rgba(160, 215, 255, 0.85), inset 0 0 32px rgba(90, 160, 255, 0.6);
    }
}

@keyframes kwTaunt {

    0%,
    100% {
        box-shadow: inset 0 0 0 3px rgba(217, 177, 104, 0.4);
    }

    50% {
        box-shadow: inset 0 0 0 4px rgba(240, 214, 144, 0.75), inset 0 0 24px rgba(217, 177, 104, 0.4);
    }
}

@keyframes kwElusive {
    0% {
        background-position: -120% 0;
    }

    100% {
        background-position: 220% 0;
    }
}

@keyframes kwImmune {

    0%,
    100% {
        opacity: 0.55;
    }

    50% {
        opacity: 1;
    }
}

/* Значок свойства мягко пульсирует: карту со свойством видно и в ряду, и в бою (§10, §18). */
.kwMark {
    animation: kwMarkPulse 2.4s ease-in-out infinite;
}

@keyframes kwMarkPulse {

    0%,
    100% {
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.45);
    }

    50% {
        box-shadow: 0 2px 10px rgba(247, 221, 156, 0.55);
    }
}

@media (prefers-reduced-motion: reduce) {

    .faceArt::after,
    .battleCard::before,
    .kwMark {
        animation: none;
    }
}

/* Золотая цена — только у покупки: значок ставит таверна, справочник цену не показывает (§9, §33). */
.face .cost {
    position: absolute;
    top: -10px;
    left: -10px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-weight: 700;
    font-size: 13px;
    color: #2a1d08;
    background: linear-gradient(180deg, #f7dd9c, var(--gold, #d9b168));
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.45);
}

.faceName {
    font-family: var(--serif, Georgia, "Times New Roman", serif);
    font-size: 13px;
    line-height: 1.2;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.faceAbility {
    font-size: 11px;
    color: var(--muted, #9aa2bd);
    overflow: hidden;
    text-align: center;
}

/*
 * Характеристики лежат НА рисунке, как бейдж уровня сверху: строка стоит в потоке сразу за картинкой
 * с отрицательным отступом, поэтому она «заезжает» на нижний край арта и не обрезается его маской (§10).
 * Имя карты идёт следом — то есть чуть ниже характеристик.
 */
.faceStats {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: -14px 0 0;
}

.statBubble {
    border-radius: 8px;
    padding: 2px 7px;
    font-weight: 700;
    font-size: 13px;
    background: rgba(0, 0, 0, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.12);
}

.statBubble.atk {
    color: #ffcaa8;
}

.statBubble.hp {
    color: #bff0b2;
}

/* Копии, слившиеся в одну карту: чип рядом с характеристиками, а не поверх рисунка (§11). */
.copies {
    font-size: 11px;
    padding: 1px 6px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.6);
    border: 1px solid var(--line, rgba(217, 177, 104, 0.28));
    color: var(--muted, #9aa2bd);
}

.keywords {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    font-size: 10px;
    color: var(--muted, #9aa2bd);
}

/* Таверна: та же карта целиком, но с кнопкой покупки. */

.faceButton {
    flex: 1 1 0;
    min-width: 0;
    padding: 0;
    border: 0;
    background: none;
    border-radius: 12px;
    cursor: pointer;
}

.faceButton .face {
    height: 100%;
    animation: rise 0.3s ease both;
}

.faceButton:hover:not(:disabled) .face {
    transform: translateY(-2px);
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.45);
    border-color: var(--gold, #d9b168);
}

.faceButton:disabled {
    opacity: 0.55;
}

.faceButton.blocked .face {
    filter: grayscale(0.35);
}

@keyframes rise {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: none; }
}