﻿/* ===========================================================
   mg-count.css — 小遊戲「數一數」專屬樣式
   （共用樣式都在 minigames.css，這裡只補這個遊戲特有的部分）
   =========================================================== */

/* ---------- 難度 3：散亂排版（東西沒有排整齊，要更用心數） ---------- */
.obj-grid.is-scatter { align-items: center; row-gap: 4px; }
.obj-grid.is-scatter .obj-cell:nth-child(2n) { transform: translateY(16px) rotate(-4deg); }
.obj-grid.is-scatter .obj-cell:nth-child(3n) { transform: translateY(-12px) rotate(5deg); }
.obj-grid.is-scatter .obj-cell:nth-child(4n) { transform: translateY(20px) rotate(7deg); }
.obj-grid.is-scatter .obj-cell.is-tappable:hover { transform: translateY(-4px) scale(1.06) rotate(0deg); }
.obj-grid.is-scatter .obj-cell.is-circlable:hover { transform: translateY(-4px) scale(1.06) rotate(0deg); }

/* ---------- 圈出 N 個：用筆圈起來的感覺 ---------- */
.obj-cell.is-circlable { cursor: pointer; }
.obj-cell.is-circlable:hover { transform: translateY(-4px) scale(1.06); background: rgba(255, 255, 255, .6); }
.obj-cell.is-circlable:active { transform: scale(.94); }
.obj-cell.is-circled::after {
  content: '';
  position: absolute; inset: 1px;
  border-radius: 50%;
  border: 6px solid #ef7f1a;
  box-shadow: 0 0 0 4px rgba(255, 220, 150, .55);
  animation: cntRing .34s cubic-bezier(.2, 1.6, .5, 1) both;
  pointer-events: none;
}
@keyframes cntRing {
  from { opacity: 0; transform: scale(.55) rotate(-14deg); }
  to { opacity: 1; transform: scale(1) rotate(0deg); }
}

/* ---------- 圖卡上的一群動物／小物品 ---------- */
.cnt-group {
  display: flex; flex-wrap: wrap; gap: 4px 6px; justify-content: center;
  align-content: center;
  max-width: 230px; margin-bottom: 6px;
  animation: popIn .35s cubic-bezier(.2, 1.3, .5, 1) both;
}
.cnt-group-img {
  width: 36px; height: 36px; object-fit: contain;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .18));
}

/* ---------- 數字與數量配對：放對／放錯的提示 ---------- */
.dz-target.is-bad {
  border-color: #ff8f8f;
  background: rgba(255, 236, 236, .92);
  animation: cntBad .45s ease 2;
}
@keyframes cntBad {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-7px); }
  75% { transform: translateX(7px); }
}
.dz-target.is-good {
  border-color: #6fd6a0;
  background: rgba(235, 255, 245, .92);
}

/* ---------- 按鈕列（重設 / 我圈好了 / 我放好了） ---------- */
.cnt-btns { max-width: 640px; }
.cnt-btns .choice-label { font-size: clamp(26px, 3vw, 40px); }
