/* --- STYLES FOR FLASHCARD APP (V-FINAL - MAX STRENGTH) --- */
/*
* This version uses !important to force these rules to win
* against any conflicting styles from your main CSS.
*/

#flashcard-container {
    width: 100%;
    /* Sets the stable height */
    aspect-ratio: 16 / 9; /* Or 3/2, 4/3 */
    /* CRITICAL for 3D */
    perspective: 1000px !important;
}

#flashcard-container #flashcard-inner {
    /* CRITICAL for stacking */
    position: relative !important;
    width: 100%;
    height: 100%;
    transition: transform 0.6s !important;
    /* CRITICAL for 3D */
    transform-style: preserve-3d !important;
}

/* The flip animation rule */
#flashcard-container.is-flipped #flashcard-inner {
    transform: rotateY(180deg) !important;
}

/* Rules for BOTH faces */
#flashcard-container #flashcard-inner #flashcard-front,
#flashcard-container #flashcard-inner #flashcard-back {
    /* CRITICAL for stacking */
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    
    /* CRITICAL for hiding the back */
    -webkit-backface-visibility: hidden !important;
    backface-visibility: hidden !important;
    
    /* These are your styles, likely fine */
    border-radius: 0.5rem;
    overflow: auto; 
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 1rem;
    border: 1px solid #ddd;
}

/* Front face styling */
#flashcard-front {
    background-color: #767382;
}

/* Back face styling */
#flashcard-back {
    background-color: #476554;
    /* CRITICAL for starting pre-flipped */
    transform: rotateY(180deg) !important;
}