/* ============================================================
   🦀 Rust 乐园 — style.css
   ============================================================ */

/* ---------- 主题变量 ---------- */
:root{
  --bg:#0e1120;
  --bg2:#151a2e;
  --card:#1a2038;
  --card2:#232a4a;
  --line:#2e3760;
  --text:#eef0ff;
  --muted:#9aa2c8;
  --primary:#f74c00;
  --primary2:#ff8a50;
  --accent:#4cc9f0;
  --ok:#2ec27e;
  --bad:#ff5470;
  --gold:#ffd166;
  --shadow:0 10px 30px rgba(0,0,0,.35);
  --radius:18px;
  --code-bg:#12162a;
  --star:rgba(255,255,255,.055);
}
[data-theme="light"]{
  --bg:#fdf6ee;
  --bg2:#ffffff;
  --card:#ffffff;
  --card2:#fff3e8;
  --line:#eadfd0;
  --text:#332a55;
  --muted:#7a7fa3;
  --accent:#0e9ed4;
  --shadow:0 10px 24px rgba(120,90,40,.14);
  --code-bg:#1c2138;
  --star:rgba(60,40,120,.05);
}

/* ---------- 基础 ---------- */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:"PingFang SC","Microsoft YaHei","Segoe UI",system-ui,-apple-system,sans-serif;
  background:var(--bg);
  color:var(--text);
  line-height:1.75;
  min-height:100vh;
  background-image:
    radial-gradient(circle at 15% -5%, rgba(247,76,0,.14), transparent 42%),
    radial-gradient(circle at 88% 6%, rgba(76,201,240,.12), transparent 42%),
    radial-gradient(var(--star) 1.2px, transparent 1.2px);
  background-size:auto,auto,30px 30px;
}
a{color:var(--accent);text-decoration:none}
html,body{overflow-x:clip}
a:hover{text-decoration:underline}
code,kbd,pre{font-family:ui-monospace,Consolas,"Cascadia Code","Courier New",monospace}
p code, li code, td code, .quiz-q code, .exp code, .opt code{
  background:rgba(76,201,240,.14);
  border:1px solid rgba(76,201,240,.25);
  color:var(--accent);
  padding:.08em .4em;border-radius:6px;font-size:.9em;
}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px}
::selection{background:rgba(247,76,0,.4)}

/* ---------- 顶栏 ---------- */
#topbar{
  position:sticky;top:0;z-index:50;
  display:flex;align-items:center;gap:14px;
  padding:10px 18px;
  background:color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
  flex-wrap:wrap;
}
.brand{display:flex;align-items:center;gap:8px;color:var(--text);font-size:1.08rem;white-space:nowrap}
.brand:hover{text-decoration:none}
.brand-emoji{font-size:1.5rem;display:inline-block;animation:bob 3.2s ease-in-out infinite}
#nav{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;flex:1;min-width:0}
#nav::-webkit-scrollbar{display:none}
#nav a{
  color:var(--muted);padding:6px 12px;border-radius:999px;white-space:nowrap;
  font-size:.92rem;position:relative;transition:.2s;
}
#nav a:hover{color:var(--text);background:var(--card2);text-decoration:none}
#nav a.active{color:#fff;background:linear-gradient(135deg,var(--primary),var(--primary2));box-shadow:0 4px 14px rgba(247,76,0,.35)}
.count{
  position:absolute;top:-2px;right:-2px;background:var(--bad);color:#fff;
  font-style:normal;font-size:.66rem;min-width:17px;height:17px;line-height:17px;
  text-align:center;border-radius:999px;padding:0 4px;font-weight:700;
}
.hud{display:flex;align-items:center;gap:8px;margin-left:auto}
.xpwrap{display:flex;align-items:center;gap:8px}
.lvchip{
  font-size:.72rem;font-weight:700;color:#fff;white-space:nowrap;
  background:linear-gradient(135deg,#7b2ff7,#b249f8);padding:3px 9px;border-radius:999px;
}
.xpbar{width:120px;height:10px;border-radius:999px;background:var(--card2);border:1px solid var(--line);overflow:hidden}
.xpbar i{display:block;height:100%;width:0%;border-radius:999px;background:linear-gradient(90deg,var(--gold),var(--primary2));transition:width .6s cubic-bezier(.22,1,.36,1)}
.iconbtn{
  background:var(--card);border:1px solid var(--line);color:var(--text);
  width:34px;height:34px;border-radius:10px;font-size:1rem;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;transition:.2s;text-decoration:none;
}
.iconbtn:hover{transform:translateY(-2px);border-color:var(--primary);text-decoration:none}

/* ---------- 布局 ---------- */
#app{max-width:1060px;margin:0 auto;padding:26px 18px 60px;min-height:70vh}
#foot{
  max-width:1060px;margin:0 auto;padding:26px 18px 40px;color:var(--muted);
  font-size:.85rem;border-top:1px dashed var(--line);display:grid;gap:6px;
}
.loading{text-align:center;padding:80px 0;color:var(--muted);font-size:1.1rem;animation:bob 1.6s ease-in-out infinite}
.page{animation:fadeUp .4s cubic-bezier(.22,1,.36,1)}

