:root {
    --primary-blue: #4A90E2; /* Primary Blue (30%) */
    --primary-blue-light-text: #E0EFFF; /* Light text on primary blue */
    --primary-blue-dark-text: #1B4F8C; /* Dark Blue (10%) - Highlight color */

    /* --secondary-orange: #F5A623;  Previously Orange, removing */
    /* --secondary-orange-dark-text: #333333;  Removing */

    /* --accent-teal: #50E3C2;  Previously Teal, removing */
    /* --accent-teal-dark-text: #333333;  Removing */
    
    --neutral-dark-text: #222222; /* Dark text color */
    --neutral-light-text: #F5F5F5; /* Light text color */
    --neutral-white: #FFFFFF; /* White color */
    --neutral-body-bg: #E8F4FF; /* Light Blue (60%) - Background color */
    --neutral-section-bg: #FFFFFF; /* White for sections on blue container */
    --neutral-medium-gray: #dee2e6; /* For disabled states, borders */
    --neutral-dark-gray: #6c757d;   /* For less important text or disabled text */

    --feedback-correct-bg: #D4EFDF; /* Light green/teal, will adjust if needed */
    --feedback-correct-text: #145A32; /* Dark green, will adjust if needed */
    --feedback-incorrect-bg: #FADBD8; /* Light red, will adjust if needed */
    --feedback-incorrect-text: #78281F; /* Dark red, will adjust if needed */

    --word-border-default: #D6EAF8; /* Light blue, derived from primary */
    --word-bg-default: #FAFBFC; /* Very light, almost white */
    --shadow-color: rgba(0, 0, 0, 0.15);

    /* New Proposed Shadows */
    --modern-shadow-soft: 0 3px 6px rgba(0,0,0,0.08), 0 2px 4px rgba(0,0,0,0.06); /* For interactive elements, buttons */
    --modern-shadow-medium: 0 6px 12px rgba(0,0,0,0.1), 0 3px 6px rgba(0,0,0,0.08); /* For cards/sections */
    --modern-shadow-deep: 0 10px 20px rgba(0,0,0,0.12), 0 5px 10px rgba(0,0,0,0.1); /* For main quiz container */
    --modern-shadow-interactive-hover: 0 5px 10px rgba(0,0,0,0.1), 0 3px 7px rgba(0,0,0,0.08); /* Enhanced for hover */
}

/* Base styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Roboto', system-ui, sans-serif;
    line-height: 1.6;
    color: var(--neutral-dark-text);
    background-color: var(--neutral-body-bg);
    padding: 20px;
}

.quiz-mode-content-box {
    background: var(--neutral-section-bg); /* White panels on blue container */
    color: var(--neutral-dark-text); /* Default text in sections is dark */
    padding: 1.5rem;
    border-radius: 8px;
    box-shadow: var(--modern-shadow-medium);
    margin-bottom: 2rem;
}

h1, h2, h3 {
    font-family: 'Roboto', system-ui, sans-serif;
    font-weight: 600;
}

/* Quiz container */
.quiz-container {
    max-width: 1200px;
    margin: 0 auto;
    background: var(--primary-blue);
    color: var(--primary-blue-light-text);
    padding: 2rem 0; /* Vertical padding only */
    border-radius: 12px;
    box-shadow: var(--modern-shadow-deep);
    display: flex;
    flex-direction: column;
    gap: 2rem; /* Vertical gap between sections */
}

.quiz-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
}

.image-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem;
    padding: 1rem;
}

.image-item {
    min-width: 200px;
    min-height: 200px;
}

section {
    margin-bottom: 2rem;
}

h1, h2, h3 {
    margin-bottom: 1.5rem;
}

.quiz-footer {
    margin-top: 3rem;
}

@media (max-width: 768px) {
    .quiz-container {
        gap: 1rem;
        padding: 1rem;
    }
    
    .quiz-content {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    .image-grid {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    }
    
    .image-item {
        min-width: 150px;
        min-height: 150px;
    }
}

/* Quiz type selector styles */
.quiz-type-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    margin-top: 1rem;
    padding: 0 2rem; /* Added left and right padding */
}

