/* Release 100.254 touch HUD: one classic visual language, a quiet screen.
   Every button is a round dark-lacquer token (mh-lacquer.png, cut from the client's own
   lacquer button) with a gold rim. Primary combat medallions are larger with a gold bevel
   and an inner gold ring; secondary tokens are small with a single hairline. The right
   side shows the minimap, the drawer token, the combat cluster and one thumb column of
   always-visible action tokens (party finder, character menu, skill page); the function
   grid, 3D view, HUD fold and pet live in one drawer behind the drawer token. */
html.mobile-hud-on {
  --mh-gold-hi: #fbe7a1;
  --mh-gold: #d4a84a;
  --mh-gold-dk: #7a5216;
  --mh-gold-line: #d4a84a99;
  --mh-gold-faint: #d4a84a2e;
  --mh-bevel: linear-gradient(#fbe7a1, #d4a84a 45%, #7a5216);
  --mh-ink: #0a0503;
  --mh-panel: #120603d9;
  --mh-strip: #0a050373;
  --mh-text: #f6e7bf;
  --mh-text-dim: #cdb98c;
  --mh-outline: -1px 0 #000, 1px 0 #000, 0 -1px #000, 0 1px #000;
  --mh-gap: 8px;
  --mh-safe-l: env(safe-area-inset-left, 0px);
  --mh-safe-r: env(safe-area-inset-right, 0px);
  --mh-safe-b: env(safe-area-inset-bottom, 0px);
  --mh-k: calc(var(--ui-scale, 1) * var(--hud-scale, 1));
  --mh-hit: calc(44px / var(--mh-k));
  --mh-hit-mm: calc(44px / (var(--mh-k) * var(--minimap-scale, .75)));
  --mh-hudw: calc(100vw / (var(--ui-scale,1) * var(--hud-scale,1)));
  /* Screen-px rhythm (4/8): 36px tokens, 32px small tokens, 12px type. */
  --mh-tok: calc(36px / var(--mh-k));
  --mh-sm: calc(32px / var(--mh-k));
  --mh-type: calc(12px / var(--mh-k));
  /* The drawer token sits in a column between the drawer and the minimap. */
  --mh-dock-right: 136px;
  --mh-menus-right: calc(var(--mh-dock-right) + var(--mh-tok) + 8px / var(--mh-k));
  --mh-menus-w: 208px;
  --quick-half: calc(176px / var(--mh-k) + 8px) !important;
}
/* While the drawer is shut nothing but its token needs room beside the target frame. */
html.mobile-hud-on body .mobile-hud.menus-hidden { --mh-menus-w: 0px; }

/* Secondary tokens: small dark-lacquer discs with one gold hairline. */
html.mobile-hud-on body :is(.mh-btn.mh-auto, .mh-btn.mh-swap, .mh-btn.mh-talk, .mh-combat-hide, .mh-party-finder, .mh-menu-hide,
    .mh-tracker-hide, .mh-chat-fold, .mh-ui-hide, .mh-pet-toggle, .mchat-close),
html.mobile-hud-on body #viewModeButton,
html.mobile-hud-on body #liveVoiceChat .voice-mic {
  box-sizing: border-box;
  border: 1px solid var(--mh-gold-line) !important;
  border-radius: 50% !important;
  background: url(/ui-kit/mh-lacquer.png) center / cover no-repeat !important;
  box-shadow: 0 1px 3px #000a !important;
  color: var(--mh-text) !important;
  font-family: Tahoma, "Leelawadee UI", sans-serif !important;
  font-weight: 700 !important;
  text-shadow: var(--mh-outline) !important;
  text-align: center;
  opacity: 1 !important;
  overflow: visible !important;
  transition: transform 100ms, filter 100ms;
}
html.mobile-hud-on body :is(.mh-btn.mh-auto, .mh-btn.mh-swap, .mh-btn.mh-talk, .mh-combat-hide, .mh-party-finder, .mh-menu-hide,
    .mh-tracker-hide, .mh-chat-fold, .mh-ui-hide, .mh-pet-toggle, .mchat-close):active,
html.mobile-hud-on body #viewModeButton:active,
html.mobile-hud-on body #liveVoiceChat .voice-mic:active {
  transform: scale(.92);
  filter: brightness(1.2);
}
/* Selected tokens: a gold rim and gold caption, no glow. */
html.mobile-hud-on body :is(.mh-btn.mh-auto, .mh-btn.mh-swap, .mh-combat-hide, .mh-party-finder,
    .mh-tracker-hide, .mh-chat-fold, .mh-ui-hide, .mh-pet-toggle, .mchat-close).on,
html.mobile-hud-on body .mobile-hud:not(.menus-hidden) .mh-menu-hide,
html.mobile-hud-on body #viewModeButton.on,
html.mobile-hud-on body #liveVoiceChat .voice-mic.on {
  border-color: var(--mh-gold) !important;
  color: var(--mh-gold-hi) !important;
}
/* The auto toggle is a small pill beside the attack medallion. */
html.mobile-hud-on body .mh-btn.mh-auto {
  border-radius: 999px !important;
  font-size: calc(11px / var(--mh-k)) !important; line-height: 1 !important; padding: 0 !important;
}

