/* ===== level.css · 宇宙星河4段关卡流 ===== */

/* —— 全屏关卡覆盖层 —— */
.level-overlay {
  position: fixed; inset: 0; z-index: 60;
  background: var(--bg);
  background-image:
    radial-gradient(ellipse at 20% 15%, rgba(124, 58, 237, 0.25) 0%, transparent 40%),
    radial-gradient(ellipse at 80% 85%, rgba(236, 72, 153, 0.18) 0%, transparent 40%),
    radial-gradient(ellipse at 50% 50%, rgba(59, 130, 246, 0.12) 0%, transparent 60%);
  display: flex; flex-direction: column;
  animation: lvlIn .3s ease;
}
@keyframes lvlIn { from { opacity: 0; transform: scale(.98); } to { opacity: 1; transform: scale(1); } }

/* —— 顶部进度条 —— */
.level-bar {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 20px;
  background: rgba(10, 4, 32, 0.7);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 4px 16px rgba(0,0,0,0.3);
  flex-shrink: 0;
}
.level-exit {
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--bg-card); border: 1px solid var(--line);
  font-size: 16px; color: var(--ink-soft);
  display: grid; place-items: center;
  transition: transform .12s, background .12s, color .12s;
}
.level-exit:hover { transform: scale(1.1); background: #ff7a8a; color: #fff; border-color: #ff7a8a; }

.level-skip {
  padding: 7px 14px; border-radius: 999px;
  background: var(--brand-soft); color: var(--brand);
  font-size: 13px; font-weight: 800; border: 1px solid var(--line);
  transition: transform .12s, background .12s;
  white-space: nowrap;
}
.level-skip:hover { transform: scale(1.05); background: var(--brand); color: #fff; box-shadow: 0 0 12px var(--brand); }

/* v185：反馈入口（只在「小课堂 / 大挑战」两阶段显示）。
   挂在工具栏里而不是做全屏悬浮球 —— 关卡 overlay 是全屏的（z-index 60），
   浮球要能点就必须压过它，必然挡住进度条 / 跳过按钮；挂这里零层级改动。 */
.level-fb {
  width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0;
  background: var(--bg-card); border: 1px solid var(--line);
  font-size: 16px; color: var(--ink-soft);
  display: grid; place-items: center;
  transition: transform .12s, background .12s, color .12s;
}
.level-fb:hover { transform: scale(1.1); background: var(--brand-soft); border-color: var(--brand); }

.level-progress { display: flex; align-items: center; gap: 8px; flex: 1; justify-content: center; }
.lp-step { display: flex; align-items: center; gap: 6px; opacity: .35; transition: opacity .25s; }
.lp-step.active { opacity: 1; }
.lp-step.done { opacity: .7; }
.lp-dot {
  width: 32px; height: 32px; border-radius: 50%;
  display: grid; place-items: center; font-size: 16px;
  background: var(--bg-card); border: 1px solid var(--line-strong);
  transition: all .25s;
}
.lp-step.active .lp-dot { background: var(--brand-soft); border-color: var(--brand); transform: scale(1.15); animation: glow-pulse 2s ease-in-out infinite; box-shadow: 0 0 12px var(--brand); }
.lp-step.done .lp-dot { background: var(--ok-soft); border-color: #4ade80; box-shadow: 0 0 8px var(--ok-soft); }
.lp-label { font-size: 13px; font-weight: 800; color: var(--ink-soft); }
.lp-step.active .lp-label { color: var(--brand); text-shadow: 0 0 8px var(--brand); }
.lp-step:not(:last-child)::after { content: '→'; margin-left: 6px; color: var(--ink-faint); font-size: 13px; }

.level-title { font-weight: 800; font-size: 15px; color: var(--ink); white-space: nowrap; max-width: 120px; overflow: hidden; text-overflow: ellipsis; }

/* —— 关卡主体 —— */
.level-body { flex: 1; overflow-y: auto; display: flex; flex-direction: column; }
/* v186：视频阶段下方多了一排外置控制条（~58px），stage 相应让出这段高度 ——
   否则 wrap 总高会超出 level-body，把控制条挤到滚动区外面去。
   为什么不把控制条塞进 stage 里？stage 是 overflow:hidden 的 16:9 盒子：
   塞进去会被裁掉，或者得压在原生控件上、两套控件打成一团。 */
.cartoon-video-wrap { flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 8px 16px 14px; }
.cartoon-video-stage { width: 100%; max-width: calc((100vh - 170px) * 16 / 9); aspect-ratio: 16/9; margin: 0 auto; min-height: auto; max-height: calc(100vh - 170px); display: flex; align-items: center; justify-content: center; background: #05020f; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); border: 1px solid var(--line-strong); }
.cartoon-video { width: 100%; height: 100%; object-fit: contain; background: #000; }

/* ===== 动画阶段 ===== */
.anim-stage {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 24px; max-width: 640px; margin: 0 auto; width: 100%; text-align: center;
}

/* ===== 卡通动画阶段（AI 生图）===== */
.cartoon-stage {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 16px; max-width: 680px; margin: 0 auto; width: 100%;
}
.cartoon-scene-wrap { width: 100%; min-height: 460px; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); border: 1px solid var(--line-strong); }
.cartoon-bg { position: relative; width: 100%; height: 460px; overflow: hidden; background: linear-gradient(180deg, #1a0d3a 0%, #3a206e 50%, #1a0d3a 100%); }
.cartoon-bg::before {
  content: ''; position: absolute; inset: 0;
  background-image:
    radial-gradient(1px 1px at 20% 30%, white, transparent),
    radial-gradient(1px 1px at 60% 20%, rgba(255,255,255,0.8), transparent),
    radial-gradient(1.5px 1.5px at 80% 60%, white, transparent),
    radial-gradient(1px 1px at 30% 80%, rgba(255,255,255,0.6), transparent),
    radial-gradient(1.5px 1.5px at 90% 30%, rgba(255, 216, 102, 0.8), transparent);
  pointer-events: none;
}
.cartoon-ground { position: absolute; bottom: 0; left: 0; right: 0; height: 60px; background: linear-gradient(180deg, transparent, rgba(124,58,237,0.4)); border-top: 2px solid rgba(183,148,255,0.5); box-shadow: 0 -8px 20px rgba(183,148,255,0.2); }
/* —— 动画为主、守护兽为侧边固定讲解员（主次分明，不挡动画）—— */
.cartoon-layout { display: flex; gap: 16px; width: 100%; align-items: stretch; }
.cartoon-main { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; }

.cartoon-host {
  width: 210px; flex-shrink: 0;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  background:
    radial-gradient(ellipse at 18% 12%, rgba(255, 222, 178, 0.85) 0%, transparent 55%),
    radial-gradient(ellipse at 82% 88%, rgba(196, 228, 255, 0.75) 0%, transparent 55%),
    linear-gradient(135deg, #fff8eb 0%, #fdf3e2 100%);
  border: 2.5px solid #5eead4;
  border-radius: 24px; padding: 18px 14px;
  box-shadow: 0 0 0 4px rgba(94, 234, 212, 0.12), 0 0 0 6px rgba(255, 255, 255, 0.35), 0 14px 40px rgba(255, 180, 100, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.7);
  color: #4a3520;
}
.cartoon-host-avatar {
  width: 118px; height: 150px; display: grid; place-items: center;
  filter: drop-shadow(0 0 18px rgba(183, 148, 255, 0.6));
  animation: floaty 2.5s ease-in-out infinite;
}
.cartoon-host-avatar svg, .cartoon-host-avatar .zodiac-img { width: 100% !important; height: 100% !important; object-fit: contain; }
.cartoon-host-name { font-size: 14px; font-weight: 800; color: #5a3a7a; letter-spacing: 1px; text-shadow: 0 1px 0 rgba(255,255,255,.6); }
.cartoon-host-bubble {
  width: 100%; min-height: 72px;
  background: rgba(183, 148, 255, 0.35); border: 1px solid #b794ff;
  border-radius: 14px; padding: 10px 14px;
  font-size: 14px; font-weight: 700; line-height: 1.55; text-align: left; color: #3a1f5e;
  text-shadow: 0 1px 0 rgba(255,255,255,.55);
}
.cartoon-host-bubble.pop { animation: hostBubblePop .35s ease; }
@keyframes hostBubblePop { 0%{transform:scale(.94);opacity:.5} 100%{transform:scale(1);opacity:1} }

.cartoon-objects { position: absolute; bottom: 50px; left: 50%; transform: translateX(-50%); display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; max-width: 400px; z-index: 3; }
.cartoon-obj { width: 40px; height: 44px; filter: drop-shadow(0 0 6px rgba(255,255,255,0.3)); }
.cartoon-obj svg { width: 100%; height: 100%; }
.cartoon-obj.bounceIn { animation: objBounce 0.5s ease both; }
.cartoon-obj.slideIn { animation: objSlide 0.5s ease both; }
@keyframes objBounce { 0%{transform:translateY(-60px) scale(0);opacity:0} 60%{transform:translateY(8px) scale(1.2)} 100%{transform:translateY(0) scale(1);opacity:1} }
@keyframes objSlide { 0%{transform:translateX(80px);opacity:0} 100%{transform:translateX(0);opacity:1} }

.cartoon-numbers { position: absolute; top: 30px; left: 50%; transform: translateX(-50%); display: flex; gap: 12px; z-index: 4; }
.cartoon-num { font-size: 42px; font-weight: 900; color: #ffd866; text-shadow: 0 0 20px rgba(255, 216, 102, 0.8), 0 0 40px rgba(255, 216, 102, 0.4); }

.cartoon-bubble { position: absolute; top: -50px; background: var(--bg-card); border: 2px solid var(--brand); border-radius: 18px 18px 18px 6px; padding: 10px 18px; font-size: 16px; font-weight: 800; color: var(--ink); backdrop-filter: blur(8px); box-shadow: 0 0 20px var(--brand-soft); max-width: 240px; white-space: nowrap; z-index: 6; }
.cartoon-bubble.left { border-radius: 18px 18px 6px 18px; left: auto; right: 130px; }
.cartoon-bubble.right { left: 130px; }
.cartoon-bubble::after { content: ''; position: absolute; bottom: -10px; width: 0; height: 0; border: 8px solid transparent; border-top-color: var(--brand); }
.cartoon-bubble.right::after { left: 20px; }
.cartoon-bubble.left::after { right: 20px; }

.cartoon-caption { position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%); background: rgba(10, 4, 32, 0.85); color: #fff; padding: 6px 16px; border-radius: 999px; font-size: 14px; font-weight: 700; white-space: nowrap; z-index: 7; border: 1px solid var(--line); }

.cartoon-dots { display: flex; gap: 8px; margin: 14px 0; }
.cartoon-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--line-strong); transition: all .2s; }
.cartoon-dot.active { background: var(--brand); width: 24px; border-radius: 4px; }
.cartoon-controls { display: flex; gap: 12px; }
.anim-title { font-size: 14px; font-weight: 800; color: var(--brand); margin-bottom: 20px; letter-spacing: 1px; }
.anim-scene-wrap { flex: 1; display: flex; align-items: center; justify-content: center; width: 100%; min-height: 240px; }
.anim-scene { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.anim-emoji { font-size: 64px; line-height: 1.2; }
.anim-text { font-size: 20px; font-weight: 700; line-height: 1.6; color: var(--ink); }
.anim-sub { font-size: 14px; }

.anim-scene.anim-fadeIn { animation: animFade .5s ease; }
.anim-scene.anim-slideIn { animation: animSlide .5s ease; }
.anim-scene.anim-bounce { animation: animBounce .6s ease; }
.anim-scene.anim-merge { animation: animMerge .6s ease; }
.anim-scene.anim-pop { animation: pop .5s ease; }
@keyframes animFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes animSlide { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: translateX(0); } }
@keyframes animBounce { 0% { opacity: 0; transform: scale(.3); } 60% { transform: scale(1.15); } 100% { opacity: 1; transform: scale(1); } }
@keyframes animMerge { 0% { opacity: 0; transform: scale(.5) translateY(-20px); } 100% { opacity: 1; transform: scale(1) translateY(0); } }

.anim-dots { display: flex; gap: 8px; margin: 16px 0; }
.anim-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--line-strong); transition: all .2s; }
.anim-dot.active { background: var(--brand); width: 24px; border-radius: 4px; }

.anim-controls { display: flex; gap: 12px; margin-top: 16px; }

/* ===== 实验阶段 ===== */
.exp-counting, .exp-placeholder {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 24px; text-align: center; gap: 16px;
}
.exp-prompt { font-size: 20px; font-weight: 800; color: var(--ink); }
.exp-scene { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; justify-content: center; }
.exp-group { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; max-width: 200px; }
.exp-divider { font-size: 32px; font-weight: 800; color: var(--ink-faint); }
.exp-block { width: 44px; height: 44px; cursor: pointer; transition: transform .15s; }
.exp-block:hover { transform: scale(1.1); }
.exp-block svg { width: 100%; height: 100%; }
.exp-block.counted svg rect { opacity: 1; }
.exp-block.counted { animation: pop .2s ease; }
.exp-hint { font-size: 15px; font-weight: 600; min-height: 24px; }
.exp-merge-btn { margin-top: 8px; }
.exp-placeholder h3 { font-size: 20px; }
.exp-placeholder .muted { font-size: 14px; max-width: 320px; }

/* —— 分饼干教具（除法）—— */
.exp-cookie { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 18px; padding: 24px; width: 100%; }
.cookie-prediction { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.pred-btn {
  width: 56px; height: 56px; border-radius: 50%; background: var(--bg-soft);
  border: 2.5px solid var(--line-strong); font-size: 22px; font-weight: 800; color: var(--ink);
  transition: transform .15s, border-color .15s, background .15s;
}
.pred-btn:hover:not(:disabled) { transform: scale(1.12); border-color: var(--brand); background: var(--brand-soft); }
.pred-btn.correct { background: var(--ok); border-color: var(--ok); color: #fff; animation: pop .4s ease; }
.pred-btn.shake { animation: qShake .4s ease; border-color: var(--warn); }
.cookie-scene { display: flex; flex-direction: column; align-items: center; gap: 24px; width: 100%; }
.cookie-pool {
  display: flex; flex-wrap: wrap; gap: 8px; justify-content: center;
  padding: 16px; background: var(--bg-soft); border: 2.5px dashed var(--line-strong);
  border-radius: var(--radius); max-width: 480px; min-height: 80px;
}
.cookie { font-size: 32px; cursor: grab; user-select: none; transition: transform .15s; }
.cookie:hover { transform: scale(1.2) rotate(-8deg); }
.cookie.dragging { opacity: 0.4; cursor: grabbing; }
.cookie-plates { display: flex; gap: 18px; flex-wrap: wrap; justify-content: center; }
.plate {
  width: 110px; min-height: 90px; padding: 8px; border-radius: 50% 50% 45% 45% / 30% 30% 60% 60%;
  background: var(--brand-soft); border: 2.5px solid var(--brand);
  display: flex; flex-direction: column; align-items: center; gap: 4px; transition: all .15s;
  position: relative;
}
.plate.over { background: var(--brand); transform: scale(1.05); }
.plate.over .plate-label { color: #fff; }
.plate-label { font-size: 12px; font-weight: 800; color: var(--brand); }
.plate-content { display: flex; flex-wrap: wrap; gap: 2px; justify-content: center; }
.plate-content .cookie { font-size: 20px; }

/* ===== 答题阶段 ===== */
.quiz-stage {
  flex: 1; display: flex; flex-direction: column;
  max-width: 560px; margin: 0 auto; width: 100%; padding: 20px;
}
.quiz-progress { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.quiz-bar { flex: 1; height: 10px; background: var(--bg); border-radius: 999px; overflow: hidden; border: 1px solid var(--line); }
.quiz-bar-fill { height: 100%; background: linear-gradient(90deg, var(--brand), var(--ok)); border-radius: 999px; transition: width .4s ease; width: 0; }
.quiz-count { font-size: 14px; font-weight: 700; color: var(--ink-soft); white-space: nowrap; }

.q-card {
  position: relative;
  background:
    radial-gradient(ellipse at 18% 12%, rgba(255, 222, 178, 0.85) 0%, transparent 55%),
    radial-gradient(ellipse at 82% 88%, rgba(196, 228, 255, 0.75) 0%, transparent 55%),
    linear-gradient(135deg, #fff8eb 0%, #fdf3e2 50%, #fef6ea 100%);
  border: 2.5px solid #5eead4;
  border-radius: 28px; padding: 28px 24px;
  box-shadow: 0 0 0 4px rgba(94, 234, 212, 0.12), 0 0 0 6px rgba(255, 255, 255, 0.35), 0 14px 40px rgba(255, 180, 100, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.7);
  display: flex; flex-direction: column; gap: 18px;
  animation: pop .3s ease;
  color: #4a3520;
}
.q-visual { font-size: 32px; text-align: center; padding: 12px; background: linear-gradient(135deg, #fff8eb 0%, #fef0d8 100%); border-radius: 16px; border: 1.5px solid rgba(94, 234, 212, 0.45); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7); }
.q-prompt { font-size: 24px; font-weight: 800; text-align: center; color: #3a2818; text-shadow: 0 0 14px rgba(255, 216, 102, 0.4); }
.q-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); gap: 12px; }
.q-opt {
  padding: 18px 12px; border-radius: 16px;
  background: linear-gradient(135deg, #fff8eb 0%, #fef0d8 100%);
  border: 1.5px solid rgba(94, 234, 212, 0.5);
  font-size: 22px; font-weight: 800; color: #3a2818;
  min-height: var(--tap); transition: all .15s;
  box-shadow: 0 4px 14px rgba(255, 180, 100, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.7);
}
.q-opt:hover:not(:disabled) { border-color: #5eead4; background: linear-gradient(135deg, #fff3d6 0%, #ffe8c4 100%); transform: translateY(-2px); box-shadow: 0 0 16px rgba(94, 234, 212, 0.4); color: #3a2818; }
.q-opt.correct { background: linear-gradient(135deg, #4ade80, #22c55e); border-color: #4ade80; color: #1a0d3a; animation: pop .3s ease; box-shadow: 0 0 20px var(--ok-soft); }
.q-opt.shake { animation: qShake .4s ease; border-color: #fbbf24; }
@keyframes qShake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-8px)} 75%{transform:translateX(8px)} }

.q-feedback { min-height: 32px; text-align: center; }
.q-correct { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 18px; font-weight: 800; color: #4ade80; animation: pop .3s ease; text-shadow: 0 0 12px var(--ok-soft); }
.q-celebrate { font-size: 28px; }

/* 宠物本体弹出 + 气泡夸奖 */
.q-praise-popup { display: flex; align-items: flex-end; justify-content: center; gap: 8px; animation: praisePop .4s ease; }
@keyframes praisePop { 0%{transform:translateY(40px) scale(0.5);opacity:0} 60%{transform:translateY(-4px) scale(1.1)} 100%{transform:translateY(0) scale(1);opacity:1} }
.q-praise-bubble {
  position: relative; background: var(--bg-card); border: 1px solid var(--brand);
  border-radius: 16px 16px 16px 4px; padding: 10px 16px;
  font-size: 16px; font-weight: 800; color: var(--ink);
  backdrop-filter: blur(8px);
  box-shadow: 0 0 20px var(--brand-soft); max-width: 220px; text-align: left;
}
.q-praise-bubble::after {
  content: ''; position: absolute; bottom: 8px; right: -10px;
  width: 0; height: 0; border: 8px solid transparent; border-left-color: var(--brand);
}
.q-praise-avatar { animation: floaty 2s ease-in-out infinite; flex-shrink: 0; }
.q-praise-avatar svg, .q-praise-avatar .zodiac-img { width: 80px !important; height: 80px !important; }
.q-soft-hint { font-size: 15px; color: #fbbf24; font-weight: 600; }
.q-hint { font-size: 14px; color: var(--ink-soft); background: var(--brand-soft); padding: 10px 14px; border-radius: var(--radius-sm); border: 1px solid var(--line); }

.q-actions { display: flex; justify-content: center; }
.q-hint-btn { font-size: 14px; }

/* ===== v177：AI 重练专用「📖 讲解」按钮（主关卡流程不渲染） ===== */
/* 按钮与题干同排，题干占满剩余宽度；答题后 .q-actions 整块重写也不影响它 */
.q-prompt-row { display: flex; align-items: flex-start; gap: 10px; }
.q-prompt-row .q-prompt { flex: 1; margin: 0; }
.q-explain-btn {
  flex: none; align-self: flex-start;
  padding: 6px 12px; border-radius: 999px;
  border: 1.5px solid rgba(125, 95, 255, 0.45);
  background: rgba(125, 95, 255, 0.1);
  color: #5b3ec0; font-size: 13px; font-weight: 800;
  cursor: pointer; white-space: nowrap;
  transition: transform 0.12s, background 0.15s;
}
.q-explain-btn:hover { background: rgba(125, 95, 255, 0.18); }
.q-explain-btn:active { transform: scale(0.96); }
.q-explain-btn.is-open { background: rgba(125, 95, 255, 0.22); }
.q-explain-box {
  margin-top: 10px; padding: 12px 14px;
  border-radius: var(--radius-sm);
  background: rgba(125, 95, 255, 0.09);
  border: 1.5px solid rgba(125, 95, 255, 0.28);
  color: #4a3a7a; font-size: 14px; line-height: 1.7; text-align: left;
}
.q-explain-box[hidden] { display: none; }

/* ===== 结算阶段 ===== */
.settle-stage {
  flex: 1; display: flex; align-items: center; justify-content: center;
  padding: 24px; position: relative; overflow: hidden;
}
.settle-card {
  position: relative;
  background:
    radial-gradient(ellipse at 18% 12%, rgba(255, 222, 178, 0.85) 0%, transparent 55%),
    radial-gradient(ellipse at 82% 88%, rgba(196, 228, 255, 0.75) 0%, transparent 55%),
    linear-gradient(135deg, #fff8eb 0%, #fdf3e2 50%, #fef6ea 100%);
  border: 2.5px solid #5eead4;
  border-radius: 28px; padding: 36px 32px;
  max-width: 420px; width: 100%; text-align: center;
  box-shadow: 0 0 0 4px rgba(94, 234, 212, 0.12), 0 0 0 6px rgba(255, 255, 255, 0.35), 0 14px 40px rgba(255, 180, 100, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.7);
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  animation: pop .4s ease;
  color: #4a3520;
}
.settle-emoji { font-size: 56px; animation: floaty 2s ease-in-out infinite; filter: drop-shadow(0 0 20px rgba(255, 216, 102, 0.6)); }
.settle-title { font-size: 26px; font-weight: 800; color: #3a2818; text-shadow: 0 0 16px rgba(255, 216, 102, 0.5); }
.settle-concept { font-size: 15px; color: #7a6048; }

.settle-stars { display: flex; gap: 12px; margin: 8px 0; }
.settle-star { font-size: 48px; color: var(--line-strong); transition: all .3s; }
.settle-star.on { color: #ffd866; text-shadow: 0 0 20px rgba(255, 216, 102, 0.8); }
.settle-star.pop { animation: starPop .5s ease; }
@keyframes starPop { 0%{transform:scale(0) rotate(-180deg)} 60%{transform:scale(1.3) rotate(10deg)} 100%{transform:scale(1) rotate(0)} }

.settle-score { display: flex; align-items: baseline; gap: 4px; }
.settle-score-num { font-size: 42px; font-weight: 900; color: #d97706; text-shadow: 0 0 18px rgba(255, 184, 102, 0.5); }
.settle-score-label { font-size: 16px; color: #7a6048; }

.settle-rewards { display: flex; gap: 16px; margin: 4px 0; }
.settle-reward { display: flex; align-items: center; gap: 4px; font-size: 15px; font-weight: 700; color: #7a6048; background: linear-gradient(135deg, #fff8eb 0%, #fef0d8 100%); padding: 8px 14px; border-radius: 999px; border: 1.5px solid rgba(94, 234, 212, 0.45); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7); }

.settle-detail { font-size: 13px; }
.settle-concept-msg { font-size: 15px; font-weight: 700; color: #4ade80; padding: 10px 16px; background: var(--ok-soft); border-radius: var(--radius-sm); border: 1px solid rgba(74, 222, 128, 0.3); }

.settle-actions { display: flex; gap: 10px; margin-top: 8px; flex-wrap: wrap; justify-content: center; }
.settle-actions .btn { flex: 1; min-width: 100px; }

/* 撒花 */
.confetti { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.confetti-piece {
  position: absolute; top: -10px; width: 10px; height: 14px; border-radius: 2px;
  animation: confettiFall linear forwards;
}
@keyframes confettiFall { to { transform: translateY(100vh) rotate(720deg); opacity: 0; } }

/* —— 响应式 —— */
@media (max-width: 560px) {
  .level-bar { padding: 10px 12px; gap: 8px; }
  .lp-label { display: none; }
  .lp-dot { width: 22px; height: 22px; font-size: 11px; }
  .level-title { font-size: 13px; max-width: 80px; overflow: hidden; text-overflow: ellipsis; }
  .anim-emoji { font-size: 48px; }
  .anim-text { font-size: 17px; }
  .q-prompt { font-size: 20px; }
  .q-opt { font-size: 18px; padding: 14px 8px; }
  .settle-card { padding: 28px 20px; }
  .settle-star { font-size: 40px; }
  .settle-score-num { font-size: 36px; }
  .cartoon-scene-wrap { min-height: 360px; }
  .cartoon-bg { height: 360px; }
  .cartoon-layout { flex-direction: column; }
  .cartoon-host { width: 100%; flex-direction: row; align-items: center; padding: 12px 16px; gap: 14px; }
  .cartoon-host-avatar { width: 64px; height: 80px; flex-shrink: 0; }
  .cartoon-host-name { display: none; }
  .cartoon-host-bubble { min-height: 0; font-size: 13px; }
}