/* General Resets and Base Styles */
        html {
          color-scheme: light dark;
          scroll-behavior: smooth; /* Added for smoother scrolling if needed */
        }
        *,
        *::before,
        *::after {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        :root {
            --body-bg: #f0f2f5;
            --quiz-wrapper-bg: #ffffff;
            --text-color: #1c1e21;
            --secondary-text-color: #555555;
            --hint-text-color: #6c757d;
            --border-color: #dddddd;
            --light-border-color: #eeeeee;
            --accent-color: #007bff;
            --accent-text-color: #ffffff;
            --button-option-bg: #e9ecef;
            --button-option-text: #212529;
            --button-option-border: #ced4da;
            --button-disabled-bg: #cccccc;
            --button-disabled-text: #777777;
            --current-word-bg: #f8f9fa;

            /* Styles for correct/incorrect answers based on JS implementation */
            --correct-option-bg: #d4edda; /* Light green for button background */
            --correct-option-text: #155724; /* Darker green for text */
            --correct-option-border: #28a745; /* Bootstrap success green for border */

            --incorrect-option-bg: #f8d7da; /* Light red for button background */
            --incorrect-option-text: #721c24; /* Darker red for text */
            --incorrect-option-border: #dc3545; /* Bootstrap danger red for border */

            --correct-feedback-text: #28a745; /* Green for feedback text */
            --incorrect-feedback-text: #dc3545; /* Red for feedback text */

            /* Optional: Share button color variable
            --share-button-bg: #28a745;
            */
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
            line-height: 1.6;
            background-color: var(--body-bg);
            color: var(--text-color);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: flex-start;
            min-height: 100vh;
            padding: 20px 15px;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            transition: background-color 0.3s, color 0.3s;
        }

        /* Styles for the main quiz wrapper */
        #quiz-main-wrapper {
            background-color: var(--quiz-wrapper-bg);
            padding: 20px;
            border-radius: 12px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
            width: 100%;
            max-width: 500px;
            text-align: center;
            transition: background-color 0.3s;
            margin-top: auto;
            margin-bottom: auto;
        }


        /* Typography */
        #quiz-main-wrapper h1,
        #quiz-main-wrapper h2 {
            color: var(--text-color);
            font-weight: 600;
            transition: color 0.3s;
        }
        #quiz-main-wrapper h1 {
            font-size: clamp(1.5rem, 5vw, 1.875rem);
            margin-bottom: 15px;
        }
        #quiz-main-wrapper h2 {
            font-size: clamp(1.25rem, 4vw, 1.5rem);
            margin-bottom: 10px;
        }
        #quiz-main-wrapper p {
            margin-bottom: 10px;
            font-size: clamp(0.9rem, 2.5vw, 1rem);
            color: var(--secondary-text-color);
            transition: color 0.3s;
        }

        /* General Quiz Action Buttons */
        .quiz-action-button {
            font-family: inherit;
            background-color: var(--accent-color);
            color: var(--accent-text-color);
            border: none;
            padding: 12px 20px;
            border-radius: 8px;
            cursor: pointer;
            font-size: clamp(0.95rem, 3vw, 1rem);
            font-weight: 600;
            transition: opacity 0.2s ease-in-out, background-color 0.2s ease-in-out, color 0.2s ease-in-out;
            width: 100%;
            max-width: 350px;
            margin-left: auto;
            margin-right: auto;
            margin-bottom: 10px;
            display: inline-flex; /* Changed from block to inline-flex to respect max-width and auto margins */
            align-items: center;
            justify-content: center;
        }
        .quiz-action-button:hover:not(:disabled) {
            opacity: 0.85;
        }
        .quiz-action-button:disabled {
            background-color: var(--button-disabled-bg);
            color: var(--button-disabled-text);
            cursor: not-allowed;
            opacity: 0.7;
        }

        /* Optional: Specific style for the share button */
        .quiz-share-button { /* This class can be added to the share button in HTML if desired */
            background-color: #28a745; /* Example: Green color for sharing */
            /* Or use your CSS variable:
            background-color: var(--share-button-bg);
            */
        }


        /* Quiz Area Specifics */
        #quiz-screen {
            text-align: left; /* Questions and options are usually left-aligned */
        }
        #question-area p { /* This likely targets a "Question X of Y" text if you add one */
            color: var(--hint-text-color);
            font-size: clamp(0.85rem, 2.5vw, 0.95rem);
            margin-bottom: 8px;
            text-align: center; /* Center this hint text */
            transition: color 0.3s;
        }
        #current-word { /* This is the prompt/question text */
            font-size: clamp(1.1rem, 4vw, 1.3rem); /* Adjusted from very large for prompts */
            font-weight: 500; /* Prompts are usually not extremely bold */
            margin: 10px 0 20px 0;
            padding: 15px;
            border: 1px solid var(--border-color);
            border-radius: 8px;
            background-color: var(--current-word-bg);
            color: var(--text-color);
            text-align: left; /* Prompts are better left-aligned */
            word-break: break-word;
            line-height: 1.4;
            transition: background-color 0.3s, color 0.3s, border-color 0.3s;
        }

        /* Option Buttons */
        #options-area {
            margin-bottom: 15px;
        }
        /* Renamed #options-area button to .option-button to match JS */
        .option-button {
            font-family: inherit;
            background-color: var(--button-option-bg);
            color: var(--button-option-text);
            border: 1.5px solid var(--button-option-border);
            padding: 12px 15px;
            text-align: left;
            font-weight: 500;
            width: 100%;
            margin-bottom: 8px;
            border-radius: 8px;
            display: block;
            font-size: clamp(0.9rem, 2.8vw, 1rem);
            transition: background-color 0.2s, color 0.2s, border-color 0.2s, opacity 0.2s;
            cursor: pointer;
        }
        .option-button:hover:not(:disabled) {
            border-color: var(--accent-color);
            /* opacity: 1; -- Already default */
        }

        /* Styles for correct/incorrect option buttons */
        .option-button.correct-option {
            background-color: var(--correct-option-bg) !important;
            color: var(--correct-option-text) !important;
            border-color: var(--correct-option-border) !important;
            font-weight: 600;
        }
        .option-button.incorrect-option {
            background-color: var(--incorrect-option-bg) !important;
            color: var(--incorrect-option-text) !important;
            border-color: var(--incorrect-option-border) !important;
            font-weight: 600;
        }
        .option-button:disabled:not(.correct-option):not(.incorrect-option) {
            background-color: var(--button-option-bg); /* Keep original for non-answered, disabled */
            color: var(--hint-text-color);
            border-color: var(--button-option-border);
            opacity: 0.6;
            cursor: not-allowed;
        }


        #feedback-area {
            margin: 15px 0;
            font-weight: bold;
            font-size: clamp(1rem, 3vw, 1.1rem);
            min-height: 1.5em; /* To prevent layout jump */
            text-align: center;
            transition: color 0.3s;
        }
        /* Correct/Incorrect feedback text styling */
        #feedback-area.correct-feedback {
            color: var(--correct-feedback-text);
        }
        #feedback-area.incorrect-feedback {
            color: var(--incorrect-feedback-text);
        }


        /* Start and Result Screens */
        #start-screen, #result-screen {
            padding-top: 10px;
        }

        #start-screen > h1 { /* More specific if needed */
            margin-bottom: 20px;
        }

        /* Paragraph specific to the start screen introductory text */
        #start-screen > p:first-of-type {
            font-size: clamp(1rem, 3vw, 1.1rem);
            margin-bottom: 15px;
            color: var(--text-color);
            font-weight: 500;
        }


        #quiz-info-message {
            font-size: clamp(0.85rem, 2.5vw, 0.95rem);
            color: var(--hint-text-color);
            margin-top: 10px;
            margin-bottom: 15px !important;
        }

        /* Paragraph specific to the "Готовы проверить..." text */
        #start-screen > p#intro-text { /* Added ID for clarity if needed */
            font-size: clamp(0.95rem, 2.8vw, 1.05rem);
            margin-bottom: 20px;
        }


        #result-screen p {
            font-size: clamp(1rem, 3vw, 1.05rem);
            margin-bottom: 10px;
        }
        #result-screen #score-value, /* Assuming span for score value */
        #result-screen #total-questions-value { /* Assuming span for total */
            font-weight: bold;
            color: var(--accent-color);
            transition: color 0.3s;
        }
        #result-message {
            font-style: italic;
            color: var(--secondary-text-color);
            margin-bottom: 20px !important;
            transition: color 0.3s;
        }

        /* Quiz Type Selection */
        #quiz-type-selection-container { /* The div wrapping the selection and button */
            display: none; /* Initially hidden, shown by JS */
            width: 100%;
        }
        #quiz-type-selection {
            margin-bottom: 15px;
            text-align: left;
            max-width: 100%;
        }

        .quiz-type-option {
            margin-bottom: 10px;
            display: flex;
            align-items: center;
            padding: 8px;
            border-radius: 6px;
            transition: background-color 0.2s;
        }
        .quiz-type-option:hover {
            background-color: var(--button-option-bg); /* Subtle hover */
        }

        .quiz-type-option input[type="radio"] {
            margin-right: 10px;
            accent-color: var(--accent-color);
            width: 1.15em;
            height: 1.15em;
            cursor: pointer;
            flex-shrink: 0;
        }

        .quiz-type-option label {
            font-size: clamp(0.9rem, 2.7vw, 1rem);
            color: var(--text-color);
            cursor: pointer;
            word-break: break-word;
            hyphens: auto;
        }


        /* Dark Mode Styles */
        @media (prefers-color-scheme: dark) {
            :root {
                --body-bg:             #121212;
                --quiz-wrapper-bg:     #1e1e1e;
                --text-color:          #e0e0e0;
                --secondary-text-color:#b0b0b0;
                --hint-text-color:     #888888;
                --border-color:        #3a3a3a;
                --light-border-color:  #2c2c2c;
                --accent-color:        #3793ff; /* Lighter blue for dark mode */
                --accent-text-color:   #ffffff;
                --button-option-bg:    #333333;
                --button-option-text:  #e0e0e0;
                --button-option-border:#555555;
                --button-disabled-bg:  #424242;
                --button-disabled-text:#757575;
                --current-word-bg:     #2a2a2a;

                /* Dark mode correct/incorrect */
                --correct-option-bg: #2a572a;
                --correct-option-text: #c8e6c9;
                --correct-option-border: #4CAF50;

                --incorrect-option-bg: #612c2c;
                --incorrect-option-text: #ffcdd2;
                --incorrect-option-border: #F44336;

                --correct-feedback-text: #4CAF50;
                --incorrect-feedback-text: #F44336;

                /* Optional: Share button dark mode color
                --share-button-bg: #218838;
                */
            }

            #quiz-main-wrapper {
                box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
            }
            #feedback-area.correct-feedback { /* Ensure feedback colors update */
                 color: var(--correct-feedback-text);
            }
            #feedback-area.incorrect-feedback {
                 color: var(--incorrect-feedback-text);
            }
             .quiz-type-option:hover {
                background-color: #2f2f2f; /* Darker hover for options */
            }
        }

        /* Small screen adjustments */
        @media (max-width: 360px) {
            body {
                padding: 15px 10px;
            }
            #quiz-main-wrapper {
                padding: 15px;
            }
            .quiz-action-button,
            .option-button {
                padding: 10px 15px;
                font-size: clamp(0.85rem, 2.8vw, 0.9rem);
            }
            #current-word {
                 font-size: clamp(1rem, 5vw, 1.2rem); /* Adjusted font size */
            }
            #quiz-main-wrapper h1 {
                font-size: clamp(1.3rem, 4.5vw, 1.6rem);
            }
            .quiz-type-option label {
                font-size: clamp(0.85rem, 2.5vw, 0.95rem);
            }
            #start-screen > p:first-of-type {
                font-size: clamp(0.95rem, 2.8vw, 1rem);
            }
            #quiz-info-message {
                font-size: clamp(0.8rem, 2.3vw, 0.9rem);
            }
             #start-screen > p#intro-text {
                font-size: clamp(0.9rem, 2.6vw, 1rem);
            }
        }

        /* Even smaller screens, if necessary */
        @media (max-width: 320px) {
            #quiz-main-wrapper h1 {
                font-size: clamp(1.2rem, 4vw, 1.5rem);
            }
            .quiz-action-button,
            .option-button {
                font-size: clamp(0.8rem, 2.5vw, 0.85rem);
            }
             #current-word {
                 font-size: clamp(0.9rem, 4.5vw, 1.1rem);
            }
            .quiz-type-option label {
                font-size: clamp(0.8rem, 2.3vw, 0.9rem);
            }
        }