@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');


.menu {
    background: #17153B;
    mask: radial-gradient(2rem at 2rem 2rem, rgba(0, 0, 0, 0) 99%, #000) -2rem -2rem;
    font-family: "Roboto", serif;
    width: 500px;
    animation: menu-hide 325ms reverse forwards;
}

.menu.hidden {
    position: absolute;
    animation: menu-hide 325ms forwards;
}

.menu.visible {
    animation: menu-visible 325ms forwards;
}

@keyframes menu-hide {
    to {
        scale: 0.95;
        opacity: 0;
        pointer-events: none;
    }
}

@keyframes menu-visible {
    from {
        scale: 0.95;
        opacity: 0;
        pointer-events: none;
    }

    to {
        scale: 1;
        opacity: 1;
        pointer-events: all;
    }
}


.menu-title {
    text-align: center;
    font-size: 2rem;
    color: white;
    padding: 1rem;
}

.menu-items {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1rem;
    padding-bottom: 2rem;
}

.menu-item {
    position: relative;
    padding: 1rem;
    text-align: center;
    font-size: 1.25rem;
    font-weight: 600;
    color: black;
    background: #2E236C;
    color: white;
    mask: radial-gradient(1rem at 1rem 1rem, transparent 99%, #82cd47) -1rem -1rem;
    transition: 225ms;
    will-change: transform;
    backface-visibility: hidden;
    transform: translateZ(0);
    -webkit-font-smoothing: subpixel-antialiased;
    width: 100%;
    border: 0;
}

.menu-item:hover {
    scale: 1.025;
}





.menu-item:hover::after {
    --c-1: #ffffff20;
}

.menu-item:active {
    scale: 1.0128;
}

.menu-item::after {
    content: "";
    transition: 100ms;
    position: absolute;
    top: 50%;
    left: 50%;
    translate: -50% -50%;
    width: 90%;
    height: 80%;
    z-index: 0;
    display: flex;
    flex-direction: column;
    background: #0000000c;
    mask: radial-gradient(1rem at 1rem 1rem, transparent 99%, #000) -1rem -1rem;
    filter: drop-shadow(5px 5px 0px white);
}




@keyframes hide-menu {

    /*   from{
/*     max-height: var(--current-h);
    scale: 1;
  } */
    to {
        /*     max-height: 0; */
        scale: 0.5;
        opacity: 0.25;
    }
}


.menus-ui {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: #00000050;
    display: grid;
    place-content: center;
    transition: background 325ms;
    z-index: 30;

    &:empty {
        background: transparent;
        pointer-events: none;

    }
}


.custom-item {
    color: white;
}


#unsupported_screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    padding: 1rem;
    z-index: 40;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    background: black;
    color: white;
    font-size: 1.2rem;
    text-align: center;

    @media screen and (min-width: 1100px) {
        display: none;
    }
}