/* May 的小屋 · 村庄页面组件 — 2026-09-15 重设计
   基底在 style.css（暖纸/贴纸影/圆体）。本文件只管页面级组件与三端网格。
   契约：zone-img 的 multiply 融合、@media print、CG 舞台样式均原样保留。 */

/* ---------- 门户首页 ---------- */
.portal-head { text-align: center; padding: 6px 0 2px; position: relative; }
/* 首屏氛围：岛图上缘一圈柔光，让横幅"浮"在纸上 */
.portal-head::before {
  content: ""; position: absolute; inset: -18px -30px auto; height: 190px;
  background: radial-gradient(60% 70% at 50% 30%, rgba(191, 227, 234, .5), transparent 70%);
  pointer-events: none;
}
.portal-art { width: 100%; max-width: 340px; height: auto; display: block; margin: 0 auto; }
.portal-art-img {
  position: relative;
  width: 100%; max-width: 300px; aspect-ratio: 1; object-fit: cover;
  border-radius: 30px; border: 4px solid #fff; box-shadow: var(--shadow-card-lg);
  display: block; margin: 0 auto;
}
/* 门户横幅素材接入位（小美满生图后落 static/ac/portal_hero.png，自动改横幅比例） */
.portal-art-img.hero-wide { max-width: 640px; aspect-ratio: 16 / 9; }
.module-thumb { width: 46px; height: 46px; border-radius: 14px; object-fit: cover; }
.portal-head h1 { margin: 14px 0 2px; font-family: var(--font-display);
  font-weight: 700; font-size: 28px; letter-spacing: 1px; }
.portal-head .sub { margin: 0; color: var(--ink-soft); font-size: 14px; }

.module-card {
  position: relative;
  display: flex; align-items: center; gap: 14px; text-decoration: none; color: var(--ink);
  background: var(--card); border: 1.5px solid var(--paper-deep);
  border-radius: var(--r-card);
  padding: 16px; margin-bottom: 12px; box-shadow: var(--shadow-card);
  transition: transform .15s ease, border-color .2s ease, box-shadow .2s ease;
}
a.module-card:hover { border-color: var(--leaf); transform: translateY(-2px);
  box-shadow: var(--shadow-card-lg); }
a.module-card:active { transform: scale(.985); }
.module-card.off { opacity: .6; background: var(--paper-mist); }
.module-icon { width: 58px; height: 58px; flex: none; border-radius: 18px;
  background: var(--paper-mist); border: 1.5px solid var(--paper-deep);
  display: grid; place-items: center; overflow: hidden; }
