/* ============================================================
   紫月疗愈 · 儿童测试区（游戏化）
   与 app.css 共存；所有规则以 .kids-body / .k- 前缀限定，不影响成人版
   ============================================================ */

.kids-body{
  margin:0;
  min-height:100vh;
  color:var(--k-text);
  /* 底色用纯色：渐变交给 .k-scene（position:fixed），
     因为 iOS Safari 不支持 background-attachment:fixed，会退化成滚动背景导致下半页发白 */
  background:var(--k-bg2);
  font:400 16px/1.7 -apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  -webkit-text-size-adjust:100%;
  -webkit-tap-highlight-color:transparent;
}

/* ---------- 主题 ---------- */
.kids-theme-sunny{
  --k-accent:#f39c12; --k-accent-d:#d4830a; --k-accent-l:#fff4e0;
  --k-bg1:#fffaf1; --k-bg2:#fdf0dc;
  --k-text:#3b3226; --k-muted:#8d7f6b; --k-line:#f0e2cb; --k-ring:rgba(243,156,18,.20);
}
.kids-theme-jungle{
  --k-accent:#2fa96b; --k-accent-d:#1f8b55; --k-accent-l:#e6f8ee;
  --k-bg1:#f2fcf6; --k-bg2:#e2f6ea;
  --k-text:#23372c; --k-muted:#6f8a7c; --k-line:#d5ecdf; --k-ring:rgba(47,169,107,.20);
}
.kids-theme-space{
  --k-accent:#7a6cf0; --k-accent-d:#5f4fd8; --k-accent-l:#efedfe;
  --k-bg1:#f7f6ff; --k-bg2:#ebe9fd;
  --k-text:#2c2940; --k-muted:#7b7894; --k-line:#e0dcf7; --k-ring:rgba(122,108,240,.20);
}
.kids-theme-adventure{
  --k-accent:#ef6a4b; --k-accent-d:#d4502f; --k-accent-l:#ffece6;
  --k-bg1:#fff7f4; --k-bg2:#ffe9e0;
  --k-text:#3d2b25; --k-muted:#93776d; --k-line:#f8ddd3; --k-ring:rgba(239,106,75,.20);
}

