/* 說明文字樣式 */
.description {
  text-align: center;
  font-size: 1.3rem;
  color: #2563eb;
  margin-top: -8px;
  margin-bottom: 28px;
  font-weight: 500;
}

h1 {
  color: #b45309;
  text-align: center;
}

body {
  font-family: Arial, sans-serif;
  padding: 2rem;
  background-color: #f4f6f8;
}

/* 1. Grid 佈局 */
.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 16px;
  max-width: 800px;
  margin: 0 auto;
}

/* 2. 按鈕基礎樣式 */
.grid-item {
  background: linear-gradient(145deg, #ffffff, #e6e6e6);
  border: 1px solid #dcdcdc;
  border-radius: 12px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 1.15rem;
  text-align: center;
  padding: 4px 8px;
  cursor: grab;
  color: #2c3e50;
  line-height: 1.25;

  /* 切斷瀏覽器原生滾動，將觸控權完全交給 SortableJS */
  touch-action: none !important;
  user-select: none !important;
  -webkit-user-select: none !important;
  -webkit-touch-callout: none !important;

  box-shadow: 
    3px 3px 6px #c5c5c5, 
    -3px -3px 6px #ffffff,
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
  transition: transform 0.15s ease, background-color 0.15s ease;
}

.grid-item:hover {
  background: linear-gradient(145deg, #ffffff, #ededed);
  transform: translateY(-2px);
}

.grid-item:active {
  cursor: grabbing;
}

/* 3. 按住準備拖曳時（變藍色） */
.sortable-chosen {
  background: #2563eb !important;
  color: #ffffff !important;
  border-color: #1d4ed8 !important;
}

/* 4. 手指/滑鼠正在拖曳移動中的方塊 */
.sortable-drag {
  opacity: 0.9 !important;
  background: #2563eb !important;
  color: #ffffff !important;
  border: 2px solid #1d4ed8 !important;
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.3) !important;
  z-index: 99999 !important;
  transition: none !important;
}

/* 5. 被拿走後原本留下的預覽虛線框 */
.sortable-ghost {
  opacity: 0.3 !important;
  background-color: #cbd5e1 !important;
  border: 2px dashed #2563eb !important;
  box-shadow: none !important;
}