﻿/* mg-shape.css — 立體圖形 專屬樣式（共用零件在 minigames.css） */

/* 圖形格 */
.sh-grid { display: grid; gap: 14px; justify-content: center; justify-items: center; }
.sh-grid.cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.sh-grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sh-grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sh-grid.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.sh-item {
  display: grid; place-items: center;
  padding: 8px 14px;
  border-radius: 24px;
  background: rgba(255, 255, 255, .72);
  box-shadow: var(--sh-1);
  border: 4px solid rgba(255, 255, 255, .9);
}
.sh-item .sh-img { width: clamp(64px, 9vw, 104px); height: clamp(64px, 9vw, 104px); object-fit: contain; }
.sh-item.is-big { padding: 12px 26px; }
.sh-item.is-big .sh-img { width: clamp(110px, 16vw, 180px); height: clamp(110px, 16vw, 180px); }

/* 題目圖形（在選項上方） */
.mg-body .sh-grid + .mg-question-text { margin-top: 2px; }

/* 上下左右排列 */
.sh-row { display: flex; gap: 16px; justify-content: center; align-items: center; flex-wrap: wrap; width: 100%; }
.sh-col { display: flex; flex-direction: column; gap: 12px; justify-content: center; align-items: center; width: 100%; }
.sh-col .sh-item .sh-img { width: clamp(52px, 7vw, 88px); height: clamp(52px, 7vw, 88px); }

/* choice 按鈕裡的圖形放大一點 */
.choice-btn .choice-img { filter: drop-shadow(0 3px 3px rgba(20, 40, 80, .16)); }

/* 拖放分類：把圖形卡片放大 */
.dz-item-img { width: 72px; height: 72px; }
.dz-item { min-width: 104px; }
