/* ==========================================================================
 * ĐIỆN THOẠI XOAY NGANG (chiều cao ≤ 520px) — bố cục gọn, các nút không chồng lên nhau
 *
 *  ┌ HUD 1 hàng: ngày/giờ · tên quán · tiền · chỉ số · menu ───────────────┐
 *  │ cột trái: chọn tầng, sự kiện      …bản đồ…      cột phải: tác vụ   │
 *  │ trái dưới: nhiệm vụ   [ dock chính giữa ]   phải dưới: ảnh · cửa hàng│
 *  └───────────────────────────────────────────────────────────────────────┘
 * Chỉ áp dụng khi quán không ở chế độ xây dựng (xây dựng giữ bố cục riêng).
 * ========================================================================== */
@media (orientation: landscape) and (max-height: 520px) {
  body:not(.portrait) {
    --top-h: 42px; --dock-h: 54px;
    --edge-l: max(8px, env(safe-area-inset-left)); --edge-r: max(8px, env(safe-area-inset-right));
  }

  /* ---------- HUD: một hàng, không tràn ra ngoài màn hình ---------- */
  body:not(.portrait) #hud { gap: 5px; padding: 0 var(--edge-r) 0 var(--edge-l); border-bottom-width: 2px; box-shadow: 0 3px 10px rgba(0, 0, 0, .3); }
  body:not(.portrait) .hud-time { padding-right: 2px; flex: 0 0 auto; }
  body:not(.portrait) .hud-day { font-size: 9px; }
  body:not(.portrait) .hud-clock { font-size: 17px; }
  body:not(.portrait) .hud-shop { display: flex; max-width: 118px; min-width: 0; padding: 0 8px; flex: 0 1 auto; }
  body:not(.portrait) .hud-shop b { font-size: 13px; }
  body:not(.portrait) .hud-shop small { font-size: 9px; }
  body:not(.portrait) .hud-money { height: 30px; font-size: 15px; padding: 0 9px; max-width: 200px; min-width: 0; flex: 0 1 auto; border-radius: 10px; }
  body:not(.portrait) .hud-money .ic .pxi { height: 16px; }
  body:not(.portrait) .hud-stats { display: contents; }
  body:not(.portrait) .hud-stat { height: 28px; padding: 0 6px; gap: 3px; font-size: 13px; border-radius: 8px; flex: 0 0 auto; }
  body:not(.portrait) .hud-stat .ic .pxi { height: 13px; }
  body:not(.portrait) .hud-stat .stars { display: none; }
  body:not(.portrait) .hud-status { display: flex; margin-left: 0; gap: 3px; flex: 0 0 auto; }
  body:not(.portrait) .hud-status .st { height: 28px; padding: 0 6px; font-size: 12px; border-radius: 8px; }
  body:not(.portrait) .hud-status .u { display: none; }
  body:not(.portrait) #btn-sound, body:not(.portrait) #btn-music { display: none; }   /* âm thanh nằm trong Menu → Cài đặt */
  body:not(.portrait) .hud-icon { width: 32px; height: 30px; flex: 0 0 auto; margin-left: auto; }
  body:not(.portrait) .hud-money { margin-left: auto; }
  body:not(.portrait) .hud-icon + .hud-icon, body:not(.portrait) .hud-money + .hud-stats ~ .hud-icon { margin-left: 0; }

  /* ---------- Cột trái: chọn tầng + sự kiện (dưới HUD, sát mép) ---------- */
  body:not(.portrait) #floor-nav { top: calc(var(--top-h) + 6px); left: var(--edge-l); }
  body:not(.portrait) #floor-nav button { min-height: 32px; font-size: 12px; }
  body:not(.portrait) #floor-nav .floor-toggle { padding: 2px 9px; gap: 8px; box-shadow: 0 2px 0 var(--ink); }
  body:not(.portrait) .floor-list { width: 176px; }
  body:not(.portrait) #hud-events { position: fixed; top: calc(var(--top-h) + 6px); left: var(--edge-l); right: auto; max-width: min(240px, 36vw); justify-content: flex-start; z-index: 19; }
  body:not(.portrait) .events .ev { font-size: 11px; padding: 1px 8px; min-height: 24px; }

  /* ---------- Hàng dưới: nhiệm vụ (trái) · dock (giữa) · ảnh + cửa hàng (phải) ---------- */
  body:not(.portrait):not(.building) #bottom-bar { bottom: 5px; gap: 4px; padding: 4px; border-radius: 14px; }
  body:not(.portrait) .bb-btn { width: 72px; height: 44px; border-radius: 10px; font-size: 10px; gap: 2px; white-space: nowrap; letter-spacing: -.2px; }
  body:not(.portrait) .bb-btn .pxi { height: 15px; }
  body:not(.portrait) .bb-btn .badge { top: -7px; right: -5px; width: 18px; height: 18px; font-size: 11px; }
  body:not(.portrait):not(.building) #quest-tracker { left: var(--edge-l); bottom: 8px; max-width: max(96px, calc(50vw - 212px)); padding: 3px 9px; font-size: 11.5px; border-radius: 10px; line-height: 1.25; }
  body:not(.portrait):not(.building) #quest-tracker * { overflow-wrap: anywhere; }

  /* ---------- Bảng/ pop-up bên phải không đè lên dock ---------- */
  body:not(.portrait) #panel { top: calc(var(--top-h) + 6px); right: var(--edge-r); bottom: calc(var(--dock-h) + 10px); width: min(350px, 46vw); max-height: none; }
  body:not(.portrait) #popup { top: calc(var(--top-h) + 6px); right: var(--edge-r); width: min(330px, 44vw); max-height: calc(100vh - var(--top-h) - var(--dock-h) - 18px); }
  body:not(.portrait) #toasts { top: calc(var(--top-h) + 6px); }
}

