/* 모바일 가상 키패드 + IME — Forgotten Saga (love.js)
 *
 * Layout (모바일 가로 권장):
 *   좌하단: D-pad (4 방향, 큰 영역)
 *   우하단: Space (확인) / Esc (취소) / Enter (메뉴)
 *   우상단: IME 토글 (한글 입력) / Save 토글
 *
 * 데스크톱 (마우스 + 키보드) 시 자동 숨김 (touch 이벤트 없으면 비표시).
 */

#mobile-input {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 100;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}
#mobile-input.hidden { display: none; }

#mobile-input button,
#mobile-input .btn {
    pointer-events: auto;
    background: rgba(40, 40, 60, 0.55);
    border: 2px solid rgba(200, 200, 220, 0.6);
    color: #f0f0f0;
    font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
    font-weight: bold;
    border-radius: 12px;
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.05s, background 0.1s;
}
#mobile-input button:active,
#mobile-input .btn.pressed {
    background: rgba(120, 160, 220, 0.7);
    transform: scale(0.92);
}

/* === Joystick (좌하단) — 4방향 키보드 입력 emulation === */
#mobile-input .joystick {
    position: absolute;
    left: 14px; bottom: 14px;
    width: 168px; height: 168px;
    pointer-events: auto;
    touch-action: none;  /* 브라우저 touch scroll 차단 */
}
#mobile-input .joystick-base {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: rgba(40, 40, 60, 0.45);
    border: 2px solid rgba(200, 200, 220, 0.55);
    box-shadow: inset 0 0 12px rgba(0, 0, 0, 0.3);
}
#mobile-input .joystick-knob {
    position: absolute;
    width: 64px; height: 64px;
    left: 52px; top: 52px;  /* (168-64)/2 = 52 — base 중심 */
    border-radius: 50%;
    background: rgba(120, 160, 220, 0.75);
    border: 2px solid rgba(220, 220, 240, 0.85);
    pointer-events: none;
    transition: transform 0.06s ease-out;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
}
#mobile-input .joystick.active .joystick-base {
    background: rgba(60, 80, 110, 0.55);
}

/* === Action 버튼 (우하단) ===
 * Layout:        esc
 *           space   enter
 */
#mobile-input .actions {
    position: absolute;
    right: 14px; bottom: 14px;
    display: flex; flex-direction: column; gap: 10px; align-items: center;
}
#mobile-input .actions .row {
    display: flex; gap: 10px; justify-content: center;
}
#mobile-input .actions .btn {
    width: 78px; height: 60px;
    font-size: 14px;
    display: flex; align-items: center; justify-content: center;
}
#mobile-input .actions .esc   { background: rgba(160, 80, 80, 0.6); }
#mobile-input .actions .space { background: rgba(80, 140, 80, 0.6); }
#mobile-input .actions .enter { background: rgba(80, 110, 160, 0.6); }

/* === 우상단 controls (키보드 / 전체화면 / 사운드 / 세이브) — PC + mobile 둘 다 표시.
 * #mobile-input 밖에 두어 데스크톱 (#mobile-input { display:none }) 에서도 보이게. */
.top-right {
    position: fixed;
    right: 14px; top: 14px;
    z-index: 199;
    display: flex; gap: 10px;
    pointer-events: auto;
}
.top-right .btn {
    height: 36px;
    padding: 0 12px;
    font-size: 13px;
    background: rgba(40, 40, 60, 0.7);
    color: #f0f0f0;
    border: 2px solid rgba(200, 200, 220, 0.55);
    border-radius: 8px;
    font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
    font-weight: 600;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    display: flex; align-items: center; justify-content: center;
    transition: background 0.1s;
}
.top-right .btn:hover {
    background: rgba(80, 80, 120, 0.85);
}
.top-right .btn.active {
    background: rgba(120, 160, 220, 0.75);
    border-color: rgba(255, 213, 102, 0.9);
}
.top-right .btn.muted {
    color: #ff9090;
    border-color: rgba(180, 90, 90, 0.6);
}
#btn-save {
    color: #ffd566;
}

