/* ===========================================================
   mg-bond.css — 「分與合」專屬樣式
   共用零件在 minigames.css，這裡只補分與合需要的東西。
   =========================================================== */

/* ---------------- 分與合圖：線條比例跟著框框大小縮放 ---------------- */
.bond .bond-lines {
  width: calc(var(--bond-size) * 1.8);
  height: calc(var(--bond-size) * 0.46);
}
.bond .bond-line.is-left { left: 15%; }
.bond .bond-line.is-right { right: 15%; }

/* ---------------- 糖果圖 ---------------- */
.bd-dot-row {
  display: flex; gap: clamp(8px, 1vw, 14px);
  justify-content: center; flex-wrap: wrap;
}

.bd-dot {
  width: clamp(36px, 4.2vw, 52px);
  height: clamp(36px, 4.2vw, 52px);
  border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, #ffd4e4, #ef6b9c);
  box-shadow: inset 0 -6px 0 rgba(0, 0, 0, .12), var(--sh-1);
}

/* ---------------- 作答區 / 按鈕列 ---------------- */
.bd-answer {
  width: 100%;
  display: grid;
  place-items: center;
}

.bd-bar {
  display: flex; gap: 14px; justify-content: center; flex-wrap: wrap;
}

/* ---------------- 兩個池塘 ---------------- */
.dz-target.bd-pond {
  background: linear-gradient(180deg, #eff9ff, #bfe6ff);
  border-color: rgba(70, 150, 220, .55);
  border-radius: 30px 30px 60% 60% / 30px 30px 40% 40%;
}
.dz-target.bd-pond .dz-target-label { color: #1c6ba0; }

/* ---------------- 數字卡配對：數字當目標 ---------------- */
.dz-target.bd-num-target .dz-target-label {
  font-family: var(--font-num);
  font-size: clamp(38px, 4.6vw, 60px);
  font-weight: 800;
  color: #e0641f;
  line-height: 1;
}

.dz-target.bd-num-target .dz-item-label { display: none; }