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

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

/* --- Layout --- */
.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; }
}

.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; }
.game-select-btn { width: 100%; padding: 15px; margin-bottom: 10px; border-radius: 10px; border: 1px solid #ddd; background: #fff; cursor: pointer; font-weight: bold; font-family: inherit; font-size: 1.1rem; transition: 0.2s; }
.game-select-btn:hover { border-color: #0D47A1; background: #f8faff; }
.rules-box { background: #e3f2fd; padding: 20px; border-radius: 10px; border: 1px dashed #0D47A1; margin-bottom: 20px; line-height: 1.6; font-size: 1.1rem; }

/* --- Game UI Elements --- */
.overall-timer { background: #fff3cd; color: #856404; padding: 10px; border-radius: 10px; margin-bottom: 15px; text-align: center; font-weight: bold; font-size: 1.2rem; border: 1px solid #ffeeba; }
.progress-container { width: 100%; height: 10px; background: #e9ecef; border-radius: 10px; margin-bottom: 25px; overflow: hidden; }
.progress-bar-fill { height: 100%; width: 0%; background: #0D47A1; transition: width 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
.hud { 
    display: flex; 
    justify-content: space-between; 
    align-items: center;
    margin-bottom: 25px; 
    padding-bottom: 15px;
    border-bottom: 2px solid #f0f0f0;
}

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

/* Center the question text beautifully */
#question-text {
    text-align: center;
    font-size: 1.5rem;
    line-height: 1.5;
    margin-bottom: 25px;
}

/* --- Options Stack (V1 Style) --- */
.v1-options-stack { 
    display: flex; 
    flex-direction: column; 
    gap: 12px; 
    margin: 25px 0; 
}

.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; /* Locks the exact dimensions */
}

.option-btn:hover:not(:disabled) { 
    border-color: #0D47A1; 
    background: #f0f7ff; 
}

/* Removed font-weight: bold from all active states to prevent layout shift */
.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; 
}

/* --- Feedback Box (Always Visible, Fixed Height) --- */
.feedback-box { 
    margin-top: 15px; 
    padding: 15px; 
    border-radius: 10px; 
    background: #f8f9fa; /* Light gray neutral background */
    border-left: 5px solid #dee2e6; /* Neutral gray border */
    font-size: 1rem; 
    box-sizing: border-box;
    overflow-y: auto; 
    display: block !important; /* Forces the box to always be visible */
    visibility: visible !important;
    transition: all 0.3s ease;
}
[dir="rtl"] .feedback-box { border-left: none; border-right: 5px solid #dee2e6; }

/* When Correct */
.feedback-box.show-correct { border-left-color: #28a745; background: #f0fdf4; }
[dir="rtl"] .feedback-box.show-correct { border-right-color: #28a745; border-left-color: transparent; }

/* When Wrong */
.feedback-box.show-wrong { border-left-color: #dc3545; background: #fff5f5; }
[dir="rtl"] .feedback-box.show-wrong { border-right-color: #dc3545; border-left-color: transparent; }


/* --- Language-Aware Navigation --- */
.v1-action-area { display: flex; flex-direction: column; gap: 15px; margin-top: 20px; }
.v1-nav-row { display: flex; gap: 12px; width: 100%; }

/* RTL/LTR Mirroring Logic */
[dir="ltr"] .v1-nav-row { flex-direction: row-reverse; } 
[dir="rtl"] .v1-nav-row { flex-direction: row; }         

.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; }
.btn-nav:active { transform: scale(0.97); }

#next-btn, #skip-btn { flex: 1.6; } /* Forward button is wider */

.btn-green { background: #28a745; color: white; }
.btn-skip { background: #fff3cd; color: #856404; }
.btn-nav:not(.btn-green):not(.btn-skip) { background: #e9ecef; color: #495057; }

.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; }

/* --- Result Screen --- */
.stats-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px; margin-top: 25px; background: #f8f9fa; padding: 20px; border-radius: 15px; border: 1px solid #eee; }
.final-score-circle { width: 90px; height: 90px; background: #0D47A1; color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 2.5rem; font-weight: bold; margin: 20px auto; box-shadow: 0 4px 10px rgba(13,71,161,0.3); }

/* Fix for the rationale box to prevent it from collapsing or disappearing */
#rationale-container {
    margin-top: 20px;
    padding: 15px;
    border-radius: 8px;
    border: 1px solid transparent;
    font-size: 1.1rem;
    font-weight: bold;
    line-height: 1.5;
    
    /* 🛑 These properties force it to stay visible on resize/scroll */
    width: 100%;
    box-sizing: border-box;
    height: auto !important; 
    min-height: 50px;
    overflow: visible;
}
/* Ensure the main question area has padding at the bottom so the rationale isn't hidden behind fixed buttons */
.question-container {
    padding-bottom: 80px; /* Gives room for the rationale and Next buttons */
}

/* ========================================= */
/* Responsive Game Logos                     */
/* ========================================= */
/* 1. Small logo in the Lobby list */
.lobby-game-logo {
    width: 30px;
    height: 30px;
    border-radius: 6px;
    object-fit: contain; /* Ensures the whole logo fits without getting cut off */
    margin: 0 10px;
    vertical-align: middle;
    background: transparent;
}

/* 2. Large logo on the Welcome/Rules screen */
.welcome-game-logo {
    width: 100%;
    max-width: 160px; /* Won't get too massive on desktop */
    height: auto;
    max-height: 160px; 
    object-fit: contain;
    margin: 0 auto 20px auto;
    display: none; /* Hidden by default until JS loads it */
}
/* 3. Centered logo during actual gameplay */
.ingame-logo {
    position: relative;
    display: block;
    margin: 0 auto 25px auto;
    max-height: 90px;
    width: auto;
    object-fit: contain;
    display: none; /* Hidden by default until JS loads it */
}

/* Ensure the card has clean spacing */
.question-card {
    padding-top: 25px; 
}