/* ==========================================================================
 * MÀN HÌNH DỌC NHỎ: thu gọn HUD phía trên + thanh tính năng dưới để nhường chỗ cho quán.
 * Bậc 1 (viewport cao ≤ 820px hoặc rộng ≤ 360px): HUD 3 hàng gọn ~109px (thường 140px).
 * Bậc 2 (cao ≤ 700px hoặc rộng ≤ 340px): giữ tên quán/cấp trong hàng gọn, HUD ~100px.
 * Mọi bảng/popup/thanh xây dựng tự co theo --top-h / --dock-h nên không cần chỉnh riêng.
 * ========================================================================== */
@media (orientation: portrait) and (max-height: 820px), (orientation: portrait) and (max-width: 360px) {
  body.portrait { --top-h: calc(109px + env(safe-area-inset-top)); --dock-h: calc(58px + var(--dock-safe-bottom)); }
  body.portrait #hud { grid-template-rows: 36px 34px 18px; gap: 4px; padding: calc(4px + env(safe-area-inset-top)) 8px 5px; border-radius: 0 0 16px 16px; }
  body.portrait .hud-day { font-size: 9px; }
  body.portrait .hud-clock { font-size: 21px; }
  body.portrait #hud-money { font-size: 17px; padding: 0 8px; }
  body.portrait .hud-money .ic .pxi { height: 17px; }
  body.portrait #btn-menu { height: 36px; border-radius: 10px; }
  body.portrait #btn-menu .pxi { height: 17px; }
  body.portrait #hud [data-hud-stat] { min-height: 34px; }
  body.portrait .hud-stats { gap: 4px; }
  body.portrait .hud-stats .hud-stat { min-width: 42px; padding: 0 5px; gap: 3px; font-size: 13px; }
  body.portrait .hud-stats .hud-stat .ic .pxi { height: 12px; }
  body.portrait #hud-beauty .ic .pxi { height: 14px; }
  body.portrait .hud-stats .hud-status { gap: 4px; }
  body.portrait .hud-stats .hud-status .st { font-size: 12.5px; gap: 2px; padding: 0 1px; }
  body.portrait .hud-stats .hud-status .st .pxi { height: 12px; }
  body.portrait .hud-shop .hs-name b { font-size: 13px; line-height: 1.1; }
  body.portrait .hud-shop .hs-name small { font-size: 9px; }
  body.portrait .hud-shop .hs-lv { font-size: 9.5px; line-height: 13px; }
  body.portrait .hud-shop .hs-xp { height: 6px; }

  /* Thanh tính năng đáy gọn lại */
  body.portrait #bottom-bar { padding: 4px 4px calc(4px + var(--dock-safe-bottom)); }
  body.portrait .bb-btn { height: 48px; font-size: 10px; margin: 0 2px; }
  body.portrait .bb-btn .pxi { height: 18px; }
  body.portrait .bb-btn .badge { top: -6px; width: 19px; height: 19px; font-size: 11px; }

}

@media (orientation: portrait) and (max-height: 700px), (orientation: portrait) and (max-width: 340px) {
  body.portrait { --top-h: calc(100px + env(safe-area-inset-top)); --dock-h: calc(54px + var(--dock-safe-bottom)); }
  body.portrait #hud { grid-template-rows: 32px 28px 20px; padding: calc(3px + env(safe-area-inset-top)) 7px 4px; gap: 3px; }
  /* Luôn giữ tên và cấp quán; chỉ ẩn số EXP chi tiết trên điện thoại nhỏ. */
  body.portrait #hud .hud-shop { display: flex; padding: 0 2px; }
  body.portrait .hud-shop .hs-name { display: flex; flex: 1 1 0; min-width: 0; }
  body.portrait .hud-shop .hs-name b { font-size: 12px; }
  body.portrait .hud-shop .hs-lv { display: inline-block; }
  body.portrait .hud-shop .hs-num { display: none; }
  body.portrait .hud-shop .hs-prog { flex: 0 1 45%; margin: 0; }
  body.portrait .hud-shop .hs-xp { height: 5px; }
  body.portrait .hud-clock { font-size: 19px; }
  body.portrait #hud-money { font-size: 15.5px; }
  body.portrait .hud-money .ic .pxi { height: 15px; }
  body.portrait #btn-menu { height: 32px; }
  body.portrait #hud [data-hud-stat] { min-height: 28px; }
  body.portrait .hud-stats .hud-stat { min-width: 38px; padding: 0 4px; font-size: 12px; }
  body.portrait .hud-stats .hud-status .st { font-size: 11.5px; }
  body.portrait .bb-btn { height: 44px; font-size: 9.5px; }
  body.portrait .bb-btn .pxi { height: 16px; }
}

