/*
 * 孩子端练习界面。
 *
 * 这份样式**移植自 opentest/src/web/styles/play.css**（同作者的既定设计决策），
 * 只做适配：变量改挂在 .kid-root 下，class 前缀 kid- 避免与家长端 app.css 撞名。
 *
 * 为什么一定要单独一套、并且必须物理隔离：
 *   家长端 app.css 是克制的墨紫、信息密度高、字小，为「家长盯着屏幕」设计；
 *   这一屏的唯一使用者是个七岁小孩，目的不是让他读懂信息，而是让他愿意再点下一题。
 *   所以取舍反过来：大、圆、暖、软，按钮大到闭着眼也按得中，文字 22px 起步。
 *
 *   所有令牌挂在 .kid-root 而不是 :root。页面切走时它们整体消失，
 *   不会有��丝暖色漏进家长端的世界。这条是这个文件的全部意义，不要为了
 *   「方便」把令牌挪到 :root。
 *
 * 三条纪律（来自 opentest 的产品决策，照搬）：
 *   1. 全程没有红色。--bad 这个词在本文件里根本不存在。「错了」在这个界面里
 *      不是要被展示的事件，是一次不被打断的重新输入。
 *   2. 不把正确率当主视觉。那是家长的东西。
 *   3. 练习过程零反馈。不显示对错，只说「记下啦」。做完才统一看讲解。
 */

.kid-root {
  /* ---- 底色与文字 ---- */
  --kid-cream: #fff6ea;
  --kid-cream-deep: #ffe9d0;
  --kid-surface: #fffdf8;
  --kid-ink: #3a2a17;
  --kid-ink-soft: #7a6043;
  --kid-ink-faint: #a89175;
  --kid-line: #eedbc0;
  --kid-line-strong: #dfc39c;

  /* ---- 主色：杏子橙。两个深度分工明确 ---- */
  --kid-accent: #e8720c;       /* 装饰：进度条、选中描边、序号圆 */
  --kid-accent-deep: #b8500a;  /* 承载白字的实心按钮底色 */
  --kid-accent-ink: #8a3d05;   /* 橙底上的文字 */
  --kid-accent-soft: #ffe4c4;  /* 选中态底 */
  --kid-ring: #ffb45c;         /* 键盘焦点环 */

  /* ---- 语义色：全程只有两个 ----
     对的时刻用绿，需要再想的时刻用暖沙色。没有红色。 */
  --kid-good: #2f8f5b;
  --kid-good-deep: #1f6b3f;
  --kid-good-soft: #ddf3e6;
  --kid-nudge: #c07818;
  --kid-nudge-soft: #fdeed6;

  /* ---- 形状与阴影 ---- */
  --kid-radius-sm: 14px;
  --kid-radius: 22px;
  --kid-radius-lg: 30px;
  --kid-radius-pill: 999px;
  --kid-shadow: 0 2px 0 rgb(58 42 23 / 6%), 0 10px 24px rgb(180 110 40 / 14%);
  --kid-shadow-lift: 0 4px 0 rgb(58 42 23 / 8%), 0 18px 36px rgb(180 110 40 / 22%);

  --kid-font: 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', -apple-system,
    BlinkMacSystemFont, 'Segoe UI', sans-serif;

  font-family: var(--kid-font);
  color: var(--kid-ink);
  -webkit-font-smoothing: antialiased;

  /* 抵消外层 .mh-page 的浅灰底，让暖色铺满整屏 */
  background:
    radial-gradient(1100px 420px at 50% -140px, var(--kid-cream-deep), transparent 70%),
    var(--kid-cream);
  min-height: 100%;
  padding: 22px 20px 40px;
}

.kid-root *, .kid-root *::before, .kid-root *::after { box-sizing: border-box; }
.kid-root button, .kid-root input, .kid-root textarea { font-family: inherit; }

/* ---------- 版心 ---------- */
.kid-wrap { max-width: 620px; margin: 0 auto; }

/* ---------- 顶部：进度 + 计数 ---------- */
.kid-top {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; margin-bottom: 14px;
}
.kid-count {
  font-size: 15px; font-weight: 700; color: var(--kid-ink-soft);
  font-variant-numeric: tabular-nums;
}
.kid-back {
  min-height: 44px; padding: 8px 18px;
  border: 2px solid var(--kid-line-strong); border-radius: var(--kid-radius-pill);
  background: var(--kid-surface); color: var(--kid-ink-soft);
  font-size: 16px; font-weight: 700; cursor: pointer;
}

