/* 森林远征 · 互动画面原型 */
:root{
  --ink:#eaf4e6;
  --dim:#a9c0ae;
  --faint:#7d9885;
  --line:rgba(255,255,255,.14);
  --glass:rgba(9,22,16,.62);
  --accent:#6fdc9b;
  --gold:#ffd166;
}
*{box-sizing:border-box;}
html,body{margin:0;height:100%;overflow:hidden;background:#08120e;}
body{
  font-family:var(--font-ui);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  user-select:none;
}
#scene{
  position:fixed;inset:0;width:100%;height:100%;display:block;
  cursor:grab;
  touch-action:none;
}
#scene.dragging{cursor:grabbing;}
#scene.pointing{cursor:pointer;}

/* ---------- 顶部 ---------- */
.hud-top{
  position:fixed;top:0;left:0;right:0;z-index:10;
  display:flex;justify-content:space-between;align-items:flex-start;gap:20px;
  padding:20px 24px;pointer-events:none;flex-wrap:wrap;
}
.title-card{
  display:flex;gap:13px;align-items:center;
  padding:13px 18px;border-radius:var(--r-md);
  background:var(--glass);border:1px solid var(--line);
  backdrop-filter:blur(14px) saturate(140%);
  box-shadow:var(--sh-2);
}
.title-card .mark{font-size:26px;line-height:1;}
.title-card h1{margin:0;font-size:17px;letter-spacing:.01em;}
.title-card p{margin:3px 0 0;font-size:11.5px;color:var(--faint);}
.hint{
  display:flex;gap:9px;align-items:center;font-size:11.5px;color:var(--dim);
  padding:9px 15px;border-radius:var(--r-pill);
  background:var(--glass);border:1px solid var(--line);backdrop-filter:blur(14px);
}
.hint i{color:var(--faint);font-style:normal;}

