* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;

  -webkit-tap-highlight-color: transparent;
}

html,
body {
  position: fixed;
  inset: 0;

  width: 100%;
  height: 100%;

  overflow: hidden;
  overscroll-behavior: none;

  background: #87ceeb;

  font-family:
    Arial,
    Helvetica,
    sans-serif;

  touch-action: none;

  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

body {
  min-height: 100%;
}

canvas {
  position: fixed;
  inset: 0;

  display: block;

  width: 100%;
  height: 100%;

  touch-action: none;
}

#gameHud {
  position: fixed;
  top: 14px;
  left: 14px;
  z-index: 20;

  display: grid;
  gap: 8px;

  min-width: 150px;
  padding: 12px 15px;

  color: white;

  border:
    1px solid
    rgba(255, 255, 255, 0.25);

  border-radius: 14px;

  background:
    rgba(0, 0, 0, 0.48);

  box-shadow:
    0 6px 18px
    rgba(0, 0, 0, 0.22);

  backdrop-filter: blur(7px);

  pointer-events: none;
}

#gameHud p {
  margin: 0;

  font-size: 15px;
  font-weight: bold;
}

#message {
  min-height: 20px;

  color: #ffd166;
}

#controls {
  position: fixed;
  right: 14px;
  bottom: 14px;
  z-index: 30;

  display: grid;

  grid-template-columns:
    repeat(3, 64px);

  gap: 8px;

  touch-action: none;

  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

#controls button {
  display: grid;
  place-items: center;

  width: 64px;
  height: 56px;

  padding: 0;

  color: white;

  border:
    1px solid
    rgba(255, 255, 255, 0.35);

  border-radius: 14px;

  outline: none;

  background:
    rgba(0, 0, 0, 0.58);

  box-shadow:
    0 5px 14px
    rgba(0, 0, 0, 0.25);

  font-family: inherit;
  font-size: 23px;
  font-weight: bold;

  cursor: pointer;

  touch-action: none;

  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

#controls button.active,
#controls button:active {
  background:
    rgba(244, 163, 64, 0.9);

  transform: scale(0.94);
}

#forwardButton {
  grid-column: 2;
}

#leftButton {
  grid-column: 1;
  grid-row: 2;
}

#brakeButton {
  grid-column: 2;
  grid-row: 2;
}

#rightButton {
  grid-column: 3;
  grid-row: 2;
}

#jumpButton {
  grid-column: 2;
  grid-row: 3;

  background:
    rgba(34, 126, 74, 0.82);
}

#loadingScreen {
  position: fixed;
  inset: 0;
  z-index: 100;

  display: grid;
  place-items: center;

  padding: 24px;

  color: white;

  background:
    linear-gradient(
      160deg,
      #152033,
      #304d73
    );

  text-align: center;

  touch-action: none;
}

#loadingScreen.hidden {
  display: none;
}

#loadingScreen h1 {
  margin-bottom: 10px;

  font-size: 30px;
}

#loadingScreen p {
  color: #d9e7ff;
}

@media (max-width: 600px) {
  #gameHud {
    top: 8px;
    left: 8px;

    min-width: 135px;

    padding: 9px 11px;
  }

  #gameHud p {
    font-size: 13px;
  }

  #controls {
    right: 9px;
    bottom: 9px;

    grid-template-columns:
      repeat(3, 58px);
  }

  #controls button {
    width: 58px;
    height: 52px;
  }
}

#neoRunButton {
  translate: -116px 18px;
  z-index: 20;
  touch-action: manipulation;
}

#neoRunButton {
  translate: -116px 18px;
  z-index: 20;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}