.quiz-type-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background: rgba(255, 255, 255, 0.1);
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 10px;
    color: var(--neutral-white);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.quiz-type-btn:hover {
    background: rgba(255, 255, 255, 0.25); /* Slightly brighter hover */
    transform: translateY(-2px);
    box-shadow: var(--modern-shadow-interactive-hover);
}

.quiz-type-btn.active {
    background: var(--neutral-white);
    color: var(--primary-blue-dark-text);
    border-color: var(--primary-blue-dark-text); /* Dark blue border for active state */
    box-shadow: var(--modern-shadow-medium); /* Add a shadow for active state */
}

.quiz-type-btn i {
    margin-bottom: 0.75rem;
    font-size: 1.75rem;
}

@media (max-width: 768px) {
    .quiz-type-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .quiz-type-btn {
        padding: 1rem;
        flex-direction: row;
        gap: 0.75rem;
    }
    
    .quiz-type-btn i {
        margin-bottom: 0;
        font-size: 1.25rem;
    }
}

header {
    text-align: center;
    margin-bottom: 2rem;
    position: relative; /* Added for auth-nav positioning */
}

p.instructions { /* Ensure instructions text is light on blue bg */
    color: var(--primary-blue-light-text);
    font-size: 1.2rem;
    padding: 1rem 2rem; /* Added left and right padding */
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    margin-bottom: 1rem;
    text-align: center; /* Center the text */
}




h1 {
    color: var(--neutral-white); /* White for high contrast on blue */
    margin-bottom: 1rem;
}
/* Authentication Navigation */
.auth-nav {
    position: absolute;
    top: 1rem; /* Adjust as needed for vertical alignment */
    right: 1rem; /* Adjust as needed for horizontal alignment */
    display: flex;
    align-items: center;
}

.auth-nav span {
    margin-right: 0.75rem;
    color: var(--primary-blue-light-text); /* Ensure greeting text is light */
    font-size: 0.9rem;
}

.auth-nav a {
    display: inline-block;
    padding: 0.4rem 0.8rem;
    border-radius: 6px;
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500; /* Slightly less bold than main buttons */
    background-color: var(--primary-blue-light-text);
    color: var(--primary-blue-dark-text);
    border: 1px solid var(--primary-blue-dark-text);
    margin-left: 0.5rem;
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.1s ease, box-shadow 0.2s ease;
}

.auth-nav a:hover {
    background-color: var(--neutral-white); /* Brighter on hover */
    color: var(--primary-blue); /* Darker blue text on hover */
    border-color: var(--primary-blue);
    transform: translateY(-1px);
    box-shadow: var(--modern-shadow-soft);
}

.auth-nav a:active {
    transform: translateY(0px);
    box-shadow: none;
}

/* Main quiz content layout */
.quiz-content {
    display: flex; /* Changed from grid */
    justify-content: space-around; /* Center the active quiz mode container */
    align-items: flex-start; /* Align to top if heights differ */
    gap: 2rem;
    margin-bottom: 2rem;
}

/* Tab Navigation Styling */


/* Word and Image section styling */
.word-section,
.image-section {
    background: var(--neutral-section-bg); /* White panels on blue container */
    color: var(--neutral-dark-text); /* Default text in sections is dark */
    padding: 1.5rem;
    border-radius: 8px;
    box-shadow: var(--modern-shadow-medium);
}

