/* Compact mobile HUD uses CSS pixels, independent of saved UI/pad scale and DPR. */
body.touch.mobile-compact-ui {
  --mcu-surface: rgba(13, 21, 37, .82);
  --mcu-edge: rgba(211, 177, 97, .75);
  --mcu-safe-bottom: env(safe-area-inset-bottom, 0px);
}
body.touch.mobile-compact-ui .panel.status {
  top: calc(6px * var(--mcu-inv, 1)) !important;
  left: calc(8px * var(--mcu-inv, 1)) !important;
  width: 198px; height: 48px; padding: 0; gap: 6px;
  transform: scale(var(--mcu-inv, 1)) !important; transform-origin: top left;
  align-items: center; translate: var(--safe-l, 0px) 0;
}
body.touch.mobile-compact-ui .status .portrait { width: 42px; height: 42px; border-width: 2px; box-shadow: 0 0 0 1px #bd9549; }
body.touch.mobile-compact-ui .status #portraitCanvas { width: 38px; height: 38px; }
body.touch.mobile-compact-ui .status .meters { width: 150px; gap: 2px; }
body.touch.mobile-compact-ui .status .hud-name { font-size: 11px; min-height: 12px; line-height: 12px; gap: 4px; }
body.touch.mobile-compact-ui .status #hudName { max-width: 108px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.touch.mobile-compact-ui .status .bar { height: 12px; border-radius: 4px; }
body.touch.mobile-compact-ui .status .bar span { font-size: 10px; line-height: 10px; }
body.touch.mobile-compact-ui .status .bar.xp,
body.touch.mobile-compact-ui .status .bar.job { height: 3px; border: 0; }
body.touch.mobile-compact-ui .status .bar.xp span,
body.touch.mobile-compact-ui .status .bar.job span { display: none; }
body.touch.mobile-compact-ui .status .bar.st { height: 3px; }
body.touch.mobile-compact-ui .status .bar.st span { display: none; }
body.touch.mobile-compact-ui .status .hud-vip { display: none; }
body.touch.mobile-compact-ui .rail.left .mcu-secondary-top {
  position: static !important; transform: none !important; margin: 0 !important;
  border-radius: 8px; font-size: 10px;
}
body.touch.mobile-compact-ui .purse {
  top: calc(60px * var(--mcu-inv, 1)) !important;
  left: calc(8px * var(--mcu-inv, 1)) !important; right: auto; bottom: auto;
  transform: scale(var(--mcu-inv, 1)) !important; transform-origin: top left;
  padding: 0; font-size: 10px; gap: 2px; width: 128px; flex-wrap: wrap;
}
body.touch.mobile-compact-ui .purse-row { max-width: 128px; }
body.touch.mobile-compact-ui .purse .chip { box-sizing: border-box; font-size: 10px; height: 22px; padding: 2px 4px; gap: 3px; max-width: 128px; overflow: hidden; }
body.touch.mobile-compact-ui #zenyText { font-size: 10px; line-height: 14px; white-space: nowrap; }
body.touch.mobile-compact-ui .rail.left .pixa-chip { gap: 1px; flex-direction: column; }
body.touch.mobile-compact-ui .rail.left .pixa-chip #pixaText { font-size: 10px; }
body.touch.mobile-compact-ui .purse button { min-height: 20px; padding: 0 4px; font-size: 10px; }
body.touch.mobile-compact-ui .purse .ico { width: 12px; height: 12px; }
body.touch.mobile-compact-ui .net-chips {
  top: calc(6px * var(--mcu-inv, 1)) !important;
  right: calc(60px * var(--mcu-inv, 1)) !important;
  transform: scale(var(--mcu-inv, 1)) !important; transform-origin: top right;
  gap: 3px; font-size: 10px;
}
body.touch.mobile-compact-ui .net-chip { padding: 3px 6px; min-height: 20px; font-size: 10px; }
body.touch.mobile-compact-ui .hud-hide-btn {
  top: calc(6px * var(--mcu-inv, 1)) !important; right: calc(8px * var(--mcu-inv, 1)) !important;
  width: 44px; height: 44px; min-width: 44px; min-height: 44px;
  transform: scale(var(--mcu-inv, 1)) !important; transform-origin: top right;
  font-size: 16px; padding: 0; z-index: 5;
}
body.touch.mobile-compact-ui .wb-call {
  box-sizing: border-box; left: calc(132px * var(--mcu-inv, 1)) !important;
  right: auto; top: calc(106px * var(--mcu-inv, 1)) !important; bottom: auto;
  width: 176px; max-width: 176px; height: 48px; padding: 1px 3px;
  transform: scale(var(--mcu-inv, 1)) !important; transform-origin: top left;
  background: var(--mcu-surface); border: 1px solid var(--mcu-edge); border-radius: 8px;
  z-index: 9; animation: none;
}
body.touch.mobile-compact-ui .wb-call .wb-call-row { display: none; }
body.touch.mobile-compact-ui .wb-call-head { width: 122px; min-height: 44px; margin: 0; gap: 3px; font-size: 11px; cursor: pointer; }
body.touch.mobile-compact-ui .wb-call-head b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.touch.mobile-compact-ui .wb-call-head .ico { flex: none; width: 16px; height: 16px; background-size: contain; }
body.touch.mobile-compact-ui .wb-call-x { box-sizing: border-box; top: 1px; right: 1px; width: 44px; height: 44px; padding: 0; font-size: 16px; }
body.touch.mobile-compact-ui .wb-pop {
  box-sizing: border-box; left: calc(8px * var(--mcu-inv, 1)) !important;
  right: auto; top: calc(8px * var(--mcu-inv, 1)) !important; bottom: auto;
  width: min(340px, calc(100vw - 16px)); max-height: calc(100dvh - 16px);
  transform: scale(var(--mcu-inv, 1)) !important; transform-origin: top left;
  overflow-y: auto; overscroll-behavior: contain; font-size: 12px;
}
body.touch.mobile-compact-ui .wb-pop .wb-go { min-width: 44px; min-height: 44px; }
body.touch.mobile-compact-ui .rail.left:not(.less) .wb-top.wb-off { display: none !important; }
body.touch.mobile-compact-ui .joy {
  width: 132px !important; height: 132px !important;
  left: calc(8px * var(--mcu-inv, 1)) !important;
  bottom: calc((8px + var(--mcu-safe-bottom)) * var(--mcu-inv, 1)) !important;
  translate: var(--safe-l, 0px) 0;
  transform: scale(calc(.8484848485 * var(--mcu-inv, 1))) !important;
  transform-origin: bottom left;
  border: 2px solid rgba(214, 176, 89, .72);
  background: rgba(13, 21, 37, .28); box-shadow: inset 0 0 12px #0003;
}
body.touch.mobile-compact-ui .joy::before { inset: -9px; }
body.touch.mobile-compact-ui .joy-knob {
  width: 44px; height: 44px; left: 50%; top: 50%; margin: -22px 0 0 -22px;
  background: radial-gradient(circle at 35% 30%, #e4c87f, #9d793b 80%);
  border: 1px solid #edcf88; box-shadow: 0 2px 5px #0005;
}
body.touch.mobile-compact-ui .tc {
  width: 246px !important; height: 156px !important;
  right: calc(8px * var(--mcu-inv, 1)) !important;
  bottom: calc((8px + var(--mcu-safe-bottom)) * var(--mcu-inv, 1)) !important;
  translate: calc(-1 * var(--safe-r, 0px)) 0;
  transform: scale(var(--mcu-inv, 1)) !important; transform-origin: bottom right;
}
body.touch.mobile-compact-ui .tc-btn {
  box-sizing: border-box; width: 44px; height: 44px; min-width: 44px; min-height: 44px;
  border: 1px solid var(--mcu-edge); border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, rgba(38, 46, 59, .78), rgba(10, 18, 31, .72));
  box-shadow: 0 1px 3px #0006; padding: 2px; font-size: 11px;
}
body.touch.mobile-compact-ui .tc-btn:active { transform: translateY(1px); }
body.touch.mobile-compact-ui .tc-btn b { font: 700 10px/12px "Segoe UI", sans-serif; right: 2px; bottom: 0; }
body.touch.mobile-compact-ui .tc-btn .tc-ico { width: 30px; height: 30px; }
body.touch.mobile-compact-ui .tc-btn canvas { width: 30px; height: 30px; }
body.touch.mobile-compact-ui .tc-skill.s0, body.touch.mobile-compact-ui .tc-skill.s4 { right: 64px; }
body.touch.mobile-compact-ui .tc-skill.s1, body.touch.mobile-compact-ui .tc-skill.s5 { right: 110px; }
body.touch.mobile-compact-ui .tc-skill.s2, body.touch.mobile-compact-ui .tc-skill.s6 { right: 156px; }
body.touch.mobile-compact-ui .tc-skill.s3, body.touch.mobile-compact-ui .tc-skill.s7 { right: 202px; }
body.touch.mobile-compact-ui .tc-skill.s0, body.touch.mobile-compact-ui .tc-skill.s1,
body.touch.mobile-compact-ui .tc-skill.s2, body.touch.mobile-compact-ui .tc-skill.s3 { bottom: 48px; }
body.touch.mobile-compact-ui .tc-skill.s4, body.touch.mobile-compact-ui .tc-skill.s5,
body.touch.mobile-compact-ui .tc-skill.s6, body.touch.mobile-compact-ui .tc-skill.s7 { bottom: 0; }
body.touch.mobile-compact-ui .tc-pot { right: 0; }
body.touch.mobile-compact-ui .tc-pot.hp { bottom: 64px; }
body.touch.mobile-compact-ui .tc-pot.sp { bottom: 112px; }
body.touch.mobile-compact-ui .tc-auto { right: 64px; bottom: 96px; }
body.touch.mobile-compact-ui .tc-pick { right: 110px; bottom: 96px; }
body.touch.mobile-compact-ui .tc-sit { right: 156px; bottom: 96px; }
body.touch.mobile-compact-ui .tc-dash { right: 202px; bottom: 96px; }
body.touch.mobile-compact-ui .tc-attack {
  right: 0; bottom: 0; width: 56px; height: 56px; min-width: 56px; min-height: 56px;
  background: radial-gradient(circle at 35% 30%, #885a27, #43280e 78%);
  border: 2px solid #d6b361; box-shadow: 0 1px 4px #0007;
}
body.touch.mobile-compact-ui .tc-attack::before { width: 24px; height: 24px; margin: 0; }
body.touch.mobile-compact-ui .tc-attack span { font-size: 11px; line-height: 12px; }
body.touch.mobile-compact-ui .tc-small::before { width: 18px; height: 18px; }
body.touch.mobile-compact-ui .tc-small span { font-size: 10px; line-height: 12px; }
body.touch.mobile-compact-ui .tc-skill.empty { opacity: .38; }
body.touch.mobile-compact-ui .tc-pot.empty { opacity: .5; }
body.touch.mobile-compact-ui #buffBar {
  transform: scale(var(--mcu-inv, 1)); transform-origin: top left; max-width: 190px;
}
body.touch.mobile-compact-ui .mcu-pad-fixed { display: none; }
body.touch.mobile-compact-ui .ui-chat-tools .chat-say { color: #ffe08a; }
/* class-2 combos (js/class2_combo_ui.js): the count and the window's ring fit the small thumb buttons */
body.touch.mobile-compact-ui .tc-skill i.c2-n { right: -4px; top: -5px; padding: 0 2px; font-size: 9px; line-height: 11px; }
body.touch.mobile-compact-ui .tc-skill.c2-win::before { inset: -2px; padding: 2px; }