/* 游戏说明和主题展示组件样式 - 第二层C */

/* 游戏说明组件 */
.tile-guide {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 15px;
  padding: 25px;
  margin: 30px 0;
  backdrop-filter: blur(10px);
}

/* 游戏目标说明在tile-guide容器内的样式 */
.tile-guide .game-explanation {
  /* color: var(--guide-text, #333);  /* 注释掉：使用主题默认颜色 */
  font-size: 16px;
  text-align: center;
  margin-bottom: 20px;
  line-height: 1.5;
}

/* "游戏目标"使用突出色 */
.tile-guide .game-explanation .important {
  /* color: var(--bright-text, #e74c3c);  /* 注释掉：使用主题默认颜色 */
  font-weight: 600;
}

/* "终极方块"只使用基础色和加粗 */
.ultimate-goal {
  /* color: var(--guide-text, #666);  /* 注释掉：使用主题默认颜色 */
  font-weight: bold;
}

/* "小提示"三个字使用强调色 */
.tile-description strong {
  /* color: var(--bright-text, #e74c3c);  /* 注释掉：使用主题默认颜色 */
  font-weight: 600;
}

.tile-guide h3 {
  /* color: var(--guide-text, #333);  /* 注释掉：使用主题默认颜色 */
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 20px;
  text-align: center;
}

.tile-guide-content {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 500px;
  margin: 0 auto;
}

/* 游戏目标部分 */
.game-goal {
  margin: 10px 0 10px 0;  /* 上下各10px边距，平衡间距 */
}

.game-goal .game-explanation {
  margin: 0;
  padding: 0;
}

.tile-merge-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 3px;
}

/* Mini-tile组件 */
.mini-tile {
  width: 40px;
  height: 40px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 16px;
  color: #776e65;
  position: relative;
  flex-shrink: 0;
}

/* mini-tile背景色和文字颜色现在由各个主题CSS文件根据配置文件动态生成 */

/* 合并箭头 */
.merge-arrow {
  color: var(--text-color, #8f7a66);
  font-size: 20px;
  font-weight: bold;
}

/* 合并结果 */
.merge-result {
  position: relative;
}

.merge-result::after {
  content: '✨';
  position: absolute;
  top: -5px;
  right: -5px;
  font-size: 14px;
  /* animation: sparkle 1.5s ease-in-out infinite; */ /* 暂时注释掉所有小星星动画 */
}

@keyframes sparkle {
  0%, 100% { opacity: 0.3; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.2); }
}

/* 终极方块的特殊效果 - 只对2048方块应用阴影 */
.mini-tile-2048 {
  box-shadow: 0 0 20px rgba(237, 194, 46, 0.5), 0 0 10px rgba(237, 194, 46, 0.3);
}

/* 终极合并结果(2048)的突出显示 */
.mini-tile-2048.merge-result {
  transform: scale(1.05) !important;
  box-shadow: 0 0 15px rgba(255, 215, 0, 0.4), 0 0 8px rgba(255, 215, 0, 0.3) !important;
  border: 1px solid #FFD700 !important;
}

/* 终极合并结果的小星星也要更突出 */
.mini-tile-2048.merge-result::before,
.mini-tile-2048.merge-result::after {
  filter: drop-shadow(0 0 5px #FFD700) !important;
}

/* 箭头动画 */
.arrow-animated {
  animation: arrowMove 2s ease-in-out infinite;
}

@keyframes arrowMove {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(3px); }
}

/* 小提示说明 */
.tile-description {
  text-align: center;
  margin-top: 15px;
  margin-bottom: 10px;  /* 增加下边距，使总间距与容器padding一致 */
  color: var(--guide-text, #666);
  font-size: 14px;
  line-height: 1.4;
}

/* 更多主题区域组件 */
.more-themes {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 15px;
  padding: 25px;
  margin: 30px 0;
  backdrop-filter: blur(10px);
}

.more-themes h3 {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 20px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.more-themes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  margin-bottom: 20px;
}

/* 小主题卡片组件 (主题游戏页使用) */
.theme-card-mini {
  width: 100%;
  aspect-ratio: 4/3;
  border-radius: 12px;
  text-decoration: none;
  color: inherit;
  transition: all 0.3s ease;
  border: 2px solid transparent;
  position: relative;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  display: block;
}

.theme-card-mini:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
  border-color: rgba(102, 126, 234, 0.5);
}

.theme-card-mini .theme-preview {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transition: transform 0.3s ease;
}

.theme-card-mini:hover .theme-preview {
  transform: scale(1.02);
}

.theme-card-mini .theme-name {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
  color: white;
  padding: 15px 12px 12px;
  font-size: 15px;
  font-weight: 600;
  text-align: center;
  line-height: 1.2;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
  z-index: 2;
}

.theme-card-mini.coming-soon {
  opacity: 0.85;
}

.theme-card-mini.coming-soon::after {
  content: attr(data-tag);
  position: absolute;
  top: 10px;
  left: 10px;
  background: rgba(230, 126, 34, 0.9);
  color: white;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 500;
}

.theme-card-mini.available::after {
  content: attr(data-tag);
  position: absolute;
  top: 10px;
  left: 10px;
  background: rgba(39, 174, 96, 0.9);
  color: white;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 500;
}

.theme-card-mini.planned::after {
  content: attr(data-tag);
  position: absolute;
  top: 10px;
  left: 10px;
  background: rgba(142, 68, 173, 0.9);
  color: white;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 500;
}

.theme-card-mini.featured {
  border-color: #e74c3c;
}

.theme-card-mini.featured::before {
  content: '🔥';
  position: absolute;
  top: 10px;
  right: 10px;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  z-index: 10;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

/* 快速导航按钮布局 */
.quick-nav {
  display: flex;
  justify-content: center;
  gap: 15px;
  margin-top: 20px;
  flex-wrap: wrap;
}

/* 分组显示样式 */
.tile-merge-group {
  margin-bottom: 20px;
}

.tile-merge-group h4 {
  font-size: 14px;
  color: #8f7a66;
  margin-bottom: 10px;
  text-align: center;
  font-weight: 500;
}

.tile-examples {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 15px;
  margin-top: 20px;
}

.example-rule {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  padding: 15px;
  text-align: center;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.example-rule h5 {
  font-size: 14px;
  color: #8f7a66;
  margin-bottom: 10px;
}

.example-rule p {
  font-size: 12px;
  color: #666;
  line-height: 1.4;
}

/* 响应式调整 */
@media (max-width: 600px) {
  .tile-guide {
    padding: 20px 15px;
    margin: 20px 0;
  }

  .mini-tile {
    width: 35px;
    height: 35px;
    font-size: 14px;
  }

  .mini-tile-128, .mini-tile-256, .mini-tile-512 {
    font-size: 12px;
  }

  .mini-tile-1024, .mini-tile-2048 {
    font-size: 11px;
  }

  .merge-arrow {
    font-size: 16px;
  }

  .tile-merge-row {
    gap: 10px;
    padding: 8px;
  }

  .more-themes-grid {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
  }

  .theme-card-mini .theme-name {
    font-size: 14px;
    padding: 15px 12px 12px;
  }

  .quick-nav {
    gap: 10px;
  }

  .quick-nav-btn {
    padding: 8px 16px;
    font-size: 13px;
  }
}