.word-section h2,
.image-section h2 {
    color: var(--primary-blue-dark-text); /* Dark blue for section titles */
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.word-section h2 i,
.image-section h2 i {
    font-size: 1.5rem;
    color: var(--primary-blue-dark-text);
}

.word-list {
    list-style: none;
    display: grid; /* Added for 2 words per row */
    grid-template-columns: repeat(2, 1fr); /* 2 words per row */
    gap: 1rem; /* Gap between words */
}

.word {
    padding: 1rem;
    margin: 0.5rem 0;
    background: var(--word-bg-default);
    border: 2px solid var(--word-border-default);
    color: var(--neutral-dark-text);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.word:hover {
    border-color: var(--secondary-orange);
    /* transform: translateX(5px); */ /* Removing transform for now */
    box-shadow: var(--modern-shadow-interactive-hover);
    background-color: var(--primary-blue-light-text); /* Light blue on hover */
    color: var(--primary-blue-dark-text); /* Dark blue text on hover */
}

.word.selected {
    background: var(--primary-blue); /* Use primary blue */
    color: var(--neutral-white); /* Use white text */
    border-color: var(--accent-teal); /* Changed to teal */
    transform: scale(1.05);
    box-shadow: var(--modern-shadow-medium); /* Stronger shadow */
}

.word.matched {
    background-color: var(--feedback-correct-bg);
    color: var(--feedback-correct-text);
    border-color: var(--accent-teal); /* Use accent for matched border */
    cursor: default;
}

.word.matched:hover {
    transform: none;
    box-shadow: none;
}

.word.paired-selection {
    background-color: var(--accent-teal);
    border-color: var(--accent-teal); /* Darker teal or same */
    color: var(--accent-teal-dark-text);
}

.word.mismatched {
    background-color: var(--feedback-incorrect-bg);
    color: var(--feedback-incorrect-text);
    border-color: var(--feedback-incorrect-text); /* Use text color for border */
    cursor: default;
}

.word.mismatched:hover {
    transform: none;
    box-shadow: none;
}

.word.submitted {
    cursor: default;
    opacity: 0.7;
}

.word.submitted:hover {
    transform: none;
    border-color: var(--word-border-default); /* Reset hover border for submitted */
    box-shadow: none;
}


/* Image grid styling */
.image-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 images per row */
    gap: 1rem;
}

.image-item {
    position: relative;
    aspect-ratio: 1;
    cursor: pointer;
    border: 2px solid transparent;
    border-radius: 6px;
    overflow: hidden;
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease; /* Corrected transition */
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.image-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.image-item:hover {
    transform: scale(1.05);
    border-color: var(--secondary-orange);
    box-shadow: 0 0 8px var(--secondary-orange), var(--modern-shadow-medium); /* Stronger shadow */
}

.image-item.selected {
    border-color: var(--accent-teal); /* Changed to teal */
    box-shadow: 0 0 10px var(--accent-teal), var(--modern-shadow-medium); /* Stronger shadow */
    transform: scale(1.05);
}

.image-item.matched {
    border-color: var(--accent-teal);
    cursor: default;
    box-shadow: 0 0 8px var(--accent-teal), var(--modern-shadow-soft);
}

.image-item.matched:hover {
    transform: none;
}

.image-item.paired-selection {
    border-color: var(--accent-teal);
    box-shadow: 0 0 10px var(--accent-teal), var(--modern-shadow-soft);
}

.image-item.mismatched {
    border-color: var(--feedback-incorrect-text);
    box-shadow: 0 0 8px var(--feedback-incorrect-text), var(--modern-shadow-soft);
    cursor: default;
}

.image-item.mismatched:hover {
    transform: none;
}

.image-item.submitted {
    cursor: default;
    opacity: 0.7;
}

.image-item.submitted:hover {
    transform: none;
    border-color: transparent;
    box-shadow: none;
}

/* Image navigation arrows */
.image-item .image-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0.5); /* Slightly lighter for modern feel */
    color: var(--neutral-white);
    padding: 8px;
    cursor: pointer;
    border-radius: 50%;
    font-size: 16px;
    line-height: 1;
    display: none;
    z-index: 10;
    user-select: none;
    transition: background-color 0.2s ease;
}

.image-item:hover .image-arrow {
    display: block;
}

.image-item .arrow-left {
    left: 10px;
}

.image-item .arrow-right {
    right: 10px;
}

.image-arrow:hover {
    background-color: rgba(0, 0, 0, 0.7);
}


/* Controls styling */
.quiz-footer {
    text-align: center;
    margin-top: 0.1rem; /* Reduced margin-top even more */
    /* quiz-footer is on blue .quiz-container, so its direct text should be light if any */
}

.feedback { /* This is a panel, so its own bg and text are fine */
    margin-bottom: 1rem;
    padding: 0.5rem;
    border-radius: 6px;
    color: var(--neutral-dark-text); /* Default text color for feedback panels */
}

.feedback.correct {
    background: var(--feedback-correct-bg);
    color: var(--feedback-correct-text);
}

.feedback.incorrect {
    background: var(--feedback-incorrect-bg);
    color: var(--feedback-incorrect-text);
}