/* 进度条：粗、圆、暖。不显示百分比数字——七岁小孩不读数字，
   也不需要知道「第 3 题共 8 题」这种会让人焦虑的信息。 */
.kid-progress {
  height: 14px; border-radius: var(--kid-radius-pill);
  background: var(--kid-line); overflow: hidden; margin-bottom: 22px;
}
.kid-progress i {
  display: block; height: 100%;
  background: var(--kid-accent);
  border-radius: var(--kid-radius-pill);
  transition: width .3s ease;
}

/* ---------- 题卡 ---------- */
.kid-card {
  padding: 24px 22px;
  background: var(--kid-surface);
  border: 3px solid var(--kid-line);
  border-radius: var(--kid-radius-lg);
  box-shadow: var(--kid-shadow);
}
.kid-kind {
  display: inline-block; margin-bottom: 14px; padding: 3px 14px;
  border-radius: var(--kid-radius-pill);
  background: var(--kid-accent-soft); color: var(--kid-accent-ink);
  font-size: 14px; font-weight: 700;
}
.kid-stem {
  font-size: 24px; line-height: 1.75; font-weight: 600;
  color: var(--kid-ink); overflow-wrap: anywhere;
}
/* 题干里的图形（线段图/点阵图/面积图）由 figures.js 渲染 SVG，
   底色用浅奶油，避免白底上分不清线。 */
.kid-stem svg { display: block; max-width: 100%; margin: 16px 0; background: #fff; border-radius: var(--kid-radius-sm); }

/* 填空题的空格 */
.kid-blank {
  display: inline-block; min-width: 90px;
  border-bottom: 3px solid var(--kid-accent);
  margin: 0 3px;
}

/* ---------- 选项 ---------- */
.kid-options { display: grid; gap: 14px; margin-top: 22px; }
.kid-option {
  display: flex; align-items: center; gap: 16px;
  width: 100%; min-height: 60px; padding: 14px 20px;
  text-align: left;
  border: 3px solid var(--kid-line); border-radius: var(--kid-radius);
  background: var(--kid-surface); color: var(--kid-ink);
  font-size: 20px; font-weight: 600; line-height: 1.6; cursor: pointer;
  box-shadow: 0 3px 0 var(--kid-line);
  transition: transform .12s, border-color .12s, background .12s, box-shadow .12s;
}
.kid-option:hover:not(:disabled) {
  transform: translateY(-2px);
  border-color: var(--kid-line-strong);
  box-shadow: 0 6px 0 var(--kid-line-strong);
}
.kid-option:disabled { cursor: default; opacity: .75; }
.kid-option-letter {
  flex: 0 0 46px; width: 46px; height: 46px;
  border-radius: 50%; border: 3px solid var(--kid-line-strong);
  background: #fff; color: var(--kid-ink-soft);
  font-size: 20px; font-weight: 800;
  display: inline-flex; align-items: center; justify-content: center;
}
.kid-option-text { min-width: 0; overflow-wrap: anywhere; }
/* 选中态：描边 + 圆底变实心。没有红叉，没有对勾——选了就是选了，不宣布对错。 */
.kid-option.is-picked {
  border-color: var(--kid-accent);
  background: var(--kid-accent-soft);
  box-shadow: 0 4px 0 var(--kid-accent);
}
.kid-option.is-picked .kid-option-letter {
  background: var(--kid-accent); border-color: var(--kid-accent-deep); color: #fff;
}

/* ---------- 判断题：两个大按钮 ---------- */
.kid-judge {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 26px;
}
.kid-judge-btn {
  min-height: 132px; padding: 18px 12px;
  border: 3px solid var(--kid-line); border-radius: var(--kid-radius-lg);
  background: var(--kid-surface); color: var(--kid-ink);
  font-size: 28px; font-weight: 800; cursor: pointer;
  box-shadow: 0 5px 0 var(--kid-line);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  transition: transform .12s, border-color .12s, background .12s;
}
.kid-judge-btn em { font-style: normal; font-size: 38px; line-height: 1; }
.kid-judge-btn:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 7px 0 var(--kid-line-strong); }
.kid-judge-btn.is-picked {
  border-color: var(--kid-accent); background: var(--kid-accent-soft);
  box-shadow: 0 5px 0 var(--kid-accent);
}

