/**
 * QSM Flip Cards — стили виджета на фронтенде.
 * Все селекторы ограничены префиксом .qsm-fc, чтобы не конфликтовать с темами.
 */

.qsm-fc {
        --qsm-fc-accent: #4f6df5;
        --qsm-fc-accent-soft: #eef1ff;
        --qsm-fc-accent-glow: rgba(79, 109, 245, 0.28);
        --qsm-fc-green: #21a05a;
        --qsm-fc-green-soft: #e8f7ee;
        --qsm-fc-border: #d7dce8;
        --qsm-fc-text: #2c3247;
        --qsm-fc-muted: #7a819c;

        margin: 10px 0 16px;
        font-size: 16px;
        line-height: 1.45;
        color: var(--qsm-fc-text);
}

.qsm-fc *,
.qsm-fc *::before,
.qsm-fc *::after {
        box-sizing: border-box;
}

.qsm-fc-hint {
        margin: 0 0 12px;
        color: var(--qsm-fc-muted);
        font-size: 0.9em;
}

.qsm-fc-error {
        margin: 8px 0;
        padding: 10px 12px;
        border: 1px solid #e0b4b4;
        background: #fdf3f3;
        color: #9f3a38;
        border-radius: 6px;
        font-size: 14px;
}

/* ---------- Прогресс ---------- */

.qsm-fc-progress-wrap {
        display: flex;
        align-items: center;
        gap: 12px;
        margin: 0 0 14px;
}

.qsm-fc-progress-counter {
        flex: 0 0 auto;
        font-size: 0.85em;
        color: var(--qsm-fc-muted);
        white-space: nowrap;
}

.qsm-fc-progress-bar {
        flex: 1 1 auto;
        display: block;
        height: 8px;
        border-radius: 999px;
        background: #edf0f7;
        overflow: hidden;
}

.qsm-fc-progress-fill {
        display: block;
        height: 100%;
        width: 0;
        border-radius: 999px;
        background: linear-gradient(90deg, var(--qsm-fc-accent), #7b8ffa);
        transition: width 0.4s ease;
}

/* ---------- Сетка карточек ---------- */

.qsm-fc-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
        /* Все ряды одной высоты: карточка с длинным текстом увеличивает высоту
           ряда, а остальные карточки автоматически подстраиваются под неё —
           ничего не наезжает друг на друга и не обрезается. */
        grid-auto-rows: 1fr;
        gap: 16px;
}

/* ---------- Карточка и 3D-переворот ---------- */

.qsm-fc-card {
        position: relative;
        /* Сетка вместо фиксированной высоты: карточка растёт вместе с текстом
           любой из сторон (высота = max(лицевая, оборот)), прокрутки нет. */
        display: grid;
        min-height: 220px;
        cursor: pointer;
        outline: none;
        perspective: 1200px;
        -webkit-tap-highlight-color: transparent;
        border-radius: 14px; /* рамка фокуса повторяет скругление карточки */
}

.qsm-fc-card:focus-visible {
        box-shadow: 0 0 0 3px var(--qsm-fc-accent-glow);
}

.qsm-fc-flipper {
        display: grid; /* обе стороны в одной ячейке — см. .qsm-fc-face */
        transform-style: preserve-3d;
        -webkit-transform-style: preserve-3d;
        transition: transform 0.5s cubic-bezier(0.4, 0.1, 0.2, 1);
}

/* Лёгкий подъём при наведении — только пока карточка не перевёрнута. */
.qsm-fc-card:not(.qsm-fc-flipped):not(.qsm-fc-card-done):hover .qsm-fc-flipper {
        transform: translateY(-3px);
}

.qsm-fc-card.qsm-fc-flipped .qsm-fc-flipper {
        transform: rotateY(180deg);
}

.qsm-fc-face {
        /* Обе стороны лежат в одной ячейке сетки: контейнер получает высоту
           большей из сторон, сами стороны растягиваются на всю карточку. */
        grid-area: 1 / 1;
        position: relative;
        min-width: 0;
        display: flex;
        flex-direction: column;
        padding: 16px 16px 14px;
        background: #ffffff;
        border: 1px solid var(--qsm-fc-border);
        border-radius: 14px;
        box-shadow: 0 2px 10px rgba(20, 26, 51, 0.06);
        backface-visibility: hidden;
        -webkit-backface-visibility: hidden;
}

/* Лицевая сторона: вопрос, по центру. Цвет — фирменный фон сайта. */
.qsm-fc-face.qsm-fc-front {
        background: #EEE9F4;
        align-items: center;
        justify-content: center;
        text-align: center;
        transform: rotateY(0deg); /* страховка backface-visibility для старых WebKit */
}

.qsm-fc-front-text {
        font-weight: 600;
        font-size: 1.08em;
        max-width: 100%;
        overflow-wrap: anywhere;
}

/* Значок «перевернуть» в углу лицевой стороны. */
.qsm-fc-flip-hint {
        position: absolute;
        right: 10px;
        bottom: 8px;
        font-size: 14px;
        color: var(--qsm-fc-muted);
        opacity: 0.7;
}

/* Оборот: ответ (или задание) и кнопка «Готово». */
.qsm-fc-face.qsm-fc-back {
        transform: rotateY(180deg);
        background: #ffffff;
        border-color: #c9d2f0;
}