/* Consolidated button styles */
.quiz-action-button {
    padding: 0.5rem 1rem;
    font-size: 0.9rem;
    font-weight: bold;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
    box-shadow: var(--modern-shadow-soft);
    background: var(--accent-teal);
    color: var(--accent-teal-dark-text);
    margin-bottom: 0.2rem;
    /* Ensure vertical alignment if needed, e.g., if used inline with text */
    vertical-align: middle;
}

.quiz-mode-content-box h2 {
    color: var(--primary-blue-dark-text); /* Dark blue for section titles */
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.quiz-action-button:hover:not(:disabled) {
    background-color: var(--primary-blue-light-text);
    color: var(--primary-blue-dark-text);
    transform: translateY(-2px);
    box-shadow: var(--modern-shadow-interactive-hover);
}

.quiz-action-button:not(:disabled):active {
    transform: translateY(0);
    box-shadow: none;
}

.quiz-action-button:disabled {
    background: var(--neutral-medium-gray);
    color: var(--neutral-dark-gray);
    cursor: not-allowed;
    transform: none; /* Override hover transform */
    box-shadow: none; /* Remove shadow when disabled */
}

/* Specific overrides or layout adjustments */
.controls {
    /* Keep this container if it provides necessary layout structure */
    /* If .controls button rule is now empty, it can be removed */
}

/* Keep specific margin for submit button if needed */
.submit-button {
    margin-right: 1rem;
}

/* .next-button class remains for identification/JS hooks, but styling is handled by .quiz-action-button */

.hidden {
    display: none;
}
.next-button.hidden {
    display: none;
}

/* Progress and score styling */
/* These are outside .quiz-container, on the light body background */
.progress-bar {
    margin: 1.5rem auto; /* Increased margin */
    width: 100%;
    max-width: 600px; /* Max width for better appearance */
    height: 12px; /* Slightly thicker */
    background: var(--neutral-medium-gray);
    border-radius: 6px;
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    background: var(--secondary-orange);
    transition: width 0.3s ease;
}

.progress-text {
    text-align: center;
    display: block;
    margin-top: 0.5rem;
    color: var(--neutral-dark-gray); /* Darker grey for better readability */
    font-size: 0.9rem;
}

.score-display {
    text-align: right;
    padding: 1rem 0; /* Adjusted padding */
    font-weight: bold;
    color: var(--primary-blue-dark-text); /* Dark blue for score text */
    font-size: 1.1rem;
}

/* Responsive design */
@media (max-width: 768px) {
    .quiz-container {
        padding: 0.5rem; /* Less padding on small screens */
    }
    .quiz-content {
        display: flex;
        flex-direction: column;
        gap: 0.5rem; /* Reduced gap between word/image boxes */
    }


    .word-section {
        margin-bottom: 0.5rem; /* Reduced margin */
        padding: 0.5rem; /* Reduced padding */
        max-height: 40vh; /* Or 45vh, adjust as needed */
        overflow-y: auto;
    }

    .image-section {
        margin-bottom: 0.5rem; /* Reduced margin */
        padding: 0.5rem; /* Reduced padding */
        height: 45vh; /* Or 50vh, adjust as needed */
        overflow-y: auto;
    }

    .word-list {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem; /* Spacing between words */
    }

    .word {
        flex-basis: calc((100% - 0.5rem) / 2); /* (100% - gap) / 2 items */
        /* Original vertical margin (0.5rem 0) from .word rule still applies */
    }

    .word.selected,
    .word.paired-selection {
        position: sticky;
        top: 0; /* Stick to the top of the .word-section scroll container */
        z-index: 10;
        /* background-color is already var(--secondary-orange) or var(--accent-teal) from base styles */
        /* Ensure it's explicitly set if needed, or rely on existing .selected/.paired-selection rules */
        box-shadow: var(--modern-shadow-soft); /* Add drop shadow */
    }

    /* Adjust .word if two-column layout needs tweaking for sticky element */
    /* For example, ensure background of sticky element covers underlying content if needed */

    .image-grid {
        grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    } /* Closing brace for .image-grid was missing, added it */

    .controls button {
        padding: 0.6rem 1.2rem;
        font-size: 0.9rem;
    }
    
    h1 {
        font-size: 1.6rem;
    }

    .word-section h2,
    .image-section h2 {
        font-size: 1.3rem;
    }

    /* .modal-content removed as per HTML comments */
}

/* Quiz Type Selector */
.quiz-type-selector {
    margin-bottom: 1.5rem;
    padding: 0.5rem 1.5rem;
    background-color: rgba(255, 255, 255, 0.1); /* Subtle background on the blue header */
    border-radius: 8px;
    text-align: center;
}

.quiz-type-selector h3 {
    margin-bottom: 0.75rem;
    color: var(--primary-blue-light-text);
    font-size: 1.1rem;
}

.quiz-type-selector label {
    margin-right: 1rem;
    color: var(--primary-blue-light-text);
    cursor: pointer;
    font-size: 0.95rem;
}

.quiz-type-selector input[type="radio"] {
    margin-right: 0.3rem;
    vertical-align: middle;
}

/* Quiz Mode Content Visibility */
.quiz-mode-content {
    display: none; /* Hidden by default */
}

.quiz-mode-content.active-content {
    display: block; /* Show active quiz mode */
    /* If image match quiz uses grid, ensure spelling match doesn't inherit it if not desired */
}

/* Ensure the image match quiz content (which is a grid) is displayed correctly when active */
#quizTypeImageMatch.active-content {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 2rem;
    width: 100%; /* Ensure it takes available space to be centered by .quiz-content flex */
    max-width: 900px; /* Optional: constrain max width */
}


