/* =======================================
   التصميم الأساسي (نسخة الشاشة المدمجة - Compact)
   ======================================= */
.mdr-vocab-app-container { margin: 20px 0; }
.mdr-vocab-app { background: #fff; border: 1px solid #e1e8ed; border-radius: 12px; box-shadow: 0 4px 15px rgba(0,0,0,0.05); overflow: hidden; }

/* شريط المسارات والتقدم */
.mdr-vocab-header { background: #f8f9fa; padding: 15px 20px; border-bottom: 1px solid #e1e8ed; }
.mdr-vocab-stages { display: flex; justify-content: center; gap: 15px; margin-bottom: 15px; }
.mdr-stage-icon { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; background: #fff; border: 2px solid #ddd; border-radius: 50%; font-size: 18px; cursor: pointer; transition: 0.3s; filter: grayscale(100%); opacity: 0.5; }
.mdr-stage-icon.active { border-color: #3498db; filter: grayscale(0%); opacity: 1; transform: scale(1.1); box-shadow: 0 0 10px rgba(52,152,219,0.3); }
.mdr-stage-icon:hover { transform: scale(1.05); box-shadow: 0 0 5px rgba(52,152,219,0.3); }

.mdr-vocab-progress { display: flex; align-items: center; gap: 15px; }
.mdr-progress-text { font-size: 13px; font-weight: bold; color: #7f8c8d; min-width: 90px; }
.mdr-progress-bar-bg { flex: 1; height: 8px; background: #ecf0f1; border-radius: 4px; overflow: hidden; }
.mdr-progress-bar-fill { height: 100%; background: #2ecc71; transition: width 0.4s ease; }

/* منطقة العرض الرئيسية للمراحل */
.mdr-vocab-stage-content { padding: 20px; display: flex; flex-direction: column; position: relative; }
.mdr-word-slide { text-align: center; display: none; animation: fadeIn 0.4s ease; }
.mdr-word-slide.active { display: block; }

/* زر إعادة المرحلة (مرن ولا يغطي المحتوى) */
.mdr-restart-stage-btn { align-self: flex-end; margin-bottom: 10px; background: #fff; border: 1px solid #bdc3c7; color: #7f8c8d; padding: 5px 12px; border-radius: 6px; font-size: 12px; font-weight: bold; cursor: pointer; transition: 0.2s; display: inline-flex; align-items: center; gap: 5px; }
.mdr-restart-stage-btn:hover { background: #ecf0f1; color: #2c3e50; border-color: #95a5a6; }

/* المرحلة الأولى: استكشاف الكلمات */
.mdr-word-title { font-size: 36px; color: #2c3e50; margin: 0 0 5px 0; letter-spacing: 1px; }
.mdr-word-type { display: inline-block; background: #3498db; color: #fff; padding: 2px 8px; border-radius: 12px; font-size: 12px; font-weight: bold; margin-bottom: 10px; }
.mdr-word-translation { font-size: 17px; color: #7f8c8d; margin-bottom: 10px; }
.mdr-word-definition { font-size: 22px; color: #2c3e50; font-weight: bold; margin-bottom: 10px; }

.mdr-word-meta { display: flex; justify-content: center; gap: 15px; margin-bottom: 15px; }
.mdr-meta-item { background: #fdfefe; border: 1px dashed #bdc3c7; padding: 8px 15px; border-radius: 8px; }
.mdr-meta-item strong { color: #34495e; display: block; font-size: 13px; margin-bottom: 3px; }

.mdr-word-examples { text-align: left; background: #f4f6f7; padding: 12px 20px; border-radius: 8px; border-right: 4px solid #3498db; direction: ltr; margin-bottom: 15px; }
.mdr-word-examples ul { margin: 0; padding-left: 15px; }
.mdr-word-examples li { margin-bottom: 5px; color: #34495e; font-size: 14px; }

/* أزرار التحكم السفلية */
.mdr-vocab-controls { display: flex; justify-content: space-between; align-items: center; margin-top: auto; border-top: 1px solid #eee; padding-top: 15px; }
.mdr-btn { padding: 8px 18px; border: none; border-radius: 6px; cursor: pointer; font-weight: bold; font-size: 14px; transition: 0.2s; display: flex; align-items: center; gap: 8px; }
.mdr-btn-primary { background: #3498db; color: #fff; }
.mdr-btn-primary:hover { background: #2980b9; }
.mdr-btn-secondary { background: #ecf0f1; color: #2c3e50; }
.mdr-btn-secondary:hover { background: #bdc3c7; }
.mdr-btn-audio { background: #9b59b6; color: #fff; border-radius: 50%; width: 45px; height: 45px; justify-content: center; font-size: 20px; padding: 0; }
.mdr-btn-audio:hover { background: #8e44ad; transform: scale(1.1); }

/* =======================================
   المرحلة الثانية: البطاقات التعليمية 🗂️
   ======================================= */
.mdr-stage-intro { text-align: center; padding: 20px; animation: fadeIn 0.5s; }
.mdr-stage-intro h3 { margin-top: 0; margin-bottom: 10px; }
.mdr-vocab-options { display: flex; justify-content: center; gap: 10px; margin-top: 15px; }

.mdr-flashcard-wrapper { perspective: 1000px; width: 100%; max-width: 400px; margin: 0 auto 15px; height: 220px; }
.mdr-flashcard { width: 100%; height: 100%; position: relative; transition: transform 0.6s cubic-bezier(0.4, 0.2, 0.2, 1); transform-style: preserve-3d; cursor: pointer; }
.mdr-flashcard.flipped { transform: rotateY(180deg); }

.mdr-flashcard-front, .mdr-flashcard-back { width: 100%; height: 100%; position: absolute; backface-visibility: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 2px solid #e1e8ed; border-radius: 12px; padding: 15px; box-shadow: 0 4px 10px rgba(0,0,0,0.06); background: #fff; }
.mdr-flashcard-back { transform: rotateY(180deg); background: #f0f8ff; border-color: #3498db; }

.mdr-fc-content { text-align: center; width: 100%; }
.mdr-fc-content h2 { margin: 0 0 5px 0; color: #2c3e50; font-size: 30px; line-height: 1.2; }
.mdr-fc-instruction { position: absolute; bottom: 10px; font-size: 12px; color: #95a5a6; animation: bounce 2s infinite; }

.mdr-flashcard-actions, .mdr-flashcard-decisions { display: flex; justify-content: center; gap: 10px; margin-bottom: 5px; }
.mdr-btn-correct { background: #2ecc71; color: #fff; }
.mdr-btn-correct:hover { background: #27ae60; }
.mdr-btn-incorrect { background: #e74c3c; color: #fff; }
.mdr-btn-incorrect:hover { background: #c0392b; }

/* =======================================
   المرحلة الثالثة: الإملاء ✍️
   ======================================= */
.mdr-spelling-container { text-align: center; max-width: 500px; margin: 0 auto; padding: 20px; background: #fff; border: 2px dashed #3498db; border-radius: 12px; }
.mdr-spelling-prompt { font-size: 22px; color: #2c3e50; margin-bottom: 15px; font-weight: bold; }
.mdr-spelling-input-group { margin-bottom: 15px; }
.mdr-spelling-input { width: 100%; font-size: 22px; padding: 12px; border: 2px solid #bdc3c7; border-radius: 8px; text-align: center; direction: ltr; outline: none; transition: 0.3s; color: #34495e; font-weight: bold; letter-spacing: 2px; }
.mdr-spelling-input:focus { border-color: #3498db; box-shadow: 0 0 10px rgba(52,152,219,0.2); }
.mdr-spelling-input:disabled { background-color: #f8f9fa; cursor: not-allowed; }
.mdr-spelling-input.correct { border-color: #2ecc71; background: #eaeff1; color: #27ae60; }
.mdr-spelling-input.incorrect { border-color: #e74c3c; background: #fdedec; color: #c0392b; text-decoration: line-through; }

.mdr-spelling-feedback { font-size: 18px; font-weight: bold; margin-top: 10px; min-height: 25px; direction: ltr; }
.mdr-feedback-correct { color: #27ae60; }
.mdr-feedback-incorrect { color: #e74c3c; }

.mdr-scrambled-letters { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-bottom: 15px; direction: ltr; }
.mdr-letter-box { background: #f39c12; color: #fff; width: 35px; height: 35px; display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: bold; border-radius: 6px; text-transform: uppercase; box-shadow: 0 3px 0 #e67e22; }

/* =======================================
   المرحلة الرابعة: النطق 🎙️
   ======================================= */
.mdr-pronunciation-container { text-align: center; max-width: 500px; margin: 0 auto; padding: 20px; background: #fff; border: 2px dashed #9b59b6; border-radius: 12px; }
.mdr-pr-word { font-size: 38px; color: #2c3e50; font-weight: bold; margin-bottom: 15px; letter-spacing: 1px; direction: ltr; }
.mdr-pr-translation { font-size: 18px; color: #7f8c8d; margin-bottom: 20px; }

.mdr-mic-btn { width: 70px; height: 70px; border-radius: 50%; background: #e74c3c; color: white; font-size: 30px; border: none; cursor: pointer; transition: 0.3s; box-shadow: 0 4px 10px rgba(231, 76, 60, 0.4); display: flex; align-items: center; justify-content: center; margin: 0 auto 15px; }
.mdr-mic-btn:hover { background: #c0392b; transform: scale(1.05); }
.mdr-mic-btn.listening { animation: mdr-pulse-red 1.5s infinite; background: #c0392b; pointer-events: none; }

.mdr-pr-feedback { font-size: 18px; font-weight: bold; min-height: 25px; margin-bottom: 5px; }
.mdr-pr-result-text { font-size: 15px; color: #95a5a6; direction: ltr; min-height: 20px; font-style: italic; }

/* =======================================
   المرحلة الخامسة: السياق 🎯
   ======================================= */
.mdr-context-container { text-align: center; max-width: 550px; margin: 0 auto; padding: 20px; background: #fff; border: 2px dashed #e67e22; border-radius: 12px; }
.mdr-cx-sentence { font-size: 20px; color: #34495e; margin-bottom: 20px; line-height: 1.5; font-weight: 500; }
.mdr-cx-blank { display: inline-block; min-width: 60px; border-bottom: 3px solid #2c3e50; color: transparent; padding: 0 5px; transition: 0.3s; }
.mdr-cx-blank.filled-correct { color: #27ae60; border-color: #27ae60; font-weight: bold; text-shadow: none; }
.mdr-cx-blank.filled-incorrect { color: #e74c3c; border-color: #e74c3c; font-weight: bold; text-decoration: line-through; }

.mdr-cx-choices { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-bottom: 15px; }
.mdr-cx-choice-btn { padding: 10px 20px; font-size: 16px; font-weight: bold; color: #2c3e50; background: #f4f6f7; border: 2px solid #bdc3c7; border-radius: 8px; cursor: pointer; transition: 0.2s; direction: ltr; min-width: 100px; }
.mdr-cx-choice-btn:hover:not(.disabled) { background: #e1e8ed; border-color: #95a5a6; transform: translateY(-2px); }
.mdr-cx-choice-btn.disabled { cursor: not-allowed; opacity: 0.7; }
.mdr-cx-choice-btn.correct { background: #2ecc71; color: white; border-color: #27ae60; opacity: 1; transform: scale(1.05); }
.mdr-cx-choice-btn.incorrect { background: #e74c3c; color: white; border-color: #c0392b; opacity: 0.8; }
.mdr-cx-choice-btn.correct-missed { background: #2ecc71; color: white; border-color: #27ae60; opacity: 1; animation: pulse-green 1s infinite; }
.mdr-cx-feedback { font-size: 18px; font-weight: bold; min-height: 25px; margin-top: 10px; }

/* =======================================
   شاشة الترحيب والتقرير الختامي
   ======================================= */
.mdr-welcome-container { text-align: center; padding: 30px 15px; background: linear-gradient(135deg, #fdfbfb 0%, #ebedee 100%); border-radius: 12px; border: 1px solid #e1e8ed; }
.mdr-welcome-icon { font-size: 60px; margin-bottom: 10px; animation: bounce 2s infinite; display: inline-block; }
.mdr-welcome-title { font-size: 28px; color: #2c3e50; margin-bottom: 5px; font-weight: bold; }
.mdr-welcome-desc { font-size: 16px; color: #7f8c8d; margin-bottom: 20px; }
.mdr-welcome-stats { display: inline-flex; gap: 15px; background: #fff; padding: 10px 20px; border-radius: 50px; box-shadow: 0 4px 6px rgba(0,0,0,0.05); margin-bottom: 20px; }
.mdr-welcome-stats span { font-weight: bold; color: #3498db; font-size: 18px; }

.mdr-report-container { text-align: center; padding: 20px; }
.mdr-report-header { font-size: 50px; margin-bottom: 5px; }
.mdr-report-title { font-size: 28px; color: #27ae60; margin-bottom: 15px; font-weight: bold; }
.mdr-report-cards { display: flex; justify-content: center; gap: 15px; margin-bottom: 20px; flex-wrap: wrap; }
.mdr-report-card { background: #fff; border: 2px solid #e1e8ed; padding: 15px; border-radius: 12px; min-width: 130px; box-shadow: 0 4px 6px rgba(0,0,0,0.02); }
.mdr-report-card h4 { margin: 0 0 5px 0; color: #7f8c8d; font-size: 14px; }
.mdr-report-card .val { font-size: 26px; font-weight: bold; }

.mdr-report-details-box { background: #f8f9fa; border: 1px solid #ccd0d4; border-radius: 12px; padding: 15px; text-align: right; margin-bottom: 20px; }
.mdr-report-details-box h3 { margin-top: 0; color: #2c3e50; font-size: 18px; border-bottom: 2px solid #e1e8ed; padding-bottom: 8px; margin-bottom: 10px; }
.mdr-report-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; padding: 10px; border-bottom: 1px dashed #bdc3c7; background: #fff; margin-bottom: 5px; border-radius: 6px; }
.mdr-rep-name { flex: 2; min-width: 140px; color: #34495e; font-size: 15px; }
.mdr-rep-stat { flex: 1; min-width: 80px; font-size: 13px; color: #7f8c8d; }
.mdr-rep-status { flex: 0.5; text-align: left; font-size: 18px; }

/* تأثيرات (Animations) واستجابة الهواتف */
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes bounce { 0%, 20%, 50%, 80%, 100% { transform: translateY(0); } 40% { transform: translateY(-5px); } 60% { transform: translateY(-3px); } }
@keyframes mdr-pulse-red { 0% { box-shadow: 0 0 0 0 rgba(231, 76, 60, 0.7); } 70% { box-shadow: 0 0 0 15px rgba(231, 76, 60, 0); } 100% { box-shadow: 0 0 0 0 rgba(231, 76, 60, 0); } }
@keyframes pulse-green { 0% { box-shadow: 0 0 0 0 rgba(46, 204, 113, 0.7); } 70% { box-shadow: 0 0 0 8px rgba(46, 204, 113, 0); } 100% { box-shadow: 0 0 0 0 rgba(46, 204, 113, 0); } }

@media (max-width: 600px) {
    .mdr-vocab-controls { gap: 10px; }
    .mdr-btn { padding: 8px 12px; justify-content: center; }
    .mdr-btn-text { display: none; }
    .mdr-btn-icon { font-size: 20px; }
    .mdr-btn-audio { width: 40px; height: 40px; font-size: 18px; }
    .mdr-word-title { font-size: 28px; }
    .mdr-word-translation { font-size: 18px; }
    .mdr-vocab-options { flex-direction: column; }
    .mdr-report-row { flex-direction: column; align-items: flex-start; gap: 5px; } 
    .mdr-rep-status { align-self: flex-end; margin-top: -25px; } 
    .mdr-word-meta { flex-direction: column; align-items: stretch; gap: 8px; }
}

/* =======================================
   تنسيقات الصور الديناميكية في المراحل 🖼️
   ======================================= */
.mdr-stage-image { max-width: 100%; height: 110px; object-fit: cover; border-radius: 8px; margin: 0 auto 10px auto; display: block; border: 1px solid #e1e8ed; box-shadow: 0 2px 5px rgba(0,0,0,0.05); }
.mdr-fc-image { max-width: 100%; height: 90px; object-fit: cover; border-radius: 6px; margin: 0 auto 10px auto; display: block; }
.mdr-prompt-image { max-width: 100%; height: 100px; object-fit: cover; border-radius: 8px; margin: 0 auto 15px auto; display: block; border: 1px solid #e1e8ed; }

/* زيادة ارتفاع البطاقة التعليمية قليلاً لتستوعب الصورة براحة */
.mdr-flashcard-wrapper { height: 260px; }