.world-touch-controls {
    position: fixed;
    inset:
        auto
        0
        max(
            14px,
            env(safe-area-inset-bottom)
        )
        0;

    z-index: 8600;

    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    padding:
        0 16px;

    pointer-events: none;
}


.world-touch-controls[hidden] {
    display: none;
}


.world-touch-controls button {
    appearance: none;

    border:
        1px solid
        rgba(210, 225, 255, 0.42);

    background:
        rgba(5, 12, 28, 0.80);

    color:
        #ffffff;

    box-shadow:
        0 8px 24px
        rgba(0, 0, 0, 0.34);

    backdrop-filter:
        blur(10px);

    -webkit-backdrop-filter:
        blur(10px);

    touch-action:
        none;

    user-select:
        none;

    -webkit-user-select:
        none;

    pointer-events:
        auto;
}


.world-touch-controls__movement {
    display: grid;

    grid-template-columns:
        58px
        58px
        58px;

    grid-template-rows:
        58px
        58px;

    gap:
        8px;
}


.world-touch-controls__button {
    width:
        58px;

    height:
        58px;

    border-radius:
        18px;

    font-size:
        1.25rem;

    font-weight:
        800;
}


.world-touch-controls__button--forward {
    grid-column:
        2;

    grid-row:
        1;
}


.world-touch-controls__button--left {
    grid-column:
        1;

    grid-row:
        2;
}


.world-touch-controls__button--back {
    grid-column:
        2;

    grid-row:
        2;
}


.world-touch-controls__button--right {
    grid-column:
        3;

    grid-row:
        2;
}


.world-touch-controls__button.is-active {
    transform:
        scale(0.94);

    background:
        rgba(80, 116, 180, 0.90);
}


.world-touch-controls__actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;

    gap:
        8px;
}


.world-touch-controls__actions button {
    min-width:
        92px;

    min-height:
        48px;

    padding:
        0.55rem
        0.8rem;

    border-radius:
        16px;

    font:
        inherit;

    font-size:
        0.82rem;

    font-weight:
        750;
}


@media (
    hover: hover
) and (
    pointer: fine
) {
    .world-touch-controls {
        display:
            none !important;
    }
}


@media (max-width: 390px) {
    .world-touch-controls {
        padding-inline:
            10px;
    }

    .world-touch-controls__movement {
        grid-template-columns:
            52px
            52px
            52px;

        grid-template-rows:
            52px
            52px;
    }

    .world-touch-controls__button {
        width:
            52px;

        height:
            52px;
    }

    .world-touch-controls__actions button {
        min-width:
            78px;
    }
}