@media (min-width: 601px) {

    .message {
        background-color: transparent !important;
        border: none;
    }

    /* ------------------ Quiz Container ------------------ */
    .quiz-container {
        /* If you want the background of the container to be dark blue like the game screen, change #ffffff here. */
        background: #c4cbcc;
        color: #2c343a;
        border-radius: 20px;
        padding: 30px;
        text-align: center;
        box-shadow: 0 8px 30px rgba(0,0,0,0.1);
        max-width: 800px;
        margin: 50px auto 500px;
        font-family: "Exo 2", Arial, sans-serif;
    }

    /* ------------------ Quiz Title ------------------ */
    .quiz-title {
        font-size: 1.8rem;
        font-weight: 700;
        margin-bottom: 20px;
        text-align: center;
        background: linear-gradient(180deg, #0057ff, #adcdc3);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        color: transparent;
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
    }

    #question-content {
        /* KY ĖSHTĖ NDRYSHIMI: Pėrdorimi i # nė vend tė . */
        color: #FFFFFF !important;
        font-weight: bold; /* Trashėgo peshėn e fontit */
        display: inline; /* Sigurohu qė tė vazhdojė nė rresht me Progresin */
        font-size: 1.05rem;
    }

    /* ------------------ Progress ------------------ */
    .quiz-progress {
        font-size: 1.05rem;
        font-weight: 500;
        color: #fff;
        margin-top: 20px;
        text-align: left;
    }

    /* ------------------ Question (White text for game style) ------------------ */
    .quiz-question {
        font-size: 1.05rem;
        font-weight: bold;
        margin-bottom: 8px;
        color: #FFFFFF;
        align-items: center;
        width: 100%;
        padding: 8px 15px 8px 15px;
        clip-path: polygon(3% 0, 97% 0, 100% 50%, 97% 100%, 3% 100%, 0% 50%);
        filter: drop-shadow(0 4px 10px rgba(0,0,0,0.5));
        border: 2px solid #5a5a5a;
        background: linear-gradient(to bottom, #20355f 0%, #2c4a80 100%);
        color: #FFFFFF;
        cursor: pointer;
        transition: all 0.25s ease;
        letter-spacing: 0.03rem;
    }

    /* ------------------ Labels & Selects (Unchanged) ------------------ */
    .quiz-container label {
        display: block;
        margin-top: 20px;
    }

    .quiz-container select {
        width: 100%;
        margin-top: 10px;
        padding: 10px 12px;
        font-size: 1rem;
        color: #2c343a;
        background: #f0f0f0;
        border: 1px solid #ccc;
        border-radius: 8px;
        cursor: pointer;
    }

    .quiz-difficulty-span {
        font-size: 1.2rem;
        font-weight: 600;
        color: #444;
    }

    .quiz-qcount-span {
        font-size: 1.2rem;
        font-weight: 600;
        margin-top: 20px;
        display: block;
        color: #444;
    }

    /* ------------------ Start Quiz Button (Unchanged) ------------------ */
    #start-quiz-btn {
        margin-top: 30px;
        padding: 12px 30px;
        font-size: 1.2rem;
        font-weight: 600;
        border-radius: 12px;
        border: 1px solid #ccc;
        background: #f0f0f0;
        color: #2c343a;
        cursor: pointer;
        transition: all 0.3s ease;
        box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    }

        #start-quiz-btn:hover {
            background: #e0e0e0;
            transform: translateY(-2px);
        }

    /* =======================================================
         WWM STYLE ANSWERS LAYOUT (NEW COLORS & SHAPE)
    ======================================================= */

    /* 1. Main container for all answers (to stack rows vertically) */
    #quiz-answers {
        display: flex;
        flex-direction: column;
        gap: 7px; /* Vertical space between Row 1 (A/B) and Row 2 (C/D) */
        margin-top: 5px;
    }

    /* 2. Container for each row (to place buttons horizontally) */
    .answer-row {
        display: flex;
        width: 100%;
        gap: 3px; /* Horizontal space between buttons in the same row (A and B, C and D) */
    }

    /* ** Pill-shaped answer buttons ** */
    .answer-btn {
        position: relative;
        flex: 1;
        display: flex;
        gap: 0;
        width: 100%;
        align-items: center;
        clip-path: polygon(5% 0, 95% 0, 100% 50%, 95% 100%, 5% 100%, 0% 50%);
        filter: drop-shadow(0 4px 10px rgba(0,0,0,0.5));
        padding: 12px 25px 12px 25px;
        font-size: 0.95rem;
        font-weight: 600;
        background: linear-gradient(to top, #20355f 0%, #6f92d2 100%);
        color: #FFFFFF;
        white-space: normal;
        word-break: break-word;
        height: auto;
        cursor: pointer;
        transition: all 0.25s ease;
    }

        /* --- THE "WHITE THINGY" (Diamond Marker) --- */
        .answer-btn::before {
            content: "";
            position: absolute;
            left: 12px;
            top: 50%;
            transform: translateY(-50%) rotate(45deg);
            width: 5px;
            height: 5px;
            background-color: #f7f7f7; /* White color for the marker */
            border: 1px solid #777;
        }

        /* --- STYLING THE OPTION LABEL (A:, B:, C:, D:) --- */
        .answer-btn .option-label {
            font-weight: 700;
            /* Orange/Gold color as per the image */
            color: #ff9900;
            /*font-size: 1.05rem;*/
            flex-shrink: 0;
            margin-right: 2px;
        }

        /* --- STYLING THE ANSWER TEXT --- */
        .answer-btn .option-text {
            color: #FFFFFF; /* White text */
            flex-grow: 1; /* Lejon zgjerimin pėr tė mbushur hapėsirėn */
            min-width: 0; /* KRITIK: Lejon elementin flex (opsionin) tė zvogėlohet dhe tė mos e detyrojė prindin tė zgjerohet */
            text-align: left;
            letter-spacing: 0.03rem;
        }

        /* Hover effect */
        .answer-btn:hover {
            background: linear-gradient(to right, #2c4a80 0%, #3e64a8 100%); /* Lighter blue on hover */
            transform: translateY(-2px);
        }

        /* Correct (Green glow) */
        .answer-btn.correct {
            background: linear-gradient(to right, #1d6e3c 0%, #28a745 100%); /* Green background */
            border-color: #28a745;
            color: #FFFFFF;
        }

        /* Wrong (Red glow) */
        .answer-btn.wrong {
            background: linear-gradient(to right, #8b1e2b 0%, #dc3545 100%); /* Red background */
            border-color: #dc3545;
            color: #FFFFFF;
        }

        .answer-btn.disabled {
            pointer-events: none;
            opacity: 0.8;
        }

    /* ------------------ Navigation Buttons (Unchanged) ------------------ */
    .quiz-nav-btn {
        display: inline-block;
        margin: 85px 5px 0;
        padding: 12px 30px;
        font-size: 0.8rem;
        font-weight: 600;
        border-radius: 12px;
        border: 1px solid #ccc;
        cursor: pointer;
        background: #f0f0f0;
        color: #2c343a;
        transition: all 0.3s ease;
        box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    }

        .quiz-nav-btn:hover {
            background: #e0e0e0;
            transform: translateY(-2px);
        }

    /* ------------------ Quiz Result Box (Unchanged) ------------------ */
    #quiz-result-box {
        margin-top: 20px;
        display: none;
        color: #2c343a;
    }

    #quiz-result-title {
        font-size: 1.5rem;
        font-weight: bold;
        margin-bottom: 20px;
        color: #1f366c;
    }

    #quiz-result-details {
        font-size: 1rem;
        color: #444;
    }

    /* ------------------ Animations (Unchanged) ------------------ */
    @keyframes fadeIn {
        from {
            opacity: 0;
            transform: translateY(20px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    .answer-btn.correct.animate {
        animation: pulseGreen 0.5s ease;
    }

    .answer-btn.wrong.animate {
        animation: pulseRed 0.5s ease;
    }

    @keyframes pulseGreen {
        0% {
            box-shadow: 0 0 10px rgba(40,167,69,0.4);
        }

        50% {
            box-shadow: 0 0 25px rgba(40,167,69,0.6);
        }

        100% {
            box-shadow: 0 0 10px rgba(40,167,69,0.4);
        }
    }

    @keyframes pulseRed {
        0% {
            box-shadow: 0 0 10px rgba(220,53,69,0.4);
        }

        50% {
            box-shadow: 0 0 25px rgba(220,53,69,0.6);
        }

        100% {
            box-shadow: 0 0 10px rgba(220,53,69,0.4);
        }
    }
}