/* ---------- 关卡面板 ---------- */
.panel{
  position:fixed;top:104px;right:24px;z-index:12;width:310px;
  padding:22px;border-radius:var(--r-md);
  background:linear-gradient(160deg,rgba(12,30,21,.94),rgba(8,20,15,.96));
  border:1px solid rgba(120,220,160,.24);
  box-shadow:var(--sh-3);
  backdrop-filter:blur(16px);
  animation:panelIn var(--d-slow) var(--ease);
}
.panel[hidden]{display:none;}
@keyframes panelIn{from{opacity:0;transform:translateX(18px) scale(.97)}to{opacity:1;transform:none}}
.panel-close{
  position:absolute;top:12px;right:12px;width:28px;height:28px;border-radius:var(--r-sm);
  background:rgba(255,255,255,.07);border:1px solid var(--line);color:var(--dim);font-size:12px;
}
.panel-close:hover{background:rgba(255,255,255,.14);color:#fff;}
.panel-chapter{font-size:11px;letter-spacing:.14em;color:var(--accent);text-transform:uppercase;}
.panel h2{margin:8px 0 0;font-size:19px;}
.panel-en{margin-top:5px;font-size:12px;font-style:italic;color:var(--faint);}
.panel-stars{margin-top:12px;font-size:17px;letter-spacing:4px;color:var(--gold);}
.panel-meta{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-direction:column;gap:9px;}
.panel-meta li{
  font-size:12.5px;color:var(--dim);line-height:1.6;
  padding:9px 12px;border-radius:var(--r-sm);background:rgba(255,255,255,.045);
}
.panel-meta li b{color:var(--ink);font-weight:600;}
.panel .btn{
  width:100%;margin-top:16px;padding:12px;border-radius:var(--r-sm);font-size:14px;font-weight:700;
  border:1px solid transparent;color:#04140c;
  background:linear-gradient(135deg,#7ef0b0,#37b877);
  box-shadow:0 12px 28px rgba(60,200,130,.28);
}
.panel .btn:hover{filter:brightness(1.08);}
.panel .btn:disabled{background:rgba(255,255,255,.08);color:var(--faint);box-shadow:none;cursor:not-allowed;}
.panel-note{margin:12px 0 0;font-size:11px;color:var(--faint);line-height:1.65;}

/* ---------- 控制条 ---------- */
.controls{
  position:fixed;left:24px;bottom:22px;z-index:11;
  display:flex;flex-direction:column;gap:11px;
  padding:17px 19px;border-radius:var(--r-md);
  background:var(--glass);border:1px solid var(--line);
  backdrop-filter:blur(14px) saturate(140%);
  box-shadow:var(--sh-2);
  max-width:min(560px,calc(100vw - 48px));
}
.ctl-row{display:flex;align-items:center;gap:9px;flex-wrap:wrap;}
.ctl-label{font-size:11px;letter-spacing:.1em;color:var(--faint);width:34px;flex:0 0 auto;}
.ctl-value{font-size:11.5px;color:var(--dim);min-width:42px;text-align:right;font-variant-numeric:tabular-nums;}
.chip{
  padding:7px 13px;border-radius:var(--r-pill);font-size:12px;
  background:rgba(255,255,255,.06);border:1px solid var(--line);color:var(--dim);
  transition:var(--d-base) var(--ease);
}
.chip:hover{background:rgba(255,255,255,.12);color:var(--ink);}
.chip.active{
  background:linear-gradient(135deg,rgba(120,235,170,.9),rgba(55,185,120,.85));
  border-color:transparent;color:#04140c;font-weight:700;
}
.ctl-row.buttons{margin-top:2px;}
input[type=range]{
  -webkit-appearance:none;appearance:none;
  width:150px;height:5px;border-radius:var(--r-pill);
  background:linear-gradient(90deg,rgba(120,235,170,.85),rgba(255,255,255,.12));
  outline:none;
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;width:15px;height:15px;border-radius:50%;
  background:#eaffef;border:2px solid #37b877;cursor:pointer;
  box-shadow:var(--sh-1);
}

/* ---------- 图例 ---------- */
.legend{
  position:fixed;right:24px;bottom:24px;z-index:10;
  display:flex;gap:16px;align-items:center;flex-wrap:wrap;
  padding:11px 17px;border-radius:var(--r-pill);
  background:var(--glass);border:1px solid var(--line);backdrop-filter:blur(14px);
  font-size:11.5px;color:var(--dim);
}
.legend span{display:flex;align-items:center;gap:7px;}
.dot{width:9px;height:9px;border-radius:50%;display:inline-block;}
.dot.done{background:#5fe0a0;box-shadow:0 0 10px rgba(95,224,160,.8);}
.dot.current{background:#ffd166;box-shadow:0 0 10px rgba(255,209,102,.9);}
.dot.locked{background:#5c7364;}

/* ---------- Toast ---------- */
.toast{
  position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);z-index:20;
  padding:16px 24px;border-radius:var(--r-md);font-size:13.5px;line-height:1.7;text-align:center;
  background:rgba(10,26,18,.96);border:1px solid rgba(120,220,160,.3);
  box-shadow:var(--sh-3);max-width:min(420px,84vw);
  animation:panelIn var(--d-slow) var(--ease);
}
.toast[hidden]{display:none;}
.toast b{color:var(--accent);}

@media (max-width:820px){
  .hud-top{padding:14px;}
  .hint{display:none;}
  .panel{top:auto;left:12px;right:12px;bottom:238px;width:auto;}
  .controls{left:12px;right:12px;bottom:12px;padding:14px;}
  .legend{display:none;}
  input[type=range]{width:110px;}
}

/* =========================================================
   正式版新增：顶栏数据 / 册别导航 / 六步关卡播放器
   ========================================================= */
.hud-right{display:flex;align-items:center;gap:9px;flex-wrap:wrap;pointer-events:auto;}
.xpwrap{
  display:flex;flex-direction:column;gap:5px;min-width:180px;
  background:var(--glass);border:1px solid var(--line);border-radius:var(--r-md);
  padding:9px 14px;backdrop-filter:blur(14px);
}
.xpwrap .lv{font-size:11px;letter-spacing:.08em;color:var(--dim);display:flex;align-items:baseline;gap:7px;}
.xpwrap .lv b{font-size:16px;color:var(--ink);font-variant-numeric:tabular-nums;}
.xpwrap .lv span{font-size:11px;color:var(--faint);letter-spacing:0;}
.xpbar{height:6px;border-radius:var(--r-pill);background:rgba(255,255,255,.12);overflow:hidden;}
.xpbar i{display:block;height:100%;width:0;border-radius:var(--r-pill);background:linear-gradient(90deg,var(--accent),#f0d78a);transition:width var(--d-slow) var(--ease);}
.xpnum{font-size:10.5px;color:var(--faint);font-variant-numeric:tabular-nums;}
.pill{
  display:inline-flex;align-items:center;gap:5px;font-size:12px;color:var(--dim);
  background:var(--glass);border:1px solid var(--line);border-radius:var(--r-pill);
  padding:7px 13px;backdrop-filter:blur(14px);font-variant-numeric:tabular-nums;
}
.pill b{color:var(--ink);font-size:13.5px;}

/* 册别导航（四册 = 四季） */
.books{
  position:fixed;left:24px;top:104px;z-index:11;
  display:flex;flex-direction:column;gap:8px;width:200px;
}
.book-tab{
  display:flex;align-items:center;gap:9px;text-align:left;
  padding:9px 12px;border-radius:var(--r-md);font-size:12.5px;font-family:inherit;cursor:pointer;
  background:var(--glass);border:1px solid var(--line);color:var(--dim);
  backdrop-filter:blur(14px);transition:var(--d-base) var(--ease);
}
.book-tab:hover{background:rgba(255,255,255,.1);color:var(--ink);transform:translateX(2px);}
.book-tab .b-emoji{font-size:17px;line-height:1;}
.book-tab .b-meta{display:flex;flex-direction:column;line-height:1.35;flex:1 1 auto;min-width:0;}
.book-tab .b-meta b{font-size:12.5px;color:var(--ink);font-weight:600;white-space:nowrap;}
.book-tab .b-meta i{font-style:normal;font-size:10.5px;color:var(--faint);}
.book-tab .b-prog{font-size:11px;color:var(--faint);font-variant-numeric:tabular-nums;}
.book-tab.active{
  background:linear-gradient(135deg,color-mix(in srgb,var(--c) 42%,transparent),color-mix(in srgb,var(--c2) 26%,transparent));
  border-color:color-mix(in srgb,var(--c) 65%,transparent);
  box-shadow:0 10px 28px color-mix(in srgb,var(--c) 30%,transparent);
}
.book-tab.active .b-meta b{color:#fff;}
.book-tab.locked{opacity:.5;}

.hintbar{
  position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:10;
  font-size:11.5px;color:var(--faint);letter-spacing:.03em;
  background:var(--glass);border:1px solid var(--line);border-radius:var(--r-pill);
  padding:7px 16px;backdrop-filter:blur(14px);white-space:nowrap;
}

/* 通用按钮与弹层 */
.btn{
  border:1px solid var(--line);background:rgba(255,255,255,.08);color:var(--ink);
  padding:11px 20px;border-radius:var(--r-sm);font-size:14px;font-weight:600;font-family:inherit;
  transition:var(--d-base) var(--ease);cursor:pointer;
}
.btn:hover{background:rgba(255,255,255,.16);transform:translateY(-1px);}
.btn.primary{
  background:linear-gradient(135deg,#7ef0b0,#37b877);border-color:transparent;color:#04140c;
  box-shadow:0 10px 26px rgba(60,200,130,.3);font-weight:800;
}
.btn.ghost{background:transparent;color:var(--dim);}
.btn.ghost:hover{color:var(--ink);background:rgba(255,255,255,.08);}
.btn.small{padding:8px 14px;font-size:12.5px;border-radius:var(--r-sm);}
.btn:disabled{opacity:.4;cursor:not-allowed;transform:none;}
.overlay{
  position:fixed;inset:0;z-index:80;display:flex;align-items:center;justify-content:center;
  padding:18px;background:rgba(4,12,9,.86);backdrop-filter:blur(8px);animation:fadeIn var(--d-base) var(--ease);
}
.overlay[hidden]{display:none;}
.overlay.soft{background:rgba(4,12,9,.72);}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.modal{
  width:min(560px,100%);max-height:86vh;overflow:auto;padding:24px;border-radius:var(--r-md);
  background:linear-gradient(160deg,rgba(14,32,23,.99),rgba(8,20,15,.99));
  border:1px solid rgba(120,220,160,.26);box-shadow:var(--sh-3);
  animation:pop var(--d-base) var(--ease);
}
.modal h3{font-size:19px;margin-bottom:10px;}
.modal p{font-size:13.5px;color:var(--dim);line-height:1.8;margin-bottom:10px;}
.modal ul{margin:0 0 12px 18px;font-size:13.5px;color:var(--dim);line-height:1.95;}
.modal .muted{color:var(--faint);}
.toast{z-index:95;}
#fx{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:70;}

/* ---------- 六步播放器 ---------- */
.player{
  width:min(940px,100%);max-height:calc(100vh - 36px);display:flex;flex-direction:column;
  background:linear-gradient(180deg,rgba(13,30,22,.99),rgba(8,18,14,.99));
  border:1px solid rgba(120,220,160,.24);border-radius:var(--r-md);overflow:hidden;
  box-shadow:var(--sh-3);animation:pop var(--d-slow) var(--ease);
}
@keyframes pop{from{opacity:0;transform:translateY(16px) scale(.985)}to{opacity:1;transform:none}}
.p-head{
  display:flex;gap:14px;align-items:flex-start;padding:16px 20px;
  border-bottom:1px solid var(--line);background:linear-gradient(120deg,rgba(110,220,160,.12),transparent 60%);
}
.p-head-main{flex:1 1 auto;min-width:0;}
.p-title{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.p-title h2{font-size:17px;}
.p-steps{display:flex;gap:6px;margin-top:11px;flex-wrap:wrap;}
.p-pill{font-size:11px;padding:4px 11px;border-radius:var(--r-pill);background:rgba(255,255,255,.05);color:var(--faint);border:1px solid transparent;}
.p-pill.active{background:rgba(110,220,160,.22);border-color:rgba(110,220,160,.5);color:var(--ink);font-weight:600;}
.p-pill.passed{color:#7fe0ae;}
.p-body{flex:1 1 auto;overflow-y:auto;padding:22px 24px;min-height:260px;}
.p-body::-webkit-scrollbar{width:9px;}
.p-body::-webkit-scrollbar-thumb{background:rgba(255,255,255,.14);border-radius:var(--r-pill);}
.p-foot{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:13px 20px;border-top:1px solid var(--line);background:rgba(0,0,0,.24);}
.p-hint{font-size:12px;color:var(--faint);}
.p-acts{display:flex;gap:10px;flex-wrap:wrap;}
.p-titleline{font-size:12px;letter-spacing:.16em;color:var(--faint);text-transform:uppercase;margin-bottom:12px;}
.p-lead{font-size:16px;line-height:1.7;margin-bottom:12px;color:var(--ink);}
.p-note{font-size:13px;color:var(--dim);line-height:1.75;}
.p-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:11px;margin-top:16px;}
.w-card{
  text-align:left;padding:13px 15px;border-radius:var(--r-md);cursor:pointer;color:inherit;font-family:inherit;
  background:rgba(255,255,255,.045);border:1px solid var(--line);transition:var(--d-base) var(--ease);
}
.w-card:hover{background:rgba(255,255,255,.09);transform:translateY(-2px);}
.w-card.on{border-color:rgba(110,220,160,.6);background:rgba(110,220,160,.12);}
.w-en{font-size:16px;font-weight:700;display:flex;align-items:center;justify-content:space-between;gap:8px;}
.w-ipa{font-size:11.5px;color:var(--faint);font-family:var(--font-mono);margin-top:2px;}
.w-zh{font-size:13px;color:var(--dim);margin-top:6px;}
.w-mark{font-size:11px;color:var(--faint);margin-top:6px;}
.w-card.on .w-mark{color:#7fe0ae;}
.spk{
  width:24px;height:24px;border-radius:var(--r-sm);display:grid;place-items:center;font-size:12px;
  background:rgba(110,220,160,.18);border:none;cursor:pointer;flex:0 0 auto;transition:var(--d-fast) var(--ease);color:inherit;
}
.spk:hover{background:rgba(110,220,160,.35);}
.spk.on{background:#7fe0ae;color:#04140c;}
.p-tools{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:14px;}

/* 教材词表（可折叠） */
.p-toc{margin-top:20px;border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;background:rgba(255,255,255,.03);}
.p-tochead{
  width:100%;display:flex;align-items:center;gap:10px;padding:13px 16px;
  background:transparent;border:none;color:var(--ink);font-family:inherit;font-size:13.5px;
  cursor:pointer;text-align:left;transition:background var(--d-fast) var(--ease);
}
.p-tochead:hover{background:rgba(255,255,255,.06);}
.p-tochead span{font-weight:600;}
.p-tochead em{font-style:normal;font-size:12px;color:var(--faint);}
.p-tochead b{margin-left:auto;font-size:12px;color:var(--accent);font-weight:600;}
.p-tocbody{padding:0 16px 16px;}
.p-tocwords{display:flex;flex-wrap:wrap;gap:6px;}
.p-tocwords{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:6px 14px;}
.p-tocwords .tw{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:0 7px;
  padding:5px 8px;border-radius:var(--r-sm);background:rgba(255,255,255,.05);
  border:.5px solid var(--line);
}
.p-tocwords .tw b{font-size:13px;color:var(--ink);font-weight:600;}
.p-tocwords .tw i{font-style:normal;font-size:11px;color:var(--faint);font-family:var(--font-mono,monospace);}
.p-tocwords .tw span{font-size:11.5px;color:var(--dim);flex-basis:100%;line-height:1.5;}
.p-toggle{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;color:var(--dim);}
.p-dialogue,.p-passage{display:flex;flex-direction:column;gap:12px;}
.d-line{display:flex;gap:13px;align-items:flex-start;padding:12px 52px 12px 14px;border-radius:var(--r-md);background:rgba(255,255,255,.03);border:1px solid var(--line);position:relative;}
.d-who{flex:0 0 62px;font-size:11.5px;font-weight:700;color:#7fe0ae;padding-top:3px;}
.d-say{flex:1 1 auto;min-width:0;}
.d-en{font-size:15px;line-height:1.72;}
.d-zh{font-size:13px;color:var(--dim);line-height:1.65;margin-top:6px;padding-top:6px;border-top:1px dashed var(--line);}
.d-zh.hide{display:none;}
.d-line .spk,.g-para .spk{position:absolute;right:12px;top:12px;}
.g-para{padding:13px 52px 13px 15px;border-radius:var(--r-md);background:rgba(255,255,255,.03);border:1px solid var(--line);position:relative;}
.p-grammar{display:flex;flex-direction:column;gap:12px;}
.g-card{padding:15px 17px;border-radius:var(--r-md);background:rgba(255,255,255,.045);border:1px solid var(--line);}
.g-card h4{font-size:14.5px;display:flex;align-items:center;gap:9px;color:#9ff0c4;}
.g-num{width:22px;height:22px;border-radius:var(--r-sm);background:rgba(110,220,160,.22);display:grid;place-items:center;font-size:11.5px;}
.g-card p{font-size:13.5px;color:var(--dim);line-height:1.78;margin-top:8px;}
.g-ex{font-family:var(--font-mono);font-size:12.5px;background:rgba(0,0,0,.34);border-left:2px solid #6fdc9b;padding:9px 12px;border-radius:0 var(--r-sm) var(--r-sm) 0;margin-top:10px;line-height:1.7;}
.q-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:14px;}
.q-count{font-size:12px;color:var(--faint);}
.q-dots{display:flex;gap:6px;margin-left:auto;}
.q-dot{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.16);display:inline-block;}
.q-dot.ok{background:#5fe0a0;}
.q-dot.no{background:#ff6b81;}
.q-dot.now{background:#ffd166;transform:scale(1.35);box-shadow:0 0 10px #ffd166;}
.q-text{font-size:17px;line-height:1.7;margin-bottom:16px;}
.q-opts{display:flex;flex-direction:column;gap:10px;}
.q-opt{
  display:flex;align-items:center;gap:12px;text-align:left;font:inherit;color:inherit;
  padding:13px 16px;border-radius:var(--r-md);background:rgba(255,255,255,.045);
  border:1px solid var(--line);cursor:pointer;transition:var(--d-base) var(--ease);
}
.q-opt:hover:not(.locked){background:rgba(255,255,255,.1);transform:translateX(3px);}
.q-opt .q-k{flex:0 0 26px;height:26px;border-radius:var(--r-sm);display:grid;place-items:center;background:rgba(255,255,255,.08);font-size:12px;font-weight:700;}
.q-opt.ok{border-color:rgba(95,224,160,.6);background:rgba(95,224,160,.14);}
.q-opt.ok .q-k{background:#5fe0a0;color:#04140c;}
.q-opt.no{border-color:rgba(255,107,129,.55);background:rgba(255,107,129,.13);}
.q-opt.no .q-k{background:#ff6b81;color:#1a0409;}
.q-opt.locked{cursor:default;}
.q-fb{margin-top:14px;padding:13px 16px;border-radius:var(--r-md);font-size:13.5px;line-height:1.75;}
.q-fb b{display:block;margin-bottom:4px;}
.q-fb.good{background:rgba(95,224,160,.12);border:1px solid rgba(95,224,160,.35);}
.q-fb.bad{background:rgba(255,107,129,.12);border:1px solid rgba(255,107,129,.32);}
.r-wrap{text-align:center;padding:6px 0;}
.r-stars{font-size:48px;letter-spacing:9px;color:#ffd166;text-shadow:0 6px 26px rgba(255,190,60,.4);}
.r-stars .off{color:rgba(255,255,255,.16);text-shadow:none;}
.r-title{font-size:23px;margin-top:10px;}
.r-sub{font-size:13.5px;color:var(--dim);margin-top:8px;}
.r-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:11px;margin:20px 0 4px;}
.r-item{padding:14px;border-radius:var(--r-md);background:rgba(255,255,255,.05);border:1px solid var(--line);}
.r-item b{display:block;font-size:20px;font-variant-numeric:tabular-nums;}
.r-item span{font-size:11.5px;color:var(--faint);}
.r-unlock{margin-top:16px;padding:13px;border-radius:var(--r-md);background:rgba(255,209,102,.12);border:1px dashed rgba(255,209,102,.45);font-size:13.5px;color:#f0d78a;}

@media (max-width:900px){
  .books{position:static;flex-direction:row;width:auto;padding:0 16px;margin-top:4px;overflow-x:auto;}
  .book-tab{flex:0 0 auto;}
  .book-tab .b-meta i{display:none;}
  .hud-top{padding:12px 16px;}
  .hud-right{width:100%;}
  .xpwrap{flex:1 1 100%;}
}
@media (max-width:560px){
  .controls{display:none;}
  .hintbar{font-size:10.5px;padding:6px 12px;}
  .legend{gap:10px;padding:8px 12px;font-size:10.5px;}
  .panel{left:12px;right:12px;width:auto;top:auto;bottom:96px;}
  .p-body{padding:16px 14px;}
  .p-head{padding:12px 14px;}
  .p-foot{padding:11px 14px;flex-direction:column;align-items:stretch;}
  .p-acts .btn{flex:1 1 auto;}
  .r-stars{font-size:38px;letter-spacing:6px;}
  .d-who{flex:0 0 52px;}
  .d-line{padding-left:12px;padding-right:46px;}
}

/* =========================================================
   设计系统基线（Design Pass · 第 1 轮）
   字体 / 色彩 / 间距 / 圆角 / 动效 / 阴影 全部走 token
   ========================================================= */
:root{
  /* 字体：不依赖 Inter / Roboto / Arial，中文优先，标题用衬线做气质区分 */
  --font-ui:"PingFang SC","HarmonyOS Sans SC","MiSans","Source Han Sans SC","Noto Sans SC","Hiragino Sans GB","Microsoft YaHei",system-ui,sans-serif;
  --font-display:"Songti SC","STSong","Source Han Serif SC","Noto Serif SC",Georgia,serif;
  --font-mono:"JetBrains Mono","Cascadia Mono",var(--font-mono);
  --font-emoji:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif;

  /* 色彩：两个主色（森林绿 + 琥珀金）+ 中性底，点缀色只出现在交互元素 */
  --c-bg:#08120e;
  --c-surface:rgba(255,255,255,.05);
  --c-surface-2:rgba(255,255,255,.085);
  --ink:#eaf4e6;
  --dim:#a9c0ae;
  --faint:#7d9885;
  --accent:#6fdc9b;
  --gold:#ffd166;
  /* 发丝线：不再用通用 1px 灰边 */
  --line:rgba(255,255,255,.09);
  --line-strong:rgba(255,255,255,.16);
  --glass:rgba(8,20,14,.55);

  /* 4px 基准网格 */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:40px; --s8:48px;

  /* 圆角：全局只用两档 + 胶囊 */
  --r-sm:8px; --r-md:12px; --r-pill:999px;

  /* 动效：只在 150–300ms 之间 */
  --d-fast:150ms; --d-base:200ms; --d-slow:250ms;
  --ease:cubic-bezier(.22,.61,.36,1);

  /* 阴影：多层柔和，替代生硬单层深色投影 */
  --sh-1:0 1px 2px rgba(0,0,0,.16), 0 2px 6px rgba(0,0,0,.12);
  --sh-2:0 2px 4px rgba(0,0,0,.18), 0 8px 20px rgba(0,0,0,.20);
  --sh-3:0 4px 10px rgba(0,0,0,.22), 0 20px 48px rgba(0,0,0,.28);
}

body{
  font-family:var(--font-ui);
  font-size:14px; font-weight:400; line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}
.title-card h1{font-family:var(--font-display); font-weight:700; letter-spacing:.02em;}
.panel h2,.p-title h2,.r-title,.rq .right,.fb .ans{font-weight:700;}
.xpwrap .lv,.eyebrow{font-weight:500;}
.spk,.iconbtn,.book-tab .b-emoji{font-family:var(--font-emoji);}

/* 圆角统一：容器 12px、小控件 8px、胶囊 99px */
.title-card,.panel,.controls,.legend,.modal,.player,.xpwrap,.pill,.hintbar,
.book-tab,.p-head,.p-foot,.w-card,.g-card,.d-line,.g-para,.q-opt,.q-fb,.r-item,.toast,
.lv,.kindcard,.card{border-radius:var(--r-md);}
.iconbtn,.panel-close,.spk,.g-num,.q-opt .q-k,.w-card,.chip,.btn.small{border-radius:var(--r-sm);}
.chip,.pill,.p-pill,.lv .badge,.legend{border-radius:var(--r-pill);}
.panel .btn{border-radius:var(--r-md);}

/* 发丝边框 + 内高光，替代「通用 1px 灰边」 */
@supports (border-width:.5px){
  .title-card,.panel,.panel-close,.controls,.legend,.modal,.player,.xpwrap,.pill,.hintbar,
  .book-tab,.w-card,.g-card,.d-line,.g-para,.q-opt,.q-fb,.q-fb.good,.q-fb.bad,.r-item,.r-unlock,
  .toast,.card,.kindcard,.lv,.p-pill,.p-tools .btn,.g-num,.q-opt .q-k,
  .btn,.panel .btn,.iconbtn,.spk,.chip{border-width:.5px;}
}
.title-card,.panel,.controls,.legend,.xpwrap,.pill,.hintbar,.book-tab,.w-card,.g-card,
.d-line,.g-para,.q-opt,.q-fb,.r-item,.toast,.card,.btn{
  box-shadow:var(--sh-1), inset 0 1px 0 rgba(255,255,255,.05);
}
.modal,.player{box-shadow:var(--sh-3), inset 0 1px 0 rgba(255,255,255,.06);}

/* 动效时长统一（覆盖原先 .15/.16/.18s 等零散取值） */
.chip,.iconbtn,.btn,.book-tab,.w-card,.q-opt,.spk,.panel-close,.pill,.lv,.g-card,.r-item{
  transition:background-color var(--d-fast) var(--ease),
             border-color var(--d-fast) var(--ease),
             color var(--d-fast) var(--ease),
             box-shadow var(--d-slow) var(--ease),
             transform var(--d-slow) var(--ease),
             filter var(--d-fast) var(--ease);
}

/* =========================================================
   微交互（Design Pass · 第 2 轮）
   ========================================================= */

/* 1. 顶栏：从透明过渡到毛玻璃。本站是满屏画布没有页面滚动，
      所以把触发时机接到「打开面板 / 进入关卡 / 正在拖动画面」这三个等同场景。 */
.hud-top{
  background:linear-gradient(180deg,rgba(6,16,11,0) 0%,rgba(6,16,11,0) 100%);
  backdrop-filter:blur(0px);
  -webkit-backdrop-filter:blur(0px);
  transition:background var(--d-base) var(--ease), backdrop-filter var(--d-base) var(--ease), padding var(--d-base) var(--ease);
}
body.ui-open .hud-top,
body.dragging-scene .hud-top{
  background:linear-gradient(180deg,rgba(6,16,11,.72) 0%,rgba(6,16,11,.28) 70%,rgba(6,16,11,0) 100%);
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
}

/* 2. 所有按钮：hover 变亮 10% + 放大 1.05 */
.btn:hover,.iconbtn:hover,.panel-close:hover,.chip:hover,.q-opt:not(.locked):hover,
.book-tab:hover,.lv:not(.locked):hover,.p-acts .btn:hover{
  filter:brightness(1.10);
  transform:scale(1.05);
  border-color:var(--line-strong);
}
.btn:active,.iconbtn:active,.chip:active,.q-opt:not(.locked):active,.book-tab:active{transform:scale(.98);}
.panel .btn:hover{filter:brightness(1.10);transform:scale(1.05);}

/* 3. 徽章 / 标签：hover 旋转 3° 并轻微变色 */
.pill:hover,.p-pill:hover,.lv .badge:hover,.q-tag:hover{
  transform:rotate(3deg) scale(1.04);
  background:rgba(255,255,255,.12);
  color:var(--ink);
}

/* 4. 卡片：hover 上浮 8px，阴影由柔和转为略深 */
.w-card:hover,.g-card:hover,.r-item:hover,.kindcard:hover{
  transform:translateY(-8px);
  box-shadow:var(--sh-3), inset 0 1px 0 rgba(255,255,255,.07);
  border-color:var(--line-strong);
}
/* 列表行（选项、册别）保持小幅位移，避免大幅跳动影响阅读 */
.q-opt:not(.locked):hover,.book-tab:hover{transform:translateY(-2px) scale(1.01);}

/* 5. 进场：内容从下方 20px 淡入（由 IntersectionObserver 加 .in） */
.reveal{opacity:0;transform:translateY(20px);}
.reveal.in{
  opacity:1;transform:none;
  transition:opacity var(--d-slow) var(--ease), transform var(--d-slow) var(--ease);
}

/* 6. 图标：hover 轻微弹跳（上移 4px 再回弹） */
@keyframes icon-bounce{0%{transform:translateY(0)}45%{transform:translateY(-4px)}70%{transform:translateY(1px)}100%{transform:translateY(0)}}
.spk:hover,.iconbtn:hover,.panel-close:hover{animation:icon-bounce 300ms var(--ease);}

/* 焦点可见（键盘可达性） */
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:var(--r-sm);}

/* 尊重系统「减少动态效果」 */
@media (prefers-reduced-motion:reduce){
  *{animation-duration:1ms !important;animation-iteration-count:1 !important;transition-duration:1ms !important;}
  .reveal{opacity:1;transform:none;}
}