/* 基础样式 */

body {
  background-image: linear-gradient(to bottom right, #e6f7ff, #ccf2ff);
  min-height: 100vh;
  font-family: "Noto Sans SC", "Microsoft YaHei", "微软雅黑", "PingFang SC",
    "苹方", sans-serif;
  touch-action: manipulation;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

/* 塔的样式 */
#tower-container {
  position: relative;
  background-image: linear-gradient(to top, #4a5568, #2d3748);
  border: 4px solid #1a202c;
  border-bottom-width: 8px;
}

#tower-container::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: repeating-linear-gradient(
    to bottom,
    transparent,
    transparent 10px,
    rgba(255, 255, 255, 0.05) 10px,
    rgba(255, 255, 255, 0.05) 20px
  );
  pointer-events: none;
}

/* 玩家角色样式 */
#player {
  box-shadow: 0 0 10px rgba(255, 215, 0, 0.6);
  transition: bottom 0.5s ease-out;
  z-index: 10;
}

/* 计时器样式 */
#timer-progress {
  transition: width 0.1s linear;
}

/* 生命值样式 */
.heart {
  color: #e53e3e;
  font-size: 1.5rem;
  margin-right: 0.25rem;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.3));
  transition: transform 0.2s ease;
}

.heart.lost {
  color: #718096;
  transform: scale(0.8);
}

/* 问题容器样式 */
#question-container {
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: background-color 0.3s ease;
}

#question-container.correct {
  background-color: #c6f6d5;
}

#question-container.wrong {
  background-color: #fed7d7;
}

/* 答案按钮样式 */
.answer-btn {
  transition: all 0.2s ease;
}

.answer-btn:hover {
  transform: translateY(-2px);
}

.answer-btn.correct {
  background-color: #48bb78;
}

.answer-btn.wrong {
  background-color: #f56565;
}

/* 层级标记样式 */
.level-marker {
  position: absolute;
  right: 0;
  background-color: rgba(255, 255, 255, 0.8);
  padding: 2px 8px;
  font-size: 0.75rem;
  font-weight: bold;
  color: #2d3748;
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
  box-shadow: -1px 1px 3px rgba(0, 0, 0, 0.2);
}

/* 特殊层级标记 */
.level-marker.special {
  background-color: rgba(246, 173, 85, 0.9);
  color: #fff;
}

/* 游戏结果动画 */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

#game-result {
  animation: fadeIn 0.5s ease-out;
}

/* 奖励动画 */
@keyframes coinPop {
  0% {
    transform: scale(0);
    opacity: 0;
  }
  60% {
    transform: scale(1.2);
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.coin-reward {
  animation: coinPop 0.5s ease-out;
}

/* 配置模态框样式 */
#config-modal {
  transition: opacity 0.3s ease;
}

.difficulty-btn.active {
  position: relative;
}

.difficulty-btn.active::after {
  content: "✓";
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  font-weight: bold;
}

/* 响应式调整 */
@media (max-width: 640px) {
  #tower-container {
    height: 200px;
  }

  #question {
    font-size: 1.5rem;
  }

  .answer-btn {
    font-size: 1.25rem;
    padding: 0.5rem;
  }

  #config-modal .grid {
    grid-template-columns: 1fr;
  }
}