/* =====================================================================
 * Empire Nusantara — Susun atur PADAT untuk telefon (potret & landskap)
 * Dimuat SELEPAS CSS utama. Matlamat: UI tidak menutup skrin; peta kekal kelihatan.
 * ===================================================================== */

/* ---------- Telefon (potret, lebar ≤ 760px) ---------- */
@media (max-width: 760px) {
  #topbar { top: calc(4px + env(safe-area-inset-top, 0px)); left: 4px; right: 4px; gap: 4px; flex-wrap: wrap; }
  #resbar { flex-wrap: nowrap; width: 100%; justify-content: space-between; padding: 2px; overflow-x: auto; scrollbar-width: none; }
  #resbar::-webkit-scrollbar { display: none; }
  .res { font-size: 12px; padding: 2px 5px 2px 3px; gap: 3px; }
  .res .ico { width: 14px; height: 14px; }

  #topright { width: 100%; flex-wrap: nowrap; gap: 3px; overflow-x: auto; scrollbar-width: none; justify-content: flex-start; }
  #topright::-webkit-scrollbar { display: none; }
  #topright > * { flex: 0 0 auto; }
  #topright .panel, #topright .btn { padding: 3px 6px !important; min-height: 28px; font-size: 11px; }
  #topright .lbl, #agebox, #topright .weather-badge, #btn-quality, #btn-help { display: none !important; }
  #topright { justify-content: space-between; }
  #daybox, #raidbox { gap: 4px; }
  #daybox b, #raidbox b { font-size: 12.5px !important; }
  #daybox .ico, #raidbox .ico { width: 14px; height: 14px; }
  #agebox .zaman { font-size: 11.5px; }
  /* Volum: kekalkan butang bunyi sahaja, sorok gelangsar */
  #topright input[type="range"], #topright input[type="range"] + span { display: none; }

  /* Peta mini kecil di kanan atas, kawalan kamera kecil di bawahnya */
  #minimap-wrap { top: calc(70px + env(safe-area-inset-top, 0px)); right: 4px; padding: 3px; }
  #minimap { width: 92px; height: 92px; }
  #squad-bar { gap: 2px; }
  #squad-bar .btn { min-width: 26px; height: 22px; padding: 0 4px; font-size: 11px; }
  #camctl { top: calc(206px + env(safe-area-inset-top, 0px)); bottom: auto; right: 4px; padding: 3px; gap: 3px; transform: none; flex-direction: column; }
  #camctl .btn { width: 30px; height: 30px; font-size: 15px; }

  /* Panel bawah: padat, maksimum ~30% skrin */
  #hud { left: 4px; right: 4px; bottom: calc(4px + env(safe-area-inset-bottom, 0px)); max-height: 31vh; }
  #hud-inner { grid-template-columns: 1fr; gap: 4px; padding: 5px 6px; min-height: 0; }
  #sel { gap: 8px; align-items: center; }
  #portrait { width: 38px; height: 38px; flex: 0 0 38px; }
  #portrait .ico { width: 24px; height: 24px; }
  #selname { font-size: 13px; line-height: 1.1; }
  #seldesc, .unit-detail-panel { display: none !important; }
  #selmeta { font-size: 11px; line-height: 1.25; }
  #selstatus { font-size: 11px; }
  #hpbar { height: 5px; margin: 2px 0; }
  #cmds { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 58px; grid-auto-rows: 50px; gap: 4px; overflow-x: auto; overflow-y: hidden; padding-bottom: 2px; }
  .cmd { width: 58px; height: 50px; font-size: 9.5px; padding: 2px; }
  .cmd .ico { width: 18px; height: 18px; }
  .cmd .cost { font-size: 8.5px; }

  #placebar { bottom: calc(31vh + 10px + env(safe-area-inset-bottom, 0px)); top: auto; padding: 4px 6px; gap: 4px; }
  #placebar span { font-size: 11px; }
  #placebar .btn { padding: 4px 8px; font-size: 12px; }

  #toasts { top: auto !important; bottom: calc(31vh + 56px) !important; }

  /* Panel tutorial: kecil di kiri atas, tidak menutup peta mini atau panel bawah */
  [aria-label="Tutorial Permulaan Seri Tanjung"] {
    left: 4px !important; right: auto !important; top: calc(70px + env(safe-area-inset-top, 0px)) !important; bottom: auto !important;
    width: min(270px, calc(100vw - 112px)) !important; max-height: 34vh; overflow-y: auto;
    padding: 6px 8px !important; font-size: 11px; border-radius: 8px !important;
  }
  [aria-label="Tutorial Permulaan Seri Tanjung"] h3 { font-size: 12px !important; }
  [aria-label="Tutorial Permulaan Seri Tanjung"] .text-sm { font-size: 11.5px !important; }
  [aria-label="Tutorial Permulaan Seri Tanjung"] .text-xs { font-size: 10.5px !important; }
}