/* Primary combat medallions: lacquer face, gold bevel rim, inner gold ring. */
html.mobile-hud-on body :is(.mh-btn.mh-attack, .mh-btn.mh-meditate, .mh-btn.mh-target, .mh-btn.mh-pk, .mh-btn.swap-skill) {
  box-sizing: border-box;
  border: 2px solid transparent !important;
  border-radius: 50% !important;
  background: url(/ui-kit/mh-lacquer.png) center / cover no-repeat padding-box,
    var(--mh-bevel) border-box !important;
  box-shadow: inset 0 0 0 1px #000c, inset 0 0 0 3px #1a0703b3, inset 0 0 0 4px var(--mh-gold-line),
    0 2px 5px #000b !important;
  color: var(--mh-text) !important;
  font-family: Tahoma, "Leelawadee UI", sans-serif !important;
  font-weight: 700 !important;
  font-size: var(--mh-type) !important;
  text-shadow: var(--mh-outline) !important;
  text-align: center;
  opacity: 1 !important;
  overflow: visible !important;
  transition: transform 100ms, filter 100ms;
}
html.mobile-hud-on body :is(.mh-btn.mh-attack, .mh-btn.mh-meditate, .mh-btn.mh-target, .mh-btn.mh-pk, .mh-btn.swap-skill):active {
  transform: scale(.94);
  filter: brightness(1.2);
}
html.mobile-hud-on body :is(.mh-btn.mh-meditate, .mh-btn.mh-target, .mh-btn.mh-pk, .mh-btn.swap-skill).on {
  box-shadow: inset 0 0 0 1px #000c, inset 0 0 0 3px #1a0703b3, inset 0 0 0 4px var(--mh-gold-hi),
    0 2px 5px #000b !important;
}
html.mobile-hud-on body .mh-btn.mh-attack {
  border-width: 3px !important;
  box-shadow: inset 0 0 0 1px #000c, inset 0 0 0 5px #1a0703b3, inset 0 0 0 6px var(--mh-gold-line),
    0 2px 6px #000b !important;
}
html.mobile-hud-on body .mh-attack img {
  width: 58%; height: 58%; object-fit: contain;
  filter: drop-shadow(0 1px 1px #000);
}
html.mobile-hud-on body .mh-btn.mh-pk:not(.swap-skill) {
  background: url(/assets/PK1.png) center 4px / 55% auto no-repeat padding-box,
    url(/ui-kit/mh-lacquer.png) center / cover no-repeat padding-box,
    var(--mh-bevel) border-box !important;
  padding-top: 26px !important;
  line-height: 1 !important;
}
html.mobile-hud-on body .mh-btn.mh-pk.on:not(.swap-skill) {
  background: url(/assets/PK2.png) center 4px / 55% auto no-repeat padding-box,
    url(/ui-kit/mh-lacquer.png) center / cover no-repeat padding-box,
    var(--mh-bevel) border-box !important;
}
html.mobile-hud-on body .mh-btn.swap-skill {
  padding: 0 !important;
  color: var(--mh-gold) !important;
  font-size: 24px !important;
  text-shadow: 0 1px 1px #000 !important;
}
html.mobile-hud-on body .mh-btn.swap-skill img {
  border-radius: 50%; width: 80%; height: 80%; object-fit: cover;
}
html.mobile-hud-on body .mh-btn.swap-skill::after {
  content: none;
  width: auto; height: auto;
  inset: 0 !important; transform: none;
  border-radius: 50%; pointer-events: none;
  background: conic-gradient(#000b 0 var(--mh-cd, 0turn), #0000 0);
}
html.mobile-hud-on body .mh-btn.swap-skill.mh-cooling::after { content: ""; }

/* Centred transparent hit extensions, measured in screen px through --mh-k.
   Skill medallions already exceed 44px, so their ::after belongs to cooldown. */
html.mobile-hud-on body :is(.mh-btn, .mh-attack, .mh-swap, .mh-auto, .mh-combat-hide, .mh-party-finder, .mh-menu-hide,
    .mh-tracker-hide, .mh-chat-fold, .mh-ui-hide, .mh-pet-toggle, .mh-menu, .mchat-icon, .mchat-chip, .mchat-write, .skill-quickbar-slot)::after,
html.mobile-hud-on body #ygChatRestore::after,
html.mobile-hud-on body #viewModeButton::after,
html.mobile-hud-on body #liveVoiceChat .voice-mic::after,
html.mobile-hud-on body #minimap :is(#mmZoomIn, #mmZoomOut, #mmOpenWorldMap, #mmToggleSize)::after {
  content: "";
  position: absolute;
  inset: auto !important;
  left: 50% !important; top: 50% !important;
  width: max(100%, var(--mh-hit));
  height: max(100%, var(--mh-hit));
  transform: translate(-50%, -50%);
  border-radius: inherit;
  box-sizing: border-box; border: 0; padding: 0; margin: 0;
  background: transparent; box-shadow: none; pointer-events: auto;
}
html.mobile-hud-on body .mchat-chip::after { width: 100%; height: max(100%, var(--mh-hit)); }
html.mobile-hud-on body .mh-menu::after { width: max(100%, var(--mh-hit)); height: 100%; }
/* The client uses ::after for unread mail; reserve it for hits and keep the badge on ::before. */
html.mobile-hud-on body .mh-menu.has-mail::before {
  content: ""; position: absolute; top: 3px; right: 3px; width: 9px; height: 9px;
  background: #d23a26; border: 1px solid var(--mh-gold-hi); border-radius: 50%;
  pointer-events: none;
}
html.mobile-hud-on body :is(.mchat-icon, .mchat-write) { position: relative; }
html.mobile-hud-on body :is(#expTrack, #hudMeters) { pointer-events: none !important; }
html.mobile-hud-on body .mh-meditate { bottom: 44px !important; }
html.mobile-hud-on body .mh-chat-fold { bottom: 72px !important; }
/* Chat folds from its own strip (the chip and restore tab); the duplicate fold button
   only stays reachable while the chat is folded by it. */
html.mobile-hud-on body:not(:has(#chat.mobile-folded)) .mh-chat-fold { display: none !important; }

/* Drawer token: the one always-visible secondary control on the right, left of the minimap. */
html.mobile-hud-on body :is(.mh-menu-hide, .mh-party-finder, .mh-ui-hide, .mh-combat-hide, .mh-pet-toggle),
html.mobile-hud-on body #viewModeButton {
  width: var(--mh-tok) !important; height: var(--mh-tok) !important;
  min-width: 0 !important; min-height: 0 !important;
  padding: 0 !important; margin: 0 !important;
  font-size: var(--mh-type) !important; line-height: 1 !important;
  left: auto !important; bottom: auto !important;
}
html.mobile-hud-on body .mh-menu-hide {
  right: var(--mh-dock-right) !important; top: calc(8px / var(--mh-k)) !important;
}
/* Language-independent marks so no caption spills out of a token. */
html.mobile-hud-on body :is(.mh-menu-hide, .mh-ui-hide, .mh-pet-toggle) { font-size: 0 !important; }
html.mobile-hud-on body .mh-menu-hide::before { content: "\2630"; font-size: calc(16px / var(--mh-k)); line-height: 1; }
html.mobile-hud-on body .mh-ui-hide::before { content: "UI"; font-size: var(--mh-type); line-height: 1; }
html.mobile-hud-on body .mh-pet-toggle::before { content: "สัตว์"; font-size: calc(10px / var(--mh-k)); line-height: 1; }

/* The drawer: the function grid (4 columns of 46px cells, 8px gaps, 60px rows) on one
   lacquer-ink panel, with 3D / UI in the free cells of row 3 and the pet in row 4.
   Cell (row r, column c) puts a token's right edge at
   menus-right + (4 - c) * 54 + (46 - tok) / 2 and its top at 8 + (r - 1) * 60 + (52 - tok) / 2. */
html.mobile-hud-on body .mh-menus {
  width: var(--mh-menus-w) !important; right: var(--mh-menus-right) !important;
  z-index: 30;
}
html.mobile-hud-on body .mh-menus::before {
  content: ""; position: absolute; z-index: -1; pointer-events: auto;
  left: calc(-6px / var(--mh-k)); right: calc(-6px / var(--mh-k)); top: calc(-6px / var(--mh-k));
  bottom: calc(-6px / var(--mh-k));
  background: var(--mh-panel); border: 1px solid var(--mh-gold-line); border-radius: 4px;
  box-shadow: 0 3px 8px #000b;
}
/* Row 4 exists only for a summoned-pet token. */
html.mobile-hud-on body .mobile-hud:has(.mh-pet-toggle:not([hidden])) .mh-menus::before {
  bottom: calc(-60px - 6px / var(--mh-k));
}
html.mobile-hud-on body .mobile-hud:not(.menus-hidden) :is(.mh-ui-hide, .mh-pet-toggle, #viewModeButton) {
  z-index: 31 !important;
}
html.mobile-hud-on body #viewModeButton {
  right: calc(var(--mh-menus-right) + 3 * 54px + (46px - var(--mh-tok)) / 2) !important;
  top: calc(8px + 2 * 60px + (52px - var(--mh-tok)) / 2) !important;
}
html.mobile-hud-on body .mh-ui-hide {
  right: calc(var(--mh-menus-right) + 2 * 54px + (46px - var(--mh-tok)) / 2) !important;
  top: calc(8px + 2 * 60px + (52px - var(--mh-tok)) / 2) !important;
}
html.mobile-hud-on body .mh-pet-toggle {
  right: calc(var(--mh-menus-right) + 3 * 54px + (46px - var(--mh-tok)) / 2) !important;
  top: calc(8px + 3 * 60px + (52px - var(--mh-tok)) / 2) !important;
}
/* Shut drawer: its tokens leave the screen and stop taking taps. */
html.mobile-hud-on body .mobile-hud.menus-hidden :is(.mh-ui-hide, .mh-pet-toggle, #viewModeButton) {
  visibility: hidden !important; pointer-events: none !important;
}
html.mobile-hud-on body .mobile-hud.menus-hidden :is(.mh-ui-hide, .mh-pet-toggle, #viewModeButton)::after {
  pointer-events: none !important;
}

/* Thumb column: party finder, character menu and skill page stay outside the drawer, at
   the right edge (right 16 screen px) under the minimap (its bottom is 141 HUD px), on the
   48 screen-px pitch: top 149 + n * 48 / k HUD px, n = 0 (PT), 1 (menu), 2 (skill page).
   The combat ring's rightmost medallion (attack) ends 69 HUD px from the edge. */
html.mobile-hud-on body :is(.mh-party-finder, .mh-combat-hide) {
  right: calc(16px / var(--mh-k)) !important;
}
html.mobile-hud-on body .mh-party-finder { top: 149px !important; }
html.mobile-hud-on body .mh-combat-hide { top: calc(149px + 48px / var(--mh-k)) !important; }
/* The skill-page token lives in .mh-combat (right 56, top 430 - 12 - 200 = 218 HUD px). */
html.mobile-hud-on body .mh-btn.mh-swap {
  width: var(--mh-tok) !important; height: var(--mh-tok) !important; padding: 0 !important;
  left: auto !important; bottom: auto !important;
  right: calc(16px / var(--mh-k) - 56px) !important;
  top: calc(149px + 96px / var(--mh-k) - 218px) !important;
}
/* The character menu that replaces the combat ring keeps clear of the thumb column. */
html.mobile-hud-on body .mh-combat-menus { right: calc(64px / var(--mh-k)) !important; }

/* Quick bar: dark sockets with faint gold edges; empty sockets nearly vanish. */
html.mobile-hud-on body .mh-quick {
  background: transparent; border: 0; border-radius: 0; padding: 3px 6px; box-shadow: none;
}
html.mobile-hud-on body #skillQuickbar {
  grid-template-columns: repeat(8, calc(40px / var(--mh-k))) !important;
  gap: calc(4px / var(--mh-k)) !important;
}
html.mobile-hud-on body #skillQuickbar .skill-quickbar-slot {
  box-sizing: border-box;
  width: calc(40px / var(--mh-k)) !important; height: calc(40px / var(--mh-k)) !important;
  border: 1px solid var(--mh-gold-line);
  border-radius: 4px; background: #0a0503cc; box-shadow: 0 1px 2px #0008;
  overflow: visible;
  transition: filter 100ms;
}
html.mobile-hud-on body #skillQuickbar .skill-quickbar-slot:has(.skill-quickbar-empty) {
  border-color: #d4a84a40;
  background: #00000040; box-shadow: none;
}
html.mobile-hud-on body #skillQuickbar .skill-quickbar-empty {
  color: transparent; font-size: 0; text-shadow: none; border: 0;
}
html.mobile-hud-on body #skillQuickbar .skill-quickbar-slot img {
  inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 3px;
}
html.mobile-hud-on body #skillQuickbar .skill-quickbar-cooldown {
  inset: 0; border-radius: 3px;
  background: conic-gradient(#000c 0turn var(--skill-cooldown-remaining, 1turn), #0000 0);
}
html.mobile-hud-on body #skillQuickbar .skill-quickbar-qty {
  z-index: 3; bottom: 0; right: 1px; color: var(--mh-text); text-shadow: var(--mh-outline);
}
html.mobile-hud-on body #skillQuickbar .skill-quickbar-slot:active { filter: brightness(1.2); }

