/* css/style.css
   死记硬背 — Apple 设计风格
   设计语言：iOS 系统色与系统字体、半透明导航材质、尺寸感知字距、
   即时按压反馈、Apple 标准缓动曲线（cubic-bezier(0.32, 0.72, 0, 1)）
   主色 #007AFF（systemBlue）/ 成功 #34C759 / 危险 #FF3B30 / 警示 #FF9500
*/

/* ===== 设计令牌 ===== */
:root {
  /* iOS 系统色 */
  --color-primary: #007AFF;   /* systemBlue */
  --color-success: #34C759;   /* systemGreen */
  --color-danger: #FF3B30;    /* systemRed */
  --color-warning: #FF9500;   /* systemOrange */

  /* 中性色（iOS 灰阶） */
  --bg: #F2F2F7;              /* systemGroupedBackground */
  --bg-card: #FFFFFF;
  --text: #1C1C1E;            /* label */
  --text-secondary: #3A3A3C;  /* secondaryLabel */
  --text-tertiary: #8E8E93;   /* tertiaryLabel */
  --separator: rgba(60, 60, 67, 0.12);
  --fill: rgba(120, 120, 128, 0.12);

  /* 圆角 */
  --radius-card: 16px;
  --radius-btn: 14px;
  --radius-cell: 12px;

  /* 阴影 */
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.04), 0 4px 12px rgba(0, 0, 0, 0.04);
  --shadow-overlay: 0 12px 48px rgba(0, 0, 0, 0.22);

  /* Apple 标准缓动（sheet 曲线） */
  --ease-apple: cubic-bezier(0.32, 0.72, 0, 1);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

html, body {
  height: 100%;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang SC", "Helvetica Neue", sans-serif;
  font-optical-sizing: auto;
  background: var(--bg);
  color: var(--text);
  font-size: 17px;
  line-height: 1.5;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  outline: none;
}

/* ===== 页面系统 ===== */
.page {
  display: none;
  width: 100%;
  min-height: 100vh;
  padding: 16px;
  padding-bottom: calc(16px + env(safe-area-inset-bottom));
  animation: pageIn 0.3s var(--ease-apple);
}

.page.active {
  display: block;
}

