/* mg-table.css — 加減法表 專屬樣式（共用零件在 minigames.css） */

.tb-wrap { width: 100%; display: flex; justify-content: center; overflow-x: auto; padding: 2px; }
.tb-table {
  display: grid;
  gap: 6px;
  width: 100%;
  max-width: 940px;
}

.tb-corner, .tb-head, .tb-rowhead {
  display: grid; place-items: center;
  padding: 4px 2px;
  border-radius: 12px;
  background: rgba(255, 255, 255, .65);
  font-family: var(--font-num);
  font-size: 20px; font-weight: 800;
  color: var(--ink-soft);
}
.tb-corner { background: linear-gradient(180deg, #ffe9b8, #ffd88a); color: #8a5a00; }
.tb-head { background: linear-gradient(180deg, #eaf7ff, #cfe9ff); color: #25628c; }
.tb-rowhead { background: linear-gradient(180deg, #eafff8, #c3f2e2); color: #0d7a63; }

.tb-cell {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: 56px;
  padding: 3px 4px;
  border-radius: 14px;
  background: linear-gradient(180deg, #ffffff, #eef5fc);
  box-shadow: var(--sh-1);
  border: 3px solid rgba(255, 255, 255, .92);
  transition: box-shadow .2s ease, opacity .2s ease;
}
.tb-eq {
  font-family: var(--font-num);
  font-size: 14px; font-weight: 700;
  color: var(--ink-soft);
  line-height: 1.1;
}
.tb-sum {
  font-family: var(--font-num);
  font-size: 26px; font-weight: 800;
  color: #1f7fbf;
  line-height: 1.15;
}
.tb-cell.is-off {
  background: rgba(255, 255, 255, .22);
  box-shadow: none;
  border: 3px dashed rgba(120, 150, 180, .3);
}
.tb-cell.is-blank { background: repeating-linear-gradient(45deg, #fffdf5, #fffdf5 8px, #fff4d9 8px, #fff4d9 16px); }
.tb-cell.is-blank .tb-sum { color: #c2510f; }
.tb-cell.is-line {
  background: linear-gradient(180deg, #fff8e4, #ffe4a8);
  box-shadow: 0 0 0 4px rgba(255, 150, 60, .7), var(--sh-1);
}
.tb-cell.is-faded { opacity: .38; }
.tb-cell.is-now { animation: boxBlink 1.1s ease infinite; box-shadow: 0 0 0 5px #ff9f2e, var(--sh-2); }
.tb-cell.is-bad { box-shadow: 0 0 0 5px rgba(230, 80, 80, .85), var(--sh-1); }

/* 找規律：一排算式磚 */
.tb-line { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.tb-tile {
  display: flex; flex-direction: column; align-items: center;
  min-width: 96px;
  padding: 8px 14px;
  border-radius: 18px;
  background: linear-gradient(180deg, #ffffff, #eaf3fb);
  box-shadow: var(--sh-1);
  border: 3px solid rgba(255, 255, 255, .92);
}
.tb-tile .tb-eq { font-size: 17px; }
.tb-tile .tb-sum { font-size: 30px; color: #c2510f; }
.tb-tile.is-blank { background: repeating-linear-gradient(45deg, #fffdf5, #fffdf5 8px, #fff4d9 8px, #fff4d9 16px); }

/* 大型卡片按鈕（每張卡片裝幾個算式） */
.tb-choices { display: grid; gap: 14px; justify-content: center; width: 100%; max-width: 940px; }
.tb-choices.cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.tb-choices.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tb-choices.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tb-choices.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tb-choice {
  padding: 12px 10px;
  border-radius: 22px;
  border: 4px solid rgba(255, 255, 255, .92);
  background: linear-gradient(180deg, #ffffff, #e9f2fb);
  box-shadow: var(--sh-1);
  display: flex; flex-direction: column; gap: 6px; align-items: center;
  transition: transform .13s ease, box-shadow .13s ease;
}
.tb-choice:hover { transform: translateY(-4px); box-shadow: var(--sh-2); }
.tb-choice.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);
}
.tb-choice.is-dim { opacity: .35; filter: grayscale(.6); }
.tb-mini {
  display: flex; align-items: baseline; gap: 6px;
  padding: 4px 10px;
  border-radius: 12px;
  background: rgba(255, 255, 255, .8);
  width: 100%;
  justify-content: center;
}
.tb-mini-eq { font-family: var(--font-num); font-size: 20px; font-weight: 700; color: var(--ink-soft); }
.tb-mini-v { font-family: var(--font-num); font-size: 26px; font-weight: 800; color: #c2510f; }

.tb-pad { width: 100%; display: grid; place-items: center; }