body {
  display: flex;
  justify-content: center;
  align-items: center;
  background: #121212;
  overflow-y: hidden;
  user-select: none;
  font-family: 'Bubblegum Sans', sans-serif;
}

img {
  image-rendering: pixelated;
}

.overlay {
  filter: blur(5%);
  background-color: rgba(0,0,0,0.5);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
}

.no-mouse { pointer-events: none; }

/* canvas { cursor: none; } */

.btn { padding: 1vmin 2vmin; border: 0.25vmin solid white; border-radius: 0.5vmin; cursor: pointer; }

.pause {
  font-family: "Bubblegum Sans";
  font-size: 3vmin;
  text-align: center;
}

.pause .title {
  font-size: 9vmin;
  margin-bottom: 1vmin;
}

.shop {
  pointer-events: visible;
  user-select: none;
  position: absolute;
  background: #4e3b30;
  padding: 1vmin 2vmin;
  border-radius: 2vmin;
  box-shadow: 0 1vmin 2vmin rgba(0, 0, 0, 0.25);
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 39vmin;
  text-align: center;
  padding-bottom: 5vmin;
  border-bottom: solid 0.25em #312620;
}

.shop__close {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: block;
  width: 100%;
}

.shop__empty {
  font-size: 2em;
  margin: 2em;
  opacity: 0.5;
}

.shop .title {
  margin-top: 1vmin;
  font-size: 4vmin;
  font-family: "Bubblegum Sans";
  text-shadow: 0 0.5vmin 1vmin rgb(0 0 0 / 25%);
  margin-bottom: 2vmin;
  padding: 1vmin;
  border-top: 1vmin;
  border-bottom: 1vmin;
  border-style: double;
  border-color: rgba(0,0,0,0.25);
  border-radius: 1vmin;
}

.shop .item {
  position: relative;
  font-size: initial;
  display: flex;
  flex-direction: column;
  text-align: center;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

.shop .item__details {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 2vmin;
  padding: 1vmin;

  visibility: hidden;
  opacity: 0;
  transition: visibility 150ms ease-in-out, opacity 150ms ease-in-out;
}

.game {
  transition: filter 300ms ease-in-out, opacity 500ms ease-in-out;
}

.game > *:not(.main-menu) { opacity: 1; transition: opacity 2000ms ease-out; }
.game.hide-game > *:not(.main-menu) { opacity: 0;  }

.black-and-white {
  filter: grayscale(1);
}


.item__image {
  width: 12vmin;
  height: 12vmin;
  background: rgba(0,0,0,0.25);
  border-radius: 1vmin;
  transition: box-shadow 150ms ease-in-out, border 150ms ease-in-out;
  background-size: contain;
  image-rendering: pixelated;
}

.shop .item:hover .item__image,
.gamepad .shop .item.selected .item__image {
  box-shadow: 0 0.5vmin 1vmin rgb(0 0 0 / 50%);
  border: solid 0.25vmin white;
}

.shop .item__name {
  margin-top: 1vmin;
  font-size: 3vmin;
  font-family: 'Bubblegum Sans', sans-serif;
}

.shop .item:hover .item__name,
.gamepad .shop .item.selected .item__name {
  text-shadow: 0 0.25em 1em rgba(0, 0, 0, 0.5);
  animation: bob 1s ease-in-out infinite;
}

.game {
  position: relative;
}


@keyframes bob {
  0% {
    transform: none;
  }
  50% {
    transform: translateY(-5%);
  }
  100% {
    transform: none;
  }
}

.dialogue-prompt,
.tutorial-prompt__wrapper {
  position: absolute;
  pointer-events: none;
  top: 5vmin;
  right: 5vmin;
  font-size: 2.5vmin;
  background: #121212;
  padding: 1.5vmin 2vmin;
  color: white;
  border-radius: 0.5vmin;
  pointer-events: none;
  box-shadow: 0 0.5vmin 2vmin rgba(255, 255, 255, 0.25);
  animation: bob ease-in-out 2s infinite;
  user-select: none;
}

.tutorial-prompt__wrapper {
  font-family: 'Bubblegum Sans', sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  right: 50%;
  top: calc(70%);
  transform: translate(50%, -50%);
  animation: none;
  user-select: none;
}

.tutorial-prompt {
  animation: bob ease-in-out 2s infinite;
}

.tutorial-prompt__wrapper::before {
  content: '!';
  display: inline-flex;
  margin-right: 1.5vmin;
  background: rgba(255, 255, 255, 0.25);
  border-radius: 50vmin;
  width: 3.5vmin;
  padding-top: 0.5vmin;
  height: 3vmin;
  display: inline-flex;
  pointer-events: none;
  justify-content: center;
  box-shadow: inset 0 0 1vmin rgba(0, 0, 0, 0.5);
  align-items: center;
}

.dialogue-prompt::before {
  content: 'E';
  background: rgba(255, 255, 255, 0.25);
  width: 3.5vmin;
  padding-top: 0.5vmin;
  height: 3vmin;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  margin-right: 1.5vmin;
  border-radius: 0.5vmin;
  box-shadow: inset 0 0 1vmin rgba(0, 0, 0, 0.25);
}

/* HUD */
.hud {
}
.healthbar {
  -webkit-appearance: none;
  appearance: none;
  height: 3vmin;
  width: 30%;
  position: absolute;
  bottom: 3vmin;
  left: 50%;
  box-shadow: 0 0 1vmin rgb(0 0 0 / 25%);
  background: 0;
  border-radius: 1.5vmin;
  padding: 0.3vmin 0.4vmin;
  transform: translateX(-50%);background: rgba(255, 255, 255, 0.5);
}

.healthbar::-webkit-progress-bar {
  background: #8f33339c;
  border-radius: 1vmin;
  box-shadow: 0 1vmin 2vmin rgba(0, 0, 0, 0.25);
  border: 1px #ccca solid;
}

.healthbar::-webkit-progress-value {
  background: linear-gradient(#c33535, #9e3c3c);
  border-radius: 1vmin;
}

.gold {
  position: absolute;
  bottom: 3vmin;
  left: 3vmin;
  font-size: 3vmin;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  text-shadow: 0 0 1vmin rgb(0 0 0 / 50%);
  background: rgba(0, 0, 0, 0.75);
  padding: 2vmin 3vmin;
  border-radius: 1vmin;
  box-shadow: 0 0 1vmin rgb(0 0 0 / 25%);
}

.gold::before {
  content: '';
  display: block;
  width: 4vmin;
  height: 4vmin;
  background: url(/images/gem.png);
  background-position: left;
  background-size: contain;
  image-rendering: pixelated;
  margin: -2vmin 0;
  margin-left: -1.5vmin;
  margin-right: 0.5vmin;
}

/* Gem counts */

.gem {
  font-size: 3vmin;
  position: absolute;
  top: 1.5em;
  left: 2em;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  text-shadow: 0 0 1vmin rgb(0 0 0 / 75%);
  transition: transform 400ms cubic-bezier(0.18, 0.89, 0.32, 1.28);
  transform: scale(0);
}

.gem--visible { transform: none; }

.gem::before {
  content: '';
  display: block;
  width: 2em;
  height: 2em;
  background-image: url(/images/gem.png);
  background-position: left;
  background-size: contain;
  image-rendering: pixelated;
}

.gem--forest { left: 6em; }
.gem--forest::before { background-image: url('/images/gem-forest.png'); }

.gem--desert { left: 10em; }
.gem--desert::before { background-image: url('/images/gem-desert.png'); }

.gem--volcano { left: 14em; }
.gem--volcano::before { background-image: url('/images/gem-volcano.png'); }