@keyframes pageIn {
  from { opacity: 0; transform: translateY(10px) scale(0.99); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* 纯透明度过渡：供减弱动效模式使用 */
@keyframes fadeOnly {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ===== 通用按钮（iOS 填充/着色样式） ===== */
.btn-primary,
.btn-secondary,
.btn-danger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 50px;
  padding: 14px 20px;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: #FFFFFF;
  border-radius: var(--radius-btn);
  transition: transform 0.12s ease-out, opacity 0.12s ease-out, background 0.15s ease-out;
}

/* 填充样式（Filled） */
.btn-primary {
  background: var(--color-primary);
}

/* 着色样式（Tinted） */
.btn-secondary {
  background: rgba(0, 122, 255, 0.12);
  color: var(--color-primary);
}

.btn-danger {
  background: var(--color-danger);
}

/* 按压即时反馈（pointer-down 即响应，非 touch-up） */
.btn-primary:active,
.btn-secondary:active,
.btn-danger:active {
  transform: scale(0.97);
  opacity: 0.75;
}

/* 次级文字按钮（返回等，iOS 导航栏样式） */
.btn-back {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 8px 10px 8px 2px;
  font-size: 17px;
  font-weight: 400;
  color: var(--color-primary);
  background: transparent;
  transition: opacity 0.12s ease-out;
}

.btn-back:active {
  opacity: 0.4;
}

/* ===== 卡片 ===== */
.card {
  background: var(--bg-card);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 16px;
}

/* ===== 进度条 ===== */
.progress-bar {
  width: 100%;
  height: 8px;
  background: var(--fill);
  border-radius: 99px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  width: 0%;
  background: var(--color-primary);
  border-radius: 99px;
  transition: width 0.35s var(--ease-apple);
}

/* ===== 主页（iOS 大标题风格） ===== */
#page-home {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

#page-home.active {
  display: flex;
}

.home-title {
  font-size: clamp(34px, 12vw, 56px);
  font-weight: 700;
  letter-spacing: -0.02em;   /* 大字号负字距 */
  line-height: 1.1;
  color: var(--text);
  margin-bottom: 10px;
}

.home-subtitle {
  color: var(--text-tertiary);
  margin-bottom: 48px;
  font-size: 17px;
}

.home-buttons {
  width: 100%;
  max-width: 340px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* ===== 游戏页 ===== */
/* 半透明导航材质：内容从下方滚过，毛玻璃质感 */
.game-header {
  position: sticky;
  top: 0;
  /* 置于开始浮窗(90)之上、结果浮层(100)之下：开始浮窗打开时左上角词库下拉仍可切换 */
  z-index: 95;
  background: rgba(242, 242, 247, 0.82);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  padding: 8px 16px 12px;
  margin: -16px -16px 12px;  /* 全出血材质 */
}

@supports not ((backdrop-filter: blur(20px)) or (-webkit-backdrop-filter: blur(20px))) {
  .game-header { background: rgba(242, 242, 247, 0.98); }
}

.game-header-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.game-stats {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 15px;
  font-weight: 600;
}

.game-stat-score {
  color: var(--color-success);
}

.game-stat-timer {
  color: var(--color-warning);
  font-variant-numeric: tabular-nums;  /* 等宽数字，避免跳动 */
}

.game-header .progress-bar {
  margin-top: 8px;
}

/* 游戏页头部左侧：返回 + 词库下拉（iOS 导航栏按钮样式） */
.game-header-left {
  display: flex;
  align-items: center;
  gap: 2px;
  min-width: 0;
}

.library-select {
  max-width: 140px;
  padding: 6px 8px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  color: var(--color-primary);
  background: transparent;
  border: none;
  border-radius: 8px;
  outline: none;
  cursor: pointer;
  transition: background 0.12s ease-out;
}

.library-select:active {
  background: var(--fill);
}

#game-container {
  width: 100%;
  min-height: 60vh;
}

/* 配对游戏：左右两列 */
.match-board {
  display: flex;
  gap: 12px;
}

.match-column {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* ===== 单词卡 ===== */
.word-card {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  padding: 12px;
  font-size: 16px;
  font-weight: 600;
  text-align: center;
  background: var(--bg-card);
  border: 1.5px solid var(--separator);
  border-radius: var(--radius-cell);
  transition: transform 0.12s ease-out, border-color 0.15s ease-out,
    background 0.15s ease-out, opacity 0.25s ease-out;
  user-select: none;
}

.word-card:active {
  transform: scale(0.97);
}

.word-card.selected {
  border-color: var(--color-primary);
  background: rgba(0, 122, 255, 0.08);
}

.word-card.eliminated {
  opacity: 0;
  pointer-events: none;
  transform: scale(0.8);
}

.word-card.wrong {
  border-color: var(--color-danger);
  background: rgba(255, 59, 48, 0.08);
  animation: shake 0.3s ease;
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}

/* 斩词 / 填词 题目区 */
.question-card {
  background: var(--bg-card);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 24px 16px;
  text-align: center;
  margin-bottom: 16px;
}

.question-word {
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-bottom: 8px;
}

/* 斩词：音标 + 词性 + 中文释义 一行 */
.question-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  font-size: 14px;
}

.question-phonetics {
  color: var(--text-tertiary);
  font-size: 15px;
}

.question-pos {
  color: var(--color-primary);
  font-style: italic;
  font-weight: 600;
}

.question-meaning {
  color: var(--text-secondary);
  font-weight: 600;
}

.question-example {
  font-size: 17px;
  line-height: 1.6;
}

.question-example .blank {
  display: inline-block;
  min-width: 80px;
  border-bottom: 2px solid var(--color-primary);
  margin: 0 4px;
}

/* 填词：例句中文翻译 */
.question-translation {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--separator);
  font-size: 14px;
  color: var(--text-tertiary);
  line-height: 1.5;
}

/* 配对：右栏词性 + 释义 */
.word-card .card-pos {
  display: inline-block;
  margin-right: 6px;
  font-size: 12px;
  font-style: italic;
  font-weight: 600;
  color: var(--color-primary);
}

.options {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.option-btn {
  padding: 15px;
  font-size: 17px;
  font-weight: 600;
  color: var(--text);
  background: var(--bg-card);
  border: 1.5px solid var(--separator);
  border-radius: var(--radius-cell);
  transition: transform 0.12s ease-out, border-color 0.15s ease-out,
    background 0.15s ease-out, color 0.15s ease-out;
}

.option-btn:active {
  transform: scale(0.97);
}

.option-btn.correct {
  border-color: var(--color-success);
  background: rgba(52, 199, 89, 0.1);
  color: #248A3E;   /* systemGreen 加深文本色，保证浅底可读 */
}

.option-btn.incorrect {
  border-color: var(--color-danger);
  background: rgba(255, 59, 48, 0.08);
  color: #D70015;   /* systemRed 加深文本色 */
}

/* ===== 查漏补缺页 ===== */
.section-title {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 24px 0 12px;
}

.stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.stat-box {
  background: var(--bg-card);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 18px 16px;
  text-align: center;
}

.stat-value {
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--color-primary);
  font-variant-numeric: tabular-nums;
}

