/* 数学修仙传 style.css（设计文档 v4.0 第二十四~二十五节）——M1+M2 */
:root{
  --green:#58cc02; --green-dark:#46a302; --green-light:#d7ffb8;
  --blue:#1cb0f6; --blue-dark:#1899d6;
  --red:#ff4b4b; --red-light:#ffdfe0;
  --yellow:#ffc800; --purple:#ce82ff;
  --gray:#f7f7f7; --gray-border:#e5e5e5; --gray-text:#777; --ink:#4b4b4b; --white:#fff;
}
*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body{ margin:0; padding:0; }
body{
  font-family:-apple-system,"PingFang SC","Microsoft YaHei",sans-serif;
  background:linear-gradient(180deg,#f6f3ea,#eef1f6,#e8edf4);
  color:var(--ink);
}
#app{ max-width:640px; margin:0 auto; min-height:100vh; position:relative; }
button{ font-family:inherit; border:none; cursor:pointer; }

/* ===== 顶栏 / 底栏 ===== */
#topbar{
  position:sticky; top:0; z-index:10;
  display:flex; justify-content:space-between; align-items:center;
  padding:10px 14px; background:rgba(246,243,234,.96);
  border-bottom:1px solid var(--gray-border);
}
#topbar .brand{ font-weight:700; font-size:17px; }
#topbar .chips{ display:flex; gap:6px; }
#topbar .chip{ font-size:12px; padding:3px 8px; border-radius:999px; background:var(--green-light); color:var(--green-dark); }
#views{ padding:12px 14px 76px; }
#tabbar{
  position:fixed; left:50%; transform:translateX(-50%); bottom:0; z-index:20;
  width:100%; max-width:640px; display:flex; background:var(--white);
  border-top:1px solid var(--gray-border); padding-bottom:env(safe-area-inset-bottom);
}
#tabbar .tab{ flex:1; text-align:center; padding:8px 0 6px; cursor:pointer; user-select:none; color:var(--gray-text); }
#tabbar .tab.active{ color:var(--green); font-weight:600; }
.view-placeholder{ padding:40px 0; text-align:center; color:var(--gray-text); background:var(--white); border-radius:14px; border:1px solid var(--gray-border); }
.hidden{ display:none; }
#toast{
  position:fixed; left:50%; transform:translateX(-50%); bottom:88px; z-index:120;
  background:rgba(0,0,0,.78); color:#fff; padding:9px 18px; border-radius:999px; font-size:14px; max-width:80%; text-align:center;
}

