.horizon-touch-active body.in-game {
    overscroll-behavior: none;
}

.horizon-touch-active body.in-game > canvas,
.horizon-touch {
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}

.horizon-touch {
    --touch-button: clamp(46px, 8vmin, 60px);
    --touch-stick: clamp(90px, 24vmin, 126px);
    --touch-gap: clamp(8px, 2vmin, 14px);
    --touch-bottom: max(54px, 13%);
    --touch-radius: calc(var(--touch-button) / 2);
    position: fixed;
    left: var(--horizon-game-left, 0px);
    top: var(--horizon-game-top, 0px);
    width: var(--horizon-game-width, 100vw);
    height: var(--horizon-game-height, 100svh);
    color: #f4f6f8;
    z-index: 2;
    pointer-events: none;
}

.horizon-touch[hidden],
.horizon-touch [hidden] {
    display: none !important;
}

.horizon-touch button {
    font: inherit;
    font-size: .82rem;
    line-height: 1.1;
    color: inherit;
    min-width: 44px;
    min-height: 44px;
    touch-action: none;
    pointer-events: auto;
}

.horizon-touch button {
    background: rgb(17 24 30 / 78%);
    border: 1px solid rgb(222 235 247 / 72%);
    border-radius: 10px;
    padding: 0 6px;
    cursor: pointer;
}

.horizon-touch button[data-held],
.horizon-touch button[aria-pressed="true"] {
    background: rgb(28 85 62 / 92%);
    border-color: #bcf0d3;
}

.horizon-touch button:focus-visible {
    outline: 2px solid #bcf0d3;
    outline-offset: 2px;
}

.horizon-touch [data-position] {
    position: absolute;
    left: var(--touch-x, var(--touch-default-x));
    top: var(--touch-y, var(--touch-default-y));
    transform: translate(-50%, -50%);
}

.horizon-touch button[data-position] {
    width: var(--touch-button);
    height: var(--touch-button);
}

.horizon-touch [data-position="move"] {
    --touch-default-x: calc(var(--touch-gap) + var(--touch-stick) / 2);
    --touch-default-y: calc(100% - var(--touch-bottom) - var(--touch-stick) / 2);
}

.horizon-touch [data-position="jump"] {
    --touch-default-x: calc(100% - var(--touch-gap) - var(--touch-radius));
    --touch-default-y: calc(100% - var(--touch-bottom) - var(--touch-radius));
}

.horizon-touch [data-position="sneak"] {
    --touch-default-x: calc(100% - 2 * var(--touch-gap) - 3 * var(--touch-radius));
    --touch-default-y: calc(100% - var(--touch-bottom) - var(--touch-radius));
}

.horizon-touch [data-position="attack"] {
    --touch-default-x: calc(100% - var(--touch-gap) - var(--touch-radius));
    --touch-default-y: calc(100% - var(--touch-bottom) - var(--touch-gap) - 3 * var(--touch-radius));
}

.horizon-touch [data-position="place"] {
    --touch-default-x: calc(100% - 2 * var(--touch-gap) - 3 * var(--touch-radius));
    --touch-default-y: calc(100% - var(--touch-bottom) - var(--touch-gap) - 3 * var(--touch-radius));
}

.horizon-touch [data-position="ascend"] {
    --touch-default-x: calc(100% - var(--touch-gap) - var(--touch-radius));
    --touch-default-y: calc(100% - var(--touch-bottom) - 2 * var(--touch-gap) - 5 * var(--touch-radius));
}

.horizon-touch [data-position="descend"] {
    --touch-default-x: calc(100% - 2 * var(--touch-gap) - 3 * var(--touch-radius));
    --touch-default-y: calc(100% - var(--touch-bottom) - 2 * var(--touch-gap) - 5 * var(--touch-radius));
}

.horizon-touch [data-position="pause"] {
    --touch-default-x: calc(50% - var(--touch-button) - var(--touch-gap));
}

.horizon-touch [data-position="inventory"] {
    --touch-default-x: 50%;
}

.horizon-touch [data-position="settings"] {
    --touch-default-x: calc(50% + var(--touch-button) + var(--touch-gap));
}

.horizon-touch [data-position="back"] {
    --touch-default-x: calc(var(--touch-gap) + var(--touch-radius));
    --touch-default-y: calc(var(--touch-gap) + var(--touch-radius));
}

.horizon-touch.is-menu > :not([data-position="back"]) {
    display: none !important;
}

.horizon-touch [data-position="pause"],
.horizon-touch [data-position="inventory"],
.horizon-touch [data-position="settings"] {
    --touch-default-y: calc(var(--touch-gap) + var(--touch-radius));
}

.horizon-touch-move {
    display: grid;
    width: var(--touch-stick);
    height: var(--touch-stick);
    place-items: center;
}

.horizon-touch button.horizon-touch-joystick {
    width: 100%;
    height: 100%;
    background: rgb(17 24 30 / 45%);
    border-radius: 50%;
    padding: 0;
}

.horizon-touch-joystick span {
    display: block;
    width: 45%;
    aspect-ratio: 1;
    margin: auto;
    border: 1px solid rgb(222 235 247 / 90%);
    border-radius: 50%;
    background: rgb(185 215 218 / 55%);
    transform: translate(var(--touch-stick-x, 0px), var(--touch-stick-y, 0px));
    pointer-events: none;
}

.horizon-touch-directions {
    display: grid;
    grid-template: repeat(3, minmax(44px, 1fr)) / repeat(3, minmax(44px, 1fr));
    place-content: center;
}

.horizon-touch-directions button {
    width: 44px;
    height: 44px;
    border-radius: 8px;
    padding: 0;
    font-size: 1.25rem;
}

.horizon-touch [data-direction="up"] { grid-area: 1 / 2; }
.horizon-touch [data-direction="left"] { grid-area: 2 / 1; }
.horizon-touch [data-direction="right"] { grid-area: 2 / 3; }
.horizon-touch [data-direction="down"] { grid-area: 3 / 2; }
.horizon-touch-directions [data-control="sneak"] { grid-area: 2 / 2; font-size: .7rem; }

.horizon-touch-move:has(.horizon-touch-directions:not([hidden])) {
    --touch-stick: 132px;
}

.horizon-touch-settings,
.horizon-touch-arrange {
    position: absolute;
    z-index: 1;
    left: 50%;
    top: calc(var(--touch-button) + 2 * var(--touch-gap));
    transform: translateX(-50%);
    background: rgb(17 24 30 / 96%);
    border: 1px solid #8797a8;
    border-radius: 12px;
    padding: 10px;
    pointer-events: auto;
}

.horizon-touch-settings {
    width: min(246px, calc(100% - 2 * var(--touch-gap)));
    max-height: calc(100% - var(--touch-button) - 3 * var(--touch-gap));
    overflow-y: auto;
    touch-action: pan-y;
    display: grid;
    gap: 6px;
}

.horizon-touch-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
}

.horizon-touch-arrange {
    display: flex;
    align-items: center;
    gap: 12px;
    width: max-content;
    max-width: calc(100% - 2 * var(--touch-gap));
}

.horizon-touch.is-editing [data-position] {
    outline: 1px dashed #bcf0d3;
    pointer-events: auto;
    cursor: move;
}

@media (max-height: 370px) and (orientation: landscape) {
    .horizon-touch {
        --touch-bottom: 32px;
    }
}