.stat-label {
  font-size: 13px;
  color: var(--text-tertiary);
  margin-top: 4px;
}

.chart-container {
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
}

.chart-container canvas {
  width: 100%;
  height: 240px;
  display: block;
}

/* 记忆状态模块摘要行 */
.memory-summary {
  margin-top: 10px;
  font-size: 13px;
  color: var(--text-tertiary);
  text-align: center;
}

/* ===== 导入页 ===== */
.import-box-row {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.import-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 24px 16px;
  background: var(--bg-card);
  border: none;
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  text-align: center;
  transition: transform 0.12s ease-out, background 0.15s ease-out;
}

.import-box:active {
  transform: scale(0.98);
  background: rgba(0, 122, 255, 0.04);
}

.import-icon {
  font-size: 28px;
}

.import-label {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-secondary);
}

.file-input {
  display: none;
}

.word-list {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.word-list-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--bg-card);
  border-radius: var(--radius-cell);
}

.word-list-main {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
  flex: 1;
  min-width: 0;
}

.word-list-side {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.word-list-item .en {
  font-weight: 600;
  font-size: 16px;
}

.word-list-item .word-pos {
  font-size: 12px;
  font-style: italic;
  font-weight: 600;
  color: var(--color-primary);
}

.word-list-item .word-phonetics {
  font-size: 12px;
  color: var(--text-tertiary);
}

.word-list-item .cn {
  color: var(--text-secondary);
  font-size: 14px;
}

.pronounce-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  color: var(--color-primary);
  background: rgba(0, 122, 255, 0.1);
  border-radius: 50%;
  transition: transform 0.12s ease-out, background 0.15s ease-out;
}

.pronounce-btn:active {
  transform: scale(0.9);
  background: rgba(0, 122, 255, 0.18);
}

.pronounce-btn.loading {
  color: var(--color-warning);
  background: rgba(255, 149, 0, 0.12);
}

.pronounce-btn:disabled {
  cursor: not-allowed;
}

.pronounce-btn svg {
  display: block;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.pronounce-btn .spin {
  animation: spin 0.9s linear infinite;
}

/* 词库条目（可点击展开/收起，iOS 分组列表样式） */
.library-entry {
  background: var(--bg-card);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

.library-entry-header {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 14px 16px;
  background: transparent;
  text-align: left;
  transition: background 0.12s ease-out;
}

.library-entry-header:active {
  background: var(--fill);
}

.library-entry-icon {
  font-size: 20px;
}

.library-entry-name {
  flex: 1;
  font-size: 17px;
  font-weight: 600;
  color: var(--text);
}

.library-entry-count {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-tertiary);
}

.library-entry-arrow {
  color: var(--text-tertiary);
  font-size: 13px;
}

.library-entry-words {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0 8px 8px;
}

/* 展开的单词行：iOS 嵌套分组（浅灰底内嵌白卡） */
.library-entry-words .word-list-item {
  background: var(--bg);
  border: none;
}

/* ===== 开始游戏浮窗 ===== */
#game-start-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgba(0, 0, 0, 0.4);
  align-items: center;
  justify-content: center;
  padding: 24px;
}

#game-start-overlay.active {
  display: flex;
}

.start-card {
  width: 100%;
  max-width: 360px;
  background: var(--bg-card);
  border-radius: 20px;
  box-shadow: var(--shadow-overlay);
  padding: 28px 20px;
  animation: popIn 0.35s var(--ease-apple);
}

@keyframes popIn {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}

.start-title {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-align: center;
  margin-bottom: 18px;
}

.start-modes {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 16px;
}

.start-mode {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 13px 14px;
  background: var(--bg);
  border: 1.5px solid transparent;
  border-radius: var(--radius-cell);
  text-align: left;
  transition: transform 0.12s ease-out, border-color 0.15s ease-out,
    background 0.15s ease-out;
}

.start-mode:active {
  transform: scale(0.97);
}

.start-mode.active {
  border-color: var(--color-primary);
  background: rgba(0, 122, 255, 0.08);
}

.start-mode-name {
  font-size: 17px;
  font-weight: 600;
  color: var(--text);
}

.start-mode.active .start-mode-name {
  color: var(--color-primary);
}

.start-mode-desc {
  font-size: 12px;
  color: var(--text-tertiary);
}

