/* ============================================================
   诗词小乐园 · 样式
   儿童友好：大按钮、大字号、卡片式、宣纸水墨配色（纯本地配色，无外部字体）
   响应式：手机 / 平板 / 电脑自适应，触屏点按区域 ≥ 44px
   ============================================================ */

:root {
  --ink: #3b3228;
  --ink-soft: #6d6053;
  --paper: #fdf6e4;
  --paper-2: #f7ecd6;
  --card: #fffdf6;
  --red: #c8452f;
  --red-dark: #a5341f;
  --gold: #d99a2b;
  --jade: #2f8f6b;
  --blue: #3a6ea5;
  --line: #e6d9bf;
  --shadow: 0 6px 18px rgba(90, 70, 40, .12);
  --radius: 20px;
  --font: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Heiti SC", "Source Han Sans SC", sans-serif;
  --font-kai: "Kaiti SC", "STKaiti", KaiTi, "KaiTi_GB2312", "PingFang SC", serif;
}

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

html, body { margin: 0; padding: 0; }

body {
  min-height: 100vh;
  font-family: var(--font);
  color: var(--ink);
  background:
    radial-gradient(circle at 12% 8%, rgba(217, 154, 43, .16), transparent 42%),
    radial-gradient(circle at 88% 6%, rgba(58, 110, 165, .14), transparent 40%),
    radial-gradient(circle at 70% 96%, rgba(47, 143, 107, .14), transparent 45%),
    var(--paper);
  line-height: 1.65;
  font-size: 18px;
}

#app { min-height: 100vh; }

/* ----------------------------------------------------------- 顶栏 */
.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 12px clamp(12px, 4vw, 28px);
  background: linear-gradient(180deg, var(--red) 0%, var(--red-dark) 100%);
  color: #fff7ea;
  box-shadow: 0 3px 12px rgba(120, 50, 30, .28);
}

