@charset "utf-8";
@layer quick_quiz_main;
@layer quick_quiz_main {
    @keyframes anim_cnv_scr
    {
        0% { background-position: 720px 0px; }
        100% { background-position: 0px 240px; }
    }
    #level_set {
        width: 100%;
        text-align: center;
        .level {
            display: inline-block;
            margin: 0.4rem 0.6rem;
            text-align: center;
            color: #fff;
            padding: 1.2rem 0.7rem;
            font-weight: bold;
            border-radius: 8px;
            font-size: 1.2rem;
        }
        #level_1 {
            border: 2px solid #789365;
            background-color: #8fc46c;
            text-decoration: underline;
        }
        #level_2 {
            border: 2px solid #98826a;
            background-color: #cca274;
            text-decoration: underline;
        }
        #level_3 {
            border: 2px solid #a3758f;
            background-color: #e28abb;
            .development {
                font-size: 0.9rem;
                font-weight: normal;
            }
        }
    }
    #screen {
        display: none;
        position: relative;
        width: 95%;
        max-width: 830px;
        margin: 2em auto;
        border: solid 2px #d0aed9;
        background: url('/images/quick_quiz/back_20250927.webp') repeat left top;
        transform: translate3d(0, 0, 0);
        animation: anim_cnv_scr 12s linear infinite;
        padding: 4px;
        a {
            text-decoration: underline;
        }
        #top_info {
            display: table;
            width: 100%;
            line-height: 1.8rem;
            border-radius: 6px;
            border: solid 2px #c6dc82;
            padding: 0.2rem 0.4rem;
            background-color: #fff;
            font-size: 0.9rem;
        }
        #top_info_left {
            width: 50%;
            display: table-cell;
            padding-left: 1rem;
            font-size: 0.85rem;
        }
        #top_info_right {
            width: 50%;
            display: table-cell;
            text-align: right;
            color: #11b011;
            font-size: 1.2rem;
            line-height: 3.6rem;
            #combo_label {
                font-size: 1.4rem;
                font-weight: bold;
            }
        }
        #question {
            width: 100%;
            min-height: 14rem;
            margin: 1rem auto 0.2rem;
            border-radius: 6px;
            border: solid 2px #c6dc82;
            padding: 0.2rem 0.4rem;
            background-color: #fff;
        }
        #question_label {
            font-size: 1.2rem;
            text-indent: 1rem;
            img {
                display: block;
                width: 21.95em;
                max-width: min(360px, 100%);
                height: auto;
                margin: 0 auto;
                border: solid 2px #b1a5bf;
            }
        }
        .result_label {
            width: 100%;
            font-size: 1.6rem;
            font-weight: bold;
            text-align: center;
        }
        #result_label_correct {
            display: none;
            color: #24ce24;
        }
        #result_label_wrong {
            display: none;
            color: #ff3d3d;
        }
        #result_waiting {
            display: none;
            width: 100%;
            font-size: 1rem;
            text-align: center;
        }
        .choice_container {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            grid-template-rows: repeat(2, 1fr);
            width: 100%;
        }
        .choice {
            display: flex;
            justify-content: center;
            position: relative;
            .answer_link {
                width: 100%;
                background-color: #fff;
                border: solid 2px #c6dc82;
                margin: 0.7rem;
                .answer {
                    margin: 0 auto;
                    padding: 0.5rem 0.4rem;
                    font-size: 1.3rem;
                    text-align: center;
                    vertical-align: middle;
                }
            }
        }
        .answer_result {
            position: absolute;
            width: 3.33rem;
            height: 3.33rem;
            left: 1rem;
            top: -0.4rem;
        }
        #front_panel {
            position: absolute;
            inset: 0;
            display: none;
        }
    }
    #qid {
        display: none;
    }
    #var_lang {
        display: none;
    }
    #var_level_text1 {
        display: none;
    }
    #var_level_text2 {
        display: none;
    }
}