/* ═══════════════════════════════════════════════════════════════
   HUDFIT — kích thước HUD cho MỌI màn hình (điện thoại ngang → tablet → desktop).
   Vị trí do js/hudfit.js đặt (inline !important) sau khi đo hộp thật; file này chỉ lo KÍCH THƯỚC theo --hs (0.6–1).
   Nạp SAU css/mobile.css.
   ═══════════════════════════════════════════════════════════════ */
:root{--hs:1}

/* ── hàng trên: thẻ người chơi · nhiệm vụ · tài nguyên ── */
html body #hud .hud-top{gap:calc(8px*var(--hs));flex-wrap:nowrap;align-items:flex-start}
html body #hud .profile{min-width:0;max-width:max(170px,calc(270px*var(--hs)));padding:calc(5px*var(--hs)) calc(14px*var(--hs)) calc(5px*var(--hs)) calc(5px*var(--hs));gap:calc(9px*var(--hs));border-radius:max(16px,calc(24px*var(--hs)))}
html body #hud .profile .avatar-ring{width:max(34px,calc(58px*var(--hs)));height:max(34px,calc(58px*var(--hs)))}
html body #hud .avatar-ring .lvl{min-width:max(18px,calc(24px*var(--hs)));height:max(18px,calc(24px*var(--hs)));font-size:max(10px,calc(12px*var(--hs)))}
html body #hud .pname{font-size:max(12px,calc(16px*var(--hs)))}
/* chữ + thanh XP co theo thẻ (trước đây thanh XP cố định 150px → tràn ra ngoài thẻ khi --hs nhỏ) */
html body #hud .profile-text{flex:1 1 auto;min-width:0;max-width:100%}
html body #hud .pname,html body #hud .pfarm{max-width:max(90px,calc(170px*var(--hs)))}
html body #hud .xpbar{box-sizing:border-box;width:max(84px,calc(150px*var(--hs)));max-width:100%;height:max(6px,calc(8px*var(--hs)))}
html body #hud .zone-name::before{flex:none;width:max(7px,calc(10px*var(--hs)));height:max(7px,calc(10px*var(--hs)));box-shadow:0 0 0 max(2px,calc(3px*var(--hs))) rgba(255,255,255,.35)}
html body.hud-compact #hud .pfarm{display:none}
html body #hud .quest-track{min-width:0;font-size:max(11px,calc(14px*var(--hs)));padding:calc(4px*var(--hs)) calc(12px*var(--hs)) calc(4px*var(--hs)) calc(5px*var(--hs));gap:calc(8px*var(--hs))}
html body #hud .quest-track>i{width:max(24px,calc(34px*var(--hs)));height:max(24px,calc(34px*var(--hs)));flex:none}
html body.hud-noquest #hud .quest-track{display:none!important}
html body #hud .resources{flex:0 0 auto;margin-left:auto;flex-wrap:nowrap;gap:calc(6px*var(--hs))}
html body #hud .res{font-size:max(12px,calc(16px*var(--hs)));padding:calc(3px*var(--hs)) calc(10px*var(--hs)) calc(3px*var(--hs)) calc(3px*var(--hs));gap:calc(5px*var(--hs))}
html body #hud .res>i,html body #hud .res i.img{width:max(22px,calc(30px*var(--hs)));height:max(22px,calc(30px*var(--hs)))}
html body #hud .res .res-add{width:max(17px,calc(22px*var(--hs)));height:max(17px,calc(22px*var(--hs)));font-size:max(11px,calc(14px*var(--hs)))}
html body.hud-compact #hud .res.clock,html body.hud-compact #hud .res .res-max{display:none}
html body #hud .resources .icon-btn{width:max(34px,calc(50px*var(--hs)));height:max(34px,calc(50px*var(--hs)))}
html body #hud .resources .icon-btn i,html body #hud .resources .icon-btn i.img{width:max(18px,calc(28px*var(--hs)));height:max(18px,calc(28px*var(--hs)))}
html body #hud .zone-name{margin:0;font-size:max(10.5px,calc(13.5px*var(--hs)));padding:calc(5px*var(--hs)) calc(13px*var(--hs)) calc(5px*var(--hs)) calc(9px*var(--hs))}
html body.touch #hud .hud-logo,html body.hud-compact #hud .hud-logo{display:none!important}

