:root {
  --page: #111111;
  --border: #d8d8d8;
  --frame-gap: clamp(8px, 1.6vw, 18px);
  --stage-width: min(calc(100vw - var(--frame-gap) * 2), calc((100dvh - var(--frame-gap) * 2) * 4 / 3));
  --stage-height: min(calc(100dvh - var(--frame-gap) * 2), calc((100vw - var(--frame-gap) * 2) * 3 / 4));
}

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  min-height: 100%;
  background: var(--page);
}

body {
  font-family: "MS PGothic", "Yu Gothic", sans-serif;
}

.page {
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--frame-gap);
}

.stage {
  width: var(--stage-width);
  height: var(--stage-height);
  border: 2px solid var(--border);
  background: #ffffff;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
}

#game {
  display: block;
  width: 100%;
  height: 100%;
  cursor: pointer;
  background: #ffffff;
  touch-action: none;
}