/* Rất hẹp (≤ 340px, ví dụ iPhone SE đời đầu): chip chỉ số và thanh chuẩn bị quán nhỏ thêm để không bị cắt chữ */
@media (orientation: portrait) and (max-width: 340px) {
  body.portrait #hud { padding-left: 5px; padding-right: 5px; gap: 3px; }
  body.portrait .hud-stats { gap: 3px; }
  body.portrait .hud-stats .hud-stat { min-width: 0; padding: 0 3px; gap: 2px; font-size: 11.5px; }
  body.portrait .hud-stats .hud-stat .ic .pxi { height: 11px; }
  body.portrait .hud-stats .hud-status { gap: 3px; }
  body.portrait .hud-stats .hud-status .st { font-size: 11px; gap: 1px; padding: 0; }
  body.portrait .hud-stats .hud-status .st .pxi { height: 11px; }
  body.portrait #hud-money { font-size: 14.5px; }
  body.portrait .hud-shop .hs-num { display: none; }
  body.portrait.prep #prep-bar { padding: 0 5px 0 9px; gap: 6px; }
  body.portrait.prep #prep-bar small { display: none; }
  body.portrait.prep #prep-bar b { font-size: 12px; overflow: hidden; text-overflow: ellipsis; }
  body.portrait.prep #prep-bar .pb-txt .pxi { display: none; }
  body.portrait.prep #prep-bar .btn { padding: 6px 8px; font-size: 11.5px; }
}

/* Nút chuyển tầng (Lầu G): sát ngay dưới HUD, ngang hàng và cùng độ mỏng với thẻ "sự kiện · hiệu ứng" */
body.portrait #floor-nav { top: calc(var(--top-h) + 3px); }
body.portrait #floor-nav .floor-toggle { min-height: 32px; padding: 2px 8px; gap: 6px; }
body.portrait.prep #floor-nav { top: calc(var(--top-h) + var(--prep-h) + 3px); }

/* Installed mobile app: keep only a light inset below the bottom controls. */
body.pwa-installed { --dock-safe-bottom: min(4px, env(safe-area-inset-bottom)); }

/* One size and spacing model for floating controls in every viewport. */
:root {
  --float-size: 40px;
  --float-gap: 6px;
  --float-step: calc(var(--float-size) + var(--float-gap));
  --float-edge: calc(4px + env(safe-area-inset-right));
}
body { --float-base: calc(var(--dock-h) + 6px); }
body.building { --float-base: calc(var(--dock-h) + var(--bbar-h, 214px) + 10px); }
body.portrait.building { --float-base: calc(var(--dock-h) + var(--bbar-h, 214px) + 6px); }
#side-actions {
  top: auto; right: var(--float-edge); bottom: calc(var(--float-base) + 2 * var(--float-step));
  width: var(--float-size); display: grid; grid-template-columns: var(--float-size); gap: var(--float-gap);
}
#side-actions .side-action, #btn-chat, #btn-store, #zoom-ctrl .hud-btn {
  width: var(--float-size); height: var(--float-size); min-width: var(--float-size); min-height: var(--float-size);
  flex: none; margin: 0; padding: 0; border-radius: 11px;
}
#btn-store { right: var(--float-edge); bottom: var(--float-base); }
#btn-chat { right: var(--float-edge); bottom: calc(var(--float-base) + var(--float-step)); }
#zoom-ctrl {
  right: calc(var(--float-edge) + var(--float-step)); bottom: var(--float-base);
  flex-direction: row-reverse; gap: var(--float-gap);
}
#side-actions .pxi, #btn-chat .pxi, #btn-store .pxi, #zoom-ctrl .pxi {
  width: auto; height: 20px; max-width: 22px; object-fit: contain;
}
#side-actions .badge, #btn-chat .sc-badge {
  top: -3px; right: -2px; min-width: 17px; height: 17px; font-size: 10px; line-height: 14px;
}
#btn-chat .sc-dot { right: -1px; width: 10px; height: 10px; }
/* Build mode uses two short rows above the tray. */
body.building #side-actions {
  bottom: calc(var(--float-base) + var(--float-step));
  width: calc(4 * var(--float-size) + 3 * var(--float-gap)); grid-template-columns: repeat(4, var(--float-size));
}
body.building #btn-chat { right: calc(var(--float-edge) + var(--float-step)); bottom: var(--float-base); }
body.building #zoom-ctrl { right: calc(var(--float-edge) + 2 * var(--float-step)); }
/* A short landscape screen keeps all controls in one row above the tray. */
@media (orientation: landscape) and (max-height: 520px) {
  body:not(.portrait):not(.building) { --float-base: calc(var(--dock-h) + 12px); }
  body.building #side-actions { right: calc(var(--float-edge) + 3 * var(--float-step)); bottom: var(--float-base); }
  body.building #zoom-ctrl [data-zoom] { position: fixed; right: calc(var(--float-edge) + 7 * var(--float-step)); bottom: var(--float-base); }
  body.building #build-bar {
    max-height: calc(100dvh - var(--top-h) - var(--dock-h) - var(--float-size) - 22px);
    overflow-y: auto; overscroll-behavior: contain;
  }
}
/* Two columns fit the normal rail on particularly short screens. */
@media (orientation: landscape) and (max-height: 380px) {
  body:not(.building) #side-actions { width: calc(2 * var(--float-size) + var(--float-gap)); grid-template-columns: repeat(2, var(--float-size)); }
}