/* ---------- mobile ---------- */
@media (max-width: 760px) {
  header {
    padding: 8px 10px;
  }
  header h1 {
    font-size: 17px;
  }
  #topline {
    flex-wrap: wrap;
    margin-bottom: 14px;
  }
  #topline > #onnow {
    order: 3;
    flex: 1 1 100%;
    margin: 6px 0 0;
  }
  #topline > #onnow .onnow-pill {
    padding: 3px 9px;
    font-size: 10px;
  }
  #onnow .onnow-n {
    font-size: 10px;
  }
  #bar {
    gap: 6px;
  }
  #qwrap {
    order: 3;
    flex: 1 1 100%;
  }
  #q {
    font-size: 16px;
    padding: 8px 10px;
  }
  #count {
    font-size: 11px;
  }
  #player {
    padding: 6px 0 2px;
  }
  #pv-vol,
  #pv-volpct {
    display: none;
  }
  #tabs {
    gap: 6px;
    padding: 6px 0 2px;
    flex-wrap: nowrap;
    overflow-x: auto;
  }
  #tabs button {
    font-size: 11px;
    padding: 6px 10px;
    flex: 0 0 auto;
  }
  /* ---------- mobile: table ---------- */
  .tblwrap {
    overflow: visible;
  }
  table {
    min-width: 0;
    table-layout: fixed;
    width: 100%;
  }
  th.sngc {
    width: 21%;
  }
  th.musc {
    width: 29%;
  }
  th.filec {
    display: none;
  }
  th.bpmc {
    width: 10%;
  }
  th.newc {
    width: 9%;
  }
  th.lvlc {
    display: none;
  }
  th.btns {
    width: 31%;
    text-align: left;
  }
  td.sngc {
    width: 21%;
  }
  td.musc {
    width: 29%;
  }
  td.filec {
    display: none;
  }
  td.bpmc {
    width: 10%;
  }
  td.newc {
    width: 9%;
  }
  td.lvlc {
    display: none;
  }
  td.btns {
    width: 31%;
  }
  .newimg {
    height: 15px;
    vertical-align: -2px;
  }
  th {
    font-size: 10px;
    padding: 7px 4px;
    letter-spacing: 0.3px;
  }
  td {
    font-size: 11px;
    padding: 6px 4px;
    word-break: break-word;
  }
  .btns {
    white-space: nowrap;
    text-align: right;
  }
  .btns .mobhide {
    display: none;
  }
  .btns button {
    font-size: 10.5px;
    padding: 5px 7px;
  }
  .btns button svg {
    width: 11px;
    height: 11px;
  }
  footer {
    font-size: 10px;
    padding: 8px;
  }
  /* live chat: hindari footer sticky */
  #amc-btn {
    right: 14px;
    bottom: 62px;
    height: 42px;
    padding: 0 15px 0 12px;
    font-size: 12px;
  }
  #amc-btn svg {
    width: 20px;
    height: 20px;
  }
  #amc-panel {
    right: 14px;
    bottom: 120px;
    width: calc(100vw - 28px);
    height: min(430px, calc(100vh - 170px));
  }
  .amc-foot input {
    font-size: 16px;
  }
  /* iOS auto-zoom kalau font input < 16px */
  #q,
  .prow input[type="text"],
  .prow input[type="file"] {
    font-size: 16px;
  }
}
/* ---------- HP kecil: kolom BPM dilebarin dikit biar ikon sort gak kepotong ---------- */
/* ikon sort TIDAK diubah: tetap 6px, margin-left 4px, ▲▼ asli */
@media (max-width: 430px) {
  th.sngc,
  td.sngc {
    width: 20%;
  }
  th.musc,
  td.musc {
    width: 28%;
  }
  th.bpmc,
  td.bpmc {
    width: 13%;
  }
  th.newc,
  td.newc {
    width: 8%;
  }
}
@media (max-width: 380px) {
  th.sngc,
  td.sngc {
    width: 21%;
  }
  th.musc,
  td.musc {
    width: 27%;
  }
}
@media (max-width: 340px) {
  th.musc,
  td.musc {
    width: 24%;
  }
  th.bpmc,
  td.bpmc {
    width: 15%;
  }
  th.newc,
  td.newc {
    width: 9%;
  }
}