@import "instance";
 @import "instance";

.find_passion {
    @include wh(100vw);
    @include center-flex-column;
    min-height: min(100vh, 1080px);
    background-image: $gra1_j;
    padding-block-start: 49px;
    padding-block-end: 34px;


    .title_find_passion {
        @include bc($c0, var(--c1));
        @include wh(90%);
        @include t1((
            font: $f3,
            transform: uppercase,
            size: clamp(szrem(50), 3.80vw, szrem(75))
        ));
        margin-block-end: 40px;
        margin-inline: auto;
    }

    .container_find_passion {
        @include position;
        @include bc($c9_j, $c1);
        @include border-radius(10px);
        @include wh(min(66.66vw, 1280px));
        margin-inline: auto;
        z-index: 1;

        @include brp($b6) {
            @include wh(90%);
        }

        .container_game {
            @include position;
            padding-block: 25px;
            z-index: 2;

            &::before {
                @include position(absolute);
                @include whs(100%);
                background-image: $gra2_j;
                content: "";
                z-index: 0;

                @include brp($b6) {
                    background-image: $gra3_j;
                }
            }

            .decorations_find_passion {
                @include position(absolute);
                @include whs(100%);
                z-index: 1;

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

                .logo_decoration_1 {
                    @include transform(translateY(-50%));
                    left: min(3.91vw, 75px);
                    top: 50%;
                }

                .logo_decoration_2 {
                    @include transform(translateY(-50%));
                    left: initial;
                    right: min(3.91vw, 75px);
                    top: 50%;
                }
            }

            .header_game {
                @include center-flex-column;
                @include gap(15px);
                @include wh(100%);
                @include position;
                z-index: 2;

                .reload_game {
                    @include btn_1(( weight: 400 ));
                    @include position(absolute, -1px, min(3.85vw, 74px), bottom, right);
                    scale: 0.8;

                    @include brp($b6) {
                        @include whs(40px);
                    }

                    &:hover {
                        .content_link {
                            &::before {
                                background-color: $c2;
                            }
                        }
                    }

                    .content_link {
                        @include brp($b6) {
                            @include ht;
                        }

                        &::before {
                            display: none;

                            @include brp($b6) {
                                display: block;
                            }
                        }
                    }
                }

                .description_game {
                    @include wh(90%);
                    @include t1((
                        size: szrem(22)
                    ));
                    text-wrap-style: balance;
                }

                .time_game { @include t2; }
            } // header_game

            .footer_game {
                @include position;
                @include center-flex-column;
                @include gap(10px);
                @include wh(100%);
                z-index: 1;

                .description_footer_game {
                    @include wh(90%);
                    @include t1((
                        size: szrem(22)
                    ));
                    text-wrap-style: balance;
                }

                .matches {
                    @include t2;
                    letter-spacing: -3.8px;

                    .match { @include t2; }
                    .total_match { @include t2; }
                }
            } // footer_game

            .game_passion {
                @include position;
                @include wh(min(30.52vw, 586px));
                margin-block: 25px;
                margin-inline: auto;
                z-index: 2;

                @include brp($b6) {
                    @include wh(min(65.92vw, 646px));
                }

                .card_passion {
                    @include transition(transform 0.6s linear);
                    @include position;
                    @include wh(min(6.614vw, 127px));
                    aspect-ratio: calc(186 / 256);
                    will-change: transform;

                    @include brp($b6) {
                        @include wh(min(15.30vw, 150px));
                    }

                    &.active {
                        .front { @include transform(perspective(600px) rotateY(-180deg)); }
                        .back { @include transform(perspective(600px) rotateY(-0deg)); }
                    }

                    .item_card {
                        @include transition(transform 0.6s linear);
                        @include position(absolute);
                        @include whs(100%);
                        backface-visibility: hidden;
                        overflow: hidden;
                    }

                    .front {
                        @include transform(perspective(600px) rotateY(0));

                        .img_front {
                            @include wh(100%);
                            aspect-ratio: calc(186 / 250);
                        }

                        .btn_front {
                            all: initial;
                            @include position(absolute);
                            @include whs(100%);
                            cursor: pointer;
                            z-index: 2;
                        }
                    }

                    .back {
                        @include transform(perspective(600px) rotateY(180deg));

                        .img_back {
                            @include wh(100%);
                            aspect-ratio: calc(186 / 250);
                        }
                    }
                }
            }
        } // container_game

        .win_game { @include modal_game; } // win_game
        .lost_game { @include modal_game(( status: lost )); } // lost game

        .cover {
            @include bg_game(( z: 4 ));

            &.inactive {
                @include animation(close_cover $t6 forwards $t3);
            }

            .title_cover {
                @include bc($c0, $c1);
                @include t1((
                    size: clamp(szrem(32), 3.91vw, szrem(55)),
                    weight: 700,
                    transform: uppercase
                ));

                &.inactive { @include animation(fadeOutNone $t3 forwards); }
            }

            .description_cover {
                @include wh(min(31.25vw, 600px));
                @include bc($c0, $c1);
                @include t1((
                    size: clamp(szrem(14), 1.15vw, szrem(22))
                ));

                @include brp($b6) {
                    @include wh(min(75vw, 735px));
                }

                &.inactive { @include animation(fadeOutNone $t3 forwards); }
            }

            .btn_start {
                &.inactive { @include animation(fadeOutNone $t3 forwards); }
            }
        }
    }
}