/* Function icons: the client's own round icons on the drawer panel, 11px captions. */
html.mobile-hud-on body :is(.mh-menus .mh-menu, .mh-combat-menus .mh-menu, #gmMenuToggle.mh-menu-gm) {
  box-sizing: border-box; min-width: 44px; min-height: 52px; max-width: none;
  height: auto !important; padding: 0 3px !important;
  background: none !important;
  border: 0 !important; border-radius: 3px !important; box-shadow: none !important;
  color: var(--mh-text) !important;
  font: 700 calc(11px / var(--mh-k)) / 14px Tahoma, "Leelawadee UI", sans-serif !important;
  text-shadow: var(--mh-outline) !important;
  white-space: nowrap; text-overflow: clip; overflow: visible; letter-spacing: -0.2px;
  transition: transform 100ms;
}
/* These labels are anonymous text nodes: RTL selects the left overflow edge
   while each Thai/English text run retains its own character order. */
html.mobile-hud-on body .mh-menus > .mh-menu:nth-child(4n),
html.mobile-hud-on body .mh-menus > .mh-menu:last-child,
html.mobile-hud-on body .mh-combat-menus > .mh-menu:nth-child(3n),
html.mobile-hud-on body .mh-combat-menus > .mh-menu:last-child {
  text-align: right !important; direction: rtl;
}
html.mobile-hud-on body :is(.mh-menus .mh-menu.mh-menu-pc-icon, .mh-combat-menus .mh-menu, #gmMenuToggle.mh-menu-gm) :is(span, .gm-shield) {
  box-sizing: border-box; width: 36px !important; height: 36px !important;
  border: 0 !important; border-radius: 50% !important;
  display: grid; place-items: center; margin: 0 auto 1px;
  background: none !important;
  box-shadow: none !important;
}
html.mobile-hud-on body .mh-menu img.mh-menu-pc-image { width: 32px; height: 32px; object-fit: contain; }
html.mobile-hud-on body :is(.mh-menus .mh-menu.mh-menu-pc-icon, .mh-combat-menus .mh-menu, #gmMenuToggle.mh-menu-gm):active {
  transform: scale(.94);
}
/* The character menu (combat hidden) shares the drawer panel look. */
html.mobile-hud-on body .mh-combat-menus {
  background: var(--mh-panel); border-radius: 4px;
  box-shadow: 0 0 0 calc(6px / var(--mh-k)) var(--mh-panel), 0 0 0 calc(7px / var(--mh-k)) var(--mh-gold-line);
}