.card{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:22px;box-shadow:var(--shadow);
}

/* ---------- 按钮 / 徽章片 ---------- */
.btn{
  display:inline-flex;align-items:center;gap:8px;border:none;cursor:pointer;
  background:linear-gradient(135deg,var(--primary),var(--primary2));color:#fff;
  padding:10px 22px;border-radius:14px;font-size:1rem;font-weight:700;
  box-shadow:0 6px 18px rgba(247,76,0,.4);transition:.2s;
}
.btn:hover{transform:translateY(-2px) scale(1.02);box-shadow:0 10px 24px rgba(247,76,0,.5);text-decoration:none}
.btn:active{transform:translateY(0) scale(.98)}
.btn-big{padding:14px 30px;font-size:1.12rem}
.btn-ghost{
  display:inline-flex;align-items:center;gap:8px;cursor:pointer;
  background:transparent;color:var(--text);border:1.5px solid var(--line);
  padding:9px 20px;border-radius:14px;font-size:.95rem;transition:.2s;text-decoration:none;
}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent);text-decoration:none}
.btn-danger{border-color:rgba(255,84,112,.5);color:var(--bad)}
.btn-danger:hover{border-color:var(--bad);color:#fff;background:var(--bad)}
.btn[disabled]{opacity:.55;cursor:not-allowed;transform:none!important}
.chip{
  display:inline-flex;align-items:center;gap:5px;font-size:.78rem;font-weight:600;
  padding:3px 10px;border-radius:999px;background:var(--card2);border:1px solid var(--line);color:var(--muted);
}
.chip-q{background:rgba(76,201,240,.12);border-color:rgba(76,201,240,.3);color:var(--accent)}
.chip-ok{background:rgba(46,194,126,.14);border-color:rgba(46,194,126,.4);color:var(--ok)}
.chip-no{background:rgba(255,84,112,.14);border-color:rgba(255,84,112,.4);color:var(--bad)}
.chip-xp{background:rgba(255,209,102,.12);border-color:rgba(255,209,102,.4);color:var(--gold)}

/* ---------- 首页 Hero ---------- */
.hero{
  position:relative;overflow:hidden;
  display:grid;grid-template-columns:340px 1fr;gap:10px;align-items:center;
  background:linear-gradient(135deg,rgba(247,76,0,.16),rgba(76,201,240,.12) 60%,rgba(123,47,247,.12)),var(--card);
  min-height:320px;
}
.hero-art{position:relative;display:flex;justify-content:center;cursor:pointer}
.hero-art .ferris{filter:drop-shadow(0 14px 22px rgba(247,76,0,.4))}
.orb{position:absolute;font-size:1.4rem;opacity:.85;animation:bob 4s ease-in-out infinite;pointer-events:none}
.orb:nth-child(2){top:14%;left:6%;animation-delay:.4s}
.orb:nth-child(3){top:8%;right:12%;animation-delay:1.1s;font-size:1.7rem}
.orb:nth-child(4){bottom:12%;left:16%;animation-delay:1.8s;font-size:1.15rem}
.orb:nth-child(5){bottom:20%;right:6%;animation-delay:.7s}
.hero-txt{padding:26px}
.hero-txt h1{font-size:2rem;line-height:1.35;margin-bottom:10px}
.hero-txt h1 em{font-style:normal;background:linear-gradient(90deg,var(--primary2),var(--gold));-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-txt .sub{color:var(--muted);font-size:1.02rem;max-width:52ch;margin-bottom:18px}
.hero-btns{display:flex;gap:12px;flex-wrap:wrap}
.bubble{
  position:absolute;background:var(--card2);border:1px solid var(--line);border-radius:12px;
  padding:8px 14px;font-size:.9rem;box-shadow:var(--shadow);animation:pop .3s ease;top:-14px;left:50%;transform:translateX(-50%);white-space:nowrap;z-index:5;
}
.bubble::after{content:"";position:absolute;left:50%;bottom:-6px;transform:translateX(-50%) rotate(45deg);width:10px;height:10px;background:var(--card2);border-right:1px solid var(--line);border-bottom:1px solid var(--line)}

/* ---------- 统计卡 / 功能卡 ---------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:16px}
.stat-card{display:flex;align-items:center;gap:14px}
.stat-card .big{font-size:1.55rem;font-weight:800;line-height:1.2}
.stat-card .lab{font-size:.8rem;color:var(--muted)}
.ring{position:relative;flex:none}
.ring circle{fill:none;stroke-width:7;stroke-linecap:round}
.ring-bg{stroke:var(--card2)}
.ring-fg{stroke:url(#ringGrad);transition:stroke-dashoffset .8s cubic-bezier(.22,1,.36,1)}
.ring b{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:.78rem;font-weight:800}
.ring-grad-def{position:absolute;width:0;height:0}
.feat{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:16px}
.feat-card{display:flex;flex-direction:column;gap:6px;transition:.25s;position:relative;color:var(--text)}
.feat-card:hover{transform:translateY(-5px);border-color:var(--primary);text-decoration:none}
.feat-card .fe{font-size:1.9rem}
.feat-card b{font-size:1.02rem}
.feat-card span{font-size:.82rem;color:var(--muted)}
.feat-card .tipnum{position:absolute;top:14px;right:14px}
.home-sources{margin-top:16px;font-size:.9rem;color:var(--muted)}
.home-sources b{color:var(--text)}
.home-sources .srcline{margin:4px 0}

/* ---------- 关卡地图 ---------- */
.map{position:relative;display:flex;flex-direction:column;gap:26px;padding:30px 0 10px}
.map::before{content:"";position:absolute;top:0;bottom:40px;left:50%;border-left:3px dashed var(--line);transform:translateX(-50%)}
.map-start,.map-goal{align-self:center;z-index:1;font-weight:800;background:var(--card);border:1.5px dashed var(--accent);color:var(--accent);padding:8px 22px;border-radius:999px}
.mnode{
  display:flex;align-items:center;gap:18px;z-index:1;width:min(460px,100%);
  text-decoration:none;color:var(--text);
}
.mnode:nth-of-type(odd){align-self:flex-start;flex-direction:row}
.mnode:nth-of-type(even){align-self:flex-end;flex-direction:row-reverse;text-align:right}
.mnode:hover{text-decoration:none}
.mnode:nth-of-type(odd):hover .mring{transform:rotate(-4deg) scale(1.05)}
.mnode:nth-of-type(even):hover .mring{transform:rotate(4deg) scale(1.05)}
.mring{
  position:relative;flex:none;width:88px;height:88px;border-radius:50%;
  background:var(--card);border:2px solid var(--line);display:flex;align-items:center;justify-content:center;
  transition:.3s;box-shadow:var(--shadow);
}
.mring svg.ring{position:absolute;inset:-2px;width:calc(100% + 4px);height:calc(100% + 4px)}
.micon{font-size:2rem;z-index:1}
.mcheck{
  position:absolute;bottom:-4px;right:-4px;background:var(--ok);color:#fff;font-style:normal;
  width:26px;height:26px;border-radius:50%;font-weight:800;font-size:.85rem;
  display:flex;align-items:center;justify-content:center;border:2.5px solid var(--card);
}
.minfo{flex:1;min-width:0}
.mname{font-weight:800;font-size:1.08rem;display:flex;align-items:center;gap:8px}
.mnode:nth-of-type(even) .mname{justify-content:flex-end}
.mdesc{font-size:.85rem;color:var(--muted)}
.mpct{font-size:.78rem;color:var(--accent);font-weight:700}
.mnode.done .mring{border-color:var(--ok);animation:glowPulse 2.4s ease-in-out infinite}

/* ---------- 章节 / 课程 ---------- */
.ch-banner{position:relative;overflow:hidden;padding:0;margin-bottom:20px}
.ch-banner .scene-svg{display:block;width:100%;height:230px}
.ch-head{padding:18px 22px;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.ch-head h2{font-size:1.5rem}
.ch-head .tagline{color:var(--muted);font-size:.9rem}
.pbar{height:10px;border-radius:999px;background:var(--card2);border:1px solid var(--line);overflow:hidden;flex:1;min-width:140px}
.pbar i{display:block;height:100%;background:linear-gradient(90deg,var(--accent),var(--ok));border-radius:999px;transition:width .5s}
.lesson-list{display:grid;gap:12px;margin-top:16px}
.lesson-card{
  display:flex;align-items:center;gap:14px;padding:16px 18px;color:var(--text);
  transition:.22s;position:relative;
}
.lesson-card:hover{transform:translateX(6px);border-color:var(--accent);text-decoration:none}
.lesson-num{
  flex:none;width:38px;height:38px;border-radius:12px;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,rgba(247,76,0,.25),rgba(76,201,240,.25));font-weight:800;color:var(--accent);
}
.lesson-card b{font-size:1rem}
.lesson-card .lmeta{font-size:.78rem;color:var(--muted);display:flex;gap:8px;margin-top:2px;flex-wrap:wrap}
.lesson-done-stamp{
  margin-left:auto;flex:none;color:var(--ok);font-weight:800;font-size:.85rem;
  border:1.5px solid var(--ok);border-radius:999px;padding:2px 12px;background:rgba(46,194,126,.1);
}

.crumb{font-size:.85rem;color:var(--muted);margin-bottom:14px;display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.lesson h1{font-size:1.7rem;margin:6px 0 4px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.lesson .lsub{color:var(--muted);font-size:.88rem;margin-bottom:16px}
.lesson-body p{margin:12px 0;color:var(--text)}
.lesson-body h3{margin:26px 0 8px;font-size:1.18rem;display:flex;align-items:center;gap:8px}
.lesson-intro{
  display:flex;gap:14px;align-items:flex-start;background:linear-gradient(135deg,rgba(76,201,240,.1),transparent),var(--card2);
  border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px;margin:14px 0;
}
.lesson-intro .ferris{flex:none;animation:bob 3.5s ease-in-out infinite}
.lesson-intro p{margin:0}
.callout{border-radius:14px;padding:14px 18px;margin:16px 0;border:1px solid;font-size:.95rem}
.callout .ct{font-weight:800;display:flex;align-items:center;gap:8px;margin-bottom:6px}
.callout ul{margin:4px 0 2px 20px}
.callout li{margin:4px 0}
.tip{background:rgba(76,201,240,.08);border-color:rgba(76,201,240,.35)}
.tip .ct{color:var(--accent)}
.pit{background:rgba(255,209,102,.07);border-color:rgba(255,209,102,.4)}
.pit .ct{color:var(--gold)}
.refs{background:rgba(46,194,126,.06);border-color:rgba(46,194,126,.35);margin:22px 0}
.refs .ct{color:var(--ok)}
.refs ul{margin:2px 0 2px 20px}
.refs li{margin:5px 0;font-size:.92rem}

/* ---------- 图示 ---------- */
.dg-wrap{
  margin:18px 0;background:var(--card2);border:1px solid var(--line);border-radius:var(--radius);
  padding:14px 14px 10px;text-align:center;
}
.dg-wrap svg{max-width:100%;height:auto}
.dg-cap{font-size:.82rem;color:var(--muted);margin-top:6px}
.diagram text{fill:var(--text);font-family:inherit}
.diagram .dg-muted{fill:var(--muted)}
.diagram .dg-box rect{fill:var(--card);stroke:var(--accent);stroke-width:2;rx:10}
.diagram .dg-box.warn rect{stroke:var(--gold)}
.diagram .dg-box.bad rect{stroke:var(--bad)}
.diagram .dg-box.ok rect{stroke:var(--ok)}
.diagram .dg-box.dim rect{stroke:var(--muted)}
.diagram .dg-h{font-weight:800}
.dg-float{animation:bob 4s ease-in-out infinite}
.dg-float2{animation:bob 5s ease-in-out infinite .8s}
.dg-flicker{animation:flick .45s ease-in-out infinite alternate}
@keyframes flick{from{opacity:.95}to{opacity:.45}}
.scene-svg{display:block;width:100%}
.diagram .dg-arrow{stroke:var(--primary2);stroke-width:3;fill:none;marker-end:none}
.diagram .dg-arrowhead{fill:var(--primary2)}
.diagram .dg-arrow.teal{stroke:var(--accent)}
.diagram .dg-arrowhead.teal{fill:var(--accent)}
.diagram .dg-arrow.gray{stroke:var(--muted);stroke-dasharray:6 5}
.diagram .dg-arrowhead.gray{fill:var(--muted)}
.diagram .dg-bar{fill:rgba(247,76,0,.55);stroke:var(--primary2);rx:6}
.diagram .dg-bar.teal{fill:rgba(76,201,240,.5);stroke:var(--accent)}

/* ---------- 代码卡 ---------- */
.codecard{margin:16px 0;border-radius:14px;overflow:hidden;border:1px solid #2b3252;background:var(--code-bg);box-shadow:var(--shadow)}
.codecard.mini{margin:10px 0}
.codehead{display:flex;align-items:center;gap:10px;padding:9px 14px;background:rgba(255,255,255,.045);border-bottom:1px solid #2b3252}
.dots{display:flex;gap:6px}
.dots i{width:11px;height:11px;border-radius:50%}
.dots i:nth-child(1){background:#ff5f56}
.dots i:nth-child(2){background:#ffbd2e}
.dots i:nth-child(3){background:#27c93f}
.cname{color:#8b93b8;font-size:.78rem;letter-spacing:.5px}
.copybtn{
  margin-left:auto;background:transparent;border:1px solid #3a4372;color:#aab2d8;
  font-size:.75rem;padding:3px 10px;border-radius:8px;cursor:pointer;transition:.2s;
}
.copybtn:hover{border-color:var(--accent);color:var(--accent)}
.codewrap{padding:14px 16px;overflow-x:auto;font-size:.88rem;line-height:1.7;color:#dbe1ff}
.codeout{
  border-top:1px dashed #2b3252;background:rgba(46,194,126,.07);
  padding:10px 16px 12px;
}
.outlab{color:#7ee2a8;font-size:.74rem;font-weight:700;letter-spacing:1px}
.codeout pre{color:#c8f5d8;font-size:.85rem;margin-top:4px;overflow-x:auto}

/* 语法高亮配色（固定深色代码底） */
.tk-kw{color:#ff9e64;font-weight:600}
.tk-ty{color:#7fdbca}
.tk-str{color:#c3e88d}
.tk-com{color:#6c7396;font-style:italic}
.tk-num{color:#f78c6c}
.tk-fn{color:#82aaff}
.tk-macro{color:#ff5874}
.tk-attr{color:#c792ea}
.tk-life{color:#ff5874;font-style:italic}
.tk-enum{color:#ffd166}

/* ---------- Ferris 吉祥物部件 ---------- */
.ferris .f-eye{fill:#fff;stroke:#7a2a00;stroke-width:3}
.ferris .f-pupil{fill:#3a1400}
.ferris .f-eye-line{fill:none;stroke:#7a2a00;stroke-width:5;stroke-linecap:round}
.ferris .f-mouth{fill:none;stroke:#7a2a00;stroke-width:5;stroke-linecap:round}
.ferris .f-arm{stroke:#c63d00;stroke-width:9;stroke-linecap:round}
.ferris .f-legs{stroke:#c63d00;stroke-width:8;stroke-linecap:round}
.ferris .f-claw circle{fill:#f74c00;stroke:#c63d00;stroke-width:4}
.ferris .f-claw path{stroke:#c63d00;stroke-width:3.5;stroke-linecap:round}
.ferris .f-acc{font-size:26px}

/* ---------- 测验 ---------- */
.quiz-section{margin-top:34px}
.quiz-section>.qs-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:6px}
.quiz-section>.qs-head h3{font-size:1.25rem}
.quiz{
  margin:18px 0;padding:18px;border-radius:var(--radius);
  background:var(--card);border:1px solid var(--line);border-left:5px solid var(--primary);
  box-shadow:var(--shadow);
}
.quiz-head{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.quiz-q{font-weight:700;margin:6px 0 12px;line-height:1.8}
.opts{display:grid;gap:10px;margin:12px 0}
.opt{
  display:flex;align-items:center;gap:12px;text-align:left;width:100%;
  background:var(--card2);border:1.5px solid var(--line);border-radius:12px;
  padding:11px 14px;color:var(--text);font-size:.95rem;cursor:pointer;transition:.18s;line-height:1.6;
}
.opt:hover:not(:disabled){border-color:var(--primary);transform:translateX(4px)}
.opt:disabled{cursor:default}
.opt .letter{
  flex:none;width:28px;height:28px;border-radius:9px;display:flex;align-items:center;justify-content:center;
  background:var(--bg);border:1px solid var(--line);font-weight:800;color:var(--accent);font-size:.85rem;
}
.opt.correct{border-color:var(--ok);background:rgba(46,194,126,.12);animation:pop .35s}
.opt.correct .letter{background:var(--ok);color:#fff;border-color:var(--ok)}
.opt.wrong{border-color:var(--bad);background:rgba(255,84,112,.1);animation:shake .4s}
.opt.wrong .letter{background:var(--bad);color:#fff;border-color:var(--bad)}
.opt.dim{opacity:.45}
.quiz-acts{display:flex;gap:10px;margin-top:12px;flex-wrap:wrap}
.quiz-reveal{margin-top:14px;display:grid;gap:10px}
.hidden{display:none!important}
.ans-line{
  background:rgba(46,194,126,.1);border:1px solid rgba(46,194,126,.4);border-radius:12px;
  padding:10px 14px;font-size:.95rem;
}
.ans-line.bad{background:rgba(255,84,112,.08);border-color:rgba(255,84,112,.4)}
.exp{
  background:var(--card2);border:1px dashed var(--line);border-radius:12px;
  padding:12px 16px;font-size:.93rem;line-height:1.85;
}
.exp .refline{margin-top:8px;font-size:.85rem}
.result-chip{font-size:.8rem;font-weight:700}

/* 打地鼠 */
.whack-pre{cursor:default}
.wline{display:block;cursor:pointer;border-radius:6px;user-select:none;transition:background .15s}
.wline:hover{background:rgba(76,201,240,.12)}
.wline::before{counter-increment:wline;content:counter(wline);display:inline-block;width:2.2em;color:#5b648f;text-align:right;margin-right:14px;cursor:default}
.wline.hit{background:rgba(46,194,126,.22);outline:1.5px solid var(--ok)}
.wline.miss{animation:shake .4s;background:rgba(255,84,112,.16)}
.whack-hint{font-size:.88rem;color:var(--gold);margin-top:8px}
.whack-hint.err{color:var(--bad);animation:pop .3s}
.whack-pre{counter-reset:wline}
.fixzone{margin-top:14px;border-top:1px dashed var(--line);padding-top:8px}

/* 代码拼图 */
.pz-list{list-style:none;display:grid;gap:8px;margin:12px 0;counter-reset:pz}
.pz-line{
  display:flex;align-items:center;gap:10px;background:var(--code-bg);border:1.5px solid #2b3252;
  border-radius:10px;padding:8px 12px;cursor:grab;font-size:.86rem;color:#dbe1ff;transition:.15s;
}
.pz-line:active{cursor:grabbing}
.pz-line.drag-over{border-color:var(--accent);transform:translateY(2px)}
.pz-line .pz-num{color:#5b648f;font-size:.78rem;width:1.6em;text-align:right;flex:none}
.pz-line .pz-btns{margin-left:auto;display:flex;gap:4px;flex:none}
.pz-btns button{
  background:var(--card2);border:1px solid var(--line);color:var(--muted);border-radius:7px;
  width:26px;height:26px;cursor:pointer;font-size:.8rem;line-height:1;
}
.pz-btns button:hover{color:var(--accent);border-color:var(--accent)}
.pz-line.pz-ok{border-color:var(--ok);background:rgba(46,194,126,.1)}
.pz-line.pz-bad{border-color:var(--bad);animation:shake .4s}

/* ---------- 游戏大厅 ---------- */
.arcade{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:18px}
.arcade-card{display:flex;flex-direction:column;gap:8px;color:var(--text);transition:.25s;position:relative;overflow:hidden}
.arcade-card::after{
  content:"";position:absolute;inset:0;opacity:0;transition:.3s;
  background:radial-gradient(500px 120px at 50% 0%, rgba(247,76,0,.14), transparent);
  pointer-events:none;
}
.arcade-card:hover{transform:translateY(-5px);border-color:var(--primary);text-decoration:none}
.arcade-card .ge{font-size:2.4rem}
.arcade-card b{font-size:1.15rem}
.arcade-card p{font-size:.88rem;color:var(--muted)}
.game-head{
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:18px;
  background:linear-gradient(135deg,rgba(123,47,247,.18),rgba(247,76,0,.12)),var(--card);
}
.game-head .ge{font-size:2.6rem;animation:bob 3s ease-in-out infinite}
.game-head h2{font-size:1.4rem}
.game-head .gdesc{color:var(--muted);font-size:.9rem}
.win-banner{
  margin-top:20px;text-align:center;padding:24px;border-radius:var(--radius);
  background:linear-gradient(135deg,rgba(255,209,102,.16),rgba(46,194,126,.12)),var(--card);
  border:1.5px solid var(--gold);animation:pop .4s;
}
.win-banner .ferris{margin:6px 0}

/* ---------- 错题本 / 徽章 / 设置 ---------- */
.empty-state{text-align:center;padding:50px 20px;color:var(--muted)}
.empty-state .ferris{margin-bottom:10px}
.badge-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px;margin-top:16px}
.badge-card{text-align:center;position:relative;overflow:hidden}
.badge-card .bic{font-size:2.6rem;margin:8px 0;filter:grayscale(1);opacity:.4}
.badge-card.earned .bic{filter:none;opacity:1;animation:pop .5s}
.badge-card b{display:block}
.badge-card .bdesc{font-size:.8rem;color:var(--muted)}
.badge-card.earned{border-color:var(--gold)}
.badge-card.earned::before{
  content:"";position:absolute;top:0;left:-80%;width:50%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,209,102,.16),transparent);
  animation:shine 3.2s infinite;
}
.badge-card .bdate{font-size:.72rem;color:var(--gold);margin-top:4px}
.set-grid{display:grid;gap:16px;margin-top:14px}
.set-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:8px 0}
.set-row .lab{font-weight:700}
.set-note{font-size:.83rem;color:var(--muted)}
.switch{display:inline-flex;border:1.5px solid var(--line);border-radius:999px;overflow:hidden}
.switch button{background:transparent;border:none;color:var(--muted);padding:6px 16px;cursor:pointer;font-size:.88rem}
.switch button.on{background:linear-gradient(135deg,var(--primary),var(--primary2));color:#fff;font-weight:700}

/* ---------- 特效 / 动画 ---------- */
#fx{position:fixed;inset:0;pointer-events:none;z-index:999}
.toast{
  position:fixed;top:70px;left:50%;transform:translate(-50%,-16px);opacity:0;z-index:1000;
  background:var(--card);border:1px solid var(--accent);border-radius:14px;padding:10px 22px;
  box-shadow:var(--shadow);font-size:.95rem;transition:.3s;pointer-events:none;max-width:88vw;text-align:center;
}
.toast.show{opacity:1;transform:translate(-50%,0)}
.toast.gold{border-color:var(--gold);background:linear-gradient(135deg,rgba(255,209,102,.2),var(--card))}
.ferris{display:inline-block;vertical-align:middle}
.floaty .ferris,.hero-art .ferris,.win-banner .ferris,.empty-state .ferris{animation:bob 3.4s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(-9px)}}
@keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes pop{0%{transform:scale(.86)}60%{transform:scale(1.05)}100%{transform:scale(1)}}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-7px)}50%{transform:translateX(6px)}75%{transform:translateX(-4px)}}
@keyframes glowPulse{0%,100%{box-shadow:0 0 0 0 rgba(46,194,126,.45)}50%{box-shadow:0 0 22px 4px rgba(46,194,126,.35)}}
@keyframes shine{0%{left:-80%}55%,100%{left:130%}}

/* ---------- 响应式 ---------- */
@media (max-width:900px){
  .hero{grid-template-columns:1fr;min-height:0}
  .hero-art{padding-top:22px}
  .feat{grid-template-columns:repeat(2,1fr)}
  .stats{grid-template-columns:repeat(2,1fr)}
  .arcade{grid-template-columns:1fr}
  .mnode:nth-of-type(even){flex-direction:row;text-align:left}
  .mnode:nth-of-type(even) .mname{justify-content:flex-start}
}
@media (max-width:600px){
  #topbar{padding:8px 12px;gap:8px}
  #nav{order:3;flex-basis:100%}
  .xpbar{width:70px}
  #app{padding:18px 12px 50px}
  .stats{grid-template-columns:repeat(2,1fr)}
  .hero-txt h1{font-size:1.5rem}
  .ch-banner .scene{height:150px}
  .codewrap{font-size:.8rem}
  .mring{width:72px;height:72px}
  .micon{font-size:1.6rem}
}
@media (max-width:375px){
  .stats{grid-template-columns:1fr 1fr}
  .feat{grid-template-columns:1fr}
  .btn-big{padding:12px 20px;font-size:1rem}
  .lvchip{max-width:110px;overflow:hidden;text-overflow:ellipsis}
}