/* ===========================================================
   數學冒險島 — minigames.css
   小遊戲共用零件（所有小遊戲都靠這些樣式維持一致風格）
   =========================================================== */

/* ---------------- 題目面板 ---------------- */
.mg-panel {
  width: min(1080px, 96%);
  background: rgba(255, 253, 246, .97);
  border-radius: var(--r-xl);
  padding: 20px 26px 24px;
  box-shadow: var(--sh-2), 0 0 0 8px rgba(255, 255, 255, .45);
  display: flex; flex-direction: column; gap: 14px;
  align-items: center;
  border: 4px solid rgba(255, 255, 255, .9);
  position: relative;
}
.mg-panel.tone-sky { background: linear-gradient(180deg, #fbfeff, #eef7ff); }
.mg-panel.tone-sand { background: linear-gradient(180deg, #fffdf5, #fff4dc); }
.mg-panel.tone-mint { background: linear-gradient(180deg, #f7fffc, #e6fbf3); }
.mg-panel.tone-grape { background: linear-gradient(180deg, #fdfaff, #f1e9ff); }
.mg-panel.tone-rose { background: linear-gradient(180deg, #fffafc, #ffeef4); }

.mg-title {
  display: flex; align-items: center; gap: 12px; justify-content: center;
  text-align: center; flex-wrap: wrap;
}
.mg-title-icon { width: 42px; height: 42px; object-fit: contain; }
.mg-title-text {
  font-size: clamp(24px, 2.6vw, 36px); font-weight: 800; color: var(--ink);
  line-height: 1.35;
}
.mg-title-text b, .mg-title-text .hl {
  color: #e0641f;
  font-family: var(--font-num);
  font-size: 1.18em;
  background: linear-gradient(180deg, #fff8d6, #ffe9a8);
  padding: 0 12px; border-radius: 12px;
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .06);
}
.mg-subtitle { font-size: 18px; color: var(--ink-soft); text-align: center; font-weight: 700; }
.mg-body {
  width: 100%; display: flex; flex-direction: column; align-items: center; gap: 14px;
}
.mg-question-text {
  font-size: clamp(20px, 2.1vw, 28px); font-weight: 800; color: var(--ink); text-align: center;
  line-height: 1.5;
}
.mg-label { font-size: 20px; color: var(--ink-soft); font-weight: 700; text-align: center; }
.mg-label.is-big { font-size: clamp(24px, 2.4vw, 32px); color: var(--ink); font-weight: 800; }

.mg-hint {
  display: flex; align-items: center; gap: 8px; justify-content: center;
  background: rgba(120, 190, 250, .16);
  padding: 8px 18px; border-radius: 999px;
  font-size: 17px; color: #25628c; font-weight: 700;
}
.mg-hint-icon { width: 22px; height: 22px; object-fit: contain; opacity: .7; }
.mg-chip {
  display: inline-flex; align-items: center; padding: 6px 18px; border-radius: 999px;
  font-size: 22px; font-weight: 800; color: var(--ink);
  background: linear-gradient(180deg, #fff, #f0f4fa); box-shadow: var(--sh-1);
}
.mg-chip.tone-sand { background: linear-gradient(180deg, #fff8e4, #ffe9b8); color: #8a5a00; }
.mg-chip.tone-mint { background: linear-gradient(180deg, #e9fff8, #bff3e2); color: #0d7a63; }
.mg-chip.tone-grape { background: linear-gradient(180deg, #f6eeff, #e3d1ff); color: #6b35b8; }

.mg-center { display: grid; place-items: center; width: 100%; }
.mg-row { display: flex; align-items: center; justify-content: center; gap: 16px; flex-wrap: wrap; width: 100%; }
.mg-row.is-top { align-items: flex-start; }
.mg-grid { display: grid; gap: 14px; justify-content: center; }
.mg-grid.cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.mg-grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mg-grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mg-grid.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.mg-grid.cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.mg-grid.cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }

/* ---------------- 選項按鈕 ---------------- */
.choice-grid {
  display: grid; gap: clamp(10px, 1.4vw, 18px); justify-content: center;
  width: 100%; max-width: 980px;
}
.choice-grid.cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.choice-grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.choice-grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.choice-grid.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.choice-grid.cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.choice-grid.cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.choice-grid.cols-7 { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.choice-grid.cols-8 { grid-template-columns: repeat(8, minmax(0, 1fr)); }

.choice-btn {
  position: relative;
  min-height: clamp(74px, 9vh, 108px);
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, #ffffff, #e9f2fb);
  box-shadow: var(--sh-1);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  padding: 10px 14px;
  transition: transform .13s ease, box-shadow .13s ease, background .2s ease;
  border: 4px solid rgba(255, 255, 255, .92);
  overflow: hidden;
}
.choice-btn:hover { transform: translateY(-4px); box-shadow: var(--sh-2); }
.choice-btn:active, .choice-btn.is-press { transform: translateY(2px) scale(.97); }
.choice-label {
  font-size: clamp(32px, 4vw, 52px); font-weight: 800; color: var(--ink); line-height: 1.05;
}
.choice-sub { font-size: 15px; color: var(--ink-soft); font-weight: 700; }
.choice-img { max-height: clamp(60px, 11vh, 120px); width: auto; object-fit: contain; }
.choice-btn.is-picked {
  background: linear-gradient(180deg, #fff5d6, #ffe1a0);
  box-shadow: 0 0 0 5px rgba(255, 200, 70, .55), var(--sh-2);
  transform: translateY(-4px);
}
.choice-btn.tone-sky { background: linear-gradient(180deg, #eaf7ff, #c9e8ff); }
.choice-btn.tone-sand { background: linear-gradient(180deg, #fff8e4, #ffe6ad); }
.choice-btn.tone-mint { background: linear-gradient(180deg, #eafff8, #c3f2e2); }
.choice-btn.tone-rose { background: linear-gradient(180deg, #fff0f5, #ffd6e4); }
.choice-btn.tone-grape { background: linear-gradient(180deg, #f7f1ff, #e0d2ff); }

/* ---------------- 數字磚 / 格子 ---------------- */
.num-tile {
  min-width: 62px; height: 70px; padding: 0 14px;
  border-radius: 16px; display: grid; place-items: center;
  font-size: 38px; font-weight: 800; color: var(--ink);
  background: linear-gradient(180deg, #fff, #eaf3fb);
  box-shadow: var(--sh-1); border: 3px solid #fff;
}
.num-tile.tone-sky { background: linear-gradient(180deg, #eaf7ff, #bfe3ff); }
.num-tile.tone-sand { background: linear-gradient(180deg, #fff8e4, #ffe3a3); }
.num-tile.tone-mint { background: linear-gradient(180deg, #eafff8, #b9efdd); }

.num-box {
  min-width: 66px; height: 74px; padding: 0 14px;
  border-radius: 16px; display: grid; place-items: center;
  font-size: 40px; font-weight: 800; color: #c2510f;
  background: #fff;
  box-shadow: inset 0 4px 10px rgba(0, 0, 0, .1), 0 0 0 4px rgba(255, 200, 70, .5);
}
.num-box.is-empty {
  background: repeating-linear-gradient(45deg, #fffdf5, #fffdf5 8px, #fff4d9 8px, #fff4d9 16px);
  color: transparent;
}
.num-box.tone-sky { box-shadow: inset 0 4px 10px rgba(0, 0, 0, .1), 0 0 0 4px rgba(90, 180, 255, .5); }
.num-box.is-blink { animation: boxBlink .9s ease 2; }
@keyframes boxBlink {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.14); box-shadow: 0 0 0 8px rgba(255, 150, 60, .45), inset 0 4px 10px rgba(0, 0, 0, .1); }
}

/* ---------------- 物件格（數數） ---------------- */
.obj-grid {
  display: grid; gap: clamp(6px, 1vw, 16px); justify-content: center;
}
.obj-grid.is-tight { gap: 6px; }
.obj-cell {
  position: relative;
  display: grid; place-items: center;
  border-radius: 22px;
  transition: transform .16s cubic-bezier(.2, 1.5, .5, 1), background .2s ease;
  cursor: default;
}
.obj-cell.is-tappable { cursor: pointer; }
.obj-cell.is-tappable:hover { transform: translateY(-5px) scale(1.05); background: rgba(255, 255, 255, .6); }
.obj-cell.is-marked { background: rgba(255, 236, 170, .6); }
.obj-img { width: 100%; height: 100%; border-radius: 50%; display: grid; place-items: center; }
.obj-img img { width: 88%; height: 88%; object-fit: contain; filter: drop-shadow(0 3px 3px rgba(0, 0, 0, .18)); }
.obj-cell.is-tappable:active { transform: scale(.92); }
.obj-badge {
  position: absolute; right: -6px; top: -6px;
  min-width: 34px; height: 34px; padding: 0 6px;
  border-radius: 999px; display: grid; place-items: center;
  font-family: var(--font-num); font-size: 20px; font-weight: 800; color: #fff;
  background: linear-gradient(180deg, #ffb347, #e8721c);
  box-shadow: 0 3px 0 rgba(150, 70, 0, .4);
  opacity: 0; transform: scale(.4);
  transition: all .22s cubic-bezier(.2, 1.6, .5, 1);
}
.obj-badge.is-on { opacity: 1; transform: scale(1); }

.disc { border-radius: 50%; display: grid; place-items: center; box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .07); }
.disc-img { width: 78%; height: 78%; object-fit: contain; }

/* ---------------- 數線 ---------------- */
.nl-wrap {
  width: min(900px, 94%); padding: 26px 16px 12px;
  background: rgba(255, 255, 255, .7); border-radius: var(--r-lg);
}
.nl-track {
  position: relative; height: 100px;
  display: grid; align-items: end;
  grid-auto-flow: column; grid-auto-columns: 1fr;
}
.nl-tick {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding-top: 34px;
}
.nl-tick::before {
  content: ''; position: absolute; left: 0; right: 0; bottom: 54px; height: 8px;
  background: #dbe8f5;
}
.nl-tick:first-child::before { border-radius: 8px 0 0 8px; left: 50%; }
.nl-tick:last-child::before { border-radius: 0 8px 8px 0; right: 50%; }
.nl-tick.is-past::before { background: linear-gradient(180deg, #9fe0ff, #4fb4ee); }
.nl-dot {
  width: 18px; height: 18px; border-radius: 50%;
  background: #fff; box-shadow: 0 0 0 4px #cfe4f5;
  margin-bottom: 44px;
  transition: all .25s ease;
}
.nl-tick.is-past .nl-dot { background: #4fb4ee; box-shadow: 0 0 0 4px #a8dcff; }
.nl-tick.is-here .nl-dot { transform: scale(1.3); background: #ff9f2e; box-shadow: 0 0 0 5px rgba(255, 160, 40, .35); }
.nl-num {
  position: absolute; bottom: 0;
  font-size: 26px; font-weight: 800; color: var(--ink-soft);
}
.nl-tick.is-here .nl-num { color: #e0641f; transform: scale(1.15); }
.nl-marker {
  position: absolute; bottom: 34px; left: 0;
  transition: transform .34s cubic-bezier(.3, 1.4, .5, 1);
  z-index: 3;
}
.nl-marker-img { width: 62px; height: 62px; object-fit: contain; filter: drop-shadow(0 4px 4px rgba(0, 0, 0, .25)); }
.nl-wrap.is-tall .nl-track { height: 130px; }

/* ---------------- 分與合 ---------------- */
.bond {
  --bond-size: 84px;
  display: flex; flex-direction: column; align-items: center;
  padding: 6px 0;
}
.bond-box {
  width: var(--bond-size); height: var(--bond-size);
  border-radius: 22px; display: grid; place-items: center;
  font-size: calc(var(--bond-size) * .52); font-weight: 800; color: var(--ink);
  background: linear-gradient(180deg, #fff, #eaf3fb);
  box-shadow: var(--sh-1); border: 4px solid rgba(255, 255, 255, .95);
}
.bond-box.is-empty { color: #c2510f; background: repeating-linear-gradient(45deg, #fffdf5, #fffdf5 9px, #fff2d2 9px, #fff2d2 18px); }
.bond-box.is-top { background: linear-gradient(180deg, #fff6d6, #ffdf94); }
.bond-box.is-blink { animation: boxBlink .9s ease 2; }
.bond-lines { width: 150px; height: 40px; position: relative; }
.bond-line { position: absolute; top: 0; height: 100%; width: 5px; background: #c8dcee; border-radius: 4px; }
.bond-line.is-left { left: 24px; transform: rotate(34deg); transform-origin: top center; }
.bond-line.is-right { right: 24px; transform: rotate(-34deg); transform-origin: top center; }
.bond-bottom { display: flex; gap: 22px; }
.bond.is-compact { --bond-size: 62px; }

/* ---------------- 算式 ---------------- */
.eq {
  display: flex; align-items: center; justify-content: center; gap: clamp(8px, 1.2vw, 18px);
  font-family: var(--font-num);
  flex-wrap: wrap;
}
.eq-num, .eq-op, .eq-sign {
  font-size: clamp(40px, 5vw, 68px); font-weight: 800; color: var(--ink);
  line-height: 1.1;
}
.eq-op { color: #e0641f; }
.eq-sign { color: var(--ink-soft); }
.eq-num.is-result { color: #1f7fbf; }
.eq-num.is-empty, .eq-op.is-empty {
  min-width: 1.5em; height: 1.35em; padding: 0 .2em;
  border-radius: 18px; color: transparent;
  background: repeating-linear-gradient(45deg, #fffdf5, #fffdf5 10px, #fff0c9 10px, #fff0c9 20px);
  box-shadow: inset 0 4px 10px rgba(0, 0, 0, .08), 0 0 0 5px rgba(255, 200, 70, .45);
  display: inline-grid; place-items: center;
}
.eq-num.is-empty.is-filled, .eq-num:not(.is-empty) { color: #c2510f; }
.eq-num.is-blink, .eq-op.is-blink { animation: boxBlink .9s ease 2; }
.eq.is-small .eq-num, .eq.is-small .eq-op, .eq.is-small .eq-sign { font-size: clamp(28px, 3vw, 40px); }
.eq.is-big .eq-num, .eq.is-big .eq-op, .eq.is-big .eq-sign { font-size: clamp(52px, 6.4vw, 88px); }

/* ---------------- 拖放 / 點選放入 ---------------- */
.dz { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.dz-src { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.dz-item {
  min-width: 92px; padding: 10px 16px; border-radius: 20px;
  background: linear-gradient(180deg, #fff, #eaf3fb);
  box-shadow: var(--sh-1); border: 4px solid rgba(255, 255, 255, .95);
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  cursor: pointer;
  transition: transform .14s ease, box-shadow .14s ease;
}
.dz-item:hover { transform: translateY(-4px); box-shadow: var(--sh-2); }
.dz-item.is-selected {
  transform: translateY(-6px) scale(1.05);
  box-shadow: 0 0 0 6px rgba(255, 200, 70, .6), var(--sh-2);
  background: linear-gradient(180deg, #fff8dd, #ffe9a8);
}
.dz-item.is-placed { cursor: default; box-shadow: var(--sh-1); }
.dz-item-img { width: 62px; height: 62px; object-fit: contain; }
.dz-item-label { font-family: var(--font-num); font-size: 34px; font-weight: 800; color: var(--ink); }
.dz-item.tone-sky { background: linear-gradient(180deg, #eaf7ff, #c3e5ff); }
.dz-item.tone-sand { background: linear-gradient(180deg, #fff8e4, #ffdf9c); }
.dz-item.tone-mint { background: linear-gradient(180deg, #eafff8, #b7eeda); }
.dz-arrow { opacity: .5; }
.dz-arrow img { width: 40px; height: 40px; }
.dz-targets {
  display: grid; gap: clamp(12px, 2vw, 30px); justify-content: center; width: 100%;
}
.dz-targets.cols-1 { grid-template-columns: 1fr; }
.dz-targets.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dz-targets.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.dz-targets.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.dz-target {
  position: relative;
  min-height: 132px; padding: 12px;
  border-radius: var(--r-lg);
  border: 5px dashed rgba(90, 150, 200, .45);
  background: rgba(255, 255, 255, .55);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  cursor: pointer;
  transition: background .18s ease, border-color .18s ease, transform .14s ease;
}
.dz-target:hover { background: rgba(255, 255, 255, .85); border-color: rgba(255, 170, 40, .8); }
.dz-target-img { width: 54px; height: 54px; object-fit: contain; opacity: .85; }
.dz-target-label { font-size: 17px; font-weight: 800; color: var(--ink-soft); }
.dz-slot { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; min-height: 60px; align-items: center; }

/* ---------------- 天秤 ---------------- */
.balance { position: relative; width: min(620px, 92%); padding-bottom: 26px; }
.bal-row { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; }
.bal-pan { display: flex; flex-direction: column; align-items: center; transition: transform .5s cubic-bezier(.3, 1.3, .5, 1); }
.bal-plate {
  width: clamp(110px, 14vw, 170px); min-height: clamp(80px, 10vw, 110px);
  border-radius: 0 0 60% 60% / 0 0 80% 80%;
  background: linear-gradient(180deg, #ffd98a, #e9a93f);
  box-shadow: inset 0 -8px 0 rgba(0, 0, 0, .1), var(--sh-1);
  display: grid; place-items: center; padding: 10px;
  border: 4px solid rgba(255, 255, 255, .8);
}
.bal-label { font-family: var(--font-num); font-size: 46px; font-weight: 800; color: #7a4400; }
.bal-plate img { width: 62px; height: 62px; object-fit: contain; }
.bal-top { height: 16px; display: grid; place-items: center; }
.bal-beam {
  width: 100%; height: 16px; border-radius: 10px;
  background: linear-gradient(180deg, #b98b57, #8c6134);
  transition: transform .5s cubic-bezier(.3, 1.3, .5, 1);
  transform-origin: center;
}
.bal-stand {
  width: 26px; height: 46px; margin: 0 auto;
  background: linear-gradient(180deg, #a87a48, #7d5227);
  border-radius: 0 0 10px 10px;
}

/* ---------------- 計時條 ---------------- */
.timerbar {
  width: min(620px, 84%); height: 22px; border-radius: 999px;
  background: #dbe8f5; overflow: hidden; box-shadow: inset 0 3px 6px rgba(0, 0, 0, .12);
}
.timerbar-fill {
  height: 100%; width: 100%;
  background: linear-gradient(90deg, #7fe0a8, #35c069);
  border-radius: 999px; transition: background .3s ease;
}
.timerbar.is-low .timerbar-fill { background: linear-gradient(90deg, #ffc46b, #ff6b6b); }

/* ---------------- 大字 / 對話框 ---------------- */
.big-number {
  font-family: var(--font-num);
  font-size: clamp(70px, 11vw, 150px); font-weight: 800; line-height: 1;
  color: #fff;
  -webkit-text-stroke: 6px #3aa0d8;
  paint-order: stroke fill;
  text-shadow: 0 8px 0 rgba(0, 60, 110, .25);
}
.big-number.tone-sun { -webkit-text-stroke-color: #e79b1c; }
.big-number.tone-mint { -webkit-text-stroke-color: #2fa98e; }

.bubble {
  display: flex; align-items: center; gap: 12px; max-width: 92%;
  background: #fff; border-radius: 22px; padding: 12px 20px;
  box-shadow: var(--sh-1); border: 4px solid rgba(255, 255, 255, .95);
  position: relative;
}
.bubble.is-right { flex-direction: row-reverse; }
.bubble-avatar { width: 62px; height: 62px; flex: 0 0 auto; }
.bubble-avatar img { width: 100%; height: 100%; object-fit: contain; }
.bubble-text { font-size: clamp(17px, 1.9vw, 23px); font-weight: 700; color: var(--ink); line-height: 1.5; }
.bubble-text b { color: #e0641f; font-family: var(--font-num); font-size: 1.2em; }

/* ---------------- 小螢幕微調 ---------------- */
@media (max-width: 900px) {
  .mg-panel { padding: 14px 14px 18px; border-radius: var(--r-lg); }
  .choice-grid.cols-5, .choice-grid.cols-6, .choice-grid.cols-7, .choice-grid.cols-8 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .obj-grid { gap: 4px !important; }
  .nl-marker-img { width: 44px; height: 44px; }
  .nl-num { font-size: 20px; }
}