/* Background and container */
body.quiz-background {
    background-color: rgba(26, 26, 26, 0.8);
    color: #FFD700;
}

/* Title Styling */
#dynamic-title {
    text-align: center;
    color: #FFD700;
    margin-bottom: 10px;
    font-size: 1.2em;
}

/* Card styling */
.card.quiz-card {
    background-color: #222;
    border: 2px solid #FFD700;
    border-radius: 10px;
    color: #FFD700;
    padding: 15px; /* Reduced padding */
    margin: 5px auto; /* Reduced margin from the header */
    max-width: 700px;
}

@media (min-width: 988px) {
    .card.quiz-card {
        max-width: 900px;
        padding: 20px; /* Slightly larger padding for larger screens */
    }
}

/* Feedback box styling */
#feedback-box {
    background-color: #f2f2f2;
    color: #333;
    border: 2px solid #FFD700;
    border-radius: 8px;
    padding: 10px;
    font-size: 1.2em;
    font-weight: bold;
    text-align: center;
    margin-top: 15px;
}

/* General button styling */
.btn-gold, .btn-outline-gold {
    background-color: transparent;
    color: #FFD700;
    border: 2px solid #FFD700;
    font-weight: bold;
    transition: background-color 0.3s, color 0.3s;
    margin: 5px auto;
    width: 100%;
    min-width: 120px; /* Minimum width for consistency */
}

.btn-gold:hover, .btn-outline-gold:hover {
    background-color: #FFD700;
    color: black;
}

#question-text {
    font-size: 1rem; /* Reduced font size for questions */
    margin-bottom: 10px; /* Tighter spacing below questions */
}

/* Answer buttons styling */
.image-button, .text-answer-button {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 8px 12px;
    text-align: center;
    background-color: #444;
    color: #FFD700;
    border: 2px solid #FFD700;
    border-radius: 8px;
    transition: background-color 0.3s ease, color 0.3s ease;
    cursor: pointer;
    min-height: 60px;
    min-width: 140px; /* Minimum width for answer buttons */
    max-width: 180px;
    margin: 3px;
    word-wrap: break-word; /* Ensure text wraps */
    font-size: 0.9rem;
}

/* Image within buttons */
.image-button img, .text-answer-button img {
    max-width: 100%;
    max-height: 80px;
    object-fit: cover;
    border-radius: 5px;
    margin-bottom: 5px;
}

/* Responsive Answer Buttons Layout */
.answer-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(140px, 1fr));
    gap: 10px;
    justify-content: center;
}

@media (max-width: 780px) {
    .answer-list {
        grid-template-columns: 1fr; /* Single column below 780px */
    }
    .image-button, .text-answer-button {
        padding: 5px 10px; /* Reduce padding */
        min-height: 60px; /* Smaller minimum height */
        font-size: 0.85em; /* Adjust font size for readability */
        min-width: 120px; /* Maintain minimum width on smaller screens */
    }
    .image-button img, .text-answer-button img {
        max-height: 50px; /* Reduce image height */
    }
}

@media (max-width: 399px) {
    .image-button, .text-answer-button {
        padding: 3px 8px; /* Further reduce padding on very small screens */
        min-height: 50px; /* Further reduce height */
        font-size: 0.8em; /* Smaller font */
        min-width: 100px; /* Minimum width for very small screens */
    }
    .image-button img, .text-answer-button img {
        max-height: 40px; /* Reduce image size */
    }
}

/* Progress bar */
#progress {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 5px;
    max-width: 100%;
    margin-top: 5px;
}

.progress-icon {
    font-size: calc(20px - 0.5vw);
    margin: 2px;
}

#progress .correct {
    color: green;
}
#progress .incorrect {
    color: red;
}

/* Quiz action buttons at the bottom */
#quiz-actions .game-action-btn {
    color: #FFD700;
    border: 2px solid #FFD700;
    background-color: transparent;
    font-weight: bold;
    padding: 8px 16px;
    transition: background-color 0.3s, color 0.3s;
    margin: 5px;
    min-width: 140px; /* Maintain minimum width for action buttons */
}

#quiz-actions .game-action-btn:hover {
    background-color: #FFD700;
    color: black;
}

/* Consistent sizing for small buttons */
#quiz-actions .btn-sm {
    padding: 5px 12px;
    font-size: 0.875rem;
    line-height: 1.5;
}