/* Phone screen of the real client (client-debug/js/mobilehud.js sets html.mhud when the screen is 700 px wide or less):
   a simple game screen like Noji World - the character in a round frame with HP / SP, the minimap, a joystick, the
   attack button with four shortcuts around it, the AUTO pill, a menu sheet and the chat on demand. The computer screen
   keeps the RO windows (theme-ro.css); nothing here applies without html.mhud. */

#mhud { display: none; }
html.mhud #mhud { display: block; position: absolute; inset: 0; z-index: 6; pointer-events: none; font-family: var(--game-font);
	-webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
html.mhud #mhud > * { pointer-events: auto; }
html.mhud #mhud .hidden { display: none !important; }
/* the buttons of the phone screen are not the RO picture buttons (theme-ro.css): round, their own colours */
html.mhud #mhud button { border-radius: 50% !important; line-height: 1; font-family: inherit; text-shadow: none; }
html.mhud #mhud .mh-pill { border-radius: 22px !important; }
html.mhud #mhud .mh-lvup { border-radius: 6px !important; }
html.mhud.ro-skin #mhud .mh-lvup { border-radius: 0 !important; }
html.mhud #mhud .mh-grid button { border-radius: 16px !important; }
html.mhud #mhud .mh-close { border-radius: 14px !important; }

/* what the phone screen replaces */
html.mhud #hud-char, html.mhud #menubar, html.mhud #hotbar, html.mhud #ai-chip, html.mhud #ro-lvup, html.mhud #ro-mail, html.mhud #chat-rotabs,
html.mhud #hud-map .zoom { display: none !important; }
/* ?stats=1 on a phone: the frame stats at the top, under the character's frame */
html.mhud #render-stats:not(.hidden) { display: block !important; position: absolute; left: 8px; right: auto; top: calc(env(safe-area-inset-top) + 112px); bottom: auto; z-index: 7; max-width: calc(100% - 16px);
	font-size: 10px; white-space: pre-wrap; pointer-events: none; }
html.mhud #chat { display: none !important; }

/* ---- the size of the buttons (options "ขนาดปุ่มมือถือ", mobilehud.js setHudSize): --mk scales every group from its own
   corner, --mks the joystick (kept a little bigger: a thumb), --mkm the minimap ---- */
html.mhud { --mk: 0.82; --mks: 0.9; --mkm: calc(0.88 * var(--uik, 1)); }
html.mhud.mhs-m { --mk: 1; --mks: 1; --mkm: calc(1 * var(--uik, 1)); }
html.mhud.mhs-l { --mk: 1.15; --mks: 1.1; --mkm: calc(1.08 * var(--uik, 1)); }
/* --uik: the size of the phone UI (options "ขนาด UI มือถือ", mobilehud.js setUiSize; 50 % by default): the panel, the minimap
   (--mkm) and its buttons, the windows, the status icons, chat lines and notices; not the thumb buttons (--mk / --mks) */
html.mhud .mh-me { transform: scale(calc(var(--mk) * var(--uik, 1))); transform-origin: 0 0; }
html.mhud .mh-side { transform: scale(calc(var(--mk) * max(var(--uik, 1), 0.75))); transform-origin: 100% 0; } /* (tapped often: never under 75 %) */
html.mhud .mh-stick { transform: scale(var(--mks)); transform-origin: 0 100%; }
html.mhud .mh-act { transform: scale(var(--mk)); transform-origin: 100% 100%; }

/* ---- the character: round frame, level, name, gauges ---- */
html.mhud .mh-me { position: absolute; left: max(8px, env(safe-area-inset-left)); top: max(8px, env(safe-area-inset-top)); display: flex; align-items: center; gap: 8px;
	padding: 4px 12px 4px 4px; border-radius: 40px 18px 18px 40px; background: linear-gradient(135deg, rgba(20, 28, 58, 0.78), rgba(32, 44, 86, 0.62));
	border: 1px solid rgba(255, 255, 255, 0.16); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3); cursor: pointer; }
