/* mg-story.css — 看圖講故事 專屬樣式（共用零件在 minigames.css） */

/* 場景卡（放圖畫） */
.st-scene {
  width: 100%;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 8px 12px;
  padding: 12px 16px;
  border-radius: var(--r-lg);
  background: rgba(255, 255, 255, .6);
  box-shadow: inset 0 0 0 4px rgba(255, 255, 255, .55), var(--sh-1);
}
.st-scene.tone-sand { background: linear-gradient(180deg, #fffdf4, #fff2d6); }
.st-scene.tone-sky { background: linear-gradient(180deg, #f9fdff, #e6f4ff); }
.st-scene.tone-grape { background: linear-gradient(180deg, #fcfaff, #f0e9ff); }
.st-scene .obj-grid { gap: 6px; }
.st-scene .obj-cell { background: rgba(255, 255, 255, .55); }

/* 加號 */
.st-plus {
  font-family: var(--font-num);
  font-size: clamp(30px, 3.4vw, 46px);
  font-weight: 800;
  color: #e0641f;
  padding: 0 6px;
  line-height: 1;
}

/* 被吃掉 / 被拿走的東西 */
.is-gone { opacity: .3; filter: grayscale(1); }
.is-gone::after {
  content: '';
  position: absolute;
  left: 14%; right: 14%; top: 50%;
  height: 5px; border-radius: 4px;
  background: #e0544f;
  transform: rotate(-20deg);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .7);
}

/* 不知道數量時的空格子 */
.st-qgrid { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: center; }
.st-qcell {
  border-radius: 16px;
  border: 4px dashed rgba(90, 150, 200, .55);
  display: grid; place-items: center;
  font-family: var(--font-num); font-size: 30px; font-weight: 800;
  color: #6d95b5;
  background: repeating-linear-gradient(45deg, #fdfdff, #fdfdff 7px, #e9f2fb 7px, #e9f2fb 14px);
}

/* 小註解（吃掉幾個、剩下幾個） */
.st-note {
  font-size: 17px; font-weight: 800; color: var(--ink-soft);
  background: rgba(255, 255, 255, .8);
  padding: 6px 14px; border-radius: 999px;
  align-self: center;
}

/* 文字 / 算式選項按鈕 */
.st-opts { display: grid; gap: 14px; justify-content: center; width: 100%; max-width: 940px; }
.st-opts.cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.st-opts.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.st-opts.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.st-opt {
  min-height: 88px;
  padding: 12px 18px;
  border-radius: 24px;
  border: 4px solid rgba(255, 255, 255, .92);
  background: linear-gradient(180deg, #ffffff, #e9f2fb);
  box-shadow: var(--sh-1);
  display: grid; place-items: center;
  font-family: var(--font-num);
  font-size: clamp(24px, 2.8vw, 38px);
  font-weight: 800;
  color: var(--ink);
  line-height: 1.2;
  transition: transform .13s ease, box-shadow .13s ease;
}
.st-opt:hover { transform: translateY(-4px); box-shadow: var(--sh-2); }
.st-opt.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);
}
.st-opt.is-dim { opacity: .35; filter: grayscale(.6); }
.st-opts.is-text .st-opt {
  font-family: var(--font);
  font-size: clamp(17px, 1.9vw, 23px);
  place-items: start;
  text-align: left;
  line-height: 1.55;
  min-height: 76px;
}
.st-opt.tone-mint { background: linear-gradient(180deg, #eafff8, #c3f2e2); }
.st-opt.tone-sun { background: linear-gradient(180deg, #fff8e4, #ffe6ad); }

/* 誰剩下的多：左右兩堆 */
.st-vs { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; width: 100%; }
.st-vs-side {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 10px 14px 14px;
  border-radius: var(--r-lg);
  background: rgba(255, 255, 255, .72);
  box-shadow: var(--sh-1);
  min-width: 240px;
}
.st-vs-side .bubble { width: 100%; padding: 8px 12px; }
.st-vs-side .bubble-avatar { width: 46px; height: 46px; }
.st-vs-side .bubble-text { font-size: 16px; }
.st-vs-side .obj-cell { background: rgba(255, 255, 255, .5); }

/* 夠不夠 / 一樣多嗎：一排小圖 */
.st-fair-row { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; align-items: flex-end; }
.st-fair-item {
  width: 74px; height: 74px; display: grid; place-items: center;
  background: rgba(255, 255, 255, .6);
  border-radius: 20px;
  box-shadow: var(--sh-1);
}
.st-fair-item img { width: 58px; height: 58px; object-fit: contain; }

/* 數字鍵盤的放置區 */
.mg-pad-host { width: 100%; display: grid; place-items: center; }