.qsm-fc-back-text {
        flex: 1 1 auto; /* занимает всё место над кнопкой «Готово» */
        max-width: 100%;
        overflow-wrap: anywhere;
}

/* ---------- Кнопка «Готово» ---------- */

.qsm-fc-done {
        flex: 0 0 auto;
        margin-top: 12px;
        width: 100%;
        padding: 9px 14px;
        border: 0;
        border-radius: 9px;
        background: var(--qsm-fc-green);
        color: #ffffff;
        font-family: inherit;
        font-size: 0.95em;
        font-weight: 600;
        line-height: 1.2;
        cursor: pointer;
        appearance: none;
        -webkit-appearance: none;
        transition: background-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.qsm-fc-done:hover:not(:disabled) {
        background: #1b8a4d;
        box-shadow: 0 2px 8px rgba(33, 160, 90, 0.35);
}

.qsm-fc-done:focus-visible {
        outline: 2px solid var(--qsm-fc-green);
        outline-offset: 2px;
}

.qsm-fc-done:active:not(:disabled) {
        transform: translateY(1px);
}

.qsm-fc-done:disabled {
        cursor: default;
        opacity: 0.75;
}

/* Карточка в процессе исчезновения: контент спрятан, место в сетке занято. */
.qsm-fc-card.qsm-fc-card-done {
        pointer-events: none;
}

.qsm-fc-card.qsm-fc-vanish {
        visibility: hidden;
}

/* ---------- Распадение: полосы и брызги ---------- */

.qsm-fc-shatter {
        position: fixed;
        z-index: 99999;
        pointer-events: none;
        overflow: visible;
}

/* Полоса — клон стороны карточки: класс qsm-fc-strip добавляется к клона
   .qsm-fc-face, поэтому сохраняются фон, рамка и содержимое. Анимация
   разлёта переопределяет трансформации 3D-переворота. */
.qsm-fc-strip {
        animation: qsm-fc-strip-fly 0.62s cubic-bezier(0.25, 0.6, 0.3, 1) both;
        will-change: transform, opacity;
}

@keyframes qsm-fc-strip-fly {
        0% {
                transform: translate(0, 0) rotate(0deg);
                opacity: 1;
        }
        100% {
                transform: translate(var(--fc-dx, 0px), var(--fc-dy, 40px)) rotate(var(--fc-rot, 12deg));
                opacity: 0;
        }
}

.qsm-fc-spark {
        position: absolute;
        border-radius: 50%;
        background: var(--qsm-fc-accent);
        box-shadow: 0 0 6px var(--qsm-fc-accent-glow);
        animation: qsm-fc-spark-fly 0.6s ease-out both;
        will-change: transform, opacity;
}

.qsm-fc-spark-alt {
        background: var(--qsm-fc-green);
        box-shadow: 0 0 6px rgba(33, 160, 90, 0.35);
}

@keyframes qsm-fc-spark-fly {
        0% {
                transform: translate(0, 0) scale(1);
                opacity: 1;
        }
        100% {
                transform: translate(var(--fc-px, 40px), var(--fc-py, 40px)) scale(0.15);
                opacity: 0;
        }
}

/* ---------- Финальное сообщение ---------- */

.qsm-fc-complete {
        display: none;
        margin-top: 16px;
        padding: 16px 18px;
        border: 2px dashed var(--qsm-fc-green);
        background: var(--qsm-fc-green-soft);
        border-radius: 12px;
        text-align: center;
}

.qsm-fc.qsm-fc-finished .qsm-fc-complete {
        display: block;
        animation: qsm-fc-pop-in 0.35s ease;
}

.qsm-fc-complete-title {
        display: block;
        font-weight: 700;
        color: #157347;
        margin-bottom: 4px;
}

.qsm-fc-complete-text {
        display: block;
        color: var(--qsm-fc-muted);
        font-size: 0.9em;
}

@keyframes qsm-fc-pop-in {
        0% {
                opacity: 0;
                transform: scale(0.96);
        }
        100% {
                opacity: 1;
                transform: scale(1);
        }
}

/* ---------- Страница результатов ---------- */

.qsm-fc-results {
        display: flex;
        flex-direction: column;
        gap: 4px;
}

.qsm-fc-correct-list {
        display: flex;
        flex-direction: column;
        gap: 4px;
}

/* ---------- Доступность и мобильные ---------- */

/* Пользователям с отключённой анимацией — без движения. */
@media (prefers-reduced-motion: reduce) {
        .qsm-fc-flipper,
        .qsm-fc-done,
        .qsm-fc-progress-fill {
                transition: none;
        }

        .qsm-fc-strip,
        .qsm-fc-spark {
                animation: none;
                opacity: 0;
        }

        .qsm-fc.qsm-fc-finished .qsm-fc-complete {
                animation: none;
        }
}

@media (max-width: 600px) {
        .qsm-fc-grid {
                grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
                gap: 12px;
        }

        .qsm-fc-card {
                min-height: 190px;
        }

        .qsm-fc-face {
                padding: 13px 13px 12px;
        }

        .qsm-fc-done {
                padding: 10px 14px; /* крупнее зона нажатия на тач-экранах */
        }
}