/* 游戏引擎 · 浅色主题样式 */
.gm-hud{display:flex;justify-content:space-between;gap:10px;margin-bottom:14px;flex-wrap:wrap}
.gm-pill{background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:7px 18px;font-size:13px;color:var(--muted);box-shadow:var(--shadow-sm)}
.gm-pill b{color:var(--brand);font-size:18px;margin-left:6px}
.gm-card{
  background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r-xl);
  padding:28px;box-shadow:var(--shadow);transition:.3s;position:relative;
}
.gm-card.shake{animation:gmshake .45s}
@keyframes gmshake{0%,100%{transform:translateX(0)}20%{transform:translateX(-10px)}40%{transform:translateX(9px)}60%{transform:translateX(-6px)}80%{transform:translateX(4px)}}
.gm-tag{font-size:12px;letter-spacing:2px;color:var(--brand);font-weight:700;margin-bottom:12px}
.gm-q{font-size:17.5px;line-height:1.8;color:var(--ink);margin-bottom:18px;font-weight:500}
.gm-opts{display:grid;gap:11px;margin-top:14px}
.gm-opt{
  padding:13px 17px;border-radius:12px;border:1.5px solid var(--line);background:var(--surface-2);
  color:var(--ink-2);font-size:14.5px;cursor:pointer;transition:.18s;text-align:left;font-weight:500;
  position:relative;overflow:hidden;
}
.gm-opt:hover{border-color:var(--brand);transform:translateX(4px);background:var(--brand-50)}
.gm-opt.ok{border-color:var(--green);background:var(--green-100);color:var(--green);font-weight:600;animation:okPulse .8s ease-out}
.gm-opt.no{border-color:var(--rose);background:var(--rose-100);color:var(--rose)}
.gm-explain{margin-top:16px;padding:14px 18px;border-radius:12px;font-size:13.5px;display:none;animation:fadeUp .4s;line-height:1.85}
.gm-explain.ok{display:block;background:var(--green-100);border-left:3px solid var(--green);color:var(--green)}
.gm-explain.no{display:block;background:var(--rose-100);border-left:3px solid var(--rose);color:var(--rose)}
.gm-combo{
  position:fixed;top:84px;right:24px;font-size:26px;font-weight:800;color:var(--amber);
  opacity:0;transform:scale(.6);transition:.25s;z-index:60;text-shadow:0 2px 10px rgba(140,97,15,.35);
  pointer-events:none;
}
.gm-combo.show{opacity:1;transform:scale(1);animation:comboPop .55s cubic-bezier(.34,1.56,.64,1)}
/* match */
.gm-match{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:10px}
.gm-mitem{
  padding:12px 15px;border-radius:11px;border:1.5px solid var(--line);background:var(--surface-2);
  font-size:13.5px;color:var(--ink-2);cursor:pointer;transition:.18s;user-select:none;margin-bottom:9px;
}
.gm-mitem:hover{border-color:var(--brand-500)}
.gm-mitem.sel{border-color:var(--brand);background:var(--brand-100);color:var(--brand-600);font-weight:600;animation:selGlow 1s ease-in-out infinite}
.gm-mitem.done{border-color:var(--green);background:var(--green-100);color:var(--green);cursor:default;opacity:.85}
.gm-mitem.err{animation:gmshake .4s;border-color:var(--rose)}
.gm-col-t{font-size:12px;color:var(--brand);letter-spacing:2px;font-weight:700;margin-bottom:10px}
/* order */
.gm-pool,.gm-seq{display:flex;flex-direction:column;gap:9px;margin-top:10px}
.gm-seq{min-height:56px;border:1.5px dashed var(--line);border-radius:14px;padding:12px;background:var(--surface-2);transition:.2s}
.gm-ocard{
  padding:11px 15px;border-radius:10px;border:1.5px solid var(--line);background:var(--surface);
  font-size:14px;color:var(--ink-2);cursor:pointer;transition:.18s;display:flex;gap:10px;align-items:center;
}
.gm-ocard:hover{border-color:var(--brand-500);transform:translateX(4px)}
.gm-ocard .idx{font-size:12px;color:var(--brand);font-weight:800;min-width:20px}
.gm-seq .gm-ocard{border-color:var(--brand);background:var(--brand-50)}
/* spot */
.gm-spot{line-height:2.15;font-size:15px}
.gm-seg{display:inline;padding:3px 6px;margin:2px;border-radius:8px;border:1px solid transparent;cursor:pointer;transition:.18s}
.gm-seg:hover{background:var(--brand-50);border-color:var(--line)}
.gm-seg.mark{background:var(--amber-100);border-color:var(--amber);color:var(--amber)}
.gm-seg.reveal-ok{background:var(--green-100);border-color:var(--green);color:var(--green)}
.gm-seg.reveal-miss{background:var(--rose-100);border-color:var(--rose);color:var(--rose)}
@media(max-width:640px){.gm-match{grid-template-columns:1fr}.gm-card{padding:20px}}

