/* TVDB MOBILE HUD R1 — giao diện điện thoại.
   Chỉ trình bày: không tạo lại nút, không đổi listener. Các nút gốc giữ nguyên chỗ trong DOM
   (để HudLayout/Runtime vẫn quản lý), ở đây chỉ đặt lại vị trí bằng CSS.
   Bật khi <html> có class .tvdb-mhud-r1 (do script đầu trang quyết định).
   Tắt: ?mhud=0 hoặc Menu → "Giao diện cũ". */

html.tvdb-mhud-r1:not(#mh-z) {
  --mh-sat: env(safe-area-inset-top, 0px);
  --mh-sab: env(safe-area-inset-bottom, 0px);
  --mh-sal: env(safe-area-inset-left, 0px);
  --mh-sar: env(safe-area-inset-right, 0px);
  --mh-gap: 10px;
  --mh-top: calc(var(--mh-sat) + 8px);
  --mh-dock-h: 76px;
  --mh-dock-bottom: calc(var(--mh-sab) + 8px);
  --mh-above-dock: calc(var(--mh-dock-bottom) + var(--mh-dock-h) + 10px);
  --mh-rail-top: calc(var(--mh-top) + 66px);
  --mh-rail-step: 62px;
  --mh-glass: rgba(255, 251, 240, .93);
  --mh-glass-strong: rgba(255, 252, 244, .97);
  --mh-line: rgba(122, 92, 46, .22);
  --mh-ink: #24412f;
  --mh-ink-soft: #5d6b5c;
  --mh-green: #2f6b45;
  --mh-green-2: #3f8a59;
  --mh-gold: #b07a1f;
  --mh-shadow: 0 6px 18px rgba(20, 30, 20, .22), 0 1px 0 rgba(255, 255, 255, .7) inset;
  --mh-radius: 16px;
}

/* ---------- 1. Khu vườn tràn toàn màn hình ---------- */
html.tvdb-mhud-r1:not(#mh-z) body #game {
  inset: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  height: auto !important;
}