.module-card.off .module-icon { background: #EFE9DB; }
.module-icon svg { width: 44px; height: 44px; }
.module-body { flex: 1; min-width: 0; }
.module-body b { display: block; font-size: 17px; font-family: var(--font-display);
  font-weight: 700; }
.module-body small { color: var(--ink-soft); font-size: 13px; line-height: 1.45; display: block; }
.module-go { flex: none; font-size: 13px; font-weight: 700; color: #fff; background: var(--leaf);
  border-radius: 999px; padding: 7px 15px; box-shadow: 0 3px 0 var(--leaf-deep); }
.module-go.soon { color: var(--ink-soft); background: var(--paper-deep); box-shadow: none; }
.portal-foot { text-align: center; margin: 22px 0 0; font-size: 13px; }
/* 门户主模块（单词岛）首排放大 */
.module-card.lead { padding: 18px; }
.module-card.lead .module-icon { width: 72px; height: 72px; border-radius: 22px; }
.module-card.lead .module-thumb { width: 64px; height: 64px; border-radius: 18px; }
.module-card.lead .module-body b { font-size: 19px; }

/* ---------- 单词岛合成舞台（摧毁底图 + 区域地块叠放） ---------- */
.island-stage {
  position: relative; aspect-ratio: 1 / 1; overflow: hidden;
  background: linear-gradient(180deg, #B7BCC4 0%, #98A2AE 45%, #8B95A3 100%);
  border-radius: var(--r-stage); border: 1.5px solid var(--paper-deep);
  box-shadow: var(--shadow-card);
}
/* 晴天底图接入位：village.js 探测到 ac_island_sunny.png 且修复推进后换 src，
   天空转晴；素材未到位时保持摧毁灰底，行为与线上一致 */
.island-stage.sunny { background: linear-gradient(180deg, #CDEDF4 0%, #A9DEE8 55%, #8FCEDC 100%); }
.island-base { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
/* 区域地块白底用 multiply 融入岛面（白×底色=底色，等价透明）
   区域图可点（点谁谁高亮），选中态 scale/亮度/阴影 0.25s 过渡 */
.zone-img {
  position: absolute; mix-blend-mode: multiply; pointer-events: auto; cursor: pointer;
  transition: filter .25s ease, opacity .9s ease, transform .25s ease;
}
.zone-img.just-done { animation: bloom 1.4s ease; }
/* 修复中工地虚线圈：椭圆贴合地块地面 */
.zone-ring {
  position: absolute; border-radius: 50%; pointer-events: none;
  border: 2.5px dashed rgba(255, 253, 247, .85);
  box-shadow: 0 0 0 2px rgba(107, 85, 64, .12);
}
.zone-tag {
  position: absolute; transform: translateX(-50%); white-space: nowrap;
  font-size: 11px; font-weight: 700; color: var(--line);
  background: rgba(255, 253, 247, .92); border: 1.5px solid var(--paper-deep);
  border-radius: 999px; padding: 2px 9px;
}
.zone-tag .st { color: var(--ink-soft); font-weight: 600; }
/* 村民圆形肖像徽章 */
.zone-badge {
  position: absolute; width: 14%; aspect-ratio: 1 / 1; border-radius: 50%;
  object-fit: cover; border: 3px solid #fff; box-shadow: 0 3px 0 rgba(107, 85, 64, .2);
  transform: translate(-50%, -50%); pointer-events: none;
  animation: badgePop .8s cubic-bezier(.34, 1.5, .5, 1);
}
@keyframes badgePop { from { transform: translate(-50%, -50%) scale(0); } }
/* 亮灯事件光晕 */
.event-dot {
  position: absolute; width: 12%; aspect-ratio: 1 / 1; border-radius: 50%;
  transform: translate(-50%, -50%); pointer-events: none;
  background: radial-gradient(circle, #FFF6C9 0%, #F2C14E 42%, rgba(242, 193, 78, 0) 70%);
  animation: winGlow 3.2s ease-in-out infinite;
}
.celebrate .celebrate-island {
  width: min(78vw, 300px); border-radius: 18px; border: 3px solid #fff;
  box-shadow: var(--shadow-card); margin: 10px auto 4px; display: block;
}

/* ---------- 家庭留言板：软木公告板 + 便签 ---------- */
.notes-board {
  background:
    radial-gradient(circle at 18% 22%, rgba(255, 255, 255, .5) 0 2px, transparent 3px),
    radial-gradient(circle at 72% 64%, rgba(120, 84, 48, .10) 0 3px, transparent 4px),
    linear-gradient(160deg, #E8D3AC, #DCC49A);
  border: 1.5px solid #C9AC7E;
  border-radius: var(--r-card);
  padding: 16px 14px 14px;
  box-shadow: var(--shadow-card), inset 0 2px 10px rgba(120, 84, 48, .14);
}
.author-row { display: flex; gap: 8px; flex-wrap: wrap; }
.author-pill {
  font: inherit; font-size: 14px; font-weight: 700; color: var(--ink-soft); cursor: pointer;
  display: flex; align-items: center; gap: 6px;
  border: 2px solid var(--paper-deep); background: #fff; border-radius: 999px; padding: 6px 14px 6px 7px;
}
.author-pill.on { border-color: var(--leaf); background: var(--leaf-mist); color: var(--leaf-deep); }
.avatar {
  width: 26px; height: 26px; border-radius: 50%; flex: none;
  display: inline-grid; place-items: center;
  color: #fff; font-style: normal; font-size: 13px; font-weight: 700;
}
.av-dad { background: var(--sea); }
.av-mom { background: var(--berry); }
.av-may { background: #F2C14E; }
.notes-toolbar { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 12px; }
.filter-row-notes { display: flex; flex-wrap: wrap; gap: 6px; flex: 1; }
.fchip {
  font: inherit; font-size: 13px; font-weight: 700; cursor: pointer;
  border: 1.5px solid var(--paper-deep); background: var(--card); color: var(--ink-soft);
  border-radius: 999px; padding: 5px 12px;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.fchip.on { background: var(--leaf); border-color: var(--leaf-deep); color: #fff; }
.sort-btn {
  font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; flex: none;
  border: 1.5px solid var(--paper-deep); background: #fff; color: var(--ink);
  border-radius: 999px; padding: 5px 12px;
}
.note-list { display: grid; gap: 12px; }
/* 便签：微旋 + 图钉，完成件褪成灰章沉底 */
.note-card {
  position: relative;
  background: #FFFDF4; border: 1.5px solid #E8D9B8;
  border-radius: 6px; padding: 14px 14px 12px; animation: rise .3s ease;
  box-shadow: 0 6px 14px rgba(120, 84, 48, .16);
  transform: rotate(-.5deg);
  transition: transform .2s ease, box-shadow .2s ease;
}
.note-card:nth-child(even) { transform: rotate(.55deg); background: #FFFCF0; }
.note-card:hover { transform: rotate(0); box-shadow: 0 10px 20px rgba(120, 84, 48, .2); }
.note-card::before {  /* 图钉 */
  content: ""; position: absolute; top: -7px; left: 50%; width: 14px; height: 14px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #FF8F7E, #D9503F 70%);
  box-shadow: 0 2px 3px rgba(120, 84, 48, .4);
}
.note-card:nth-child(3n)::before { background: radial-gradient(circle at 35% 30%, #8FC179, #4E8C4A 70%); }
.note-card:nth-child(4n)::before { background: radial-gradient(circle at 35% 30%, #7FA8E4, #4A79C4 70%); }
.note-card.done { opacity: .58; background: #F4EFDF; transform: rotate(0); }
.note-card.done .note-content { text-decoration: line-through; color: var(--ink-soft); }
.note-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.date-cap { font-size: 12px; font-weight: 700; color: #fff; border-radius: 999px; padding: 3px 10px; }
.date-cap.today { background: var(--sun); }
.date-cap.week { background: var(--leaf); }
.date-cap.nextweek { background: var(--sea); }
.date-cap.overdue { background: var(--ash-deep); }
.date-cap.later { background: var(--paper-deep); color: var(--ink-soft); }
.date-cap.done { background: var(--ash); }
.note-author { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--ink-soft); }
.note-content { margin: 0 0 8px; font-size: 16px; overflow-wrap: break-word; }
.note-actions { display: flex; align-items: center; justify-content: space-between; }
.done-toggle { display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 700; color: var(--ink-soft); }
.done-toggle input { width: auto; }
.del-btn {
  font: inherit; font-size: 13px; font-weight: 700; cursor: pointer;
  border: none; border-radius: 10px; padding: 6px 10px;
  background: var(--sun-mist); color: var(--sun-deep);
}
.del-btn.armed { background: #A85C46; color: #fff; }

/* ---------- v6.4 跟帖回复 + 新留言提醒 ---------- */
.module-card { position: relative; }
.notes-badge {
  position: absolute; top: 10px; right: 12px; width: 13px; height: 13px;
  border-radius: 50%; background: #E05A4E; border: 2px solid #fff;
  box-shadow: 0 1px 3px rgba(107, 85, 64, .35);
}
.note-head-left { display: flex; align-items: center; gap: 6px; min-width: 0; }
.new-badge {
  font-size: 11px; font-weight: 800; color: #fff; background: var(--sun);
  border-radius: 999px; padding: 2px 8px; flex: none;
}
.note-card.is-new { border-color: var(--sun); background: #FFF8EC; }
.note-replies { margin: 4px 0 8px 14px; border-left: 3px solid var(--paper-deep); padding-left: 10px; display: grid; gap: 6px; }
.note-replies:empty { display: none; }
.reply-item { display: flex; align-items: flex-start; gap: 8px; font-size: 14px; }
.reply-item .reply-author { flex: none; }
.reply-item .avatar { width: 22px; height: 22px; font-size: 11px; }
.reply-content { flex: 1; overflow-wrap: break-word; }
.reply-time { flex: none; font-size: 11px; color: var(--ink-soft); margin-top: 2px; }
.reply-form { margin: 6px 0 10px; padding: 10px; background: #FFFEF9;
  border: 1.5px solid var(--paper-deep); border-radius: 14px; }
.reply-form .reply-input { font-size: 15px; padding: 9px 11px; border-radius: 12px; }
.reply-form-row { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.reply-form select.reply-author-select { width: auto; font-size: 14px; padding: 8px 10px; border-radius: 12px; }
.reply-form .btn { padding: 8px 15px; font-size: 14px; border-radius: 12px; }
.reply-form .feedback { margin-top: 8px; padding: 8px 11px; font-size: 13px; border-radius: 12px; }
.note-actions-right { display: flex; align-items: center; gap: 8px; }
.reply-toggle-btn {
  font: inherit; font-size: 13px; font-weight: 700; cursor: pointer;
  border: none; border-radius: 10px; padding: 6px 10px;
  background: var(--leaf-mist); color: var(--leaf-deep);
}

/* 动物立绘圆形头像当各页 mascot */
.mascot { object-position: 50% 30%; }
.mascot-capy { object-position: 50% 38%; }

.bld { transition: filter .9s ease; }
.bld .art-ruin, .bld .art-done, .bld .scaffold, .bld .bld-animal, .bld .bld-progress {
  transition: opacity .8s ease;
}
.bld .art-done, .bld .scaffold, .bld .bld-animal, .bld .bld-progress { opacity: 0; }
.bld.locked { filter: grayscale(1) brightness(1.02) contrast(.85); }
.bld.building { filter: grayscale(.55); }
.bld.building .scaffold { opacity: 1; }
.bld.building .bld-progress { opacity: 1; }
.bld.done .art-ruin { opacity: 0; }
.bld.done .art-done { opacity: 1; }
.bld.done { filter: none; }
.bld.just-done { animation: bloom 1.4s ease; }
.bld-label { font-size: 13px; font-weight: 700; fill: var(--line); paint-order: stroke;
  stroke: rgba(255, 255, 255, .85); stroke-width: 3px; }

/* 风车叶片：修好后慢慢转 */
.blades { transform-box: fill-box; transform-origin: center; }
.bld.done .blades { animation: spin 14s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* 窗户暖光 */
.win-light { animation: winGlow 3.2s ease-in-out infinite; }
@keyframes winGlow { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }

.bld-progress-track { fill: rgba(255, 255, 255, .75); stroke: var(--paper-deep); }
.bld-progress-fill { fill: var(--sun); }

/* ---------- 今日状态 chips ---------- */
.today-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.chip { font-size: 12px; font-weight: 700; color: var(--ink-soft); background: var(--paper-mist);
  border: 1.5px solid var(--paper-deep); border-radius: 999px; padding: 4px 12px; opacity: .55; }
.chip.on { color: var(--leaf-deep); background: var(--leaf-mist); border-color: var(--leaf); opacity: 1; }

.cta-row { display: flex; gap: 12px; margin: 0 0 14px; }
.cta-row .btn { flex: 1; text-align: center; text-decoration: none; }

.btn.small { padding: 8px 14px; font-size: 14px; border-radius: 12px; text-decoration: none; }

/* ---------- 剧情页 ---------- */
body.story-body { padding-bottom: 24px; }
.story-skip {
  position: fixed; top: calc(12px + env(safe-area-inset-top)); right: 14px; z-index: 20;
  font: inherit; font-size: 14px; font-weight: 700; color: var(--ink-soft);
  background: rgba(255, 253, 247, .92); border: 1.5px solid var(--paper-deep);
  border-radius: 999px; padding: 7px 16px; cursor: pointer;
}
.story-wrap { max-width: 480px; margin: 0 auto; padding: 52px 20px 0; text-align: center; }
.story-slide svg, .story-slide img { width: 100%; height: auto; border-radius: var(--r-card);
  border: 3px solid #fff; box-shadow: var(--shadow-card-lg); background: #fff; }
.story-slide img { aspect-ratio: 16 / 10; object-fit: cover; object-position: 50% 42%; }
.story-slide[hidden] { display: none; }
.story-slide { animation: rise .45s ease; }
.story-text { font-size: 18px; line-height: 1.9; margin: 22px 0; }
.story-next { min-width: 180px; }

/* ---------- 组今日词库 ---------- */
.word-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.word-chip { font-size: 14px; background: var(--paper-mist); border: 1.5px solid var(--paper-deep);
  border-radius: 999px; padding: 5px 12px; }
.word-chip .kind-dot { font-size: 11px; font-weight: 700; margin-right: 4px; }
.word-chip.new .kind-dot { color: var(--leaf-deep); }
.word-chip.review .kind-dot { color: #6E9FB4; }
.word-chip.retry .kind-dot { color: var(--sun-deep); }
/* v8 重设计：今日词表默认折叠（details），摘要行常驻，展开看全表 */
.words-fold { margin-top: 10px; border-top: 1.5px dashed var(--paper-deep); padding-top: 8px; }
.words-fold summary {
  cursor: pointer; font-size: 14px; font-weight: 700; color: var(--leaf-deep);
  padding: 4px 2px; list-style: none; display: flex; align-items: center; gap: 6px;
}
.words-fold summary::-webkit-details-marker { display: none; }
.words-fold summary::before {
  content: ""; width: 9px; height: 9px; flex: none;
  border-right: 2.5px solid var(--leaf-deep); border-bottom: 2.5px solid var(--leaf-deep);
  transform: rotate(-45deg); transition: transform .2s ease;
}
.words-fold[open] summary::before { transform: rotate(45deg); }
.words-fold .word-chips { max-height: 300px; overflow-y: auto; padding: 4px 2px; }

/* ---------- 默写单（A4 + 打印） ---------- */
body.sheet-body { padding-bottom: 24px; }
.sheet-toolbar {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  max-width: 210mm; margin: 0 auto 14px; padding: 12px 16px;
  background: rgba(255, 249, 238, .94); backdrop-filter: blur(6px);
  border-bottom: 1.5px solid var(--paper-deep);
}
.sheet-toolbar-bottom { position: static; justify-content: center; margin-top: 4px;
  border-bottom: none; background: none; backdrop-filter: none; }
.sheet-toolbar .btn { text-decoration: none; }
.sheet-tip { flex: 1; min-width: 120px; font-size: 13px; }

.sheet-area { padding: 0 10px; }
.sheet-page {
  background: #fff; color: #1f1f1f;
  width: min(210mm, 100%); min-height: 200mm;
  margin: 0 auto 18px; padding: 14mm 12mm;
  border-radius: 10px; box-shadow: var(--shadow-card); border: 1.5px solid var(--paper-deep);
}
.sheet-head h1 { font-size: 22px; text-align: center; margin: 0 0 8px; letter-spacing: 2px; }
.sheet-meta { text-align: center; font-size: 14px; margin: 0 0 6px; color: #333; }
.sheet-blank { display: inline-block; border-bottom: 1.5px solid #333; min-width: 72px; }
.sheet-rows { list-style: none; margin: 14px 0 0; padding: 0; }
.sheet-row { display: flex; align-items: flex-end; gap: 10px; padding: 11px 0; }
.sheet-row .row-cn { font-size: 16px; white-space: nowrap; }
.sheet-row .row-line { flex: 1; border-bottom: 1.5px solid #444; height: 1.2em; }
/* 手机屏上长题干 nowrap 会把页面横向撑出滚动条（v6.5 修复，保留） */
@media (max-width: 767px) {
  .sheet-row .row-cn { white-space: normal; }
}
.answer-rows .sheet-row { padding: 7px 0; }
.answer-rows .row-en { font-weight: 700; font-size: 16px; }
.answer-rows .row-extra { font-size: 12px; color: #666; display: block; }

/* v5：按日期复习单——紧凑排版 */
.review-rows .sheet-row { padding: 5px 0; align-items: flex-start; }
.review-rows .row-cn { white-space: normal; font-size: 15px; }
.review-rows .row-en { font-weight: 700; }
.review-rows .row-extra { font-size: 12px; color: #666; display: block; }

@media print {
  @page { size: A4 portrait; margin: 10mm; }
  body.sheet-body { background: #fff; padding: 0; }
  .no-print, .tabbar { display: none !important; }
  .sheet-area { padding: 0; }
  .sheet-page {
    width: auto; min-height: 0; margin: 0; padding: 0;
    border: none; border-radius: 0; box-shadow: none;
    page-break-after: always;
  }
  .sheet-page:last-child { page-break-after: auto; }
  .sheet-row { padding: 13px 0; }
}

/* ---------- 批改页 ---------- */
.grade-list { display: grid; gap: 10px; }
.grade-row {
  display: flex; align-items: center; gap: 10px;
  background: var(--paper-mist); border: 1.5px solid var(--paper-deep);
  border-radius: 16px; padding: 12px 14px;
  transition: background .2s ease, border-color .2s ease;
}
.grade-row.right { background: var(--leaf-mist); border-color: var(--leaf); }
.grade-row.wronged { background: var(--bad-mist); border-color: var(--bad); }
.grade-word { flex: 1; min-width: 0; }
.grade-word b { display: block; font-size: 16px; }
.grade-word span { font-size: 13px; color: var(--ink-soft); }
.grade-btns { display: flex; gap: 8px; flex: none; }
.gbtn {
  font: inherit; font-size: 15px; font-weight: 700; cursor: pointer;
  border-radius: 12px; padding: 11px 18px; border: 2px solid var(--paper-deep);
  background: #fff; color: var(--ink-soft);
  transition: transform .12s ease, background .2s ease, border-color .2s ease;
}
.gbtn:active { transform: scale(.96); }
.gbtn.ok.on { background: var(--leaf); border-color: var(--leaf-deep); color: #fff; }
.gbtn.no.on { background: var(--bad); border-color: var(--bad-deep); color: #fff; }

.score-stars { display: flex; justify-content: center; gap: 6px; margin: 6px 0 4px; }
.score-stars svg { width: 36px; height: 36px; }
.score-title { text-align: center; font-family: var(--font-display);
  font-weight: 700; font-size: 23px; margin: 4px 0; }
#scoreDetail { text-align: center; margin: 0; }

/* ---------- 家长页：功能区 + 词库表 ---------- */
.filter-row { display: flex; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.filter-row input { flex: 2; min-width: 160px; }
.filter-row select { flex: 1; min-width: 120px; }
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-scroll table { min-width: 860px; }
#wordsTable td { vertical-align: top; }
#wordsTable .cell-en { font-weight: 700; white-space: nowrap; }
#wordsTable .cell-example { max-width: 220px; font-size: 13px; color: var(--ink-soft); }
#wordsTable input { padding: 7px 9px; font-size: 14px; border-radius: 10px; min-width: 70px; }
.row-actions { display: flex; gap: 6px; }
.row-actions button {
  font: inherit; font-size: 13px; font-weight: 700; cursor: pointer;
  border: none; border-radius: 10px; padding: 7px 11px;
}
.row-actions .edit { background: #DCEBD3; color: var(--leaf-deep); }
.row-actions .del { background: var(--sun-mist); color: var(--sun-deep); }
.row-actions .save { background: var(--leaf); color: #fff; }
.row-actions .cancel { background: var(--paper-deep); color: var(--ink-soft); }
.status-tag { font-size: 12px; font-weight: 700; border-radius: 999px; padding: 3px 9px; white-space: nowrap; }
.status-tag.new { background: var(--paper-deep); color: var(--ink-soft); }
.status-tag.learning { background: #DCEBD3; color: var(--leaf-deep); }
.status-tag.mastered { background: var(--sun-mist); color: var(--sun-deep); }

/* ---------- 昨晚风暴温和提示（顶部通知条） ---------- */
.storm-card { background: #F3EFE2; border-color: #DCD5C2; padding: 12px 16px;
  border-left: 5px solid var(--ash-deep); }
.storm-text { margin: 0; font-size: 14px; color: var(--ink-soft); line-height: 1.6; }

/* ---------- 首页修复进度 ---------- */
.zone-group-title { font-size: 15px; font-family: var(--font-display);
  font-weight: 700; margin: 16px 0 8px; }
#doneBlock { margin-top: 4px; }
.grade-cta { display: block; margin-top: 12px; text-align: center; text-decoration: none;
  animation: rise .3s ease; }

/* ---------- 连续 3 天全对的小烟花 ---------- */
.fw {
  position: absolute; width: 7px; height: 7px; border-radius: 50%;
  pointer-events: none; z-index: 5; opacity: 0;
  animation: fwBurst 1.5s ease-out forwards;
}
@keyframes fwBurst {
  0% { transform: translate(0, 0) scale(.4); opacity: 0; }
  12% { opacity: 1; }
  70% { transform: translate(var(--fx), var(--fy)) scale(1); opacity: .9; }
  100% { transform: translate(calc(var(--fx) * 1.15), calc(var(--fy) * 1.15 + 14px)) scale(.3); opacity: 0; }
}

/* ---------- 家长页功能区：2×2 图标大砖 ---------- */
.func-bar { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 4px 0 12px; }
.func-btn {
  font: inherit; font-size: 13.5px; font-weight: 700; color: var(--ink); text-align: center;
  text-decoration: none; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  background: var(--paper-mist); border: 1.5px solid var(--paper-deep); border-radius: 18px;
  padding: 14px 6px; box-shadow: 0 3px 0 rgba(107, 85, 64, .10);
  transition: transform .12s ease, border-color .2s ease, background .2s ease;
}
.func-btn .card-ico { width: 40px; height: 40px; border-radius: 14px; }
.func-btn span { line-height: 1.25; }
.func-btn:hover { border-color: var(--leaf); }
.func-btn:active { transform: scale(.96); }
.func-btn.on { background: var(--leaf-mist); border-color: var(--leaf); }
.words-toggle { width: 100%; }
/* 学习页「学习统计」入口：卡头小链接（v8 从整行大按钮降级） */
.stats-entry {
  font-size: 13.5px; font-weight: 700; color: var(--leaf-deep); text-decoration: none;
  display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;
}
.stats-entry svg { width: 17px; height: 17px; }
.stats-entry:hover { text-decoration: underline; }
@media (max-width: 560px) {
  .func-bar { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- 批改结果错词清单 ---------- */
.word-chip.wrong-word { background: var(--bad-mist); border-color: var(--bad); }

/* ---------- 重生视频接入位 ---------- */
.rebirth-video {
  width: min(78vw, 320px); border-radius: 18px; border: 3px solid #fff;
  box-shadow: var(--shadow-card); margin: 10px auto 4px; display: block; background: #000;
}

@media (prefers-reduced-motion: reduce) {
  .bld.done .blades, .win-light { animation: none; }
}

/* ---------- 修复页自由选区 ---------- */
.zone-tag { cursor: pointer; z-index: 7; }
.zone-inject {
  font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; flex: none;
  border: none; border-radius: 10px; padding: 8px 13px;
  background: var(--sun); color: #fff; box-shadow: 0 3px 0 var(--sun-deep);
  transition: transform .12s ease, box-shadow .12s ease;
}
.zone-inject:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 1px 0 var(--sun-deep); }
.zone-inject:disabled { background: var(--paper-deep); color: var(--ink-soft);
  box-shadow: none; cursor: default; }

/* ---------- 返回门户按钮 ---------- */
.home-back {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  font-size: 15px; font-weight: 700; color: var(--ink); text-decoration: none; cursor: pointer;
  background: #fff; border: 1.5px solid var(--paper-deep); border-radius: 14px;
  padding: 10px 14px; min-height: 44px; box-shadow: 0 3px 0 var(--paper-deep);
  transition: transform .12s ease;
}
.home-back:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--paper-deep); }
.home-back.story-home {
  position: fixed; top: calc(12px + env(safe-area-inset-top)); left: 14px; z-index: 20;
}

/* ---------- 首页区域详情卡 ---------- */
.zone-detail {
  position: fixed; left: 50%; bottom: calc(88px + env(safe-area-inset-bottom)); z-index: 45;
  width: calc(100% - 32px); max-width: 528px;
  background: var(--card); border: 1.5px solid var(--paper-deep); border-radius: 18px;
  padding: 14px 16px; box-shadow: var(--shadow-card-lg);
  transform: translateX(-50%) translateY(140%); pointer-events: none;
  transition: transform .25s ease;
}
.zone-detail.show { transform: translateX(-50%) translateY(0); pointer-events: auto; }
.zone-detail-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.zone-detail-head b { font-size: 17px; font-family: var(--font-display);
  font-weight: 700; }
.zone-detail-state { font-size: 13px; font-weight: 700; }
#zdNum { font-weight: 700; min-width: 56px; text-align: right; font-variant-numeric: tabular-nums; }
#zdGo { display: block; margin-top: 12px; text-align: center; text-decoration: none; }

/* ---------- 逐份注入的飞行小圆点 ---------- */
.inject-dot {
  position: fixed; z-index: 60; width: 13px; height: 13px; border-radius: 50%;
  background: var(--sun); border: 2px solid #fff; pointer-events: none;
  animation: injectFly .6s cubic-bezier(.4, 0, .7, 1) forwards;
}
@keyframes injectFly {
  0% { transform: translate(0, 0) scale(1); opacity: 1; }
  100% { transform: translate(var(--dx), var(--dy)) scale(.35); opacity: .2; }
}
.zone-item.injected .mini-bar { animation: barBump .5s ease; }
@keyframes barBump { 40% { transform: scale(1.12); } }
.zone-item.zone-target { border-color: var(--sun); box-shadow: 0 0 0 3px rgba(242, 153, 74, .35); }

/* ---------- 留言正文里的链接 ---------- */
.note-link { color: #2F6FED; text-decoration: underline; word-break: break-all; }

/* ==========================================================================
   学习首页 / 批改 / 统计页组件
   ========================================================================== */

/* ---------- 学习首页 ---------- */
.sheet-banner {
  margin-top: 10px; padding: 10px 14px; border-radius: 14px;
  font-size: 14px; line-height: 1.6;
}
.sheet-banner.draft { background: var(--paper-mist); border: 1.5px dashed var(--ash); color: var(--ink-soft); }
.sheet-banner.locked { background: var(--sun-mist); border: 1.5px solid var(--sun); color: var(--ink); }
.sheet-banner.graded { background: var(--leaf-mist); border: 1.5px solid var(--leaf); color: var(--leaf-deep); }
.online-status {
  font-size: 14px; font-weight: 700; color: var(--leaf-deep);
  background: var(--leaf-mist); border-radius: 12px; padding: 8px 12px; margin: 10px 0;
}
.mat-line {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  padding: 8px 0; border-bottom: 1px solid var(--paper-deep); font-size: 15px;
}
.mat-line:last-of-type { border-bottom: none; }
.mat-name { color: var(--ink-soft); font-weight: 600; }
.mat-val { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* 首页/学习页顶部紧凑库存 chip 行（v8 新增容器） */
.inv-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.inv-chip {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 13px; font-weight: 700; color: var(--ink);
  background: var(--paper-mist); border: 1.5px solid var(--paper-deep);
  border-radius: 999px; padding: 6px 13px;
}
.inv-chip i {
  width: 9px; height: 9px; border-radius: 50%; flex: none;
  background: linear-gradient(135deg, var(--leaf), var(--sun));
}
.inv-chip.seed i { background: linear-gradient(135deg, #9CCB86, var(--leaf-deep)); }
.inv-chip.food i { background: linear-gradient(135deg, #F7B267, var(--sun-deep)); }
.inv-chip b { font-variant-numeric: tabular-nums; }

/* ---------- 批改页 ---------- */
.grade-rules {
  background: var(--paper-mist); border: 1.5px solid var(--paper-deep);
  border-radius: 14px; padding: 10px 14px; margin-bottom: 12px;
}
.grade-rules p { margin: 2px 0; font-size: 14px; }
.grade-toggle {
  flex: none; font: inherit; font-size: 14px; font-weight: 700; cursor: pointer;
  border-radius: 12px; padding: 11px 16px; border: 2px solid var(--paper-deep);
  background: #fff; color: var(--ink-soft);
  transition: transform .12s ease, background .2s ease, border-color .2s ease;
}
.grade-toggle:active { transform: scale(.96); }
.grade-toggle.on { background: var(--bad); border-color: var(--bad-deep); color: #fff; }
.grade-count { text-align: center; margin: 10px 0; }
.locked-note { font-size: 15px; line-height: 1.7; }
.word-chip.right-word { background: var(--leaf-mist); border-color: var(--leaf); }
.word-result-list { display: grid; gap: 8px; }
.word-result-row {
  display: flex; justify-content: space-between; align-items: center; gap: 8px 14px; flex-wrap: wrap;
  background: var(--paper-mist); border: 1.5px solid var(--paper-deep);
  border-radius: 12px; padding: 8px 12px; font-size: 14px;
}
.word-result-row.wrong { background: var(--bad-mist); border-color: var(--bad); }
.wr-meta { color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.wr-tag.mastered { color: var(--sun-deep); font-weight: 700; }

/* ---------- 统计页：记忆盒条形 ---------- */
.box-bars { display: grid; gap: 9px; margin-top: 12px; }
.box-bar-row { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.box-bar-name { flex: none; width: 122px; color: var(--ink-soft); font-weight: 600; }
.box-bar-track {
  flex: 1; height: 16px; border-radius: 999px;
  background: var(--paper-deep); overflow: hidden;
  box-shadow: inset 0 1px 2px rgba(107, 85, 42, .12);
}
.box-bar-track i {
  display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--leaf), var(--sun));
  transition: width .5s ease;
}
.box-bar-row.mastered .box-bar-track i { background: var(--leaf-deep); }
.box-bar-num { flex: none; min-width: 30px; text-align: right; font-variant-numeric: tabular-nums; }
.stat-grid-pc { grid-template-columns: repeat(5, 1fr); gap: 8px; }
.stat-grid-pc .stat b { font-size: 20px; }
.materials-today { margin-top: 12px; }

/* ---------- 三端响应式：平板（≥768px） ---------- */
@media (min-width: 768px) {
  .grade-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .note-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .stat-grid-pc { grid-template-columns: repeat(2, 1fr); }
  .box-bar-name { width: 100px; font-size: 13px; }
}

/* ==========================================================================
   v8 阶段3（2026-09-19）：新组件基底 + 桌面「主内容列 + sticky 侧栏」重写。
   手机端（<1024px）铁律：以下基底规则在手机上零视觉变化——
   tab-extra 隐藏、列容器为普通块级流、build 页用 order+display:contents
   还原原视觉顺序（材料池→地图→区域进度）、details summary 与原 h3 同貌。
   ========================================================================== */

/* ---------- 桌面顶栏附加入口（学习报告/词库/留言板）：手机隐藏 ----------
   选择器必须压过 style.css 的 .tabbar a{display:flex}（特异性 0,1,1） */
.tabbar a.tab-extra { display: none; }

/* ---------- 主列/侧栏包裹容器：手机上普通块级流，视觉顺序不变 ---------- */
.home-main, .home-side, .learn-main, .learn-duo,
.parent-main, .parent-side { display: block; }

/* build 页 DOM 为「地图在前」（桌面主列需要），手机端 flex+order+contents
   还原基线视觉顺序：材料池 → 地图 → 区域进度，布局零变化 */
.wrap-build { display: flex; flex-direction: column; }
.build-side { display: contents; }
.build-main { order: 2; }
#buildMaterialsCard { order: 1; }
#zoneListCard { order: 3; }

/* 卡片入场动画 parity：包进列容器后与原 .wrap > .card 的 stagger 等效 */
.home-main > .card, .home-side > .card,
.build-main > .card, .build-side > .card,
.parent-main > .card, .parent-side > .card { animation: rise .38s ease both; }
.home-main > .card, .build-main > .card { animation-delay: .06s; }
.home-side > .card, .build-side > .card, .parent-side > .card { animation-delay: .1s; }
.parent-main > .card { animation-delay: .14s; }

/* ---------- 首页「已修复」折叠（details）：手机上 summary 与原 h3 同貌 ---------- */
#doneFold > summary { list-style: none; display: flex; align-items: center; gap: 6px; }
#doneFold > summary::-webkit-details-marker { display: none; }
#doneFold > summary::before { content: none; }  /* 手机无箭头，与 9/15 基线一致 */

/* ---------- learn 页侧栏「学习报告入口」：仅桌面显示 ---------- */
.learn-report-link { display: none; }

/* ---------- 家长页学习报告卡：tab 双视图（近 7 天｜累计薄弱） ---------- */
.report-tabs { display: flex; gap: 8px; margin: 0 0 14px; }
.rtab {
  font: inherit; font-size: 14px; font-weight: 700; cursor: pointer;
  border: 1.5px solid var(--paper-deep); background: #fff; color: var(--ink-soft);
  border-radius: 999px; padding: 7px 18px;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.rtab.on { background: var(--leaf); border-color: var(--leaf-deep); color: #fff; }
.rtab:focus-visible { outline: 3px solid rgba(78, 140, 74, .55); outline-offset: 2px; }
.pane-note { margin: 0 0 12px; }
.pane-sub { margin-top: 16px; border-top: 1.5px dashed var(--paper-deep); padding-top: 10px; }
.pane-sub-title { font-size: 15px; font-family: var(--font-display);
  font-weight: 700; margin: 0 0 8px; }

/* v9.2：原 v8.1 家长页「高频错词专项练习单」区块样式已随区块移除，
   打印按钮区样式见下方 .cheer-print（孩子端加油词卡）。 */

/* ---------- 累计薄弱词表（家长报告卡 / stats 满宽卡同源，weak-words.js 渲染） ---------- */
.weak-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.weak-table { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 640px; }
.weak-table th, .weak-table td { text-align: left; padding: 9px 6px;
  border-bottom: 1px solid var(--paper-deep); }
.weak-table th { color: var(--ink-soft); font-size: 12px; font-weight: 700; }
.weak-table tbody tr:last-child td { border-bottom: none; }
.weak-table .wk-rank { color: var(--ink-soft); font-variant-numeric: tabular-nums; width: 34px; }
.weak-table .wk-en { font-weight: 700; }
.weak-table .wk-num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.weak-acc { display: inline-block; width: 64px; height: 10px; border-radius: 999px;
  background: var(--paper-deep); overflow: hidden; vertical-align: middle;
  box-shadow: inset 0 1px 2px rgba(107, 85, 42, .12); }
.weak-acc i { display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--leaf), var(--sun)); }
.weak-acc-num { font-size: 12.5px; font-weight: 700; color: var(--ink-soft); margin-left: 7px;
  font-variant-numeric: tabular-nums; }
.box-badge { display: inline-block; font-size: 12px; font-weight: 700; color: var(--leaf-deep);
  background: var(--leaf-mist); border: 1.5px solid var(--leaf); border-radius: 999px;
  padding: 2px 9px; white-space: nowrap; }
.box-badge.b0 { color: var(--ink-soft); background: var(--paper-mist); border-color: var(--paper-deep); }
.weak-more-btn {
  font: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer; margin-top: 10px;
  border: 1.5px solid var(--paper-deep); background: #fff; color: var(--leaf-deep);
  border-radius: 999px; padding: 7px 16px;
  transition: border-color .2s ease;
}
.weak-more-btn:hover { border-color: var(--leaf); }
.weak-link { font-size: 13px; font-weight: 700; white-space: nowrap; }

/* ---------- 孩子侧「我的加油词」卡（纯正向话术，无次数数字、无进度条） ----------
   横向紧凑行：大字单词+释义 | 鼓励话术 | 练一练。
   每屏 3 词（NN/g 儿童信息过载阈值）；大字保留，行式排版让侧栏与主列配平。 */
.cheer-sub { margin: -4px 0 0; }
.cheer-word {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: var(--paper-mist); border: 1.5px solid var(--paper-deep);
  border-radius: 16px; padding: 10px 14px; margin-top: 10px;
}
.cheer-txt { flex: 1; min-width: 0; }
.cheer-word b { display: block; font-family: var(--font-display); font-weight: 700;
  font-size: 22px; letter-spacing: .5px; line-height: 1.2; overflow-wrap: break-word; }
.cheer-word .cn { display: block; font-size: 13px; color: var(--ink-soft); margin-top: 1px; }
.cheer-act { flex: none; display: flex; flex-direction: column; align-items: flex-end;
  gap: 6px; max-width: 46%; }
.cheer-word .msg { margin: 0; font-size: 12.5px; font-weight: 700;
  color: var(--leaf-deep); text-align: right; }
.cheer-word .btn { padding: 9px 16px; font-size: 15px; }
.cheer-empty { margin: 10px 0 0; text-align: center; font-size: 15px; }
.cheer-more { margin: 10px 0 0; text-align: center; }

/* v9.2：加油词卡·打印按钮区（原家长页「专项练习单」区块收口到这里；
   沿用 pane-sub 虚线分隔语言 + btn small 规格，375px 下按钮行自动换行，
   触控目标不缩小） */
.cheer-print { margin-top: 14px; border-top: 1.5px dashed var(--paper-deep); padding-top: 10px; }
.cheer-print-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.cheer-print .btn:disabled { opacity: .45; cursor: default; }

/* ---------- 三端响应式：桌面（≥1024px）— v8 阶段3 重写 ----------
   三刀（方案 §4.0）：① 取消手工 grid-row 排格，改「主内容列 + 侧栏」自然流；
   ② 侧栏 sticky 随滚动常驻；③ 放错列的功能块移回主列（learn 主操作卡）配平。
   导航：底部悬浮 dock → 顶部 sticky 导航条（<1024 的 dock 样式原样不动）。 */
@media (min-width: 1024px) {
  /* 顶部导航条（沿用 dock 的纸感令牌：暖纸底/绿底白字当前页/圆角胶囊） */
  .tabbar {
    position: sticky; top: 0; left: auto; right: auto; bottom: auto;
    transform: none; width: auto; max-width: none;
    justify-content: center; gap: 6px;
    padding: 9px 20px;
    border: none; border-bottom: 1.5px solid var(--paper-deep); border-radius: 0;
    background: rgba(255, 253, 248, .92); backdrop-filter: blur(8px);
    box-shadow: 0 6px 18px rgba(107, 85, 42, .08);
  }
  .tabbar a {
    flex: 0 0 auto; max-width: none; flex-direction: row; gap: 7px;
    font-size: 15px; padding: 9px 15px; border-radius: 14px;
  }
  .tabbar a svg { width: 19px; height: 19px; }
  .tabbar a.tab-extra { display: flex; }

  /* dock 让位回收：底部不再留大 padding；区域详情卡贴底 */
  body { padding-bottom: 32px; }
  .zone-detail { bottom: 28px; }

  /* 双列骨架：主内容列 + 380px sticky 侧栏（自然流，无手工行号） */
  .wrap-home, .wrap-build, .wrap-parent, .learn-grid {
    display: grid; grid-template-columns: minmax(0, 1fr) 380px;
    column-gap: 20px; align-items: start;
  }
  .wrap-home > .topbar, .wrap-home > .storm-card,
  .wrap-parent > .topbar, .wrap-parent > .parent-foot { grid-column: 1 / -1; }
  .home-main, .learn-main { grid-column: 1; min-width: 0; }
  .home-side, .learn-side {
    grid-column: 2; min-width: 0;
    position: sticky; top: 76px; align-self: start;
  }
  /* build / parent 的 DOM 顺序以手机视觉顺序优先（侧栏内容在前），
     桌面只钉一个行号、不用 span——右列是一个整体自然流，无断裂空沟 */
  .build-main { grid-column: 1; grid-row: 2; min-width: 0; }
  .build-side {
    display: block; grid-column: 2; grid-row: 2; min-width: 0;
    position: sticky; top: 76px; align-self: start;
  }
  .parent-main { grid-column: 1; grid-row: 2; min-width: 0; }
  .parent-side {
    grid-column: 2; grid-row: 2; min-width: 0;
    position: sticky; top: 76px; align-self: start;
  }

  /* learn：纸质默写 / 在线背双卡并排回主列（9/15 设计稿的主操作归位） */
  .learn-duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 14px; }
  .learn-report-link { display: block; text-align: center; margin: 2px 0 0; }

  /* 在线答题视图保持居中窄栏（答题专注） */
  #quizView { max-width: 660px; margin: 0 auto; }

  /* 批改页：居中宽栏 */
  .wrap-grade > .topbar { max-width: 860px; margin-left: auto; margin-right: auto; width: 100%; }
  .wrap-grade > .card, .wrap-grade #gradeView > .card, .wrap-grade #resultView .card {
    max-width: 860px; margin-left: auto; margin-right: auto;
  }

  /* 统计页：模块化网格 auto flow；口径条/累计薄弱卡满宽。
     首行配平：记忆盒卡跨两行，正好补足「今天默写+答对分布」左列高度，
     不出现矮卡下方的空白沟（两列内容高度互补，非硬撑） */
  .wrap-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 20px; align-items: start; }
  .wrap-stats > p, .wrap-stats > .span2 { grid-column: 1 / -1; }
  /* 行号显式：口径条置顶（原顺序），记忆盒卡跨两行与左列两卡高度互补 */
  .wrap-stats > .topbar { grid-column: 1 / -1; grid-row: 1; }
  .wrap-stats > .stats-scope { grid-column: 1 / -1; grid-row: 2; }
  .wrap-stats > .st-today { grid-column: 1; grid-row: 3; }
  .wrap-stats > .st-boxes { grid-column: 2; grid-row: 3 / span 2; }
  .wrap-stats > .st-dist { grid-column: 1; grid-row: 4; }

  /* 首页「已修复」折叠箭头只在桌面出现（手机与基线一致） */
  #doneFold > summary::before {
    content: ""; width: 9px; height: 9px; flex: none;
    border-right: 2.5px solid var(--leaf-deep); border-bottom: 2.5px solid var(--leaf-deep);
    transform: rotate(-45deg); transition: transform .2s ease;
  }
  #doneFold[open] > summary::before { transform: rotate(45deg); }
}

/* 窄桌面（1024-1279）：侧栏收窄到 340px，主列地图/表格不被挤瘪 */
@media (min-width: 1024px) and (max-width: 1279px) {
  .wrap-home, .wrap-build, .wrap-parent, .learn-grid {
    grid-template-columns: minmax(0, 1fr) 340px;
  }
}

/* ---------- 首页三条库存进度条（卡内形态保留） ---------- */
#materialsCard .energy-row + .energy-row { margin-top: 9px; }
.inv-label { font-size: 14px; font-weight: 700; white-space: nowrap; }
.inv-num { font-weight: 700; min-width: 62px; text-align: right;
  font-variant-numeric: tabular-nums; white-space: nowrap; }
.energy-fill.fill-seed { background: linear-gradient(90deg, #9CCB86, var(--leaf-deep)); }
.energy-fill.fill-food { background: linear-gradient(90deg, #F7B267, var(--sun-deep)); }

/* 早读开场确认卡 */
.zaodu-ask {
  position: fixed; inset: 0; z-index: 58; display: none;
  align-items: center; justify-content: center; padding: 20px;
  background: rgba(107, 85, 64, .38);
}
.zaodu-ask.on { display: flex; }
.zaodu-ask-box {
  background: var(--card); border: 1.5px solid var(--paper-deep); border-radius: var(--r-card);
  box-shadow: var(--shadow-card-lg); padding: 22px 20px; width: 100%; max-width: 320px; text-align: center;
  animation: rise .28s ease both;
}
.zaodu-ask-title { margin: 0 0 16px; font-size: 18px; font-weight: 700; }
.zaodu-ask-btns { display: flex; gap: 10px; justify-content: center; }
.zaodu-ask-btns .btn { min-width: 92px; }

/* ---------- 早读 CG 全屏动画舞台（老大定的形式，原样保留） ----------
   没有播放器外壳：无 controls / 无进度条 / 无边框卡片 / 无跳过按钮。 */
.cg-stage {
  position: fixed; inset: 0; z-index: 60; display: none;
  background: radial-gradient(circle at 50% 42%, #2E2418 0%, #1C160E 70%, #14100A 100%);
  align-items: center; justify-content: center;
  animation: cgFadeIn .45s ease both;
}
.cg-stage.show { display: flex; }
body.cg-open { overflow: hidden; }
.cg-inner {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
}
.cg-scene {
  display: none; flex-direction: column; align-items: center; justify-content: center;
  width: 100%; height: 100%; padding: 24px; box-sizing: border-box; text-align: center;
}
.cg-scene.cg-in { animation: cgSceneIn .5s cubic-bezier(.16, 1, .3, 1) both; }
.cg-video {
  width: 100%; height: 100%; object-fit: cover; display: block;
  border: 0; border-radius: 0; background: transparent;
  animation: cgVideoIn .6s ease both;
}
.cg-video::-webkit-media-controls { display: none !important; }
.cg-line {
  margin: 22px 0 0; max-width: 20ch;
  font-size: clamp(19px, 5.2vw, 26px); font-weight: 700; line-height: 1.6;
  color: #FFF7E6; text-shadow: 0 2px 18px rgba(0, 0, 0, .55);
  animation: cgLineIn .8s ease both;
}
.cg-hint {
  margin: 18px 0 0; font-size: 13px; color: rgba(255, 247, 230, .62);
  animation: cgLineIn 1.2s ease both;
}
@keyframes cgFadeIn { from { opacity: 0; } }
@keyframes cgSceneIn { from { opacity: 0; transform: scale(.985); } }
@keyframes cgVideoIn { from { opacity: 0; transform: scale(1.04); } }
@keyframes cgLineIn { from { opacity: 0; transform: translateY(10px); } }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.sr-only:focus {
  position: static; width: auto; height: auto; margin: 0; clip: auto;
  overflow: visible; padding: 8px 14px; border-radius: 10px; background: #fff; color: var(--ink);
}
@media (prefers-reduced-motion: reduce) {
  .cg-stage, .cg-scene.cg-in, .cg-video, .cg-line, .cg-hint { animation: none; }
}

/* ---------- 词库分页条 ---------- */
.pager { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 2px 0 10px; }
#pagerBottom { margin: 10px 0 2px; }
.pager-btn {
  font: inherit; font-size: 14px; font-weight: 700; cursor: pointer;
  border: 1.5px solid var(--paper-deep); background: #fff; color: var(--ink);
  border-radius: 12px; padding: 7px 14px; transition: transform .12s ease, border-color .2s ease;
}
.pager-btn:hover:not(:disabled) { border-color: var(--leaf); }
.pager-btn:active:not(:disabled) { transform: scale(.97); }
.pager-btn:disabled { opacity: .4; cursor: default; }
.pager-info { font-size: 14px; font-weight: 700; color: var(--ink-soft);
  font-variant-numeric: tabular-nums; }
.pager-size { font: inherit; font-size: 14px; padding: 7px 10px;
  border: 1.5px solid var(--paper-deep); border-radius: 12px; background: #fff;
  color: var(--ink); margin-left: auto; }

/* 词库表格分页后的列比例 */
.table-scroll table { min-width: 0; width: 100%; table-layout: fixed; }
#wordsTable th, #wordsTable td { overflow-wrap: break-word; word-break: break-word; }
#wordsTable .cell-en { white-space: normal; font-weight: 700; }
#wordsTable .cell-example { max-width: none; }
@media (max-width: 767px) {
  .table-scroll table { min-width: 720px; }
}
.row-actions { flex-wrap: wrap; }

/* ---------- 早读打卡视觉（晨光绘本风，原样保留） ---------- */
.zaodu-story {
  font-size: 16px; line-height: 1.8; color: var(--ink);
  text-align: center; margin: 8px 0; min-height: 3em;
}
.glow-rays {
  position: relative; height: min(58vw, 260px); width: min(58vw, 260px); margin: 0 auto;
}
.glow-rays i {
  position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,246,201,.95) 0%,
              rgba(242,193,78,.55) 42%, rgba(242,193,78,0) 70%);
  animation: glowBloom 2.1s ease-in-out forwards;
}
.glow-rays i:nth-child(2) { animation-delay: .35s; transform: scale(.6); }
@keyframes glowBloom {
  0%   { opacity: 0; transform: scale(.35); }
  35%  { opacity: 1; }
  100% { opacity: 0; transform: scale(1.45); }
}
.gift-float { position: relative; width: min(52vw, 190px); margin: 6px auto 2px; }
.gift-halo {
  position: absolute; inset: -14%; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,246,201,.9) 0%,
              rgba(242,193,78,.35) 55%, rgba(242,193,78,0) 75%);
  animation: haloBreath 2.4s ease-in-out infinite;
}
@keyframes haloBreath {
  0%, 100% { opacity: .55; transform: scale(.96); }
  50%      { opacity: 1;  transform: scale(1.06); }
}
.gift-icon, .gift-icon-emoji {
  position: relative; display: block; width: 100%; aspect-ratio: 1; object-fit: contain;
  animation: giftFloat 2.6s ease-in-out infinite;
  filter: drop-shadow(0 10px 18px rgba(224,123,57,.35));
}
.gift-icon-emoji {
  font-size: min(24vw, 96px); line-height: 1;
  display: grid; place-items: center;
}
@keyframes giftFloat {
  0%, 100% { transform: translateY(4px); }
  50%      { transform: translateY(-8px); }
}
.gift-name {
  text-align: center; font-size: clamp(19px, 5vw, 24px); font-weight: 800;
  color: #FFD98A; margin: 22px 0 2px; letter-spacing: 2px;
  text-shadow: 0 2px 16px rgba(0, 0, 0, .5);
}
.gift-float { width: min(56vw, 220px); }
#zaoduGiftStage, #zaoduMsg { cursor: pointer; }
@media (prefers-reduced-motion: reduce) {
  .gift-icon, .gift-icon-emoji, .gift-halo, .glow-rays i { animation: none; }
}

/* ==========================================================================
   区域修复完成 CG（village.js playZoneVideo 动态创建，原样保留）
   ========================================================================== */
.cg-video-overlay {
  position: fixed; inset: 0; z-index: 100;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(ellipse at 50% 35%, #3A4A6B 0%, #202B44 60%, #141C2E 100%);
  transition: opacity .55s ease;
}
.cg-video-overlay.cg-fade-out { opacity: 0; }
.cg-video-overlay .zone-cg-video {
  width: 100%; height: 100%; display: block;
  object-fit: cover; object-position: center;
  background: #000;
}
.cg-video-overlay .zone-cg-video::-webkit-media-controls,
.cg-video-overlay .zone-cg-video::-webkit-media-controls-panel,
.cg-video-overlay .zone-cg-video::-webkit-media-controls-start-playback-button,
.cg-video-overlay .zone-cg-video::-webkit-media-controls-play-button {
  display: none !important; opacity: 0 !important;
}
.cg-video-overlay .zone-cg-video::-moz-media-controls { display: none !important; }
@media (max-width: 600px) {
  .cg-video-overlay .zone-cg-video { object-fit: cover; object-position: center; }
}

/* ==========================================================================
   v9（2026-09-28）神秘商人：岛内小船 + 兑换页 + 愿望区
   v9.3：形象 = AI 生成 PNG（老大选定的柴犬船长星夜小船，static/img/
   merchant.png，透明底），原 inline SVG 小法师退役（暖光呼吸/星芒闪烁
   动画随 SVG 一并退役；小船浮动 merchantBob 保留）。
   色板沿用全站令牌（--sun 金橙 / --sea 靛蓝 / --berry 莓粉 / 暖纸底）。
   ========================================================================== */

/* ---------- 岛内商人小船（stage 内绝对定位，压在地块上层） ---------- */
.merchant-boat {
  position: absolute; width: 24%; min-width: 64px; z-index: 7;
  transform: translate(-50%, -50%);
  display: block; text-decoration: none;
  animation: merchantBob 3.4s ease-in-out infinite;
}
/* v9.3：PNG 与原 SVG 同宽等高比（width:100% + height:auto），位置/浮动不变 */
.merchant-boat img { width: 100%; height: auto; display: block;
  filter: drop-shadow(0 4px 8px rgba(32, 43, 68, .28)); }
.merchant-boat:active { transform: translate(-50%, -50%) scale(.96); }
.merchant-boat:focus-visible { outline: 3px solid var(--sun); outline-offset: 3px;
  border-radius: 14px; }
@keyframes merchantBob {
  0%, 100% { transform: translate(-50%, -50%); }
  50% { transform: translate(-50%, calc(-50% - 3px)); }
}
/* 名签：沿用 zone-tag 视觉 */
.merchant-tag {
  position: absolute; left: 50%; top: 96%; transform: translateX(-50%);
  white-space: nowrap; font-size: 11px; font-weight: 700; color: var(--line);
  background: rgba(255, 253, 247, .94); border: 1.5px solid var(--paper-deep);
  border-radius: 999px; padding: 2px 9px;
}
/* 台词气泡：锚在船左上方（船靠右侧海面，气泡朝左不越界被 stage 裁掉） */
.merchant-bubble {
  /* 船头右上方是岛图真空地（不压任何区域标签，也不越 stage 右界） */
  position: absolute; right: -12%; bottom: 96%;
  /* 父容器（小船）很窄，shrink-to-fit 会把气泡压成竖排——显式按内容宽 */
  width: max-content; white-space: nowrap;
  padding: 5px 9px;
  font-size: 11px; line-height: 1.35; color: var(--ink);
  background: #FFFDF8; border: 1.5px solid var(--paper-deep);
  border-radius: 12px 12px 3px 12px;
  box-shadow: var(--shadow-card);
  transition: opacity .26s ease;
}
.merchant-bubble::after {
  content: ""; position: absolute; right: 14%; bottom: -5px;
  width: 8px; height: 8px; background: #FFFDF8;
  border-right: 1.5px solid var(--paper-deep);
  border-bottom: 1.5px solid var(--paper-deep);
  transform: rotate(45deg);
}
.merchant-bubble.swap { opacity: 0; }

/* ---------- 兑换页 ---------- */
.merchant-hero { text-align: center; padding: 14px 14px 10px; }
/* v9.3：hero 与岛内小船同一张 PNG（原同款 SVG 退役），显示尺寸沿用原比例 */
.merchant-hero img { width: min(46vw, 172px); height: auto; display: block;
  margin: 0 auto; filter: drop-shadow(0 6px 14px rgba(32, 43, 68, .25)); }
.merchant-hero-line {
  display: inline-block; margin: 2px auto 8px; padding: 6px 14px;
  font-size: 13.5px; color: var(--ink);
  background: var(--paper-mist); border: 1.5px solid var(--paper-deep);
  border-radius: 14px 14px 14px 4px;
}
.merchant-mat {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  /* v9.3：三种货币余额（材料/种子/食物），窄屏折行不横溢 */
  flex-wrap: wrap; row-gap: 2px;
  font-size: 15px; font-weight: 700; color: var(--ink);
}
.merchant-mat b { font-size: 22px; color: var(--sun-deep);
  font-variant-numeric: tabular-nums; }
.merchant-mat small { font-weight: 400; color: var(--ink-soft); font-size: 12px; }

/* 商品卡：图标 | 说明 | 购买区，窄屏折行不横溢 */
.goods-card {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  padding: 12px; margin-top: 10px;
  background: var(--paper-mist); border: 1.5px solid var(--paper-deep);
  border-radius: var(--r-card);
}
.goods-card.soon { opacity: .72; background: var(--paper);
  border-style: dashed; }
.goods-ico {
  flex: none; width: 52px; height: 52px; border-radius: 16px;
  display: grid; place-items: center;
  background: var(--sun-mist); border: 1.5px solid var(--paper-deep);
}
.goods-card.soon .goods-ico { background: var(--paper-deep); }
.goods-ico svg { width: 32px; height: 32px; }
.goods-body { flex: 1 1 130px; min-width: 0; }
.goods-body b { display: block; font-size: 16px; font-family: var(--font-display);
  font-weight: 700; }
.goods-body small { display: block; color: var(--ink-soft); font-size: 12.5px;
  line-height: 1.45; margin-top: 2px; }
.goods-price { margin-top: 4px; font-size: 12.5px; font-weight: 700;
  color: var(--sun-deep); }
.goods-buy { flex: 1 1 100%; display: flex; flex-wrap: wrap; align-items: center;
  gap: 8px; }
.qty-step {
  display: inline-flex; align-items: center; gap: 2px;
  background: #fff; border: 1.5px solid var(--paper-deep); border-radius: 999px;
  padding: 2px 4px;
}
.qty-step button {
  width: 34px; height: 34px; border: 0; border-radius: 50%;
  background: var(--paper-deep); color: var(--ink);
  font-size: 19px; font-weight: 700; line-height: 1; cursor: pointer;
}
.qty-step button:active { transform: scale(.94); }
.qty-step button:disabled { opacity: .4; cursor: default; }
.qty-step b { min-width: 30px; text-align: center; font-size: 16px;
  font-variant-numeric: tabular-nums; }
.goods-total { font-size: 13px; color: var(--ink-soft); font-weight: 600; }
.goods-buy .btn { margin-left: auto; }
.goods-soon-note { flex: 1 1 100%; font-size: 12.5px; color: var(--ink-soft); }

/* 兑换成功撒花：直接复用全站 .fw / fwBurst 粒子（--fx/--fy 变量驱动） */

/* ---------- 愿望清单（孩子端只读 + 家长端可完成） ---------- */
.wish-row {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  padding: 10px 12px; margin-top: 8px;
  background: var(--paper-mist); border: 1.5px solid var(--paper-deep);
  border-radius: 14px;
}
.wish-row .wish-ico { flex: none; font-size: 20px; }
.wish-row .wish-body { flex: 1 1 140px; min-width: 0; font-size: 13.5px;
  line-height: 1.5; color: var(--ink); }
.wish-row .wish-body b { font-size: 14.5px; }
.wish-row .wish-body small { display: block; color: var(--ink-soft); font-size: 12px; }
.wish-row.done { opacity: .78; background: var(--paper); }
.wish-row .btn { flex: none; }

@media (prefers-reduced-motion: reduce) {
  .merchant-boat { animation: none; }
}