/* Physical-sized mobile chips. Expanded panels retain the native game controls. */
.mcp-map-chip, .mcp-quest-chip { display: none; }
body.touch.mobile-compact-ui {
  --mcp-surface: rgba(12, 19, 33, .92);
  --mcp-edge: rgba(223, 182, 91, .7);
  --mcp-ink: #fff0c9;
}
body.touch.mobile-compact-ui #questTracker { display: none !important; }
body.touch.mobile-compact-ui .mcp-quest-chip {
  position: absolute; display: flex; align-items: center; gap: 6px;
  top: calc(var(--mcu-quest-top, 58px) * var(--mcu-inv, var(--ui-inv, 1)));
  left: calc(var(--mcu-quest-left, 144px) * var(--mcu-inv, var(--ui-inv, 1))); right: auto; bottom: auto;
  width: auto; max-width: 128px; height: 44px; box-sizing: border-box;
  padding: 0 9px; border: 1px solid var(--mcp-edge); border-radius: 8px;
  background: var(--mcp-surface); color: var(--mcp-ink); font: 700 12px/1.2 var(--font-ui, "Noto Sans Thai", sans-serif);
  transform: scale(var(--mcu-inv, var(--ui-inv, 1))); transform-origin: top left;
  translate: var(--safe-l, 0px) 0; pointer-events: auto; z-index: 8;
}
body.touch.mobile-compact-ui .mcp-quest-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.touch.mobile-compact-ui .mcp-quest-chip b { color: #ffdc77; font: 800 18px/1 sans-serif; }
body.touch.mobile-compact-ui .mcp-quest-chip.hidden,
body.touch.mobile-compact-ui.hud-right-off .mcp-quest-chip { display: none !important; }

body.touch.mobile-compact-ui .mm-dock {
  top: calc(var(--mcu-map-top, 54px) * var(--mcu-inv, var(--ui-inv, 1))) !important;
  right: calc(8px * var(--mcu-inv, var(--ui-inv, 1))) !important;
  display: block; gap: 0; width: auto; max-width: none;
  transform: scale(var(--mcu-inv, var(--ui-inv, 1))) !important; transform-origin: top right;
  --ui-mm-base: 1; z-index: 10;
}
body.touch.mobile-compact-ui .mm-dock .mini-map {
  box-sizing: border-box; width: auto; max-width: none; padding: 0;
  border: 0; border-image: none; box-shadow: none; border-radius: 0; background: none;
}
body.touch.mobile-compact-ui .mini-map:not(.mcp-map-open) .mm-title,
body.touch.mobile-compact-ui .mini-map:not(.mcp-map-open) .mm-coords,
body.touch.mobile-compact-ui .mini-map:not(.mcp-map-open) canvas,
body.touch.mobile-compact-ui .mini-map:not(.mcp-map-open) .mm-foot,
body.touch.mobile-compact-ui .mini-map .mm-toggle,
body.touch.mobile-compact-ui:not(.mcp-map-open) .mm-dock .rail.side { display: none !important; }
body.touch.mobile-compact-ui .mm-dock .mm-head {
  display: flex; align-items: center; justify-content: flex-end; gap: 4px;
  padding: 0; margin: 0; min-height: 44px;
}
body.touch.mobile-compact-ui .mm-head .mcp-map-chip,
body.touch.mobile-compact-ui .mm-head .ch-chip {
  position: static; display: inline-flex; justify-content: center; align-items: center;
  flex: 0 0 44px; width: 44px; min-width: 44px; height: 44px; min-height: 44px;
  box-sizing: border-box; margin: 0; padding: 0; border: 1px solid var(--mcp-edge);
  background: var(--mcp-surface); color: var(--mcp-ink); border-radius: 8px;
  font: 700 11px/1.2 "Noto Sans Thai", sans-serif;
}
body.touch.mobile-compact-ui .mm-head .mcp-map-chip { font-size: 23px; order: 10; }
body.touch.mobile-compact-ui .mcp-map-chip[aria-expanded="false"] { font-size: 0; }
body.touch.mobile-compact-ui .mcp-map-chip[aria-expanded="false"]::after {
  content: ''; width: 24px; height: 24px;
  background: url('../assets/ui/gico-map.png') center / contain no-repeat;
}
body.touch.mobile-compact-ui .mm-head .ch-chip.hidden { display: none !important; }
body.touch.mobile-compact-ui .mm-head .pk-chip { margin: 0; font-size: 10px; }
body.touch.mobile-compact-ui .mini-map .ch-menu {
  top: calc(100% + 4px); right: 0; min-width: 192px;
  max-height: calc(100dvh - 100px); font-size: 12px; padding: 4px;
  --ui-channel-target: 44px; --ui-channel-font: 12px; --ui-channel-min-w: 192px;
}
body.touch.mobile-compact-ui .mini-map .ch-menu button {
  min-height: 44px; font-size: 12px; padding: 6px 8px;
}
body.touch.mobile-compact-ui .mini-map .ch-menu button small,
body.touch.mobile-compact-ui .mini-map .ch-menu-head { font-size: 12px; }
body.touch.mobile-compact-ui .mm-dock .mini-map.mcp-map-open {
  width: 232px; max-width: calc(100vw - 72px); padding: 4px 6px 6px;
  border: 1px solid var(--mcp-edge); border-radius: 9px;
  background: var(--mcp-surface); box-shadow: 0 5px 20px #0008;
  max-height: calc(100dvh - 56px); overflow-y: auto; overscroll-behavior: contain;
}
body.touch.mobile-compact-ui .mini-map.mcp-map-open .mm-head { flex-wrap: wrap; gap: 3px; }
body.touch.mobile-compact-ui .mini-map.mcp-map-open .mm-title {
  display: block; flex: 1 1 100px; max-width: 126px; font-size: 11px; margin: 0;
}
body.touch.mobile-compact-ui .mini-map.mcp-map-open .mm-coords {
  display: block; position: absolute; right: 10px; bottom: 55px;
  margin: 0; padding: 2px 4px; border-radius: 4px; font-size: 10px;
  background: var(--mcp-surface); pointer-events: none;
}
body.touch.mobile-compact-ui .mini-map.mcp-map-open canvas {
  display: block; width: auto !important; height: auto !important; margin: 4px auto;
  max-width: 218px !important; max-height: min(110px, calc(100dvh - 168px)) !important;
}
body.touch.mobile-compact-ui .mini-map.mcp-map-open .mm-foot { display: flex; gap: 3px; margin-top: 3px; }
body.touch.mobile-compact-ui .mini-map.mcp-map-open .mm-world,
body.touch.mobile-compact-ui .mini-map.mcp-map-open .mm-big-btn {
  height: 44px; min-height: 44px; min-width: 44px; width: auto; padding: 0 5px;
  font-size: 11px; line-height: 1.25; box-sizing: border-box;
}
body.touch.mobile-compact-ui .mini-map.mcp-map-open .mm-world-ico { width: 16px; height: 16px; }
body.touch.mobile-compact-ui .mini-map.mcp-map-open.mm-big { width: 304px; }
body.touch.mobile-compact-ui .mini-map.mcp-map-open.mm-big canvas {
  max-width: 290px !important; max-height: min(180px, calc(100dvh - 168px)) !important;
}
body.touch.mobile-compact-ui.mcp-map-open .mm-dock .rail.side {
  position: absolute; right: calc(100% + 4px); top: 0; display: flex;
  width: 44px; gap: 3px; padding: 0;
}
body.touch.mobile-compact-ui .mm-dock .rail.side .round {
  box-sizing: border-box; width: 44px; height: 44px; min-width: 44px; min-height: 44px;
  font-size: 11px; transform: none;
}

/* A bag shortcut and the original disclosure button replace the permanent rail. */
body.touch.mobile-compact-ui .rail.left,
body.touch.mobile-compact-ui.ui-tight-hud .rail.left {
  position: absolute; top: calc(var(--mcu-tools-top, 104px) * var(--mcu-inv, var(--ui-inv, 1))) !important;
  left: calc(8px * var(--mcu-inv, var(--ui-inv, 1))) !important; right: auto; bottom: auto;
  transform: scale(var(--mcu-inv, var(--ui-inv, 1))) !important; transform-origin: top left;
  display: flex; flex-flow: row wrap !important; gap: 4px; padding: 0;
  width: 92px !important; max-width: none; min-width: 0;
  max-height: none; border: 0; border-image: none; background: none; box-shadow: none; z-index: 11;
}
body.touch.mobile-compact-ui .rail.left .round,
body.touch.mobile-compact-ui .rail.left .rail-more {
  box-sizing: border-box; flex: 0 0 44px; width: 44px; height: 44px; min-height: 44px; min-width: 44px;
  padding: 2px; margin: 0; align-self: auto; font-size: 12px;
}
body.touch.mobile-compact-ui .rail.left .round .ico {
  width: 22px; height: 22px; background-size: contain;
}
body.touch.mobile-compact-ui .rail.left .round .rail-label { font-size: 9px; line-height: 1.1; }
body.touch.mobile-compact-ui .rail.left .round[data-key]::before,
body.touch.mobile-compact-ui .rail.left #btnRail,
body.touch.mobile-compact-ui .rail.left .rail-break { display: none !important; }
body.touch.mobile-compact-ui .rail.left.less > button:not(.mcp-bag):not(.rail-more) { display: none !important; }
body.touch.mobile-compact-ui .rail.left.less .mcp-bag,
body.touch.mobile-compact-ui .rail.left.less .rail-more { display: flex !important; }
body.touch.mobile-compact-ui .rail.left .rail-more {
  display: flex; align-items: center; justify-content: center; font-size: 0;
  border: 1px solid var(--mcp-edge); border-radius: 8px;
  color: var(--mcp-ink); background: var(--mcp-surface); order: 0 !important;
}
body.touch.mobile-compact-ui .rail.left .rail-more::after { content: '☰'; position: static; font: 700 19px/1 sans-serif; }
body.touch.mobile-compact-ui .rail.left:not(.less):not(.folded) {
  width: 244px !important; max-width: calc(100vw - 24px);
  max-height: calc(100dvh - var(--mcu-tools-top, 104px) - 12px);
  overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y;
  padding: 6px; background: var(--mcp-surface); border: 1px solid var(--mcp-edge);
  border-radius: 9px; pointer-events: auto;
}
body.touch.mobile-compact-ui .rail.left:not(.less) .rail-extra { display: flex !important; }
body.touch.mobile-compact-ui .rail.left:not(.less) .rail-more::after { content: '×'; }
body.touch.mobile-compact-ui .rail.left .round:focus-visible,
body.touch.mobile-compact-ui .mcp-map-chip:focus-visible,
body.touch.mobile-compact-ui .mcp-quest-chip:focus-visible { outline: 2px solid #ffe293; outline-offset: 1px; }