/* 캔버스를 화면 중앙에 비율 유지하며 배치하는 최소 스타일 */

* { margin: 0; padding: 0; box-sizing: border-box; }

/* 모바일: 주소창이 접히고 펴져도 흔들리지 않게 dvw/dvh 를 쓰고,
   노치와 홈 인디케이터가 먹는 영역을 빼고 무대 크기를 잰다 */
:root {
  --safe-w: calc(100dvw - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px));
  --safe-h: calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
}


html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
  background: #0a0410;
}

body {
  position: fixed;
  inset: 0;
  -webkit-tap-highlight-color: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  /* 무대 조명의 보랏빛 잔광 */
  background:
    radial-gradient(ellipse 78% 62% at 50% 45%, #241040 0%, #0a0410 74%);
  font-family: ui-monospace, "Cascadia Mono", "Consolas", "D2Coding", monospace;
  cursor: pointer;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}

#stage {
  /* 3:2 비율(960x640)을 유지하면서 창에 맞춰 최대한 키운다 */
  width: min(100vw, calc(100vh * 1.5));
  height: min(100vh, calc(100vw / 1.5));
  width: min(var(--safe-w), calc(var(--safe-h) * 1.5));
  height: min(var(--safe-h), calc(var(--safe-w) / 1.5));
  position: relative;
}

#game {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 6px;
  box-shadow:
    0 0 0 1px rgba(220, 130, 255, 0.16),
    0 0 60px rgba(170, 60, 240, 0.15),
    0 20px 80px rgba(0, 0, 0, 0.7);
}