/* ==========================================================================
   views.css —— 各页面 + 题型的专属样式 + keyframes
   ========================================================================== */

/* ==========================================================================
   首页
   ========================================================================== */

.homehead {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
}
.homehead__rank { flex: 1; min-width: 0; }
.homehead__rankname {
  font-size: var(--fs-hero);
  font-weight: 800;
  letter-spacing: .5px;
  line-height: 1.2;
}
.streak {
  flex: 0 0 auto;
  padding: 6px 14px;
  border-radius: var(--r-chip);
  background: #FFF6E5;
  border: 1px solid var(--warn);
  color: #8A5B00;
  font-size: var(--fs-label);
  font-weight: 700;
  white-space: nowrap;
}

/* 7 段进度带 */
.strip {
  display: flex;
  gap: 6px;
  margin-bottom: 20px;
}
.strip__seg {
  flex: 1;
  height: 8px;
  border-radius: 999px;
  background: var(--line);
  transition: background-color var(--t) linear;
}
.strip__seg.is-done { background: var(--ok); }
.strip__seg.is-locked { background: var(--line); }

.notice {
  padding: 12px 16px;
  margin-bottom: 16px;
  border-radius: var(--r-btn);
  background: #FFF6E5;
  border: 1px solid var(--warn);
  font-size: var(--fs-label);
  color: #6B4A00;
}

/* 单日卡片 */
.daylist { display: flex; flex-direction: column; gap: 12px; }

.daycard {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: var(--surface);
  box-shadow: var(--sh-2);
  text-align: left;
  cursor: pointer;
  transition: transform var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out);
}
.daycard:hover { transform: translateY(-2px); box-shadow: var(--sh-3); }
.daycard:active { transform: translateY(0); }
.daycard.is-locked { opacity: .55; }
.daycard.is-done { border-color: rgba(42,163,122,.45); }

.daycard__no {
  flex: 0 0 auto;
  width: 46px; height: 46px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 14px;
  font-size: var(--fs-lg);
  font-weight: 800;
  font-family: var(--font-num);
}
.daycard__main { flex: 1; min-width: 0; }
.daycard__title { font-size: var(--fs-body); font-weight: 700; }
.daycard__sub {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-top: 2px;
}
.daycard__meta { display: flex; align-items: center; gap: 8px; margin-top: 6px; color: var(--ink-3); }
.daycard__meta .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--ink-3); }
.daycard__right { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; }
.lock { font-size: 1rem; opacity: .7; }

.homefoot { margin-top: 28px; text-align: center; }
.linkbtn {
  border: 0;
  background: none;
  color: var(--ink-3);
  font-size: var(--fs-mini);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  padding: 12px 20px;
}

/* ==========================================================================
   学习模块（卡片流）
   ========================================================================== */

.learn-progress {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}
.learn-progress .bar { flex: 1; }

.lcard { animation: cardIn var(--t-slow) var(--ease-out); }
.lcard__big {
  font-size: var(--fs-hero);
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: .5px;
}
.lcard__sub { margin-top: 10px; color: var(--ink-2); }

/* 两个句型对照 */
.steps { display: flex; flex-direction: column; gap: 12px; }
.step {
  display: flex;
  gap: 14px;
  padding: 16px;
  border-radius: var(--r-card);
  border: 2px solid var(--line);
  background: var(--surface);
}
.step__no {
  flex: 0 0 auto;
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 10px;
  font-weight: 800;
  font-size: var(--fs-lg);
}
.step__body { flex: 1; min-width: 0; }
.step__head { font-weight: 700; }
.step__ex { margin-top: 8px; }

/* 中文/英文对照行 */
.pair {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}
.pair__zh { color: var(--ink-2); }
.pair__arrow { color: var(--ink-3); }
.pair__en { font-family: var(--font-en); font-size: var(--fs-en); }

