body {
    font-family: 'Poppins', sans-serif;
}

.title-font {
    font-family: 'Fredoka One', cursive;
}

@media (prefers-color-scheme: dark) {
    .input-field, select.input-field { /* Ensure select also gets dark mode styling if needed */
        color: #1f2937; /* dark:text-gray-800 */
        background-color: #f9fafb; /* dark:bg-gray-50 */
    }
    /* Add other dark mode specific styles here if needed */
}

/* Decorative shapes for results page */
.decorative-shape {
    position: absolute;
    border-radius: 50%;
    filter: blur(40px); /* Increased blur */
    z-index: 0;
    opacity: 0.6;
}

.decorative-shape.shape-1 { /* Results page specific */
    width: 200px;
    height: 200px;
    background-color: rgba(251, 146, 60, 0.3); /* Amber */
    top: -50px;
    left: -50px;
}

.decorative-shape.shape-2 { /* Results page specific */
    width: 250px;
    height: 250px;
    background-color: rgba(59, 130, 246, 0.2); /* Blue */
    bottom: -80px;
    right: -80px;
}

.decorative-shape.shape-3 { /* Results page specific */
    width: 150px;
    height: 150px;
    background-color: rgba(236, 72, 153, 0.25); /* Pink */
    top: 30%;
    right: -70px;
}

/* General decorative background shapes */
.decorative-bg-shape {
    position: fixed; /* Use fixed to stay in viewport */
    border-radius: 50%;
    filter: blur(80px); /* More blur for background */
    z-index: -1; /* Behind all content */
    opacity: 0.3;
}
.decorative-bg-shape.shape-1 {
    width: 300px;
    height: 300px;
    background-color: rgba(139, 92, 246, 0.5); /* Violet */
    top: 10%;
    left: 5%;
}
.decorative-bg-shape.shape-2 {
    width: 400px;
    height: 400px;
    background-color: rgba(20, 184, 166, 0.4); /* Teal */
    bottom: 5%;
    right: 10%;
}
.decorative-bg-shape.shape-3 {
    width: 250px;
    height: 250px;
    background-color: rgba(244, 114, 182, 0.4); /* Pink */
    top: 40%;
    right: 2%;
}


.page {
    transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
}
.page.hidden {
    opacity: 0;
    transform: scale(0.95);
    pointer-events: none;
    position: absolute; /* To prevent layout shifts */
}

/* Feedback container styles */
#feedbackContainer.success {
    background-color: #34d399; /* Emerald 400 */
    color: #065f46; /* Emerald 800 */
    border: 1px solid #065f46;
}
#feedbackContainer.error {
    background-color: #f87171; /* Red 400 */
    color: #991b1b; /* Red 800 */
    border: 1px solid #991b1b;
}
#feedbackContainer.info {
    background-color: #60a5fa; /* Blue 400 */
    color: #1e40af; /* Blue 800 */
    border: 1px solid #1e40af;
}

/* MC/TF Option button styling */
.mc-option-button, .tf-option-button {
    transition: background-color 0.2s ease, transform 0.1s ease, box-shadow 0.2s ease;
}
.mc-option-button.selected {
    transform: scale(1.02);
    box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.7); /* Purple focus ring */
}
.mc-option-button.correct, .tf-option-button.correct {
    background-image: linear-gradient(to right, #34d399, #10b981) !important; /* Green gradient */
    color: white !important;
    border-color: #059669 !important;
}
.mc-option-button.incorrect, .tf-option-button.incorrect {
    background-image: linear-gradient(to right, #f87171, #ef4444) !important; /* Red gradient */
    color: white !important;
    border-color: #dc2626 !important;
    opacity: 0.8;
}
.mc-option-button:disabled, .tf-option-button:disabled {
    cursor: not-allowed;
}
.mc-option-button.correct:disabled, .mc-option-button.incorrect:disabled,
.tf-option-button.correct:disabled, .tf-option-button.incorrect:disabled {
   opacity: 1 !important; /* Keep feedback visible */
}


/* Word Search Grid */
.word-search-grid {
    display: grid;
    user-select: none; /* Prevent text selection */
    touch-action: none; /* Prevent scrolling on touch devices */
}
.ws-cell {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #e0e0e0; /* Light gray border */
    font-size: 1rem; /* Adjust as needed */
    font-weight: 600;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color 0.1s ease;
    aspect-ratio: 1 / 1; /* Make cells square */
}
.ws-cell:hover {
    background-color: #f0e6ff; /* Light purple hover */
}
.ws-cell.selected-path {
    background-color: rgba(167, 139, 250, 0.4); /* Semi-transparent purple for path */
}
.ws-cell.found {
    background-color: #a78bfa; /* Purple-400 */
    color: white;
    animation: pulseFound 0.5s ease-out;
}

@keyframes pulseFound {
    0% { transform: scale(0.9); opacity: 0.7; }
    70% { transform: scale(1.05); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
}

#wsWordList li.found {
    text-decoration: line-through;
    color: #581c87; /* Purple 800 */
    font-weight: bold;
}

/* Results page buttons */
.results-button {
    font-semibold py-3 px-4 rounded-lg text-lg shadow-md transform hover:scale-105 transition duration-150 ease-in-out;
}

/* Review Answers styling */
#reviewAnswersContent div {
    margin-bottom: 1rem;
    padding: 0.75rem;
    border-radius: 0.375rem; /* rounded-md */
    background-color: rgba(255, 255, 255, 0.05); /* Slightly lighter than bg-slate-700/50 */
}
#reviewAnswersContent p {
    margin-bottom: 0.25rem;
}
#reviewAnswersContent strong {
    color: #f59e0b; /* amber-500 */
}
#reviewAnswersContent .user-answer.correct {
    color: #34d399; /* emerald-400 */
}
#reviewAnswersContent .user-answer.incorrect {
    color: #f87171; /* red-400 */
    text-decoration: line-through;
}
#reviewAnswersContent .correct-answer-text {
    color: #6ee7b7; /* emerald-300 */
}
#reviewAnswersContent .explanation-text {
    font-style: italic;
    color: #cbd5e1; /* slate-300 */
    font-size: 0.9em;
}

/* Loading indicator */
#loadingIndicator {
    transition: opacity 0.3s ease-in-out;
}
#loadingIndicator.hidden {
    opacity: 0;
    pointer-events: none;
}