* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  height: 100%;
}

body {
  background: #0f140b;
  font-family: "Pixelify Sans", monospace;
  overflow: hidden;
}

.stage {
  height: 100dvh;
  display: grid;
  place-items: center;
}

.frame {
  position: relative;
  width: min(100vw, calc(100dvh * 16 / 9));
  aspect-ratio: 16 / 9;
}

#game {
  display: block;
  width: 100%;
  height: 100%;
  background: #1a2212;
  cursor: grab;
  touch-action: none;
}

.feedback {
  position: absolute;
  top: 1.95%;
  right: 5.3%;
  height: 6.1%;
  padding: 0 1.1%;
  border: 2px solid #b9874f;
  border-radius: 8px;
  background: rgba(52, 31, 18, 0.92);
  box-shadow: 0 0 0 2px #1c0f07, 0 3px 6px rgba(0, 0, 0, 0.35);
  color: #f3e6c8;
  font: 600 clamp(10px, 1.25vw, 17px) "Pixelify Sans", monospace;
  cursor: pointer;
}

.feedback:hover {
  background: rgba(90, 56, 30, 0.95);
}