/* 「我正在」检验表 */
.howto__big {
  font-size: var(--fs-lg);
  font-weight: 800;
  text-align: center;
  padding: 14px;
  border-radius: var(--r-btn);
  background: var(--board);
  color: var(--chalk);
  margin: 12px 0;
}
.howto__row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: var(--r-btn);
  border: 1px solid var(--line);
  margin-bottom: 8px;
}
.howto__row.is-pass { border-color: var(--ok); background: #F0FAF5; }
.howto__row.is-fail { border-color: var(--no); background: #FDF1EC; }
.howto__test { flex: 1; font-family: var(--font-ui); }
.howto__mark { font-weight: 800; }
.howto__row.is-pass .howto__mark { color: var(--ok); }
.howto__row.is-fail .howto__mark { color: var(--no); }

/* 公式卡（HTML 重绘，不用图片） */
.formula { display: flex; flex-direction: column; gap: 10px; }
.formula__slots { display: flex; flex-wrap: wrap; gap: 10px; }
.fslot {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 16px;
  border-radius: var(--r-slot);
  border: 2px solid;
  min-width: 120px;
}
.fslot__label { font-size: var(--fs-mini); font-weight: 700; opacity: .85; }
.fslot__text { font-family: var(--font-en); font-size: var(--fs-en); font-weight: 600; }
.formula__wrong {
  padding: 12px 14px;
  border-radius: var(--r-btn);
  background: #FDF1EC;
  border: 1px dashed var(--no);
  font-family: var(--font-en);
  color: var(--ink-2);
  text-decoration: line-through;
  text-decoration-color: var(--no);
}

/* 小提问（学习模块内，不计分不判错） */
.ask__q { font-size: var(--fs-stem); font-weight: 700; margin-bottom: 14px; }
.ask__opts { display: flex; flex-direction: column; gap: 10px; }
.ask__why {
  margin-top: 12px;
  padding: 14px 16px;
  border-radius: var(--r-btn);
  background: var(--c-time-bg);
  color: var(--c-time-ink);
  animation: slideUp var(--t) var(--ease-out);
}
.ask__why.is-good { background: var(--c-be-bg); color: var(--c-be-ink); }

/* 口诀 / 家长话术条 */
.tipbar {
  display: flex;
  gap: 12px;
  padding: 16px;
  border-radius: var(--r-card);
  border-left: 5px solid var(--board);
  background: var(--surface);
  box-shadow: var(--sh-1);
}
.tipbar--parent { border-left-color: var(--c-place); background: var(--c-place-bg); }
.tipbar--rule { border-left-color: var(--c-be); background: var(--c-be-bg); }
.tipbar__label {
  flex: 0 0 auto;
  font-size: var(--fs-mini);
  font-weight: 800;
  color: var(--ink-2);
}

/* ==========================================================================
   训练模块
   ========================================================================== */

.trainhead {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}
.trainhead__count {
  font-family: var(--font-num);
  font-size: var(--fs-mini);
  color: var(--ink-2);
  white-space: nowrap;
}
.combo {
  padding: 2px 10px;
  border-radius: var(--r-chip);
  background: var(--c-action);
  color: #fff;
  font-weight: 800;
  font-size: var(--fs-mini);
  animation: pop var(--t-slow) var(--ease-pop);
}

.qcard {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  box-shadow: var(--sh-2);
  padding: 22px;
}
.qcard.is-right { animation: pop var(--t) var(--ease-pop); }
.qcard.is-wrong { border-color: var(--no); }

.qstem {
  font-size: var(--fs-stem);
  font-weight: 700;
  line-height: 1.5;
  margin-bottom: 18px;
}
.qstem .en { font-size: var(--fs-en); font-weight: 600; }

.qhint {
  margin-top: 12px;
  font-size: var(--fs-label);
  color: var(--c-time-ink);
}

/* 解析面板（抽屉内容） */
.why__head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.why__verdict { font-size: var(--fs-lg); font-weight: 800; }
.why__verdict.is-right { color: var(--ok); }
.why__verdict.is-wrong { color: var(--no); }
.why__name {
  font-size: var(--fs-mini);
  padding: 3px 10px;
  border-radius: var(--r-chip);
  background: var(--c-trigger-bg);
  color: var(--c-trigger-ink);
  font-weight: 700;
}
.why__why { line-height: 1.75; }
.why__fix {
  margin-top: 14px;
  padding: 12px 16px;
  border-radius: var(--r-btn);
  background: var(--c-be-bg);
  color: var(--c-be-ink);
  font-family: var(--font-en);
  font-size: var(--fs-en);
}
.why__rule {
  margin-top: 14px;
  padding: 12px 16px;
  border-radius: var(--r-btn);
  background: var(--board);
  color: var(--chalk);
  font-weight: 700;
}
.why__rule::before { content: '口诀　'; opacity: .6; font-weight: 400; font-size: var(--fs-mini); }

/* ★ 「我正在」印章 —— 全站最核心的一个动效
   让孩子自己看出"我正在很蓝"说不通，而不是被告知 */
.probe {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 16px;
  border-radius: var(--r-btn);
  background: var(--bg);
  margin-bottom: 16px;
  font-size: var(--fs-stem);
  font-weight: 700;
}
.probe__stamp {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 8px;
  background: var(--c-trigger);
  color: #fff;
  box-shadow: 0 2px 0 var(--c-trigger-ink);
  transform-origin: center;
  animation: stamp 200ms var(--ease-pop) both;
}
.probe__row { display: inline-flex; align-items: center; gap: 8px; }
.probe__row.is-bad {
  color: var(--ink-3);
  animation: shakeX 320ms ease-out 200ms;
}
.probe__mark { font-size: var(--fs-lg); }
.probe__row.is-bad .probe__mark { color: var(--no); }
.probe__verdict { font-size: var(--fs-label); color: var(--ink-2); }

/* 结算页 */
.result { text-align: center; }
.result__title { font-size: var(--fs-hero); font-weight: 800; margin-bottom: 6px; }
.result__score {
  font-family: var(--font-num);
  font-size: var(--fs-lg);
  color: var(--ink-2);
  margin-bottom: 18px;
}
.stars--big { font-size: 2.6rem; gap: 8px; justify-content: center; display: flex; margin: 18px 0; }
.star.is-drop { animation: starDrop 420ms var(--ease-pop) both; }

/* ==========================================================================
   Day 7 抢答赛
   ========================================================================== */

.game { text-align: center; }
.game__timer {
  font-family: var(--font-num);
  font-size: 3rem;
  font-weight: 800;
  line-height: 1;
  color: var(--board);
}
.game__timer.is-low { color: var(--no); }
.game__score { font-family: var(--font-num); font-size: var(--fs-lg); color: var(--ink-2); }
.game__stage { margin: 24px 0; }
.game__q { font-size: var(--fs-hero); font-weight: 800; }

/* ==========================================================================
   公式卡抽屉
   ========================================================================== */

.fcard {
  background: var(--board);
  color: var(--chalk);
  border-radius: var(--r-card);
  padding: 22px;
}
.fcard + .fcard { margin-top: 14px; }
.fcard__title { font-size: var(--fs-lg); font-weight: 800; color: #fff; margin-bottom: 14px; }
.fcard__line {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: var(--r-btn);
  background: rgba(255,255,255,.08);
  margin-bottom: 8px;
  font-family: var(--font-en);
  font-size: var(--fs-en);
}
.fcard__cn { font-family: var(--font-ui); font-size: var(--fs-label); opacity: .8; min-width: 64px; }
.fcard__note { margin-top: 12px; font-size: var(--fs-label); opacity: .85; line-height: 1.7; }

/* 段位表 */
.ranklist { display: flex; flex-direction: column; gap: 8px; }
.ranklist__row {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px;
  border-radius: var(--r-btn);
  border: 1px solid var(--line);
}
.ranklist__row.is-now { border-color: var(--board); background: var(--c-be-bg); font-weight: 700; }

/* ==========================================================================
   家长面板
   ========================================================================== */

.report { display: flex; flex-direction: column; gap: 8px; }
.report__row {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px;
  border-radius: var(--r-btn);
  border: 1px solid var(--line);
}
.report__row.is-empty { opacity: .55; }
.report__name { flex: 1; min-width: 0; }
.report__score { font-family: var(--font-num); font-size: var(--fs-mini); color: var(--ink-2); }

.advice {
  padding: 14px 16px;
  border-radius: var(--r-btn);
  background: var(--c-trigger-bg);
  border-left: 4px solid var(--c-trigger);
  margin-bottom: 10px;
}
.advice__name { font-weight: 700; color: var(--c-trigger-ink); }
.advice__count { font-family: var(--font-num); font-size: var(--fs-mini); color: var(--ink-2); }
.advice__text { margin-top: 6px; font-size: var(--fs-label); line-height: 1.7; }

.setrow {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 14px 0;
  border-bottom: 1px solid var(--line);
}
.setrow:last-child { border-bottom: 0; }

/* ==========================================================================
   keyframes
   ========================================================================== */

@keyframes cardIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

@keyframes slideUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

@keyframes pop {
  0%   { transform: scale(1); }
  45%  { transform: scale(1.04); }
  100% { transform: scale(1); }
}

@keyframes shakeX {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-6px); }
  40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(4px); }
}

/* 「我正在」印章盖下来 */
@keyframes stamp {
  0%   { transform: scale(.6); opacity: 0; }
  60%  { transform: scale(1.15); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

@keyframes starDrop {
  0%   { transform: scale(0) rotate(-30deg); opacity: 0; }
  60%  { transform: scale(1.25) rotate(4deg); opacity: 1; }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}

/* 反馈类挂在元素上的动画 */
.fx-shake { animation: shakeX 320ms ease-out; }
.fx-pop   { animation: pop var(--t) var(--ease-pop); }

/* 结业证书（打印） */
.cert {
  padding: 40px;
  border: 3px double var(--board);
  border-radius: var(--r-card);
  text-align: center;
  background: #fff;
}
.cert__title { font-size: 2rem; font-weight: 800; letter-spacing: 4px; margin-bottom: 8px; }
.cert__sub { color: var(--ink-2); margin-bottom: 28px; }
.cert__name { font-size: 1.6rem; font-weight: 800; border-bottom: 2px solid var(--ink); display: inline-block; padding: 0 24px 6px; }
.cert__body { margin: 28px 0; line-height: 2; }