/* Quest tracker: a slim translucent panel under the HP panel with a small fold token,
   below the rolling announcement (top 66 HUD + 22 screen px) and ending at 218 HUD px,
   12 HUD px above the chat log (230), so it never meets the chat or the combat cluster. */
html.mobile-hud-on body .mh-tracker {
  width: 200px !important;
  background: var(--mh-strip);
  border: 1px solid var(--mh-gold-faint); border-radius: 4px;
  box-shadow: none;
}
@media (orientation: landscape) {
  html.mobile-hud-on body .mh-tracker {
    left: calc(4px + var(--mh-sm) + 4px / var(--mh-k)) !important;
    top: calc(66px + 30px / var(--mh-k)) !important;
  }
  html.mobile-hud-on body .mh-tracker-body {
    max-height: calc(218px - 66px - 30px / var(--mh-k) - 36px) !important;
  }
  html.mobile-hud-on body .mh-tracker-hide {
    left: 4px !important; top: calc(66px + 30px / var(--mh-k)) !important;
    width: var(--mh-sm) !important; height: var(--mh-sm) !important;
    min-width: 0 !important; min-height: 0 !important; padding: 0 !important;
    font-size: calc(10px / var(--mh-k)) !important; line-height: 1 !important;
  }
}
html.mobile-hud-on body .mh-tracker-body { padding: 2px 8px 6px; }
html.mobile-hud-on body .mh-tracker-tabs { height: auto; min-height: 30px; }
html.mobile-hud-on body .mh-tracker-tab {
  position: relative; min-height: 30px; background: transparent; color: var(--mh-text-dim);
  font-size: var(--mh-type); font-weight: 700;
  text-shadow: var(--mh-outline); border-bottom: 1px solid var(--mh-gold-faint);
}
/* Grow only above the tab so the quest/party rows retain their own taps. */
html.mobile-hud-on body .mh-tracker-tab::after {
  content: ""; position: absolute; left: 0;
  top: min(0px, calc(100% - var(--mh-hit)));
  width: 100%; height: max(100%, var(--mh-hit));
  background: transparent; pointer-events: auto;
}
html.mobile-hud-on body .mh-tracker-tab.on {
  background: transparent;
  color: var(--mh-gold-hi); border-bottom: 2px solid var(--mh-gold);
}
html.mobile-hud-on body .mh-tracker-row u { color: var(--mh-gold); font-size: 12px; font-weight: 700; text-decoration: none; }
html.mobile-hud-on body .mh-tracker-row i { color: var(--mh-text-dim); font-size: 11px; font-style: normal; }
html.mobile-hud-on body .mh-tracker-bar { border: 1px solid var(--mh-gold-line); }

