* {
  box-sizing: border-box;
}

body {
  height: 100vh;
  margin: 0;
  overflow: hidden;
  background: #101849;
  font-family: monospace;
  display: grid;
  place-items: center;
}


canvas {
  width: min(100vw, 62.5vh);
  height: min(160vw, 100vh);
  image-rendering: pixelated;
  touch-action: none;
}

.buttons {
  position: fixed;
  inset: auto 0 0;
  display: flex;
  justify-content: center;
  gap: 5px;
  padding: 5px 7px 8px;
}

button {
  height: 44px;
  padding: 7px 11px;
  border: 2px solid #7184c3;
  clip-path: polygon(4px 0, calc(100% - 4px) 0, 100% 4px, 100% 100%, 0 100%, 0 4px);
  background: #263b83;
  color: #fff;
  font: 700 14px monospace;
}

.fire {
  padding-inline: 20px;
  background: #a33fc8;
}

.fast {
  border-color: #8eefff;
  background: #187e9f;
}

.retry {
  border-color: #ffd08b;
  background: #c76539;
}

.wait,
:disabled {
  border-color: #52639666;
  background: #263b8366;
  color: #fff6;
}

@media (hover: none) {
  button:not(.fire) {
    display: none;
  }
}