* {

            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        html,
        body {
            width: 100%;
            height: 100%;
            overflow: hidden;
        }

        body {
            font-family: Arial, Helvetica, sans-serif;

            background:
                linear-gradient(rgba(0, 0, 0, 0.78),
                    rgba(30, 0, 0, 0.82)),
                url("assets/img/fundo.jpg");

            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;

            display: flex;
            justify-content: center;
            align-items: center;

            color: white;
        }

        body::before {
            content: "";
            position: fixed;
            width: 500px;
            height: 500px;
            background: rgba(180, 0, 0, 0.18);
            border-radius: 50%;
            filter: blur(100px);
            top: -150px;
            left: -150px;
        }

        body::after {
            content: "";
            position: fixed;
            width: 450px;
            height: 450px;
            background: rgba(255, 0, 0, 0.12);
            border-radius: 50%;
            filter: blur(100px);
            bottom: -150px;
            right: -150px;
        }

        .container {
            position: relative;
            width: 90%;
            max-width: 950px;
            max-height: 92vh;

            padding: 35px 45px;

            background: rgba(15, 15, 15, 0.82);

            border: 1px solid rgba(255, 50, 50, 0.35);
            border-radius: 28px;

            box-shadow:
                0 25px 70px rgba(0, 0, 0, 0.8),
                0 0 35px rgba(180, 0, 0, 0.18);

            backdrop-filter: blur(15px);

            text-align: center;

            animation: aparecer 0.8s ease;
        }

        .container::before {
            content: "";
            position: absolute;
            top: 0;
            left: 12%;
            width: 76%;
            height: 3px;

            background: linear-gradient(90deg,
                    transparent,
                    #ff2020,
                    #ff5555,
                    #ff2020,
                    transparent);

            box-shadow: 0 0 15px #ff2020;
        }

        h2 {
            font-size: 30px;
            font-weight: 700;
            margin-bottom: 25px;

            text-shadow:
                0 0 10px rgba(255, 0, 0, 0.6),
                0 3px 10px black;
        }

        h2::first-letter {
            color: #ff3030;
        }

        .imagem-carro {
            width: 430px;
            max-width: 90%;
            height: 240px;

            object-fit: cover;

            border-radius: 18px;

            border: 2px solid rgba(255, 60, 60, 0.5);

            box-shadow:
                0 10px 35px rgba(0, 0, 0, 0.8),
                0 0 20px rgba(180, 0, 0, 0.25);

            transition: 0.4s ease;

            margin-bottom: 30px;
        }

        .imagem-carro:hover {
            transform: scale(1.03);

            border-color: #ff3030;

            box-shadow:
                0 15px 40px rgba(0, 0, 0, 0.9),
                0 0 30px rgba(255, 0, 0, 0.4);
        }

        .opcoes {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 16px;
            max-width: 700px;
            margin: auto;
        }

        button {
            position: relative;

            padding: 17px 20px;

            border: 1px solid rgba(255, 70, 70, 0.4);

            border-radius: 13px;

            background:
                linear-gradient(135deg,
                    rgba(100, 0, 0, 0.8),
                    rgba(40, 0, 0, 0.9));

            color: white;

            font-size: 16px;
            font-weight: bold;

            cursor: pointer;

            transition:
                transform 0.25s ease,
                box-shadow 0.25s ease,
                background 0.25s ease;

            overflow: hidden;
        }

        button::before {
            content: "";

            position: absolute;

            top: 0;
            left: -100%;

            width: 100%;
            height: 100%;

            background: linear-gradient(90deg,
                    transparent,
                    rgba(255, 255, 255, 0.12),
                    transparent);

            transition: 0.5s;
        }

        button:hover::before {
            left: 100%;
        }

        button:hover {
            transform: translateY(-4px);

            background:
                linear-gradient(135deg,
                    #a80000,
                    #510000);

            border-color: #ff3030;

            box-shadow:
                0 8px 25px rgba(255, 0, 0, 0.25),
                0 0 15px rgba(255, 0, 0, 0.2);
        }

        button:active {
            transform: scale(0.97);
        }

            #resultado {
                min-height: 28px;
                margin-top: 25px;
                font-size: 19px;
                font-weight: bold;
                color: #ff5555;
                text-shadow:
                    0 0 8px rgba(255, 0, 0, 0.5);
            }

            /* RESPOSTA CERTA */
            #resultado.correto {
                color: #39ff14;
                text-shadow:
                    0 0 8px #39ff14,
                    0 0 20px rgba(57, 255, 20, 0.6);
            }

        @keyframes aparecer {
            from {
                opacity: 0;
                transform: translateY(30px) scale(0.96);
            }

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

        @media (max-width: 700px) {

            .container {
                width: 94%;
                padding: 25px 20px;
            }

            h2 {
                font-size: 22px;
                margin-bottom: 18px;
            }

            .imagem-carro {
                width: 90%;
                height: 180px;
                margin-bottom: 20px;
            }

            .opcoes {
                grid-template-columns: 1fr;
                gap: 10px;
            }

            button {
                padding: 13px;
                font-size: 14px;
            }

            #resultado {
                margin-top: 15px;
                font-size: 16px;
            }
        }