/* 乐趣化层（2026-09-26 批 1）：动画 + 星星 + 反馈横幅 + 卡片。自包含——变量全部
   带回退值，页面无论引不引 base.css 都能用。base.css 末尾 @import 本文件，引过
   base.css 的页面自动继承；独立深色页（en-guess/zh-chain 等）单独 <link> 本文件。
   原则（better_design §6.6/6.5）：即时正向反馈、低挫败；动效轻、不遮内容。 */

:root {
  /* 科目色：语文橙 / 数学蓝 / 英语紫 / 自由玩青绿。soft 是浅底，只用于点缀。 */
  --c-zh: #e8682a;    --c-zh-soft: #fdeee2;
  --c-math: #2f8fc0;  --c-math-soft: #e2f2f8;
  --c-en: #8a5fd6;    --c-en-soft: #efe9fb;
  --c-free: #2f9e6e;  --c-free-soft: #e3f4ec;
  --shadow-card: 0 4px 14px rgb(30 42 58 / 0.1);
}

/* 通用卡片：圆角加大 + 柔和阴影 */
.fun-card {
  background: var(--bg, #fbfaf7);
  border: 1px solid var(--line, #ddd8ce);
  border-radius: 16px;
  box-shadow: var(--shadow-card);
  transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
}

/* 反馈动画（配合 shared/fun.js） */
@keyframes kido-pop {
  0% { transform: scale(0.5); opacity: 0; }
  60% { transform: scale(1.12); }
  100% { transform: scale(1); opacity: 1; }
}
@keyframes kido-rise {
  0% { transform: translateY(0); opacity: 0; }
  20% { opacity: 1; }
  100% { transform: translateY(-40px); opacity: 0; }
}
@keyframes kido-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-6px); }
  75% { transform: translateX(6px); }
}
@keyframes kido-wiggle {
  0%, 100% { transform: rotate(0); }
  25% { transform: rotate(-4deg); }
  75% { transform: rotate(4deg); }
}
@keyframes kido-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}
@keyframes kido-in {
  0% { transform: translateY(8px); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}

.fun-pop { animation: kido-pop 0.28s ease both; }
.fun-shake { animation: kido-shake 0.3s ease; }
.fun-rise { animation: kido-rise 0.9s ease-out both; }
.fun-wiggle { animation: kido-wiggle 0.5s ease; }
.fun-float { animation: kido-float 2.4s ease-in-out infinite; }
.fun-in { animation: kido-in 0.32s ease both; }

/* 渐变头卡：首页欢迎区 / widget 顶部的氛围底 */
.hero {
  padding: 22px 24px;
  border-radius: 20px;
  border: 1px solid var(--line, #ddd8ce);
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--accent, #2f6f4f) 13%, var(--bg, #fbfaf7)),
    var(--bg, #fbfaf7) 55%
  );
  box-shadow: var(--shadow-card);
}

/* 星星显示行 */
.stars { display: inline-flex; gap: 3px; font-size: 17px; line-height: 1; }
.stars--big { font-size: 26px; }

/* 反馈横幅：大 emoji + 一句鼓励，替换冷冰冰的"对/错" */
.fun-feedback {
  display: grid;
  gap: 6px;
  justify-items: center;
  text-align: center;
  padding: 16px;
}
.fun-feedback__emoji { font-size: 42px; }
.fun-feedback__text { font-weight: 600; margin: 0; }
.fun-feedback__note { color: var(--muted, #5a6472); font-size: 15px; margin: 0; }

/* 能量/打卡进度条：圆润、带颜色渐变 */
.fun-bar {
  height: 12px;
  border-radius: 99px;
  background: var(--line, #ddd8ce);
  overflow: hidden;
}
.fun-bar > div {
  height: 100%;
  border-radius: 99px;
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--accent, #2f6f4f) 75%, #fff),
    var(--accent, #2f6f4f)
  );
  transition: width 0.4s ease;
}