/* ── 2 cột nút bên: lưới, tự thêm cột khi thiếu chiều cao (vị trí + số hàng do hudfit.js đặt) ── */
html body #hud .hud-left,html body #hud .hud-right{display:grid;grid-auto-flow:column;grid-auto-columns:max-content;align-items:start;justify-items:center;align-content:start;width:auto;height:auto}
html body #hud .hud-right{direction:rtl}
html body #hud .hud-right>*{direction:ltr}
html body #hud .side-btn{width:max(48px,calc(72px*var(--hs)));font-size:max(9px,calc(10.5px*var(--hs)));gap:calc(2px*var(--hs))}
html body #hud .side-btn i{width:max(36px,calc(56px*var(--hs)));height:max(36px,calc(56px*var(--hs)));padding:calc(11px*var(--hs))}
html body #hud .side-btn i.img{padding:calc(9px*var(--hs))}
html body #hud .side-btn .badge{top:-3px;right:0;min-width:17px;height:17px;font-size:10px}
html body.hud-tiny #hud .side-btn span{display:none}
/* ô bản đồ tròn + logo HappyTown ở HUD: bỏ (theo yêu cầu 15/09 — thừa, chiếm chỗ; Bản đồ mở bằng nút bên trái) */
html body #hud #minimap,html body #hud .hud-logo{display:none!important}
html body #hud #minimap{grid-row:span 2;order:-2;margin:0;width:max(66px,calc(120px*var(--hs)));height:max(66px,calc(120px*var(--hs)));border-width:max(3px,calc(5px*var(--hs)))}
html body #hud .cam-btn{order:-1;margin:0;width:max(34px,calc(44px*var(--hs)));height:max(34px,calc(44px*var(--hs)))}

/* ── thanh dock dưới: cuộn ngang khi hẹp, chỉ icon khi màn nhỏ ── */
html body #hud .hud-bottom{gap:0;padding:calc(5px*var(--hs)) calc(8px*var(--hs));border-radius:max(16px,calc(26px*var(--hs)));justify-content:flex-start;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;overscroll-behavior-x:contain}
html body #hud .hud-bottom::-webkit-scrollbar{display:none}
html body #hud .hud-bottom .dock-btn{flex:0 0 auto;margin:0;min-width:0;width:max(46px,calc(80px*var(--hs)));padding:calc(5px*var(--hs)) 2px;font-size:max(9px,calc(11px*var(--hs)))}
html body #hud .hud-bottom .dock-btn i,html body #hud .hud-bottom .dock-btn i.img{width:max(26px,calc(38px*var(--hs)));height:max(26px,calc(38px*var(--hs)))}
html body.hud-compact #hud .hud-bottom .dock-btn{width:max(46px,calc(62px*var(--hs)))}
html body.hud-compact #hud .hud-bottom .dock-btn span{display:none}

/* ── cảm ứng: joystick trái dưới · nút hành động phải dưới ── */
html body #hud .joystick{left:calc(var(--safe-l,0px) + 14px*var(--hs));bottom:calc(var(--safe-b,0px) + 12px*var(--hs));width:max(100px,calc(130px*var(--hs)));height:max(100px,calc(130px*var(--hs)))}
html body #hud .stick{width:max(44px,calc(58px*var(--hs)));height:max(44px,calc(58px*var(--hs)));margin:calc(max(44px,calc(58px*var(--hs))) / -2)}
html body #hud .touch-actions{right:calc(var(--safe-r,0px) + 14px*var(--hs));bottom:calc(var(--safe-b,0px) + 12px*var(--hs));gap:calc(12px*var(--hs))}
html body #hud .tbtn{width:max(44px,calc(60px*var(--hs)));height:max(44px,calc(60px*var(--hs)))}
html body #hud .tbtn i{width:max(22px,calc(28px*var(--hs)));height:max(22px,calc(28px*var(--hs)))}
html body #hud .tbtn.jump{width:max(52px,calc(70px*var(--hs)));height:max(52px,calc(70px*var(--hs)))}
html body #hud .tbtn.jump i{width:max(26px,calc(34px*var(--hs)));height:max(26px,calc(34px*var(--hs)))}
html body #hud .tbtn.big{width:max(64px,calc(86px*var(--hs)));height:max(64px,calc(86px*var(--hs)))}
html body #hud .tbtn.big i{width:max(30px,calc(40px*var(--hs)));height:max(30px,calc(40px*var(--hs)))}
html body #hud .interact .btn{font-size:max(12px,calc(15px*var(--hs)))}

