/* =====================================================================
   MIDI ROYALE PRO - TATA LETAK LINTAS PERANGKAT (v10.4)
   Dimuat paling akhir. Satu tempat untuk aturan lebar/tinggi yang tidak
   boleh terpotong: bar atas Pa5X, Style Play, dan layar landscape pendek.
   ===================================================================== */

/* ---------- Pa5X: bar atas selalu muat satu baris ---------- */
#paRoot .pa-top { flex-wrap: nowrap; min-width: 0; overflow: hidden; }
#paRoot .pa-top > * { flex: 0 0 auto; }
#paRoot .pa-top > button { white-space: nowrap; }
#paRoot .pa-top .sp { flex: 1 1 0; min-width: 0; }
#paRoot #paMidiSlot { flex: 0 1 12rem; min-width: 4.5rem; display: flex; }
#paRoot #paMidiSlot select { width: 100%; min-width: 0; max-width: none; text-overflow: ellipsis; }
#paRoot .pa-top .mr-kbchip.p { flex: 0 0 auto; }
#paRoot .pa-top .pa-readout { flex: 0 0 auto; }

/* lebar sedang: label pendukung dilepas, ikon tetap */
@media (max-width: 1080px) {
  #paRoot .pa-top [data-act="lock"] .lbl, #paRoot .pa-top [data-act="settings"] .lbl { display: none; }
  #paRoot .pa-top [data-act="lock"], #paRoot .pa-top [data-act="settings"] { min-width: 36px; justify-content: center; padding: 0 .4rem; }
  #paRoot .pa-top .mr-kbchip.p em { display: none; }
  #paRoot #paChordTop small { display: none; }
  #paRoot #paChordTop { min-width: 3.4rem; justify-content: center; padding: 0 .4rem; }
}
/* HP landscape: HOME jadi ikon, jarak dirapatkan */
@media (max-width: 880px) {
  #paRoot .pa-top { gap: .3rem; padding: 0 .35rem; }
  #paRoot .pa-top .pa-home .lbl { display: none; }
  #paRoot .pa-top .pa-home { min-width: 36px; justify-content: center; padding: 0 .4rem; }
  #paRoot .pa-top > button { padding: 0 .45rem; }
  #paRoot .pa-top .mr-kbchip.p { padding: 0 .45rem; font-size: 10px; max-width: 6.5rem; }
  #paRoot .pa-readout { padding: 2px 5px; font-size: 11px; }
}
@media (max-width: 680px) {
  #paRoot #paMidiSlot { min-width: 3.4rem; }
  #paRoot .pa-top .mr-kbchip.p svg { display: none; }
  #paRoot #paChordTop { min-width: 2.8rem; }
}
@media (max-width: 560px) {
  #paRoot .pa-top .pa-readout, #paRoot .pa-top [data-act="panic"] .lbl, #paRoot .pa-top .mr-kbchip.p { display: none; }
  #paRoot .pa-top [data-act="panic"] { min-width: 36px; justify-content: center; }
}
#paRoot #panelKset .ks-t1 { font-size: clamp(11px, 1.5vw, 15px); letter-spacing: .08em; }

/* ---------- Klasik: panel bawah tidak tampil di menu Style Play ---------- */
body:not(.pa-mode)[data-panel="style"] #proStrip { display: none !important; }
@media (orientation: landscape) and (min-width: 560px) {
  body[data-panel="style"] #panelStyle { grid-area: 3/1/7/13; }
}
@media (orientation: portrait), (max-width: 559px) {
  body[data-panel="style"] #panelStyle { grid-area: 6/1/9/13; }
}

