#ingame_HUD_GameMenu {
    position: absolute;
    @include S(top, 10px);
    @include S(right, 10px);
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    @include S(grid-gap, 6px);

    backdrop-filter: blur(D(1px));

    > button,
    > .button {
        @include PlainText;
        @include IncreasedClickArea(0px);
        background: green;
        @include S(width, 30px);
        @include S(height, 30px);

        pointer-events: all;
        cursor: pointer;
        position: relative;
        transition: all 0.12s ease-in-out;
        transition-property: opacity, transform;

        display: inline-flex;
        background: center center / 70% no-repeat;
        grid-row: 1;

        &.pressed {
            transform: scale(0.9) !important;
        }

        opacity: 0.7;
        &:hover {
            opacity: 0.9 !important;
        }

        @include DarkThemeInvert;

        &.shop {
            grid-column: 1;
            & {
                /* @load-async */
                background-image: uiResource("icons/shop.png");
            }
        }

        &.stats {
            grid-column: 2;
            & {
                /* @load-async */
                background-image: uiResource("icons/statistics.png");
            }
        }

        &.save {
            & {
                /* @load-async */
                background-image: uiResource("icons/save.png");
            }
            grid-column: 3;
            @include MakeAnimationWrappedEvenOdd(0.5s ease-in-out) {
                0% {
                    transform: scale(1, 1);
                }

                70% {
                    transform: scale(1.5, 1.5) rotate(20deg);
                    opacity: 0.2;
                }

                85% {
                    transform: scale(0.9, 0.9);
                    opacity: 1;
                }

                90% {
                    transform: scale(1.1, 1.1);
                }
            }

            &.saving {
                @include InlineAnimation(0.4s ease-in-out infinite) {
                    50% {
                        opacity: 0.5;
                        transform: scale(0.8);
                    }
                }
                pointer-events: none;
                cursor: default;
            }
        }

        &.settings {
            grid-column: 4;
            & {
                /* @load-async */
                background-image: uiResource("icons/settings_menu_settings.png");
            }
        }

        &:hover {
            opacity: 0.9;
            transform: translateY(0);
        }

        &:not(.hasBadge) .badge {
            display: none;
        }

        &.hasBadge {
            &.shop {
                filter: none;
                opacity: 0.9;

                & {
                    /* @load-async */
                    background-image: uiResource("icons/shop_active.png");
                }
            }

            transform-origin: 50% 50%;
            @include InlineAnimation(0.8s ease-in-out infinite) {
                50% {
                    transform: scale(1.3) rotate(6deg);
                }
            }

            .badge {
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                @include PlainText;
                display: flex;
                justify-content: center;
                align-items: center;
            }
        }
    }
}