body {
  font-family: 'Segoe UI', 'Arial', sans-serif;
  background: #f7faff;
  margin: 0;
  color: #333;
  box-sizing: border-box;
}

header,
footer {
  text-align: center;
  background: #6ec6ff;
  color: #fff;
  padding: 1em 0;
}

.modules {
  display: flex;
  justify-content: center;
  gap: 2em;
  margin: 2em 0;
  flex-wrap: wrap;
  padding: 0 1em;
}

.modules button {
  background: #ffd54f;
  border: none;
  border-radius: 1em;
  padding: 1.5em 2.5em;
  font-size: 1.5em;
  color: #333;
  cursor: pointer;
  box-shadow: 0 2px 8px #eee;
  transition: background 0.2s;
  margin: 0.5em;
}

.modules button:hover {
  background: #fff176;
}

#module-content {
  max-width: 600px;
  margin: 0 auto;
  background: #fff;
  border-radius: 1em;
  box-shadow: 0 2px 12px #e3e3e3;
  padding: 2em;
  min-height: 200px;
  width: 90%;
}

.card-list {
  display: flex;
  gap: 1.5em;
  justify-content: center;
  margin: 1.5em 0;
  flex-wrap: wrap;
}

.card {
  background: #fff9c4;
  border-radius: 1em;
  padding: 1em 1.5em;
  font-size: 2em;
  text-align: center;
  box-shadow: 0 2px 8px #eee;
}

.card span {
  display: block;
  font-size: 0.7em;
  color: #888;
}

.math-pair {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 1em;
  margin: 1.5em 0;
  font-size: 1.5em;
}

.english-list {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5em;
  justify-content: center;
  margin: 1.5em 0;
  font-size: 1.5em;
}

.problem {
  text-align: center;
  margin: 2em 0;
  font-size: 2em;
}

.numbers {
  background: #e3f2fd;
  padding: 0.5em;
  border-radius: 0.5em;
  display: inline-block;
}

.options {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1em;
  margin: 2em 0;
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
  width: 90%;
}

.options button {
  background: #6ec6ff;
  color: white;
  border: none;
  border-radius: 0.5em;
  padding: 1em;
  font-size: 1.5em;
  cursor: pointer;
  transition: background 0.2s;
}

.options button:hover {
  background: #4fc3f7;
}

.score {
  text-align: center;
  font-size: 1.2em;
  color: #666;
  margin: 1em 0;
}

.feedback {
  text-align: center;
  margin: 1em 0;
  min-height: 2em;
  font-size: 1.2em;
}

.correct {
  color: #4caf50;
}

.wrong {
  color: #f44336;
}

.return-btn {
  background: #6ec6ff;
  color: white;
  border: none;
  border-radius: 0.5em;
  padding: 0.8em 1.5em;
  font-size: 1.2em;
  cursor: pointer;
  display: block;
  margin: 1em auto;
}

.return-btn:hover {
  background: #4fc3f7;
}

.chinese-container {
  text-align: center;
  margin: 2em 0;
}

.word-card {
  background: #fff9c4;
  border-radius: 1em;
  padding: 2em;
  margin: 1em 0;
  box-shadow: 0 2px 8px #eee;
}

.char {
  font-size: 4em;
  margin: 0.2em 0;
  color: #333;
}

.pinyin {
  font-size: 1.5em;
  color: #666;
  margin: 0.5em 0;
}

.words {
  display: flex;
  justify-content: center;
  gap: 1em;
  margin: 1em 0;
  flex-wrap: wrap;
}

.word-item {
  background: #e3f2fd;
  padding: 0.5em 1em;
  border-radius: 0.5em;
  font-size: 1.2em;
}

.controls {
  display: flex;
  justify-content: center;
  gap: 2em;
  margin: 1em 0;
}

.controls button {
  background: #6ec6ff;
  color: white;
  border: none;
  border-radius: 0.5em;
  padding: 0.8em 2em;
  font-size: 1.2em;
  cursor: pointer;
  min-width: 120px;
}

.controls button:disabled {
  background: #ccc;
  cursor: not-allowed;
}

.learn-btn {
  background: #4caf50 !important;
}

.forget-btn {
  background: #f44336 !important;
}

/* 趣味游戏列表样式（与全局风格统一） */
.game-list {
  display: flex;
  flex-wrap: wrap;
  gap: 2em;
  justify-content: center;
  margin: 2em 0;
  padding: 0 1em;
  /* 增加内边距适应不同屏幕 */
}

.game-item {
  background: #fff3e0;
  /* 与数学模块卡片色统一 */
  border-radius: 1em;
  padding: 2em 1.5em;
  /* 调整内边距平衡内容 */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s, box-shadow 0.2s, background 0.3s;
  /* 新增背景色过渡 */
  text-align: center;
  width: 250px;
}

.game-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
  background: #ffe0b2;
  /* 悬停时背景色变亮 */
}

.game-item h3 {
  color: #ff6d00;
  /* 保持主色突出 */
  margin-bottom: 0.8em;
  /* 调整标题间距 */
  font-size: 1.4em;
  /* 增大标题字号 */
}

.game-item p {
  color: #666;
  font-size: 0.9em;
  line-height: 1.4;
  /* 增加段落行高提升可读性 */
}

