/* ═══ 16/09: GỌN CHO ĐIỆN THOẠI — nạp sau cùng. Dòng hướng dẫn (.info-row) không bị chia cột; bảng ở màn ngang thấp (≤ 540 px) nhỏ gọn, thấy nhiều nội dung hơn ═══ */
.info-row{display:block!important;overflow:hidden;line-height:1.4}
.info-row>i{float:left;margin:0 12px 2px 0}
.info-row>.btn,.info-row>button{float:right;margin:4px 0 0 10px}
.info-row.g-openrow{display:flex!important}

@media (orientation:landscape) and (max-height:540px), (orientation:landscape) and (pointer:coarse) and (max-height:820px){
  .panel{width:min(1220px,calc(100vw - 16px))!important;height:calc(100vh - 14px)!important;height:calc(100dvh - 14px)!important;max-height:none!important;padding:6px 8px 8px!important;border-radius:20px!important}
  .panel::before,.panel::after,.panel-chick,.panel-hint{display:none!important}
  .panel-head{height:36px!important}
  .panel-plank{top:-4px!important;left:4px!important;padding:3px 16px 3px 5px!important;gap:7px!important;border-width:2px!important}
  .panel-plank::before,.panel-plank::after{display:none!important}
  .panel-plank>i{width:28px!important;height:28px!important;padding:5px!important;border-radius:9px!important}
  .panel-plank h3{font-size:1.02em!important;text-shadow:0 2px 0 #5b3416!important}
  .panel-x{width:40px!important;height:40px!important;right:-4px!important;top:-4px!important;border-width:3px!important}
  .panel-x i{width:20px!important;height:20px!important}
  .panel-body{margin:0!important;padding:8px 10px 10px!important;border-radius:14px!important;font-size:.86em}
  .panel.band-blue .panel-body{padding-top:8px!important}
  .panel.band-blue .panel-body::before{display:none!important}
  .info-row.g-openrow,.og-steps{display:none!important}
  .og-bonus{padding:4px 10px!important;margin:0 0 6px!important;font-size:.9em}
  .info-row{padding:6px 10px!important;border-radius:12px!important;font-size:.92em;margin-bottom:6px}
  .info-row>i{width:26px!important;height:26px!important;padding:4px!important;border-radius:8px!important;margin-right:8px}
  .ptabs{padding:3px!important;margin-bottom:6px!important;display:flex;overflow-x:auto;flex-wrap:nowrap!important;scrollbar-width:none}
  .ptabs::-webkit-scrollbar{display:none}
  .ptabs button{padding:5px 11px!important;font-size:.88em!important;white-space:nowrap;flex:none}
  .ptabs button i{width:16px!important;height:16px!important}
  .tiles{gap:6px!important;margin-bottom:8px!important}
  .tile{padding:6px 8px!important;border-radius:12px!important} .tile>i{width:32px!important;height:32px!important;padding:6px!important}
  .tile b{font-size:1.1em!important}
  .row,.srow,.chap,.qc,.mp-row{padding:6px 9px!important;border-radius:12px!important;margin-bottom:6px!important;gap:8px!important}
  .row>i,.srow .s-ico,.qc .qc-ico{width:30px!important;height:30px!important}
  .chap .ch-st{width:34px!important;height:34px!important}
  .r-title,.qc .qc-m b,.chap h4{font-size:.98em!important}
  .r-desc,.qc .qc-m p{font-size:.84em!important;margin:1px 0!important}
  .btn{padding:.42em .9em!important;font-size:.9em}
  .btn-sm{padding:.34em .75em!important;font-size:.84em!important;min-height:34px}
  .grid{gap:8px!important;grid-template-columns:repeat(auto-fill,minmax(140px,1fr))!important}
  .card{padding:8px!important;border-radius:14px!important}
  .card .c-ico{height:64px!important}
  .card .c-desc{font-size:.78em!important;-webkit-line-clamp:3;display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden}
  .empty-box{padding:14px!important}
  /* mini-game */
  #minigame .mg-head{padding:4px 8px 4px 12px!important}
  #minigame .mg-head h3{font-size:1.05em!important}
  #minigame .mg-head .icon-btn{width:34px!important;height:34px!important}
  #minigame .mg-stats span{padding:3px 8px!important;font-size:.82em}
  #minigame .mg-intro{padding:6px 10px!important;font-size:.84em}
  #minigame .mg-intro span{display:none}
  #minigame .mg-hub{gap:8px!important;grid-template-columns:repeat(auto-fill,minmax(150px,1fr))!important}
  #minigame .mg-card{padding:7px!important}
  #minigame .mg-card p,#minigame .mg-card .mg-desc{font-size:.76em!important}
  /* hộp thoại & thông báo */
  #toasts{max-width:min(420px,60vw)}
  #toasts .toast{padding:6px 10px!important;font-size:.84em}
  /* đơn hàng: thẻ gọn, hướng dẫn chỉ giữ tiêu đề + nút */
  .orow{padding:6px 8px!important;gap:8px!important;border-radius:14px!important;flex-wrap:wrap}
  .orow .o-thumb{width:52px!important;height:52px!important;border-radius:12px!important}
  .orow .o-thumb img,.orow .o-thumb i{max-width:40px;max-height:40px}
  .orow .o-thumb em{min-width:20px!important;height:20px!important;font-size:.72em!important;right:2px!important;bottom:2px!important;padding:0 5px!important;line-height:20px}
  .orow .o-main b{font-size:1.02em!important}
  .orow .o-main span{font-size:.86em}
  .orow .o-meta{margin-top:2px!important;gap:8px!important;font-size:.84em!important}
  .orow .o-how{margin-top:4px!important;padding:4px 8px!important;font-size:.84em!important}
  .orow .o-how .btn,.orow .g-orow .btn{padding:.25em .6em!important;font-size:.78em!important;min-height:34px}
  .orow .g-orow{margin-top:4px!important;padding-top:4px!important}
  .orow .g-orow ol{display:none!important}
  .orow .g-otitle b{font-size:.9em!important}
  .orow .o-side{gap:6px!important}
  .orow .price{font-size:.95em!important;padding:3px 10px 3px 5px!important}
  .orow .price i{width:20px!important;height:20px!important}
  /* chat: bỏ chữ trên nút tròn để nút ✕ luôn nằm trong khung */
  #mpChat .mc-pill .t{display:none}
  #mpChat .mc-pill{padding:0 8px!important}
  #mpChat .mc-title{font-size:14px!important}
  /* bảng người chơi: nút gọn thành biểu tượng */
  .mp-row .btn{padding:.3em .6em!important}
}
@media (orientation:portrait) and (max-width:520px){
  .panel{width:calc(100vw - 12px)!important;padding:6px!important}
  .panel-body{padding:10px!important;font-size:.9em}
  .panel-plank h3{font-size:1.1em!important}
  .panel-hint,.panel-chick{display:none!important}
}

#mpChat .mc-head{min-width:0}
#mpChat .mc-x{margin-left:2px}

/* ── cảnh báo trình duyệt nhúng (js/inapp.js) ── */
.inapp-warn{background:#fff6dc;border:2px solid #f0b24a;border-radius:14px;padding:10px 12px;margin:0 0 12px;font-size:13.5px;line-height:1.45;color:#5a3d12}
.inapp-warn b{color:#3d2a08}
.inapp-btns{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.inapp-btns button{flex:1 1 auto;min-height:38px;border:0;border-radius:10px;background:#f0a828;color:#2b1a02;font:inherit;font-weight:800;padding:6px 10px;cursor:pointer}
.inapp-btns button.ghost{background:transparent;border:1.5px solid #d9a95a;color:#6b4a14;font-weight:700}
.inapp-btns button:disabled{opacity:.7}
.inapp-warn.inapp-min{padding:6px 10px;font-size:12px}
.inapp-warn.inapp-min br,.inapp-warn.inapp-min .inapp-btns{display:none}

/* ── 17/9: joystick & nút hành động cách mép màn hình ≥ 30px — sát mép quá thì ngón tay vuốt trúng cử chỉ Back của điện thoại (iOS vuốt từ mép trái, Android cả 2 mép) → thoát game ── */
@media (pointer:coarse){
  html body #hud .joystick{left:calc(var(--safe-l,0px) + max(34px,16px*var(--hs,1)));bottom:calc(var(--safe-b,0px) + max(40px,30px*var(--hs,1)))}
  html body #hud .touch-actions{right:calc(var(--safe-r,0px) + max(34px,16px*var(--hs,1)));bottom:calc(var(--safe-b,0px) + max(40px,30px*var(--hs,1)))}
}

/* 17/9 (góp ý designer): bong bóng gợi ý đầu bảng thò lên trên mép màn hình thấp → bị cắt chữ. Màn thấp: nằm gọn trong thanh tiêu đề, tối đa 2 dòng */
@media (max-height:620px){
  .panel-hint{top:6px!important;max-width:min(300px,34vw)!important;padding:6px 12px!important;font-size:.78em!important;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .panel-hint:empty{display:none!important}
}