/* ================= 游戏化动效强化（纯 CSS / canvas / WebAudio，零依赖） ================= */
/* 弹性回弹缓动：spring 感 */
:root{--gm-spring:cubic-bezier(.34,1.56,.64,1);--gm-fly:cubic-bezier(.22,1.2,.36,1)}

/* 元素入场（stagger 弹入，delay 由 JS 内联控制） */
.gm-pop{animation:gmPop .5s var(--gm-spring) both}
@keyframes gmPop{0%{opacity:0;transform:translateY(18px) scale(.92)}100%{opacity:1;transform:none}}

/* 题卡过场：右下飞入 / 左滑退出 */
.gm-card.gm-enter{animation:gmCardIn .55s var(--gm-fly) both}
@keyframes gmCardIn{0%{opacity:0;transform:translateX(80px) translateY(18px) scale(.96)}100%{opacity:1;transform:none}}
.gm-card.gm-exit{animation:gmCardOut .22s ease-in both}
@keyframes gmCardOut{to{opacity:0;transform:translateX(-46px)}}

/* 开始页 → 游戏页 过场 */
.gm-leave-left{animation:gmLeaveLeft .26s ease-in forwards}
@keyframes gmLeaveLeft{to{opacity:0;transform:translateX(-60px) scale(.97)}}
.gm-flyin{animation:gmFlyIn .55s var(--gm-fly) both}
@keyframes gmFlyIn{0%{opacity:0;transform:translateX(70px) translateY(22px)}100%{opacity:1;transform:none}}

/* 答对绿色脉冲 */
@keyframes okPulse{0%{box-shadow:0 0 0 0 rgba(15,123,79,.45)}100%{box-shadow:0 0 0 18px rgba(15,123,79,0)}}
/* 答错红色涟漪 */
.gm-ripple{position:absolute;border-radius:50%;background:rgba(180,35,47,.28);transform:scale(0);animation:gmRipple .55s ease-out forwards;pointer-events:none}
@keyframes gmRipple{to{transform:scale(2.6);opacity:0}}

/* 连击徽章放大弹出 */
@keyframes comboPop{0%{transform:scale(.3) rotate(-8deg)}60%{transform:scale(1.28) rotate(3deg)}100%{transform:scale(1)}}

/* HUD：进度条渐变流动 */
.game-shell .pbar i{
  background:linear-gradient(90deg,var(--brand),var(--cyan),var(--mint),var(--brand));
  background-size:220% 100%;animation:pbarFlow 1.8s linear infinite;
  box-shadow:0 0 8px rgba(36,86,198,.35);
}
@keyframes pbarFlow{to{background-position:-220% 0}}
/* HUD：得分数字跳动 */
#gm-score{display:inline-block}
#gm-score.bump{animation:scoreBump .45s var(--gm-spring)}
@keyframes scoreBump{35%{transform:scale(1.55);color:var(--amber)}100%{transform:scale(1)}}
/* HUD：倒计时最后 5 秒红色脉冲 */
.gm-timer.urgent{border-color:var(--rose);color:var(--rose);animation:urgPulse .5s ease-in-out infinite}
.gm-timer.urgent b{color:var(--rose)}
@keyframes urgPulse{50%{transform:scale(1.12);box-shadow:0 0 0 6px rgba(180,35,47,.14)}}

