/* GIAO DIỆN GỌN cho điện thoại (hud_gon.ts): người chơi than giao diện che gần nửa màn hình dọc, không ngắm được cảnh.
   1) Thanh cầm đồ tự co lại còn MỘT ô (món đang cầm) nằm ở mép dưới giữa cần điều khiển và nút chính; chạm vào thì bung cả thanh vài giây.
   2) Dòng nhiệm vụ thu gọn chỉ còn một dòng.
   3) Nút con mắt = chế độ ngắm cảnh: ẩn hết, chỉ giữ cần điều khiển + cụm lái; chạm con mắt lần nữa để hiện lại. */

/* ---------- 1) thanh cầm đồ co lại (chỉ màn dọc, máy cảm ứng) ---------- */
@media (orientation: portrait) {
  html body.cam-ung.tc-gon #thanh-cam { z-index: 7; left: calc(50% - 40px); right: auto; bottom: calc(12px + var(--day, 0px)); top: auto; width: auto; max-width: none;
    margin: 0; padding: 0; transform: none; background: none; border: 0; box-shadow: none; overflow: visible; -webkit-mask-image: none; mask-image: none; }
  html body.cam-ung.tc-gon #thanh-cam .o-cam { display: none; }
  html body.cam-ung.tc-gon #thanh-cam .o-cam.chon,
  html body.cam-ung.tc-gon #thanh-cam:not(:has(.o-cam.chon)) .o-cam:first-child { display: block; flex: 0 0 48px; width: 48px; height: 48px; max-width: none; opacity: .92; }
  html body.cam-ung.tc-gon #thanh-cam::after { content: '⋯'; position: absolute; right: -9px; top: -9px; width: 20px; height: 20px; border-radius: 50%;
    background: rgba(8, 30, 44, .9); border: 1px solid rgba(120, 220, 255, .7); color: #cfefff; font: 700 13px/18px system-ui, sans-serif; text-align: center; pointer-events: none; }

  /* ---------- 2) dòng nhiệm vụ thu gọn: một dòng ---------- */
  html body.cam-ung #nhiem-vu.thu-gon #nv-tom { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; height: auto; line-height: 26px; }
  html body.cam-ung #nhiem-vu.thu-gon #nv-dau { min-height: 0; height: 28px; align-items: center; }
  html body.cam-ung #nhiem-vu.thu-gon { min-height: 0; }
}

/* ---------- 3) chế độ ngắm cảnh ---------- */
#nut-ngam { display: none; }
body.cam-ung #nut-ngam { display: flex; position: fixed; z-index: 12; left: calc(12px + env(safe-area-inset-left, 0px)); top: calc(var(--ct-day, 150px) + 8px);
  width: 34px; height: 34px; align-items: center; justify-content: center; padding: 0; border-radius: 50%; font-size: 17px; line-height: 1;
  background: rgba(8, 30, 44, .62); border: 1px solid rgba(120, 220, 255, .45); color: #e8f8ff; box-shadow: 0 2px 6px rgba(0, 0, 0, .35); -webkit-tap-highlight-color: transparent; }
body.cam-ung #nut-ngam:active { transform: scale(.92); }
body.cam-ung #nut-ngam[hidden] { display: none; }
body.ngam-canh #nut-ngam { top: calc(10px + env(safe-area-inset-top, 0px)); background: rgba(120, 82, 22, .8); border-color: #ffd36a; opacity: .75; }
body.ngam-canh #hud > *:not(#vung-can):not(#dpad):not(#cum-lai),
body.ngam-canh #thong-bao, body.ngam-canh #nhan-tang, body.ngam-canh #hd-mui,
body.ngam-canh #dao-thanh, body.ngam-canh #dn-thanh, body.ngam-canh #sx-thanh { visibility: hidden !important; pointer-events: none !important; }

/* ---------- 4) cụm lên / xuống tầng ở màn dọc: cột mảnh sát mép phải (▲ · 2/3 · ▼) thay vì chắn ngang giữa màn ---------- */
@media (orientation: portrait) {
  html body.cam-ung #tang-cum { position: fixed; z-index: 6; right: calc(8px + env(safe-area-inset-right, 0px)); top: calc(var(--ct-day, 150px) + 46px);
    flex-direction: column-reverse; gap: 2px; padding: 2px; border-radius: 13px; }
  html body.cam-ung #tang-cum .tang-nut { min-width: 44px; min-height: 44px; width: 44px; height: 44px; padding: 0; }
  html body.cam-ung #tang-cum .tang-nut small { display: none; }
  html body.cam-ung #tang-cum #tang-chi { min-width: 0; max-width: 44px; padding: 2px 0; }
  html body.cam-ung #tang-cum #tang-ten { display: none; }
  html body.cam-ung #tang-cum #tang-so { font-size: 13px; }
}

