/* ==========================================================================
   Карта как предмет: рубашка, лицо, переворот, золотой маркер.
   Размер задаётся переменной --cw (ширина карты), пропорции 2:3.
   ========================================================================== */

.mcard {
    --cw: 160px;
    --cr: calc(var(--cw) * .06);
    position: relative;
    width: var(--cw);
    aspect-ratio: 2 / 3;
    perspective: 1400px;
    border: 0;
    padding: 0;
    background: none;
}

.mcard__inner {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transition: transform .95s var(--ease-spring);
}

.mcard.is-flipped .mcard__inner { transform: rotateY(180deg); }

.mcard__back,
.mcard__face {
    position: absolute;
    inset: 0;
    border-radius: var(--cr);
    overflow: hidden;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    box-shadow: var(--shadow-card);
}

.mcard__back {
    background: url("../img/card-back.svg") center / cover, linear-gradient(160deg, var(--cardback-1), var(--cardback-2));
}

/* Отблеск на рубашке: свет скользит при наведении */
.mcard__back::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg, transparent 35%, rgba(255, 236, 190, .16) 50%, transparent 65%);
    transform: translateX(-120%);
    transition: transform 1.1s var(--ease-out);
}

.mcard:hover .mcard__back::after { transform: translateX(120%); }

/* Лицо: напечатанная карта с узкими светлыми полями */
.mcard__face {
    transform: rotateY(180deg);
    background: var(--paper);
    padding: calc(var(--cw) * .045);
}

.mcard__art {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
}

.mcard__face img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: calc(var(--cr) * .45);
}

/* Область карты, которую обводит маркер (координаты в % картинки) */
.mcard__spot { position: absolute; }

.mcard--face-up .mcard__face { transform: none; }

/* Слой для линий маркера поверх лица карты */
.mcard__ink {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

/* ---------- Золотой маркер (линия от руки) ---------- */

.marker-svg {
    position: absolute;
    overflow: visible;
    pointer-events: none;
}

.marker-svg path {
    fill: none;
    stroke: var(--marker-color, var(--accent));
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Слово, которое обводит маркер */
.marked {
    position: relative;
    display: inline-block;
    white-space: nowrap;
}