/* v107 consolidated final mobile layer. All selectors scoped to the chosen UI mode. */
#mobileMenuBtn{display:none}
#mobileQuickMenu{display:none;position:absolute;right:max(8px,env(safe-area-inset-right));top:50px;z-index:15;width:min(230px,72vw);max-height:calc(100% - 110px);overflow:auto;padding:10px;background:#0d2234f5;border:2px solid #e6c47f;border-radius:13px;box-shadow:0 9px 30px #000b;touch-action:pan-y}
#mobileQuickMenu.open{display:block}
#mobileQuickMenu strong{display:block;color:#ffe4aa;font-size:14px;margin:0 0 7px}
#mobileQuickMenu button{display:block;width:100%;margin:4px 0;padding:8px 10px;background:#214159;color:white;border:1px solid #a9c1ce;border-radius:9px;font-weight:750;text-align:left;font-size:13px;touch-action:manipulation}
#mobileQuickMenu button:active{background:#397a87}
#wrap.mode-mobile #hud{top:max(4px,env(safe-area-inset-top))!important;left:max(5px,env(safe-area-inset-left))!important;right:max(5px,env(safe-area-inset-right))!important;display:grid!important;grid-template-columns:minmax(118px,170px) minmax(0,1fr) 67px!important;grid-template-rows:auto!important;align-items:start!important;gap:5px!important;z-index:4!important;pointer-events:none!important}
#wrap.mode-mobile #hud>*{pointer-events:auto!important}
#wrap.mode-mobile #hud .heroStatus{grid-column:1!important;grid-row:1!important;max-width:170px!important;padding:5px 7px!important;font-size:11px!important;line-height:1.15!important;max-height:79px!important;overflow:hidden!important}
#wrap.mode-mobile #hud .heroStatus .small{font-size:10px!important}
#wrap.mode-mobile #hud .heroStatus .meter{height:5px!important;margin:2px 0!important;width:min(120px,100%)!important}
#wrap.mode-mobile #hud .stageBanner{grid-column:2!important;grid-row:1!important;display:flex!important;align-items:flex-start!important;flex-direction:column!important;gap:2px!important;flex-wrap:nowrap!important;min-width:0!important;max-height:79px!important;overflow:hidden!important;padding:5px 7px!important;font-size:11px!important}
#wrap.mode-mobile #hud .stageBanner #stageLabel{font-size:11px!important;max-width:100%!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
#wrap.mode-mobile #hud .stageBanner #stagePercent{font-size:11px!important}
#wrap.mode-mobile #hud .stageSummary{display:flex!important;gap:2px 7px!important;align-items:center!important;flex-wrap:wrap!important;font-size:9px!important;line-height:1.1!important}
#wrap.mode-mobile #hud .hudright{grid-column:3!important;grid-row:1!important;display:flex!important;max-width:none!important;justify-content:flex-end!important;align-items:start!important;min-width:0!important}
#wrap.mode-mobile #hud .hudright>.hudbtn:not(#mobileMenuBtn){display:none!important}
#wrap.mode-mobile #hud #mobileMenuBtn{display:block!important;min-height:37px!important;min-width:63px!important;max-width:67px!important;padding:5px 3px!important;font-size:12px!important;line-height:1.15!important;white-space:normal!important}
#wrap.mode-desktop #mobileMenuBtn,#wrap.mode-desktop #mobileQuickMenu{display:none!important}
#wrap.mode-mobile #touchControls{position:absolute!important;inset:auto 0 0 0!important;width:100%!important;min-height:0!important;height:auto!important;display:flex!important;align-items:flex-end!important;justify-content:space-between!important;gap:4px!important;flex-wrap:nowrap!important;padding:3px max(6px,env(safe-area-inset-right)) max(5px,env(safe-area-inset-bottom)) max(6px,env(safe-area-inset-left))!important;background:linear-gradient(0deg,#0b1820db,#0b1820a8 75%,transparent)!important;z-index:4!important;pointer-events:none!important}
#wrap.mode-mobile #directionPad{display:flex!important;flex:0 0 auto!important;gap:3px!important;align-items:end!important;pointer-events:auto!important}
#wrap.mode-mobile.touch-joystick #directionPad{display:none!important}
#wrap.mode-mobile.touch-buttons #joystick{display:none!important}
#wrap.mode-mobile #directionPad button{width:clamp(38px,7.5vh,56px)!important;min-width:38px!important;max-width:56px!important;height:clamp(43px,10vh,56px)!important;min-height:43px!important;max-height:56px!important;padding:0!important;font-size:23px!important;pointer-events:auto!important}
#wrap.mode-mobile #touchActions{display:grid!important;grid-template-columns:repeat(6,minmax(0,1fr))!important;gap:3px!important;flex:0 1 auto!important;width:min(62vw,390px)!important;min-width:0!important;max-width:390px!important;pointer-events:auto!important}
#wrap.mode-mobile #touchActions button,#wrap.mode-mobile #touchActions #interactBtn{box-sizing:border-box!important;display:block!important;grid-column:auto!important;width:100%!important;min-width:0!important;max-width:none!important;height:clamp(43px,10vh,56px)!important;min-height:43px!important;max-height:56px!important;overflow:hidden!important;padding:2px!important;border-radius:10px!important;pointer-events:auto!important;touch-action:none!important}
#wrap.mode-mobile #touchActions button[data-key]::after{font-size:clamp(8px,2vh,11px)!important;white-space:nowrap!important;line-height:1.15!important}
#wrap.mode-mobile #touchActions #interactBtn{font-size:0!important;color:transparent!important;background-size:25px 25px!important;background-position:center 3px!important;padding:0!important;position:relative!important}
#wrap.mode-mobile #touchActions #interactBtn::after{content:'대화'!important;position:absolute!important;bottom:0!important;left:0!important;right:0!important;display:block!important;background:#102436d9!important;color:white!important;font-size:10px!important;line-height:1.15!important;text-align:center!important;text-shadow:0 1px 2px #000!important;padding:2px 0!important}
#wrap.mode-mobile .guide,#wrap.mode-mobile .controls{display:none!important}
#wrap.mode-mobile .toast{top:26%!important;max-width:78%!important;font-size:clamp(11px,2.8vh,15px)!important}
@media(max-height:420px){#wrap.mode-mobile #hud{grid-template-columns:minmax(112px,145px) minmax(0,1fr) 63px!important}#wrap.mode-mobile #hud .heroStatus{font-size:10px!important;max-height:70px!important}#wrap.mode-mobile #hud .stageBanner{max-height:70px!important}#wrap.mode-mobile #touchActions{width:min(65vw,365px)!important}#wrap.mode-mobile #touchActions button,#wrap.mode-mobile #touchActions #interactBtn,#wrap.mode-mobile #directionPad button{height:44px!important;min-height:44px!important;max-height:44px!important}}

/* v123: dedicated mobile input dock. The playable image ends above the controls,
   so jump/attack/guard/touch arrows do not cover characters, scenery or NPCs. */
#wrap.mode-mobile{--v123-dock-height:61px!important;background:#091724!important}
#wrap.mode-mobile #game{position:absolute!important;top:0!important;left:0!important;width:100%!important;height:calc(100% - var(--v123-dock-height))!important;object-fit:contain!important;object-position:center top!important;background:#15252f!important}
#wrap.mode-mobile #touchControls{height:var(--v123-dock-height)!important;min-height:var(--v123-dock-height)!important;max-height:var(--v123-dock-height)!important;bottom:0!important;background:#081725!important;box-shadow:0 -2px 0 #bd965a!important;padding:3px max(6px,env(safe-area-inset-right)) max(4px,env(safe-area-inset-bottom)) max(6px,env(safe-area-inset-left))!important;align-items:center!important}
#wrap.mode-mobile #touchActions #interactBtn::after{content:'보물'!important}
#wrap.mode-mobile #touchActions button,#wrap.mode-mobile #touchActions #interactBtn,#wrap.mode-mobile #directionPad button{max-height:48px!important;height:48px!important;min-height:44px!important}
#wrap.mode-mobile #joystick{max-height:48px!important;height:48px!important}
@media(max-height:450px){#wrap.mode-mobile{--v123-dock-height:53px!important}#wrap.mode-mobile #touchControls{padding-top:2px!important;padding-bottom:max(2px,env(safe-area-inset-bottom))!important}#wrap.mode-mobile #touchActions button,#wrap.mode-mobile #touchActions #interactBtn,#wrap.mode-mobile #directionPad button{height:43px!important;min-height:41px!important;max-height:43px!important}#wrap.mode-mobile #joystick{height:43px!important;max-height:43px!important}}