/* Target coordinates and available width are HUD px; the announcement layer
   below is counter-scaled and needs screen px. Reserve the drawer (when open) and the
   drawer token plus a 16 screen-px gap. */
html.mobile-hud-on body .mh-target-panel {
  left: calc(5px / var(--hud-scale,1) + 187px + 16px / (var(--ui-scale,1) * var(--hud-scale,1))) !important;
  top: 5px !important; padding: 0; gap: 9px;
}
html.mobile-hud-on body .mh-target-info {
  min-width: 110px;
  width: clamp(110px, calc(100vw / (var(--ui-scale,1) * var(--hud-scale,1)) - (5px / var(--hud-scale,1) + 187px + 16px / (var(--ui-scale,1) * var(--hud-scale,1))) - 55px - var(--mh-menus-right) - var(--mh-menus-w) - 16px / var(--mh-k)), 190px);
}
html.mobile-hud-on body .mh-target-face {
  /* Border-box keeps the face at the 46px the target width reserve (46 + 9 gap = 55) assumes. */
  box-sizing: border-box; border: 2px solid transparent !important;
  background: var(--mh-ink) padding-box, var(--mh-bevel) border-box;
}
html.mobile-hud-on body .mh-target-level {
  background: var(--mh-ink); border: 1px solid var(--mh-gold-line);
  color: var(--mh-text); text-shadow: var(--mh-outline); border-radius: 3px;
}
/* Target HP: the client's 132x32 dragon frame at 1.25x (slices 10 22 10 22: heads fixed,
   centre stretched). Its inner well, measured from the art, spans columns 13..119 and rows
   14..25, so the content box is exactly that well: padding 14 / 13 / 7 / 13 frame px * 1.25. */
html.mobile-hud-on body .mh-target-bar {
  position: relative;
  border: 0; border-image: url(/ui-kit/mh-dragon.png) 10 22 10 22 fill / 12.5px 27.5px stretch;
  box-sizing: content-box; height: 13.75px; padding: 17.5px 16.25px 8.75px;
  background: transparent; border-radius: 0; overflow: visible; box-shadow: none;
}
/* Track (::before): a recessed dark well. Lost HP (::after): a pale trail that follows the
   fill after a short pause; yg-mobile-hud.js feeds --mh-ghost from the fill's width. */