html.mhud .mh-ava { position: relative; width: 60px; height: 60px; flex: none; border-radius: 50%; border: 3px solid #ffd36b;
	background: radial-gradient(circle at 50% 35%, #fff6dc, #9fc1f2 70%, #5b7fca); box-shadow: 0 0 0 2px rgba(80, 52, 0, 0.45), inset 0 -6px 10px rgba(20, 40, 90, 0.35); }
html.mhud .mh-ava canvas { position: absolute; left: 50%; top: -14px; width: 72px; height: 104px; transform: translateX(-50%); image-rendering: pixelated;
	clip-path: circle(27px at 50% 41px); }
html.mhud .mh-lv { position: absolute; left: 50%; bottom: -9px; transform: translateX(-50%); min-width: 26px; padding: 0 6px; border-radius: 10px;
	font: 700 12px/17px var(--game-font); color: #4a2b00; text-align: center; background: linear-gradient(#fff1a8, #ffc23d); border: 1px solid #b07a0a; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.35); }
/* status points: the client's "up" button (lv_up) at the end of the panel; a tap = the Status window */
html.mhud .mh-lvup { flex: none; align-self: center; width: 40px; height: 40px; min-height: 40px; margin: 0 -6px 0 0; padding: 0; border: 0; border-radius: 6px;
	background: linear-gradient(#3f6ad6, #1c3a99); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4); cursor: pointer; }
html.mhud .mh-lvup::after { content: 'up'; color: #fff; font: 700 14px/40px var(--game-font); }
html.mhud.ro-skin .mh-lvup { border-radius: 0; background: var(--ro-lv-up-off) center / 100% 100% no-repeat; box-shadow: none; }
html.mhud.ro-skin .mh-lvup::after { content: none; }
html.mhud .mh-lvup.hidden { display: none; }
html.mhud .mh-info { width: 148px; }
html.mhud .mh-name { color: #fff; font-size: 14px; line-height: 17px; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html.mhud .mh-name small { font-size: 11px; color: #c9d6ff; font-weight: 500; }
html.mhud .mh-bar { position: relative; height: 13px; margin-top: 3px; border-radius: 8px; background: rgba(0, 0, 0, 0.45); border: 1px solid rgba(255, 255, 255, 0.25); overflow: hidden; }
html.mhud .mh-bar i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 8px; transition: width 0.25s; }
html.mhud .mh-bar.hp i { background: linear-gradient(#8ef08a, #2fb34a); }
html.mhud .mh-bar.hp.low i { background: linear-gradient(#ff9a8a, #e0413a); }
html.mhud .mh-bar.sp i { background: linear-gradient(#9cc8ff, #3a7be0); }
html.mhud .mh-zeny { display: flex; align-items: center; gap: 4px; margin-top: 3px; height: 14px; font: 600 11px/14px var(--game-font); color: #ffe08a; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8); }
html.mhud .mh-zeny i { display: grid; place-items: center; width: 13px; height: 13px; border-radius: 50%; font: 700 8.5px/1 var(--game-font); font-style: normal; color: #6b4300;
	background: radial-gradient(circle at 35% 30%, #fff3b0, #f0b420 70%); border: 1px solid #a8740a; text-shadow: none; }
html.mhud .mh-bar span { position: relative; display: block; font: 600 9.5px/13px var(--game-font); color: #fff; text-align: center; text-shadow: 0 1px 1px #000; }

/* ---- the minimap (the shared #hud-map, small) and the menu / chat buttons under it ---- */
html.mhud #hud-map { left: auto !important; right: max(8px, env(safe-area-inset-right)) !important; top: max(8px, env(safe-area-inset-top)) !important; width: calc(104px * var(--mkm)) !important; height: auto !important;
	padding: 4px !important; margin: 0 !important; border-radius: 16px !important; border: 1px solid rgba(255, 255, 255, 0.18) !important;
	background: linear-gradient(135deg, rgba(20, 28, 58, 0.78), rgba(32, 44, 86, 0.62)) !important; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3) !important; }
html.mhud #hud-map .ro-title, html.mhud #hud-map #hud-xy { display: none !important; }
html.mhud #hud-map .hud-mapname { display: block !important; position: static !important; height: auto !important; margin: 0 0 3px !important; padding: 0 !important; background: none !important;
	font: 600 11px/14px var(--game-font) !important; color: #fff !important; text-align: center; text-shadow: 0 1px 2px #000; }
html.mhud #minimap { display: block !important; width: calc(94px * var(--mkm)) !important; height: calc(94px * var(--mkm)) !important; border-radius: 12px; }
html.mhud .mh-side { position: absolute; right: max(8px, env(safe-area-inset-right)); top: calc(max(8px, env(safe-area-inset-top)) + 26px + 110px * var(--mkm)); display: flex; flex-direction: column; gap: 8px; }
html.mhud .mh-btn { position: relative; width: 46px; height: 46px; min-height: 46px; padding: 0; border-radius: 50%; font-size: 21px; line-height: 1; color: #fff;
	border: 2px solid rgba(255, 255, 255, 0.7) !important; background: linear-gradient(#5b7fd6, #3253a8) !important; box-shadow: 0 3px 8px rgba(0, 0, 0, 0.35); }
/* the Cash Shop / Collection pictures under the round buttons (landscape: in their row) */
html.mhud .mh-pic { width: 46px; height: 46px; min-height: 46px; padding: 0; border: 0 !important; background: none !important; border-radius: 10px !important; box-shadow: none;
	filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.45)); }
html.mhud .mh-pic img { width: 46px; height: 46px; display: block; }
html.mhud .mh-pic:active { transform: translateY(1px); }
html.mhud .win-cash .cash-grid { grid-template-columns: repeat(2, 1fr); max-height: 34vh; }
html.mhud .win-cash .cash-item { min-height: 52px; }
html.mhud .win-cash .cash-row button { min-height: 34px; width: 34px; }
html.mhud .mh-dot { position: absolute; right: -2px; top: -2px; width: 13px; height: 13px; border-radius: 50%; background: #ff4d5e; border: 2px solid #fff; }

/* ---- the last chat lines for a moment ---- */
html.mhud .mh-peek { position: absolute; left: 10px; bottom: calc(42px + 172px * var(--mks)); max-width: 64%; display: flex; flex-direction: column; gap: 2px; opacity: 0; transition: opacity 0.4s; pointer-events: none !important; }
html.mhud .mh-peek.show { opacity: 1; }
html.mhud .mh-peek div { align-self: flex-start; max-width: 100%; padding: 2px 8px; border-radius: 10px; background: rgba(10, 14, 30, 0.55); color: #fff;
	font: 500 12px/17px var(--game-font); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html.mhud .mh-peek .ch-whisper { color: #ffd36b; } html.mhud .mh-peek .ch-party { color: #9cf0ff; } html.mhud .mh-peek .ch-guild { color: #b4ff9c; }
html.mhud .mh-peek .ch-error { color: #ffa0a0; } html.mhud .mh-peek .ch-system, html.mhud .mh-peek .ch-broadcast { color: #fff59a; }

/* ---- joystick ---- */
html.mhud .mh-stick { position: absolute; left: max(18px, env(safe-area-inset-left)); bottom: 42px; width: 132px; height: 132px; border-radius: 50%; touch-action: none;
	background: radial-gradient(circle, rgba(255, 255, 255, 0.10) 0 55%, rgba(255, 255, 255, 0.22) 56% 58%, rgba(255, 255, 255, 0.08) 59%);
	border: 2px solid rgba(255, 255, 255, 0.35); box-shadow: inset 0 0 18px rgba(0, 0, 0, 0.25); }
html.mhud .mh-stick.on { background: radial-gradient(circle, rgba(255, 255, 255, 0.16) 0 55%, rgba(255, 255, 255, 0.3) 56% 58%, rgba(255, 255, 255, 0.12) 59%); }
html.mhud .mh-knob { position: absolute; left: 50%; top: 50%; width: 58px; height: 58px; margin: -29px 0 0 -29px; border-radius: 50%; pointer-events: none;
	background: radial-gradient(circle at 40% 35%, #ffffff, #c9d8ff 55%, #7f9be0); border: 2px solid rgba(255, 255, 255, 0.9); box-shadow: 0 4px 10px rgba(0, 0, 0, 0.35); }

/* ---- attack button, four shortcuts around it, AUTO ---- */
html.mhud .mh-act { position: absolute; right: max(8px, env(safe-area-inset-right)); bottom: 28px; width: 200px; height: 200px; pointer-events: none !important; }
html.mhud .mh-act > * { pointer-events: auto; }
html.mhud .mh-atk { position: absolute; right: 4px; bottom: 4px; width: 88px; height: 88px; min-height: 88px; padding: 0; border-radius: 50%; font-size: 38px; line-height: 1; color: #fff;
	border: 3px solid #ffe1e1 !important; background: radial-gradient(circle at 38% 30%, #ff9a8f, #e2342f 60%, #a3161a) !important;
	box-shadow: 0 5px 0 #7d1013, 0 8px 18px rgba(160, 20, 20, 0.45); text-shadow: 0 2px 2px rgba(0, 0, 0, 0.4); }
html.mhud .mh-atk:active { transform: translateY(3px); box-shadow: 0 2px 0 #7d1013, 0 4px 10px rgba(160, 20, 20, 0.45); }
html.mhud .mh-hk { position: absolute; width: 52px; height: 52px; min-height: 52px; padding: 0; border-radius: 50%; display: grid; place-items: center;
	border: 2px solid rgba(255, 255, 255, 0.8) !important; background: radial-gradient(circle at 40% 30%, rgba(90, 110, 170, 0.85), rgba(25, 35, 75, 0.85)) !important;
	box-shadow: 0 3px 8px rgba(0, 0, 0, 0.35); color: #fff; }
/* on an arc around the attack button (its centre 48 px from the right and the bottom) */
html.mhud .mh-hk.k0 { right: 120px; bottom: 14px; }
html.mhud .mh-hk.k1 { right: 106px; bottom: 72px; }
html.mhud .mh-hk.k2 { right: 66px; bottom: 112px; }
html.mhud .mh-hk.k3 { right: 10px; bottom: 124px; }
/* the pickup button (mobilehud.js pickNearest): between the shortcuts and AUTO; a dot = something on the floor near */
html.mhud .mh-pick { position: absolute; right: 128px; bottom: 130px; width: 46px; height: 46px; min-height: 46px; padding: 0; border-radius: 50%; font-size: 22px; line-height: 1; color: #fff;
	border: 2px solid rgba(255, 255, 255, 0.75) !important; background: linear-gradient(#4fc3a1, #1f8a6a) !important; box-shadow: 0 3px 0 #0f5c45, 0 4px 10px rgba(0, 0, 0, 0.3); }
html.mhud .mh-pick:active { transform: translateY(2px); }
html.mhud .mh-pick.on { box-shadow: 0 0 0 3px rgba(120, 255, 200, 0.7), 0 3px 0 #0f5c45; }
html.mhud .mh-pick .mh-dot { right: -3px; top: -3px; background: #ffd36b; }
html.mhud .mh-hk .ic, html.mhud .mh-hk .sic { width: 30px !important; height: 30px !important; }
html.mhud .mh-hk .ic img, html.mhud .mh-hk .sic img { width: 30px !important; height: 30px !important; image-rendering: pixelated; }
html.mhud .mh-hk em { position: absolute; right: -4px; bottom: -4px; min-width: 18px; padding: 0 4px; border-radius: 9px; font: 700 10px/16px var(--game-font); font-style: normal;
	color: #fff; background: #263a78; border: 1px solid #fff; }
html.mhud .mh-hk small { font: 600 11px var(--game-font); color: rgba(255, 255, 255, 0.7); }
html.mhud .mh-hk.assign { border-color: #ffd36b !important; box-shadow: 0 0 0 3px rgba(255, 211, 107, 0.6); }
html.mhud .mh-auto { position: absolute; right: 0; bottom: 186px; display: flex; align-items: center; gap: 6px; }
html.mhud .mh-gear { width: 38px; height: 38px; min-height: 38px; padding: 0; border-radius: 50%; font-size: 19px; color: #fff;
	border: 2px solid rgba(255, 255, 255, 0.7) !important; background: linear-gradient(#6d7fa8, #3d4c74) !important; }
html.mhud .mh-pill { height: 40px; min-height: 40px; padding: 0 18px; border-radius: 22px; font: 700 15px var(--game-font); color: #fff; letter-spacing: 0.5px;
	border: 2px solid #fff !important; background: linear-gradient(#ffb547, #f07b12) !important; box-shadow: 0 4px 0 #a54d00, 0 6px 14px rgba(240, 123, 18, 0.4); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35); }
html.mhud .mh-pill.on { background: linear-gradient(#6fe08a, #23a64a) !important; box-shadow: 0 4px 0 #11692b, 0 0 18px rgba(80, 230, 120, 0.7); animation: mh-glow 1.6s ease-in-out infinite; }
@keyframes mh-glow { 50% { box-shadow: 0 4px 0 #11692b, 0 0 6px rgba(80, 230, 120, 0.3); } }

/* ---- Base EXP across the bottom ---- */
html.mhud .mh-exp { position: absolute; left: 0; right: 0; bottom: 0; height: 15px; background: rgba(8, 12, 28, 0.82); border-top: 1px solid rgba(255, 255, 255, 0.2); pointer-events: none !important; }
html.mhud .mh-exp { display: flex; gap: 2px; }
html.mhud .mh-x { position: relative; flex: 1; min-width: 0; overflow: hidden; }
html.mhud .mh-x i { position: absolute; left: 0; top: 0; bottom: 0; transition: width 0.4s; }
html.mhud .mh-x.base i { background: linear-gradient(#ffe68a, #f0b520); }
html.mhud .mh-x.job i { background: linear-gradient(#9cdcff, #2f8fe0); }
html.mhud .mh-x span { position: relative; display: block; font: 600 10px/15px var(--game-font); color: #fff; text-align: center; text-shadow: 0 1px 1px #000, 0 0 2px #000;
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---- menu sheet ---- */
html.mhud .mh-sheet { position: absolute; inset: 0; z-index: 30; background: rgba(5, 8, 20, 0.5); display: flex; align-items: flex-end; }
html.mhud .mh-sheet-in { width: 100%; padding: 14px 12px max(14px, env(safe-area-inset-bottom)); border-radius: 22px 22px 0 0; background: linear-gradient(#ffffff, #eef2fb); box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.3); }
html.mhud .mh-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
html.mhud .mh-grid button { display: flex; flex-direction: column; align-items: center; gap: 4px; height: 74px; min-height: 74px; padding: 6px 2px; border-radius: 16px;
	font: 600 12.5px var(--game-font); color: #26325a; border: 1px solid #d5dcef !important; background: linear-gradient(#ffffff, #e9eefa) !important; box-shadow: 0 2px 4px rgba(30, 50, 110, 0.12); }
html.mhud .mh-grid button span { font-size: 26px; line-height: 32px; }
html.mhud .mh-close { width: 100%; height: 40px; min-height: 40px; margin-top: 12px; border-radius: 14px; font: 600 14px var(--game-font); color: #fff;
	border: 0 !important; background: linear-gradient(#5b7fd6, #3253a8) !important; }

/* ---- the chat on demand: over the screen above the controls ---- */
html.mhud.mh-chat-open #chat { display: block !important; position: absolute !important; left: 8px !important; right: 8px !important; top: auto !important;
	bottom: max(282px, calc(var(--mh-kb, 0px) + 8px)) !important;
	width: auto !important; z-index: 20; border-radius: 16px !important; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.2) !important;
	background: rgba(10, 14, 30, 0.88) !important; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4); }
html.mhud.mh-chat-open #chat .chat-tabs { display: flex !important; padding-right: 44px !important; }
/* the close button of the chat (the chat button can be under the chat while the keyboard is up) */
#chat .mh-chat-x { display: none; }
html.mhud.mh-chat-open #chat .mh-chat-x { display: block; position: absolute; right: 6px; top: 4px; width: 34px; height: 34px; min-height: 34px; padding: 0; border-radius: 50% !important;
	font: 700 16px/1 var(--game-font); color: #fff; border: 1px solid rgba(255, 255, 255, 0.5) !important; background: rgba(255, 255, 255, 0.14) !important; z-index: 2; }
html.mhud.mh-chat-open #chat .chat-log { height: min(30vh, calc(100vh - 520px)) !important; min-height: 90px; background: none !important; }
html.mhud.mh-chat-open #chat .chat-form { display: flex !important; position: static !important; width: auto !important; height: auto !important; padding: 6px !important; gap: 6px !important;
	background: rgba(255, 255, 255, 0.08) !important; border: 0 !important; }
html.mhud.mh-chat-open #chat .chat-form input { position: static !important; height: 38px !important; min-height: 38px !important; font-size: 16px !important; border-radius: 10px !important;
	background: #fff !important; color: #000 !important; border: 0 !important; }
html.mhud.mh-chat-open #chat .chat-form input::placeholder { color: #999 !important; }
html.mhud.mh-chat-open #chat .chat-form #chat-to { width: 84px !important; flex: none; }
html.mhud.mh-chat-open #chat .chat-form #chat-input { flex: 1; width: auto !important; }
html.mhud.mh-chat-open #chat .chat-form .chat-send { position: static !important; width: auto !important; height: 38px !important; min-height: 38px !important; clip-path: none !important; opacity: 1 !important;
	padding: 0 14px !important; border-radius: 10px !important; font: 600 14px var(--game-font) !important; color: #fff !important; background: linear-gradient(#5b7fd6, #3253a8) !important; border: 0 !important; }

/* ---- windows: a sheet from the bottom over the controls; status icons under the character ---- */
html.mhud #windows { z-index: 12 !important; }
html.mhud.mh-chat-open #bottom { z-index: 9 !important; }
html.mhud .win { bottom: 8px !important; max-height: calc((100% - 96px) / var(--uik, 1)) !important; z-index: 25 !important; border-radius: 16px 16px 10px 10px !important;
	transform: scale(var(--uik, 1)); transform-origin: 50% 100%; } /* (drawn at the UI size, from the bottom middle) */
/* Collection: rows big enough for a finger, the list takes the height of the sheet */
html.mhud .col-row, html.mhud.ro-skin .theme-ro .col-row { min-height: 56px; }
html.mhud .col-row .ic { width: 36px; height: 36px; }
html.mhud .pk-row, html.mhud.ro-skin .theme-ro .pk-row { min-height: 48px; font-size: 14px; }
html.mhud .pk-row .ic, html.mhud .pk-row .sic { width: 34px; height: 34px; }
html.mhud .pk-list { max-height: 55vh; }
html.mhud .fr-row button, html.mhud .qs-h button, html.mhud .sys-skill button, html.mhud .cr-mem button { min-height: 34px; padding: 0 12px; }
html.mhud .col-mid b { font-size: 14px; }
html.mhud .col-mid em, html.mhud .col-mid i { font-size: 12px; }
html.mhud .col-list { max-height: 46vh; }
html.mhud .col-tabs button, html.mhud .col-sum button { min-height: 34px; height: auto; font-size: 13px; }
/* NPC answers: the dialog is a sheet at the bottom (the desktop box under it would be off the screen): the answers float
   above it, rows big enough for a finger */
html.mhud .theme-ro .win-npc .npc-menu { top: auto; bottom: calc(100% + 6px); max-height: calc(70vh - 120px); max-height: calc(70dvh - 120px); border-radius: 12px; padding: 4px 0;
	overflow-y: auto; -webkit-overflow-scrolling: touch; }
/* a long text scrolls in the dialog; with answers to pick the dialog stays low (30 % of the screen) so that they fit
   above it (a long text pushed them past the top of the screen) */
html.mhud .theme-ro .win-npc .npc-text { max-height: 52vh; max-height: 52dvh; overflow-y: auto; -webkit-overflow-scrolling: touch; }
html.mhud .theme-ro .win-npc:has(.npc-menu) .npc-text { max-height: 30vh; max-height: 30dvh; min-height: 40px; }
html.mhud .theme-ro .win-npc .npc-menu button, html.mhud.ro-skin .theme-ro .win-npc .npc-menu button { min-height: 42px; padding: 6px 16px; font-size: 15px; line-height: 20px;
	border-bottom: 1px solid #e6e9f0; }
html.mhud .theme-ro .win-npc .npc-menu button:last-child { border-bottom: 0; }
html.mhud .efst-list { position: absolute !important; left: 10px !important; right: auto !important; top: calc(max(8px, env(safe-area-inset-top)) + 80px * var(--mk) * var(--uik, 1)) !important; transform: scale(var(--uik, 1)); transform-origin: 0 0; width: auto !important;
	flex-direction: row !important; flex-wrap: wrap; max-width: 60%; z-index: 6; }
html.mhud #pickup-notice { top: 96px; }
html.mhud .announce { top: 100px; }
/* the big map (menu "แผนที่ใหญ่"): a tap on it walks there */
html.mhud #hud-map.big { width: min(92vw, 380px) !important; z-index: 11 !important; }
html.mhud #hud-map.big #minimap { width: calc(min(92vw, 380px) - 10px) !important; height: calc(min(92vw, 380px) - 10px) !important; }
html.mhud #hud-map .mm-close { display: none; }
html.mhud #hud-map.big .mm-close { display: flex; align-items: center; justify-content: center; position: absolute; top: 6px; right: 6px; z-index: 3;
	width: 36px; height: 36px; border-radius: 50%; border: 2px solid #fff; background: #d23b3b; color: #fff; font-size: 18px; font-weight: 700;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4); padding: 0; }

/* ---- a phone turned sideways (html.mh-land, mobilehud.js: a short touch screen wider than it is high) ----
   the character in the middle stays in sight: the joystick and the attack cluster at the two lower corners, the
   windows as a panel on the right, the chat low in the middle between the joystick and the buttons */
html.mhud.mh-land .mh-me { transform: scale(calc(0.84 * var(--mk) * var(--uik, 1))); transform-origin: 0 0; }
html.mhud.mh-land #hud-map { width: calc(86px * var(--mkm)) !important; }
html.mhud.mh-land #minimap { width: calc(76px * var(--mkm)) !important; height: calc(76px * var(--mkm)) !important; }
html.mhud.mh-land .mh-side { top: max(8px, env(safe-area-inset-top)); right: calc(max(8px, env(safe-area-inset-right)) + 10px + 86px * var(--mkm)); flex-direction: row; }
html.mhud.mh-land .mh-stick { left: max(14px, env(safe-area-inset-left)); bottom: 24px; width: 118px; height: 118px; }
html.mhud.mh-land .mh-act { bottom: 18px; transform: scale(calc(0.88 * var(--mk))); transform-origin: 100% 100%; }
html.mhud.mh-land .mh-peek { left: calc(max(14px, env(safe-area-inset-left)) + 12px + 118px * var(--mks)); bottom: 20px; max-width: 40%; }
/* a state without a picture: a small plain badge (its name on a tap), not the name in a box over the screen */
html.mhud .efst-list.ro-efst { gap: 4px; }
html.mhud .theme-ro .efst-list.ro-efst .efst:not(.has-icon):not(.ammo), html.mhud .efst-list .efst:not(.has-icon):not(.ammo) { width: 24px; min-width: 24px; height: 24px; padding: 0; position: relative;
	border: 1px solid rgba(255, 255, 255, 0.9); border-radius: 6px; background: radial-gradient(circle at 35% 30%, #8fb2f0, #2c4f9a 75%); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
	display: grid; place-items: center; justify-self: auto; }
html.mhud .efst-list .efst:not(.has-icon):not(.ammo)::before { content: '✦'; color: #fff; font-size: 13px; line-height: 1; text-shadow: 0 0 2px #10224a; }
html.mhud .efst-list .efst:not(.has-icon):not(.ammo) em { display: none; }
html.mhud .efst-list .efst:not(.has-icon):not(.ammo) b { position: absolute; left: 50%; top: 100%; transform: translateX(-50%); margin-top: 1px; color: #fff !important;
	font: 9px/10px var(--ro-font, sans-serif); text-shadow: 0 0 2px #000, 0 0 2px #000 !important; white-space: nowrap; }
html.mhud.mh-land .efst-list { top: calc(max(8px, env(safe-area-inset-top)) + 64px * var(--mk) * var(--uik, 1)) !important; max-width: 38%; }
html.mhud.mh-land .mh-exp { left: calc(max(14px, env(safe-area-inset-left)) + 12px + 118px * var(--mks)); right: calc(max(8px, env(safe-area-inset-right)) + 190px * var(--mk)); border-radius: 8px 8px 0 0; }
html.mhud.mh-land #pickup-notice { top: 70px; }
html.mhud.mh-land .announce { top: 74px; }
/* the menu sheet: in the middle, more buttons per row */
html.mhud.mh-land .mh-sheet { align-items: center; justify-content: center; }
html.mhud.mh-land .mh-sheet-in { width: min(760px, 94vw); max-height: 94vh; overflow-y: auto; padding: 10px 12px; border-radius: 20px; }
html.mhud.mh-land .mh-grid { grid-template-columns: repeat(8, 1fr); gap: 6px; }
html.mhud.mh-land .mh-grid button { height: 58px; min-height: 58px; font-size: 11px; gap: 2px; padding: 4px 2px; }
html.mhud.mh-land .mh-grid button span { font-size: 21px; line-height: 26px; }
html.mhud.mh-land .mh-close { height: 34px; min-height: 34px; margin-top: 8px; }
/* the chat: low in the middle (the joystick and the buttons stay free), above the keyboard */
html.mhud.mh-land.mh-chat-open #chat { left: calc(max(14px, env(safe-area-inset-left)) + 128px) !important; right: calc(max(8px, env(safe-area-inset-right)) + 186px) !important;
	bottom: calc(var(--mh-kb, 0px) + 6px) !important; }
html.mhud.mh-land.mh-chat-open #chat .chat-log { height: min(108px, calc(100vh - var(--mh-kb, 0px) - 130px)) !important; min-height: 48px; }
/* windows: a panel on the right instead of a sheet at the bottom */
html.mhud.mh-land .win { left: auto !important; right: max(8px, env(safe-area-inset-right)) !important; top: max(6px, env(safe-area-inset-top)) !important; bottom: 6px !important;
	width: min(440px, 52vw) !important; max-height: none !important; border-radius: 14px !important; }
/* the NPC dialog: low in the middle, its answers above it */
html.mhud.mh-land .win.win-npc { left: 20% !important; right: 20% !important; top: auto !important; width: auto !important; max-height: none !important; }
html.mhud.mh-land .theme-ro .win-npc .npc-menu { max-height: calc(78vh - 110px); max-height: calc(78dvh - 110px); }
html.mhud.mh-land .theme-ro .win-npc .npc-text { max-height: 36vh; max-height: 36dvh; }
html.mhud.mh-land .theme-ro .win-npc:has(.npc-menu) .npc-text { max-height: 22vh; max-height: 22dvh; min-height: 36px; }
/* the small close button of the RO windows: a bigger target for a finger (the picture stays its size) */
html.mhud .win-head .x { position: relative; overflow: visible; }
html.mhud .win-head .x::after { content: ''; position: absolute; inset: -14px -10px; }
/* the world map on a phone: the map above, the chosen map under it; the walk banner under the character's frame */
html.mhud .win-worldmap .wm-main { flex-direction: column; align-items: stretch; }
html.mhud .win-worldmap .wm-map-slot { width: 100%; }
html.mhud .win-worldmap .wm-scroll { height: 42vh; height: 42dvh; min-height: 200px; width: 100%; }
html.mhud .win-worldmap .wm-side { width: 100%; }
html.mhud .win-worldmap .wm-prev { width: min(240px, calc(100vw - 60px)); height: min(240px, calc(100vw - 60px)); margin: 0 auto; }
html.mhud .win-worldmap .wm-acts button { min-height: 40px; padding: 6px 14px; font-size: 14px; }
html.mhud .win-worldmap .wm-res button, html.mhud .win-worldmap .wm-subl button { min-height: 32px; font-size: 13px; }
html.mhud .win-worldmap .wm-top { flex-wrap: wrap; }
html.mhud .navi-banner { top: calc(max(8px, env(safe-area-inset-top)) + 64px * var(--mk, 1) + 18px); font-size: 12px; }
html.mhud.mh-land .navi-banner { top: max(8px, env(safe-area-inset-top)); left: 50%; }
/* the sell window on a phone: finger-sized rows and buttons, the total big */
html.mhud .win-shop .sell-row { min-height: 50px; padding: 5px 8px; font-size: 15px; gap: 8px; grid-template-columns: 24px auto 1fr auto auto; }
html.mhud .theme-ro .win-shop .sell-row { font-size: 15px; line-height: 19px; }
html.mhud .win-shop .sell-row .ck { width: 24px; height: 24px; font-size: 15px; }
html.mhud .win-shop .sell-row .sq button { width: 36px; height: 36px; min-height: 36px; font-size: 19px; }
html.mhud .win-shop .sell-row .sq b { min-width: 40px; font-size: 15px; }
html.mhud .win-shop .sell-quick button, html.mhud .win-shop .sell-tabs button { min-height: 36px; padding: 4px 12px; font-size: 13.5px; }
html.mhud .win-shop .sell-quick .sort { margin-left: 0; }
html.mhud .win-shop .sell-list { max-height: 50vh; max-height: 50dvh; }
html.mhud .win-shop .win-foot .total b { font-size: 18px; }
html.mhud .win-shop .win-foot [data-a=dosell], html.mhud.ro-pics .theme-ro .win-shop .win-foot button.rob[data-a=dosell] { width: auto !important; min-width: 120px !important; height: 44px !important;
	min-height: 44px !important; padding: 0 18px !important; font: 700 16px/40px var(--game-font) !important; color: #fff !important; overflow: visible; filter: none !important; opacity: 1 !important;
	background: linear-gradient(#5aa8ff, #2f6fd8) !important; border: 2px solid #fff !important; border-radius: 12px !important; box-shadow: 0 3px 0 #1d4f9e, 0 4px 10px rgba(47, 111, 216, 0.35) !important; }
html.mhud .win-shop .win-foot [data-a=dosell]:disabled, html.mhud.ro-pics .theme-ro .win-shop .win-foot button.rob[data-a=dosell]:disabled { background: #b9c3d6 !important; box-shadow: none !important; color: #f4f6fb !important; }
html.mhud .win-shop .sell-help { display: none; }
/* the storage on a phone: finger-sized rows, the quick buttons big */
html.mhud .win-storage .sto-row { min-height: 50px; font-size: 15px; }
html.mhud .win-storage .sto-row .sto-n { min-height: 34px; padding: 0 10px; }
html.mhud .win-storage .sto-quick button { min-height: 40px; padding: 4px 14px; font-size: 14px; }
html.mhud .win-storage .tabs button { min-height: 40px; font-size: 14px; }
html.mhud .win-ai .ai-farm .ai-map { width: 150px; min-height: 36px; font-size: 15px; }
html.mhud .win-ai .ai-farm button { min-height: 36px; padding: 4px 12px; font-size: 13px; }

/* top-up (topup.js): the gold button glows; packages 3 a row, finger sized */
html.mhud .mh-pic.mh-topup { width: 56px; height: 56px; min-height: 56px; filter: none; } /* (its glow is the shadow; a drop-shadow would darken the glow too) */
html.mhud .mh-side { align-items: flex-end; }
html.mhud.mh-land .mh-side { align-items: center; }
html.mhud .win-topup .tu-packs { grid-template-columns: repeat(3, 1fr); gap: 7px; }
html.mhud .win-topup .tu-pack { padding: 13px 2px 10px; }
html.mhud .win-topup .tu-pack .tu-pay { font-size: 20px; }
html.mhud .win-topup .tu-acts button, html.mhud .win-topup .tu-save { min-height: 40px; }
html.mhud .win-topup .tu-row { grid-template-columns: 74px 52px 1fr auto; }

/* ---- the size of the phone UI (--uik): the chat lines, the notices and the dialogs follow it too ---- */
html.mhud .mh-peek { transform: scale(var(--uik, 1)); transform-origin: 0 100%; }
html.mhud #toasts, html.mhud #pickup-notice, html.mhud .announce, html.mhud #topup-pop { zoom: var(--uik, 1); }
html.mhud .popup:not(.pin) { zoom: max(var(--uik, 1), 0.75); }
/* the NPC dialog is read and tapped all the time: never under 75 %, and its answers stay a thumb high (42 px on the screen) */
html.mhud .win.win-npc { transform: scale(max(var(--uik, 1), 0.75)); max-height: calc((100% - 96px) / max(var(--uik, 1), 0.75)) !important; }
/* the Collection: rows tapped one by one (put in / take back): at least 75 %, rows of 42 px on the screen like the NPC answers */
html.mhud .win.win-collection { transform: scale(max(var(--uik, 1), 0.75)); max-height: calc((100% - 96px) / max(var(--uik, 1), 0.75)) !important; }
html.mhud .win-collection .col-row, html.mhud.ro-skin .theme-ro .win-collection .col-row { min-height: calc(42px / max(var(--uik, 1), 0.75)); }
html.mhud .theme-ro .win-npc .npc-menu button, html.mhud.ro-skin .theme-ro .win-npc .npc-menu button, html.mhud .win-npc .npc-menu button { min-height: calc(42px / max(var(--uik, 1), 0.75)); }
/* the world map is a picture to tap a place on: at full size whatever the UI size */
html.mhud .win.win-worldmap { transform: none; max-height: calc(100% - 96px) !important; }
/* ---- the status window on the phone: the +1 buttons (Str ... Luk) big enough for a finger, whatever the UI size
   (Noh: tapped the wrong stat); ~30 x 26 px on the screen, the rows as tall ---- */
html.mhud .theme-ro .win-status .st-row { grid-template-columns: 26px 78px calc(30px / var(--uik, 1)) 16px; height: calc(26px / var(--uik, 1)); }
html.mhud .theme-ro .win-status .ro-stat2 .st-left { row-gap: calc(2px / var(--uik, 1)); }
html.mhud .theme-ro .win-status .st-up { width: calc(30px / var(--uik, 1)); height: calc(25px / var(--uik, 1)); min-height: calc(25px / var(--uik, 1)) !important;
	border: 1px solid #a9b8d8 !important; border-radius: calc(5px / var(--uik, 1)) !important; background: linear-gradient(#f8faff, #dfe8fb) !important; }
html.mhud .theme-ro .win-status .st-up:disabled { background: #f1f3f7 !important; border-color: #d6dbe6 !important; }
html.mhud .theme-ro .win-status .st-up::after { margin: 0 auto; border-width: 0 calc(7px / var(--uik, 1)) calc(10px / var(--uik, 1)); }
html.mhud.ro-skin .theme-ro .win-status .st-up::after { width: calc(16px / var(--uik, 1)); height: calc(16px / var(--uik, 1)); margin: 0 auto; background-size: 100% 100%; border: 0; }
html.mhud .theme-ro .win-status .st-up:active:not(:disabled) { background: #c9d8f8 !important; }
html.mhud .win-status [data-a=up]:not(.st-up) { min-width: calc(30px / var(--uik, 1)); min-height: calc(26px / var(--uik, 1)); }
html.mhud .theme-ro .win-status .ro-stat2 { grid-template-columns: auto minmax(0, 1fr); }