/* ── hội thoại NPC trên màn cảm ứng: không lấn sang joystick / nút hành động; điện thoại ngang bỏ khung chân dung ── */
html body.touch #dialog{width:min(860px,calc(100vw - 2 * (var(--hud-joy-r,0px) + 14px)))!important;max-width:calc(100vw - 2 * (var(--hud-joy-r,0px) + 14px))!important}
@media (orientation:landscape) and (max-height:540px){html body #dialog .dlg-portrait{display:none!important}}

/* ── hộp phần thưởng (#reward): luôn vừa màn — màn thấp (Safari có thanh tab, điện thoại ngang) thu gọn, nút Đóng/Nhận luôn thấy ── */
html body #reward{box-sizing:border-box;padding:calc(8px + var(--safe-t,0px)) calc(10px + var(--safe-r,0px)) calc(8px + var(--safe-b,0px)) calc(10px + var(--safe-l,0px))}
html body #reward .reward-card{box-sizing:border-box;max-height:calc(100vh - 16px);max-height:calc(100dvh - 16px);overflow-y:auto;overscroll-behavior:contain}
@media (max-height:700px){
  html body #reward .reward-card{width:min(720px,calc(100vw - 24px));padding:10px 12px 12px;border-radius:22px;overflow-x:hidden}
  html body #reward .reward-card::before{inset:7px;border-radius:16px}
  html body #reward .reward-plank{margin:0 auto 6px;padding:5px 26px}
  html body #reward .reward-plank h3{font-size:1.2em}
  html body #reward .reward-card>.reward-x{right:10px;top:10px;width:40px;height:40px;z-index:2}
  html body #reward .reward-gift,html body #reward .reward-chick{display:none}
  html body #reward .reward-sub{margin:0 44px 8px;padding:4px 14px;font-size:.84em}
  html body #reward .reward-items{gap:8px;margin-bottom:8px;padding:0 4px;flex-wrap:wrap}
  html body #reward .ritem{flex:1 1 110px;min-width:0;padding:8px 6px;gap:4px;border-radius:16px}
  html body #reward .ritem .ri-ico{width:clamp(48px,17vh,80px);height:clamp(48px,17vh,80px);border-radius:14px}
  html body #reward .ritem .ri-ico i,html body #reward .ritem .ri-ico svg{width:clamp(40px,14vh,64px);height:clamp(40px,14vh,64px);padding:clamp(4px,1.4vh,9px)}
  html body #reward .ritem b{font-size:1.15em;padding:0 12px}
  html body #reward .ritem span{padding:4px 8px;font-size:.76em}
  html body #reward .reward-btn{font-size:1.05em;padding:.4em 1.3em;margin:0 auto;min-height:44px;position:sticky;bottom:0}
}
/* 19/9: MÀN HÌNH CAO (máy tính) — hình quà + chú gà con nằm NGOÀI khung thẻ, mà thẻ đang
   overflow-y:auto nên bị CẮT NGANG (người chơi báo "element bự hơn khung, bị crop").
   Màn cao thì thẻ chắc chắn vừa, nên bỏ cắt; màn thấp giữ nguyên cuộn như cũ. */
@media (min-height:701px){
  html body #reward .reward-card{overflow:visible;max-height:none}
}
@media (max-height:420px){html body #reward .reward-sub{display:none}}
@media (max-height:320px){html body #reward .ritem span{display:none}}
/* popup phần thưởng / điểm danh đang mở → thông báo nổi tạm ẩn (không đè lên nút) */
html body:has(#reward:not(.hidden)) #toasts,html body:has(#ecoModal) #toasts{opacity:0!important;visibility:hidden!important}
/* 16/9: luôn hiện tên nông trại dưới tên nhân vật (kể cả HUD gọn / điện thoại) */
html body.hud-compact #hud .pfarm,html body #hud .pfarm{display:block!important;font-size:max(10px,.72em)}

/* 18/9: đang chơi mini-game (sân thể thao, đua, cờ, bowling…) thì ẩn thẻ hướng dẫn Admin Hạt Dẻ —
   trước đây nó che khung thành / bàn cờ nên người mới tưởng trò bị lỗi không chơi được */
body.sp-on #tutorial, body.racing #tutorial, body.mono-on #tutorial, body.chess-on #tutorial,
body.ludo-on #tutorial, body.domino-on #tutorial, body.bowl-on #tutorial, body.arranging #tutorial { display: none !important; }
body.sp-on #tutPointer, body.racing #tutPointer, body.mono-on #tutPointer, body.chess-on #tutPointer,
body.ludo-on #tutPointer, body.domino-on #tutPointer, body.bowl-on #tutPointer { display: none !important; }
html body.hud-compact #hud .res.barn .res-max{display:inline}

/* 18/9: đang mở bảng (Nông trại, Cửa hàng…) thì thông báo nổi dời sang GÓC TRÊN PHẢI,
   không che dòng "Cho ăn" / nút trong bảng nữa (tester báo phải chờ hết thông báo mới bấm được) */
html body:has(#panelRoot:not(.hidden)) #toasts{left:auto;right:calc(10px + var(--safe-r,0px));top:calc(8px + var(--safe-t,0px));
  transform:scale(.86);transform-origin:top right;align-items:flex-end;max-width:min(320px,60vw)}