/* Spelling Match Quiz Area */
.spelling-quiz-area {
    background: var(--neutral-section-bg);
    color: var(--neutral-dark-text);
    padding: 1rem 1.5rem; /* Reduced vertical, increased horizontal */
    border-radius: 8px;
    box-shadow: var(--modern-shadow-medium);
    text-align: center;
    width: 100%; /* Take available space */
    max-width: 700px; /* Constrain max width for better centering appearance */
    margin: 0 auto; /* Center if .quiz-content is not flex or if it's a direct child */
}

.spelling-quiz-area h2 { /* This is in the HTML, but styling it here for consistency */
    color: var(--primary-blue-dark-text);
    margin-bottom: 1rem;
}

.spelling-quiz-area p {
    font-size: 1.1rem;
    margin-bottom: 1rem;
    color: var(--neutral-dark-text);
}

.spelling-quiz-area p strong {
    color: var(--primary-blue-dark-text);
}

.spelling-image-container {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap; /* Allow images to wrap on smaller screens */
}

.spelling-image-container img {
    width: 150px; /* Adjust as needed */
    height: 150px; /* Adjust as needed */
    object-fit: cover;
    border-radius: 6px;
    border: 2px solid var(--word-border-default);
    box-shadow: var(--modern-shadow-soft);
}

#spellingAnswerInput {
    padding: 0.75rem;
    font-size: 1rem;
    border: 2px solid var(--neutral-medium-gray);
    border-radius: 6px;
    width: 100%;
    max-width: 400px; /* Limit width of input */
    box-sizing: border-box; /* Ensure padding doesn't add to width */
    transition: border-color 0.2s ease;
}

#spellingAnswerInput:focus {
    border-color: var(--primary-blue);
    outline: none;
    box-shadow: 0 0 5px var(--primary-blue);
}

/* Responsive adjustments for new elements */
@media (max-width: 768px) {
    .quiz-type-selector label {
        display: block;
        margin-bottom: 0.5rem;
    }
    .quiz-type-selector label:last-child {
        margin-bottom: 0;
    }

    /* .quiz-content itself is already flex and will stack children on mobile if not overridden */
    /* So, #quizTypeImageMatch.active-content specific mobile override might not be needed if .quiz-content handles stacking */
     #quizTypeImageMatch.active-content {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
        /* max-width will be 100% due to parent constraints */
    }
    
    .word-list { /* For mobile, revert to single column for words */
        grid-template-columns: 1fr;
    }

    .image-grid { /* For mobile, adjust image grid if needed, e.g., 2 per row */
        grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); /* Keep auto-fit or set to 2 */
    }


    .spelling-image-container img {
        width: 100px;
        height: 100px;
    }

    #spellingAnswerInput {
        max-width: 100%;
    }
}