/* ---------- Style Play: label tidak pernah terpotong ---------- */
#panelStyle .style-btn { min-height: 0 !important; min-width: 0; overflow: hidden; }
#panelStyle .style-btn svg { flex: 0 1 auto; min-height: 0; width: clamp(16px, min(3.2vw, 6vh), 44px) !important; height: clamp(16px, min(3.2vw, 6vh), 44px) !important; }
#panelStyle .style-btn span { flex: 0 0 auto; overflow: visible; line-height: 1.2; font-size: clamp(.6rem, min(1.55vw, 3vh), 1.5rem); }
#panelStyle #btnStyleStartStop { min-height: 34px !important; padding-top: .2rem; padding-bottom: .2rem; }
/* layar landscape pendek: teks bantuan Triple Controller tidak memakan tempat */
@media (orientation: landscape) and (max-height: 520px) { #panelCtrl [data-i18n="tripleDesc"] { display: none; } }
/* layar sangat pendek: ikon di samping label */
@media (orientation: landscape) and (max-height: 345px) {
  #panelStyle .style-btn { flex-direction: row !important; gap: .3rem !important; padding: .1rem .2rem !important; }
  #panelStyle .style-btn svg { width: 14px !important; height: 14px !important; flex: 0 0 auto; }
}

/* ---------- Pa5X MAIN: isi LCD muat di layar pendek (rupa tetap seperti aslinya) ---------- */
#paRoot .pa-keys { padding-top: .3rem; padding-bottom: .3rem; flex: 1.2 0 auto; min-height: 54px; }
#paRoot .pa-keys .ico-box { width: clamp(38px, min(9vw, 13vh), 80px); font-size: clamp(22px, min(5vw, 7.5vh), 44px); border-radius: 12px; }
#paRoot .pa-keys .info { display: flex; flex-direction: column; justify-content: center; min-height: 0; overflow: hidden; }
#paRoot .vnav { width: clamp(34px, min(6vw, 11vh), 52px); height: clamp(34px, min(6vw, 11vh), 52px); }
#paRoot .pa-keys .big { line-height: 1.3; }
#paRoot .pa-keys .sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 0 0 auto; }
#paRoot .pa-ups { justify-content: center; gap: clamp(2px, .9vh, 5px); }
@media (max-height: 470px) {
  #paRoot .pa-keys .k, #paRoot .pa-keys .hint, #paRoot .pa-keys .recent { display: none; }
  /* jarak dalam piksel agar pilihan ukuran teks besar tidak mendorong isi keluar layar */
  #paRoot #paScr-main.on { padding: 5px; gap: 5px; }
  #paRoot #paScr-main .pa-card { padding: 4px 9px; gap: 3px; }
}
@media (max-height: 365px) {
  #paRoot .pa-scr.on { padding: .2rem; gap: .2rem; }
  #paRoot .pa-card { padding: .2rem .35rem; }
  #paRoot .pa-stat, #paRoot #paScr-main .pa-cap, #paRoot .pa-keys .sub { display: none; }
  #paRoot .pa-keys .ico-box { display: none; }
}

/* ---------- keyboard virtual terbuka di layar pendek: isi di atasnya tetap utuh ---------- */
#paRoot #vkDock .vk-synth, #paRoot #vkDock button { font-size: 11px; }
@media (max-height: 520px) {
  #paRoot:has(#vkDock:not(.is-hidden)) #paScr-main > .pa-card:last-child,
  #paRoot:has(#vkDock:not(.is-hidden)) #paScr-main .pa-cap,
  #paRoot:has(#vkDock:not(.is-hidden)) #paScr-main .pa-stat { display: none; }
}
@media (max-height: 400px) {
  #paRoot:has(#vkDock:not(.is-hidden)) #paScr-main > .pa-card:not(.pa-keys) { display: none; }
  #paRoot:has(#vkDock:not(.is-hidden)) #paScr-main .pa-keys .sub { display: none; }
}
#mrHero { overflow: hidden; }
@media (orientation: landscape) and (max-height: 345px) {
  body:not(.pa-mode):has(#vkDock:not(.is-hidden)) #proStrip { display: none !important; }
  body:has(#vkDock:not(.is-hidden)) #mrHero .mr-tb { display: none; }
  body:has(#vkDock:not(.is-hidden)) #panelVoice > .glass-card { grid-row: 4 / 6; }
}

/* ---------- Klasik: chip keyboard di header tetap terbaca ---------- */
.mr-kbchip.k { flex-shrink: 0; }
@media (max-width: 960px) { .mr-kbchip.k svg { display: none; } .mr-kbchip.k { padding: 1px 5px; } }