html.mobile-hud-on body .mh-target-bar::before,
html.mobile-hud-on body .mh-target-bar::after {
  content: ""; position: absolute; top: 17.5px; left: 16.25px; height: 13.75px;
  border-radius: 2px; pointer-events: none;
}
html.mobile-hud-on body .mh-target-bar::before {
  right: 16.25px; z-index: 0;
  background: linear-gradient(#050101, #1c0604 60%, #2a0a06);
  box-shadow: inset 0 1px 2px #000, inset 0 -1px #fbe7a11f;
}
html.mobile-hud-on body .mh-target-bar::after {
  z-index: 1; width: calc((100% - 32.5px) * var(--mh-ghost, 0));
  background: linear-gradient(#d98c45, #8f4a1a); opacity: .9;
  transition: width 450ms ease-in 300ms;
}
html.mobile-hud-on body .mh-target-bar i {
  position: relative; z-index: 2; height: 13.75px; border-radius: 2px;
  background: linear-gradient(#ff9a80, #e2412f 30%, #b5170e 70%, #6f0904) !important;
  box-shadow: inset 0 1px #ffffff66, inset 0 -2px #0000004d !important;
  transition: width 150ms ease-out;
}
html.mobile-hud-on body .mh-target-bar :is(em, u) {
  z-index: 3; top: 17.5px; line-height: 13.75px;
  font-size: calc(10px / var(--mh-k)); font-weight: 700;
  color: var(--mh-text); text-shadow: 0 1px 1px #000, 0 -1px #0009;
}
html.mobile-hud-on body .mh-target-bar em { left: calc(16.25px + 4px); }
html.mobile-hud-on body .mh-target-bar u { right: calc(16.25px + 4px); color: var(--mh-gold-hi); }
html.mobile-hud-on body .mh-target-name { color: var(--mh-gold-hi) !important; text-shadow: var(--mh-outline); }
html.mobile-hud-on body .screen-announcement-layer { z-index: 50 !important; }
html.mobile-hud-on body .screen-announcement-rolling {
  top: calc(var(--ui-scale,1) * var(--hud-scale,1) * 66px) !important;
  left: calc(var(--ui-scale,1) * (5px + 187px * var(--hud-scale,1)) + 16px) !important;
  right: calc(var(--ui-scale,1) * var(--hud-scale,1) * (var(--mh-menus-right) + 8px)) !important;
  min-height: 22px;
  background: var(--mh-panel) !important;
  border-top: 1px solid var(--mh-gold-line); border-bottom: 1px solid var(--mh-gold-line);
}

/* Chat: one slim translucent strip; the voice mic is a small token at its left end. */
html.mobile-hud-on body #chat #chatLog { background: transparent; border: 0; border-radius: 0; box-shadow: none; }
html.mobile-hud-on body #chat #chatLog > div { background: linear-gradient(90deg, #0006, #0000); }
html.mobile-hud-on body .mchat-bar {
  margin: 7px 0; gap: calc(4px / var(--mh-k));
  padding: 0 calc(4px / var(--mh-k)) 0 calc(40px / var(--mh-k));
  background: var(--mh-strip); border-radius: 999px;
  box-shadow: inset 0 0 0 1px var(--mh-gold-faint);
}
html.mobile-hud-on body #liveVoiceChat {
  position: absolute !important; left: calc(4px / var(--mh-k)) !important; top: auto !important; right: auto !important;
  bottom: calc(7px + (30px - var(--mh-sm)) / 2) !important; margin: 0 !important; z-index: 2;
}
html.mobile-hud-on body #liveVoiceChat .voice-mic {
  width: var(--mh-sm) !important; height: var(--mh-sm) !important; min-width: 0 !important; min-height: 0 !important;
  padding: 0 !important;
}
html.mobile-hud-on body :is(.mchat-chip, .mchat-phrase, .mchat-channel, .mchat-channel-item) {
  background: transparent; color: var(--mh-text-dim);
  border: 0; border-radius: 999px; padding: 0 8px;
  font-weight: 700; text-shadow: var(--mh-outline); white-space: nowrap;
}
html.mobile-hud-on body .mchat-chip {
  box-sizing: border-box; min-width: calc(44px / var(--mh-k)); min-height: 30px; position: relative;
  font-size: var(--mh-type);
}
html.mobile-hud-on body :is(.mchat-chip.on, .mchat-send) {
  background: #d4a84a33; color: var(--mh-gold-hi);
  box-shadow: inset 0 0 0 1px var(--mh-gold-line);
}
html.mobile-hud-on body :is(.mchat-write, .mchat-icon) {
  background: transparent !important; border: 0 !important; box-shadow: none !important;
  color: var(--mh-gold-hi) !important; text-shadow: var(--mh-outline); font-weight: 700;
  min-height: 30px; padding: 0 8px; font-size: var(--mh-type); white-space: nowrap;
}
html.mobile-hud-on body #ygChatRestore {
  /* Body-unit fallback; the DOM-only timer follows the live tray when visible.
     Same layer as the HUD (41), so every game window (60 and up) covers it. */
  z-index: 41 !important;
  left: calc((0.46 * var(--mh-hudw) - min(266px, 1.08 * var(--mh-hudw) - 592px) / 2) * var(--hud-scale,1));
  bottom: calc(60px * var(--hud-scale,1)); top: auto; right: auto !important;
  min-height: calc(30px / var(--ui-scale,1)) !important;
  padding: 0 calc(14px / var(--ui-scale,1)) !important;
  font-size: calc(12px / var(--ui-scale,1)) !important;
  background: var(--mh-strip) !important; border: 0 !important; border-radius: 999px !important;
  box-shadow: inset 0 0 0 1px var(--mh-gold-line) !important;
  color: var(--mh-gold-hi) !important; text-shadow: var(--mh-outline); font-weight: 700;
}
html.mobile-hud-on body #ygChatRestore::after {
  width: max(100%, calc(44px / var(--ui-scale,1)));
  height: calc(44px / var(--ui-scale,1));
  left: 50% !important; top: 50% !important; transform: translate(-50%, -50%);
}
/* Keep the client's layout/state while the typing sheet covers the lower HUD. */
html.mobile-hud-on body .mobile-hud:has(#mobileChatSheet:not([hidden])) :is(.mh-combat, .mh-combat-hide, .mh-combat-menus,
    .mh-quick, .mh-ui-hide, .mh-chat-fold, .mh-tracker, .mh-tracker-hide, #touchJoystick, .mh-pk-nearby) {
  visibility: hidden !important;
}
html.mobile-hud-on body #mobileChatSheet .mchat-sheet-inner {
  position: relative; background: #120603f2; border-top: 1px solid var(--mh-gold);
}
html.mobile-hud-on body :is(.mchat-phrase, .mchat-send, .mchat-close, .mchat-channel,
    .mchat-channel-item, .mchat-phrase-remove, .mchat-phrase-save, .mchat-phrase-reset) {
  min-height: var(--mh-hit); min-width: var(--mh-hit);
}
html.mobile-hud-on body .mchat-close { min-width: var(--mh-hit); position: relative; }
html.mobile-hud-on body :is(.mchat-input, .mchat-phrase-input) {
  /* Include 8px padding + 2px border in the minimum 44 screen-px input hit. */
  box-sizing: content-box; height: 36px; min-height: calc(var(--mh-hit) - 10px);
  min-width: var(--mh-hit); padding: 4px 10px;
  background: var(--mh-ink); border: 1px solid var(--mh-gold-line); color: var(--mh-text);
  box-shadow: inset 0 1px 3px #000c;
}

