:root {
  --em-control-size: clamp(44px, 10vh, 76px);
  --em-control-gap: clamp(4px, 1vh, 10px);
  --em-safe-top: env(safe-area-inset-top, 0px);
  --em-safe-right: env(safe-area-inset-right, 0px);
  --em-safe-bottom: env(safe-area-inset-bottom, 0px);
  --em-safe-left: env(safe-area-inset-left, 0px);
}

html.eagler-mobile-active,
html.eagler-mobile-active body,
html.eagler-mobile-active canvas {
  height: 100svh !important;
  overscroll-behavior: none;
  touch-action: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.em-layer {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  pointer-events: none;
  touch-action: none;
  font-family: sans-serif;
}

.em-layer[hidden] {
  display: none !important;
}

.em-control {
  position: absolute;
  width: var(--em-control-size);
  height: var(--em-control-size);
  padding: 0;
  border: 0;
  outline: 0;
  pointer-events: auto;
  touch-action: none;
  user-select: none;
  background-color: transparent;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  image-rendering: pixelated;
  opacity: 0.9;
}

.em-control:active,
.em-control.em-active,
.em-control.em-key-active {
  opacity: 1;
  transform: translateY(1px);
}

.em-control[hidden],
.em-hidden {
  display: none !important;
}

.em-pad {
  position: absolute;
  left: calc(var(--em-safe-left) + var(--em-control-gap));
  bottom: calc(var(--em-safe-bottom) + var(--em-control-gap));
  width: calc(var(--em-control-size) * 3);
  height: calc(var(--em-control-size) * 3);
  pointer-events: none;
}

.em-actions {
  position: absolute;
  right: calc(var(--em-safe-right) + var(--em-control-gap));
  bottom: calc(var(--em-safe-bottom) + var(--em-control-gap));
  width: calc(var(--em-control-size) * 3);
  height: calc(var(--em-control-size) * 4);
  pointer-events: none;
}

.em-topbar {
  position: absolute;
  top: calc(var(--em-safe-top) + var(--em-control-gap));
  left: 50%;
  display: flex;
  gap: var(--em-control-gap);
  transform: translateX(-50%);
  pointer-events: none;
}

.em-menu-bar {
  position: absolute;
  top: calc(var(--em-safe-top) + var(--em-control-gap));
  right: calc(var(--em-safe-right) + var(--em-control-gap));
  display: flex;
  gap: var(--em-control-gap);
  pointer-events: none;
}

.em-hidden-input {
  position: fixed;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
  z-index: -1;
}

.em-forward {
  left: var(--em-control-size);
  bottom: calc(var(--em-control-size) * 2);
  background-image: url("images/up.png");
}

.em-forward.em-active,
.em-forward.em-key-active {
  background-image: url("images/up_pressed.png");
}

.em-back {
  left: var(--em-control-size);
  bottom: 0;
  background-image: url("images/down.png");
}

.em-back.em-active,
.em-back.em-key-active {
  background-image: url("images/down_pressed.png");
}

.em-left {
  left: 0;
  bottom: var(--em-control-size);
  background-image: url("images/left.png");
}

.em-left.em-active,
.em-left.em-key-active {
  background-image: url("images/left_pressed.png");
}

.em-right {
  left: calc(var(--em-control-size) * 2);
  bottom: var(--em-control-size);
  background-image: url("images/right.png");
}

.em-right.em-active,
.em-right.em-key-active {
  background-image: url("images/right_pressed.png");
}

.em-strafe-left {
  left: 0;
  bottom: calc(var(--em-control-size) * 2);
  background-image: url("images/strafeLeft.png");
}

.em-strafe-left.em-active,
.em-strafe-left.em-key-active {
  background-image: url("images/strafeLeftPressed.png");
}

.em-strafe-right {
  left: calc(var(--em-control-size) * 2);
  bottom: calc(var(--em-control-size) * 2);
  background-image: url("images/strafeRight.png");
}

.em-strafe-right.em-active,
.em-strafe-right.em-key-active {
  background-image: url("images/strafeRightPressed.png");
}

.em-crouch {
  left: var(--em-control-size);
  bottom: var(--em-control-size);
  background-image: url("images/crouch.png");
}

.em-crouch.em-active,
.em-crouch.em-key-active {
  background-image: url("images/crouchPressed.png");
}

.em-crouch.em-locked {
  background-image: url("images/crouchLock.png");
}

.em-jump {
  right: var(--em-control-size);
  bottom: var(--em-control-size);
  background-image: url("images/jumpButton.png");
}

.em-jump.em-active,
.em-jump.em-key-active {
  background-image: url("images/jumpButtonPressed.png");
}

.em-attack {
  right: var(--em-control-size);
  bottom: calc(var(--em-control-size) * 2);
  background-image: url("images/attack.png");
}

.em-attack.em-active,
.em-attack.em-key-active {
  background-image: url("images/attack_pressed.png");
}

.em-place {
  right: 0;
  bottom: calc(var(--em-control-size) * 2);
  background-image: url("images/place.png");
}

.em-place.em-active,
.em-place.em-key-active {
  background-image: url("images/interact_pressed.png");
}

.em-pick {
  right: calc(var(--em-control-size) * 2);
  bottom: calc(var(--em-control-size) * 2);
  background-image: url("images/select.png");
}

.em-pick.em-active,
.em-pick.em-key-active {
  background-image: url("images/selectPressed.png");
}

.em-sprint {
  right: 0;
  bottom: var(--em-control-size);
  background-image: url("images/sprint.png");
}

.em-sprint.em-active,
.em-sprint.em-key-active,
.em-sprint.em-locked {
  background-image: url("images/sprint_pressed.png");
}

.em-inventory {
  right: 0;
  bottom: calc(var(--em-control-size) * 3);
  background-image: url("images/inventory.png");
}

.em-inventory.em-active,
.em-inventory.em-key-active {
  background-image: url("images/inventoryPressed.png");
}

.em-drop {
  right: var(--em-control-size);
  bottom: calc(var(--em-control-size) * 3);
  background-image: url("images/drop.png");
}

.em-drop.em-active,
.em-drop.em-key-active {
  background-image: url("images/dropPressed.png");
}

.em-scroll-left {
  right: var(--em-control-size);
  bottom: 0;
  background-image: url("images/scrollLeft.png");
}

.em-scroll-left.em-active,
.em-scroll-left.em-key-active {
  background-image: url("images/scrollLeftPressed.png");
}

.em-scroll-right {
  right: 0;
  bottom: 0;
  background-image: url("images/scrollRight.png");
}

.em-scroll-right.em-active,
.em-scroll-right.em-key-active {
  background-image: url("images/scrollRightPressed.png");
}

.em-pause {
  position: relative;
  background-image: url("images/pauseButton.png");
}

.em-pause.em-active,
.em-pause.em-key-active {
  background-image: url("images/pausePressed.png");
}

.em-chat {
  position: relative;
  background-image: url("images/chat.png");
}

.em-chat.em-active,
.em-chat.em-key-active {
  background-image: url("images/chatPressed.png");
}

.em-perspective {
  position: relative;
  background-image: url("images/perspective5.png");
}

.em-perspective.em-active,
.em-perspective.em-key-active {
  background-image: url("images/perspectivePressed.png");
}

.em-screenshot {
  position: relative;
  background-image: url("images/screenshot.png");
}

.em-screenshot.em-active,
.em-screenshot.em-key-active {
  background-image: url("images/screenshotPressed.png");
}

.em-debug {
  position: relative;
  background-image: url("images/compass.png");
}

.em-debug.em-active,
.em-debug.em-key-active {
  background-image: url("images/compassPressed.png");
}

.em-keyboard {
  position: relative;
  background-image: url("images/keyboard.png");
}

.em-keyboard.em-active,
.em-keyboard.em-key-active {
  background-image: url("images/keyboardPressed.png");
}

.em-menu-back {
  position: relative;
  background-image: url("images/backButton.png");
}

.em-menu-back.em-active,
.em-menu-back.em-key-active {
  background-image: url("images/backPressed.png");
}

@media (orientation: portrait) {
  :root {
    --em-control-size: clamp(42px, 8vh, 64px);
  }
}