/* ---------- Telefon landskap (tinggi ≤ 540px) ---------- */
@media (max-height: 540px) and (max-width: 1000px) {
  #topbar { top: calc(3px + env(safe-area-inset-top, 0px)); left: max(4px, env(safe-area-inset-left, 0px)); right: max(4px, env(safe-area-inset-right, 0px)); gap: 4px; flex-wrap: nowrap; }
  #resbar { flex-wrap: nowrap; padding: 2px; width: auto; }
  .res { font-size: 12px; padding: 2px 5px 2px 3px; gap: 3px; }
  .res .ico { width: 14px; height: 14px; }
  .res small { display: none; }
  #topright { flex-wrap: nowrap; gap: 3px; overflow-x: auto; scrollbar-width: none; width: auto; min-width: 0; }
  #topright::-webkit-scrollbar { display: none; }
  #topright > * { flex: 0 0 auto; }
  #topright .panel, #topright .btn { padding: 3px 6px !important; min-height: 28px; font-size: 11px; }
  #topright .lbl, #agebox, #btn-quality, #btn-help { display: none !important; }
  #daybox b, #raidbox b { font-size: 12.5px !important; }
  #daybox .ico, #raidbox .ico { width: 14px; height: 14px; }
  #topright input[type="range"], #topright input[type="range"] + span { display: none; }

  #minimap-wrap { top: calc(40px + env(safe-area-inset-top, 0px)); right: max(4px, env(safe-area-inset-right, 0px)); padding: 3px; }
  #minimap { width: 78px; height: 78px; }
  #squad-bar .btn { min-width: 22px; height: 20px; padding: 0 3px; font-size: 10px; }
  /* Kawalan kamera: grid 2 lajur di kanan, antara peta mini dan panel bawah */
  #camctl { top: calc(150px + env(safe-area-inset-top, 0px)); bottom: auto; right: max(4px, env(safe-area-inset-right, 0px)); transform: none; display: grid; grid-template-columns: repeat(2, 28px); gap: 3px; padding: 3px; }
  #camctl .btn { width: 28px; height: 28px; font-size: 14px; }

  /* Panel bawah: satu jalur nipis */
  #hud { left: max(4px, env(safe-area-inset-left, 0px)); right: calc(max(4px, env(safe-area-inset-right, 0px)) + 68px); bottom: max(3px, env(safe-area-inset-bottom, 0px)); max-height: 92px; }
  #hud-inner { grid-template-columns: minmax(150px, 200px) 1fr; gap: 6px; padding: 4px 6px; min-height: 0; align-items: center; }
  #sel { gap: 6px; align-items: center; overflow: hidden; }
  #portrait { width: 34px; height: 34px; flex: 0 0 34px; }
  #portrait .ico { width: 22px; height: 22px; }
  #selname { font-size: 12.5px; line-height: 1.1; }
  #seldesc, .unit-detail-panel, #selstatus { display: none !important; }
  #selmeta { font-size: 10.5px; line-height: 1.2; }
  #hpbar { height: 4px; margin: 2px 0; }
  #cmds { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 56px; grid-auto-rows: 48px; gap: 4px; overflow-x: auto; overflow-y: hidden; }
  .cmd { width: 56px; height: 48px; font-size: 9.5px; padding: 2px; }
  .cmd .ico { width: 17px; height: 17px; }
  .cmd .cost { font-size: 8.5px; }

  #placebar { top: calc(40px + env(safe-area-inset-top, 0px)); bottom: auto; padding: 3px 6px; gap: 4px; }
  #placebar span { font-size: 11px; }
  #placebar .btn { padding: 3px 8px; font-size: 12px; }

  [aria-label="Tutorial Permulaan Seri Tanjung"] {
    left: max(4px, env(safe-area-inset-left, 0px)) !important; top: calc(40px + env(safe-area-inset-top, 0px)) !important; bottom: auto !important;
    width: 250px !important; max-height: calc(100dvh - 150px); overflow-y: auto;
    padding: 5px 7px !important; font-size: 10.5px; border-radius: 8px !important;
  }
  [aria-label="Tutorial Permulaan Seri Tanjung"] h3 { font-size: 11.5px !important; }
  [aria-label="Tutorial Permulaan Seri Tanjung"] .text-sm { font-size: 11px !important; }
  [aria-label="Tutorial Permulaan Seri Tanjung"] .text-xs { font-size: 10px !important; }
}