/* ===== 首页 ===== */
.sec-title{ font-size:14px; font-weight:700; margin:14px 0 8px; }
.jade-panel{
  display:flex; align-items:center; gap:12px;
  background:linear-gradient(135deg,#2e5a4f,#1f4b56); color:#f2ead6;
  border-radius:16px; padding:14px;
}
.jade-avatar{ font-size:38px; }
.jade-name{ font-weight:700; font-size:16px; }
.jade-bar{ height:8px; background:rgba(255,255,255,.25); border-radius:99px; margin:8px 0 6px; overflow:hidden; }
.jade-fill{ height:100%; background:linear-gradient(90deg,#ffd76a,#ff9d3c); border-radius:99px; }
.jade-seal{ font-size:12px; opacity:.9; }
.dwell-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.dwell-quick-btn{
  background:var(--white); border:1px solid var(--gray-border); border-radius:12px;
  padding:12px 0; font-size:14px; color:var(--ink);
}
.goal-bar{ height:10px; background:var(--gray-border); border-radius:99px; overflow:hidden; }
.goal-fill{ height:100%; background:var(--green); }
.goal-text{ font-size:12px; color:var(--gray-text); text-align:right; margin-top:4px; }
.main-peak{ text-align:center; margin:16px 0; }
.btn-gold{
  background:linear-gradient(180deg,#ffd76a,#ff9d3c); color:#5c3a00;
  font-size:18px; font-weight:800; padding:14px 46px; border-radius:14px;
  box-shadow:0 4px 0 #d97a00; width:100%;
}
.guard-grid,.lib-grid{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.guard-card,.card-box{
  background:var(--white); border:1px solid var(--gray-border); border-radius:12px;
  padding:16px 0; font-size:15px; color:var(--ink);
}
.btn-cinnabar{ background:var(--red-light); color:#a32222; }
.btn-ink{ background:#e9e6dc; color:#4a4a2f; }
.lib-grid{ grid-template-columns:repeat(3,1fr); }
.theme-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:8px; }
.theme-card{
  position:relative; display:flex; align-items:center; gap:8px;
  background:var(--white); border:1px solid var(--gray-border); border-radius:12px;
  padding:12px; font-size:14px; text-align:left; color:var(--ink);
}
.theme-card.locked{ opacity:.5; }
.theme-card .t-icon{ font-size:22px; }
.t-lock{ position:absolute; right:10px; }

/* ===== 课程 ===== */
.lesson-head{ display:flex; align-items:center; gap:10px; margin-bottom:6px; }
.lesson-back{
  background:var(--gray); border:1px solid var(--gray-border); border-radius:50%;
  width:32px; height:32px; font-size:14px; color:var(--gray-text); flex:none;
}
.progress{ flex:1; height:12px; background:var(--gray-border); border-radius:99px; overflow:hidden; }
.progress-fill{ height:100%; background:var(--green); transition:width .25s; }
.lesson-count{ font-size:13px; color:var(--gray-text); }
.lesson-title{ font-size:16px; font-weight:700; margin:8px 0 12px; }
.lesson-card{
  background:var(--white); border:1px solid var(--gray-border); border-radius:16px;
  padding:18px; min-height:200px;
}
.lesson-card.locked{ pointer-events:none; }
.q-text{ font-size:20px; font-weight:600; margin-bottom:16px; min-height:28px; }
.opt-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.opt{
  border:2px solid var(--gray-border); border-radius:14px; background:var(--white);
  padding:16px 8px; font-size:18px; font-weight:600; color:var(--ink);
}
.opt.right{ border-color:var(--green); background:var(--green-light); color:var(--green-dark); }
.opt.wrong{ border-color:var(--red); background:var(--red-light); color:#a32222; }
.ans-input{
  width:100%; text-align:center; font-size:32px; font-weight:700; color:var(--ink);
  border:2px solid var(--gray-border); border-radius:12px; padding:10px 0; background:var(--white);
  margin-bottom:10px; caret-color:transparent;
}
.numkeypad{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.nk-btn{
  background:var(--gray); border:1px solid var(--gray-border); border-radius:12px;
  padding:14px 0; font-size:20px; font-weight:700; color:var(--ink);
}
.big-btn{ display:flex; gap:12px; justify-content:center; margin-top:10px; }
.big-btn-ok{
  background:var(--blue); color:#fff; border-radius:14px;
  padding:18px 30px; font-size:24px; font-weight:800; min-width:72px;
}
.feedback-bar{ text-align:center; font-size:15px; font-weight:700; margin-top:12px; min-height:22px; }
.feedback-bar.ok{ color:var(--green-dark); }
.feedback-bar.bad{ color:#a32222; }

/* ===== 结算弹窗 ===== */
#overlay{
  position:fixed; inset:0; z-index:100; background:rgba(0,0,0,.55);
  align-items:center; justify-content:center; padding:24px;
}
/* 修复：ID 选择器优先级高于 .hidden，原 #overlay{display:flex} 会让 .hidden 失效 → 遮罩永不消失 */
#overlay:not(.hidden){ display:flex; }
.result-card{
  background:var(--white); border-radius:18px; padding:24px; width:100%; max-width:360px; text-align:center;
}
.result-title{ font-size:20px; font-weight:800; }
.result-stars{ font-size:34px; letter-spacing:6px; color:var(--yellow); margin:12px 0; }
.result-line{ font-size:15px; margin:4px 0; }
.result-btns{ display:flex; gap:10px; margin-top:16px; }
.result-btns .btn-gold{ flex:2; }
.result-btns .btn-ink{ flex:1; font-size:15px; border-radius:14px; }

/* ===== M3 路径 / 心魔录 / 计时 ===== */
.path-realm{ margin-bottom:18px; }
.path-realm-title{ font-size:15px; font-weight:800; margin:12px 0 8px; color:#5c4a2f; }
.path-grade{
  background:var(--white); border:1px solid var(--gray-border); border-radius:14px;
  padding:12px; margin-bottom:10px;
}
.path-grade-head{ display:flex; align-items:center; gap:8px; font-weight:700; font-size:15px; }
.pg-icon{ font-size:22px; }
.path-lock{ font-size:13px; color:var(--gray-text); padding:8px 0 2px; }
.path-theme{ display:flex; align-items:center; justify-content:space-between; padding:6px 0; border-top:1px dashed var(--gray-border); }
.pt-name{ font-size:13px; }
.path-dots{ display:flex; gap:5px; }
.pdot{
  width:22px; height:22px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center;
  font-size:11px; color:var(--gray-text); background:var(--gray); border:1px solid var(--gray-border);
}
.pdot.done{ background:var(--green); color:#fff; border-color:var(--green-dark); }
.pdot.open{ background:var(--green-light); color:var(--green-dark); border-color:var(--green); }
.pdot.lock{ opacity:.4; }
.quiz-btn{ width:100%; margin-top:10px; border-radius:12px; padding:10px 0; font-size:14px; font-weight:600; }
.review-group{ background:var(--white); border:1px solid var(--gray-border); border-radius:12px; padding:10px 12px; margin-bottom:10px; }
.review-group-title{ font-weight:700; font-size:14px; margin-bottom:6px; }
.review-item{ font-size:13px; padding:6px 0; border-top:1px dashed var(--gray-border); }
.ri-q{ font-weight:600; }
.ri-a{ color:var(--gray-text); margin-top:2px; }
.flow-timer{
  text-align:center; font-size:16px; font-weight:700; color:var(--red); margin-bottom:8px;
}

/* ===== 英语版反馈落地点：玉牌光晕 / 灵力 / 彩带 / 蛇形路径 ===== */
.jade-panel{
  position:relative; overflow:hidden; cursor:pointer;
  background:linear-gradient(135deg,#1c3a3a 0%,#2e5f52 60%,#3d7a63 100%);
  box-shadow:0 8px 24px rgba(30,60,50,.25), inset 0 1px 0 rgba(255,255,255,.15);
}
.jade-glow{
  position:absolute; top:-40%; left:-20%; width:70%; height:200%; pointer-events:none;
  background:radial-gradient(circle, rgba(255,255,255,.12) 0%, transparent 70%);
  animation:jadeBreathe 4s ease-in-out infinite;
}
@keyframes jadeBreathe{ 0%,100%{opacity:.6;} 50%{opacity:1;} }
.jade-fill{ background:linear-gradient(90deg,#f0d48a,#e8c84a); }
.lingqi-fx{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-size:34px; letter-spacing:10px; pointer-events:none; z-index:5;
  animation:lingqiPop 1.3s ease-out forwards;
}
@keyframes lingqiPop{ 0%{opacity:0; transform:scale(.4);} 30%{opacity:1;} 100%{opacity:0; transform:scale(1.6) translateY(-18px);} }
.confetti{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:5; border-radius:18px; }
/* 蛇形路径节点 */
.unit{ background:var(--white); border:1px solid var(--gray-border); border-radius:12px; padding:8px 10px; margin-bottom:8px; }
.unit-head{ font-size:13px; font-weight:700; margin-bottom:6px; }
.nodes{ display:flex; align-items:center; justify-content:center; gap:0; }
.connector{ width:4px; height:22px; background:var(--gray-border); flex-shrink:0; }
.connector.h{ width:12px; height:4px; background:var(--gray-border); flex-shrink:0; }
.node{ width:44px; display:flex; flex-direction:column; align-items:center; gap:2px; position:relative; flex-shrink:0; cursor:pointer; }
.node-icon{
  width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:16px; color:#fff; background:var(--gray-border);
}
.node.done .node-icon{ background:var(--green); box-shadow:0 3px 0 var(--green-dark); }
.node.next .node-icon{ background:var(--blue); box-shadow:0 3px 0 var(--blue-dark); animation:pulse 1.4s infinite; }
.node.lock .node-icon{ opacity:.5; }
@keyframes pulse{ 0%,100%{transform:scale(1);} 50%{transform:scale(1.12);} }
.snake-row.rev .nodes{ flex-direction:row-reverse; }
.path-themes{ margin-top:2px; }


/* ===== M4：几何图 / 分数输入 / 洞府 ===== */
.geo-box{ text-align:center; margin-bottom:10px; }
.geo-svg{ max-width:220px; width:100%; }
.geo-t{ font-size:12px; fill:#4b4b4b; }
.frac-host{ margin-top:4px; }
.frac-input{ display:flex; align-items:center; justify-content:center; gap:8px; margin-bottom:10px; }
.frac-input input{
  width:76px; text-align:center; font-size:26px; font-weight:700; color:var(--ink);
  border:2px solid var(--gray-border); border-radius:10px; padding:8px 0; background:var(--white);
}
.frac-input input.active{ border-color:var(--blue); }
.frac-slash{ font-size:26px; font-weight:700; color:var(--gray-text); }
.dwelling-tabs{ display:flex; gap:6px; flex-wrap:wrap; margin-bottom:10px; }
.dwell-tab{
  background:var(--white); border:1px solid var(--gray-border); border-radius:999px;
  padding:8px 14px; font-size:14px; color:var(--ink);
}
.dwell-tab.active{ background:var(--green); color:#fff; border-color:var(--green-dark); }
.stone-banner{
  background:linear-gradient(135deg,#2e5a4f,#1f4b56); color:#f2ead6;
  border-radius:12px; padding:12px; font-size:15px; font-weight:700; margin-bottom:10px;
}
.inventory-grid,.guide-grid,.trial-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:8px; }
.inv-item,.guide-chip{ background:var(--white); border:1px solid var(--gray-border); border-radius:12px; padding:12px; font-size:14px; }
.gc-desc{ font-size:12px; color:var(--gray-text); margin-top:2px; }
.avatar-stage{
  background:var(--white); border:1px solid var(--gray-border); border-radius:16px;
  padding:34px 0; text-align:center; font-size:46px; margin-bottom:10px;
}
.profile-dim{ display:flex; align-items:center; gap:10px; margin-bottom:10px; background:var(--white); border:1px solid var(--gray-border); border-radius:10px; padding:10px; }
.pd-name{ flex:none; width:88px; font-size:13px; font-weight:600; }
.pd-bar{ flex:1; height:12px; background:var(--gray-border); border-radius:99px; overflow:hidden; }
.pd-fill{ height:100%; background:linear-gradient(90deg,#58cc02,#1cb0f6); }
.pd-val{ flex:none; width:42px; text-align:right; font-size:13px; color:var(--gray-text); }
.inventory-box .btn-gold{ width:100%; margin-top:10px; }