/* 匹配：发光牵引线 / 选中呼吸 / 吸附弹出 */
.gm-lines{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:5;overflow:visible}
.gm-lines line{stroke:var(--brand);stroke-width:2.5;stroke-linecap:round;stroke-dasharray:6 5;filter:drop-shadow(0 0 4px rgba(36,86,198,.7));animation:lineFlow .6s linear infinite}
.gm-lines line.ok{stroke:var(--green);stroke-dasharray:none;filter:drop-shadow(0 0 7px rgba(15,123,79,.85))}
.gm-lines line.err{stroke:var(--rose);stroke-dasharray:none;filter:drop-shadow(0 0 7px rgba(180,35,47,.85))}
@keyframes lineFlow{to{stroke-dashoffset:-11}}
@keyframes selGlow{50%{box-shadow:0 0 0 5px rgba(36,86,198,.14)}}
.gm-mitem.pop{animation:gmPop .45s var(--gm-spring)}

/* 排序：排序区磁吸高亮 */
.gm-seq.magnet{border-color:var(--brand);background:var(--brand-50);box-shadow:0 0 0 5px rgba(36,86,198,.10)}

/* 全屏彩带画布 */
#gm-fx-canvas{position:fixed;inset:0;pointer-events:none;z-index:80}

/* 结算页：星级 / 盖章 / 数字 */
.r-stars{display:flex;justify-content:center;gap:10px;margin:12px 0 4px}
.r-star{font-size:36px;color:var(--line);transform:scale(.6);transition:.3s;line-height:1}
.r-star.lit{color:var(--amber);animation:starPop .55s var(--gm-spring);text-shadow:0 4px 16px rgba(140,97,15,.45)}
@keyframes starPop{0%{transform:scale(.2) rotate(-32deg)}70%{transform:scale(1.4) rotate(6deg)}100%{transform:scale(1)}}
.r-stamp{
  display:inline-block;margin-top:16px;padding:8px 24px;border:3px solid var(--rose);color:var(--rose);
  border-radius:10px;font-weight:800;font-size:17px;letter-spacing:4px;transform:rotate(-8deg);opacity:0;
}
.r-stamp.in{animation:stampIn .45s var(--gm-spring) forwards}
@keyframes stampIn{0%{opacity:0;transform:rotate(-8deg) scale(2.4)}70%{opacity:1;transform:rotate(-8deg) scale(.92)}100%{opacity:.94;transform:rotate(-8deg) scale(1)}}