/* Bỏ các khung bao để từng nút có thể đặt cố định theo màn hình. */
html.tvdb-mhud-r1:not(#mh-z) #tvdb-hud-layout-r1,
html.tvdb-mhud-r1:not(#mh-z) #tvdb-hud-layout-r1 > .topbar,
html.tvdb-mhud-r1:not(#mh-z) #tvdb-hud-layout-r1 .top-actions,
html.tvdb-mhud-r1:not(#mh-z) #tvdb-hud-layout-r1 .tvdb-hud-meta-r1,
html.tvdb-mhud-r1:not(#mh-z) #aquaculture-station-hud,
html.tvdb-mhud-r1:not(#mh-z) #aquaculture-station-hud .livestock-nav,
html.tvdb-mhud-r1:not(#mh-z) #ui > .scene-actions,
html.tvdb-mhud-r1:not(#mh-z) #ui .scene-actions,
html.tvdb-mhud-r1:not(#mh-z) #tvdb-hud-layout-r1 .mobile-aux-r33,
html.tvdb-mhud-r1:not(#mh-z) #ui > .controls-area {
  display: contents !important;
}
html.tvdb-mhud-r1:not(#mh-z) #ui { transform: none !important; filter: none !important; }
html.tvdb-mhud-r1:not(#mh-z) #tvdb-hud-layout-r1 .topbar .brand,
html.tvdb-mhud-r1:not(#mh-z) #tvdb-hud-layout-r1 .topbar > :not(.top-actions) { display: none !important; }

/* Nút chung của HUD mới: thẻ biểu tượng + nhãn nhỏ */
html.tvdb-mhud-r1:not(#mh-z) body .mh-tile:not(#mh-n1):not(#mh-n2) {
  position: fixed !important;
  z-index: 1230 !important;
  width: 52px !important;
  height: 56px !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 4px 2px 3px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 1px !important;
  border-radius: 15px !important;
  border: 1px solid var(--mh-line) !important;
  background: var(--mh-glass) !important;
  box-shadow: var(--mh-shadow) !important;
  color: var(--mh-ink) !important;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: transform .12s ease, background .2s ease, opacity .2s ease !important;
  overflow: visible !important;
}
html.tvdb-mhud-r1:not(#mh-z) body .mh-tile:not(#mh-n1):not(#mh-n2):active { transform: scale(.93) !important; }
html.tvdb-mhud-r1:not(#mh-z) body .mh-tile:not(#mh-n1):not(#mh-n2) > img,
html.tvdb-mhud-r1:not(#mh-z) body .mh-tile:not(#mh-n1):not(#mh-n2) > .pet-paw,
html.tvdb-mhud-r1:not(#mh-z) body .mh-tile:not(#mh-n1):not(#mh-n2) > .pet-paw > img {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  margin: 0 !important;
  object-fit: contain !important;
  flex: none !important;
  position: static !important;
  transform: none !important;
}
html.tvdb-mhud-r1:not(#mh-z) body .mh-tile:not(#mh-n1):not(#mh-n2)::after {
  content: attr(data-mh-label);
  display: block;
  font: 700 10px/1.1 inherit;
  font-family: inherit;
  font-size: 10px;
  font-weight: 750;
  letter-spacing: -.1px;
  color: var(--mh-ink);
  white-space: nowrap;
  max-width: 58px;
  overflow: hidden;
  text-overflow: ellipsis;
  position: static;
  pointer-events: none;
}
/* chặn chữ gốc/hiệu ứng trang trí cũ chiếm chỗ */
html.tvdb-mhud-r1:not(#mh-z) body .mh-tile:not(#mh-n1):not(#mh-n2) > :not(img):not(.pet-paw):not(.mh-badge):not(.mh-burger) { display: none !important; }
html.tvdb-mhud-r1:not(#mh-z) body .mh-tile:not(#mh-n1):not(#mh-n2)::before { display: none !important; }

/* ---------- 2. Thanh trên: Cấp + Vàng | Tiệm hạt + Menu ---------- */
html.tvdb-mhud-r1:not(#mh-z) #level-open {
  position: fixed !important;
  z-index: 1230 !important;
  top: var(--mh-top) !important;
  left: calc(var(--mh-sal) + var(--mh-gap)) !important;
  width: auto !important;
  min-width: 92px !important;
  max-width: 136px !important;
  height: 52px !important;
  margin: 0 !important;
  padding: 6px 10px 7px !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  align-content: center !important;
  gap: 1px !important;
  border-radius: var(--mh-radius) !important;
  border: 1px solid var(--mh-line) !important;
  background: var(--mh-glass) !important;
  box-shadow: var(--mh-shadow) !important;
  text-align: left !important;
}
html.tvdb-mhud-r1:not(#mh-z) #level-open #player-level {
  font-size: 15px !important; line-height: 1.05 !important; color: var(--mh-green) !important; font-weight: 850 !important;
}
html.tvdb-mhud-r1:not(#mh-z) #level-open #player-xp {
  font-size: 10px !important; max-width: 116px !important; letter-spacing: -.2px !important; line-height: 1.1 !important; color: var(--mh-ink-soft) !important; font-weight: 650 !important;
  white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important;
}
html.tvdb-mhud-r1:not(#mh-z) #level-open #player-xp-bar {
  -webkit-appearance: none; appearance: none;
  width: 100% !important; height: 6px !important; margin-top: 3px !important;
  border: 0 !important; border-radius: 99px !important; overflow: hidden !important;
  background: rgba(47, 107, 69, .16) !important;
}
html.tvdb-mhud-r1:not(#mh-z) #level-open #player-xp-bar::-webkit-progress-bar { background: rgba(47, 107, 69, .16); border-radius: 99px; }
html.tvdb-mhud-r1:not(#mh-z) #level-open #player-xp-bar::-webkit-progress-value { background: linear-gradient(90deg, #6fbf73, #3f8a59); border-radius: 99px; }
html.tvdb-mhud-r1:not(#mh-z) #level-open #player-xp-bar::-moz-progress-bar { background: linear-gradient(90deg, #6fbf73, #3f8a59); border-radius: 99px; }

html.tvdb-mhud-r1:not(#mh-z) #tvdb-hud-layout-r1 .wallet {
  position: fixed !important;
  z-index: 1229 !important;
  top: var(--mh-top) !important;
  left: calc(var(--mh-sal) + var(--mh-gap) + var(--mh-level-w, 92px) + var(--mh-pill-gap, 8px)) !important;
  height: 52px !important;
  min-width: 86px !important;
  width: auto !important;
  max-width: calc(100vw - var(--mh-level-w, 92px) - var(--mh-pill-gap, 8px) - 2 * var(--mh-gap) - 128px) !important;
  margin: 0 !important;
  padding: 0 14px 0 10px !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  border-radius: var(--mh-radius) !important;
  border: 1px solid var(--mh-line) !important;
  background: var(--mh-glass) !important;
  box-shadow: var(--mh-shadow) !important;
}
html.tvdb-mhud-r1:not(#mh-z) #tvdb-hud-layout-r1 .wallet img { width: 26px !important; height: 26px !important; flex: none !important; }
html.tvdb-mhud-r1:not(#mh-z) #coins {
  font-size: 19px !important; font-weight: 850 !important; color: #7a4f0e !important; letter-spacing: -.3px !important;
  font-variant-numeric: tabular-nums;
  white-space: nowrap !important;
}
html.tvdb-mhud-r1:not(#mh-z) #coin-gain { position: absolute !important; top: 54px !important; left: 30px !important; }

html.tvdb-mhud-r1:not(#mh-z) body #shop-open.mh-tile:not(#mh-n1):not(#mh-n2) {
  top: var(--mh-top) !important;
  right: calc(var(--mh-sar) + var(--mh-gap) + 60px) !important;
  background: linear-gradient(180deg, #fff6dc, #ffe9b4) !important;
  border-color: rgba(176, 122, 31, .45) !important;
}
html.tvdb-mhud-r1:not(#mh-z) body #mh-menu-button.mh-tile:not(#mh-n1):not(#mh-n2) {
  top: var(--mh-top) !important;
  right: calc(var(--mh-sar) + var(--mh-gap)) !important;
  font: inherit;
  cursor: pointer;
}
#mh-menu-button .mh-burger { width: 32px; height: 32px; display: grid; place-items: center; }
#mh-menu-button .mh-burger svg { width: 24px; height: 24px; stroke: var(--mh-green); }
.mh-badge {
  position: absolute; top: -4px; right: -4px; min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: 99px; background: #d9472b; color: #fff; font: 800 10px/16px system-ui, sans-serif; text-align: center;
  box-shadow: 0 0 0 2px #fff;
}
.mh-badge[hidden] { display: none !important; }

/* Ẩn khỏi thanh trên — có trong Menu */
html.tvdb-mhud-r1:not(#mh-z) #tvdb-profile-button,
html.tvdb-mhud-r1:not(#mh-z) #social-open,
html.tvdb-mhud-r1:not(#mh-z) #night-world-toggle-r7,
html.tvdb-mhud-r1:not(#mh-z) #sound,
html.tvdb-mhud-r1:not(#mh-z) #help-open,
html.tvdb-mhud-r1:not(#mh-z) #motion-toggle,
html.tvdb-mhud-r1:not(#mh-z) #tvdb-game-version {
  position: fixed !important;
  left: -9999px !important;
  top: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* ---------- 3. Gợi ý vụ mùa: gọn 1 thẻ dưới thanh trên ---------- */
html.tvdb-mhud-r1:not(#mh-z) #ui .guide:not([hidden]) {
  position: fixed !important;
  z-index: 1225 !important;
  top: calc(var(--mh-top) + 60px) !important;
  left: calc(var(--mh-sal) + var(--mh-gap)) !important;
  right: calc(var(--mh-sar) + var(--mh-gap) + 62px) !important;
  width: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 7px 42px 7px 8px !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  border-radius: 14px !important;
  border: 1px solid var(--mh-line) !important;
  background: var(--mh-glass) !important;
  box-shadow: var(--mh-shadow) !important;
}
html.tvdb-mhud-r1:not(#mh-z) #ui .guide .guide-icon,
html.tvdb-mhud-r1:not(#mh-z) #ui .guide .guide-icon img { width: 28px !important; height: 28px !important; min-width: 28px !important; flex: none !important; }
html.tvdb-mhud-r1:not(#mh-z) #ui .guide .farm-hint-copy-r4 { min-width: 0 !important; gap: 0 !important; }
html.tvdb-mhud-r1:not(#mh-z) #ui .guide #guide-step { font-size: 10px !important; line-height: 1.2 !important; letter-spacing: .2px !important; }
html.tvdb-mhud-r1:not(#mh-z) #ui .guide #hint { font-size: 12.5px !important; line-height: 1.3 !important; margin: 0 !important; font-weight: 650 !important; }
html.tvdb-mhud-r1:not(#mh-z) #ui .guide #guide-dismiss {
  position: absolute !important; top: 50% !important; right: 2px !important; transform: translateY(-50%) !important;
  width: 40px !important; height: 44px !important; margin: 0 !important;
}

/* Robot đang thuê (nếu có) — dải nhỏ dưới gợi ý, không che vườn */
html.tvdb-mhud-r1:not(#mh-z) #aquaculture-station-hud .tvdb-hud-robots-r1:not([hidden]) {
  position: fixed !important;
  z-index: 1224 !important;
  left: calc(var(--mh-sal) + var(--mh-gap)) !important;
  top: var(--mh-robots-top, calc(var(--mh-top) + 60px)) !important;
  max-width: calc(100vw - 2 * var(--mh-gap) - 70px) !important;
  display: flex !important;
  gap: 6px !important;
  overflow-x: auto !important;
  scrollbar-width: none;
  transform: scale(.88);
  transform-origin: left top;
}

/* ---------- 4. Thanh trạm bên phải (dọc, có nhãn) ---------- */
html.tvdb-mhud-r1:not(#mh-z) body .mh-rail:not(#mh-n1):not(#mh-n2) {
  top: calc(var(--mh-rail-top) + var(--mh-i, 0) * var(--mh-rail-step)) !important;
  right: calc(var(--mh-sar) + var(--mh-gap)) !important;
  left: auto !important;
  bottom: auto !important;
}
html.tvdb-mhud-r1:not(#mh-z) body .mh-rail:not(#mh-n1):not(#mh-n2).mh-off { display: none !important; }

/* ---------- 5. Nút về giữa vườn + trạng thái lưu ---------- */
html.tvdb-mhud-r1:not(#mh-z) body #recenter.mh-tile:not(#mh-n1):not(#mh-n2) {
  right: calc(var(--mh-sar) + var(--mh-gap)) !important;
  bottom: var(--mh-above-dock) !important;
  top: auto !important;
  left: auto !important;
}
html.tvdb-mhud-r1:not(#mh-z) #save-status {
  position: fixed !important;
  z-index: 1226 !important;
  left: 50% !important;
  bottom: var(--mh-above-dock) !important;
  top: auto !important;
  transform: translate(-50%, 8px) !important;
  margin: 0 !important;
  max-width: calc(100vw - 150px) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  font-size: 12px !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity .25s ease, transform .25s ease !important;
}
html.tvdb-mhud-r1:not(#mh-z) #save-status.mh-show {
  opacity: 1 !important;
  transform: translate(-50%, 0) !important;
}
html.tvdb-mhud-r1:not(#mh-z) #toast {
  top: calc(var(--mh-top) + 64px) !important;
}

/* ---------- 6. Cần điều khiển ---------- */
html.tvdb-mhud-r1:not(#mh-z) #ui .joystick-area {
  position: fixed !important;
  z-index: 1220 !important;
  left: calc(var(--mh-sal) + 14px) !important;
  bottom: var(--mh-above-dock) !important;
  top: auto !important;
  width: 104px !important;
  height: 104px !important;
  margin: 0 !important;
  display: block !important;
}
html.tvdb-mhud-r1:not(#mh-z) #joystick {
  width: 104px !important;
  height: 104px !important;
  border-radius: 50% !important;
  background: radial-gradient(circle, rgba(255, 255, 255, .20) 0 55%, rgba(255, 255, 255, .34) 56% 100%) !important;
  border: 2px solid rgba(255, 255, 255, .55) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .18) !important;
}
html.tvdb-mhud-r1:not(#mh-z) #joystick .stick-cross { opacity: .35 !important; }
html.tvdb-mhud-r1:not(#mh-z) #joystick .stick-knob {
  width: 44px !important; height: 44px !important;
  background: radial-gradient(circle at 35% 30%, #fffdf6, #efe4c8) !important;
  border: 1px solid rgba(122, 92, 46, .35) !important;
  box-shadow: 0 3px 8px rgba(0, 0, 0, .25) !important;
}

/* ---------- 7. Thanh công cụ dưới ---------- */
html.tvdb-mhud-r1:not(#mh-z) #ui .toolbelt {
  position: fixed !important;
  z-index: 1228 !important;
  left: calc(var(--mh-sal) + 8px) !important;
  right: calc(var(--mh-sar) + 8px) !important;
  bottom: var(--mh-dock-bottom) !important;
  top: auto !important;
  width: auto !important;
  height: var(--mh-dock-h) !important;
  margin: 0 auto !important;
  max-width: 640px !important;
  padding: 6px !important;
  display: flex !important;
  align-items: stretch !important;
  gap: 4px !important;
  border-radius: 22px !important;
  border: 1px solid var(--mh-line) !important;
  background: var(--mh-glass-strong) !important;
  box-shadow: 0 10px 28px rgba(20, 30, 20, .28), 0 1px 0 rgba(255, 255, 255, .8) inset !important;
  transform: none !important;
}
html.tvdb-mhud-r1:not(#mh-z) #ui .toolbelt > .tool-family-r21 {
  flex: 0 0 60px !important;
  width: 60px !important;
  height: 100% !important;
  margin: 0 !important;
  position: relative !important;
}
/* cuốc ở trái; tưới + thu hoạch dồn phải, hạt giống ở giữa */
html.tvdb-mhud-r1:not(#mh-z) #ui .toolbelt > .seed-strip-wrap {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  width: auto !important;
  height: 100% !important;
  margin: 0 2px !important;
  padding: 0 2px !important;
  border: 0 !important;
  border-radius: 16px !important;
  background: rgba(122, 92, 46, .07) !important;
  box-shadow: inset 0 1px 3px rgba(80, 60, 30, .10) !important;
  position: relative !important;
}
html.tvdb-mhud-r1:not(#mh-z) #seed-strip {
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  gap: 4px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  mask-image: linear-gradient(90deg, #000 calc(100% - 14px), transparent);
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 14px), transparent);
}
html.tvdb-mhud-r1:not(#mh-z) #seed-strip::-webkit-scrollbar { display: none; }
html.tvdb-mhud-r1:not(#mh-z) #ui .toolbelt .tool {
  width: 100% !important;
  min-width: 0 !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 4px 2px 5px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 2px !important;
  border-radius: 16px !important;
  border: 1px solid transparent !important;
  background: transparent !important;
  box-shadow: none !important;
  transition: background .15s ease, transform .12s ease !important;
  -webkit-tap-highlight-color: transparent;
}
html.tvdb-mhud-r1:not(#mh-z) #seed-strip .tool { flex: 0 0 58px !important; width: 58px !important; scroll-snap-align: start; position: relative !important; }
html.tvdb-mhud-r1:not(#mh-z) #ui .toolbelt .tool:active { transform: scale(.94) !important; }
html.tvdb-mhud-r1:not(#mh-z) #ui .toolbelt .tool .tool-icon,
html.tvdb-mhud-r1:not(#mh-z) #ui .toolbelt .tool .tool-icon img {
  width: 34px !important; height: 34px !important; min-height: 0 !important; margin: 0 !important; flex: none !important;
}
html.tvdb-mhud-r1:not(#mh-z) #ui .toolbelt .tool .tool-name {
  display: block !important;
  max-width: 100% !important;
  font-size: 11px !important;
  line-height: 1.15 !important;
  font-weight: 750 !important;
  color: var(--mh-ink) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  position: static !important;
  transform: none !important;
}
html.tvdb-mhud-r1:not(#mh-z) #ui .toolbelt .tool.active,
html.tvdb-mhud-r1:not(#mh-z) #ui .toolbelt .tool[aria-pressed="true"],
html.tvdb-mhud-r1:not(#mh-z) #ui .toolbelt .tool.selected {
  background: linear-gradient(180deg, #3f8a59, #2f6b45) !important;
  border-color: rgba(255, 255, 255, .5) !important;
  box-shadow: 0 4px 10px rgba(47, 107, 69, .35) !important;
}
html.tvdb-mhud-r1:not(#mh-z) #ui .toolbelt .tool.active .tool-name,
html.tvdb-mhud-r1:not(#mh-z) #ui .toolbelt .tool[aria-pressed="true"] .tool-name,
html.tvdb-mhud-r1:not(#mh-z) #ui .toolbelt .tool.selected .tool-name { color: #fff !important; }
html.tvdb-mhud-r1:not(#mh-z) #ui .toolbelt .tool::after,
html.tvdb-mhud-r1:not(#mh-z) #ui .toolbelt .tool::before { display: none !important; }
html.tvdb-mhud-r1:not(#mh-z) #seed-strip .seed-count {
  position: absolute !important;
  top: 2px !important; right: 4px !important; left: auto !important;
  min-width: 18px !important; height: 18px !important; padding: 0 4px !important;
  font-size: 10.5px !important; line-height: 16px !important;
  border-radius: 99px !important;
}

/* ---------- 8. Menu (bảng trượt từ dưới) ---------- */
#mh-sheet {
  position: fixed; inset: 0; z-index: 2147480000;
  display: none;
  font-family: inherit;
}
#mh-sheet.mh-open { display: block; }
#mh-sheet .mh-scrim {
  position: absolute; inset: 0; background: rgba(15, 25, 18, .42);
  opacity: 0; transition: opacity .2s ease;
}
#mh-sheet.mh-in .mh-scrim { opacity: 1; }
#mh-sheet .mh-panel {
  position: absolute; left: 0; right: 0; bottom: 0;
  margin: 0 auto; max-width: 560px;
  max-height: min(78vh, 620px);
  overflow: auto;
  padding: 10px 16px calc(16px + env(safe-area-inset-bottom, 0px));
  border-radius: 24px 24px 0 0;
  background: #fffaf0;
  box-shadow: 0 -10px 30px rgba(0, 0, 0, .25);
  transform: translateY(100%);
  transition: transform .26s cubic-bezier(.2, .8, .2, 1);
  color: #24412f;
}
#mh-sheet.mh-in .mh-panel { transform: none; }
#mh-sheet .mh-grab { width: 42px; height: 5px; border-radius: 9px; background: rgba(36, 65, 47, .2); margin: 0 auto 10px; }
#mh-sheet .mh-head { display: flex; align-items: center; justify-content: space-between; margin: 0 2px 12px; }
#mh-sheet .mh-head h2 { margin: 0; font-size: 19px; font-weight: 850; letter-spacing: -.3px; color: #24412f; }
#mh-sheet .mh-close {
  width: 40px; height: 40px; border-radius: 12px; border: 1px solid rgba(122, 92, 46, .2);
  background: #fff; font-size: 22px; line-height: 1; color: #24412f; cursor: pointer;
}
#mh-sheet .mh-section { margin: 14px 2px 8px; font-size: 11px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; color: #7b8a77; }
#mh-sheet .mh-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
#mh-sheet .mh-item {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 4px;
  min-height: 92px; padding: 10px 6px 8px;
  border-radius: 16px; border: 1px solid rgba(122, 92, 46, .16);
  background: #fff; color: #24412f; font: inherit; cursor: pointer; text-align: center;
  -webkit-tap-highlight-color: transparent;
}
#mh-sheet .mh-item:active { transform: scale(.97); background: #f3efe2; }
#mh-sheet .mh-item img, #mh-sheet .mh-item .mh-ico { width: 36px; height: 36px; object-fit: contain; display: grid; place-items: center; font-size: 26px; }
#mh-sheet .mh-item b { font-size: 13px; font-weight: 800; line-height: 1.2; }
#mh-sheet .mh-item small { font-size: 11px; line-height: 1.25; color: #6b7768; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
#mh-sheet .mh-item.mh-on { border-color: rgba(63, 138, 89, .55); background: #f1f8f1; }
#mh-sheet .mh-row {
  display: flex; align-items: center; gap: 12px; width: 100%;
  min-height: 52px; padding: 10px 12px; margin-top: 8px;
  border-radius: 14px; border: 1px solid rgba(122, 92, 46, .16); background: #fff;
  font: inherit; color: #24412f; text-align: left; cursor: pointer;
}
#mh-sheet .mh-row b { font-size: 14px; display: block; }
#mh-sheet .mh-row small { font-size: 12px; color: #6b7768; display: block; }
#mh-sheet .mh-foot { margin-top: 14px; text-align: center; font-size: 11px; color: #8a9586; }
#mh-sheet .mh-foot button { border: 0; background: none; color: inherit; font: inherit; text-decoration: underline; padding: 6px; }

/* ---------- 9. Điện thoại nằm ngang ---------- */
@media (orientation: landscape) and (max-height: 520px) {
  html.tvdb-mhud-r1:not(#mh-z) {
    --mh-top: calc(var(--mh-sat) + 6px);
    --mh-dock-h: 68px;
    --mh-dock-bottom: calc(var(--mh-sab) + 6px);
    --mh-rail-top: calc(var(--mh-top) + 60px);
    --mh-rail-step: 56px;
  }
  html.tvdb-mhud-r1:not(#mh-z) body .mh-tile:not(#mh-n1):not(#mh-n2) { width: 50px !important; height: 50px !important; padding-top: 3px !important; }
  html.tvdb-mhud-r1:not(#mh-z) body .mh-tile:not(#mh-n1):not(#mh-n2) > img,
  html.tvdb-mhud-r1:not(#mh-z) body .mh-tile:not(#mh-n1):not(#mh-n2) > .pet-paw,
  html.tvdb-mhud-r1:not(#mh-z) body .mh-tile:not(#mh-n1):not(#mh-n2) > .pet-paw > img { width: 28px !important; height: 28px !important; min-width: 28px !important; }
  /* Trạm: hàng ngang ở góc phải trên thay vì cột dài */
  html.tvdb-mhud-r1:not(#mh-z) body .mh-rail:not(#mh-n1):not(#mh-n2) {
    top: var(--mh-top) !important;
    right: calc(var(--mh-sar) + var(--mh-gap) + 120px + var(--mh-i, 0) * 56px) !important;
  }
  html.tvdb-mhud-r1:not(#mh-z) #ui .guide:not([hidden]) {
    top: calc(var(--mh-top) + 58px) !important;
    right: auto !important;
    width: min(420px, 48vw) !important;
  }
  html.tvdb-mhud-r1:not(#mh-z) #ui .toolbelt {
    left: calc(var(--mh-sal) + 132px) !important;
    right: calc(var(--mh-sar) + 72px) !important;
  }
  html.tvdb-mhud-r1:not(#mh-z) #ui .joystick-area,
  html.tvdb-mhud-r1:not(#mh-z) #joystick { width: 96px !important; height: 96px !important; }
  html.tvdb-mhud-r1:not(#mh-z) #ui .joystick-area { bottom: calc(var(--mh-sab) + 10px) !important; left: calc(var(--mh-sal) + 18px) !important; }
  html.tvdb-mhud-r1:not(#mh-z) body #recenter.mh-tile:not(#mh-n1):not(#mh-n2) { bottom: var(--mh-dock-bottom) !important; }
  html.tvdb-mhud-r1:not(#mh-z) #save-status { bottom: var(--mh-above-dock) !important; }
  html.tvdb-mhud-r1:not(#mh-z) #ui .toolbelt { padding: 4px !important; }
  html.tvdb-mhud-r1:not(#mh-z) #ui .toolbelt > .tool-family-r21 { flex-basis: 68px !important; width: 68px !important; }
  html.tvdb-mhud-r1:not(#mh-z) #ui .toolbelt .tool { padding: 2px 2px 3px !important; gap: 1px !important; }
  html.tvdb-mhud-r1:not(#mh-z) #ui .toolbelt .tool .tool-icon,
  html.tvdb-mhud-r1:not(#mh-z) #ui .toolbelt .tool .tool-icon img { width: 30px !important; height: 30px !important; }
  html.tvdb-mhud-r1:not(#mh-z) #ui .toolbelt .tool .tool-name { font-size: 10.5px !important; }
  #mh-sheet .mh-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  #mh-sheet .mh-panel { max-height: 92vh; }
}

/* Màn hình rất hẹp (≤ 350px) */
@media (max-width: 350px) {
  html.tvdb-mhud-r1:not(#mh-z) { --mh-gap: 6px; --mh-pill-gap: 6px; }
  html.tvdb-mhud-r1:not(#mh-z) #level-open { min-width: 80px !important; }
  html.tvdb-mhud-r1:not(#mh-z) #tvdb-hud-layout-r1 .wallet { min-width: 70px !important; padding: 0 10px 0 8px !important; gap: 4px !important; }
  html.tvdb-mhud-r1:not(#mh-z) #tvdb-hud-layout-r1 .wallet img { width: 22px !important; height: 22px !important; }
  html.tvdb-mhud-r1:not(#mh-z) #coins { font-size: 16px !important; }
  html.tvdb-mhud-r1:not(#mh-z) #ui .toolbelt > .tool-family-r21 { flex-basis: 54px !important; width: 54px !important; }
  html.tvdb-mhud-r1:not(#mh-z) #ui .toolbelt .tool .tool-name { font-size: 10px !important; letter-spacing: -.3px !important; }
}

@media (prefers-reduced-motion: reduce) {
  html.tvdb-mhud-r1:not(#mh-z) body .mh-tile:not(#mh-n1):not(#mh-n2), #mh-sheet .mh-panel, #mh-sheet .mh-scrim { transition: none !important; }
}

/* ---------- 10. Thẻ ô đất đang chọn: nằm giữa cần điều khiển và nút Về giữa ---------- */
html.tvdb-mhud-r1:not(#mh-z) #ui .selected-tile:not([hidden]) {
  position: fixed !important;
  z-index: 1227 !important;
  left: calc(var(--mh-sal) + 128px) !important;
  right: calc(var(--mh-sar) + var(--mh-gap) + 60px) !important;
  bottom: var(--mh-above-dock) !important;
  top: auto !important;
  width: auto !important;
  max-width: 360px !important;
  max-height: 46vh !important;
  overflow: auto !important;
  margin: 0 !important;
  padding: 10px 12px !important;
  border-radius: 16px !important;
  border: 1px solid var(--mh-line) !important;
  background: var(--mh-glass-strong) !important;
  box-shadow: var(--mh-shadow) !important;
  transform: none !important;
}
html.tvdb-mhud-r1:not(#mh-z) #ui .selected-tile #tile-state { font-size: 14px !important; line-height: 1.25 !important; }
html.tvdb-mhud-r1:not(#mh-z) #ui .selected-tile #tile-detail { font-size: 12px !important; line-height: 1.3 !important; }
html.tvdb-mhud-r1:not(#mh-z) #ui .selected-tile button { min-height: 40px !important; font-size: 13px !important; }
@media (orientation: landscape) and (max-height: 520px) {
  html.tvdb-mhud-r1:not(#mh-z) #ui .selected-tile:not([hidden]) {
    left: auto !important;
    right: calc(var(--mh-sar) + var(--mh-gap)) !important;
    bottom: calc(var(--mh-above-dock) + 4px) !important;
    width: 260px !important;
  }
}


/* ---------- 11. R1.1: các phần tử chỉ xuất hiện ở cấp cao / trạng thái đặc biệt ---------- */
/* "N cây cần chăm sóc": viên nhỏ ngay dưới Cấp + Vàng (không còn dải mờ sau thanh trên). */
html.tvdb-mhud-r1:not(#mh-z) #care-summary:not([hidden]) {
  position: fixed !important;
  z-index: 1226 !important;
  top: calc(var(--mh-top) + 58px) !important;
  left: calc(var(--mh-sal) + var(--mh-gap)) !important;
  right: auto !important;
  bottom: auto !important;
  width: auto !important;
  max-width: calc(100vw - 2 * var(--mh-gap) - 70px) !important;
  min-height: 26px !important;
  margin: 0 !important;
  padding: 4px 10px !important;
  font-size: 11.5px !important;
  font-weight: 750 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  box-shadow: var(--mh-shadow) !important;
}
html.tvdb-mhud-r1:not(#mh-z) #care-summary[hidden] { display: none !important; }
/* khi gợi ý vụ đầu đang hiện thì đẩy viên chăm sóc xuống dưới gợi ý */
html.tvdb-mhud-r1:not(#mh-z).mh-guide #care-summary:not([hidden]) { top: var(--mh-robots-top, calc(var(--mh-top) + 120px)) !important; }
html.tvdb-mhud-r1:not(#mh-z).mh-guide .tvdb-hud-robots-r1:not([hidden]) { margin-top: 32px !important; }

/* Thông báo cảnh quan (vốn ghim cứng góc dưới, đè thanh công cụ và không tự tắt). */
html.tvdb-mhud-r1:not(#mh-z) .farm-landscape-notice {
  position: fixed !important;
  z-index: 2147470000 !important;
  left: calc(var(--mh-sal) + 130px) !important;
  right: calc(var(--mh-sar) + var(--mh-gap) + 62px) !important;
  bottom: var(--mh-above-dock) !important;
  top: auto !important;
  max-width: none !important;
  padding: 9px 12px !important;
  border-radius: 14px !important;
  border: 1px solid var(--mh-line) !important;
  background: var(--mh-glass-strong) !important;
  box-shadow: var(--mh-shadow) !important;
  color: var(--mh-ink) !important;
  font-size: 12.5px !important;
  line-height: 1.35 !important;
  animation: mh-notice-out .5s ease 9s forwards;
}
@keyframes mh-notice-out { to { opacity: 0; visibility: hidden; } }
@media (orientation: landscape) and (max-height: 520px) {
  html.tvdb-mhud-r1:not(#mh-z) .farm-landscape-notice { left: auto !important; width: 300px !important; top: calc(var(--mh-top) + 62px) !important; bottom: auto !important; }
}

/* Mũi tên đổi loại dụng cụ (khi đã mua nông cụ nâng cấp) + nút vùng gieo hạt */
html.tvdb-mhud-r1:not(#mh-z) #ui .toolbelt .tool-family-arrow-r21:not([hidden]) {
  position: absolute !important;
  top: -6px !important; right: -4px !important; left: auto !important;
  width: 24px !important; height: 24px !important; min-height: 0 !important;
  border-radius: 99px !important;
  border: 1px solid var(--mh-line) !important;
  background: #fffaf0 !important;
  box-shadow: 0 2px 6px rgba(20, 30, 20, .2) !important;
  font-size: 16px !important;
  z-index: 3 !important;
}
html.tvdb-mhud-r1:not(#mh-z) #ui .toolbelt .tool-family-r21.has-choice > .tool .tool-icon { margin-top: 0 !important; }
html.tvdb-mhud-r1:not(#mh-z) #ui .toolbelt > .seed-strip-wrap { display: flex !important; align-items: stretch !important; gap: 4px !important; }
html.tvdb-mhud-r1:not(#mh-z) #ui .toolbelt > .seed-strip-wrap > #seed-strip { flex: 1 1 auto !important; min-width: 0 !important; width: auto !important; }
html.tvdb-mhud-r1:not(#mh-z) #ui .toolbelt .seed-mode-button-r27:not([hidden]) {
  flex: 0 0 46px !important; width: 46px !important; min-width: 46px !important; min-height: 0 !important; height: 100% !important;
  margin: 0 !important; padding: 4px 2px !important; border-radius: 14px !important; font-size: 10.5px !important;
}
html.tvdb-mhud-r1:not(#mh-z) #ui .toolbelt .seed-mode-button-r27[hidden] { display: none !important; }


/* ---------- 12. R1.2: nút hành động tròn (Thu hoạch / Tưới / "Đang đến…") ---------- */
html.tvdb-mhud-r1:not(#mh-z) { --mh-act: 74px; }
html.tvdb-mhud-r1:not(#mh-z) #ui #action:not([hidden]) {
  position: fixed !important;
  z-index: 1229 !important;
  right: calc(var(--mh-sar) + var(--mh-gap)) !important;
  bottom: var(--mh-above-dock) !important;
  left: auto !important;
  top: auto !important;
  width: var(--mh-act) !important;
  height: var(--mh-act) !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 6px !important;
  border-radius: 50% !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 1px !important;
  font-size: 11px !important;
  line-height: 1.1 !important;
  transform: none !important;
}
html.tvdb-mhud-r1:not(#mh-z) #ui #action #action-icon,
html.tvdb-mhud-r1:not(#mh-z) #ui #action #action-icon img { width: 32px !important; height: 32px !important; margin: 0 !important; }
html.tvdb-mhud-r1:not(#mh-z) #ui #action #action-label {
  max-width: 64px !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important;
  font-size: 11px !important; font-weight: 800 !important;
}
html.tvdb-mhud-r1:not(#mh-z) #ui #action .keyboard-hint { display: none !important; }
/* nhãn "Đang đến…" canh phải, nằm ngay trên nút */
html.tvdb-mhud-r1:not(#mh-z) #ui #action.walking::after { right: 0 !important; left: auto !important; bottom: calc(100% + 6px) !important; }
/* khi nút hành động hiện: "Về giữa" lên trên, thẻ ô đất chừa chỗ bên phải */
html.tvdb-mhud-r1:not(#mh-z).mh-act body #recenter.mh-tile:not(#mh-n1):not(#mh-n2) {
  bottom: calc(var(--mh-above-dock) + var(--mh-act) + 38px) !important;
}
html.tvdb-mhud-r1:not(#mh-z).mh-act #ui .selected-tile:not([hidden]) {
  right: calc(var(--mh-sar) + var(--mh-gap) + var(--mh-act) + 8px) !important;
}
html.tvdb-mhud-r1:not(#mh-z).mh-act .farm-landscape-notice {
  bottom: calc(var(--mh-above-dock) + var(--mh-act) + 38px) !important;
}
@media (orientation: landscape) and (max-height: 520px) {
  html.tvdb-mhud-r1:not(#mh-z) { --mh-act: 64px; }
  html.tvdb-mhud-r1:not(#mh-z) #ui #action:not([hidden]) { bottom: var(--mh-dock-bottom) !important; }
  html.tvdb-mhud-r1:not(#mh-z).mh-act body #recenter.mh-tile:not(#mh-n1):not(#mh-n2) { bottom: calc(var(--mh-dock-bottom) + var(--mh-act) + 34px) !important; }
  html.tvdb-mhud-r1:not(#mh-z).mh-act #ui .toolbelt { right: calc(var(--mh-sar) + 72px + var(--mh-act)) !important; }
  html.tvdb-mhud-r1:not(#mh-z).mh-act #ui .selected-tile:not([hidden]) { right: calc(var(--mh-sar) + var(--mh-gap) + var(--mh-act) + 8px) !important; }
}

/* ---------- 13. R1.2: Trạm Chăn Nuôi không cuộn được trên điện thoại dọc ----------
   Lỗi có sẵn (cả giao diện cũ): khung bảng bị overflow:hidden, phần thân không có thanh cuộn,
   nội dung dài hơn khung nên bị kẹt; xoay ngang mới cuộn được. Áp dụng cho mọi thiết bị cảm ứng. */
@media (pointer: coarse), (max-width: 760px) {
  #livestock-basic-dialog[open] {
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    max-height: calc(100dvh - 16px) !important;
  }
  #livestock-basic-dialog[open] > .dialog-top,
  #livestock-basic-dialog[open] > nav { flex: 0 0 auto !important; }
  #livestock-basic-dialog[open] > :not(.dialog-top):not(nav):not(script):not(style) {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    touch-action: pan-y !important;
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)) !important;
  }
}


/* ---------- 14. R1.3: sửa từ giả lập toàn bộ gameplay ---------- */
/* Ngang: nhãn "Đang đến…" của nút hành động không chạm thẻ ô đất */
@media (orientation: landscape) and (max-height: 520px) {
  html.tvdb-mhud-r1:not(#mh-z).mh-act #ui .selected-tile:not([hidden]) {
    bottom: calc(var(--mh-dock-bottom) + var(--mh-act) + 36px) !important;
    right: calc(var(--mh-sar) + var(--mh-gap) + 60px) !important;
  }
}

/* ---------- 15. R1.4: lỗi ở cấp cao (ảnh iPhone 15 Pro Max) ---------- */
/* Rương quà lên cấp: thành huy hiệu nhỏ ở góc ô Cấp, không chiếm chỗ dòng EXP */
html.tvdb-mhud-r1:not(#mh-z) #level-open { overflow: visible !important; }
html.tvdb-mhud-r1:not(#mh-z) #level-open .rewards-chip-badge:not([hidden]) {
  position: absolute !important;
  top: -8px !important;
  right: -8px !important;
  left: auto !important;
  z-index: 2 !important;
  height: 22px !important;
  min-width: 22px !important;
  margin: 0 !important;
  padding: 0 6px 0 3px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 2px !important;
  border-radius: 99px !important;
  border: 2px solid #fffaf0 !important;
  background: linear-gradient(180deg, #ffd25e, #f2a93b) !important;
  color: #5a3608 !important;
  font-size: 11px !important;
  font-weight: 850 !important;
  line-height: 1 !important;
  box-shadow: 0 2px 6px rgba(120, 70, 10, .35) !important;
  grid-row: auto !important;
}
html.tvdb-mhud-r1:not(#mh-z) #level-open .rewards-chip-badge img { width: 16px !important; height: 16px !important; }

/* Lỗi có sẵn (mọi giao diện): thẻ chuồng khi "Chuồng đã đầy" có thêm 1 dòng → dòng mô tả bị đẩy sang
   cột nút, cột chữ còn ~1px nên chữ dồn từng từ một. Ghim chữ vào cột trái, nút ở cột phải. */
#livestock-basic-dialog .lv-pen-upgrade { grid-template-columns: minmax(0, 1fr) auto !important; }
#livestock-basic-dialog .lv-pen-upgrade > :not(button) { grid-column: 1 !important; min-width: 0 !important; }
#livestock-basic-dialog .lv-pen-upgrade > .lv-upgrade-benefit { grid-column: 1 / -1 !important; }
#livestock-basic-dialog .lv-pen-upgrade > button { grid-column: 2 !important; grid-row: 1 / span 4 !important; align-self: center !important; }

/* Lỗi có sẵn: thẻ con giống 2 cột quá hẹp trên điện thoại dọc → nút "Tối đa" tràn mép. Xếp 1 cột. */
@media (max-width: 560px) {
  #livestock-basic-dialog .livestock-shop-grid:has(.lv-purchase-controls, .lv-sale-controls) { grid-template-columns: minmax(0, 1fr) !important; }
  #livestock-basic-dialog .lv-purchase-controls, #livestock-basic-dialog .lv-sale-controls { flex-wrap: wrap !important; }
}


/* ---------- 16. Tương thích bản TEST (Mobile Interface R33: html[data-mobile-edition-r33]) ----------
   R33 dời cụm nút cảnh vào .mobile-aux-r33 và đặt khu vườn giữa thanh trên/dưới. Khi giao diện mới bật,
   các khung đó chỉ còn là "vỏ" (display:contents) để từng nút được đặt theo bố cục mới. Không ảnh hưởng MAIN. */
html.tvdb-mhud-r1:not(#mh-z)[data-mobile-edition-r33] body #game { top: 0 !important; bottom: 0 !important; left: 0 !important; right: 0 !important; }
html.tvdb-mhud-r1:not(#mh-z)[data-mobile-edition-r33] #tvdb-hud-layout-r1,
html.tvdb-mhud-r1:not(#mh-z)[data-mobile-edition-r33] #tvdb-hud-layout-r1 .top-actions,
html.tvdb-mhud-r1:not(#mh-z)[data-mobile-edition-r33] #tvdb-hud-layout-r1 .tvdb-hud-meta-r1,
html.tvdb-mhud-r1:not(#mh-z)[data-mobile-edition-r33] #tvdb-hud-layout-r1 .mobile-aux-r33,
html.tvdb-mhud-r1:not(#mh-z)[data-mobile-edition-r33] #tvdb-hud-layout-r1 .scene-actions,
html.tvdb-mhud-r1:not(#mh-z)[data-mobile-edition-r33] #tvdb-hud-layout-r1 #aquaculture-station-hud { display: contents !important; }


/* Ô biểu tượng: ẩn chữ trần của nút gốc (TEST có chữ cạnh ảnh), luôn hiện ảnh */
html.tvdb-mhud-r1:not(#mh-z) body .mh-tile:not(#mh-n1):not(#mh-n2) { font-size: 0 !important; line-height: 0 !important; }
html.tvdb-mhud-r1:not(#mh-z) body .mh-tile:not(#mh-n1):not(#mh-n2)::after { font-size: 10px !important; line-height: 1.1 !important; }
html.tvdb-mhud-r1:not(#mh-z) body .mh-tile:not(#mh-n1):not(#mh-n2) > img,
html.tvdb-mhud-r1:not(#mh-z) body .mh-tile:not(#mh-n1):not(#mh-n2) > .pet-paw,
html.tvdb-mhud-r1:not(#mh-z) body .mh-tile:not(#mh-n1):not(#mh-n2) > .pet-paw > img { display: block !important; visibility: visible !important; opacity: 1 !important; }
/* Thẻ gợi ý: giống MAIN trên mọi bản (R33 của TEST ẩn biểu tượng + tiêu đề → thẻ thấp hơn nút đóng) */
html.tvdb-mhud-r1:not(#mh-z) #ui .guide:not([hidden]) { min-height: 46px !important; }
html.tvdb-mhud-r1:not(#mh-z) #ui .guide .guide-icon { display: block !important; }
html.tvdb-mhud-r1:not(#mh-z) #ui .guide #guide-step { display: block !important; }