@font-face {
  font-family: 'Jua';
  src: url('../assets/fonts/Jua-Regular.ttf') format('truetype');
  font-display: block;
}
html, body {
  margin: 0; padding: 0; height: 100%;
  background: #2b2140;
  background-image: radial-gradient(circle at 20% 20%, #3a2d55 0, #2b2140 45%), radial-gradient(circle at 80% 80%, #3d2a4a 0, #2b2140 45%);
  overflow: hidden; font-family: 'Jua', 'Malgun Gothic', sans-serif;
  user-select: none;
  touch-action: none; /* 핀치줌/당겨서새로고침 등 모바일 기본 제스처가 조작과 부딪히지 않도록 */
  -webkit-tap-highlight-color: transparent;
}
#wrap {
  position: fixed; inset: 0; display: flex; align-items: center; justify-content: center;
  /* 모바일 주소창이 나타났다 사라졌다 해도 실제 보이는 높이에 맞춰요.
     --vh 는 js/main.js 가 visualViewport 기준으로 계속 갱신해줘요(주소창 크기 변화 실시간 대응).
     JS가 아직 안 돌았거나 지원 안 하는 아주 오래된 브라우저에서는 1vh로 자연스럽게 대체돼요. */
  height: calc(var(--vh, 1vh) * 100);
}
canvas#game {
  image-rendering: pixelated; image-rendering: crisp-edges;
  background: #2b2140;
  touch-action: none;
  border-radius: 18px;
  box-shadow: 0 20px 60px rgba(0,0,0,.45), 0 0 0 6px #ffd6e8, 0 0 0 12px #7a5c9e;
  max-width: 96vw; max-height: calc(var(--vh, 1vh) * 96);
  aspect-ratio: 16 / 9;
  width: min(96vw, calc(var(--vh, 1vh) * 96 * 16 / 9));
  height: auto;
  cursor: default;
}