/* ============================================================
   reset.css — 기본 초기화 + 폰트 정의 + 스테이지 배치
   ============================================================ */

/* 학교안심 나무 R (파일이 없으면 fallback 체인으로 렌더링) */
@font-face {
  font-family: 'HakgyoansimNamu';
  /* 1순위 자체 호스팅(오프라인·iOS 앱), 2순위 CDN */
  src: url('../assets/fonts/HakgyoansimNamuR.woff2') format('woff2'),
       url('https://cdn.jsdelivr.net/gh/fonts-archive/HakgyoansimNamu/HakgyoansimNamu-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

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

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #05010f;
  font-family: 'HakgyoansimNamu', 'Jua', 'Nanum Pen Script', 'Malgun Gothic', 'Apple SD Gothic Neo', sans-serif;
  color: #fff;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
  touch-action: manipulation;
}

button, input {
  font-family: inherit;
  border: none;
  outline: none;
  background: none;
  color: inherit;
}
button { cursor: pointer; }

/* 배경 / 이펙트 캔버스 : 전체 화면 고정 */
#bgCanvas, #fxCanvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
#bgCanvas { z-index: 0; }
#fxCanvas { z-index: 60; pointer-events: none; }

/* 가상 캔버스 — JS(layout) 가 모드에 따라 크기를 정하고 scale 로 맞춘다
   · WIDE : 1620 x 1920  (좌 게임 1080 + 우 랭킹 500)
   · TALL : 1080 x 2700  (게임 위 / 랭킹 아래)  — 세로로 긴 화면용 */
#stage {
  position: fixed;
  left: 50%;
  top: 50%;
  width: 1620px;
  height: 1920px;
  margin-left: -810px;
  margin-top: -960px;
  transform-origin: center center;
  z-index: 10;
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
}

/* 좌측 게임 열 — 기존 1080x1920 레이아웃을 그대로 담는다 */
#gameCol {
  position: absolute;
  left: 0; top: 0;
  width: 1080px; height: 1920px;
}
#stage.tall #gameCol { left: 0; }

/* 음소거 버튼 */
#muteBtn {
  position: fixed;
  /* 상단은 간판과 겹치므로 우측 하단에 둔다 */
  right: calc(14px + env(safe-area-inset-right));
  bottom: calc(14px + env(safe-area-inset-bottom));
  z-index: 300;
  width: 46px; height: 46px;
  border-radius: 50%;
  font-size: 20px;
  background: rgba(10, 4, 28, 0.72);
  border: 2px solid rgba(0, 229, 255, 0.55);
  box-shadow: 0 0 14px rgba(0, 229, 255, 0.5);
  transition: transform .15s;
}
#muteBtn:active { transform: scale(0.9); }
#muteBtn.off { border-color: rgba(255,45,85,.6); box-shadow: 0 0 14px rgba(255,45,85,.45); opacity: .7; }

/* 당근 밸런스 홈으로 (2026-09-24) — 음소거 버튼 왼쪽에 나란히 */
#homeBtn {
  position: fixed;
  left: calc(14px + env(safe-area-inset-left));
  bottom: calc(14px + env(safe-area-inset-bottom));
  z-index: 300;
  display: inline-flex; align-items: center; gap: 7px;
  height: 46px; padding: 0 16px 0 13px;
  border-radius: 999px;
  font-size: 18px; line-height: 1;
  color: #fff; text-decoration: none;
  background: rgba(10, 4, 28, 0.72);
  border: 2px solid rgba(255, 149, 61, 0.7);
  box-shadow: 0 0 14px rgba(255, 149, 61, 0.45);
  transition: transform .15s, filter .15s;
}
#homeBtn span { font-size: 16px; font-weight: 700; letter-spacing: 1px; }
#homeBtn:hover { filter: brightness(1.25); }
#homeBtn:active { transform: scale(0.94); }
@media (max-width: 420px) {
  #homeBtn { padding: 0 13px 0 11px; height: 42px; font-size: 17px; }
  #homeBtn span { font-size: 14px; }
}

/* 가로모드 안내 */
#rotateNotice {
  position: fixed; inset: 0; z-index: 400;
  display: none;
  align-items: center; justify-content: center;
  background: #07021a;
  text-align: center;
  font-size: 28px; line-height: 1.8;
}
@media (orientation: landscape) and (max-height: 560px) {
  #rotateNotice { display: flex; }
}