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

/* ========================================= */
/* 🛑 THEME VARIABLES (LIGHT & DARK)         */
/* ========================================= */
:root {
    /* Brand Theme Colors (Dynamically updated by JS) */
    --theme-primary: #0D47A1;
    --theme-secondary: #6f42c1;
    --theme-success: #28a745;
    --theme-danger: #dc3545;
    --theme-warning: #ffc107;
    --theme-info: #17a2b8;
    --theme-grey: #777777;

    /* Light Mode (Default Layout) */
    --bg-body: #f4f7f6;
    --bg-card: #ffffff;
    --bg-panel: #f8f9fa;
    --bg-input: #ffffff;
    
    --text-main: #333333;
    --text-muted: #666666;
    --text-inverse: #ffffff;

    --border-color: #dddddd;
    --border-light: #eeeeee;

    /* Colors */
    --basic-white: #ffffff;
    --basic-black: #000000;
    --basic-red: #ff0000;
    --basic-darkred: #D44638;
    --basic-green: #25D366;
    --basic-darkgreen:#28a745;
    --basic-orange:#ffc107;
    --basic-darkorange: #f97316;
    --basic-blue: #007bff;
    --basic-darkblue: #0000ff;
    --basic-yellow: #ffff00;
    --basic-pink: #f8d7da;
    
    --basic-grey-w: #fff;
    --basic-grey-0: #ccc;
    --basic-grey-1: #aaa;
    --basic-grey-2: #999;
    --basic-grey-3: #888;
    --basic-grey-4: #777;
    --basic-grey-5: #666;
    --basic-grey-6: #555;
    --basic-grey-7: #444;
    --basic-grey-8: #333;
    --basic-grey-9: #222;
    --basic-grey-10: #111;
    --basic-grey-b: #000;

    /* Z-index scale */
    --z-base: 1;
    --z-base1: 5;
    --z-base2: 10;
    --z-base3: 20;
    --z-base4: 100;
    --z-low1: 1000;
    --z-low2: 2000;
    --z-low2-5: 2500;
    --z-low3: 3000;
    --z-low3-5: 3500;
    --z-low3-6: 3600;
    --z-mid4: 4000;
    --z-mid4-5: 4500;
    --z-mid5: 5000;
    --z-mid5-5: 5500;
    --z-mid6: 6000;
    --z-mid6-5: 6500;
    --z-high7: 7000;
    --z-high8: 8000;
    --z-high9: 9000;
    --z-max: 9999;
    --z-top: 10000;

    /* Additional Badge & Icon Colors */
    --basic-purple: #9c27b0;
    --basic-amber: #ff9800;
    --basic-lightblue: #2196f3;
    --basic-hotpink: #e83e8c;
    
    /* UI Element Greys */
    --basic-grey-alt: #6c757d;
    --bg-light-hover: #e9ecef;
    --loader-ring: #f3f3f3;

    /* Feedback / Alert Box Text (Darker shades for readability) */
    --text-success-dark: #155724;
    --text-warning-dark: #856404;
    --text-danger-dark: #721c24;

    /* Feedback / Alert Box Backgrounds & Borders (Lighter shades) */
    --bg-info-light: #e3f2fd;
    --border-info-light: #b6d4fe;
    --bg-warning-light: #fff3cd;
    --border-warning-light: #ffeeba;
    --bg-score-card: #f8faff;

    /* Deep UI / Shadows */
    --basic-darkgreen-2: #1e7e34;
    --bg-dark-panel: #1e1e1e;
}

/* ========================================= */
/* 1. BASE TYPOGRAPHY & LAYOUT               */
/* ========================================= */

body { 
    font-family: 'Tajawal', sans-serif; 
    background-color: #f0f2f5; 
    margin: 0; 
    padding: 0; 
    display: flex; 
    justify-content: center; 
    color: var(--basic-grey-8);
}

.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 var(--basic-grey-0); 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: var(--basic-darkgreen); 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: var(--basic-grey-w); 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: var(--basic-darkgreen); background: #f0fdf4; }
[dir="rtl"] .feedback-box.show-correct { border-right-color: var(--basic-darkgreen); 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: var(--basic-darkorange); }
.fib-input:disabled { background-color: #e9ecef; color: var(--basic-grey-8); }
.fib-input.correct-input { border-color: var(--basic-darkgreen); 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: var(--basic-grey-w); border: 2px solid #ddd; 
    border-radius: 10px; font-size: 1.2rem; font-weight: bold; color: var(--basic-grey-8);
    transition: all 0.2s ease;
}
.sort-item.correct { border-color: var(--basic-darkgreen); 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 var(--basic-grey-0); 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; }