@import "instance";

.catch_the_ball {
    @include position;
    @include wh(100vw);
    background-image: $gra3;
    z-index: 2;

    @include brp($b7) {
        padding-block-start: 50px;
    }

    &::before {
        @include transform(translateX(-50%));
        @include position(absolute, -8%, 50%);
        @include wh(min(100vw, 1136px));
        @include background((
            url: $i3 + "falling_balls.webp",
            size: contain
        ));
        aspect-ratio: calc(1338 / 707);
        content: "";
        z-index: -1;
    }

    .container_catch_the_ball {
        .title_catch_the_ball {
            @include t1((
                font: $f2,
                size: min(13.02vw, szrem(250)),
                align: center
            ));
            @include bc($c0, $c4);
        }

        .description_catch_the_ball {
            @include t1((
                font: $f1,
                size: clamp(szrem(18), 2.08vw, szrem(40)),
                align: center,
                weight: 700
            ));
            @include bc($c0, $c1);
        }

        .explication_catch_the_ball {
            @include t1((
                font: $f1,
                size: clamp(szrem(14), 1.25vw, szrem(24)),
                align: center
            ));
            @include bc($c0, $c1);
        }

        .container_play {
            @include position;
            @include center-flex-column;
            @include wh(min(66.66vw, 1280px));
            @include background((
                url: $i2 + "1.webp",
                size: cover
            ));
            aspect-ratio: calc(1280 / 595);
            margin-block-start: 50px;
            overflow: hidden;
            margin-inline: auto;

            @include brp($b5) {
                @include wh(min(84.47vw, 865px));
            }

            @include brp($b8) {
                @include background((
                    url: $i2 + "2.webp",
                    size: cover
                ));
                aspect-ratio: calc(320 / 450);
            }

            .fall_game {
                @include position;
                @include wh(inherit, inherit);
                @include bc($c0, $c0);
                z-index: 1;
                aspect-ratio: calc(1280 / 595);

                @include brp($b8) {
                    aspect-ratio: calc(320 / 450);
                }
            }

            .start_btn {
                @include transform(translateX(-50%));
                @include position(absolute, min(5.47vw, 105px), 50%);
                z-index: 2;

                @include brp($b3) {
                    top: min(2.73vw, 35px);
                }

                @include brp($b4) {
                    height: 40px;
                }
            }

            .modal_game {
                @include transform(translateX(-50%));
                @include transition(top $t8);
                @include border-radius(10px);
                @include position(absolute, -150%, 50%);
                @include wh(min(95%, 580px));
                @include bc($c5, $c1);
                min-width: 190px;
                padding: 25px;
                z-index: 3;

                @include brp($b8) {
                    @include center-flex-column;
                    @include whs(95%);
                }

                &.active {
                    @include transition(top $t8);
                    top: 35px;

                    @include brp($b8) {
                        top: 2%;
                    }
                }

                .close_modal {
                    all: initial;
                    @include border-radius(50%);
                    @include bc($c2, $c0);
                    @include normalize-svg((
                        width: nth($l10, 1) + 20px,
                        height: nth($l10, 1) + 20px,
                        position: absolute,
                        xaxis: right,
                        x: 15px,
                        y: 10px
                    ));
                    cursor: pointer;
                }

                .img_modal_game {
                    @include position(relative);
                    @include whs(140px);
                    display: block;

                    @include brp($b8) {
                        display: none;
                    }
                }

                .title_modal_game {
                    @include bc($c0, $c1);
                    @include t1((
                        font: $f1,
                        size: szrem(40),
                        align: left,
                        transform: uppercase,
                        weight: 700
                    ));
                    margin-block-end: 15px;

                    @include brp($b6) {
                        font-size: clamp(szrem(28), 4.08vw, szrem(40));
                    }
                }

                .subtitle_modal_game {
                    @include bc($c0, $c1);
                    @include t1((
                        font: $f1,
                        size: szrem(28),
                        align: left,
                        transform: uppercase,
                        weight: 700
                    ));

                    @include brp($b6) {
                        font-size: clamp(szrem(22), 2.85vw, szrem(28));
                    }
                }

                .message_modal_game {
                    @include bc($c0, $c1);
                    @include t1((
                        font: $f1,
                        size: szrem(18),
                        align: left
                    ));

                    @include brp($b6) {
                        font-size: clamp(szrem(14), 1.83vw, szrem(18));
                    }
                }
            } // end modal_game
        } // end container_play
    }

}