/* Any game window or dialog (yg-mobile-hud.js sets mh-window-open) puts the whole touch
   HUD and the chat restore tab out of sight and out of reach until it closes. */
html.mobile-hud-on.mh-window-open body :is(.mobile-hud, #ygChatRestore, #touchJoystick),
html.mobile-hud-on.mh-window-open body .mobile-hud * {
  visibility: hidden !important; pointer-events: none !important;
}

/* Joystick: art only; never change the client's anchors, sizes or transforms. */
html.mobile-hud-on body #touchJoystick { transition: opacity 150ms; }
html.mobile-hud-on body #touchJoystick:not(.active) { opacity: 0; }
html.mobile-hud-on body #touchJoystick.active { opacity: 1; }
html.mobile-hud-on body #touchJoystick .touch-joystick-base {
  border: 0; box-shadow: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='47' fill='%230a0503' fill-opacity='.3' stroke='%23d4a84a' stroke-opacity='.75' stroke-width='1.5'/%3E%3Cpath d='M50 12l-4 6h8z M88 50l-6-4v8z M50 88l-4-6h8z M12 50l6-4v8z' fill='%23d4a84a' fill-opacity='.75'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
html.mobile-hud-on body #touchJoystick .touch-joystick-knob {
  border: 2px solid transparent;
  background: url(/ui-kit/mh-lacquer.png) center / cover no-repeat padding-box, var(--mh-bevel) border-box;
  box-shadow: inset 0 0 0 1px #000c, 0 2px 4px #000a;
}

/* Re-evaluate the inherited hit token here: expanded maps set their scale locally.
   A 24 screen-px bead inset 10px centres its 44px hit exactly 22px from each edge.
   All four hits stay inside their corner quadrants of the native 164x181 map. */