.brand {
  flex: 1 1 auto;
  margin: 0;
  font-family: var(--font-kai);
  font-size: clamp(20px, 4.4vw, 28px);
  letter-spacing: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.topbar-right { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* --------------------------------------------------------- 按钮/徽标 */
.btn {
  appearance: none;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 48px;
  min-width: 48px;
  padding: 10px 18px;
  font: inherit;
  font-size: 18px;
  color: var(--ink);
  background: var(--card);
  border: 2px solid var(--line);
  border-radius: 14px;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
  text-align: center;
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.btn:active { transform: translateY(1px) scale(.99); }
.btn:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
.btn small { font-size: 13px; color: var(--ink-soft); font-weight: 400; }

.btn-primary {
  background: linear-gradient(180deg, #e05a3c, var(--red));
  border-color: var(--red-dark);
  color: #fff8ec;
  font-weight: 700;
}
.btn-primary small { color: #ffe9d8; }
.btn-ghost { background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .5); color: #fff7ea; }
.btn-back { order: -1; min-height: 44px; padding: 8px 14px; font-size: 17px; }
.topbar-right { order: 1; }
.brand { order: 0; }
.btn-lg { min-height: 60px; font-size: 21px; padding: 14px 26px; border-radius: 18px; }
.btn-small { min-height: 42px; font-size: 16px; padding: 8px 14px; }
.btn-block { width: 100%; }
.btn.locked { color: #a99c8b; background: #f1e8d7; border-style: dashed; cursor: not-allowed; }
.btn.locked:hover { transform: none; box-shadow: none; }

.btn-chip {
  min-height: 40px;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 15px;
  background: rgba(255, 255, 255, .18);
  border: 1.5px solid rgba(255, 255, 255, .55);
  color: #fff7ea;
  white-space: nowrap;
}
.star-chip, .badge-chip { font-weight: 700; }

/* ------------------------------------------------------------ 布局 */
.screen {
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
  padding: clamp(14px, 3.4vw, 28px) clamp(12px, 4vw, 28px) 48px;
  animation: fade .25s ease;
}
@keyframes fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.section-title {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 26px 0 12px;
  font-family: var(--font-kai);
  font-size: clamp(20px, 3.6vw, 26px);
  color: var(--red-dark);
  border-left: 8px solid var(--gold);
  padding-left: 12px;
}
.section-title small { font-size: 14px; color: var(--ink-soft); font-family: var(--font); }
.section-hint { color: var(--ink-soft); font-size: 15px; margin: 6px 0 0; }

.grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.grid-poem { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.grid-diff { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }

/* ------------------------------------------------------------- 卡片 */
.card {
  display: block;
  position: relative;
  width: 100%;
  padding: 18px 20px;
  font: inherit;
  color: inherit;
  text-align: left;
  background: var(--card);
  border: 2px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
button.card { cursor: pointer; transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease; }
button.card:hover { transform: translateY(-4px); border-color: var(--gold); box-shadow: 0 12px 26px rgba(90, 70, 40, .18); }
.card-h { margin: 0 0 10px; font-family: var(--font-kai); font-size: 20px; color: var(--red-dark); }
.card-sub { margin: 8px 0 10px; color: var(--ink-soft); font-size: 15px; }
.card-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 8px 0 0; font-size: 15px; color: var(--ink-soft); }
.card-actions { display: flex; gap: 10px; flex-wrap: wrap; margin: 12px 0 4px; }
.card-actions-center { justify-content: center; margin-top: 16px; }

.hero { background: linear-gradient(135deg, #fffdf4, var(--paper-2)); border-color: var(--gold); }
.hero h2 { margin: 0 0 6px; font-family: var(--font-kai); font-size: clamp(22px, 4.4vw, 30px); color: var(--red-dark); }
.hero p { margin: 4px 0; }
.hero-meta { color: var(--ink-soft); font-size: 15px; }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 16px; }

.banner { display: flex; gap: 16px; align-items: center; background: linear-gradient(135deg, var(--card), var(--paper-2)); }
.banner h2 { margin: 0 0 6px; font-family: var(--font-kai); color: var(--red-dark); }

.level-card { padding-top: 22px; }
.level-card .card-title { display: block; font-family: var(--font-kai); font-size: 24px; color: var(--ink); }
.level-badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; margin-bottom: 8px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #f0b74e, var(--gold));
  color: #5b3a06; font-weight: 800; font-size: 22px;
  box-shadow: inset 0 -3px 6px rgba(120, 70, 0, .25);
}
.level-card.locked { background: #f2eada; border-style: dashed; box-shadow: none; color: #9c907f; }
.level-card.locked .card-title { color: #9c907f; }
.lock { margin-left: 8px; font-size: 14px; color: #a08d6d; }

.poem-card { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.poem-card.done { border-color: var(--jade); }
.poem-title { font-family: var(--font-kai); font-size: 22px; color: var(--red-dark); }
.poem-author { font-size: 14px; color: var(--ink-soft); }
.poem-line { font-family: var(--font-kai); font-size: 17px; color: var(--ink); }
.poem-card.locked { background: #f2eada; border-style: dashed; box-shadow: none; color: #9c907f; text-align: center; align-items: center; }

.tag {
  align-self: flex-start;
  margin-top: 6px;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 13px;
  background: var(--paper-2);
  color: var(--ink-soft);
  border: 1px solid var(--line);
}
.tag-ok { background: rgba(47, 143, 107, .14); color: var(--jade); border-color: rgba(47, 143, 107, .4); }
.text-ok { color: var(--jade); }

/* 星星 */
.stars { letter-spacing: 2px; font-size: 16px; color: var(--ink-soft); }
.star { color: #ddceb0; }
.star.on { color: var(--gold); text-shadow: 0 1px 0 #fff3d2; }

/* 进度条 */
.meter { height: 12px; margin-top: 10px; border-radius: 999px; background: #ece0c7; overflow: hidden; }
.meter > span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--gold), var(--jade)); transition: width .4s ease; }

/* 提示条 */
.notice {
  margin: 0 0 16px;
  padding: 14px 18px;
  border-radius: var(--radius);
  background: rgba(217, 154, 43, .16);
  border: 2px dashed var(--gold);
  color: #7a5410;
  font-size: 16px;
}
.notice code { background: #fff; padding: 2px 6px; border-radius: 6px; font-size: 14px; }
code { background: rgba(255, 255, 255, .8); padding: 2px 6px; border-radius: 6px; font-size: .9em; }

.btn-diff.active { border-color: var(--jade); background: rgba(47, 143, 107, .12); box-shadow: inset 0 0 0 2px rgba(47, 143, 107, .35); }

/* --------------------------------------------------- 学习页（M4） */
.screen-poem { max-width: 800px; }
.poem-head { text-align: center; background: linear-gradient(160deg, #fffdf5, var(--paper-2)); border-color: var(--gold); }
.poem-kicker { margin: 0; font-size: 14px; color: var(--ink-soft); letter-spacing: 1px; }
.poem-h { margin: 6px 0 4px; font-family: var(--font-kai); font-size: clamp(30px, 7vw, 46px); letter-spacing: 4px; color: var(--red-dark); }
.poem-by { margin: 0; font-size: 19px; color: var(--ink-soft); }
.poem-by .dynasty {
  display: inline-block; padding: 2px 10px; margin-right: 4px;
  border-radius: 8px; background: rgba(58, 110, 165, .14); color: var(--blue); font-size: 16px;
}
.poem-head .card-meta { justify-content: center; }

.verses { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.verse { display: flex; align-items: center; gap: 14px; }
.verse-no {
  flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--paper-2); color: var(--red-dark); font-size: 14px; font-weight: 700;
}
.verse-text {
  font-family: var(--font-kai);
  font-size: clamp(26px, 5.4vw, 38px);
  letter-spacing: 3px;
  line-height: 1.5;
}
/* 竖排：从右向左一行行书写 */
.verses.vertical { flex-direction: row-reverse; overflow-x: auto; padding-bottom: 8px; align-items: flex-start; }
.verses.vertical .verse { flex-direction: column-reverse; }
.verses.vertical .verse-text {
  writing-mode: vertical-rl; letter-spacing: 6px; font-size: clamp(24px, 5vw, 32px);
  padding: 6px 10px; border-right: 3px solid var(--paper-2);
}
.verses.vertical .verse-no { margin-top: 8px; }

.note { font-size: 18px; line-height: 1.9; margin: 0; }
.chips { display: flex; gap: 10px; flex-wrap: wrap; }
.chip {
  padding: 8px 16px; border-radius: 12px; font-size: 20px; font-family: var(--font-kai);
  background: rgba(58, 110, 165, .1); color: var(--blue); border: 1.5px solid rgba(58, 110, 165, .3);
}
.play-card { text-align: center; }
.play-card .card-h { font-size: 22px; }
.play-card .btn-block { margin-top: 12px; }

/* ------------------------------------------------ 闯关页（M5） */
.screen-play { max-width: 780px; }

.play-progress { margin-bottom: 14px; }
.play-progress-meta {
  display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap;
  margin-top: 8px; font-size: 15px; color: var(--ink-soft);
}

.quiz-card { border-color: var(--gold); background: linear-gradient(165deg, #fffdf6, var(--paper-2)); }
.quiz-kind {
  display: inline-block; margin: 0 0 6px; padding: 3px 12px; border-radius: 999px;
  font-size: 14px; letter-spacing: 1px; background: rgba(58, 110, 165, .14); color: var(--blue);
}
.quiz-card .card-h { font-size: clamp(19px, 3.6vw, 24px); }
.quiz-tip { margin: 6px 0 0; font-size: 15px; color: var(--ink-soft); }
.quiz-note { margin: 10px 0 0; font-size: 17px; line-height: 1.8; color: var(--ink); }
.quiz-hint { margin: 10px 0 0; font-size: 15px; color: var(--ink-soft); }
.quiz-given {
  margin: 8px 0 4px; font-family: var(--font-kai);
  font-size: clamp(22px, 4.6vw, 30px); letter-spacing: 2px; color: var(--red-dark);
}

/* 填词题：逐字/空位 */
.quiz-line {
  display: flex; flex-wrap: wrap; gap: 6px; justify-content: center;
  margin: 14px 0 6px; font-family: var(--font-kai);
  font-size: clamp(28px, 6.4vw, 42px); letter-spacing: 2px; line-height: 1.4;
}
.quiz-line .char { padding: 2px 4px; }
.blank {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 1.2em; padding: 0 4px; border-radius: 10px;
  color: #b6a68c; background: rgba(217, 154, 43, .16);
  border: 2px dashed var(--gold); border-bottom-width: 4px;
}
.blank.filled { color: var(--red-dark); background: rgba(47, 143, 107, .14); border-style: solid; border-color: var(--jade); }

.fill-input {
  width: 100%; min-height: 52px; margin-top: 12px; padding: 8px 14px;
  font: inherit; font-family: var(--font-kai); font-size: 26px; text-align: center; letter-spacing: 4px;
  color: var(--ink); background: #fffdf6; border: 2px solid var(--line); border-radius: 14px;
}
.fill-input:focus { outline: 3px solid var(--blue); outline-offset: 2px; border-color: var(--blue); }

/* 选项区 */
.options { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); margin-top: 16px; }
.option-char { grid-template-columns: repeat(auto-fit, minmax(72px, 1fr)); }
.option {
  min-height: 58px; font-family: var(--font-kai); font-size: clamp(20px, 4.4vw, 26px);
  letter-spacing: 2px; border-color: var(--line); background: #fffdf6;
}
.option-line { font-size: clamp(18px, 4vw, 23px); }
.option-title { font-size: clamp(17px, 3.8vw, 21px); letter-spacing: 1px; }
.option.used, .option:disabled { color: #b3a693; background: #f2ead9; border-style: dashed; cursor: not-allowed; }
.option.used:hover, .option:disabled:hover { transform: none; box-shadow: none; border-color: var(--line); }
.keyboard .option { min-width: 62px; }

/* 排序题已选序列 */
.picked-row { display: flex; flex-direction: column; gap: 8px; margin: 12px 0 0; }
.picked-item {
  display: flex; align-items: center; gap: 10px; padding: 8px 14px; border-radius: 14px;
  font-family: var(--font-kai); font-size: clamp(18px, 4vw, 23px); letter-spacing: 2px;
  background: rgba(47, 143, 107, .12); border: 1.5px solid rgba(47, 143, 107, .4); color: var(--ink);
}
.picked-item b {
  flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--jade); color: #fff; font-size: 14px;
}

/* 即时反馈条：答对=绿，答错=暖黄（不刺眼），提醒=灰 */
.feedback {
  margin: 16px 0 2px; padding: 12px 16px; border-radius: 14px; font-size: 17px;
  border: 2px solid transparent; animation: fade .2s ease;
}
.feedback.ok { background: rgba(47, 143, 107, .14); border-color: rgba(47, 143, 107, .45); color: #1f6b4f; }
.feedback.soft, .feedback.no { background: rgba(217, 154, 43, .18); border-color: rgba(217, 154, 43, .5); color: #7a5410; }
.feedback.warn { background: rgba(59, 50, 40, .08); border-color: var(--line); color: var(--ink-soft); }

/* 结算页 */
.result-card { text-align: center; border-color: var(--gold); background: linear-gradient(160deg, #fffdf5, var(--paper-2)); }
.result-stars { margin: 6px 0 0; font-size: clamp(38px, 9vw, 60px); letter-spacing: 6px; }
.result-title { margin: 6px 0 10px; font-family: var(--font-kai); font-size: clamp(21px, 4.4vw, 28px); color: var(--red-dark); }
.result-card .card-actions { justify-content: center; }
.result-card .card-meta { justify-content: center; }
.result-card .notice { text-align: left; margin-top: 14px; }

/* 错题回顾 */
.misses { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.miss {
  display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border-radius: 14px;
  background: var(--paper-2); border-left: 6px solid var(--gold);
}
.miss-kind { font-size: 13px; color: var(--blue); letter-spacing: 1px; }
.miss-q { font-family: var(--font-kai); font-size: 19px; letter-spacing: 1px; }
.miss-a { font-size: 16px; color: var(--ink-soft); }
.miss-a b { color: var(--jade); }
.miss-wrong { font-size: 14px; color: var(--ink-soft); }
/* 「看答案」填进空位的那个字：标红加粗，孩子一眼看见刚才空位该填什么 */
.reveal-char { color: var(--danger); font-weight: 800; }

/* 图鉴 */
.book-group { margin-bottom: 8px; }

/* 底部 */
.foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 30px; }
.foot-note { font-size: 14px; color: var(--ink-soft); }

/* toast */
#toast {
  position: fixed; left: 50%; bottom: 28px; transform: translate(-50%, 20px);
  max-width: 90vw; padding: 14px 22px; border-radius: 999px;
  background: rgba(59, 50, 40, .94); color: #fff6e6; font-size: 17px;
  opacity: 0; pointer-events: none; transition: opacity .22s ease, transform .22s ease; z-index: 60;
  text-align: center;
}
#toast.show { opacity: 1; transform: translate(-50%, 0); }

/* 窄屏微调 */
@media (max-width: 560px) {
  body { font-size: 17px; }
  .topbar { padding: 10px 12px; }
  .topbar-right { width: 100%; justify-content: flex-end; }
  .grid, .grid-poem, .grid-diff { grid-template-columns: 1fr; }
  .card { padding: 16px; }
  .foot { flex-direction: column; align-items: stretch; text-align: center; }
}

/* 家长辅助：减少动画偏好 */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* 窄屏：闯关题面字号收一收，选项两列足够大 */
@media (max-width: 560px) {
  .quiz-line { gap: 4px; margin: 10px 0 4px; }
  .options { gap: 10px; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
  .option-char { grid-template-columns: repeat(4, 1fr); }
  .option { min-height: 54px; }
  .fill-input { font-size: 22px; letter-spacing: 2px; }
  .result-stars { letter-spacing: 4px; }
}

/* 第2版：成长系统 UI（金币/等级/荣誉墙/奖励条） */
.coin-chip { background: linear-gradient(135deg, #fff6d6, #ffe39a); color: #8a5a00; }
.lv-chip { background: linear-gradient(135deg, #e7f6ff, #cdeaff); color: #005e8a; }
.reward-line { margin: 2px 0 10px; font-weight: 700; color: #8a5a00;
  background: #fff6dc; border-radius: 999px; padding: 6px 14px; display: inline-block; }
.grid-badges { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.badge-card { display: flex; align-items: center; gap: 12px; flex-direction: row; }
.badge-card .badge-icon { font-size: 34px; line-height: 1; filter: grayscale(1); opacity: .55; }
.badge-card.earned .badge-icon { filter: none; opacity: 1; }
.badge-body { flex: 1; min-width: 0; }
.badge-name { margin: 0 0 2px; }
.badge-desc { margin: 0; font-size: 13px; color: var(--ink-soft); }
@media (max-width: 560px) {
  .grid-badges { grid-template-columns: 1fr; }
}

/* 心流节奏提示 */
.play-progress { position: relative; }
.flow { display:block; margin-top:6px; font-weight:700; font-size:14px; }
.flow-up { color:#c0392b; }

/* ========================================================
   移动端与触屏优化（诗词小乐园 · 儿童友好）
   ======================================================== */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
* { -webkit-tap-highlight-color: transparent; }
body { overscroll-behavior-y: contain; }
button, .btn, .card[data-action], .option { touch-action: manipulation; cursor: pointer; }

/* 顶栏图标按钮（荣誉/诗册）——手机上只留图标，简洁不挤 */
.icon-btn {
  appearance: none; display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; padding: 0; flex: 0 0 auto;
  font-size: 21px; line-height: 1; border-radius: 12px; cursor: pointer;
  background: rgba(255,255,255,.2); border: 1.5px solid rgba(255,255,255,.6); color: #fff7ea;
}
.icon-btn:active { transform: translateY(1px); }
.profile-chip { white-space: nowrap; background: linear-gradient(135deg,#fff6d6,#ffe39a); color:#7a5200; font-weight:700; }
.star-chip { font-weight:700; }

/* 触屏设备（手机/平板）把可点目标做更大，减少误触 */
@media (pointer: coarse) {
  .btn, .option, .level-card, .poem-card, .icon-btn, .fill-input { min-height: 56px; }
  .option { min-height: 62px; }
  .btn-small { min-height: 48px; }
  .card-actions .btn { min-height: 56px; }
}

/* 通用小屏：顶栏一行、右区可横滑，按钮不换行溢出 */
@media (max-width: 640px) {
  #app { min-height: 100vh; min-height: 100dvh; }
  .topbar { padding: 8px 10px; gap: 8px; flex-wrap: nowrap; }
  .brand { flex: 0 1 auto; min-width: 0; font-size: 19px; letter-spacing: 1px; }
  .topbar-right { flex: 1 1 auto; flex-wrap: nowrap; justify-content: flex-end; gap: 6px; overflow-x: auto; padding-bottom: 2px; }
  .topbar-right::-webkit-scrollbar { display: none; }
  .btn-chip { padding: 5px 9px; font-size: 13.5px; min-height: 36px; }
  .btn-back { min-height: 40px; padding: 0 10px; font-size: 18px; }
  .screen { padding-left: 12px; padding-right: 12px; }
}
@media (max-width: 400px) {
  .star-chip { display: none; }   /* 极小屏腾出空间，星星在诗卡里也能看到 */
  .icon-btn { width: 40px; height: 40px; }
}

/* 闯关结算按钮在小屏上排 2 列，避免按钮被挤小 */
@media (max-width: 560px) {
  .result-card .card-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .result-card .card-actions .btn { width: 100%; padding: 12px 8px; }
  .result-card .card-actions .btn-block { grid-column: 1 / -1; }
  .card-actions .btn-lg { width: 100%; }
}
/* 竖排诗句在小屏上保持可读 */
@media (max-width: 560px) {
  .verse-text { font-size: clamp(22px, 5.2vw, 34px); letter-spacing: 2px; }
  .poem-h { font-size: clamp(26px, 6.6vw, 40px); }
}

/* 底部安全区（iPhone 手势条） */
.screen { padding-bottom: calc(56px + env(safe-area-inset-bottom)); }
#toast { bottom: calc(24px + env(safe-area-inset-bottom)); }

/* ========================================================
   游戏化动效（effects.js · 多邻国式）
   ======================================================== */
/* 纸屑 */
.fx-confetti {
  position: fixed; z-index: 90; pointer-events: none; display: block;
  border-radius: 2px; will-change: transform, opacity;
  animation: fx-confetti 1.4s ease-out forwards;
}
@keyframes fx-confetti {
  0% { transform: translate(0,0) rotate(0); opacity: 1; }
  100% { transform: translate(var(--dx), var(--dy)) rotate(var(--rot)); opacity: 0; }
}

/* 金币 / 星星 上飘 */
.fx-float {
  position: fixed; z-index: 95; pointer-events: none; font-weight: 800;
  font-size: 30px; text-shadow: 0 2px 6px rgba(0,0,0,.25); white-space: nowrap;
  transform: translate(-50%,-50%); animation: fx-float 1.2s ease-out forwards;
}
.fx-float.coin { color: #e8a000; }
@keyframes fx-float {
  0% { transform: translate(-50%,-40%) scale(.6); opacity: 0; }
  18% { transform: translate(-50%,-120%) scale(1.15); opacity: 1; }
  70% { transform: translate(-50%,-200%) scale(1); opacity: 1; }
  100% { transform: translate(-50%,-320%) scale(.9); opacity: 0; }
}

/* 轻微抖动（答错柔和，不吓人） */
.fx-shake { animation: fx-shake .4s ease; }
@keyframes fx-shake {
  0%,100% { transform: translateX(0); }
  20% { transform: translateX(-6px); }
  40% { transform: translateX(5px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(3px); }
}

/* 弹性放大（卡片/按钮被认可） */
.fx-pop { animation: fx-pop .38s cubic-bezier(.2,1.4,.4,1); }
@keyframes fx-pop {
  0% { transform: scale(1); }
  40% { transform: scale(1.06); }
  100% { transform: scale(1); }
}

/* 全屏庆祝弹层 */
.fx-celebrate {
  position: fixed; inset: 0; z-index: 80; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle, rgba(120,70,20,.10), rgba(120,70,20,.34));
  opacity: 0; pointer-events: none; transition: opacity .22s ease;
}
.fx-celebrate.show { opacity: 1; pointer-events: auto; }
.fx-celebrate-inner {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  max-width: min(86vw, 400px); width: auto; padding: 30px 34px;
  text-align: center; cursor: pointer; border: none; font: inherit;
  color: #5b3a06; background: linear-gradient(160deg,#fffdf4,#fff3cf);
  border: 3px solid #f3c34f; border-radius: 24px;
  box-shadow: 0 18px 50px rgba(120,70,20,.35);
  animation: fx-celebrate-in .45s cubic-bezier(.2,1.3,.4,1);
}
.fx-big { font-size: 74px; line-height: 1; animation: fx-bounce 1s ease infinite; }
.fx-title { font-family: var(--font-kai); font-size: 30px; color: var(--red-dark); }
.fx-sub { font-size: 17px; color: #7a5a20; line-height: 1.5; }
.fx-btn {
  margin-top: 8px; padding: 10px 26px; border-radius: 999px; font-weight: 800;
  background: var(--red); color: #fff8ec;
}
@keyframes fx-celebrate-in { from { transform: scale(.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes fx-bounce { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

/* 动画偏好关闭：动效类仍保留但静态 */
@media (prefers-reduced-motion: reduce) {
  .fx-confetti, .fx-float, .fx-shake, .fx-pop { animation: none !important; opacity: 1 !important; }
  .fx-big, .fx-celebrate-inner { animation: none !important; }
}



/* ============================================================
   精简交互（小朋友快速上手）：一个页面只有一个大按钮，其余收进图标条
   ============================================================ */
/* 顶部「回家」按钮：小朋友走丢了永远能一键回首页 */
.btn-home { min-height: 40px; min-width: 40px; padding: 0 10px; font-size: 19px; }

/* 底部常驻操作条：主按钮 + 少量轻图标，永远钉在屏幕底部（含 iOS 安全区） */
.actionbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 25;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 10px clamp(12px, 4vw, 24px) calc(10px + env(safe-area-inset-bottom));
  background: rgba(253, 246, 228, .93);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-top: 2px solid var(--line);
  box-sizing: border-box;
}
.actionbar-inner {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
}
.actionbar-tools { display: flex; gap: 6px; flex: 0 0 auto; }
.btn-hero {
  flex: 1 1 auto;
  min-height: 58px;
  padding: 12px 18px;
  font-size: 20px;
  font-weight: 800;
  border-radius: 18px;
  box-shadow: 0 8px 20px rgba(160, 60, 35, .26);
}
.btn-hero-sub { flex: 0 1 auto; min-height: 58px; padding: 12px 14px; }
.btn-secondary { background: #fffdf6; border-color: var(--gold); color: var(--red-dark); font-weight: 700; }

/* 轻图标按钮（朗读 / 换排 / 下一首）：不抢主按钮的注意力 */
.tool-btn {
  appearance: none;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  min-width: 54px; min-height: 50px; padding: 4px 6px;
  font: inherit; font-size: 20px; line-height: 1;
  color: var(--ink); background: var(--card);
  border: 2px solid var(--line); border-radius: 14px; cursor: pointer;
}
.tool-btn small { font-size: 11px; color: var(--ink-soft); letter-spacing: 0; }
.tool-btn:active { transform: translateY(1px); }

/* 有底部操作条的页面：正文留出操作条高度（JS 会写入 --actionbar-h 精确值） */
.has-actionbar { padding-bottom: calc(var(--actionbar-h, 84px) + 16px); }

/* 标题旁的一句小提示（替代原来的整段说明文字） */
.card-h-tip { margin-left: 8px; font-size: 13px; font-family: var(--font); color: var(--ink-soft); font-weight: 400; }

/* 首页：一句话引导 + 三个可点的数据小胶囊 */
.hero-lead { margin: 2px 0 12px; font-size: 16px; }
.hero .btn-hero { width: 100%; }
.hero-stats { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.stat-chip {
  appearance: none; cursor: pointer; font: inherit;
  padding: 6px 14px; border-radius: 999px; font-size: 14.5px; font-weight: 700;
  background: #fff6dc; color: #8a5a00; border: 1.5px solid rgba(217, 154, 43, .5);
}
.stat-chip:active { transform: translateY(1px); }

/* 年级列表：一行一首诗，点整行进学习页 */
.poem-list { display: flex; flex-direction: column; gap: 10px; }
.poem-row {
  appearance: none; cursor: pointer; font: inherit; color: inherit; text-align: left;
  display: flex; align-items: center; gap: 12px; width: 100%;
  min-height: 64px; padding: 12px 14px;
  background: var(--card); border: 2px solid var(--line); border-radius: 16px;
  box-shadow: var(--shadow);
}
.poem-row:active { transform: translateY(1px); }
.poem-row.done { border-color: rgba(47, 143, 107, .55); }
.row-main { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.poem-row .poem-title { font-size: 20px; }
.poem-row .poem-author { font-size: 13.5px; }
.row-state { flex: 0 0 auto; font-size: 15px; font-weight: 700; letter-spacing: 2px; }
.row-state.todo { color: var(--red); font-size: 14px; letter-spacing: 0; }
.row-state.done { color: var(--gold); }

/* 顶栏右侧的退路图标（答题页：看诗 / 结束闯关） */
.icon-btn-danger { background: rgba(0, 0, 0, .18); border-color: rgba(255, 255, 255, .45); }

/* ============================================================
   沉浸式答题：一屏答完一题（按真实屏高自适应，任何机型不下滑）
   结构：顶栏(固定) → 进度(固定) → 题面+选项(弹性区) → 主按钮(固定)
   ============================================================ */
/* 答题时整页不滚动：只有题目卡片内部可滚（正常情况装得下就不会滚） */
body.is-quiz-lock { overflow: hidden; }
/* 变量未测量前的兜底高度（svh 支持则用 svh，否则退回 vh） */
.screen-play.is-quiz { height: 100vh; height: 100svh; }

.screen-play.is-quiz {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  /* --vh-full = visualViewport 实时可视高（ui.js 量出，含 iOS 地址栏收放）。
     答题页没有顶栏，整块视口都用来放题目，小屏也能一屏装下。 */
  height: var(--vh-full, 100svh);
  max-height: var(--vh-full, 100svh);
  overflow: hidden;
  padding: 6px clamp(10px, 3.2vw, 24px) calc(8px + env(safe-area-inset-bottom));
  animation: none;
}

/* 答题页顶部：只有一条 40px 的极简控制条（退出 / 进度 / 看诗），
   没有金币、等级、星星等报表 —— 答题时屏幕上只有题目相关内容。 */
.quiz-bar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: calc(4px + env(safe-area-inset-top)) 2px 2px;
}
.quiz-progress { flex: 1 1 auto; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.quiz-progress .meter { height: 8px; margin-top: 0; }
.quiz-count {
  text-align: center;
  font-weight: 800;
  font-size: 13px;
  line-height: 1.2;
  color: #6d6053;
  font-variant-numeric: tabular-nums;
}
.quiz-exit, .quiz-peek {
  appearance: none; cursor: pointer; font: inherit;
  min-height: 34px; min-width: 34px; padding: 0 10px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 10px;
  background: rgba(255, 255, 255, .7);
  border: 1.5px solid var(--line);
  color: #6d6053; font-size: 14px;
}
.quiz-exit:active, .quiz-peek:active { transform: translateY(1px); }

.is-quiz .play-progress { display: none; }   /* 答题页进度已并入 quiz-bar */
.is-quiz .meter { height: 9px; margin-top: 0; }
.is-quiz .play-progress-meta { margin-top: 4px; font-size: 13px; color: var(--ink-soft); }
.is-quiz .flow { margin-top: 2px; font-size: 13px; }
.is-quiz .warm-banner {
  margin: 0 0 6px; padding: 6px 10px; font-size: 13px; line-height: 1.4;
  border-width: 1.5px; border-radius: 12px;
}

/* 题面 + 选项 = 唯一弹性区。
   卡片内部是滚动容器：内容真的装不下时只滚题目，
   「下一题」按钮用 sticky 钉在卡片底部 → 任何机型都永远看得见、点得到。 */
.is-quiz .quiz-card {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 10px clamp(10px, 3vw, 20px);
  padding-bottom: 0;
  border-radius: 16px;
}
.is-quiz .quiz-kind { margin: 0 0 4px; padding: 2px 10px; font-size: 12.5px; }
.is-quiz .quiz-card .card-h { margin: 0 0 2px; font-size: clamp(16px, 4.4vw, 21px); line-height: 1.35; }

/* 「下一题」钉在卡片可视区底部：内容超出也能点，不需滑到最底 */
.quiz-next {
  position: sticky;
  bottom: 0;
  z-index: 3;
  margin-top: 10px;
  padding: 8px 0 10px;
  background: linear-gradient(180deg, rgba(247, 236, 214, 0), #f7ecd6 46%);
}
.btn-next {
  width: 100%;
  min-height: clamp(50px, 8vh, 62px);
  font-size: clamp(18px, min(5vw, 4.4vh), 23px);
  border-radius: 16px;
}
.actionbar-hint { flex: 1; margin: 0; padding: 6px 0; text-align: center; font-size: 14.5px; color: var(--ink-soft); }
.is-quiz .actionbar-hint { display: none; }

/* ---- 题面字号：随屏宽/屏高双向自适应（clamp + min(vw, vh)） ---- */
.is-quiz .quiz-line { font-size: clamp(21px, min(7vw, 5.6vh), 32px); gap: 4px; margin: 8px 0 2px; }
.is-quiz .quiz-given { font-size: clamp(17px, min(5.2vw, 4.4vh), 25px); margin: 4px 0 2px; }
.is-quiz .quiz-tip { margin: 4px 0 0; font-size: 13px; }
.is-quiz .quiz-hint { margin: 6px 0 0; font-size: 13.5px; }
.is-quiz .quiz-note { margin: 6px 0 0; font-size: 14.5px; line-height: 1.5; }
.is-quiz .feedback { margin: 10px 0 0; padding: 8px 12px; font-size: 15px; }

/* ---- 选项：自动沉到卡片底部，间距随屏高压缩 ---- */
.is-quiz .options {
  margin-top: 10px;
  padding-top: 0;
  gap: clamp(6px, 1.3vh, 11px);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 142px), 1fr));
}
.is-quiz .option {
  min-height: clamp(44px, 7.6vh, 60px);
  padding: 7px 9px;
  font-size: clamp(16px, min(4.4vw, 4vh), 23px);
  line-height: 1.3;
}
.is-quiz .option-line { font-size: clamp(15.5px, min(4.1vw, 3.7vh), 21px); }
.is-quiz .option-title { font-size: clamp(14.5px, min(3.8vw, 3.5vh), 19px); }
.is-quiz .option-char { grid-template-columns: repeat(4, 1fr); }
.is-quiz .option-lines { gap: clamp(5px, 1.1vh, 9px); }
.is-quiz .option-note {
  min-height: 0;
  padding: 7px 11px;
  font-size: clamp(13.5px, min(3.6vw, 3.2vh), 17px);
  line-height: 1.45;
}
.is-quiz .picked-row { gap: 5px; margin-top: 6px; }
.is-quiz .picked-item { padding: 5px 11px; font-size: clamp(14.5px, min(4vw, 3.6vh), 20px); }
.is-quiz .picked-item b { width: 22px; height: 22px; font-size: 12px; }
.is-quiz .verses { gap: 3px; margin-top: 4px; }
.is-quiz .verses .verse-text { font-size: clamp(16px, min(4.4vw, 4vh), 24px); letter-spacing: 1px; line-height: 1.3; }
/* 猜大意题：整首诗是"读料"不是"答案"，压成两列小字最省高度
   （8 句长诗也只占 4 行），把高度让给 4 条选项 */
.is-quiz .quiz-poem {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px 12px;
  margin: 4px 0 0;
  padding: 6px 10px;
  border-radius: 12px;
  background: rgba(255, 255, 255, .55);
  border: 1.5px dashed var(--line);
}
.is-quiz .quiz-poem .verse-text { font-size: clamp(14px, min(3.7vw, 3.3vh), 19px); letter-spacing: 0; line-height: 1.45; }
/* 字号必须 ≥16px：iOS Safari 对小字号输入框会在聚焦时自动放大整页，
   一放大答题页就不再「一屏」了 —— 宁可字大一点也不让页面被缩放。 */
.is-quiz .fill-input { min-height: 42px; margin-top: 6px; font-size: 19px; letter-spacing: 2px; }

/* ---- 内容量分档：题越重（整首诗/多选项）收得越紧 ---- */
.is-quiz.density-tight .quiz-card .card-h { font-size: 15.5px; }
.is-quiz.density-tight .quiz-line { font-size: clamp(19px, min(6vw, 4.8vh), 27px); }
.is-quiz.density-tight .option { min-height: clamp(40px, 6.4vh, 52px); font-size: clamp(15px, min(3.9vw, 3.4vh), 19px); }
.is-quiz.density-tight .verses .verse-text { font-size: clamp(14.5px, min(3.9vw, 3.3vh), 20px); line-height: 1.25; }
.is-quiz.density-tight .option-note { font-size: clamp(13px, min(3.3vw, 2.9vh), 16px); line-height: 1.4; padding: 6px 10px; }
.is-quiz.density-tight .quiz-note { font-size: 13.5px; line-height: 1.45; }
.is-quiz.density-mid .option { min-height: clamp(42px, 7vh, 56px); }
.is-quiz.density-loose .option { min-height: clamp(48px, 8.4vh, 66px); }

/* ---- 候选字/软键盘网格：这是答题页最容易「撑破一屏」的东西 ----
   困难档一次给 10+ 个候选字，四列就是 3–4 行；每格 60px 高的话
   光键盘就吃掉大半屏。所以每收紧一档，候选字格子也要跟着变矮，
   否则 fit 档位再小也救不了这一屏。 */
.is-quiz .option-char .option { min-height: clamp(44px, 7vh, 56px); font-size: clamp(19px, min(5vw, 4.4vh), 26px); }
.is-quiz.density-tight .option-char .option { min-height: clamp(40px, 6.2vh, 48px); font-size: clamp(17px, min(4.4vw, 3.9vh), 22px); }
.is-quiz.fit-1 .option-char .option { min-height: clamp(38px, 5.8vh, 46px); font-size: clamp(16px, min(4.2vw, 3.7vh), 21px); }
.is-quiz.fit-2 .option-char .option { min-height: clamp(36px, 5.2vh, 42px); padding: 3px 4px; font-size: clamp(15px, min(4vw, 3.4vh), 19px); }
.is-quiz.fit-3 .option-char .option { min-height: 36px; padding: 2px 4px; font-size: 15px; }
/* 候选字超过一行时优先多列而不是多行（每多一行就多 40px+） */
@media (max-width: 430px) {
  .is-quiz .option-char { grid-template-columns: repeat(5, 1fr); }
  .is-quiz.fit-2 .option-char, .is-quiz.fit-3 .option-char { grid-template-columns: repeat(6, 1fr); }
}

/* ============================================================
   真机兜底档位：.fit-N 由 ui.js 在实测「题卡还要内部滚动」时逐档加上。
   clamp 只能按屏幕尺寸猜字号，但每台机器的系统字号/字体行高都不一样，
   所以渲染后再实测一次，装不下就收一档（最多 3 档），
   保证「再怎么放大字号也不用下滑点下一题」。每档都留了可读下限。
   ============================================================ */
/* 第 1 档：收 ~12% */
.is-quiz.fit-1 .quiz-card .card-h { font-size: clamp(15px, 4vw, 19px); }
.is-quiz.fit-1 .quiz-line { font-size: clamp(19px, min(6.2vw, 5vh), 28px); }
.is-quiz.fit-1 .quiz-given { font-size: clamp(16px, min(4.7vw, 4vh), 22px); }
.is-quiz.fit-1 .option { min-height: clamp(42px, 6.8vh, 52px); padding: 6px 9px; font-size: clamp(15px, min(3.9vw, 3.4vh), 20px); }
.is-quiz.fit-1 .option-line { font-size: clamp(14.5px, min(3.9vw, 3.4vh), 19.5px); }
.is-quiz.fit-1 .option-title { font-size: clamp(14px, min(3.6vw, 3.2vh), 18px); }
.is-quiz.fit-1 .option-note { font-size: clamp(13px, min(3.4vw, 3vh), 16px); line-height: 1.4; }
.is-quiz.fit-1 .quiz-poem .verse-text { font-size: clamp(13px, min(3.5vw, 3.1vh), 18px); }
.is-quiz.fit-1 .verses .verse-text { font-size: clamp(15px, min(4.1vw, 3.6vh), 22px); }
.is-quiz.fit-1 .quiz-note { font-size: 14px; line-height: 1.45; }
.is-quiz.fit-1 .feedback { font-size: 14.5px; padding: 7px 12px; margin-top: 8px; }
.is-quiz.fit-1 .btn-next { min-height: clamp(48px, 7.4vh, 58px); font-size: clamp(17.5px, min(4.8vw, 4.2vh), 22px); }
.is-quiz.fit-1 .picked-item { font-size: clamp(14px, min(3.8vw, 3.4vh), 19px); padding: 5px 10px; }

/* 第 2 档：再收一点，次要信息（玩法标签/提示语）先让位 */
.is-quiz.fit-2 .quiz-kind { display: none; }
.is-quiz.fit-2 .quiz-card .card-h { font-size: clamp(14.5px, 3.8vw, 18px); line-height: 1.3; }
.is-quiz.fit-2 .quiz-line { font-size: clamp(18px, min(5.6vw, 4.5vh), 26px); margin: 6px 0 2px; }
.is-quiz.fit-2 .quiz-given { font-size: clamp(15px, min(4.4vw, 3.7vh), 20px); }
.is-quiz.fit-2 .option { min-height: clamp(40px, 6.4vh, 48px); padding: 5px 8px; font-size: clamp(14.5px, min(3.8vw, 3.3vh), 19px); }
.is-quiz.fit-2 .option-line { font-size: clamp(14px, min(3.6vw, 3.1vh), 18px); }
.is-quiz.fit-2 .option-title { font-size: clamp(13.5px, min(3.4vw, 2.9vh), 17px); }
.is-quiz.fit-2 .option-note { font-size: clamp(13px, min(3.2vw, 2.8vh), 15px); line-height: 1.35; padding: 6px 10px; }
.is-quiz.fit-2 .quiz-poem .verse-text { font-size: clamp(12.5px, min(3.2vw, 2.8vh), 16.5px); line-height: 1.35; }
.is-quiz.fit-2 .verses .verse-text { font-size: clamp(14px, min(3.7vw, 3.2vh), 20px); line-height: 1.25; }
.is-quiz.fit-2 .quiz-note, .is-quiz.fit-2 .quiz-tip, .is-quiz.fit-2 .quiz-hint { font-size: 13px; line-height: 1.4; }
.is-quiz.fit-2 .feedback { font-size: 13.5px; padding: 6px 11px; margin-top: 6px; }
.is-quiz.fit-2 .btn-next { min-height: clamp(46px, 7vh, 54px); font-size: clamp(17px, min(4.5vw, 3.9vh), 21px); }
.is-quiz.fit-2 .picked-item { font-size: clamp(13.5px, min(3.6vw, 3.1vh), 17.5px); padding: 4px 9px; }
.is-quiz.fit-2 .fill-input { min-height: 40px; font-size: 17px; }
.is-quiz.fit-2 .warm-banner { display: none; }

/* 第 3 档：极端情况（系统字号放到最大 / 极矮屏）——只保题面、选项、按钮 */
.is-quiz.fit-3 .quiz-card .card-h { font-size: 14px; line-height: 1.3; }
.is-quiz.fit-3 .quiz-line { font-size: clamp(17px, min(5.2vw, 4.2vh), 24px); margin: 5px 0 2px; }
.is-quiz.fit-3 .quiz-given { font-size: clamp(14.5px, min(4vw, 3.5vh), 19px); }
.is-quiz.fit-3 .option { min-height: 40px; padding: 4px 8px; font-size: 14.5px; line-height: 1.25; }
.is-quiz.fit-3 .option-line, .is-quiz.fit-3 .option-title { font-size: 14px; }
.is-quiz.fit-3 .option-note { font-size: 13px; line-height: 1.3; padding: 5px 9px; }
.is-quiz.fit-3 .quiz-poem .verse-text { font-size: 12.5px; line-height: 1.3; }
.is-quiz.fit-3 .verses .verse-text { font-size: 13.5px; line-height: 1.2; }
.is-quiz.fit-3 .quiz-note, .is-quiz.fit-3 .quiz-tip, .is-quiz.fit-3 .quiz-hint { font-size: 12.5px; line-height: 1.35; }
.is-quiz.fit-3 .feedback { font-size: 13px; padding: 5px 10px; margin-top: 5px; }
.is-quiz.fit-3 .btn-next { min-height: 44px; font-size: 16.5px; }
.is-quiz.fit-3 .picked-item { font-size: 13.5px; padding: 3px 8px; }
.is-quiz.fit-3 .fill-input { min-height: 38px; font-size: 16px; }
.is-quiz.fit-3 .flow { display: none; }

/* ---- 极矮屏（小手机 / 横屏 / 地址栏未收起）：只保题面+选项+按钮 ---- */
@media (max-height: 600px) {
  .is-quiz .play-progress-meta { display: none; }
  .is-quiz .quiz-kind { display: none; }
  .is-quiz .quiz-note { font-size: 13px; line-height: 1.4; }
  .is-quiz .option { min-height: 42px; padding-top: 5px; padding-bottom: 5px; }
  .is-quiz .btn-next { min-height: 46px; }
  .is-quiz .verses .verse-text { font-size: 15px; line-height: 1.22; }
  .is-quiz .quiz-poem { padding: 4px 8px; }
  .is-quiz .quiz-poem .verse-text { font-size: 13.5px; line-height: 1.25; }
  .is-quiz .option-note { font-size: 13px; line-height: 1.35; }
}
@media (max-height: 480px) {
  .is-quiz .flow, .is-quiz .warm-banner { display: none; }
  .is-quiz .quiz-card { padding-top: 6px; }
  .is-quiz .option { min-height: 38px; font-size: 14.5px; }
  .is-quiz .btn-next { min-height: 42px; font-size: 17px; }
}
/* ---- 横屏（可视高很矮）：改成「左题面 | 右选项」两栏，把屏幕宽度换成高度 ---- */
@media (orientation: landscape) and (max-height: 560px) {
  .is-quiz .quiz-card { padding-top: 4px; }
  .is-quiz .quiz-card .card-h { font-size: 15px; }
  /* 选项在宽屏上恢复多列：4 条大意两栏排，高度直接减半 */
  /* 选项一律两列：白话大意在横屏仍可能折行，故不按 260px 门槛退回单列 */
  .is-quiz .options,
  .is-quiz .options.option-note { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .is-quiz .quiz-poem {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0 10px;
    padding: 3px 8px;
  }
  .is-quiz .quiz-poem .verse-text { font-size: 13.5px; line-height: 1.25; }
  .is-quiz .option-note { font-size: 13px; line-height: 1.3; padding: 5px 9px; }
  .is-quiz .option { min-height: 38px; padding: 4px 8px; }
  .is-quiz .quiz-line { font-size: clamp(18px, 4.2vh, 26px); margin: 4px 0 2px; }
  .is-quiz .quiz-given { font-size: clamp(16px, 3.8vh, 22px); }
  .is-quiz .btn-next { min-height: 40px; font-size: 16px; }
  .is-quiz .quiz-next { padding: 4px 0 6px; }
  .is-quiz .feedback { margin-top: 6px; padding: 5px 10px; font-size: 13.5px; }
  .is-quiz .quiz-tip { font-size: 12.5px; }
}

/* ---- 高瘦旗舰机：适当放大，别缩成一条 ---- */
@media (min-height: 820px) {
  .is-quiz .option { min-height: 62px; }
  .is-quiz .btn-next { min-height: 62px; }
}

/* 玩法5/6（飞花令·读诗猜大意）选项态 */
.option-lines { grid-template-columns: 1fr; gap: 12px; }
.option-note { min-height: 66px; text-align: left; align-items: flex-start; justify-content: flex-start; padding: 12px 16px; font-size: 17px; line-height: 1.6; letter-spacing: 0; font-family: var(--font); }
.option.selected { border-color: var(--jade); background: rgba(47,143,107,.16); color: #14563f; }
.option.is-hit { border-color: var(--jade); background: rgba(47,143,107,.2); color: #14563f; font-weight: 800; }

/* ============================================================
   M2 关卡地图 · 诗碑收集（首页/册页共用）
   一册 = 一段横向卷轴；一首诗 = 一块诗碑。
   点亮(≥1⭐)=金色发光；当前=呼吸提示；后面=灰/??；未解锁册=🔒
   移动端优先：小屏横向可滑（scroll-snap），大屏自动整册平铺。
   ============================================================ */
.map-wrap {
  margin: 0 -4px;
  padding: 4px 4px 2px;
}
.map-head {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  margin: 0 0 8px;
  font-family: var(--font-kai); font-size: clamp(19px, 4.4vw, 24px); color: var(--red-dark);
}
.map-head small { font-family: var(--font); font-size: 13.5px; font-weight: 400; color: var(--ink-soft); }
.map-hint { margin: 0 0 10px; font-size: 14.5px; color: var(--ink-soft); }

/* 卷轴本体：横向可滑动 + 侧边「滚我」渐隐提示 */
.scroll-map {
  position: relative;
  display: flex;
  align-items: stretch;
  gap: 10px;
  margin: 0 -12px;
  padding: 10px 12px 14px;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
  scroll-behavior: smooth;
  border-radius: 18px;
  background:
    radial-gradient(ellipse 60% 70% at 12% 108%, rgba(59, 50, 40, .16), transparent 60%),
    radial-gradient(ellipse 48% 60% at 62% 104%, rgba(59, 50, 40, .11), transparent 60%),
    radial-gradient(ellipse 42% 55% at 96% 106%, rgba(59, 50, 40, .13), transparent 60%),
    linear-gradient(180deg, #fffcf1 0%, var(--paper-2) 100%);
  border: 2px solid var(--line);
  box-shadow: var(--shadow);
}
/* 诗碑之间的墨线小路 */
.scroll-map::before {
  content: '';
  position: absolute;
  left: 12px; right: 12px; bottom: 24px; height: 3px;
  border-radius: 3px;
  background: repeating-linear-gradient(90deg, rgba(59,50,40,.26) 0 14px, transparent 14px 26px);
  opacity: .55;
  pointer-events: none;
}
.scroll-map > * { position: relative; z-index: 1; }
/* 还能往右滚时，右缘出现渐隐提示（纯 CSS，无 JS） */
.scroll-map::after {
  content: '›';
  position: sticky;
  right: 8px;
  align-self: center;
  flex: 0 0 auto;
  width: 20px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  font-size: 24px; font-weight: 800; color: #8a765c;
  background: linear-gradient(90deg, rgba(255,252,241,0), rgba(255,252,241,.92) 55%);
  border-radius: 10px;
  pointer-events: none;
}

/* ---- 诗碑 ---- */
.stone {
  appearance: none; cursor: pointer; font: inherit; color: inherit; text-align: center;
  flex: 0 0 auto;
  scroll-snap-align: center;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  gap: 2px;
  width: clamp(96px, 27vw, 124px);
  min-height: 122px;
  margin: 0;
  padding: 8px 6px 7px;
  border: 2px solid var(--line);
  border-radius: 46% 46% 16px 16px / 30% 30% 10px 10px;
  background: linear-gradient(180deg, #f6efe0, #e7dcc5);
  box-shadow: inset 0 -4px 8px rgba(120, 95, 55, .16), 0 4px 10px rgba(90, 70, 40, .12);
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}
.stone:active { transform: translateY(2px) scale(.98); }
.stone:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
.stone-no {
  width: 26px; height: 26px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: rgba(255,255,255,.72); color: #8a765c;
  font-size: 13px; font-weight: 800;
}
.stone-face { font-size: 29px; line-height: 1.15; }
.stone-name {
  font-family: var(--font-kai); font-size: 15px; line-height: 1.25; color: #7a6a55;
  word-break: break-all;
}
.stone-state { margin-top: auto; font-size: 12.5px; font-weight: 700; color: #a08d6d; letter-spacing: 1px; }
.stone-stars { font-size: 12px; color: var(--gold); letter-spacing: 1px; }

/* 已点亮：金色 + 亮光 */
.stone.lit {
  border-color: var(--gold);
  background: linear-gradient(180deg, #fff8e2, #ffe6ac);
  box-shadow: inset 0 -4px 8px rgba(160, 110, 20, .18), 0 0 0 4px rgba(217,154,43,.2), 0 6px 16px rgba(160,110,20,.24);
}
.stone.lit .stone-face { text-shadow: 0 0 12px rgba(255, 208, 90, .95); }
.stone.lit .stone-name { color: var(--red-dark); }
.stone.lit .stone-no { background: rgba(255,255,255,.85); color: #a5760c; }
.stone.lit .stone-state { color: var(--jade); }
.stone.lit::after { content: ''; }

/* 当前应学：呼吸动画提示 */
.stone.current {
  border-color: var(--red);
  background: linear-gradient(180deg, #fffdf6, #ffe9d8);
  animation: stone-breath 1.5s ease-in-out infinite;
}
.stone.current .stone-face { text-shadow: 0 0 10px rgba(255, 190, 120, .8); }
.stone.current .stone-name { color: var(--red-dark); }
.stone.current .stone-state { color: var(--red); }
@keyframes stone-breath {
  0%, 100% { transform: translateY(0) scale(1); box-shadow: 0 0 0 0 rgba(200, 69, 47, .38); }
  50% { transform: translateY(-3px) scale(1.045); box-shadow: 0 0 0 10px rgba(200, 69, 47, 0); }
}

/* 更后面未点亮 / 整册未解锁：灰、?? */
.stone.dark { opacity: .82; }
/* 未解锁册里的诗碑：不响应点击（cursor 提示），但仍可看编号 */
.stone.locked { opacity: .62; cursor: default; box-shadow: none; border-style: dashed; }
.stone.locked:active { transform: none; }

/* ---- 册终点（集齐本册诗碑后点亮）---- */
.map-goal {
  appearance: none; cursor: pointer; font: inherit; text-align: center;
  flex: 0 0 auto;
  scroll-snap-align: center;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px;
  width: clamp(92px, 26vw, 118px);
  min-height: 122px;
  padding: 8px 6px;
  border-radius: 18px;
  border: 2px dashed var(--line);
  background: rgba(255, 253, 246, .72);
  color: #a08d6d;
}
.map-goal .goal-icon { font-size: 32px; line-height: 1; filter: grayscale(1); opacity: .6; }
.map-goal .goal-label { font-family: var(--font-kai); font-size: 14px; line-height: 1.3; }
.map-goal.done {
  border-style: solid; border-color: var(--jade);
  background: linear-gradient(180deg, #f0fbf4, #d8f1e3);
  color: #14563f;
  box-shadow: 0 0 0 4px rgba(47, 143, 107, .18), 0 6px 16px rgba(20, 86, 63, .18);
}
.map-goal.done .goal-icon { filter: none; opacity: 1; animation: fx-bounce 1.6s ease infinite; }
.map-goal.next { border-color: var(--gold); color: #8a5a00; background: linear-gradient(180deg, #fff8e2, #ffe9b8); }
.map-goal.next .goal-icon { filter: none; opacity: 1; }

/* ---- 册卡（首页每册一段）---- */
.map-book {
  padding: 12px 12px 10px;
  border: 2px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(135deg, var(--card), var(--paper-2));
  box-shadow: var(--shadow);
}
.map-book .scroll-map { margin: 0 -12px; padding-left: 12px; padding-right: 12px; }
.map-book.locked {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px; min-height: 128px; text-align: center;
  background: #f2eada; border-style: dashed; box-shadow: none; color: #9c907f;
  cursor: pointer; font: inherit; width: 100%;
}
.map-book.locked .lock-icon { font-size: 34px; line-height: 1; }
.map-book.locked .lock-name { font-family: var(--font-kai); font-size: 19px; }
.map-book.locked .lock-tip { font-size: 13.5px; }
.map-books { display: flex; flex-direction: column; gap: 14px; }

/* 册页（整册平铺）：诗碑稍小一点，小屏也能一屏看全 */
.scroll-map.flat { flex-wrap: wrap; overflow-x: visible; scroll-snap-type: none; }
.scroll-map.flat::after { display: none; }
.scroll-map.flat .stone { width: clamp(88px, 24vw, 116px); min-height: 128px; }
.scroll-map.flat .stone .poem-author { font-size: 11.5px; line-height: 1.2; color: #9c8b73; word-break: break-all; }

/* 大屏（平板/电脑）：诗碑稍大一点，横滑更顺（一册 10 块平铺会吃掉整屏高度） */
@media (min-width: 900px) {
  .scroll-map { gap: 14px; padding-bottom: 16px; }
  .scroll-map::before { bottom: 26px; }
  .stone, .map-goal { width: clamp(118px, 11vw, 140px); min-height: 138px; }
}

/* 减弱动态：只保状态，不呼吸/不平滑滚动 */
@media (prefers-reduced-motion: reduce) {
  .stone.current { animation: none !important; box-shadow: 0 0 0 4px rgba(200, 69, 47, .28); }
  .scroll-map { scroll-behavior: auto; }
  .map-goal.done .goal-icon { animation: none !important; }
}