/* ===== 分组区排版：桌面/平板多列并行，手机单列 =====
   之前手机端样式没套媒体查询，导致桌面端每组也独占一整行，
   参赛人多时分组区被拉得很长 ✗ 现在恢复多列。
*/

/* ---------- 桌面 & 平板：一行放好几组 ---------- */
#hz-bd .hz-gz {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  align-items: flex-start !important;
}
#hz-bd .hz-gz .gz {
  flex: 1 1 240px !important;
  min-width: 220px !important;
  max-width: 340px !important;
  box-sizing: border-box !important;
}
#hz-bd .hz-gz .gz.gzadd {
  flex: 0 0 150px !important;
  min-width: 150px !important;
  max-width: 150px !important;
}
/* 组内气泡区不被拉得过高，人多时自身滚动一点，避免整块往下长 */
#hz-bd .hz-gz .gzb {
  max-height: 168px;
  overflow-y: auto;
  align-content: flex-start;
}
#hz-bd .hz-gz .gzb::-webkit-scrollbar { width: 6px; }
#hz-bd .hz-gz .gzb::-webkit-scrollbar-thumb { background: #E7D3DB; border-radius: 3px; }

/* ---------- 手机：单列（组内气泡横排） ---------- */
@media (max-width: 680px) {
  #hz-bd .hz-gz .gz {
    flex: 1 1 100% !important;
    min-width: 0 !important;
    max-width: none !important;
  }
  #hz-bd .hz-gz .gz.gzadd {
    flex: 1 1 100% !important;
    min-width: 0 !important;
    max-width: none !important;
  }
  #hz-bd .hz-gz .gzb { max-height: 220px; }
}