/* ============================================================================
   폰 화면 (2026-11-13) — html.is-phone 일 때만 (js/core/phone_ui.js). PC 화면은 그대로
   ============================================================================ */
/* ☰ 메뉴 단추: 오른쪽 위 */
#phone-menu-btn { display: none; }
html.is-phone #phone-menu-btn { display: none; position: fixed; top: 8px; right: 8px; z-index: 62; width: 44px; height: 44px; border-radius: 12px; border: 1px solid #64748b; background: rgba(15, 23, 42, 0.85); color: #fff; font-size: 22px; cursor: pointer; }
html.is-phone body:not(:has(#scene-login.active)) #phone-menu-btn { display: block; }
html.is-phone.menu-open #phone-menu-btn { background: #4f46e5; border-color: #a5b4fc; }

/* 오른쪽 메뉴 단추들은 ☰ 를 눌렀을 때만, 두 줄로 */
html.is-phone #zoom-ctrl { display: none !important; }
html.is-phone.menu-open body:not(:has(#scene-login.active)) #zoom-ctrl { display: grid !important; grid-template-columns: 1fr 1fr; gap: 6px; position: fixed; top: 58px; right: 8px; transform: none; max-height: calc(100vh - 70px); overflow-y: auto; padding: 10px; z-index: 61; }
html.is-phone #zoom-ctrl .zoom-sep { grid-column: 1 / -1; width: 100%; }
html.is-phone #zoom-ctrl button.small { width: 100px; height: 38px; font-size: 13px; }
html.is-phone #zoom-ctrl button.manual { grid-column: 1 / -1; width: 100%; }
#phone-wardrobe-btn, #phone-fs-btn { display: none; }
html.is-phone #phone-wardrobe-btn, html.is-phone #phone-fs-btn { display: block; }
html.is-phone #wardrobe-btn { display: none !important; } /* 옷장은 메뉴 안으로 */

/* 위쪽: 왼쪽 체력 · 가운데 목표 · 오른쪽 보석·무기 (☰ 자리를 비움) */
html.is-phone #hud { padding: 8px 60px 8px 10px; gap: 8px; }
html.is-phone .bars { width: 26vw; min-width: 150px; max-width: 230px; }
html.is-phone .bar-wrap { margin-bottom: 4px; }
html.is-phone .bars > div:last-child:not(.bar-wrap) { display: none; } /* 키보드 조작 안내 (폰에선 필요 없음) */
html.is-phone .timer-box { padding: 4px 12px; max-width: 44vw; }
html.is-phone .timer-title { font-size: 11px; }
html.is-phone #timer-val { font-size: 15px; }
html.is-phone #compass { width: min(260px, 38vw); height: 24px; }
html.is-phone #compass-goal { font-size: 10px; }
html.is-phone .right-hud { gap: 5px; }
html.is-phone .gem-box { padding: 5px 10px; font-size: 13px; }
html.is-phone #weapon-badge { padding: 4px 8px; font-size: 11px; }

/* 작은 지도는 조금 작게 */
html.is-phone #minimap-wrap { top: 118px; left: 10px; }
html.is-phone #minimap { width: 200px; height: 112px; }
html.is-phone #zoom-ctrl button.small { white-space: nowrap; overflow: hidden; }