.flashcard-container{

display:flex;

justify-content:center;

margin:60px 0;

perspective:1200px;

}

.flashcard{

width:500px;

height:280px;

position:relative;

transform-style:preserve-3d;

transition:transform .7s;

cursor:pointer;

}

.flashcard.flip{

transform:rotateY(180deg);

}

.front,
.back{

position:absolute;

width:100%;

height:100%;

backface-visibility:hidden;

background:white;

border-radius:25px;

box-shadow:0 15px 35px rgba(0,0,0,.12);

display:flex;

flex-direction:column;

justify-content:center;

align-items:center;

padding:30px;

text-align:center;

}

.back{

transform:rotateY(180deg);

}

.front h1{

font-size:60px;
color:#d81b60;
line-height:1.2;
white-space:nowrap;

}



.back h2{

font-size:36px;

color:#d81b60;

margin-bottom:10px;

}

.back h3{

margin-bottom:15px;

}

.lesson-navigation{

display:flex;

justify-content:center;

gap:20px;

margin-bottom:60px;

}

.lesson-navigation button{

padding:15px 35px;

border:none;

border-radius:12px;

background:#d81b60;

color:white;

font-size:16px;

cursor:pointer;

transition:.3s;

}

.lesson-navigation button:hover{

transform:translateY(-4px);

background:#ad1457;

}

.buttons{

display:flex;

gap:15px;

margin-top:20px;

}

.buttons button{

padding:12px 20px;

border:none;

border-radius:10px;

background:#d81b60;

color:white;

cursor:pointer;

transition:.3s;

}

.buttons button:hover{

background:#ad1457;

transform:scale(1.05);

}

.flashcard-controls{max-width:900px;margin:24px auto;padding:20px}
.flashcard-toolbar{display:flex;gap:16px;flex-wrap:wrap;align-items:end}
.flashcard-toolbar label{display:flex;flex-direction:column;gap:6px;font-weight:600;color:#7b1742}
.flashcard-toolbar select{min-width:180px;padding:10px 12px;border:1px solid #e7b4c9;border-radius:10px;background:#fff;font:inherit}
.study-modes{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}
.study-modes button{padding:9px 14px;border:1px solid #d81b60;border-radius:999px;background:#fff;color:#d81b60;cursor:pointer}
.study-modes button.active,.study-modes button:hover{background:#d81b60;color:#fff}
.review-summary{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
.review-summary span{padding:8px 12px;border-radius:10px;background:#fff3f8;color:#7b1742;font-size:.9rem}
.card-context,.card-state,.next-review{color:#7b1742;font-size:.9rem;margin:.5rem 0}
.card-state{font-weight:700;letter-spacing:.08em}
#backReading,#backPartOfSpeech,#backExampleEnglish{margin:.35rem 0}
.flashcard-category-chooser{max-width:900px;margin:24px auto;text-align:center}
.flashcard-category-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.flashcard-category-grid button{min-height:64px;border:1px solid #d81b60;border-radius:14px;background:#fff;color:#7b1742;font-size:1rem;font-weight:700;cursor:pointer}
.flashcard-category-grid button:hover{background:#fff0f6;transform:translateY(-2px)}
.flashcard-question-panel{max-width:900px;margin:24px auto;text-align:center}
#mcqPrompt{font-size:1.25rem;font-weight:700;color:#351322;min-height:2.2em}
.mcq-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:18px}
.mcq-options button{min-height:56px;padding:12px;border:1px solid #e7b4c9;border-radius:12px;background:#fff;color:#351322;font:inherit;cursor:pointer;text-align:left}
.mcq-options button:hover:not(:disabled){border-color:#d81b60;background:#fff0f6}
.mcq-options button:disabled{cursor:default;opacity:.9}
.mcq-options button.correct{border-color:#218739;background:#e9f8ed}
#mcqFeedback{min-height:1.5em;font-weight:700;margin-top:14px}

@media (max-width:600px){
 .flashcard-category-chooser,.flashcard-question-panel{margin:16px 12px;padding:16px}
 .flashcard-category-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .mcq-options{grid-template-columns:1fr}
 .flashcard-controls{margin:16px 12px;padding:16px}
 .flashcard-toolbar label,.flashcard-toolbar select{width:100%;min-width:0}
 .study-modes button{flex:1 1 calc(50% - 8px)}
 .review-summary span{flex:1 1 calc(50% - 10px);text-align:center}
 .flashcard-container{margin:28px 12px}
 .flashcard{width:min(500px,100%);height:340px}
 .front,.back{padding:20px}
 .front h1{font-size:clamp(36px,12vw,60px);white-space:normal;word-break:break-word}
 .buttons{gap:8px;flex-wrap:wrap;justify-content:center}
 .buttons button{padding:10px 12px}
 .lesson-navigation{gap:8px;flex-wrap:wrap;margin:0 12px 36px}
 .lesson-navigation button{padding:11px 14px}
}