/* ============ 基础 ============ */
:root {
  --blue: #2563EB;
  --blue-dark: #1D4ED8;
  --orange: #F59E0B;
  --green: #16A34A;
  --green-bg: #DCFCE7;
  --red: #DC2626;
  --red-bg: #FEE2E2;
  --text: #1F2937;
  --text-soft: #6B7280;
  --bg: #FFF8EF;
  --card-bg: #FFFFFF;
  --radius: 24px;
  --shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  -webkit-tap-highlight-color: transparent;
}

#app {
  max-width: 680px;
  margin: 0 auto;
  padding: 20px 16px 40px;
}

.loading {
  text-align: center;
  font-size: 24px;
  color: var(--text-soft);
  padding-top: 40vh;
}

button {
  font-family: inherit;
  border: none;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
}
button:active { transform: scale(0.97); }

/* ============ 首页 ============ */
.app-title {
  font-size: 40px;
  font-weight: 700;
  text-align: center;
  margin-top: 12px;
  color: var(--blue-dark);
}

.app-subtitle {
  font-size: 22px;
  text-align: center;
  color: var(--text-soft);
  margin: 10px 0 8px;
}

.total-progress {
  text-align: center;
  font-size: 20px;
  color: var(--green);
  font-weight: 600;
  margin-bottom: 20px;
  min-height: 26px;
}

.category-title {
  font-size: 24px;
  font-weight: 700;
  color: var(--text-soft);
  margin: 28px 4px 14px;
}

.unit-card {
  display: flex;
  align-items: center;
  gap: 18px;
  width: 100%;
  background: var(--card-bg);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 24px 22px;
  margin-bottom: 18px;
  text-align: left;
  border: 3px solid transparent;
}
.unit-card:active { border-color: var(--blue); }

.unit-emoji { font-size: 52px; line-height: 1; }

.unit-info { flex: 1; }

.unit-name { font-size: 30px; font-weight: 700; color: var(--text); }

.unit-meta {
  font-size: 19px;
  color: var(--text-soft);
  margin-top: 6px;
}

.unit-star { font-size: 36px; }

.unit-arrow { font-size: 30px; color: var(--text-soft); }

/* ============ 单元页 ============ */
.screen-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 22px;
}

.btn-back {
  background: var(--card-bg);
  box-shadow: var(--shadow);
  border-radius: 18px;
  font-size: 22px;
  font-weight: 600;
  color: var(--text);
  padding: 14px 22px;
  min-height: 56px;
}

.screen-title {
  font-size: 32px;
  font-weight: 700;
  flex: 1;
  text-align: center;
  /* 让标题在视觉上居中（右侧留出与返回按钮等宽的空间） */
  margin-right: 96px;
}

.unit-hero {
  text-align: center;
  font-size: 90px;
  margin: 24px 0 8px;
}

.unit-desc {
  text-align: center;
  font-size: 22px;
  color: var(--text-soft);
  margin-bottom: 30px;
}

.btn-big {
  display: block;
  width: 100%;
  min-height: 88px;
  border-radius: var(--radius);
  font-size: 30px;
  font-weight: 700;
  margin-bottom: 20px;
  box-shadow: var(--shadow);
}

.btn-primary { background: var(--blue); color: #fff; }
.btn-secondary { background: var(--orange); color: #fff; }
.btn-plain { background: var(--card-bg); color: var(--text); }

/* ============ 学习模式 ============ */
.progress-text {
  text-align: center;
  font-size: 22px;
  color: var(--text-soft);
  font-weight: 600;
  margin-bottom: 14px;
}

.progress-bar {
  height: 14px;
  background: #E5E7EB;
  border-radius: 7px;
  overflow: hidden;
  margin-bottom: 24px;
}
.progress-fill {
  height: 100%;
  background: var(--green);
  border-radius: 7px;
  transition: width 0.3s;
}

.word-card {
  background: var(--card-bg);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  text-align: center;
  padding: 40px 20px 34px;
  margin-bottom: 24px;
}

.word-emoji { font-size: 80px; margin-bottom: 14px; }

.word-en {
  font-size: 52px;
  font-weight: 700;
  color: var(--blue-dark);
  line-height: 1.2;
  margin-bottom: 16px;
}

.word-en.long { font-size: 34px; }

.word-zh { font-size: 34px; color: var(--text); }

.speak-row {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 26px;
}

.btn-speak {
  background: var(--blue);
  color: #fff;
  border-radius: 999px;
  font-size: 26px;
  font-weight: 700;
  min-height: 76px;
  padding: 0 32px;
  box-shadow: var(--shadow);
}

.learn-nav {
  display: flex;
  gap: 16px;
}
.learn-nav .btn-big { flex: 1; margin-bottom: 0; }
.btn-big:disabled { opacity: 0.35; }

/* ============ 测验模式 ============ */
.quiz-question {
  background: var(--card-bg);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  text-align: center;
  padding: 30px 20px;
  margin-bottom: 24px;
}

.quiz-instruction {
  font-size: 22px;
  color: var(--text-soft);
  margin-bottom: 14px;
}

.quiz-prompt {
  font-size: 44px;
  font-weight: 700;
  color: var(--blue-dark);
  line-height: 1.25;
}

.quiz-prompt.long { font-size: 30px; }

.quiz-listen-btn {
  background: var(--blue);
  color: #fff;
  border-radius: 999px;
  font-size: 26px;
  font-weight: 700;
  min-height: 76px;
  padding: 0 40px;
  margin-top: 8px;
  box-shadow: var(--shadow);
}

.quiz-options { display: grid; gap: 16px; }

.quiz-option {
  background: var(--card-bg);
  border: 3px solid #E5E7EB;
  border-radius: var(--radius);
  font-size: 28px;
  font-weight: 600;
  color: var(--text);
  min-height: 80px;
  padding: 14px 20px;
  text-align: center;
  line-height: 1.3;
}

.quiz-option.correct {
  background: var(--green-bg);
  border-color: var(--green);
  color: var(--green);
}
.quiz-option.wrong {
  background: var(--red-bg);
  border-color: var(--red);
  color: var(--red);
}
.quiz-option:disabled { cursor: default; }
.quiz-option:disabled:active { transform: none; }

.quiz-feedback {
  text-align: center;
  font-size: 26px;
  font-weight: 700;
  min-height: 40px;
  margin: 20px 0 14px;
}
.quiz-feedback.good { color: var(--green); }
.quiz-feedback.bad { color: var(--red); }

/* ============ 结果页 ============ */
.results {
  text-align: center;
  padding-top: 30px;
}
.results-emoji { font-size: 100px; margin-bottom: 10px; }
.results-score {
  font-size: 54px;
  font-weight: 700;
  color: var(--blue-dark);
  margin-bottom: 10px;
}
.results-message {
  font-size: 28px;
  color: var(--text);
  margin-bottom: 40px;
}

/* ============ 大屏（iPad） ============ */
@media (min-width: 600px) {
  #app { padding-top: 40px; }
  .app-title { font-size: 48px; }
  .word-en { font-size: 64px; }
  .word-en.long { font-size: 42px; }
  .quiz-options { grid-template-columns: 1fr 1fr; }
}