/* Cột trái xếp chồng: chọn tầng → sự kiện → nhiệm vụ (khoảng dịch tự tính theo thành phần đang hiện) */
@media (orientation: landscape) and (max-height: 520px) {
  body:not(.portrait):has(#floor-nav:not([hidden])) { --lc1: 38px; }
  body:not(.portrait):has(#hud-events .ev) { --lc2: 30px; }
  body:not(.portrait) #hud-events { top: calc(var(--top-h) + 6px + var(--lc1, 0px)); }
}
/* Màn hẹp (≈ iPhone 8 / SE xoay ngang): nhiệm vụ lên cột trái cho đủ chỗ đọc, bớt chỉ số phụ để HUD luôn đủ chỗ cho tiền + menu */
@media (orientation: landscape) and (max-height: 520px) and (max-width: 740px) {
  body:not(.portrait):not(.building) #quest-tracker { bottom: auto; top: calc(var(--top-h) + 6px + var(--lc1, 0px) + var(--lc2, 0px)); max-width: min(220px, 36vw); }
  body:not(.portrait) .hud-shop small { display: none; }
  body:not(.portrait) .hud-shop { max-width: 96px; }
}
@media (orientation: landscape) and (max-height: 520px) and (max-width: 700px) {
  body:not(.portrait) #hud-ping { display: none; }
}
@media (orientation: landscape) and (max-height: 520px) and (max-width: 620px) {
  body:not(.portrait) .bb-btn { width: 62px; font-size: 9.5px; }
  body:not(.portrait):not(.building) #bottom-bar { gap: 3px; }
  body:not(.portrait) #hud-beauty { display: none; }
  /* Điện thoại ngang hẹp: tên/cấp ở hàng riêng thay vì biến mất. */
  body:not(.portrait) { --top-h: 64px; }
  body:not(.portrait) #hud { padding-bottom: 22px; }
  body:not(.portrait) .hud-shop { display: flex; position: absolute; left: var(--edge-l); right: var(--edge-r); bottom: 4px; max-width: none; height: 18px; padding: 0; border: 0; flex-direction: row; align-items: center; gap: 8px; }
  body:not(.portrait) .hud-shop .hs-name { flex: 1 1 0; min-width: 0; }
  body:not(.portrait) .hud-shop .hs-name b { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  body:not(.portrait) .hud-shop .hs-prog { flex: 0 1 45%; min-width: 0; margin: 0; }
  body:not(.portrait) .hud-shop .hs-xp { display: block; min-width: 30px; }
  body:not(.portrait) .hud-shop .hs-num { display: none; }
  body:not(.portrait) .hud-money { max-width: 150px; font-size: 14px; }
}
/* Chiều cao rất thấp (≤ 340px): thu gọn dock chính */
@media (orientation: landscape) and (max-height: 340px) {
  body:not(.portrait) .bb-btn { height: 40px; }
}