/* 모바일 가상 키패드 + 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 — OS 가상 키보드 trigger 용 invisible focus target ===
 * 사용자 시각엔 안 보임 (1px size, opacity 0, transparent color/caret). 단 viewport
 * 안에 valid focusable element 로 존재 — "키보드" 버튼 click 시 focus() 호출 → iOS/
 * Android 가상 키보드 등장. 입력은 input event 로 받아 forwardChar 으로 게임 직접 forward.
 * .visible class 토글 X — 별도 textbox panel 없음.
 */
#mobile-ime {
    position: fixed;
    top: 0; left: 0;
    width: 1px; height: 1px;
    opacity: 0;
    border: 0;
    padding: 0;
    background: transparent;
    color: transparent;
    caret-color: transparent;
    outline: none;
    z-index: 1;
    /* pointer-events: auto 가 default — 사용자가 직접 click 가능. 단 1px 라 실제 click
     * 어려움. "키보드" 버튼 가 focus 호출이 일반 path. */
}
#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 {
        /* 키패드 영역 (bottom 14 + 168 height + aux row ~50) ≈ 240px + 상단 padding 44 */
        max-width: 100vw;
        max-height: calc(100vh - 284px);
        max-height: calc(100dvh - 284px);
        width: auto;
        height: auto;
        display: block;
    }
    /* 모바일: 우상단 controls 를 캔버스 아래, 키패드 위 row 로 이동 (4 버튼 한 줄). */
    .top-right {
        top: auto;
        right: 8px;
        left: 8px;
        bottom: 196px;  /* 키패드 (bottom 14 + 168 = 182 끝) 위에 14 gap */
        justify-content: space-between;
        gap: 6px;
    }
    .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; }
}