/* ================= 新增动画玩法与讲评保底（V2.1） ================= *//* 金币/积分飞入 HUD */
.gm-coinfly{
  position:fixed;z-index:90;pointer-events:none;font-weight:800;font-size:19px;
  color:var(--amber);text-shadow:0 2px 8px rgba(140,97,15,.4);transform:translate(-50%,-50%);
}
/* 答案解析停留 ≥6s 后可跳过 */
.gm-dwell{display:flex;align-items:center;gap:12px;margin-top:12px}
.gm-dwell-cnt{font-size:12px;color:inherit;opacity:.75}
.gm-dwell .btn{pointer-events:auto}
#gm-next.gm-next-ready{animation:okPulse .9s ease-out 2}
/* 幸运转盘 */
.gm-wheel-wrap{position:relative;width:230px;height:230px;margin:14px auto 4px}
.gm-wheel{
  position:absolute;inset:0;border-radius:50%;
  border:6px solid var(--surface);box-shadow:0 12px 30px -10px rgba(16,27,51,.35),inset 0 0 0 2px var(--line);
  will-change:transform;
}
.gm-wseg{
  position:absolute;left:50%;top:50%;width:26px;height:26px;margin:-13px 0 0 -13px;
  display:grid;place-items:center;border-radius:50%;font-family:var(--mono);font-weight:800;font-size:13px;
  background:var(--brand);color:#fff;box-shadow:0 2px 6px rgba(36,86,198,.4);
  transform-origin:center;
}
.gm-wseg.used{background:#C6D3E4;color:#F4F6FA;box-shadow:none}
.gm-wheel-hub{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:56px;height:56px;border-radius:50%;
  display:grid;place-items:center;font-size:26px;background:var(--surface);border:2px solid var(--line);
  box-shadow:0 4px 12px rgba(16,27,51,.25);
}
.gm-wheel-ptr{
  position:absolute;left:50%;top:-14px;transform:translateX(-50%);font-size:24px;color:var(--rose);
  filter:drop-shadow(0 3px 5px rgba(180,35,47,.5));
}
/* 3D 翻牌记忆 */
.gm-mem-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:12px;perspective:900px}
.gm-fcard{position:relative;height:86px;cursor:pointer}
.gm-fcard-in{
  position:absolute;inset:0;transform-style:preserve-3d;
  transition:transform .5s cubic-bezier(.3,.7,.3,1.2);
}
.gm-fcard.flip .gm-fcard-in,.gm-fcard.done .gm-fcard-in{transform:rotateY(180deg)}
.gm-face{
  position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;
  border-radius:12px;display:grid;place-items:center;padding:8px;text-align:center;
  font-size:12.5px;line-height:1.5;
}
.gm-back{
  background:linear-gradient(150deg,var(--brand),#153680);color:rgba(255,255,255,.9);
  font-size:26px;font-weight:800;box-shadow:0 6px 14px -6px rgba(36,86,198,.5);
}
.gm-front{
  transform:rotateY(180deg);background:var(--surface-2);border:1.5px solid var(--line);
  color:var(--ink-2);overflow:hidden;
}
.gm-fcard.done{cursor:default}
.gm-fcard.done .gm-front{border-color:var(--green);background:var(--green-100);color:var(--green);font-weight:600;animation:okPulse .8s ease-out}
.gm-fcard.mismatch .gm-fcard-in{animation:gmshake .4s}
.gm-fcard.mismatch .gm-front{border-color:var(--rose);background:var(--rose-100)}
@media(max-width:640px){
  .gm-mem-grid{grid-template-columns:repeat(3,1fr)}
  .gm-fcard{height:96px}
  .gm-face{font-size:11.5px}
}
@media(max-width:420px){.gm-mem-grid{grid-template-columns:repeat(2,1fr)}.gm-fcard{height:104px}}

/* ================= 动画场景引擎（V2.2）：fish 深海钓金 / runner 跑酷闯关 ================= */
.gm-scene{
  position:relative;
  margin:-8px -8px 14px;border-radius:16px;overflow:hidden;
  border:1.5px solid var(--line);box-shadow:inset 0 2px 10px rgba(16,27,51,.08);
  background:#F2F6FD;display:flex;justify-content:center;
}
.gm-scene canvas{display:block;max-width:100%}
/* 金币雨场景中调速控件：− / ＋ 步进 0.1，右上角悬浮 */
.gm-spd{position:absolute;top:8px;right:8px;display:flex;align-items:center;gap:5px;z-index:2;
  background:rgba(255,255,255,.88);border:1px solid var(--line);border-radius:999px;padding:3px 7px;
  font-size:11px;color:var(--muted);backdrop-filter:blur(4px);box-shadow:0 2px 8px rgba(16,27,51,.12)}
.gm-spd button{width:24px;height:24px;border-radius:50%;border:1px solid var(--line);background:#fff;
  color:var(--brand);font-weight:800;font-size:14px;cursor:pointer;line-height:1;display:grid;place-items:center;padding:0}
.gm-spd button:hover{border-color:var(--brand);background:var(--brand-100,#F2F6FD)}
.gm-spd .gm-spd-val{font-family:var(--mono);font-weight:700;color:var(--brand);min-width:36px;text-align:center}
.gm-scene-hint{font-size:12px;color:var(--faint);margin:-6px 0 4px;letter-spacing:.5px}
@media(max-width:640px){.gm-scene{margin:-4px -4px 12px;border-radius:12px}}