html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  color: rgba(255, 255, 255, 0.87);
  /* game/game-objects/board/Board.ts의 PAGE_BG_COLOR와 같은 값 — 부팅
     시 src/main.ts가 그 상수로 이 값을 다시 덮어써서, PAGE_BG_COLOR가
     바뀌면 여기도 항상 같이 따라온다(이 값은 JS 실행 전 잠깐 보일
     기본값일 뿐). */
  background-color: #aec6cb;
  font-family: "Chiron GoRound TC", sans-serif;
  overscroll-behavior: none;
}

#app {
  /* 캔버스(게임 콘텐츠)는 노치/홈 인디케이터 뒤까지 화면 전체를 그대로
     채운다 — 안전 영역만큼 줄여서 그 자리를 배경색으로만 눈속임하면,
     배경은 안 잘려 보여도 실제 로고/버튼이 놓일 수 있는 영역 자체가
     좁아져서 레이아웃이 위쪽으로 쏠려 보인다(버튼이 화면 아래쪽으로
     안 내려감). 대신 노치/홈 인디케이터를 피해야 하는 개별 UI 요소
     (로고, 하단 버튼, 점수판 등)가 각 씬 코드에서 getSafeAreaInsetsGamePx로
     직접 여백을 더한다. */
  position: fixed;
  inset: 0;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  touch-action: none;
  overscroll-behavior: none;
}

#game-container {
  max-width: 100%;
  height: 100%;
  touch-action: none;
}

/* #hud/#modal은 미션 선택 화면·팝업(Dim 포함) 같은 React 화면들이
   그려지는 자리다. 대부분의 팝업은 배경 전체를 덮는 Dim(반투명 검정)
   위에 가운데 정렬된 카드를 얹는 구조라, Dim 자체는 노치/홈
   인디케이터 뒤까지 화면 전체를 덮어야 자연스럽다 — 그래서 이 컨테이너
   자체는 화면 전체를 그대로 덮게 두고(세이프에어리어로 줄이지 않음),
   안전 영역이 실제로 필요한 화면(LevelSelectUI처럼 Dim 없이 화면
   전체가 콘텐츠인 경우)은 그 컴포넌트 자신의 루트에서 직접 패딩을
   준다(배경은 padding 밑에도 그대로 칠해지니까 배경은 안 잘리고
   내용만 안쪽으로 들어옴). */
#hud,
#modal {
  position: fixed;
  inset: 0;
}

#loading {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background-color: #aec6cb;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 32px;
}

#loading-logo {
  width: 200px;
  height: auto;
}

#loading-spinner {
  width: 40px;
  height: 40px;
}

#game-container canvas {
  touch-action: none;
}

.score_board > .score_label {
  font-size: 20px;
  margin-bottom: 2px;
  font-weight: 800;
}

.score_board > .score_value {
  font-size: 52px;
  color: #322c25;
  font-weight: 700;
}

.score_board > .best_label {
  color: #8d8680;
  font-size: 20px;
  font-weight: 700;
}

.score_board > .best_value {
  color: #5c544b;
  font-size: 24px;
  font-weight: 700;
}