@layer layoutJoystick {
    main > div:last-child form label:nth-child(1) {
        position: relative;
        grid-column: 2/3;
        width: 5em;
        height: 50%;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        transition: 100ms;
    }

    main > div:last-child form label:nth-child(1) button {
        width: 100%;
        height: 100%;
        aspect-ratio: 1/1;
        background-color: transparent;
        color: white;
        border: 0;
        font-size: 1.4em;
        padding: 0;
        opacity: 0;
    }

    main > div:last-child form label:nth-child(1) button:nth-child(1){
        grid-area: 1/2;
        rotate: -90deg;
    }
    main > div:last-child form label:nth-child(1) button:nth-child(2){
        grid-area: 2/1;
        rotate: 180deg;
    }

    /* Joystick */
    main > div:last-child form label:nth-child(1) div:nth-child(3) {
        height: 100%;
        width: 100%;
        position: relative;
        grid-area: 2/2;
    }

    main > div:last-child form label:nth-child(1) div:nth-child(3) > div:nth-child(1) {
        width: 10px;
        height: 100%;
        background-color: black;
        transform: translateY(30px);
    }
    main > div:last-child form label:nth-child(1) button:nth-child(4){
        grid-area: 2/3;
    }
    main > div:last-child form label:nth-child(1) button:nth-child(5){
        grid-area: 3/2;
        rotate: 90deg;
    }
}

@layer joystickStyling {
    main > div:last-child form label:nth-child(1) div:nth-child(3) {
        width: 100%;
        height: 100%;
        position: absolute;
        left: -0.8em;
        transform-style: preserve-3d;
        transform-origin: bottom;
        transition: 200ms;
        cursor: grab;
    }
    
    /* handle */
    main > div:last-child form label:nth-child(1) div:nth-child(3)::before {
        content: "";
        height: 2em;
        aspect-ratio: 1/5;
        position: absolute;
        bottom: 0;
        left: 50%;
        display: block;
        background-image: linear-gradient(to right, gray, white, gray, silver, darkgray);
        transform-style: preserve-3d;
        transform:translateX(-50%) rotateY(0deg);
        transform-origin: bottom;
        transition: 200ms;
        border-radius: 30%;
    }
    
    /* bol */
    main > div:last-child form label:nth-child(1) div:nth-child(3)::after {
        content: "";
        height: 2em;
        aspect-ratio: 1/1;
        border-radius: 100%;
        position: absolute;
        top: -1.26em;
        left: 50%;
        background: radial-gradient(circle at 1em 1em, white, silver, gray, black);
        transform-style: preserve-3d;
        transform:translateX(-50%) translateY(50%);
        transition: 200ms;
    }
}