/* ---------- 通用容器 ---------- */
.k-page{max-width:760px;margin:0 auto;padding:18px 16px 56px}
.k-center{text-align:center}
.k-small{font-size:13px;color:var(--k-muted);line-height:1.7;margin:10px 0 0}
.k-prose{font-size:15.5px;color:#4d4437;line-height:1.85;margin:0}
.k-crumb{margin-bottom:12px;font-size:14px}
.k-crumb a{color:var(--k-muted);text-decoration:none}
.k-crumb a:hover{color:var(--k-accent-d)}

/* ---------- 吉祥物 ---------- */
.mascot{width:104px;flex:none;animation:k-float 3.4s ease-in-out infinite;transform-origin:50% 80%}
.mascot-svg{display:block;width:100%;height:auto;overflow:visible}
.m-shadow{fill:rgba(0,0,0,.07);animation:k-shadow 3.4s ease-in-out infinite}
.m-antenna{stroke:var(--k-accent);stroke-width:4;stroke-linecap:round}
.m-tip{fill:#fff}
.m-tip-glow{fill:var(--k-accent);animation:k-glow 2.2s ease-in-out infinite}
.m-body{fill:var(--k-accent)}
.m-gloss{fill:rgba(255,255,255,.22)}
.m-hand{fill:var(--k-accent)}
.m-hand-l{animation:k-hand-l 2.8s ease-in-out infinite}
.m-hand-r{animation:k-hand-r 2.8s ease-in-out infinite}
.m-eye{fill:#fff}
.m-pupil{fill:#3a3340;animation:k-look 5.6s ease-in-out infinite}
.m-glint{fill:#fff}
.m-lid{fill:var(--k-accent);transform-origin:center;transform-box:fill-box;animation:k-blink 5.2s ease-in-out infinite}
.m-cheek{fill:rgba(255,255,255,.45)}
/* 三种嘴型：CSS 按表情类切换，JS 换表情无需重建 SVG */
.m-mouth{fill:none;stroke:#fff;stroke-width:4.5;stroke-linecap:round;display:none}
.m-mouth-cheer{fill:#fff;stroke-width:0}
.mascot-happy .m-mouth-happy,
.mascot-cheer .m-mouth-cheer,
.mascot-think .m-mouth-think{display:block}
/* 思考气泡：只在 think 时浮现 */
.m-think{fill:var(--k-accent);opacity:0;transition:opacity .3s}
.mascot-think .m-think{animation:k-glow 2.6s ease-in-out infinite}
/* 欢呼小星星：只在 cheer 时炸开 */
.m-spark{fill:#ffe08a;opacity:0}
.mascot-cheer{animation:k-pop .6s ease-out}
.mascot-cheer .m-spark{animation:k-spark .9s ease-out}
.mascot-cheer .m-hand-l{animation:k-wave .5s ease-in-out 2}
.mascot-cheer .m-hand-r{animation:k-wave .5s ease-in-out .12s 2}

@keyframes k-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@keyframes k-shadow{0%,100%{transform:scaleX(1);opacity:1}50%{transform:scaleX(.9);opacity:.75}}
@keyframes k-pop{0%{transform:scale(1)}40%{transform:scale(1.18) rotate(-5deg)}100%{transform:scale(1)}}
@keyframes k-glow{0%,100%{opacity:.35;transform:scale(.94)}50%{opacity:.9;transform:scale(1.06)}}
@keyframes k-blink{
  0%,90%,100%{height:0}
  93%,95%{height:22px}
  97%{height:0}
}
@keyframes k-look{
  0%,42%,100%{transform:translate(0,0)}
  52%,62%{transform:translate(2.2px,0)}
  74%,84%{transform:translate(-2.2px,.6px)}
}
@keyframes k-hand-l{0%,100%{transform:translate(0,0)}50%{transform:translate(-3px,-3px)}}
@keyframes k-hand-r{0%,100%{transform:translate(0,0)}50%{transform:translate(3px,-3px)}}
@keyframes k-wave{0%,100%{transform:translate(0,0)}50%{transform:translate(0,-9px)}}
@keyframes k-spark{
  0%{opacity:0;transform:scale(.4)}
  30%{opacity:1;transform:scale(1.1)}
  100%{opacity:0;transform:scale(1.3) translateY(-6px)}
}

/* ---------- 说明页 · 头部 ---------- */
.k-hero{
  display:flex;gap:20px;align-items:center;
  background:#fff;border:1px solid var(--k-line);border-radius:26px;
  padding:22px;margin-bottom:16px;
  box-shadow:0 2px 6px rgba(120,95,50,.05),0 14px 34px rgba(120,95,50,.07);
}
.k-hero-mascot{flex:none}
.k-hero-text{min-width:0}
.k-pill{
  display:inline-block;font-size:12.5px;font-weight:600;
  background:var(--k-accent-l);color:var(--k-accent-d);
  padding:4px 12px;border-radius:20px;margin-bottom:9px;
}
.k-hero h1{font-size:26px;line-height:1.3;margin:0 0 6px;font-weight:700}
.k-tagline{margin:0 0 12px;font-size:15px;color:var(--k-muted)}
.k-bullets{list-style:none;margin:0;padding:0;font-size:14.5px;color:#4d4437}
.k-bullets li{position:relative;padding-left:22px;margin:5px 0}
.k-bullets li::before{
  content:"";position:absolute;left:6px;top:9px;width:7px;height:7px;
  border-radius:50%;background:var(--k-accent)
}
.k-bullets b{color:var(--k-accent-d)}

/* ---------- 面板 ---------- */
.k-panel{
  background:#fff;border:1px solid var(--k-line);border-radius:22px;
  padding:20px;margin-bottom:16px;box-shadow:0 2px 6px rgba(120,95,50,.04)
}
.k-panel-title{font-size:17px;font-weight:700;margin:0 0 14px}

/* ---------- 对话气泡 ---------- */
.k-bubble{
  position:relative;background:var(--k-accent-l);color:#463a2c;
  border-radius:18px;padding:12px 16px;font-size:15px;line-height:1.65;
}
.k-bubble-block{
  border-radius:18px;padding:16px 18px;font-size:15.5px;line-height:1.85;
}

/* ---------- 奖励预告 ---------- */
.k-rewards{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.k-reward-item{
  background:var(--k-bg1);border:1px dashed var(--k-line);border-radius:16px;
  padding:14px 8px;text-align:center
}
.k-reward-item-wide{grid-column:1/-1;background:var(--k-accent-l);border-style:solid}
.k-reward-ico{font-size:24px;display:block;line-height:1.2;margin-bottom:4px}
.k-reward-item b{display:block;font-size:16px;color:var(--k-accent-d);font-weight:700}
.k-reward-item em{font-style:normal;font-size:12.5px;color:var(--k-muted)}

/* ---------- 按钮 ---------- */
.k-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border:2.5px solid transparent;border-radius:18px;
  padding:13px 24px;font:inherit;font-size:16.5px;font-weight:600;
  cursor:pointer;transition:transform .13s,box-shadow .13s,background .13s;
  background:#fff;color:var(--k-text);line-height:1.35;min-height:54px;
}
.k-btn-go{background:var(--k-accent);border-color:var(--k-accent);color:#fff;
  box-shadow:0 6px 0 var(--k-accent-d)}
.k-btn-go:active{transform:translateY(3px);box-shadow:0 3px 0 var(--k-accent-d)}
.k-btn-ghost{border-color:var(--k-line);color:var(--k-muted)}
.k-btn-ghost:hover{border-color:var(--k-accent);color:var(--k-accent-d)}
.k-btn:disabled{opacity:.42;cursor:not-allowed;box-shadow:none;transform:none}
.k-btn-big{width:100%;padding:19px 24px;font-size:20px;border-radius:22px;min-height:66px}
.k-start{margin:4px 0 16px}

/* ---------- 家长区 ---------- */
.k-parent{
  background:#fffdf9;border:1px solid var(--k-line);border-radius:20px;padding:18px 20px;
  font-size:13.5px;color:#6b6154;line-height:1.8
}
.k-parent h3{font-size:15px;margin:0 0 9px;color:var(--k-text)}
.k-parent p{margin:0 0 9px}
.k-parent p:last-child{margin:0}
.k-parent-links{font-size:12.5px;color:var(--k-muted);padding-top:9px;border-top:1px dashed var(--k-line)}
.k-parent a{color:var(--k-accent-d)}

/* ---------- 作答页 · 顶栏 ---------- */
.k-top{position:sticky;top:0;z-index:30;background:rgba(255,255,255,.94);backdrop-filter:blur(10px);border-bottom:1px solid var(--k-line)}
.k-top-inner{max-width:760px;margin:0 auto;padding:10px 16px;display:flex;align-items:center;gap:12px}
.k-top-back{
  flex:none;width:38px;height:38px;border-radius:50%;background:var(--k-bg1);
  border:1px solid var(--k-line);color:var(--k-muted);text-decoration:none;
  display:grid;place-items:center;font-size:16px;line-height:1
}
.k-top-back:hover{color:var(--k-accent-d);border-color:var(--k-accent)}
.k-top-mid{flex:1;min-width:0}
.k-top-row{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:6px}
.k-level{font-size:14.5px;font-weight:700;color:var(--k-accent-d)}
.k-qcount{font-size:12.5px;color:var(--k-muted)}
.k-dots{display:flex;gap:4px;flex-wrap:wrap}
.k-dots i{display:block;width:100%;max-width:26px;height:5px;border-radius:3px;background:var(--k-line);flex:1 1 12px}
.k-dots i.done{background:var(--k-accent)}
.k-dots i.now{background:var(--k-accent-d);transform:scaleY(1.7)}
.k-stars{
  flex:none;display:flex;align-items:center;gap:5px;
  background:var(--k-accent-l);border-radius:20px;padding:7px 13px;
  font-size:15px;font-weight:700;color:var(--k-accent-d)
}
.k-star-ico{font-size:15px;line-height:1}
.k-stars.bump{animation:k-pop .45s ease-out}
.k-bar{height:7px;background:var(--k-line);position:relative;overflow:hidden}
.k-bar-fill{
  position:relative;height:100%;width:0;border-radius:0 6px 6px 0;
  background:linear-gradient(90deg,#ffd166,#ffa07a,#ff9ec4,#b39ddb,#7ec8e3,#8fdcb0);
  background-size:220% 100%;
  box-shadow:0 0 10px rgba(255,180,90,.5);
  transition:width .45s cubic-bezier(.3,1.2,.5,1);
  animation:k-bar-flow 3.4s linear infinite;
}
.k-bar-fill::after{
  content:"";position:absolute;inset:0;border-radius:inherit;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.72),transparent);
  background-size:44% 100%;background-repeat:no-repeat;
  animation:k-bar-shine 1.9s ease-in-out infinite;
}
@keyframes k-bar-flow{0%{background-position:0 0}100%{background-position:220% 0}}
@keyframes k-bar-shine{
  0%{background-position:-46% 0;opacity:0}
  40%{opacity:1}
  100%{background-position:146% 0;opacity:0}
}

/* ---------- 作答页 · 舞台 ---------- */
.k-stage{max-width:760px;margin:0 auto;padding:18px 16px 44px}
.k-guide{display:flex;gap:14px;align-items:flex-start;margin-bottom:16px}
.k-guide-mascot{flex:none}
.k-guide-mascot .mascot{width:74px}
.k-guide .k-bubble{margin-top:6px;flex:1;min-width:0}
.k-guide .k-bubble::before{
  content:"";position:absolute;left:-7px;top:16px;
  width:13px;height:13px;background:var(--k-accent-l);
  border-radius:2px;transform:rotate(45deg)
}

.k-card{
  background:#fff;border:1px solid var(--k-line);border-radius:26px;
  padding:22px;box-shadow:0 2px 6px rgba(120,95,50,.05),0 16px 38px rgba(120,95,50,.08);
  animation:k-slide .28s ease-out
}
@keyframes k-slide{from{opacity:0;transform:translateX(16px)}to{opacity:1;transform:none}}
.k-qno{
  display:inline-block;font-size:12.5px;font-weight:700;
  background:var(--k-accent-l);color:var(--k-accent-d);
  padding:4px 12px;border-radius:20px;margin-bottom:12px
}
.k-qtext{font-size:21px;line-height:1.55;font-weight:600;margin-bottom:20px;word-break:break-word}
.k-opts{display:flex;flex-direction:column;gap:10px}
.k-opt{
  display:flex;align-items:center;gap:14px;width:100%;text-align:left;
  border:2.5px solid var(--k-line);background:#fff;border-radius:18px;
  padding:15px 17px;font:inherit;font-size:17px;color:var(--k-text);
  cursor:pointer;transition:transform .13s,border-color .13s,background .13s;
  min-height:60px;line-height:1.4
}
.k-opt:hover{border-color:var(--k-accent);transform:translateY(-2px)}
.k-opt:active{transform:translateY(0)}
.k-opt.on{border-color:var(--k-accent);background:var(--k-accent-l);box-shadow:0 0 0 4px var(--k-ring)}
.k-opt-dots{display:flex;gap:3.5px;flex:none}
.k-opt-dots span{display:block;width:9px;height:9px;border-radius:50%;background:var(--k-line)}
.k-opt.on .k-opt-dots span{background:var(--k-accent)}
.k-opt-label{flex:1;min-width:0}
.k-opt-mark{flex:none;font-size:18px;color:var(--k-accent);opacity:0;transition:opacity .15s}
.k-opt.on .k-opt-mark{opacity:1}

.k-nav{display:flex;gap:10px;margin-top:18px}
.k-nav .k-btn{flex:1}
.k-hint{text-align:center;font-size:13.5px;color:var(--k-muted);margin:14px 0 0}

/* ---------- 通关浮层 ---------- */
.k-overlay{
  position:fixed;inset:0;z-index:60;padding:20px;
  background:rgba(50,40,30,.42);backdrop-filter:blur(3px);
  display:grid;place-items:center
}
.k-overlay[hidden]{display:none}
.k-overlay-box{
  background:#fff;border-radius:28px;padding:30px 26px;max-width:400px;width:100%;
  text-align:center;box-shadow:0 24px 60px rgba(60,40,20,.24);
  animation:k-zoom .34s cubic-bezier(.2,1.3,.5,1)
}
@keyframes k-zoom{from{opacity:0;transform:scale(.82)}to{opacity:1;transform:scale(1)}}
.k-overlay-emoji{font-size:52px;line-height:1;margin-bottom:10px;animation:k-pop .7s ease-out}
.k-overlay-box h2{font-size:23px;margin:0 0 8px;font-weight:700}
.k-overlay-stars{font-size:24px;font-weight:700;color:var(--k-accent-d);margin:0 0 6px}
.k-overlay-sub{font-size:14px;color:var(--k-muted);margin:0 0 20px}
.k-overlay-box .k-btn{width:100%}

/* ---------- 星星飞入 / 提示 ---------- */
.k-fly{position:fixed;inset:0;pointer-events:none;z-index:70;overflow:hidden}
.k-fly i{
  position:absolute;font-size:26px;line-height:1;
  animation:k-fly 1.05s ease-out forwards
}
@keyframes k-fly{
  0%{opacity:0;transform:translate(0,0) scale(.5) rotate(0)}
  18%{opacity:1}
  100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(1.35) rotate(var(--rot))}
}
.k-toast{
  position:fixed;left:50%;bottom:26px;transform:translateX(-50%);
  z-index:80;background:rgba(45,38,30,.93);color:#fff;
  padding:11px 20px;border-radius:22px;font-size:15px;font-weight:600;
  box-shadow:0 10px 30px rgba(0,0,0,.2);animation:k-toast .3s ease-out;
  max-width:86vw;text-align:center
}
.k-toast[hidden]{display:none}
@keyframes k-toast{from{opacity:0;transform:translate(-50%,14px)}to{opacity:1;transform:translate(-50%,0)}}

/* ---------- 报告页 · 通关奖励样式见 app.css（报告页不加载本文件） ---------- */

/* ---------- 移动端 ---------- */
@media (max-width:640px){
  .k-page{padding:14px 13px 48px}
  .k-hero{flex-direction:column;text-align:center;padding:20px 16px;gap:12px}
  .k-hero .mascot{width:88px;margin:0 auto}
  .k-bullets{display:inline-block;text-align:left}
  .k-hero h1{font-size:22px}
  .k-rewards{grid-template-columns:repeat(2,1fr)}
  .k-stage{padding:14px 13px 36px}
  .k-card{padding:18px 16px;border-radius:22px}
  .k-qtext{font-size:19px}
  .k-opt{font-size:16px;padding:14px 15px}
  .k-guide-mascot .mascot{width:62px}
  .k-nav{flex-direction:column-reverse}
  .k-overlay-box{padding:26px 20px}
}

/* ---------- 无障碍 / 低动效 ---------- */
@media (prefers-reduced-motion:reduce){
  .mascot,.k-card,.k-overlay-box,.k-overlay-emoji,.k-stars.bump,.k-toast{animation:none!important}
  .k-btn,.k-opt,.k-bar-fill{transition:none!important}
}
.k-btn:focus-visible,.k-opt:focus-visible,.k-top-back:focus-visible{
  outline:3px solid var(--k-accent-d);outline-offset:2px
}

/* ============================================================
   背景场景装饰（.k-scene）
   纯 CSS 动画 + 内联 SVG，无外部素材；只做氛围，不承载信息
   ============================================================ */
.k-scene{
  position:fixed;inset:0;z-index:0;overflow:hidden;
  pointer-events:none;user-select:none;
  /* 背景渐变放在这里（fixed 定位，iOS 也稳定），body 只留纯色底 */
  background:
    radial-gradient(1100px 520px at 50% -180px, var(--k-accent-l), transparent 70%),
    linear-gradient(180deg, var(--k-bg1), var(--k-bg2));
}
.k-shell{position:relative;z-index:1}
.k-deco{
  position:absolute;display:block;line-height:0;
  opacity:.9;will-change:transform;
  animation:k-drift 9s ease-in-out infinite;
}
.k-svg{width:100%;height:auto;display:block}
.k-scene-subtle .k-deco{opacity:.42}
.k-scene-subtle{filter:saturate(.75)}

.k-deco-sun{animation:k-breathe 7s ease-in-out infinite}
.k-deco-cloud{animation:k-drift 13s ease-in-out infinite}
.k-deco-rainbow{animation:k-breathe 9s ease-in-out infinite;opacity:.7}
.k-deco-leaf{animation:k-sway 8s ease-in-out infinite}
.k-deco-butterfly{animation:k-flit 7.5s ease-in-out infinite}
.k-deco-moon{animation:k-breathe 8s ease-in-out infinite}
.k-deco-planet{animation:k-drift 15s ease-in-out infinite}
.k-deco-star{animation:k-twinkle 3.6s ease-in-out infinite}
.k-deco-rocket{animation:k-rise 11s ease-in-out infinite}
.k-deco-balloon{animation:k-rise 12s ease-in-out infinite}
.k-deco-bubble{animation:k-rise 10s ease-in-out infinite;opacity:.65}

@keyframes k-drift{0%,100%{transform:translate(0,0)}50%{transform:translate(14px,-10px)}}
@keyframes k-breathe{0%,100%{transform:scale(1) rotate(0)}50%{transform:scale(1.07) rotate(6deg)}}
@keyframes k-sway{0%,100%{transform:rotate(-7deg)}50%{transform:rotate(7deg)}}
@keyframes k-flit{
  0%,100%{transform:translate(0,0) rotate(-6deg)}
  33%{transform:translate(18px,-16px) rotate(6deg)}
  66%{transform:translate(-10px,-26px) rotate(-4deg)}
}
@keyframes k-twinkle{0%,100%{opacity:.35;transform:scale(.82)}50%{opacity:1;transform:scale(1.12)}}
@keyframes k-rise{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-24px) rotate(5deg)}}

/* ============================================================
   音效开关（默认隐藏，JS 启用 WebAudio 后才显示）
   ============================================================ */
.k-sound{
  position:fixed;right:14px;bottom:14px;z-index:55;
  width:46px;height:46px;border-radius:50%;
  border:1px solid var(--k-line);background:rgba(255,255,255,.9);
  backdrop-filter:blur(8px);cursor:pointer;
  display:grid;place-items:center;font-size:19px;line-height:1;
  box-shadow:0 6px 18px rgba(120,95,50,.14);
  transition:transform .15s,box-shadow .15s;
}
.k-sound[hidden]{display:none}
.k-sound:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(120,95,50,.2)}
.k-sound:active{transform:translateY(0)}
.k-sound .k-sound-off{display:none}
.k-sound.muted .k-sound-on{display:none}
.k-sound.muted .k-sound-off{display:inline}
.k-sound:focus-visible{outline:3px solid var(--k-accent-d);outline-offset:2px}

/* ============================================================
   作答页增强
   ============================================================ */
/* 关卡进度点：完成的点上色并微微跳动 */
.k-dots i.done{animation:k-dot-in .3s ease-out}
@keyframes k-dot-in{0%{transform:scaleX(.4)}60%{transform:scaleX(1.15)}100%{transform:scaleX(1)}}

/* 卡片：答对（已选）时轻微高亮，选项选中时有一圈脉冲 */
.k-card{position:relative;overflow:hidden}
.k-card::before{
  content:"";position:absolute;inset:-40% -60% auto auto;width:180px;height:180px;
  background:radial-gradient(circle,var(--k-accent-l),transparent 68%);
  opacity:.55;pointer-events:none;
}
.k-opt.on{animation:k-opt-pulse .42s ease-out}
@keyframes k-opt-pulse{
  0%{box-shadow:0 0 0 0 var(--k-ring)}
  60%{box-shadow:0 0 0 9px rgba(255,255,255,0)}
  100%{box-shadow:0 0 0 4px var(--k-ring)}
}
.k-opt-dots span{transition:background .2s,transform .2s}
.k-opt.on .k-opt-dots span{transform:scale(1.15)}
.k-opt-mark{transform:scale(.6);transition:opacity .15s,transform .2s}
.k-opt.on .k-opt-mark{transform:scale(1)}

/* 星星计数：拿分时闪一下金光 */
.k-stars.bump{animation:k-pop .45s ease-out,k-star-glow .8s ease-out}
@keyframes k-star-glow{
  0%{box-shadow:0 0 0 0 rgba(255,190,60,.55)}
  100%{box-shadow:0 0 0 16px rgba(255,190,60,0)}
}

/* 通关浮层：加一圈会呼吸的光环 + 彩带 */
.k-overlay-box{position:relative;overflow:hidden}
.k-overlay-box::after{
  content:"";position:absolute;inset:-60% -10% auto;height:200px;
  background:radial-gradient(circle at 50% 100%,var(--k-accent-l),transparent 70%);
  opacity:.8;pointer-events:none;
}

/* 彩带粒子（通关时由 JS 生成） */
.k-confetti{position:fixed;inset:0;z-index:75;pointer-events:none;overflow:hidden}
.k-confetti i{
  position:absolute;top:-14px;width:9px;height:14px;border-radius:2px;
  animation:k-fall linear forwards;
}
@keyframes k-fall{
  0%{opacity:0;transform:translateY(0) rotate(0)}
  8%{opacity:1}
  100%{opacity:0;transform:translateY(102vh) rotate(var(--rot,540deg))}
}

/* 点击时的小星花（选项按钮） */
.k-spark-burst{position:fixed;inset:0;z-index:72;pointer-events:none;overflow:hidden}
.k-spark-burst i{
  position:absolute;width:8px;height:8px;border-radius:50%;
  animation:k-burst .62s ease-out forwards;
}
@keyframes k-burst{
  0%{opacity:1;transform:translate(0,0) scale(.4)}
  100%{opacity:0;transform:translate(var(--bx),var(--by)) scale(1.15)}
}

/* ============================================================
   说明页增强：奖励卡片悬浮、面板入场
   ============================================================ */
.k-hero,.k-panel,.k-parent{animation:k-rise-in .5s ease-out both}
.k-panel:nth-of-type(2){animation-delay:.07s}
.k-panel:nth-of-type(3){animation-delay:.14s}
.k-parent{animation-delay:.2s}
@keyframes k-rise-in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.k-reward-item{transition:transform .18s,box-shadow .18s,border-color .18s}
.k-reward-item:hover{
  transform:translateY(-4px);border-color:var(--k-accent);
  box-shadow:0 10px 22px rgba(180,140,60,.16)
}
.k-reward-ico{animation:k-breathe 3.6s ease-in-out infinite;display:inline-block}

/* 开始按钮：呼吸光晕，吸引点击 */
.k-start .k-btn-big{position:relative;overflow:hidden}
.k-start .k-btn-big::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.42),transparent 70%);
  background-size:220% 100%;animation:k-btn-sheen 3.2s ease-in-out infinite;
}
@keyframes k-btn-sheen{0%{background-position:-60% 0}55%,100%{background-position:160% 0}}

/* ============================================================
   低动效 & 小屏
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  .k-deco,.k-deco *,.k-reward-ico,.k-bar-fill,.k-bar-fill::after,
  .k-start .k-btn-big::after,.m-tip-glow,.m-lid,.m-pupil,.m-hand-l,.m-hand-r,
  .m-shadow,.k-dots i.done,.k-opt.on,.k-stars.bump,.k-hero,.k-panel,.k-parent{
    animation:none!important
  }
  .k-lid{height:0!important}
  .k-confetti,.k-spark-burst{display:none!important}
  .k-reward-item:hover{transform:none}
}
@media (max-width:640px){
  .k-deco{opacity:.72}
  .k-scene-subtle .k-deco{opacity:.34}
  .k-sound{width:42px;height:42px;font-size:17px;right:11px;bottom:11px}
}

/* ---------- 与全站增强层（ui.js）共存 ---------- */
/* 儿童页右下角已有音效开关，把「回到顶部」上移，避免叠在一起 */
.kids-body .zy-backtop{bottom:70px;right:14px;width:42px;height:42px}
.kids-body .zy-backtop{color:var(--k-accent-d);border-color:var(--k-line)}
.kids-body .zy-backtop:hover{box-shadow:0 12px 26px rgba(150,110,40,.24)}
.kids-body .zy-toast{
  background:rgba(45,38,30,.94);bottom:78px;
  font-size:15.5px
}
@media (max-width:640px){
  .kids-body .zy-backtop{bottom:64px;right:11px;width:40px;height:40px}
}