:root {
  --bg: #1f1c18;
  --panel: #f7f1e6;
  --line: #2f2922;
  --canvas-base-width: 1400;
  --canvas-base-height: 860;
  --canvas-shell-padding: 24px;
  --canvas-shell-border: 4px;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: radial-gradient(circle at 20% 10%, #3d342a, var(--bg) 45%);
  font-family: "Noto Sans KR", "Apple SD Gothic Neo", sans-serif;
}

.canvas-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
}

#game-canvas {
  width: min(
    96vw,
    1400px,
    calc(
      (100vh - var(--canvas-shell-padding) - var(--canvas-shell-border))
      * (var(--canvas-base-width) / var(--canvas-base-height))
    )
  );
  max-height: calc(100vh - var(--canvas-shell-padding) - var(--canvas-shell-border));
  height: auto;
  border: 2px solid var(--line);
  background: var(--panel);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.45);
}