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

* { 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: #05060d;
}

body {
  position: fixed;
  inset: 0;
  -webkit-tap-highlight-color: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  /* 게임 바깥 영역에도 은은한 네온 잔광을 깐다 */
  background:
    radial-gradient(ellipse 80% 60% at 50% 40%, #131a3a 0%, #05060d 70%);
  font-family: ui-monospace, "Cascadia Mono", "Consolas", "D2Coding", monospace;
  cursor: crosshair;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}

/* 플레이 중에는 커서를 숨긴다. 패들이 커서 역할을 대신한다 */
body.playing { cursor: 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(120, 200, 255, 0.16),
    0 0 60px rgba(60, 130, 255, 0.18),
    0 20px 80px rgba(0, 0, 0, 0.7);
}