/* ================================================================
   ĐIỆN THOẠI (nạp sau cùng): chạm, cài như app, tai thỏ; cầm ngang (màn thấp) và cầm dọc
   Cầm ngang: (orientation: landscape) and (max-height: 500px) · Cầm dọc: (orientation: portrait) and (max-width: 560px)
   ================================================================ */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; touch-action: manipulation; overscroll-behavior: none; -webkit-tap-highlight-color: transparent; }
body { overscroll-behavior: none; }
/* Tai thỏ, thanh vuốt dưới đáy: game nằm trong vùng an toàn (máy tính: env() = 0, không đổi gì) */
#app { top: env(safe-area-inset-top, 0px); right: env(safe-area-inset-right, 0px); bottom: env(safe-area-inset-bottom, 0px); left: env(safe-area-inset-left, 0px); }

/* ---------- Máy cảm ứng ---------- */
@media (pointer: coarse) {
  /* Giữ ngón tay không bôi đen chữ, không hiện menu lưu ảnh */
  #screen, #topbar { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
  #screen :is(input, textarea, select) { -webkit-user-select: text; user-select: text; }
  img { -webkit-user-drag: none; }
  /* Kính mờ (backdrop-filter) rất nặng máy điện thoại, nền khung đã đủ tối: bỏ */
  * { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
  /* Nút nhỏ: đủ cao để chạm trúng */
  .part-tab, .strip-arrow { min-height: 34px; }
  button.link { min-height: 30px; padding-top: 4px; padding-bottom: 4px; }
  .g-card button:not(.btn-game), .shop button[data-buy] { min-height: 32px; }
  .fb-chip { min-height: 30px; padding-left: 9px; padding-right: 9px; }
  /* Biển tên trên bức Thành: không nhỏ hơn mức đọc được trên điện thoại */
  .pmap .bld-sign b { font-size: clamp(11px, calc(var(--mw) * .0118), 18px); }
  .pmap .bld-sign small { font-size: clamp(9.5px, calc(var(--mw) * .0071), 11px); }
  /* Rê chuột không có trên điện thoại: bỏ hiệu ứng "rê vào" bị kẹt sau khi chạm */
  .pspot:hover .pspot-glow { opacity: 0; }
}

/* ---------- Cầm ngang (điện thoại, màn thấp) ---------- */
@media (orientation: landscape) and (max-height: 500px) {
  :root { --tb-h: 44px; }
  /* Thanh trên: một hàng gọn, nút chỉ còn biểu tượng */
  #topbar { padding: 0 10px; gap: 8px; }
  #chapter-name { font-size: 13px; }
  .tb-res { gap: 4px; }
  .tb-res span { font-size: 12.5px; padding: 1px 8px 1px 4px; }
  #topbar nav { gap: 3px; }
  #topbar nav button { height: 34px; padding: 0 3px; }
  #topbar nav button span { display: none; }
  #topbar nav button i { width: 28px; height: 28px; }

  /* Bảng: dùng hết chiều cao, đầu / chân gọn */
  .panel-screen, .has-topbar .panel-screen { padding: 4px 6px 4px; }
  .panel-screen > .panel { padding: 6px 12px 6px; border-radius: 10px; }
  .panel-head h2 { font-size: 17px; margin: 0; line-height: 1.25; }
  .panel-head h2 small { font-size: 11px; }
  .panel-head .fd-tabs { margin-top: 2px; }
  .panel-head .fd-tab { padding: 5px 10px; font-size: 12.5px; }
  .panel-body { padding-top: 6px; }
  .panel-foot, .panel-foot.f-actions { margin-top: 2px; padding-top: 5px; }
  .panel-foot :is(.btn-game, button) { padding: 5px 12px; font-size: 12.5px; }
  .panel p.desc { margin: 2px 0 6px; font-size: 12.5px; }

  /* Cửa hàng: chủ tiệm thu nhỏ, bỏ lời rao */
  .shop-head { min-height: 0; gap: 8px; }
  .shop-head .thumb.keeper { height: 46px; }
  .shop-say p { display: none; }

  /* Hành trang: dải tướng thấp lại */
  .panel .bh-chip { width: 66px; height: 74px; }
  .panel .bh-chip .thumb { height: 40px; }
  .panel .bh-chip span { font-size: 10.5px; }
  .panel .bh-chip small { display: none; }

  /* Đội hình: 3 cột cạnh nhau (ô đội hình | đang nghỉ | chi tiết), mỗi cột tự cuộn */
  .formation-screen .panel-body.fm-body { display: flex; overflow: hidden; }
  .fm-layout { display: grid; grid-template-columns: 268px 150px minmax(0, 1fr); gap: 8px; }
  .fm-left, .fm-right { overflow-y: auto; }
  .fm-left { container-type: size; gap: 4px; }
  .panel .fm-left .f-cell { height: clamp(58px, calc((100cqh - 74px) / 3), 120px); }
  .fm-left .f-grid { gap: 4px; }
  .fm-hint, .f-enemy, .f-bonus { display: none; }
  .fm-bench-list { flex-direction: column; flex-wrap: nowrap; }
  .panel .fm-bench .r-card { width: auto; }
  .fm-bench-head small { display: none; }
  .panel .fd-head .thumb.big { height: 96px; }
  /* Thế trận: 5 thẻ một hàng, lưới lớn nhỏ lại */
  .trp-cards { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; padding: 6px; }
  .panel .trp-card { padding: 8px 4px 6px; }
  .trp-detail { grid-template-columns: auto minmax(0, 1fr) auto; justify-items: stretch; }
  .tshape.big, .tb-rows { grid-template-columns: repeat(3, 56px); }
  .tb-rows { grid-template-columns: none; grid-template-rows: repeat(3, 56px); }
  .tshape.big > * { width: 56px; height: 56px; }
  .tshape.big > * .thumb { height: 52px; }

  /* Bản đồ: tên hồi to đè lên các ải: bỏ (tên hồi đã có ở dải hồi dưới đáy) */
  .stage-map .chapter-title { display: none; }

  /* Nhiệm vụ: dòng nhân vật chính dưới đáy gọn */
  .q-mc .thumb { height: 34px; width: 30px; }

  /* Màn mở đầu: logo bên trái, khung đăng nhập bên phải, bỏ bớt người đứng */
  .title-logo { top: 54px; left: 2%; right: 50%; }
  .title-logo h1 { font-size: clamp(30px, 11vh, 52px); }
  .tl-kicker { display: none; }
  .title-menu { left: auto; right: 3%; bottom: auto; top: 50%; transform: translateY(-50%); width: min(360px, 46vw); max-height: 94%; overflow-y: auto; }
  .title-heroes .hero.r { display: none; }
  .title-heroes .hero.l { left: 26%; height: 60vh; }
  .age-rate span { font-size: 10.5px; max-width: 46vw; }
  /* Tạo nhân vật: vừa một màn */
  .create-screen .panel { max-height: 100%; }
}

/* Cầm ngang trên máy nhỏ (rộng < 820): bỏ dòng tên hồi ở thanh trên cho đủ chỗ tiền + nút */
@media (orientation: landscape) and (max-height: 500px) and (max-width: 820px) {
  #chapter-name { display: none; }
  .tb-res span { padding: 1px 6px 1px 3px; font-size: 12px; }
}

/* ---------- Cầm dọc (điện thoại) ---------- */
@media (orientation: portrait) and (max-width: 560px) {
  #topbar nav button { font-size: 10.5px; }
}

/* ---------- Trận đấu khi cầm dọc: sân khấu thu về khung 16:9 nằm giữa màn ----------
   Cảnh nền vẽ ngang, người đứng đúng như trên máy tính (vị trí SLOTS.wide). Trên khung: nút Tự động / tốc độ, số lượt,
   nhật ký trận; dưới khung: bảng lệnh ra chiêu (gần ngón cái). Nền quanh khung là chính cảnh nền đó, làm mờ và tối đi.
   cqw / cqh ở đây tính theo khung .battle (cả màn): khung 16:9 cao 56.25cqw, mép trên ở 50cqh - 28.125cqw. */
@media (orientation: portrait) {
  .battle { container-type: size; background: #0d0a07; }
  .battle::before {
    content: ''; position: absolute; inset: -24px; pointer-events: none;
    background: var(--scene, none) center / cover no-repeat; filter: blur(14px) brightness(.32) saturate(.8);
  }
  .battle .stage {
    top: calc(50cqh - 28.125cqw); bottom: auto; height: 56.25cqw; aspect-ratio: auto;
    border-block: 1px solid rgba(233, 196, 106, .55); box-shadow: 0 0 0 1px rgba(0, 0, 0, .6), 0 10px 30px rgba(0, 0, 0, .7);
  }
  /* Dòng trên: dải "Ải khó · Đợt" bên trái, nút bên phải; số lượt ngay dưới nút */
  .battle .wave-tag { left: 10px; transform: none; max-width: calc(100% - 200px); font-size: 12px; padding: 4px 10px; }
  .battle .wb-tag { left: 10px; transform: none; }
  /* Nhật ký: lấp phần trên khung, nhiều dòng hơn, chữ không bị cảnh nền đè */
  .battle .log {
    top: 84px; left: 12px; right: 12px; bottom: calc(50cqh + 28.125cqw + 8px); width: auto; height: auto;
    font-size: 12.5px; -webkit-mask-image: linear-gradient(transparent, #000 30%); mask-image: linear-gradient(transparent, #000 30%);
  }
  /* Bảng lệnh: phần dưới khung, dài quá thì cuộn */
  .battle .battle-actions {
    bottom: max(10px, env(safe-area-inset-bottom, 0px)); max-width: calc(100% - 16px);
    max-height: calc(50cqh - 28.125cqw - 20px); overflow-y: auto; justify-content: center;
  }
  .battle .skill-menu { width: 100%; grid-template-columns: minmax(0, 1fr); }
  /* Khung nhỏ: người to thêm chút (--h của .unit và .hud-pin phải bằng nhau) */
  .battle :is(.unit, .hud-pin) { --h: calc(min(24cqh, 17cqw) * var(--s, 1)); }
  .battle :is(.unit, .hud-pin).boss { --h: calc(min(27cqh, 19.5cqw) * var(--s, 1)); }
  /* Bảng tên chỉ còn cấp + thanh máu, hẹp cho các hàng sát nhau không chồng lên nhau; tên hiện ở người đang ra chiêu (và trùm) */
  .battle .hud-pin:not(.boss) .hud { width: 36px; margin-bottom: 2px; }
  .battle .hud-pin:not(.boss) .uname { font-size: 0; gap: 0; overflow: visible; justify-content: center; }
  .battle .hud-pin:not(.boss) .uname .lv { min-width: 13px; height: 12px; padding: 0 2px; font-size: 8px; line-height: 12px; }
  .battle .hud-pin.active { z-index: 151; }
  .battle .hud-pin.active:not(.boss) .uname { font-size: 10.5px; gap: 2px; }
  .battle .hud-pin .hud .bar.hp { height: 4px; }
  .battle .hud-pin .hud .bar { height: 2px; }
}

/* Nút / lời chỉ chơi toàn màn hình ở màn mở đầu (chỉ hiện trên điện thoại mở bằng trình duyệt) */
.title-fs {
  position: absolute; z-index: 6; top: 12px; right: 12px; padding: 6px 12px; border-radius: 999px;
  font: 600 12.5px var(--font-ui); color: #ffe9b0; background: rgba(20, 12, 6, .78); border: 1px solid rgba(233, 196, 106, .6);
}
.title-fs.tip { max-width: 46vw; font-weight: 500; font-size: 11px; line-height: 1.35; border-radius: 10px; }


/* ---------- Điện thoại chơi dọc: cầm ngang (màn thấp, máy tính bảng không tính) thì che game, nhắc xoay dọc ---------- */
#rotate-tip { display: none; }
@media (orientation: landscape) and (pointer: coarse) and (max-height: 500px) {
  #rotate-tip {
    position: fixed; inset: 0; z-index: 100000; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 14px; padding: 24px; text-align: center; color: #f3e6c8; font-family: var(--font-ui);
    background: radial-gradient(ellipse at 50% 40%, #2a1a0e, #0d0a07 70%);
  }
  #app { visibility: hidden; }
}
#rotate-tip > b { font: 800 20px var(--font-title); color: #ffe9b0; }
#rotate-tip small { max-width: 280px; font-size: 13px; line-height: 1.45; color: #cdbb98; }
#rotate-tip small b { color: #ffe9b0; }
#rotate-tip button {
  margin-top: 6px; padding: 10px 18px; border-radius: 10px; font: 600 14px var(--font-ui); color: #fff3e0;
  background: linear-gradient(180deg, #c23a2c, #6e1a12); border: 1px solid #efc566;
}
/* Hình điện thoại xoay qua lại */
.rt-phone { width: 54px; height: 92px; border: 3px solid #e9c46a; border-radius: 12px; position: relative; animation: rt-turn 2.4s ease-in-out infinite; }
.rt-phone i { position: absolute; left: 50%; bottom: 6px; width: 14px; height: 3px; margin-left: -7px; border-radius: 2px; background: #e9c46a; }
@keyframes rt-turn { 0%, 25% { transform: rotate(-90deg); } 55%, 85% { transform: rotate(0); } 100% { transform: rotate(-90deg); } }
@media (prefers-reduced-motion: reduce) { .rt-phone { animation: none; } }
/* Màn mở đầu cầm dọc: chữ cảnh báo 18+ chừa chỗ cho nút Toàn màn hình góc phải */
@media (orientation: portrait) { .title-screen:has(.title-fs) .age-rate span { max-width: calc(100vw - 200px); } }