/* ========== 教学系统样式 (tutorial-system.css) ========== */

/* 黑幕层 */
.tutorial-overlay {
  background: transparent;
  pointer-events: none;
}

/* 提示框 */
.tutorial-prompt {
  background: rgba(30, 20, 50, 0.95);
  border: 2px solid #a085db;
  border-radius: 10px;
  font-family: "HYPixel11", "PixelFont", sans-serif;
  font-size: 36px;
  color: #e0d5ff;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6);
  line-height: 1.6;
  white-space: pre-line;
  background-image: linear-gradient(
    135deg,
    rgba(30, 20, 50, 0.95) 0%,
    rgba(50, 30, 80, 0.9) 100%
  );
}

.tutorial-prompt-primary {
  display: block;
}

.tutorial-prompt-secondary {
  display: block;
  margin-top: 10px;
  font-size: 0.5em;
  color: #ffb6d9;
  font-weight: bold;
  line-height: 1.3;
  animation: breathe 2s ease-in-out infinite;
}

/* 高亮效果 */
.tutorial-highlight {
  box-shadow: 0 0 30px rgba(200, 150, 255, 1) inset !important;
  border: 2px solid #e8c5ff !important;
}

/* 标签 */
.tutorial-label {
  background: rgba(50, 30, 80, 0.95);
  border: 1px solid #c9a5ff;
  padding: 8px 12px;
  border-radius: 6px;
  font-family: "HYPixel11", "PixelFont", sans-serif;
  font-size: 28px;
  color: #f0e5ff;
  white-space: nowrap;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

/* ESC 跳过提示 */
.tutorial-esc-hint {
  display: block !important;
  visibility: visible !important;
  background: transparent !important;
  border: none !important;
  padding: 10px 16px !important;
  font-family: "HYPixel11", "PixelFont", sans-serif !important;
  font-size: 16px !important;
  color: #ffb6d9 !important;
  font-weight: bold !important;
  white-space: nowrap !important;
  pointer-events: none !important;
  text-shadow: none !important;
  animation: breathe 2s ease-in-out infinite !important;
}

/* 呼吸灯动画 - 纯透明度呼吸 */
@keyframes breathe {
  0% {
    opacity: 0.5;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0.5;
  }
}

/* 动画 */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeOut {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(-10px);
  }
}