.controls-wrapper {
    position: absolute;
    left: 0;
    top: 0;

    width: 100%;
    height: 100%;

    cursor: pointer;

    z-index: 40;
}

.controls {
    position: absolute;
    left: 0;
    top: 0;

    width: 100%;
    height: 100%;
}

.controls-desktop {
    font-size: 2.6vw;
}

.controls-mobile {
    font-size: 64px;
}

.control {
    position: absolute;

    text-align: center;
    text-transform: uppercase;

    z-index: 41;
}

.control p {
    margin: var(--margin) 0 0 0;

    text-transform: initial;
    font-size: 1.6vw;
}

.control-up {
    left: 50%;
    top: calc(25% - var(--margin)*2);

    transform: translateX(-50%) translateY(-50%);
}

.control-left {
    left: calc(25% - var(--margin)*2);
    top: 50%;

    transform: translateX(-50%) translateY(-50%);
}

.control-right {
    right: calc(25% - var(--margin)*2);
    top: 50%;

    transform: translateX(50%) translateY(-50%);
}

.control-down {
    left: 50%;
    bottom: calc(25% - var(--margin)*2);

    transform: translateX(-50%) translateY(50%);
}

.control-background {
    position: absolute;

    width: 0;
	height: 0;
}

.control-background-up {
    left: 50%;
    transform: translateX(-50%);

    border-left: calc(50vw - var(--margin)*2) solid transparent;
	border-right: calc(50vw - var(--margin)*2) solid transparent;
	border-top: calc(50vh - var(--margin)*2) solid lightgray;
}

.control-background-left {
    top: 50%;
    transform: translateY(-50%);

    border-top: calc(50vh - var(--margin)*2) solid transparent;
	border-bottom: calc(50vh - var(--margin)*2) solid transparent;
	border-left: calc(50vw - var(--margin)*2) solid lightgray;
}

.control-background-right {
    top: 50%;
    right: 0%;
    transform: translateY(-50%);

    border-top: calc(50vh - var(--margin)*2) solid transparent;
	border-bottom: calc(50vh - var(--margin)*2) solid transparent;
	border-right: calc(50vw - var(--margin)*2) solid lightgray;
}

.control-background-down {
    left: 50%;
    bottom: 0%;
    transform: translateX(-50%);

    border-left: calc(50vw - var(--margin)*2) solid transparent;
	border-right: calc(50vw - var(--margin)*2) solid transparent;
	border-bottom: calc(50vh - var(--margin)*2) solid lightgray;
}

/*----------------*/

#controls-radio:checked + .controls-wrapper {
    animation: disappear .5s ease-in;
    opacity: 0;

    pointer-events: none;
}

#controls-radio:checked ~ .game-wrapper {
    animation: appear .5s ease-in;
    opacity: 1;
}

@keyframes disappear {
    from {
        opacity: 1;
    }
  
    to {
        opacity: 0;
    }
}

@keyframes appear {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}