/* ═══════════════════════════════════════════════════════════════════
   [SCALE-TO-FIT 스테이지 공유 CSS]  stage-fit.js 와 세트.
   #main-container 를 390×844 고정 스테이지로 만들고 --sx/--sy 로 스케일한다.
   콘텐츠는 전부 고정 px / flex 비율로 설계 → 요소 관계 불변 → 겹침 원리상 불가.
   중앙 배경(#game-background-img)도 함께 스케일해 콘텐츠와 정렬.
   주변 여백은 #ambient-blur-background(뷰포트 전체, 블러)가 채움.
   이 파일을 로드하는 페이지는 자동으로 스테이지가 적용된다.
   (design_system.css 보다 나중에 로드되어야 #main-container 규칙을 이긴다.)
   ═══════════════════════════════════════════════════════════════════ */
#main-container,
#game-background-img {
    width: 390px !important;
    min-width: 390px !important;
    max-width: 390px !important;
    height: var(--stage-h, 844px) !important;
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;
    transform: translate(-50%, -50%) scale(var(--sx, 1), var(--sy, 1)) !important;
    transform-origin: center center !important;
}

#main-container {
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
}

/* ── 로딩화면도 동일 스테이지로 통일 (메뉴와 같은 배율).
   #loading-screen>div:not(#loading-ambient-blur) = .loading-inner-wrap 하나만 매칭.
   design_system의 동일 선택자 규칙과 같은 특이도 + 나중 로드로 승리.
   배경/로고(cover)·바·텍스트가 390×844 안에서 통째로 스케일 → 비율 무관 일관, 로고 항상 온전. ── */
#loading-screen > div:not(#loading-ambient-blur) {
    width: 390px !important;
    min-width: 390px !important;
    max-width: 390px !important;
    height: var(--stage-h, 844px) !important;
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;
    transform: translate(-50%, -50%) scale(var(--sx, 1), var(--sy, 1)) !important;
    transform-origin: center center !important;
}
/* 로딩바·텍스트 고정값 (태블릿 쿼리가 키우는 것 무력화 → 스케일만) */
#loading-screen .loading-bar-container {
    width: 300px !important;
    max-width: 82% !important;
    height: 9px !important;
    border-radius: 5px !important;
    margin-top: 14px !important;
}
#loading-screen #loading-text {
    font-size: 12px !important;
    margin-top: 12px !important;
    letter-spacing: 3px !important;
}

/* ── 모달도 게임과 같은 배율로 스케일 ──
   특정 비율(태블릿 등, 게임은 크게 스케일되는데 모달은 real 크기라 작아 보이는 것) 해결.
   모달은 가독성 우선 → 균일 배율(--sx)로 왜곡 없이 확대. 바텀시트라 하단 기준(위로 성장).
   슬라이드업 트랜지션(translateY)에 scale을 합성해 애니메이션 유지.
   max-height는 배율로 나눠, 스케일 후 정확히 화면 높이에 맞게(넘침 방지). */
.loc-modal-frame {
    transform: translateY(20px) scale(var(--sx, 1)) !important;
    transform-origin: bottom center !important;
    max-height: calc(90vh / var(--sx, 1)) !important;
}
/* 세로 화면: 화면폭 기준 88vw (화면폭보다 살짝 좁게). 스케일 후 시각폭=88vw, 절대 안 넘침. */
@media (orientation: portrait) {
    .loc-modal-frame {
        width: calc(88vw / var(--sx, 1)) !important;
        max-width: calc(96vw / var(--sx, 1)) !important;
    }
}
/* 가로 화면: 게임처럼 레터박스 — 게임 프레임(390×배율)의 88% 폭. 화면 끝까지 안 펼쳐지고 중앙 정렬. */
@media (orientation: landscape) {
    .loc-modal-frame {
        width: 343px !important;   /* 390(기준폭)의 88%, transform으로 배율 적용됨 */
        max-width: 343px !important;
    }
}
.loc-modal-overlay.active .loc-modal-frame {
    transform: translateY(0) scale(var(--sx, 1)) !important;
}

/* ── 다이아 상점(#diamond-shop-frame): 표준 모달과 별개 커스텀이지만 동일 템플릿 적용.
   이 오버레이는 중앙정렬(바텀시트 아님)이라 transform-origin: center. ── */
