/* ═══════════════════════════════════════════════════════════════
   ĐIỆN THOẠI — nạp cuối cùng, chỉ vá những chỗ bị che / bị đẩy khỏi màn hình trên màn hẹp & cảm ứng
   ═══════════════════════════════════════════════════════════════ */

/* màn hẹp: chân trang đăng nhập nằm cuối nội dung (không dính đáy màn hình che nút "Chơi thử"),
   nút "Bắt đầu hành trình" luôn nổi ở đáy màn tạo nhân vật */
@media (max-width:700px) and (orientation:portrait),(max-width:700px) and (min-height:541px){
  #screen-auth .foot-bar{position:relative!important;left:auto;right:auto;bottom:auto!important;margin-top:4px}
  #screen-auth .auth-wrap{padding-bottom:16px!important;min-height:0!important}
  #screen-auth .social{gap:6px}
  #screen-auth .social button{min-width:0;padding:8px 4px!important;font-size:.84em;gap:5px}
  #screen-auth .social button svg,#screen-auth .social button img{width:17px;height:17px;flex:none}
  #screen-character .char-actions{position:fixed;left:12px;right:12px;bottom:calc(10px + var(--safe-b,0px));z-index:30;margin:0!important;padding:0!important}
  #screen-character .char-panel{margin-bottom:88px!important}

  /* hộp thoại (tài khoản, tặng quà, trao đổi, rủ chơi): sát đáy như bottom-sheet, cuộn được bên trong */
  .acm-wrap{padding:10px;align-items:flex-end}
  .acm-card{max-height:calc(100vh - 20px);max-height:calc(100dvh - 20px);overflow-y:auto;-webkit-overflow-scrolling:touch}
  .so-grid{max-height:32vh}
  .pa-grid{grid-template-columns:1fr 1fr}
  .pa-act{padding:9px}
  .pa-act span:last-child{font-size:11px}
}

/* thẻ hướng dẫn Admin Hạt Dẻ: không tràn ngang, nút xuống dòng */
@media (max-width:700px) and (orientation:portrait),(max-width:700px) and (min-height:541px){
  .tut-card{width:calc(100vw - 20px)!important;bottom:calc(214px + var(--safe-b,0px))!important}
  .tut-bubble{min-width:0;padding:34px 12px 12px!important}
  .tut-plank{padding:6px 16px 6px 8px!important;top:-26px!important;gap:8px!important}
  .tut-plank i{width:34px!important;height:34px!important;padding:6px!important}
  .tut-plank .tut-admin{font-size:1.15em!important}
  .tut-text{font-size:.98em!important;line-height:1.5!important;padding:10px 12px!important;max-height:34vh;overflow-y:auto}
  .tut-actions{flex-wrap:wrap;gap:8px!important;margin-top:10px!important}
  .tut-note{flex:1 1 100%;margin-right:0!important;justify-content:center;font-size:.82em!important;padding:6px 10px!important}
  .tut-actions .btn{flex:1 1 0;min-width:0;padding:.7em .8em!important;font-size:1em!important;justify-content:center}
}

/* hàng ô số liệu trong bảng (Cửa hàng, Nâng cấp…): 2 cột, không tràn ngang */
@media (max-width:700px){
  #panelBody .tiles{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important}
  #panelBody .tile{min-width:0;padding:8px 9px;gap:7px}
  #panelBody .tile b{font-size:1.05em;white-space:nowrap}
  #panelBody .tile>div{min-width:0}
  #panelBody .tile span{font-size:.72em}
  #panelBody .tile i.ico,#panelBody .tile>i{flex:none}
  /* hàng nút trong thẻ (Nâng cấp: Mua ô · Sắp xếp · Trang trí…): cho xuống dòng, chữ được co */
  #panelBody .card .c-row,#panelBody .card .c-row:has(.btn-ghost){flex-wrap:wrap!important}
  #panelBody .card .c-row .btn{white-space:normal!important;flex:1 1 auto!important;min-width:0;text-align:center;justify-content:center}
}

