/* ===== Flashcard Flip Animation ===== */

.card-container {
    perspective: 1000px;
    width: 100%;
    max-width: 480px;
    height: 300px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    transform-style: preserve-3d;
}

.card-inner.flipped {
    transform: rotateY(180deg);
}

.card-front,
.card-back {
    position: absolute;
    inset: 0;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    border-radius: 1rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 2rem 1.5rem;
    text-align: center;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
    overflow-y: auto;
}

.card-front {
    background: var(--color-light);
    border: 2px solid var(--color-primary);
}

.card-back {
    background: var(--color-primary);
    transform: rotateY(180deg);
}

/* ===== Responsive Card Sizes ===== */

@media (max-width: 480px) {
    .card-container {
        height: 260px;
        max-width: 100%;
    }
    .card-front,
    .card-back {
        padding: 1.5rem 1rem;
    }
}

@media (min-width: 640px) {
    .card-container {
        height: 320px;
    }
}

@media (min-width: 1024px) {
    .card-container {
        height: 340px;
        max-width: 520px;
    }
}

/* ===== Smooth scrollbar for long answers ===== */

.card-front::-webkit-scrollbar,
.card-back::-webkit-scrollbar {
    width: 4px;
}

.card-front::-webkit-scrollbar-thumb,
.card-back::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.3);
    border-radius: 2px;
}

/* ===== Selection color ===== */
::selection {
    background: var(--color-primary);
    color: white;
}