/* ---------- 5) vặt: tên nguyên liệu còn thiếu trong bảng Chế tạo (điện thoại không rê chuột xem tên được) + nút nấu nhiều suất ---------- */
.dong-che .can .thieu-ten { font-style: normal; font-size: 11px; margin-left: 3px; color: #ffb4a8; white-space: nowrap; }
.na-mon .na-nhieu { margin-left: 4px; min-width: 44px; min-height: 40px; padding: 0 8px; border-radius: 10px; font-weight: 800; }

/* ---------- 6) Menu: hàng "Khác" (thông báo, hướng dẫn, cài đặt…) là các nút dẹt nhỏ ở cuối, không tranh chỗ với ô chính ---------- */
.ml-nhom.ml-nho { margin-top: 8px; padding-top: 6px; border-top: 1px solid var(--vien-mo); }
.ml-nhom.ml-nho h3 { display: none; }
.ml-nhom.ml-nho .ml-luoi { display: flex; flex-wrap: wrap; gap: 6px; grid-template-columns: none; }
.ml-nhom.ml-nho .ml-o { flex: 1 1 0; min-width: 0; height: 46px; min-height: 46px; flex-direction: column; gap: 1px; padding: 2px; border-radius: 12px; }
.ml-nhom.ml-nho .ml-o .ml-chu { font-size: 16px; line-height: 1.1; height: auto; }
.ml-nhom.ml-nho .ml-o img { width: 22px; height: 22px; }
.ml-nhom.ml-nho .ml-o span { font-size: 11px; }

/* ---------- 7) Cài đặt chia thẻ (cai_dat_nhom.ts): mỗi lúc chỉ hiện một nhóm ---------- */
#cd-the { display: flex; gap: 4px; padding: 6px 10px 4px; position: sticky; top: 0; z-index: 2; background: var(--nen-dam, #0b2230); border-bottom: 1px solid var(--vien-mo); }
#cd-the button { flex: 1 1 0; min-width: 0; height: 40px; padding: 0 4px; border-radius: 10px; border: 1px solid var(--vien-mo); background: transparent; color: var(--chu-mo);
  font-weight: 700; font-size: 11.5px; letter-spacing: -.2px; white-space: nowrap; overflow: hidden; }
#cd-the button.chon { background: rgba(79, 227, 255, .22); color: var(--chu); border-color: var(--vien); }
#bang-caidat .cd-than > [data-nhom-an] { display: none !important; }

