/* -------------------- */
/* 縺頑ｰ励↓蜈･繧翫Μ繧ｹ繝医ヶ繝ｭ繝�け */
/* -------------------- */
.favorites-block {
  overflow-x: auto;
  white-space: nowrap;
  margin-bottom: 15px;
  /* 菴咏區繧貞濠蛻�↓ */
  padding: 5px;
  /* 繝代ョ繧｣繝ｳ繧ｰ繧ょ濠蛻�↓ */
  background-color: #fafafa;
  border: 1px solid #ddd;
  border-radius: 5px;
}

.favorites-block h2 {
  margin: 0 0 5px;
  font-size: 0.9rem;
  /* 繝輔か繝ｳ繝医し繧､繧ｺ繧貞ｰ上＆縺� */
}

/* 縺頑ｰ励↓蜈･繧翫い繧､繝�Β�域ｨｪ荳ｦ縺ｳ縲√し繧､繧ｺ繧貞濠蛻�↓�� */
.favorite-item {
  display: inline-block;
  vertical-align: top;
  margin-right: 10px;
  /* 菴咏區繧貞ｰ上＆縺� */
  width: 75px;
  /* 蟷�ｒ75px縺ｫ螟画峩 */
  text-align: center;
}

.favorite-item img {
  width: 100%;
  height: auto;
  border-radius: 5px;
}

/* 縺頑ｰ励↓蜈･繧翫�繧ｿ繝ｳ */
.favorite-btn {
  position: relative;
  /* 霑ｽ蜉� */
  display: inline-block;
  margin: 10px 0;
  padding: 5px 10px;
  background: #ddd;
  border: 1px solid #ccc;
  cursor: pointer;
  overflow: hidden;
  /* 霑ｽ蜉� */
  transition: background-color 0.3s ease, transform 0.3s ease;
}

.favorite-btn.favorited {
  background: #ff6600;
  color: #fff;
  border-color: #ff6600;
  animation: pop 0.3s ease forwards;
}

/* 繝昴ャ繝励い繝九Γ繝ｼ繧ｷ繝ｧ繝ｳ */
@keyframes pop {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.1);
  }

  100% {
    transform: scale(1);
  }
}

/* 逍台ｼｼ隕∫ｴ�縺ｫ繧医ｋ繧ｭ繝ｩ繝ｼ繝ｳ繧ｨ繝輔ぉ繧ｯ繝� */
.favorite-btn::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.8) 10%, transparent 10%);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  pointer-events: none;
}

.favorite-btn.favorited::after {
  animation: flash 0.6s ease-out;
}

@keyframes flash {
  0% {
    width: 0;
    height: 0;
    opacity: 1;
  }

  50% {
    width: 200%;
    height: 200%;
    opacity: 0.6;
  }

  100% {
    width: 300%;
    height: 300%;
    opacity: 0;
  }
}

/* ========================================
   繝懊ち繝ｳ繧ｰ繝ｫ繝ｼ繝� - 讓ｪ荳ｦ縺ｳ驟咲ｽｮ
   ======================================== */
.button-group {
  display: flex;
  align-items: center;
  gap: 15px;
  margin: 20px 0;
  flex-wrap: wrap;
  /* 繝｢繝舌う繝ｫ蟇ｾ蠢� */
}

/* 讓ｪ荳ｦ縺ｳ譎ゅ�Discord繝懊ち繝ｳ隱ｿ謨ｴ */
.button-group .machine-discord-button {
  margin: 0;
  /* 譌｢蟄倥�margin繧偵Μ繧ｻ繝�ヨ */
  clear: none;
  /* clear繝励Ο繝代ユ繧｣繧定ｧ｣髯､ */
}

/* 讓ｪ荳ｦ縺ｳ譎ゅ�縺頑ｰ励↓蜈･繧翫�繧ｿ繝ｳ隱ｿ謨ｴ */
.button-group .favorite-btn {
  margin: 0;
  /* 譌｢蟄倥�margin繧偵Μ繧ｻ繝�ヨ */
}

/* ========================================
   繧ｵ繝�繝阪う繝ｫ荳翫�繝懊ち繝ｳ驟咲ｽｮ
   ======================================== */
.thumbnail-container {
  position: relative;
  width: 150px;
  margin: 0 auto;
  background: transparent;
}

.thumbnail-container .machine-thumbnail {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 150px;
  max-height: 150px;
  object-fit: contain;
}

/* 縺頑ｰ励↓蜈･繧翫�繧ｿ繝ｳ�医し繝�繝阪う繝ｫ荳企Κ�� */
.favorite-btn-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: auto;
  height: auto;
  z-index: 10;
  margin: 0;
  padding: 0;
  background: transparent;
  border: none;
  cursor: default;
}

/* Discord繝懊ち繝ｳ�医し繝�繝阪う繝ｫ荳矩Κ�� */
.discord-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 10;
  margin: 0;
}

.discord-overlay .discord-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 5px;
  background: rgba(88, 101, 242, 0.9);
  color: #fff;
  text-decoration: none;
  font-size: 11px;
  font-weight: bold;
  border-radius: 0;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.discord-overlay .discord-link:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(88, 101, 242, 0.4);
}

.discord-overlay .discord-icon {
  width: 16px !important;
  height: 16px !important;
  max-width: 16px;
  max-height: 16px;
  flex-shrink: 0;
}

.discord-overlay .discord-text {
  white-space: nowrap;
}