/* 趣味游戏标题样式（与全局标题风格呼应） */
#game h2 {
  text-align: center;
  color: #ff6d00;
  margin: 1.5em 0 1em;
  /* 调整标题上下间距 */
  font-size: 2.5em;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
  border-bottom: 3px solid #ffb74d;
  /* 新增下划线装饰 */
  display: inline-block;
  /* 下划线仅覆盖文字宽度 */
  padding-bottom: 0.2em;
  /* 调整下划线间距 */
}

/* 趣味游戏返回按钮（与全局返回按钮样式统一） */
.game-return-btn {
  background: #6ec6ff;
  color: white;
  border: none;
  border-radius: 0.5em;
  padding: 0.8em 1.5em;
  font-size: 1.2em;
  cursor: pointer;
  display: block;
  margin: 1.5em auto;
  transition: background 0.2s;
}

.game-return-btn:hover {
  background: #4fc3f7;
}

/* 趣味游戏卡片动画（新增入场动画） */
.game-item {
  animation: fadeInUp 0.5s ease-out;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 游戏模块样式 */
#game-module {
  text-align: center;
}

/* 游戏列表样式 */
.game-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  margin: 20px 0;
}

.game-item {
  width: 250px;
  padding: 15px;
  border-radius: 10px;
  background-color: #f8f9fa;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  cursor: pointer;
}

.game-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

.game-item h3 {
  color: #3498db;
  margin-bottom: 10px;
}

.game-item p {
  color: #666;
  font-size: 0.9em;
}

.game-return-btn {
  margin-top: 20px;
  padding: 10px 20px;
  background-color: #3498db;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.game-return-btn:hover {
  background-color: #2980b9;
}

/* 趣味游戏标题样式 */
#game h2 {
  text-align: center;
  color: #ff6d00;
  margin: 2em 0 1em;
  font-size: 2.5em;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
}

/* 华容道游戏样式 */
.klotski-container {
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;
  text-align: center;
}

.klotski-header {
  margin-bottom: 20px;
}

.klotski-header h3 {
  color: #ff6d00;
  font-size: 2em;
  margin-bottom: 10px;
}

.klotski-header p {
  color: #666;
  font-size: 1.2em;
}

.klotski-board {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 5px;
  margin: 0 auto;
  width: 300px;
  height: 300px;
  background-color: #f0f0f0;
  padding: 10px;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.klotski-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2em;
  font-weight: bold;
  background: #4CAF50;
  color: white;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s ease;
  user-select: none;
  height: 100%;
}

.klotski-cell:hover {
  transform: scale(0.95);
  background: #2E7D32;
}

.klotski-container button {
  margin-top: 20px;
  padding: 10px 20px;
  font-size: 1.1em;
  background-color: #4CAF50;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.klotski-container button:hover {
  background-color: #45a049;
}

/* 确保选择器权重一致 */
button.sudoku-modal-button.primary { 
  /* 原有样式 */
}

button.sudoku-modal-button.secondary-btn {
  /* 原有样式 */
}

/* 响应式设计 - 媒体查询 */
@media screen and (max-width: 768px) {
  /* 平板电脑屏幕 */
  .modules button {
    padding: 1.2em 2em;
    font-size: 1.3em;
  }
  
  #module-content {
    padding: 1.5em;
  }
  
  .card {
    font-size: 1.8em;
  }
  
  .math-pair {
    font-size: 1.3em;
  }
  
  .english-list {
    font-size: 1.3em;
  }
  
  .problem {
    font-size: 1.8em;
  }
  
  .options button {
    font-size: 1.3em;
  }
  
  .char {
    font-size: 3.5em;
  }
  
  .pinyin {
    font-size: 1.3em;
  }
  
  .klotski-board {
    width: 280px;
    height: 280px;
  }
}

@media screen and (max-width: 480px) {
  /* 手机屏幕 */
  header h1 {
    font-size: 1.8em;
  }
  
  header p {
    font-size: 1em;
  }
  
  .modules {
    gap: 1em;
  }
  
  .modules button {
    padding: 1em 1.5em;
    font-size: 1.2em;
    width: 100%;
    max-width: 200px;
  }
  
  #module-content {
    padding: 1em;
  }
  
  .card {
    font-size: 1.5em;
    padding: 0.8em 1.2em;
  }
  
  .math-pair {
    font-size: 1.2em;
    grid-template-columns: 1fr;
  }
  
  .english-list {
    font-size: 1.2em;
  }
  
  .problem {
    font-size: 1.5em;
  }
  
  .options {
    grid-template-columns: 1fr;
  }
  
  .options button {
    font-size: 1.2em;
  }
  
  .controls {
    flex-direction: column;
    gap: 1em;
  }
  
  .controls button {
    width: 100%;
  }
  
  .char {
    font-size: 3em;
  }
  
  .pinyin {
    font-size: 1.2em;
  }
  
  .word-card {
    padding: 1.5em;
  }
  
  .game-item {
    width: 100%;
    max-width: 250px;
  }
  
  .klotski-board {
    width: 250px;
    height: 250px;
  }
  
  .klotski-header h3 {
    font-size: 1.8em;
  }
  
  .klotski-header p {
    font-size: 1em;
  }
}