/* ---------- 8) chip chỉ hướng kho báu (#kb-chip) trên máy cảm ứng: nằm dưới dòng nhiệm vụ / hàng Menu, không đè hàng chỉ số ---------- */
@media (orientation: portrait) {
  html body.cam-ung #kb-chip { top: calc(var(--ct-day, 150px) + 8px); left: calc(50% + 22px); }
}
@media (orientation: landscape) {
  html body.cam-ung #kb-chip { top: calc(var(--dh-day, 34px) + var(--menu, 50px) + 22px); }
}
/* đang mở một bảng lớn (bản đồ, túi…): chip kho báu, cảnh báo bão và thanh máu boss không nổi đè lên bảng */
body:has(.bang:not([hidden]):not(#nhiem-vu):not(#chat)) #kb-chip { display: none !important; }

/* ---------- 9) thẻ Cốt truyện: nút "Đọc lại lời kể" / "Nhiệm vụ đang làm" bị nền trắng chữ nhạt (không đọc được) ---------- */
.ctr-nut-nho button, #bang-ctr .ctr-nut button:not(.chinh) { background: rgba(79, 227, 255, .1); color: var(--chu, #e8f8ff); border: 1px solid var(--vien-mo, rgba(120, 220, 255, .35)); font-weight: 700; }
.ctr-nut-nho { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; }

/* ---------- 10) bảng Tài khoản: khối "Lưu tài khoản khách" ---------- */
.tk-luu-khach { border: 1px solid #ffd36a; background: rgba(120, 82, 22, .22); margin-top: 0; margin-bottom: 10px; display: flex; flex-direction: column; gap: 7px; }
.tk-luu-khach .vh-o { width: 100%; box-sizing: border-box; }

/* ---------- 11) bảng Chế tạo: nút chế nhiều lượt (×N) cạnh nút Chế ---------- */
.dong-che .che-nut { display: flex; gap: 4px; align-items: center; flex: 0 0 auto; }
.dong-che .che-nhieu { padding: 8px 9px; min-width: 44px; background: rgba(255, 211, 106, .16); border-color: #ffd36a; color: #ffe9a8; }

/* ---------- 12) điện thoại cầm ngang: bớt chip ở hàng đồng hồ (toạ độ đã có trong Bản đồ, giờ bảo hộ có trong bảng Đảo nhà) ---------- */
@media (orientation: landscape) and (max-height: 480px) {
  html body.cam-ung #toa-do, html body.cam-ung #dh-baoho { display: none !important; }
}

/* ---------- 13) GIAO DIỆN TỐI GIẢN trên điện thoại (hud_gon.ts, body.toi-gian; tắt trong Cài đặt → Hiển thị) ---------- */
html body.toi-gian #nut-chat, html body.toi-gian #nut-zalo, html body.toi-gian #tp-ve,
html body.toi-gian #dh-ngay, html body.toi-gian #dh-baoho, html body.toi-gian #toa-do, html body.toi-gian #dh-thientai.troi-nang { display: none !important; }
/* chỉ số: ảnh nhỏ + ba vạch, bỏ hàng xu / cấp (xem trong Menu) */
html body.toi-gian #chi-so .hang-diem { display: none !important; }
html body.toi-gian #chi-so { padding: 4px 10px 4px 4px; min-height: 0; height: auto; align-items: center; gap: 7px; width: max-content; max-width: none; }
html body.toi-gian #chi-so #cs-chan { width: 42px; height: 42px; min-width: 0; min-height: 0; flex: 0 0 auto; }
html body.toi-gian #chi-so #cs-anh { width: 38px; height: 38px; }
/* ba vạch RÕ: biểu tượng 15 px + vạch dày 9 px + con số đậm (bản đầu để vạch co về 0 nên không thấy gì) */
html body.toi-gian #chi-so .cs-vach { display: flex; flex-direction: column; gap: 4px; width: auto; min-width: 0; }
html body.toi-gian #chi-so .vach { display: grid; grid-template-columns: 15px 86px 26px; align-items: center; gap: 5px; width: auto; height: 15px; }
html body.toi-gian #chi-so .vach[hidden] { display: none !important; }
html body.toi-gian #chi-so .vach > i, html body.toi-gian #chi-so .vach > img { width: 15px; height: 15px; font-size: 13px; line-height: 15px; }
html body.toi-gian #chi-so .vach > b { display: block; width: 86px; height: 9px; border-radius: 5px; overflow: hidden; }
html body.toi-gian #chi-so .vach > b > span { display: block; height: 100%; }
html body.toi-gian #chi-so .vach > em { display: block; font-size: 12.5px; font-weight: 800; line-height: 15px; text-align: left; font-style: normal; text-shadow: 0 1px 2px rgba(0, 0, 0, .7); }
html body.toi-gian #dong-ho { background: none; border-color: transparent; box-shadow: none; opacity: .9; }
/* dòng nhiệm vụ thu thành viên "NV" (chạm để hiện lại) */
html body.toi-gian.nv-an #nhiem-vu.thu-gon { width: auto !important; min-width: 0 !important; max-width: none; opacity: .8; }
html body.toi-gian.nv-an #nhiem-vu.thu-gon #nv-tom, html body.toi-gian.nv-an #nhiem-vu.thu-gon #nv-thu { display: none !important; }
@media (orientation: portrait) {   /* màn dọc: khung chỉ số hẹp hơn, rút vạch cho con số nằm trong khung */
  html body.toi-gian #chi-so .vach { grid-template-columns: 15px 68px 26px; }
  html body.toi-gian #chi-so .vach > b { width: 68px; }
}
@media (orientation: portrait) {
  html body.toi-gian #chi-so { grid-template-columns: 42px max-content; }
  html body.toi-gian #chi-so .cs-vach { width: max-content; }
}
@media (orientation: portrait) { html body.toi-gian #chi-so { min-width: 184px !important; width: 184px !important; box-sizing: border-box; } }

/* ---------- 14) tên game: FARSEA + dòng phụ tiếng Việt ---------- */
.logo .logo-phu { display: block; margin-top: 2px; font-size: 12.5px; font-weight: 700; letter-spacing: 1.5px; opacity: .85; text-shadow: none; text-transform: none; }