/* Flashcards Professional Design — Root Verified */

.game-flashcards-page .game-main--genesis {
    /* Background in ROOT as per your screenshot */
    background-image: url("Background_Layout_Study_Genesis1.jpg") !important;
    background-size: cover;
    background-position: center top;
    background-attachment: fixed;
    min-height: auto !important;
    display: flex;
    flex-direction: column;
    padding: 40px 20px 100px !important; /* Fixed 100px gap to footer */
}

.game-flashcards-page .game-hero {
    /* Banner in /images/ folder as per your screenshot */
    background-image: url("images/Banner_Study_03.jpg") !important;
    background-size: cover;
    background-position: center;
}

.game-card {
    margin: 0 auto !important;
    max-width: 800px;
    width: 100%;
    text-align: center;
    box-shadow: 0 20px 50px rgba(0,0,0,0.3) !important;
    padding: 45px !important;
    border-radius: 28px !important;
    background: #ffffff !important;
}

.fc-instruction { color: #64748b; font-size: 15px; margin-bottom: 30px; }

/* 3D CARD ANIMATION */
.fc-container {
    perspective: 1200px;
    margin: 20px auto 40px;
    width: 100%;
    max-width: 500px;
    height: 350px;
    cursor: pointer;
}

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

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

.fc-face {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
    border-radius: 30px;
    border: 2px solid #edf2f7;
    box-sizing: border-box;
    box-shadow: 0 10px 25px rgba(0,0,0,0.05);
}

.fc-front { background: #ffffff; color: #0f2336; }
.fc-back { background: #f0f7ff; color: #1e40af; transform: rotateY(180deg); border-color: #bfdbfe; }
.fc-text { font-size: 24px; font-weight: 800; line-height: 1.5; text-align: center; }

.fc-controls { display: flex; justify-content: center; align-items: center; gap: 20px; }
.fc-counter {
    font-weight: 700; color: #64748b; font-size: 16px;
    background: #f1f5f9; padding: 10px 22px; border-radius: 999px;
}