/* General Resets and Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Roboto', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

body {
    background-color: #f5f5f5;
    color: #333;
    line-height: 1.6;
    /* Ensure Telegram WebApp specific styles can be applied if needed */
    /* background-color: var(--tg-theme-bg-color); */
    /* color: var(--tg-theme-text-color); */
}

.container {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
    background-color: #fff; /* Fallback if Telegram theme is not applied */
    /* background-color: var(--tg-theme-secondary-bg-color, #fff); */
    border-radius: 10px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
    min-height: 100vh; /* Changed from 100vh to allow content to determine height */
    display: flex; /* Added to help with centering content in screens */
    flex-direction: column; /* Added */
}

/* Screen Styles */
.screen {
    display: none; /* Initially hidden */
    flex-direction: column;
    align-items: center;
    padding: 20px;
    width: 100%;
}

.screen.active {
    display: flex; /* Show active screen */
}

/* Start Screen */
#start-screen h1 {
    font-size: 2.5rem;
    color: #2c3e50;
    /* color: var(--tg-theme-text-color, #2c3e50); */
    margin-bottom: 10px;
    text-align: center;
}

#start-screen h2 {
    font-size: 1.8rem;
    color: #3498db;
    /* color: var(--tg-theme-link-color, #3498db); */
    margin-bottom: 30px;
    text-align: center;
}

#start-screen p {
    font-size: 1.2rem;
    margin-bottom: 20px;
    text-align: center;
    /* color: var(--tg-theme-hint-color, #333); */
}

.subtopics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 15px;
    width: 100%;
    margin-bottom: 20px;
}

.subtopic-btn {
    padding: 15px;
    background-color: #3498db;
    /* background-color: var(--tg-theme-button-color, #3498db); */
    color: white;
    /* color: var(--tg-theme-button-text-color, white); */
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1rem;
    transition: background-color 0.3s, transform 0.2s;
    text-align: center;
}

.subtopic-btn:hover {
    background-color: #2980b9; /* Consider a slightly lighter/darker version of var(--tg-theme-button-color) for hover */
    transform: translateY(-2px);
}

.subtopic-btn.all-topics {
    grid-column: 1 / -1;
    background-color: #2c3e50; /* A different color for emphasis */
}

.subtopic-btn.all-topics:hover {
    background-color: #1a252f;
}

/* Quiz Screen */
.quiz-header {
    width: 100%;
    margin-bottom: 20px;
}

.quiz-header h2 { /* For #quiz-title */
    font-size: 1.8rem;
    color: #2c3e50;
    /* color: var(--tg-theme-text-color, #2c3e50); */
    margin-bottom: 15px;
    text-align: center;
}

.progress-container {
    width: 100%;
    height: 10px;
    background-color: #ecf0f1;
    /* background-color: var(--tg-theme-secondary-bg-color, #ecf0f1); */
    border-radius: 5px;
    margin-bottom: 10px;
    overflow: hidden;
}

.progress-bar { /* For #progress-bar */
    height: 100%;
    background-color: #3498db;
    /* background-color: var(--tg-theme-link-color, #3498db); */
    width: 0%;
    transition: width 0.3s ease;
}

.quiz-info {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
    font-size: 1.1rem;
    color: #7f8c8d;
    /* color: var(--tg-theme-hint-color, #7f8c8d); */
}

#question-container {
    width: 100%;
    margin-bottom: 20px;
}

#question-text {
    font-size: 1.3rem;
    margin-bottom: 20px;
    color: #2c3e50;
    /* color: var(--tg-theme-text-color, #2c3e50); */
    text-align: center;
}

.btn-grid { /* For #answer-buttons */
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    margin-bottom: 20px;
}

.answer-btn {
    padding: 15px;
    background-color: #ecf0f1;
    /* background-color: var(--tg-theme-secondary-bg-color, #ecf0f1); */
    border: 2px solid #bdc3c7;
    /* border: 2px solid var(--tg-theme-hint-color, #bdc3c7); */
    border-radius: 5px;
    cursor: pointer;
    font-size: 1rem;
    transition: background-color 0.3s, border-color 0.3s, color 0.3s;
    text-align: left;
    color: #333;
    /* color: var(--tg-theme-text-color, #333); */
}

.answer-btn:hover:not([disabled]) {
    background-color: #d5dbdb;
    border-color: #a5b1b1;
}

/* .answer-btn.selected - Not explicitly used in JS, but can be added if needed */

.answer-btn.correct {
    background-color: #2ecc71 !important;
    color: white !important;
    border-color: #27ae60 !important;
}

.answer-btn.incorrect { /* Renamed from 'wrong' in JS to 'incorrect' for consistency if desired */
    background-color: #e74c3c !important;
    color: white !important;
    border-color: #c0392b !important;
}