/* thanh công cụ dưới đáy: căn giữa khi vừa, cuộn được từ mép trái khi tràn (justify-content:center cắt mất 2 đầu) */
@media (max-width:700px){
  #hud .hud-bottom{justify-content:flex-start!important;overscroll-behavior-x:contain}
  #hud .hud-bottom>:first-child{margin-left:auto}
  #hud .hud-bottom>:last-child{margin-right:auto}
}



/* thanh "Đang thăm nông trại" và thanh "Hẹn chơi" không chồng lên nhau */
#visitBar ~ #partyBar,#partyBar ~ #visitBar{top:calc(112px + var(--safe-t,0px))}
@media (max-width:640px){#visitBar ~ #partyBar,#partyBar ~ #visitBar{top:calc(170px + var(--safe-t,0px))}}

/* chạm: nút trong thanh hẹn chơi / quà đủ to để bấm */
@media (pointer:coarse){
  #partyBar button,#visitBar button{min-height:36px}
  .so-item{min-height:78px}
}

/* bàn cờ tỷ phú trên điện thoại: thanh "Hẹn chơi" gọn ở góc trên phải, không đè nút lượt đi ở đáy */
@media (max-width:700px){
  body.mono-on #partyBar{top:calc(8px + var(--safe-t,0px));bottom:auto;left:auto;right:8px;transform:none;padding:4px 6px 4px 10px;font-size:11px;gap:4px 6px;max-width:62vw}
  body.mono-on #partyBar .pb-st,body.mono-on #partyBar .pb-acts{display:none}
  body.mono-on #partyBar button{padding:5px 8px;font-size:11px;min-height:0}
}

/* bàn cờ tỷ phú trên điện thoại: bảng lượt đi nằm dưới dãy tiền, 4 người chơi xếp lưới 2×2 (trước đây đè lên HUD),
   nút đáy thu gọn, "Tua nhanh" đưa lên trên thanh lượt đi, thông báo nổi phía trên nút phóng to */
@media (max-width:700px) and (orientation:portrait),(max-width:700px) and (min-height:541px){
  #monoHud .mh-top{top:calc(122px + var(--safe-t,0px));gap:4px;width:calc(100vw - 20px)}
  #monoHud .mh-turn{padding:5px 14px;gap:8px;font-size:.86em;box-shadow:0 3px 0 #5a3010}
  #monoHud .mh-pot{font-size:.76em;padding:3px 10px;max-width:calc(100vw - 20px)}
  #monoHud .mh-players{top:calc(206px + var(--safe-t,0px));left:10px;right:10px;width:auto;display:grid;grid-template-columns:1fr 1fr;gap:6px}
  #monoHud .mp{padding:5px 8px;gap:7px;border-radius:12px;box-shadow:0 2px 0 #c9a46a}
  #monoHud .mp.now{transform:none}
  #monoHud .mp-dot{width:18px;height:18px;border-width:2px}
  #monoHud .mp-main b{font-size:.8em} #monoHud .mp-main span{font-size:.7em}
  #monoHud .mh-bar{bottom:calc(12px + var(--safe-b,0px));width:calc(100vw - 20px);gap:6px}
  #monoHud .mh-hint{font-size:.8em;padding:4px 12px;text-align:center;max-width:100%}
  #monoHud .mh-acts{flex-wrap:wrap;justify-content:center;gap:8px}
  #monoHud .mh-acts .btn{padding:.55em 1em;font-size:.92em}
  #monoHud .mh-fast{right:10px;bottom:calc(142px + var(--safe-b,0px));padding:6px 10px;font-size:.8em}
  body.mono-on #toasts{bottom:calc(244px + var(--safe-b,0px));right:10px;left:10px;align-items:flex-end}
}

/* đua xe trên màn cảm ứng: bỏ dòng hướng dẫn phím A/D · Shift · SPACE (đã có nút lái / nitro trên màn hình) */
@media (pointer:coarse){#raceHud .rx-hint{display:none!important}}
body.touch #raceHud .rx-hint{display:none!important}

/* đua xe cảm ứng: cần lái (trái, đáy 120px) & NITRO (phải) chiếm giữa màn → thanh tốc độ + km/h xuống sát đáy */
@media (pointer:coarse){
  #raceHud .rh-speed{bottom:calc(34px + var(--safe-b,0px))!important;width:min(300px,64vw)}
  #raceHud .rx-kmh{bottom:calc(54px + var(--safe-b,0px))!important}
}

/* ═══ ĐIỆN THOẠI CẦM DỌC → nhắc xoay ngang (game chỉ chơi màn ngang; app iOS đã khoá ngang trong Info.plist) ═══ */
#rotateHint{display:none}
@media (orientation:portrait) and (pointer:coarse) and (max-width:620px){
  #rotateHint{position:fixed;inset:0;z-index:2147483000;display:flex;align-items:center;justify-content:center;
    padding:calc(24px + var(--safe-t,0px)) 20px calc(24px + var(--safe-b,0px));touch-action:none;
    background:radial-gradient(120% 80% at 50% 28%,#f2fbff 0%,#bfe6ff 55%,#96cdf2 100%)}
  #rotateHint .rot-card{width:min(340px,100%);display:flex;flex-direction:column;align-items:center;gap:10px;padding:24px 22px 22px;border-radius:26px;
    background:linear-gradient(180deg,#fffdf8,#fbefd9);border:3px solid #e2c89a;box-shadow:0 8px 0 rgba(170,130,70,.35),0 18px 40px rgba(40,70,110,.25);
    color:#4a2c12;text-align:center;font-family:'Nunito',system-ui,sans-serif}
  #rotateHint .rot-logo{width:min(230px,78%);height:auto;margin-top:-4px}
  #rotateHint .rot-phone{position:relative;width:56px;height:92px;margin:14px 0 10px;border:5px solid #6b3f1c;border-radius:14px;
    background:linear-gradient(180deg,#d9f1ff,#9fd3f5);box-shadow:0 4px 0 rgba(107,63,28,.3);animation:rotPhone 2.6s ease-in-out infinite}
  #rotateHint .rot-phone::after{content:'';position:absolute;left:50%;bottom:5px;width:14px;height:4px;margin-left:-7px;border-radius:4px;background:#6b3f1c}
  #rotateHint b{font:900 1.45em/1.15 'Baloo 2','Nunito',sans-serif;color:#5b3412}
  #rotateHint span{font-weight:700;font-size:.98em;line-height:1.45;color:#7a5a36}
  #btnRotateFs{margin-top:6px;padding:11px 24px;border-radius:999px;border:0;background:linear-gradient(180deg,#ffe07a,#f7b029);color:#5a3a00;
    font:900 1.02em 'Baloo 2','Nunito',sans-serif;box-shadow:0 5px 0 #c98a12}
  #btnRotateFs[hidden]{display:none}
  #btnRotateOpen{margin-top:2px;padding:10px 22px;border-radius:999px;border:0;background:linear-gradient(180deg,#8fd3ff,#2f7cf6);color:#fff;
    font:900 1em 'Baloo 2','Nunito',sans-serif;box-shadow:0 5px 0 #17489f}
  #rotateHint .rot-tip{margin:4px 0 0;padding:9px 12px;border-radius:14px;background:#fff6dc;border:2px dashed #e2c89a;font-weight:800;font-size:.9em;line-height:1.4;color:#6b4a22}
  #btnRotateOpen[hidden],#rotateHint .rot-tip[hidden]{display:none}
}
@keyframes rotPhone{0%,18%{transform:rotate(0)}45%,78%{transform:rotate(-90deg)}100%{transform:rotate(0)}}

/* bàn cờ tỷ phú: không cần joystick / nút hành động đi bộ (trước đây vẫn hiện, đè nút phóng to) */
body.mono-on #joystick,body.mono-on .touch-actions,body.mono-on .interact{display:none!important}

/* ═══════════════════════════════════════════════════════════════
   ĐIỆN THOẠI CẦM NGANG (màn thấp ≤ 540px: iPhone 375–440, Android 360–412)
   HUD gọn: hàng trên 1 dòng · cột nút trái 1 cột · cột phải 2 cột + bản đồ nhỏ ·
   joystick góc trái dưới · nút hành động góc phải dưới · dock chỉ icon ở giữa đáy
   ═══════════════════════════════════════════════════════════════ */
@media (orientation:landscape) and (max-height:540px){

  /* thẻ hướng dẫn Admin Hạt Dẻ: nằm đáy, bỏ ảnh chân dung, chữ gọn */
  .tut-card{top:auto!important;bottom:calc(8px + var(--safe-b,0px))!important;width:min(760px,calc(100vw - 150px))!important}
  .tut-portrait{display:none!important}
  .tut-bubble{min-width:0;padding:24px 14px 10px!important}
  .tut-plank{top:-20px!important;left:14px!important;transform:none!important;padding:3px 14px 3px 5px!important;gap:6px!important}
  .tut-plank i{width:26px!important;height:26px!important;padding:4px!important}
  .tut-plank .tut-admin{font-size:1em!important}
  .tut-text{font-size:.86em!important;line-height:1.4!important;padding:8px 12px!important;max-height:30vh;overflow-y:auto}
  .tut-actions{margin-top:8px!important;gap:6px!important;flex-wrap:nowrap!important}
  .tut-note{font-size:.76em!important;padding:4px 10px!important;margin-right:auto}
  .tut-actions .btn{flex:0 0 auto!important;padding:.45em 1em!important;font-size:.88em!important}

  /* hội thoại NPC */
  #dialog{bottom:calc(8px + var(--safe-b,0px))!important;width:min(760px,calc(100vw - 150px))!important;flex-direction:row!important;align-items:flex-end!important;gap:10px!important}
  .dlg-portrait{width:72px!important;height:72px!important;border-radius:16px!important}
  .dlg-box{padding:10px 14px!important;font-size:.9em}


  /* bàn cờ: 4 người chơi gọn hơn */
  #monoHud .mh-players{top:calc(56px + var(--safe-t,0px));width:180px;gap:5px}
  #monoHud .mp{padding:4px 8px;gap:7px;border-radius:12px}
  #monoHud .mp-dot{width:18px;height:18px;border-width:2px}
  #monoHud .mp-main b{font-size:.8em} #monoHud .mp-main span{font-size:.7em}
  #monoHud .mh-top{top:calc(56px + var(--safe-t,0px))}
  #monoHud .mh-bar{bottom:calc(8px + var(--safe-b,0px));gap:5px}
  #monoHud .mh-acts .btn{padding:.5em 1em;font-size:.9em}

  /* màn tạo nhân vật: tiêu đề nhỏ, khung xem 3D trái, bảng chọn phải cuộn bên trong, nút "Bắt đầu" dính đáy bảng */
  #screen-character{padding:6px calc(10px + var(--safe-r,0px)) calc(6px + var(--safe-b,0px)) calc(10px + var(--safe-l,0px))!important}
  #screen-character .note-tl,#screen-character .note-tr,#screen-character .char-note,#screen-character .sign-br{display:none!important}
  #screen-character .corner-tl{width:44px!important;height:44px!important;left:calc(10px + var(--safe-l,0px))!important;top:8px!important}
  #screen-character .char-head{margin:0 0 4px!important}
  #screen-character .char-head .ribbon{padding:4px 28px 3px!important;border-radius:12px!important}
  #screen-character .char-head h2{font-size:22px!important}
  #screen-character .char-head .plank{display:none!important}
  #screen-character .char-wrap{grid-template-columns:minmax(0,1fr) minmax(300px,46vw)!important;grid-template-rows:minmax(0,1fr)!important;gap:10px!important;width:100%!important;flex:1;min-height:0;height:calc(100vh - 56px);height:calc(100dvh - 56px)}
  #screen-character .hero-list{display:none!important}
  #screen-character .char-stage{min-height:0!important}
  #screen-character .char-panel{min-height:0;height:100%;margin:0!important;grid-template-columns:68px minmax(0,1fr)!important;border-radius:20px!important}
  #screen-character .char-tabs{padding:8px 6px!important;gap:6px!important;overflow-y:auto}
  #screen-character .char-tabs button{width:54px!important;height:54px!important;font-size:.6em!important;border-radius:14px!important}
  #screen-character .char-tabs button i{width:22px!important;height:22px!important}
  #screen-character .char-content{min-height:0;overflow-y:auto;padding:10px 12px 0!important;display:flex;flex-direction:column}
  #screen-character .char-actions{position:sticky!important;left:auto!important;right:auto!important;bottom:0!important;margin-top:auto!important;padding:8px 0 10px!important;
    background:linear-gradient(180deg,rgba(244,229,200,0),#f4e5c8 32%);flex-wrap:nowrap}
  #screen-character .char-actions .btn{padding:.55em 1em}
}
/* cầm ngang máy rất hẹp (iPhone SE / mini): bỏ thanh nhiệm vụ, bỏ chữ dưới nút bên, dock hẹp hơn */
@media (orientation:landscape) and (max-height:540px) and (max-width:780px){
}

/* ═══ ĐIỆN THOẠI CẦM NGANG (tiếp): đăng nhập 2 cột · thông báo · câu cá · đua xe · màn tạo nhân vật ═══ */
@media (orientation:landscape) and (max-height:540px){
  /* đăng nhập: logo trái, thẻ phải (cuộn bên trong), MXH gọn dưới logo, nút ngôn ngữ góc trái */
  #screen-auth{overflow:hidden!important}
  #screen-auth .auth-wrap{position:absolute!important;inset:0!important;display:grid!important;grid-template-columns:minmax(0,1fr) min(400px,50vw)!important;
    align-items:center!important;gap:12px!important;width:auto!important;min-height:0!important;height:auto!important;margin:0!important;
    padding:calc(8px + var(--safe-t,0px)) calc(12px + var(--safe-r,0px)) calc(8px + var(--safe-b,0px)) calc(12px + var(--safe-l,0px))!important}
  #screen-auth .auth-brand{position:static!important;display:flex!important;justify-content:center;align-items:center;margin:0!important;padding:0 0 44px!important;max-width:none!important}
  #screen-auth .ht-brand--auth{--bw:min(40vw,380px)!important}
  #screen-auth .auth-card{position:relative!important;left:auto!important;right:auto!important;top:auto!important;width:100%!important;max-width:none!important;
    max-height:calc(100vh - 16px);max-height:calc(100dvh - 16px);overflow-y:auto;overscroll-behavior:contain;margin:0!important;transform:none!important;zoom:1!important}
  #screen-auth .auth-head{padding:6px 14px 0!important}
  #screen-auth .auth-head h3{font-size:1.05em!important}
  #screen-auth .auth-hello{display:none}
  #screen-auth .auth-body{padding:8px 14px 12px!important}
  #screen-auth .auth-form{gap:6px!important}
  #screen-auth .social button{padding:6px 8px!important}
  #screen-auth .or{margin:4px 0!important}
  #screen-auth .lang-pill{left:calc(10px + var(--safe-l,0px))!important;right:auto!important;top:calc(8px + var(--safe-t,0px))!important;transform:scale(.85);transform-origin:top left}
  #screen-auth .foot-bar{position:fixed!important;left:0!important;right:auto!important;bottom:0!important;width:calc(100vw - min(400px,50vw) - 24px);
    padding:4px 8px calc(6px + var(--safe-b,0px))!important;justify-content:center!important;gap:8px!important;flex-wrap:nowrap!important;background:none!important}
  #screen-auth .foot-bar>span:first-child,#screen-auth .foot-bar .links,#screen-auth .foot-bar .sep,#screen-auth .foot-bar .stores,#screen-auth .foot-bar .ver{display:none!important}
  #screen-auth .foot-bar .circle-soc{width:34px!important;height:34px!important}

  /* thông báo nổi: dưới hàng trên cùng, thu nhỏ; đua xe → bên phải dưới NITRO; bàn cờ → góc phải trên */
  #toasts{top:calc(50px + var(--safe-t,0px));transform:translateX(-50%) scale(.86);transform-origin:top center}
  body.racing #toasts{top:calc(172px + var(--safe-t,0px));bottom:auto;left:auto;right:calc(10px + var(--safe-r,0px));transform:scale(.78);transform-origin:top right;align-items:flex-end}
  body.mono-on #toasts{top:calc(56px + var(--safe-t,0px));bottom:auto;left:auto;right:calc(10px + var(--safe-r,0px));transform:scale(.85);transform-origin:top right;align-items:flex-end}

  /* câu cá: thẻ không cao quá màn, cuộn được */
  #fishGame .fg-card{bottom:calc(6px + var(--safe-b,0px))!important;max-height:calc(100vh - 12px);max-height:calc(100dvh - 12px);overflow-y:auto;overscroll-behavior:contain}

  /* đua xe: ô vật phẩm lên cao hơn để không chạm cần lái */
  #raceHud .rx-item{top:calc(66px + var(--safe-t,0px))!important;width:82px!important;padding:5px 4px!important}   /* race.js chèn CSS lúc chạy → cần !important */

  /* màn tạo nhân vật: thanh động tác nằm đáy khung 3D, mũi tên giữa hai bên */
  #screen-character .stage-anims{position:absolute!important;left:50%!important;right:auto!important;bottom:8px!important;top:auto!important;transform:translateX(-50%)!important;
    margin:0!important;flex-wrap:nowrap!important;max-width:calc(100% - 16px)!important;gap:4px!important;padding:4px!important}
  #screen-character .stage-anims button{padding:4px 10px!important;font-size:.76em!important}
  #screen-character .stage-arrow{width:46px!important;height:46px!important;top:50%!important}
}
@media (orientation:landscape) and (max-height:420px){
  #fishGame .fg-card{zoom:.76}
}
@media (orientation:landscape) and (max-height:540px) and (max-width:780px){
  #screen-character .stage-anims{display:none!important}
}

/* cầm ngang: thẻ hướng dẫn Admin Hạt Dẻ lên TRÊN (giữa 2 cột nút), chừa đáy cho joystick / nút hành động / dock;
   ô "1/8" nằm góc phải thẻ thay vì chiếm nguyên một hàng trống */
@media (orientation:landscape) and (max-height:540px){
  .tut-card{top:calc(50px + var(--safe-t,0px))!important;bottom:auto!important;width:min(700px,calc(100vw - 236px))!important}
  .tut-head{position:absolute!important;top:5px!important;right:12px!important;margin:0!important}
  .tut-step{padding:2px 10px!important;font-size:.76em!important}
  .tut-bubble{padding-top:30px!important}
}

/* cầm ngang: hội thoại NPC gọn (không đè thẻ hướng dẫn phía trên) */
@media (orientation:landscape) and (max-height:540px){
  #dialog .dlg-box{padding:8px 12px!important}
  #dlgName{font-size:.9em!important}
  #dlgText{font-size:.86em!important;line-height:1.4!important;padding:8px 12px!important;max-height:28vh;overflow-y:auto}
  #dialog .btn,#dialog .dlg-box button{padding:.35em .9em!important;font-size:.86em!important;min-height:32px!important}
}