/* === IME input — "visible-to-OS hidden-to-user" pattern ===
 * 사용자 시각엔 안 보이지만 OS IME 가 visible element 로 인식하는 충분한 크기/
 * opacity. 1px / opacity 0 같은 too-invisible 한 input 은 일부 OS (Windows
 * Microsoft IME, Android GBoard) 가 invisible 로 판단 → IME context 미활성 →
 * 한국어 입력 / composition 불가.
 *
 * 핵심:
 *   - 200×30 size + opacity 1 → OS 가 정상 visible element 로 인식
 *   - background / color / caret-color: transparent → 사용자에겐 안 보임
 *   - pointer-events: none → click 통과 (canvas / UI 영향 X)
 *
 * PC: 항상 focus 유지 (mobile_input.js). 사용자가 한/영 키 눌러 OS IME 한국어
 *     모드 전환 → 자연스러운 입력.
 * 모바일: btn-ime 클릭으로 focus 토글 (가상 키보드 등장/닫힘).
 */
#mobile-ime {
    position: fixed;
    top: 0; left: 0;
    width: 200px; height: 30px;
    opacity: 1;
    border: 0;
    padding: 0;
    background: transparent;
    color: transparent;
    caret-color: transparent;
    outline: none;
    pointer-events: none;
    z-index: 99999;
    /* font-size 16px 명시 — iOS Safari 는 input font-size < 16px 면 focus 시
     * 자동 zoom in 으로 글자 키움. 사용자 시각엔 transparent 라 영향 없지만
     * brouwser 가 zoom 발동시켜 viewport 가 튀는 버그 회피. */
    font-size: 16px;
}
#btn-ime.active {
    background: rgba(120, 160, 220, 0.75);
    border-color: rgba(255, 213, 102, 0.9);
}

/* === Chromium 권장 banner — 비-Chrome 브라우저에서 컨트롤러 밑에 표시 ===
 * JS 가 isChrome 검출 후 .show class 토글. 캔버스 아래 + top-right (bottom 196) 위. */
#browser-recommend {
    display: none;
    position: fixed;
    bottom: 244px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(40, 40, 60, 0.85);
    color: #ffd566;
    border: 2px solid rgba(255, 213, 102, 0.9);
    border-radius: 8px;
    padding: 6px 8px 6px 14px;
    font-size: 12px;
    text-align: center;
    z-index: 198;
    font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
    max-width: 90vw;
    white-space: nowrap;
    align-items: center;
    gap: 8px;
}
#browser-recommend.show { display: inline-flex; }
#browser-recommend strong { color: #fff; }
#browser-recommend .br-text { pointer-events: none; }
#browser-recommend .br-close {
    background: transparent;
    border: 0;
    color: rgba(255, 213, 102, 0.85);
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    padding: 2px 6px;
    border-radius: 4px;
    font-family: inherit;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.1s, color 0.1s;
}
#browser-recommend .br-close:hover,
#browser-recommend .br-close:active {
    background: rgba(255, 213, 102, 0.2);
    color: #fff;
}

/* === 게임 캔버스 영역 — 모바일에서 키패드 + aux row 위로 안 가려지게 === */
@media (pointer: coarse), (max-width: 1024px) {
    /* .game-wrap 의 mobile 정의는 index.html 의 inline <style> 로 이전 — load 순서상
     * mobile_input.css 가 inline 보다 먼저라 여기서 정의해도 inline 이 win. */
    #canvas {
        /* 하단 #cg-controller(3행 풀폭, 높이 ~160 + bottom 14) ≈ 190px 확보. */
        max-width: 100vw;
        max-height: calc(100vh - 200px);
        max-height: calc(100dvh - 200px);
        width: auto;
        height: auto;
        display: block;
    }
    .top-right .btn {
        height: 40px;
        padding: 0 8px;
        font-size: 12px;
        flex: 1;
    }
    /* 모바일: textbox 는 화면 상단 (top: 14px). 이전 bottom: 250 은 가상 키보드
     * (Android 280-320px, iOS 250-300px) 영역과 겹쳐 사용자가 textbox 를 못 봄.
     * 화면 상단이면 키보드와 절대 안 겹침. 캐릭터 이름 입력 phase 에서 잠시 게임
     * 캔버스 상단 일부 가리지만 입력 종료 후 hide. */
    #mobile-ime.visible {
        top: 14px;
        bottom: auto;
    }
}

/* 데스크톱: 키패드 hide */
@media (pointer: fine) and (min-width: 1025px) {
    #mobile-input { display: none; }
}