@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;700&display=swap');
/* ========================================= */
/* 1. BASE TYPOGRAPHY & LAYOUT               */
/* ========================================= */

body { 
    font-family: 'Tajawal', sans-serif; 
    background-color: #f0f2f5; 
    margin: 0; 
    padding: 0; 
    display: flex; 
    justify-content: center; 
    color: #333;
}

.app-container { 
    width: 100%; 
    max-width: 550px; 
    padding: 15px; 
    min-height: 100vh; 
    box-sizing: border-box; 
}

@media (min-width: 1024px) { 
    .app-container { max-width: 850px; padding-top: 40px; } 
    .question-card { padding: 40px !important; }
}

/* ========================================= */
/* 2. SCREENS & CARDS                        */
/* ========================================= */
.screen { display: none; width: 100%; animation: fadeIn 0.3s ease; }
.screen.active { display: block; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

.card { 
    background: white; 
    padding: 25px; 
    border-radius: 20px; 
    box-shadow: 0 4px 15px rgba(0,0,0,0.08); 
    margin-bottom: 20px; 
}

.main-title { text-align: center; color: #0D47A1; margin-bottom: 20px; }
.input-field { width: 100%; padding: 15px; border: 1px solid #ccc; border-radius: 10px; font-size: 1rem; box-sizing: border-box; font-family: inherit; }

/* ========================================= */
/* 3. BUTTONS                                */
/* ========================================= */
.btn-action { width: 100%; padding: 16px; border: none; border-radius: 12px; font-weight: bold; font-size: 1.1rem; cursor: pointer; font-family: inherit; }
.btn-blue { background: #0D47A1; color: white; }
.btn-green { background: #28a745; color: white; }
.btn-nav { flex: 1; padding: 16px; border-radius: 12px; border: none; font-weight: bold; cursor: pointer; font-family: inherit; font-size: 1rem; transition: 0.1s; background: #e9ecef; color: #495057; }
.btn-nav:active { transform: scale(0.97); }

/* Option Buttons */
.v1-options-stack { display: flex; flex-direction: column; gap: 12px; margin: 25px 0; width: 100%; }
.option-btn { width: 100%; padding: 18px 20px; font-size: 1.1rem; border: 2px solid #e0e0e0; border-radius: 15px; background: #fff; cursor: pointer; transition: 0.2s; text-align: inherit; font-family: inherit; box-sizing: border-box; }
.option-btn:hover:not(:disabled) { border-color: #0D47A1; background: #f0f7ff; }
.option-btn.selected { border-color: #0D47A1; background: #e3f2fd; }
.option-btn.correct { background: #d4edda !important; border-color: #28a745 !important; color: #155724; }
.option-btn.wrong { background: #f8d7da !important; border-color: #dc3545 !important; color: #721c24; }

/* True/False dynamic layout for mobile */
.tf-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-top: 20px; width: 100%; }
.tf-btn { padding: 30px 15px !important; font-size: 1.5rem !important; text-align: center; }

/* ========================================= */
/* 4. UTILITIES & ANIMATIONS                 */
/* ========================================= */
@keyframes spin { 
    0% { transform: rotate(0deg); } 
    100% { transform: rotate(360deg); } 
}
.loader { margin: 30px auto; width: 50px; height: 50px; border: 5px solid #f3f3f3; border-top: 5px solid #0D47A1; border-radius: 50%; animation: spin 1s linear infinite; }

/* Feedback Box */
.feedback-box { margin-top: 15px; padding: 15px; border-radius: 10px; background: #f8f9fa; border-left: 5px solid #dee2e6; font-size: 1rem; box-sizing: border-box; overflow-y: auto; display: block !important; transition: all 0.3s ease; }
[dir="rtl"] .feedback-box { border-left: none; border-right: 5px solid #dee2e6; }
.feedback-box.show-correct { border-left-color: #28a745; background: #f0fdf4; }
[dir="rtl"] .feedback-box.show-correct { border-right-color: #28a745; border-left-color: transparent; }
.feedback-box.show-wrong { border-left-color: #dc3545; background: #fff5f5; }
[dir="rtl"] .feedback-box.show-wrong { border-right-color: #dc3545; border-left-color: transparent; }

/* ========================================= */
/* 5. LIVE PLAYER MOBILE POLISH (THE FIX)    */
/* ========================================= */
/* Protect cards from mobile camera notches */
#game-screen .card, #live-waiting-screen .card {
    padding: 25px 20px !important;
    margin-top: calc(env(safe-area-inset-top, 20px) + 15px) !important;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Perfect Centered Logo */
#ingame-logo, #waiting-logo, #welcome-logo {
    position: relative !important; 
    top: auto !important;
    left: auto !important;
    right: auto !important;
    display: block !important;
    margin: 0 auto 25px auto !important;
    max-height: 90px !important; 
    width: auto !important;
    object-fit: contain !important;
}

/* Neat HUD Header */
.hud {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 400px !important;
    margin-bottom: 25px !important;
    padding-bottom: 15px !important;
    border-bottom: 2px solid #f0f0f0 !important;
}

.hud-item {
    background: #f8f9fa !important;
    color: #0D47A1 !important;
    font-weight: bold !important;
    font-size: 1.1rem !important;
    padding: 8px 18px !important;
    border-radius: 20px !important;
    border: 1px solid #e9ecef !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05) !important;
    margin: 0 !important;
}

/* Question Typography */
#question-text {
    width: 100%;
    text-align: center;
    font-size: 1.5rem !important;
    line-height: 1.5 !important;
    margin-bottom: 25px !important;
}

/* Clean up action area */
.v1-action-area {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin-top: 15px !important;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.tf-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-top: 20px; }
.tf-btn { padding: 30px 15px !important; font-size: 1.5rem !important; }

/* 🛑 NEW: Fill-in-the-Blank Styles */
.fib-container { margin-top: 20px; }
.fib-input { 
    width: 100%; padding: 15px; font-size: 1.5rem; font-weight: bold;
    border: 2px solid #0D47A1; border-radius: 10px; box-sizing: border-box;
    text-align: center; outline: none; transition: border-color 0.2s;
}
.fib-input:focus { border-color: #f97316; }
.fib-input:disabled { background-color: #e9ecef; color: #333; }
.fib-input.correct-input { border-color: #28a745; background-color: #d4edda; color: #155724; }
.fib-input.wrong-input { border-color: #dc3545; background-color: #f8d7da; color: #721c24; }

/* 🛑 NEW: Sorting Styles */
.sort-container { display: flex; flex-direction: column; gap: 10px; margin-top: 15px; }
.sort-item { 
    display: flex; justify-content: space-between; align-items: center; 
    padding: 15px 20px; background: #fff; border: 2px solid #ddd; 
    border-radius: 10px; font-size: 1.2rem; font-weight: bold; color: #333;
    transition: all 0.2s ease;
}
.sort-item.correct { border-color: #28a745; background-color: #d4edda; color: #155724; }
.sort-item.wrong { border-color: #dc3545; background-color: #f8d7da; color: #721c24; }
.sort-controls { display: flex; gap: 5px; }
.sort-controls button {
    background: #f8f9fa; border: 1px solid #ccc; border-radius: 6px;
    padding: 8px 12px; font-size: 1.2rem; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
}
.sort-controls button:active { background: #e2e3e5; }