@font-face {
  font-family: "EditUndoBRK";
  src: url("EditUndoBRK.woff2") format("woff2"),
    url("EditUndoBRK.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

body {
  background-color: #323c39;
  font-family: "EditUndoBRK", monospace;
  font-weight: normal;
  margin: 0;
  padding: 0;
}

canvas {
  display: flex;
  margin: auto;
  border: 1px solid #000;
  image-rendering: pixelated;
}

h1 {
  margin: 0;
  font-weight: normal;
  font-size: 3rem;
}

.modal {
  position: absolute;
  /*background-image: url('./../gfx/modal01-x2-bg.png');*/
  background-image: url("./../gfx/modal02-x2.png");
  display: none;
  flex-direction: column;
  margin: auto;
  width: 786px;
  height: 498px;
  top: 15%;
  left: 0;
  right: 0;
  color: #fff;
  padding: 50px;
  text-align: center;
  box-sizing: border-box;
  font-size: 1.6rem;
}

.modal.open {
  display: flex;
}

.perk-group {
  display: flex;
  margin-top: 15px;
  justify-content: space-evenly;
}

.perk-btn {
  background-size: cover;
  image-rendering: pixelated;
  width: 73px;
  height: 100px;
  transition: all 0.1s;
  cursor: pointer;
  zoom: 2;
}

.perk-btn:hover {
  width: 85px;
  height: 116px;
  margin-top: -10px;
}

.button-no-rotate {
  background-image: url("./../gfx/perk01.png");
  position: relative;
}

.button-first-prio {
  background-image: url("./../gfx/perk02.png");
}

.button-chain {
  background-image: url("./../gfx/perk03.png");
}

.enter-fullscreen {
  position: absolute;
  bottom: 0;
  right: 0;
}

.button-no-rotate div {
  font-size: 0.6rem;
  position: absolute;
  bottom: -20px;
  width: 68px;
  left: 0;
  right: 0;
  margin: 0 auto;
}

.button-play-again,
.button-start-play {
  padding: 20px;
  font-size: 1.5rem;
  width: 50%;
  margin: 0 auto;
}