/* VocabularySprint 通用样式（提取自 pepWG 的核心部分） */
:root {
  --primary-color: #4CAF50;
  --primary-hover: #45a049;
  --danger-color: #f44336;
  --bg-primary: #000000;
  --text-primary: #ffffff;
  --text-secondary: #ecf0f1;
  --border-color: #3d3d3d;
  --border-light: #4a4a4a;
  --border-radius: 8px;
  --border-radius-large: 12px;
  --border-radius-xl: 16px;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body {
  height: 100%;
  font-family: 'Microsoft YaHei', 'PingFang SC', 'Helvetica Neue', Arial, sans-serif;
  line-height: 1.6;
  overflow-x: hidden;
  background-color: var(--bg-primary);
  color: var(--text-primary);
  font-size: 18px;
}
a { text-decoration: none; color: inherit; }
button { font-family: inherit; cursor: pointer; border: none; outline: none; }
input { font-family: inherit; outline: none; }
.hidden { display: none !important; visibility: hidden !important; opacity: 0 !important; }

/* 容器与头部 */
.game-container {
  min-height: 100vh; padding: 20px; display: flex; flex-direction: column;
  align-items: center; justify-content: flex-start; max-width: 1200px; margin: 0 auto;
}
.game-header { width: 100%; max-width: 1200px; margin-bottom: 30px; padding: 20px;
  background-color: transparent; border-radius: var(--border-radius-large);
  text-align: center; border: 2px solid var(--border-color);
}
.game-title { font-size: 3.0rem; color: var(--primary-color); margin-bottom: 10px;
  text-shadow: 0 2px 4px rgba(0,0,0,0.3); font-weight: bold; text-align: center;
}
.level-title { font-size: 1.8rem; color: var(--text-secondary); font-weight: bold; text-align: center; }

/* 屏幕与布局 */
.screen {
  width: 100%; max-width: 1000px; background-color: transparent;
  border-radius: var(--border-radius-xl); padding: 32px; border: 2px solid var(--border-color);
  min-height: 50vh; display: none; flex-direction: column; margin: 0 auto;
}
.active { display: flex !important; }

/* 按钮（提升观感） */
.btn {
  padding: 16px 30px; font-size: 1.1rem; border-radius: 12px; border: 2px solid var(--border-color);
  cursor: pointer; transition: transform 0.08s ease, box-shadow 0.2s ease, border-color 0.2s ease, background-color 0.3s ease;
  text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-weight: 700;
  background-color: rgba(255,255,255,0.02) !important; color: #ffffff !important; min-width: 160px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
.btn:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(0,0,0,0.35); }
.btn-primary { border-color: var(--primary-color); }
.btn-primary:hover { background-color: rgba(76, 175, 80, 0.15) !important; border-color: var(--primary-hover); }
.btn-secondary { border-color: var(--border-light); }
.btn-secondary:hover { background-color: rgba(255,255,255,0.1) !important; border-color: var(--border-color); }
.btn-danger { border-color: var(--danger-color); }
.btn-danger:hover { background-color: rgba(244,67,54,0.1) !important; border-color: #d32f2f; }
.btn:active { transform: translateY(0); box-shadow: 0 3px 10px rgba(0,0,0,0.35); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; pointer-events: none; border-color: #666; }

/* 状态与提示 */
.stats-display { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; padding: 12px; }
.selection-tip { background-color: #ff9800; color: white; padding: 10px 16px; border-radius: var(--border-radius); margin: 8px 0 16px; text-align: center; font-weight: 500; }
.selection-tip.hidden { display: none; }
.disabled { opacity: 0.5 !important; cursor: not-allowed !important; pointer-events: none !important; }

/* 补充：基础列表与文本 */
ul { list-style: none; padding-left: 0; }

/* 竖屏标题缩放与头部紧凑 */
@media (orientation: portrait) {
  .game-header { margin-bottom: 16px; padding: 12px; }
  /* 原为 clamp(1.6rem, 5.5vw, 2.2rem)，再小一点以节省竖屏空间 */
  .game-title { font-size: clamp(1.4rem, 4.8vw, 1.9rem); }
}