/* ---------- Panel bawah boleh disorok / ditunjuk (semua skrin) ---------- */
#hud { transition: transform .22s ease, opacity .22s ease; }
body.hud-collapsed #hud { transform: translateY(calc(100% + 14px)); opacity: 0; pointer-events: none; }
#hud-toggle {
  position: absolute; z-index: 21; bottom: 140px; left: 14px;
  padding: 2px 10px !important; min-height: 0; height: 24px;
  font: 700 11.5px/1 var(--f-body, sans-serif); letter-spacing: .03em;
  border-radius: 7px 7px 0 0; border-bottom: 0;
  display: flex; align-items: center; gap: 5px; max-width: 60vw; white-space: nowrap;
}
#hud-toggle span { overflow: hidden; text-overflow: ellipsis; }
body.hud-collapsed #hud-toggle { border-radius: 7px; border-bottom: 1px solid rgba(214,168,65,.6); height: 30px; padding: 4px 12px !important; }
body:not(:has(#menu[hidden])) #hud-toggle { display: none; }
body.hud-collapsed #placebar { bottom: calc(44px + env(safe-area-inset-bottom, 0px)) !important; }
body.hud-collapsed #toasts { bottom: 50px !important; }
body:has(#splash:not([hidden])) #hud-toggle { display: none; }

/* ---------- Skuad 1/2/3 dibuang (semua skrin) ---------- */
#squad-bar { display: none !important; }

/* ---------- Butang '⋯' (hanya telefon) ---------- */
#ui-more { display: none; }
@media (max-width: 760px), (max-height: 540px) and (max-width: 1000px) {
  #ui-more { display: inline-flex; align-items: center; justify-content: center; min-width: 34px; font-size: 16px !important; font-weight: 800; order: 8; }
  #btn-pause { order: 9; }
  #topright { justify-content: flex-end; }
  /* Biasa: hanya waktu, serbuan, ⋯ dan menu */
  body:not(.ui-more-open) #topright > :not(#daybox):not(#raidbox):not(#ui-more):not(#btn-pause) { display: none !important; }
  /* Laci terbuka: tunjuk semua, termasuk gelangsar bunyi */
  body.ui-more-open #topbar { z-index: 30; }
  body.ui-more-open #topright { flex-wrap: wrap; overflow: visible; row-gap: 4px; }
  body.ui-more-open #topright > * { display: flex !important; }
  body.ui-more-open #topright input[type="range"] { display: inline-block !important; width: 84px; }
  body.ui-more-open #topright input[type="range"] + span { display: inline !important; }
  body.ui-more-open #agebox .sub, body.ui-more-open #agebox .ico, body.ui-more-open #topright .lbl { display: none !important; }

  /* Kamera: putar & zum guna jari; kekalkan 'Ke Istana' & 'Pilih Petak' sahaja */
  #cam-rotl, #cam-rotr, #cam-in, #cam-out { display: none !important; }
  #camctl { display: flex !important; flex-direction: column; }

  /* Tutorial dikecilkan: buang tajuk kecil supaya panel nipis */
  [aria-label="Tutorial Permulaan Seri Tanjung"] .tracking-widest { display: none; }
  [aria-label="Tutorial Permulaan Seri Tanjung"] { width: min(230px, calc(100vw - 112px)) !important; }
}
@media (max-width: 760px) {
  #topright { width: auto; flex: 1 1 auto; }
  #camctl { top: calc(178px + env(safe-area-inset-top, 0px)); }
}
@media (max-height: 540px) and (max-width: 1000px) {
  #camctl { top: calc(128px + env(safe-area-inset-top, 0px)); }
}

/* ---------- Tutorial & peta mini sentiasa DI BAWAH bar atas (telefon) ---------- */
@media (max-width: 760px), (max-height: 540px) and (max-width: 1000px) {
  [aria-label="Tutorial Permulaan Seri Tanjung"] {
    top: calc(var(--topbar-b, 96px) + 6px) !important;
    max-height: calc(100dvh - var(--topbar-b, 96px) - var(--hud-h, 0px) - 24px) !important;

  }
  #minimap-wrap { top: calc(var(--topbar-b, 96px) + 6px) !important; }
}
@media (max-width: 760px) {
  #camctl { top: calc(var(--topbar-b, 96px) + 112px) !important; }
}
@media (max-height: 540px) and (max-width: 1000px) {
  #camctl { top: calc(var(--topbar-b, 40px) + 96px) !important; }
}
/* Kod simpanan (sandaran) dibuang daripada menu */
#pm-code-title, #pm-code-row, #import-code-box { display: none !important; }