@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&display=swap');


@keyframes bg-opacity{
    0%{
        background-color: #caddfa46;
    }
    50%{
        background-color: #caddfa89;
    }
    100%{
        background-color: #caddfa46;
    }
}

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    color: white;
    font-family: "Instrument Serif", serif;
}

body {
    background-color: #85A8DB;

    header{
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 24px 48px;

        @media (max-width: 768px) {
            padding: 24px 24px;
            align-items: flex-start;
        }

        .logo{
            font-size: 32px;

            @media (max-width: 768px) {
                font-size: 24px;
            }
        }

        .wrapper-scores{
            display: flex;
            align-items: center;
            gap: 32px;

            @media (max-width: 768px) {
                flex-direction: column;
                align-items: flex-start;
                gap: 16px;
            }

            .wrapper-networth{
                display: flex;
                align-items: center;
                gap: 12px;
                font-size: 20px;

                @media (max-width: 768px) {
                    font-size: 16px;
                }

                .networth-number{
                    min-width: 48px;
                }
            }

            .wrapper-networth-max{
                display: flex;
                align-items: center;
                gap: 12px;
                font-size: 20px;

                @media (max-width: 768px) {
                    font-size: 16px;
                }

                .networth-max-number{
                    min-width: 48px;
                }
            }
        }
    }

    main{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        min-height: 100dvh;
        max-width: 100dvw;
        overflow: hidden;

        .wrapper{
            display: flex;
            flex-direction: column;
            gap: 24px;
            width: fit-content;
            margin: 0 auto;
            position: relative;
            max-width: 100%;

            @media (max-width: 768px) {
                align-items: center;
            }

            .wrapper-commands{
                position: absolute;
                top: calc(50% + 24px);
                left: 50%;
                transform: translate(-50%, -50%);
                width: fit-content;
                height: fit-content;
                z-index: 500;
                padding: 48px;
                border-radius: 16px;
                background-color: #caddfa89;
                animation: bg-opacity 2s ease-in-out infinite;
                opacity: 0;
                visibility: hidden;
                transition: opacity 0.5s ease-in-out, visibility 0.5s ease-in-out;


                &.active{
                    opacity: 1;
                    visibility: visible;
                }

                img{
                    width: 98px;
                    height: 52px;
                    object-fit: contain;
                }
            }

            .wrapper-items{
                display: flex;
                align-items: center;
                gap: 24px;
                width: 100%;

                @media (max-width: 768px) {
                    padding: 0 24px;
                    justify-content: center;
                }

                .wrapper-item{
                    display: flex;
                    align-items: center;
                    gap: 6px;

                    .icon{
                        width: 24px;
                        height: 24px;

                        img{
                            width: 100%;
                            height: 100%;
                            object-fit: contain;
                        }
                    }

                    .number{
                        margin-left: 6px;
                        min-width: 32px;
                    }

                    .text{
                        @media (max-width: 768px) {
                            display: none;
                        }
                    }
                }
            }

            .wrapper-game-borders{
                position: absolute;
                bottom: 0;
                left: 0;
                width: 544px;
                height: 480px;
                z-index: 1;

                @media (max-width: 768px) {
                    display: none;
                }

                .border-left{
                    position: absolute;
                    right: -20px;
                    bottom: 1px;
                    width: 28px;
                    height: 487px;
                    background: linear-gradient(180deg, rgb(121, 153, 202) 0%, rgba(115, 143, 186, 1) 100%);
                    clip-path: polygon(0 16px, calc(100% - 12px) 0, 100% 100%, 16px 100%);
                }

                .border-right{
                    position: absolute;
                    left: -20px;
                    bottom: 1px;
                    width: 28px;
                    height: 487px;
                    background: linear-gradient(180deg,rgb(121, 153, 202) 0%, rgba(115, 143, 186, 1) 100%);
                    clip-path: polygon(0 16px, calc(100% - 12px) 0, 100% 100%, 16px 100%);
                    transform: scaleX(-1);
                }

                .top-shadow{
                    position: absolute;
                    top: -8px;
                    left: -8px;
                    width: calc(100% + 16px);
                    height: 32px;
                    background-color: #22222211;
                    z-index: 0;
                    clip-path: polygon(0 0, 100% 0, calc(100% - 16px) 100%, 16px 100%);
                }
            }

            .wrapper-game{
                width: 544px;
                height: 480px;
                background-image: url(/images/Grid.svg);
                background-size: cover;
                background-repeat: no-repeat;
                background-position: center;
                position: relative;
                box-sizing: content-box;
                -webkit-transform: perspective(300px) rotateX(2deg);

                @media (max-width: 768px) {
                    scale: 0.7;
                }

                @media (max-width: 425px) {
                    scale: calc(90dvw / 544px);
                }

                &:after{
                    content: "";
                    position: absolute;
                    top: -16px;
                    left: -16px;
                    width: calc(100% + 32px);
                    height: 16px;
                    background-color: #85A8DB;
                    z-index: 0;
                }

                &:before{
                    content: "";
                    position: absolute;
                    z-index: 200;
                    bottom: 8px;
                    left: 0;
                    width: 100%;
                    height: 256px;
                    background: linear-gradient(180deg,#22222200 0%, #22222211 100%), linear-gradient(180deg,#22222200 90%, #22222211 100%);
                    box-shadow: 0px 16px 0px #85A8DB;
                }

                .snake{
                    width: 32px;
                    height: 32px;
                    background-size: cover;
                    background-repeat: no-repeat;
                    background-position: center;
                    position: absolute;

                    &:not(.noshadow){
                        filter: drop-shadow(0px 8px 0px rgba(128, 150, 184, 1));
                    }

                    &.food{
                        z-index: 199 !important;
                    }
                }
            }
        }
    }
}