* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  background: #101013;
  font-family: "Trebuchet MS", "Segoe UI", sans-serif;
  color: #f3e8c5;
}

.app-shell {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
}

canvas {
  width: min(96vw, 960px);
  height: auto;
  max-height: 94vh;
  border: 3px solid #d9a441;
  border-radius: 10px;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.45);
  background: #241a13;
  touch-action: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

@media (max-width: 640px) {
  canvas {
    width: 100vw;
    border-radius: 0;
    border-width: 2px;
    max-height: 60vh;
  }
}

@media (max-width: 640px) and (orientation: landscape) {
  canvas {
    max-height: 92vh;
    width: 100vw;
  }
}