/* ---------- 填空题输入 ---------- */
.kid-input {
  width: 100%; min-height: 54px; padding: 8px 14px;
  border: 2px solid var(--kid-line-strong); border-radius: var(--kid-radius-sm);
  background: var(--kid-surface); color: var(--kid-ink);
  font-size: 19px; font-weight: 600;
}
.kid-input:focus {
  outline: 3px solid var(--kid-ring); outline-offset: 1px; border-color: var(--kid-accent);
}
.kid-input:focus-visible,
.kid-option:focus-visible,
.kid-judge-btn:focus-visible,
.kid-btn:focus-visible,
.kid-back:focus-visible {
  outline: 4px solid var(--kid-ring); outline-offset: 3px;
}

/* ---------- 按钮 ---------- */
.kid-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 56px; padding: 12px 28px;
  border: 2px solid var(--kid-line-strong); border-radius: var(--kid-radius-pill);
  background: var(--kid-surface); color: var(--kid-ink);
  font-size: 18px; font-weight: 700; cursor: pointer;
  box-shadow: 0 4px 0 var(--kid-line-strong);
  transition: transform .12s, box-shadow .12s, background .12s;
}
.kid-btn:hover:not(:disabled) {
  background: #fff; transform: translateY(-1px); box-shadow: 0 6px 0 var(--kid-line-strong);
}
.kid-btn:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 1px 0 var(--kid-line-strong); }
.kid-btn:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }
.kid-btn.is-solid {
  background: var(--kid-accent-deep); border-color: var(--kid-accent-deep); color: #fff;
  box-shadow: 0 4px 0 var(--kid-accent);
}
.kid-btn.is-solid:hover:not(:disabled) { background: var(--kid-accent-deep); box-shadow: 0 6px 0 var(--kid-accent); }
.kid-actions { margin-top: 26px; }

/* ---------- 过程反馈：零对错 ---------- */
/* 只说「记下啦」。这是纪律 3：练习过程中不告诉孩子对错，
   前端在这时也拿不到答案。 */
.kid-state {
  margin-top: 24px; padding: 18px 22px;
  border-radius: var(--kid-radius); border: 2px solid var(--kid-line-strong);
  background: var(--kid-surface); color: var(--kid-ink-soft);
  font-size: 19px; font-weight: 700; line-height: 1.6;
}
.kid-state-nudge { background: var(--kid-nudge-soft); border-color: var(--kid-line-strong); color: #7a4a0c; }

/* ---------- 结束：讲解（此时才看对错，仍不用红色） ---------- */
.kid-done { padding-top: 8px; }
.kid-score { text-align: center; padding: 26px 0 30px; }
.kid-score-num {
  font-size: 76px; font-weight: 800; line-height: 1; color: var(--kid-good-deep);
  font-variant-numeric: tabular-nums;
}
/* 正确率是家长的东西，不做成主视觉。这里的百分比用「做对了几题」表述。 */
.kid-score-title { margin-top: 10px; font-size: 22px; font-weight: 700; color: var(--kid-ink); }
.kid-score-sub { margin-top: 6px; font-size: 15px; color: var(--kid-ink-faint); }

.kid-review { margin-bottom: 18px; }
.kid-review-head {
  display: flex; align-items: center; gap: 12px; margin-bottom: 12px;
  font-size: 19px; font-weight: 700; color: var(--kid-ink);
}
/* 圆点：对了是绿的，要再看是暖沙色。没有红色。 */
.kid-dot {
  flex: 0 0 34px; width: 34px; height: 34px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 18px; font-weight: 800; color: #fff;
}
.kid-dot-good { background: var(--kid-good); }
.kid-dot-nudge { background: var(--kid-nudge); }

.kid-recap {
  margin-top: 14px; padding: 14px 16px;
  border-radius: var(--kid-radius-sm);
  background: var(--kid-cream); border: 2px solid var(--kid-line);
  font-size: 17px; line-height: 1.7; color: var(--kid-ink);
}
.kid-recap p { margin: 0 0 6px; }
.kid-recap p:last-child { margin-bottom: 0; }
.kid-recap b { color: var(--kid-accent-ink); }
.kid-explain {
  margin-top: 14px; padding: 16px 18px;
  border-radius: var(--kid-radius-sm);
  background: var(--kid-surface); border: 2px dashed var(--kid-line-strong);
  font-size: 17px; line-height: 1.8; color: var(--kid-ink-soft);
}

/* ---------- 窄屏 ---------- */
@media (max-width:600px){
  .kid-root { padding: 16px 12px 32px; }
  .kid-stem { font-size: 21px; }
  .kid-option { font-size: 18px; padding: 12px 16px; }
  .kid-score-num { font-size: 62px; }
}

@media (prefers-reduced-motion: reduce){
  .kid-root * { transition: none !important; animation: none !important; }
}