/* ── 리셋 & 풀블리드 ───────────────────────────── */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;          /* 스크롤 절대 금지 */
  background: #0b0d17;       /* letterbox 여백 색 */
  /* iframe 안에서 탭 하이라이트/선택 방지 */
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
  touch-action: manipulation;
}

/* ── 스테이지: 뷰포트 채우고 프레임 중앙 정렬 ──────── */
#stage {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/*
 * 프레임: 항상 2:1 비율 유지.
 * aspect-ratio + max-width/max-height 조합으로
 * - 부모가 2:1보다 가로로 넓으면 → 세로(height)에 맞춰 pillarbox
 * - 부모가 2:1보다 세로로 높으면 → 가로(width)에 맞춰 letterbox
 * width/height를 100vw/100vh 기준으로 잡고 max로 서로를 제한.
 */
#frame {
  aspect-ratio: 2 / 1;
  width: min(100vw, 200vh);   /* 세로가 제약이면 200vh가 이김 → letterbox */
  max-width: 100vw;
  max-height: 100vh;
  position: relative;
  background: #141829;
  box-shadow: 0 0 60px rgba(0, 0, 0, 0.5);
  overflow: hidden;
}

/* ── 캔버스: 프레임을 꽉 채움 ─────────────────────── */
#game {
  display: block;
  width: 100%;
  height: 100%;
}