/* 모바일 크로스벤더 표준: theme-color/색상은 index.html·main.ts·manifest, 레이아웃·터치는 여기.
   근거 = knowledge/notes/mobile-cross-vendor-webgame.md (MDN/Apple/WebKit/web.dev). */

/* ── 폰트 파이프 (visual-modernization.design.v2 — 빌드 자체호스팅, Latin subset) ── */
@font-face {
    font-family: 'Baloo 2';
    font-style: normal;
    font-weight: 700 800;
    font-display: swap;
    src: url('/assets/fonts/baloo2-700-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
                   U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
                   U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Nunito';
    font-style: normal;
    font-weight: 600 700;
    font-display: swap;
    src: url('/assets/fonts/nunito-600-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
                   U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
                   U+2212, U+2215, U+FEFF, U+FFFD;
}

html {
    height: 100%;
    /* 구형 iOS Safari(dvh 이전): 주소창 포함 실가시 높이 */
    min-height: -webkit-fill-available;
    background-color: #F5F4EF; /* 메타/매니페스트 무시돼도 graceful — 전부 동색 */
}

body {
    margin: 0;
    padding: 0;
    background-color: #F5F4EF; /* 게임 배경색 = 레터박스가 깨져보이지 않게 */
    overflow: hidden;
    color-scheme: only light;
    overscroll-behavior: none; /* 당겨서새로고침/바운스 억제(Chromium 계열) */
    -webkit-tap-highlight-color: transparent;
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    /* 높이: 모던(dvh)이 이기도록 폴백 먼저 → fill-available → dvh 순 */
    min-height: 100vh;
    min-height: -webkit-fill-available;
    min-height: 100dvh;
}

/* 외부 쉘: 세이프영역(노치/다이내믹아일랜드/홈인디케이터)만큼 패딩 → 안쪽 컨테이너가 세이프박스에 FIT.
   ★패딩은 캔버스가 아니라 이 외부 컨테이너에(Phaser Scale이 부모 측정 → 캔버스 직접 패딩은 측정 왜곡). */
#peel-app {
    width: 100%;
    height: 100vh;
    height: 100dvh; /* 모바일 주소창 보정 */
    padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

/* Phaser parent(측정 대상). 드래그/탭 게임 → 브라우저 팬/줌 제스처 차단. */
#peel-game-container {
    width: 100%;
    height: 100%;
    background-color: #F5F4EF;
    touch-action: none;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

#peel-game-container canvas {
    display: block;
    touch-action: none;
    outline: none;
}

/* ── Portrait game in landscape viewport (orientation: both / portrait) ──────
   When data-orientation-mode="both"/"portrait" and the viewport is landscape:
   constrain container to portrait aspect ratio → canvas is portrait-sized,
   centered via parent #peel-app flex (justify-content/align-items: center).
   --game-aspect is set by orientation.ts applyOrientationConstraint().
   Specificity: ID + attribute (0,1,1,0) beats plain ID (0,1,0,0) on base rule. */
@media (orientation: landscape) {
    #peel-game-container[data-orientation-mode="both"],
    #peel-game-container[data-orientation-mode="portrait"] {
        width: auto;
        height: min(100%, var(--game-max-h, 1281px));
        aspect-ratio: var(--game-aspect, 0.561594);
        max-width: min(100%, var(--game-max-w, 720px));
    }
}

/* ── Landscape-native game (orientation: auto/landscape, viewport ratio ≥1) ──────────────────
   docs/design/landscape-native-decision.md — orientation.ts resolves 'landscape' from config
   ui.landscapeBaseW/H (960×540, 16:9) × ui.scaleMax (reused, no new token) = 1440×810 cap,
   safely inside the FHD (1920×1080) max-screen ceiling uncaose specified. Applies regardless
   of the physical viewport's own orientation media query (unlike the portrait rule above) so a
   forced 'landscape' mode still pillarboxes correctly inside a portrait viewport. */
#peel-game-container[data-orientation-mode="landscape"] {
    width: auto;
    height: min(100%, var(--game-max-h, 810px));
    aspect-ratio: var(--game-aspect, 1.777778);
    max-width: min(100%, var(--game-max-w, 1440px));
}