.fact-section {  background-color: var(--background-dark); border-radius: 10px; padding: 15px; margin-bottom: 20px; display: flex;
flex-direction: column; align-items: center; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05); transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out; margin:20px; }
.fact-section:hover { transform: translateY(-5px); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1); }
.fact-section img { max-width: 80%; height: auto; border-radius: 8px; margin-bottom: 20px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); object-fit: cover; transition: transform 0.3s ease-in-out; margin-top:15px;}
.fact-section:hover img { transform: scale(1.02); }
.fact-text { text-align: justify; font-size: 1.1em; color: var(--text-dark); max-width: 80%; line-height: 1.6;margin-bottom: 20px;  }
.fact-text p { margin: 8px 0; }

.body11 {font-family: 'Roboto', sans-serif;display: flex;justify-content: center;align-items: center;min-height: 85vh;margin: 0;background-color: #f4f7f6;color: #333;overflow-x: hidden;}
.quiz-container {background-color: #ffffff;border-radius: 12px;box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);padding: 10px;max-width: 700px;text-align: center;animation: fadeIn 0.8s ease-out;display: flex;flex-direction: column;justify-content: space-between;min-height: 480px;position: relative; margin-top:10px;margin-bottom:10px;}
@keyframes fadeIn {from { opacity: 0; transform: translateY(-20px); }to { opacity: 1; transform: translateY(0); }}
.question-area {margin-bottom: 30px;}
.question-counter {font-size: 1.1em;color: #666;margin-bottom: 10px;font-weight: 500;}
.question-area h2 {font-size: 1.8em;color: #2c3e50;margin-bottom: 10px;line-height: 1.4;}
.sentence-text {font-size: 1.6em;font-weight: bold;color: #4CAF50; margin-bottom: 10px;min-height: 50px;display: flex;align-items: center;
justify-content: center;}
.options-grid {display: grid;grid-template-columns: 1fr;gap: 15px;min-height: 120px; }
.option-button {border: 2px solid #b3e0ff;border-radius: 8px;padding: 15px 25px;font-size: 1.2em;color: #2c3e50;cursor: pointer;transition: all 0.3s ease;outline: none;text-align: center;word-wrap: break-word;background-color: #e0f2ff;}
.option-button:hover:not(.disabled):not(.correct):not(.incorrect) { background-color: #cce7ff; border-color: #8ed0f7; transform: translateY(-3px);}
.option-button:active:not(.disabled):not(.correct):not(.incorrect) { transform: translateY(0);box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.1);}
/*.option-button.correct { background-color: #d4edda !important; border-color: #28a745; color: #155724; pointer-events: none; }
.option-button.incorrect { background-color: #f8d7da !important; border-color: #dc3545; color: #721c24; pointer-events: none; }
.option-button.disabled { opacity: 0.7; cursor: not-allowed; }*/
.option-button.correct { background-color: #d4edda !important; border-color: #28a745; color: #155724;
pointer-events: none !important; /* Ensure non-clickable */ cursor: default !important; /* Visual cue for non-clickable */ }
.option-button.incorrect { background-color: #f8d7da !important; border-color: #dc3545; color: #721c24;
pointer-events: none !important; /* Ensure non-clickable */ cursor: default !important; /* Visual cue for non-clickable */ }
.option-button.disabled { opacity: 0.7; pointer-events: none !important; /* Crucial for making non-clickable - added !important */
cursor: default !important; /* Visual cue for non-clickable - added !important */ }
.result-area { margin-top: 15px; height:40px; font-size: 1.2em; min-height: 80px; display: flex; flex-direction: column; align-items: center; gap: 15px;}
#feedback-message { font-weight: bold; margin-bottom: 0; min-height: 25px; display: flex; align-items: center; }
#next-button {background-color: #007bff;color: white;border: none;border-radius: 8px;padding: 12px 25px;font-size: 1.1em;
cursor: pointer;transition: background-color 0.3s ease, transform 0.2s ease;display: none;box-shadow: 0 4px 10px rgba(0, 123, 255, 0.2);}
#next-button:hover {background-color: #0056b3;transform: translateY(-2px);}
#next-button:active {transform: translateY(0);}
.summary-screen {margin-top:10px;margin-bottom:10px;background-color: #ffffff;border-radius: 12px;box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);padding: 30px;width: 95%;max-width: 600px;text-align: center;animation: fadeIn 0.8s ease-out;display: none;flex-direction: column;justify-content: center;align-items: center;min-height: 580px;}
.summary-screen h2 {font-size: 2.2em;color: #2c3e50;margin-bottom: 15px;}
.summary-screen p {font-size: 1.4em;color: #555;margin-bottom: 1px; font-family:Outfit;}
.summary-screen #score-display {font-size: 2.9em;font-weight: bold;color: #007bff;margin-bottom: 1px;}
.summary-screen #correct-answers,
.summary-screen #incorrect-answers {font-size: 1.2em;font-weight: bold;margin-bottom: 3px;}
.summary-screen #correct-answers {color: #28a745;}
.summary-screen #incorrect-answers {color: #dc3545;}
.detailed-summary-container {width: 100%;max-height: 350px; overflow-y: auto; margin-top: 10px; font-size: 0.7em;padding: 10px; 
border: 1px solid #eee;border-radius: 8px;text-align: left; }
.summary-item {margin-bottom: 15px;padding-bottom: 10px;border-bottom: 1px dashed #e0e0e0;}
.summary-item:last-child {border-bottom: none;}
.summary-item strong {display: block;margin-bottom: 5px;font-size: 1.1em;color: #333;}
.summary-item .user-answer {color: #007bff; font-weight: bold;}
.summary-item .correct-answer {color: #28a745; font-weight: bold;}
.summary-item .incorrect-feedback {color: #dc3545; font-style: italic;}
.summary-screen #restart-button {background-color: #28a745;color: white;border: none;border-radius: 8px;padding: 10px 20px;
font-size: 1.2em;cursor: pointer;transition: background-color 0.3s ease, transform 0.2s ease;box-shadow: 0 4px 10px rgba(40, 167, 69, 0.2);
margin-top: 20px;}
.summary-screen #restart-button:hover {background-color: #218838;transform: translateY(-2px);}
.summary-screen #restart-button:active {transform: translateY(0);}
audio {display: none;}
#muteButton {position: absolute;top: 15px;right: 15px;background-color: #6c757d;color: white;border: none;border-radius: 50%;width: 40px;
height: 40px;font-size: 1.2em;cursor: pointer;transition: background-color 0.3s ease, transform 0.2s ease;display: flex;justify-content: center;
align-items: center;box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);z-index: 10;}
#muteButton:hover {background-color: #5a6268;transform: scale(1.05);}
#muteButton:active {transform: scale(1);}


header p { font-size: 1.2em; color: var(--text-light); max-width: 600px; margin: 0 auto; }
.myh1 { font-family: 'Playfair Display', serif; font-size: 2.5em;  color: var(--primary-color); margin-bottom: 15px; margin-top: 15px; letter-spacing: -0.02em;  }
.myh2 { font-family: 'Playfair Display', serif; font-size: 2.2em; color: var(--primary-color); text-align: center; margin-top: 25px; 
margin-bottom: 15px; position: relative;  }
.myh2::after { content: ''; display: block; width: 80px; height: 3px; background-color: var(--secondary-color); margin: 10px auto 0; border-radius: 2px; }

.fun1 {font-size:24px; font-family:Roboto; color:#933624; }
.fun2 {font-size:28px; font-family:Oswald; color:#d80e6a; }
.fun3 {font-size:24px; font-family:Outfit; color:#0ed873; }

@media only screen and (max-width: 400px)  { .fact-section img { max-width: 92%; height: auto; border-radius: 8px; margin-bottom: 20px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); object-fit: cover; transition: transform 0.3s ease-in-out; } .fact-section { margin:0px; }
.fact-text { max-width: 88%; line-height: 1.6; }  .myh2 { margin-top: 30px; margin-bottom: 15px; }
}

.bg1 { background:#afe3a7; padding:1px; }
.bg2 { background:#f5af6a; padding:1px; }
.bg3 { background:#6ab2f5; padding:1px; }
.bg4 { background:#cf93f0; padding:1px; }