.start-library {
  font-size: 13px;
  color: var(--text-tertiary);
  text-align: center;
  margin-bottom: 16px;
}

/* ===== 游戏结果浮层 ===== */
#game-result-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(0, 0, 0, 0.4);
  align-items: center;
  justify-content: center;
  padding: 24px;
}

#game-result-overlay.active {
  display: flex;
}

.result-card {
  width: 100%;
  max-width: 360px;
  background: var(--bg-card);
  border-radius: 20px;
  box-shadow: var(--shadow-overlay);
  padding: 28px 20px;
  text-align: center;
  animation: popIn 0.35s var(--ease-apple);
}

#result-title {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text);
  margin-bottom: 12px;
}

#result-score {
  font-size: 44px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--color-primary);
  margin-bottom: 8px;
  font-variant-numeric: tabular-nums;
}

#result-detail {
  font-size: 14px;
  color: var(--text-tertiary);
  margin-bottom: 20px;
}

#result-close {
  margin-top: 4px;
}

/* ===== 无障碍：减弱动效 / 减弱透明度 ===== */
/* 减弱动效：去掉位移/缩放，仅保留透明度过渡 */
@media (prefers-reduced-motion: reduce) {
  .page,
  .result-card,
  .start-card {
    animation: fadeOnly 0.15s ease;
  }
  .progress-fill {
    transition: none;
  }
  .word-card,
  .word-card.eliminated,
  .option-btn,
  .btn-primary,
  .btn-secondary,
  .btn-danger,
  .import-box,
  .start-mode,
  .pronounce-btn,
  .btn-back {
    transition: none;
  }
}

/* 减弱透明度：材质改为实色 */
@media (prefers-reduced-transparency: reduce) {
  .game-header {
    background: var(--bg);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

/* ===== 响应式 ===== */
/* 小屏手机（≤360px，如 iPhone SE）：收紧字号与间距，保证双列配对板不溢出 */
@media (max-width: 360px) {
  body { font-size: 16px; }

  .btn-primary,
  .btn-secondary,
  .btn-danger {
    min-height: 46px;
    font-size: 16px;
  }

  .btn-back { font-size: 16px; }

  .game-stats { gap: 8px; font-size: 13px; }

  .library-select { max-width: 108px; font-size: 14px; }

  .question-word { font-size: 26px; }

  .stat-value { font-size: 26px; }

  .home-buttons { max-width: 100%; }
}

/* iPad 竖屏及以上（≥768px）：放大触控目标与字号，展开词库明细双列 */
@media (min-width: 768px) {
  body { font-size: 18px; }

  .page {
    max-width: 760px;
    margin: 0 auto;
    padding: 24px;
    padding-bottom: calc(24px + env(safe-area-inset-bottom));
  }

  /* 导航材质随页面内边距全出血 */
  .game-header {
    padding: 10px 24px 14px;
    margin: -24px -24px 16px;
  }

  .home-title { font-size: 64px; }
  .home-subtitle { font-size: 19px; margin-bottom: 56px; }
  .home-buttons { max-width: 420px; gap: 16px; }

  .btn-primary,
  .btn-secondary,
  .btn-danger {
    min-height: 54px;
    font-size: 19px;
  }

  .section-title { font-size: 22px; }

  .stat-value { font-size: 40px; }
  .stat-box { padding: 22px 16px; }

  .chart-container canvas { height: 320px; }

  .word-card { min-height: 64px; font-size: 18px; }
  .match-column { gap: 14px; }

  .question-card { padding: 28px 20px; }
  .question-word { font-size: 36px; }

  .option-btn { padding: 18px; font-size: 19px; }

  .import-box { padding: 32px 16px; }
  .import-icon { font-size: 34px; }
  .import-label { font-size: 17px; }

  /* 展开的单词明细双列排布，充分利用宽屏 */
  .library-entry-words {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 10px;
    padding: 0 12px 12px;
  }

  .start-card,
  .result-card {
    max-width: 420px;
    padding: 32px 24px;
  }

  .import-box-row {
    flex-direction: row;
  }

  .import-box {
    flex: 1;
  }

  .match-board {
    gap: 24px;
  }
}

/* iPad 横屏 / 大屏（≥1024px）：更宽内容列与更大间距 */
@media (min-width: 1024px) {
  .page {
    max-width: 880px;
    margin: 0 auto;
  }

  .chart-container canvas { height: 360px; }

  .match-board { gap: 32px; }

  .word-card { min-height: 68px; }

  .stats-grid { gap: 16px; }
}