/* canvas {
    touch-action: none;
} */

@media (hover: hover){
    .game-symbol:hover{
        transition: opacity 0.4s ease;
        opacity: 0.75;
    }
    
    #acceleration-symbol:hover{
        transition: opacity 0.4s ease;
        opacity: 0.75;
    }
}

#game-interactions{
    display: flex;
    flex-direction: column;
    align-items: center;

    gap: 20px;
    user-select: none;
    -webkit-user-select: none; /* Safari */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */

    overflow: hidden;
    outline: none;

    width: min(604px, 90svw);   /* min(604px, 90dvw) */
}
#GAME{
    width: 100%;
    max-width: calc( 90svh * (3/4));
    height: auto;
    max-height: 90svh;
    aspect-ratio: 3 / 4;
    box-sizing: border-box;

    touch-action: none;
    overflow: hidden;
}

.game-symbols{
    display: flex;
    flex-direction: row;
    gap: 1rem;

    margin-top: 1.5rem;
}

.game-symbol{
    width: 11vw;
    max-width: 4rem;
}
.game-symbol.hidden {
    display: none;
}

#acceleration-symbol{
    opacity: 1;
    transition: opacity 0.5s linear;
}

#acceleration-symbol.hidden{
    transition: opacity 0.5s linear;
    opacity: 0;
}