#diamond-shop-frame,
.loc-picker-modal,
#item-shop-frame {
    transform: translateY(20px) scale(var(--sx, 1)) !important;
    transform-origin: center center !important;
    max-height: calc(92vh / var(--sx, 1)) !important;   /* 프레임 안전 캡(시각 92vh) */
}
#diamond-shop-overlay.active #diamond-shop-frame,
.loc-overlay.active .loc-picker-modal,
#item-shop-overlay.active #item-shop-frame {
    transform: translateY(0) scale(var(--sx, 1)) !important;
}
@media (orientation: portrait) {
    #diamond-shop-frame,
    .loc-picker-modal,
    #item-shop-frame {
        width: calc(88vw / var(--sx, 1)) !important;
        max-width: calc(96vw / var(--sx, 1)) !important;
    }
}
@media (orientation: landscape) {
    #diamond-shop-frame,
    .loc-picker-modal,
    #item-shop-frame {
        width: 343px !important;
        max-width: 343px !important;
    }
}
/* 내부 스크롤 영역: 시각 88vh에서 고정 크롬(프레임패딩+헤더+양피지패딩+고지 ≈190px)을 뺀 만큼.
   → 스케일 후 프레임 전체(크롬+콘텐츠)가 화면에 여유있게 들어가 하단 고지가 안 잘림(SE 해결).
   SE 등 짧은 화면에선 상품이 살짝 스크롤되지만 고지사항은 항상 온전히 표시. */
.ds-content {
    max-height: calc(88vh / var(--sx, 1) - 190px) !important;
}

/* ── 닉네임 모달(#nickname-modal): generic .modal 시스템, 중앙정렬 단순 카드. #id로 스코프. ── */
#nickname-modal .modal-content-divine {
    transform: scale(var(--sx, 1)) !important;
    transform-origin: center center !important;
    max-height: calc(92vh / var(--sx, 1)) !important;
}
@media (orientation: portrait) {
    #nickname-modal .modal-content-divine {
        width: calc(88vw / var(--sx, 1)) !important;
        max-width: calc(96vw / var(--sx, 1)) !important;
    }
}
@media (orientation: landscape) {
    #nickname-modal .modal-content-divine {
        width: 343px !important;
        max-width: 343px !important;
    }
}

/* ── [키 큰 모드선택 모달] 멀티플레이/게임 모드 선택은 카드 2장이라 세로가 길어,
   uniform(--sx) 배율로는 짧은 폰(iPhone SE 등 stretch 분기, sy<sx)에서 세로가 넘쳐 하단 버튼 잘림.
   풀스크린 씬(스테이지)과 동일하게 (sx,sy) 비균일 배율로 세로까지 맞춰 한 화면에 담는다.
   → 짧은 폰에서만 세로가 눌림(허용), 일반 비율은 sx=sy라 왜곡 0.
   max-height는 스테이지 좌표 고정 캡(820px). 넘치면 내부 loc-modal-content(overflow-y:auto)가 안전망.
   (다른 모달은 기존 uniform 규칙 유지 — 이 두 개만 스코프.) ── */
#multi-mode-modal .loc-modal-frame,
#mode-select-modal .loc-modal-frame {
    transform: translateY(20px) scale(var(--sx, 1), var(--sy, 1)) !important;
    transform-origin: bottom center !important;
    max-height: 820px !important;
}
#multi-mode-modal.loc-modal-overlay.active .loc-modal-frame,
#mode-select-modal.loc-modal-overlay.active .loc-modal-frame {
    transform: translateY(0) scale(var(--sx, 1), var(--sy, 1)) !important;
}

/* ── [듀얼 결과창 세로맞춤] #duel-result-view(봇/랭크/스핑크스)는 보상+합계+XP바+버튼 3개로
   레벨업 모달보다 세로가 길어, uniform 배율론 짧은 폰(SE, stretch 분기 sy<sx)에서 90vh를 넘쳐
   합계 아래가 잘림. 풀스크린 씬과 동일하게 (sx,sy) 비균일 배율로 세로까지 눌러 한 화면에 담는다.
   하단시트 레이아웃이라 origin: bottom center. 일반 비율은 sx=sy라 왜곡 0(짧은 폰만 눌림).
   820px 캡 + 내부 loc-modal-content(overflow-y:auto)가 안전망. ── */
#duel-result-view .loc-modal-frame {
    transform: scale(var(--sx, 1), var(--sy, 1)) !important;
    transform-origin: bottom center !important;
    max-height: 820px !important;
}