html.mobile-hud-on body #minimap {
  --mh-hit-mm: calc(44px / (var(--mh-k) * var(--minimap-scale, .75)));
}
html.mobile-hud-on body #minimap :is(#mmZoomIn, #mmZoomOut, #mmOpenWorldMap, #mmToggleSize) {
  box-sizing: border-box; z-index: 6;
  width: calc(24px / (var(--mh-k) * var(--minimap-scale, .75)));
  height: calc(24px / (var(--mh-k) * var(--minimap-scale, .75)));
  border: 1px solid var(--mh-gold-line); border-radius: 50%; padding: 0;
  background: url(/ui-kit/mh-lacquer.png) center / cover no-repeat;
  box-shadow: 0 1px 2px #000a;
  color: var(--mh-text); font: 700 18px/1 Tahoma, sans-serif; text-shadow: var(--mh-outline);
}
html.mobile-hud-on body #minimap :is(#mmZoomIn, #mmZoomOut, #mmOpenWorldMap, #mmToggleSize)::after {
  width: max(100%, var(--mh-hit-mm)); height: max(100%, var(--mh-hit-mm));
}
html.mobile-hud-on body #minimap :is(#mmFrame, #mmName, #mmCoord) { z-index: 2; pointer-events: none; }
html.mobile-hud-on body #minimap :is(#mmZoomIn, #mmZoomOut)::before { content: "+"; }
html.mobile-hud-on body #minimap #mmZoomOut::before { content: "−"; }
html.mobile-hud-on body #minimap #mmOpenWorldMap::before { content: "◇"; }
html.mobile-hud-on body #minimap #mmToggleSize::before { content: "↗"; }
html.mobile-hud-on body #minimap #mmZoomIn {
  top: auto; right: auto;
  bottom: calc(10px / (var(--mh-k) * var(--minimap-scale, .75)));
  left: calc(10px / (var(--mh-k) * var(--minimap-scale, .75)));
}
html.mobile-hud-on body #minimap #mmZoomOut {
  top: auto; left: auto;
  bottom: calc(10px / (var(--mh-k) * var(--minimap-scale, .75)));
  right: calc(10px / (var(--mh-k) * var(--minimap-scale, .75)));
}
html.mobile-hud-on body #minimap #mmOpenWorldMap {
  right: auto;
  top: calc(10px / (var(--mh-k) * var(--minimap-scale, .75)));
  left: calc(10px / (var(--mh-k) * var(--minimap-scale, .75)));
}
html.mobile-hud-on body #minimap #mmToggleSize {
  left: auto;
  top: calc(10px / (var(--mh-k) * var(--minimap-scale, .75)));
  right: calc(10px / (var(--mh-k) * var(--minimap-scale, .75)));
}
html.mobile-hud-on body #minimap #mmCoord {
  top: auto; bottom: 18px; left: 50%; transform: translateX(-50%);
  color: var(--mh-text); text-shadow: var(--mh-outline); white-space: nowrap; pointer-events: none;
}

/* Disabled state wins over selected/pressed controls. */
html.mobile-hud-on body :is(.mh-btn:not(.swap-skill), .mh-btn.swap-skill, .mh-btn.mh-pk.on:not(.swap-skill), .mh-combat-hide,
    .mh-party-finder, .mh-menu-hide, .mh-tracker-hide, .mh-chat-fold, .mh-ui-hide, .mh-pet-toggle,
    :where(#viewModeButton), :where(#liveVoiceChat) .voice-mic, .mchat-icon, .mchat-close):is([disabled], [aria-disabled="true"], .disabled),
html.mobile-hud-on body #viewModeButton:is([disabled], [aria-disabled="true"], .disabled),
html.mobile-hud-on body #liveVoiceChat .voice-mic:is([disabled], [aria-disabled="true"], .disabled) {
  filter: grayscale(.85) brightness(.55) !important;
}
html.mobile-hud-on body :is(.mh-btn, .mh-menu, .mh-combat-hide, .mh-party-finder,
    .mh-menu-hide, .mh-tracker-hide, .mh-chat-fold, .mh-ui-hide, .mh-pet-toggle, #viewModeButton,
    #liveVoiceChat .voice-mic, .mchat-icon, .mchat-chip, .mchat-write,
    #mobileChatSheet button, #mobileChatSheet input, .skill-quickbar-slot,
    #ygChatRestore, #minimap button):focus-visible { outline: 2px solid var(--mh-gold-hi); outline-offset: 2px; }

@media (orientation: portrait) {
  html.mobile-hud-on body .mh-target-info { width: 190px; }
}
@media (orientation: landscape) and (width <= 819px) {
  html.mobile-hud-on { --quick-half: calc(176px / var(--mh-k) + 8px) !important; --mh-dock-right: 143px; }
  /* Anchor the tray 8 HUD px left of the combat ring (right 56 + 200 - 28 auto inset). */
  html.mobile-hud-on body .mh-quick { left: auto !important; right: 236px !important; transform: none !important; }
  /* The chat strip shares the tray's left edge (tray: right 236, 8 x 40 + 7 x 4 screen px
     + 2 x 6 HUD px) and stops 8 screen px before the meditate medallion (right 224), so
     four 44 px channel chips, the fold chip and the write chip fit on one line. */
  html.mobile-hud-on body #chat {
    left: calc(100% - 248px - 348px / var(--mh-k)) !important;
    right: calc(224px + 8px / var(--mh-k)) !important;
  }
}
html.mobile-hud-on.mobile-hud-compact { --quick-half: calc(176px / var(--mh-k) + 8px) !important; }
@media (prefers-reduced-motion: reduce) {
  html.mobile-hud-on body :is(.mh-btn, .mh-menu, .mh-combat-hide, .mh-party-finder,
      .mh-menu-hide, .mh-tracker-hide, .mh-chat-fold, .mh-ui-hide, .mh-pet-toggle, #viewModeButton,
      #liveVoiceChat .voice-mic, .mchat-icon, .mchat-close, .skill-quickbar-slot,
      .mh-target-bar i, .mh-target-bar::after, #touchJoystick) { transition: none !important; animation: none !important; }
}

/* The only desktop change. This child of #statusHud scales with its parent. */
html:not(.mobile-hud-on):not(.touch-hud) #desktopMainUiIcons { left: 203px !important; }