/* Ensure this class matches the JS if you renamed .wrong to .incorrect */
.answer-btn.wrong {
    background-color: #e74c3c !important;
    color: white !important;
    border-color: #c0392b !important;
}


.answer-btn:disabled {
    cursor: not-allowed;
    opacity: 0.7; /* Slightly more opacity for disabled to still be readable */
}

#feedback-container {
    margin-top: 15px;
    padding: 15px; /* Increased padding */
    border-radius: 5px;
    background-color: #f9f9f9;
    /* background-color: var(--tg-theme-secondary-bg-color, #f9f9f9); */
    border: 1px solid #eee;
    font-size: 1rem; /* Slightly larger */
    color: #333;
    /* color: var(--tg-theme-text-color, #333); */
    text-align: left; /* Changed to left for better readability of explanations */
    line-height: 1.5;
}

/*
#feedback-container.hidden {
    display: none !important;
}
This is now handled by the global .hidden class
*/


#feedback-container .correct-text { /* These are not used in the current JS, feedbackText.innerHTML is used directly */
    color: #27ae60;
    font-weight: bold;
}

#feedback-container .incorrect-text { /* These are not used in the current JS */
    color: #c0392b;
    font-weight: bold;
}

.quiz-footer {
    display: flex;
    justify-content: space-between;
    width: 100%;
    margin-top: 20px;
}

.control-btn {
    padding: 12px 25px;
    background-color: #3498db;
    /* background-color: var(--tg-theme-button-color, #3498db); */
    color: white;
    /* color: var(--tg-theme-button-text-color, white); */
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1rem;
    transition: background-color 0.3s;
    flex-grow: 1; /* Allow buttons to grow if space allows */
    margin: 5px; /* Add small margin for spacing when they wrap or are side-by-side */
}

.control-btn:hover:not([disabled]) {
    background-color: #2980b9;
}

.control-btn:disabled {
    background-color: #bdc3c7 !important; /* Added !important for specificity over other .control-btn styles */
    color: #7f8c8d !important;
    cursor: not-allowed;
    opacity: 0.8;
}

.control-btn.secondary {
    background-color: #95a5a6;
}

.control-btn.secondary:hover:not([disabled]) {
    background-color: #7f8c8d;
}

/*
#next-btn {
    display: none;
}
This is handled by the global .hidden class added by JS.
If #next-btn should always be initially hidden, then the JS adding .hidden in resetState() is sufficient.
If you want it hidden by default in CSS and JS removes .hidden, then this rule is fine.
The current JS logic adds .hidden in resetState() and removes it in selectAnswer().
So this specific CSS rule for #next-btn might be redundant if the global .hidden class is consistently used by JS.
I recommend relying on the JS to add/remove the .hidden class.
*/


/* Results Screen */
#results-screen h2 {
    font-size: 2rem;
    color: #2c3e50;
    /* color: var(--tg-theme-text-color, #2c3e50); */
    margin-bottom: 30px;
    text-align: center;
}

.results-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 30px;
}

.result-circle {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    background-color: #3498db;
    /* background-color: var(--tg-theme-link-color, #3498db); */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-bottom: 20px;
    color: white;
}

.result-score {
    font-size: 3rem;
    font-weight: bold;
}

.result-label {
    font-size: 1.2rem;
}

.result-message {
    font-size: 1.3rem;
    text-align: center;
    color: #2c3e50;
    /* color: var(--tg-theme-text-color, #2c3e50); */
}

.results-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px;
    width: 100%;
}

.control-btn.share {
    background-color: #2ecc71; /* Green for share */
}

.control-btn.share:hover:not([disabled]) { /* Added :not([disabled]) */
    background-color: #27ae60;
}

/* Global Helper class - this is the primary way to hide/show elements via JS */
.hidden {
    display: none !important;
}

/* Responsive Adjustments */
@media (max-width: 600px) {
    .container {
        padding: 15px;
        /* margin: 0 auto; */ /* Removed to allow full width */
        min-height: 100vh;
        border-radius: 0;
        box-shadow: none;
    }

    #start-screen h1 {
        font-size: 2rem;
    }

    #start-screen h2 {
        font-size: 1.5rem;
    }

    .subtopics-grid {
        grid-template-columns: 1fr;
    }

    .quiz-footer {
        flex-direction: column;
        gap: 10px;
    }

    .control-btn {
        width: 100%; /* Make control buttons full width in footer on small screens */
        margin-left: 0; /* Reset margin for full width */
        margin-right: 0; /* Reset margin for full width */
    }
    .results-actions .control-btn { /* Be specific if you only want footer buttons full width */
         width: 100%;
    }


    .results-actions {
        flex-direction: column;
    }
}