/* ================================================================
   知识葡萄树 · 小学全科知识生命树
   首页 = 自上而下生长的葡萄藤；串内递归下钻，已下钻的葡萄停靠左侧
   ================================================================ */

/* ---------- RESET & VARIABLES ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  --bg:#06081a;
  --bg2:#0c1029;
  --glass:rgba(16,20,48,.72);
  --glass-border:rgba(120,160,255,.12);
  --text:#e4e8f7;
  --text2:#8892b0;
  --text3:#5a6380;

  /* Lego accent per subject (set via JS) */
  --accent:#4DE3FF;
  --accent2:#8B7CFF;
  --accent-glow:rgba(77,227,255,.25);

  /* Lego brick base */
  --brick-radius:14px;
  --stud-size:10px;

  /* Sizes */
  --hud-h:56px;
  --radius:16px;
  --radius-sm:10px;
}

html,body{
  height:100%;
  font-family:'PingFang SC','Noto Sans SC','Microsoft YaHei',system-ui,sans-serif;
  background:var(--bg);
  color:var(--text);
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
}

/* ---------- STARFIELD ---------- */
#starfield{
  position:fixed;inset:0;z-index:0;
  pointer-events:none;
}

/* ---------- SPLASH ---------- */
.splash{
  position:fixed;inset:0;z-index:100;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:radial-gradient(ellipse at 50% 40%,rgba(30,40,100,.6) 0%,var(--bg) 70%);
  transition:opacity .6s,transform .6s;
}
.splash.hidden{opacity:0;pointer-events:none;transform:scale(1.05);}

.splash-orbit{position:relative;width:140px;height:140px;margin-bottom:28px;}
.s-ring{
  position:absolute;inset:0;
  border:1.5px solid rgba(120,180,255,.18);
  border-radius:50%;
  animation:orbit-spin 12s linear infinite;
}
.s-ring.sr1{inset:10px;border-color:rgba(77,227,255,.25);animation-duration:8s;}
.s-ring.sr2{inset:24px;border-color:rgba(139,124,255,.2);animation-duration:16s;animation-direction:reverse;}
.s-ring.sr3{inset:38px;border-color:rgba(75,242,192,.15);animation-duration:10s;}
.s-core{
  position:absolute;
  top:50%;left:50%;transform:translate(-50%,-50%);
  width:48px;height:48px;
  border-radius:50%;
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  display:flex;align-items:center;justify-content:center;
  font-size:22px;font-weight:700;color:#fff;
  box-shadow:0 0 30px var(--accent-glow),0 0 60px rgba(139,124,255,.15);
}

.splash-eyebrow{
  font-size:11px;letter-spacing:4px;text-transform:uppercase;
  color:var(--text2);margin-bottom:8px;
}
.splash-title{
  font-size:42px;font-weight:800;
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;
  margin-bottom:8px;
}
.splash-sub{font-size:15px;color:var(--text2);margin-bottom:28px;}

.splash-tags{display:flex;gap:10px;margin-bottom:32px;flex-wrap:wrap;justify-content:center;}
.splash-tags span{
  padding:6px 14px;border-radius:20px;font-size:12px;font-weight:600;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);
  color:var(--c,var(--accent));
}

.splash-enter{
  padding:14px 40px;border:none;border-radius:28px;cursor:pointer;
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  color:#fff;font-size:16px;font-weight:700;
  box-shadow:0 4px 24px var(--accent-glow);
  transition:transform .2s,box-shadow .2s;
}
.splash-enter:hover{transform:translateY(-2px);box-shadow:0 8px 32px var(--accent-glow);}
.splash-enter span{display:inline-block;transition:transform .2s;}
.splash-enter:hover span{transform:translateX(4px);}

/* ---------- VIEW SYSTEM ---------- */
.view{
  position:fixed;inset:0;z-index:10;
  display:flex;flex-direction:column;
  opacity:0;pointer-events:none;
  transition:opacity .4s;
}
.view.active{opacity:1;pointer-events:auto;}

/* ---------- HOME VIEW · 葡萄树 ---------- */
.home-header{
  position:relative;z-index:3;
  display:flex;align-items:center;justify-content:space-between;
  gap:16px;padding:16px 26px 0;flex-shrink:0;
}
.brand{display:flex;align-items:center;gap:10px;}
.logo-mark{width:34px;height:34px;color:var(--accent);}
.logo-mark svg{width:100%;height:100%;display:block;}
.brand-title{font-size:17px;font-weight:800;color:var(--text);letter-spacing:1px;}
.brand-sub{font-size:9px;letter-spacing:3px;color:var(--text3);text-transform:uppercase;}
/* ---------- GRADE PICKER · 我的年级 ---------- */
.grade-picker{display:flex;align-items:center;}
.gp-btn{
  display:flex;align-items:center;gap:9px;
  padding:6px 13px;border-radius:20px;cursor:pointer;font-family:inherit;
  background:var(--glass);border:1px solid var(--glass-border);
  color:var(--text2);transition:.25s;
}
.gp-btn:hover,.gp-btn.open{border-color:var(--accent);color:var(--text);background:rgba(77,227,255,.07);}
.gp-btn.picked{border-color:var(--accent);box-shadow:0 0 14px rgba(77,227,255,.14);}
.gp-ico{display:flex;width:19px;height:19px;color:var(--accent);}
.gp-ico svg{width:100%;height:100%;display:block;}
.gp-text{display:flex;flex-direction:column;align-items:flex-start;line-height:1.25;}
.gp-text em{font-style:normal;font-size:9px;letter-spacing:2px;color:var(--text3);}
.gp-text b,.gp-value{font-size:12.5px;font-weight:800;color:var(--text);letter-spacing:.5px;white-space:nowrap;}
.gp-caret{font-style:normal;font-size:10px;color:var(--text3);}
.gp-mini{margin-left:auto;padding:5px 11px;gap:7px;flex-shrink:0;}
.gp-mini .gp-tag{font-size:9px;letter-spacing:2px;color:var(--text3);}
.gp-mini .gp-value{font-size:12px;}

.gp-menu{
  position:fixed;z-index:70;min-width:216px;max-height:min(346px,70vh);overflow-y:auto;
  overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
  touch-action:pan-y;
  padding:7px;border-radius:15px;
  background:rgba(11,15,38,.97);border:1px solid var(--glass-border);
  box-shadow:0 20px 54px rgba(0,0,0,.62);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  animation:gp-in .18s ease-out;
}
.gp-menu::-webkit-scrollbar{width:5px;}
.gp-menu::-webkit-scrollbar-thumb{background:rgba(120,160,255,.3);border-radius:3px;}
@keyframes gp-in{from{opacity:0;transform:translateY(-7px)}to{opacity:1;transform:none}}
/* 口径说明：选年级是「这个年级及以下」，不说清楚家长以为数据少了 */
.gp-tip{
  font-size:10px;line-height:1.5;color:var(--text3);
  padding:8px 10px;margin:0 0 2px;border-bottom:1px solid rgba(120,160,255,.16);
  background:rgba(77,227,255,.05);border-radius:10px 10px 0 0;
}
.gp-sec{
  font-size:9px;letter-spacing:3px;color:var(--text3);
  padding:9px 10px 5px;text-transform:uppercase;
}
.gp-opt{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:8px 11px;border-radius:10px;cursor:pointer;
  font-size:12.5px;color:var(--text2);transition:.18s;
}
.gp-opt:hover{background:rgba(77,227,255,.09);color:var(--text);}
.gp-opt.on{background:rgba(77,227,255,.14);color:#fff;font-weight:700;}
.gp-opt.on b{color:var(--accent);}
.gp-opt.dim{opacity:.45;}
.gp-opt b{font-size:10.5px;font-weight:600;color:var(--text3);letter-spacing:.5px;}
.home-footer{
  position:relative;z-index:3;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;gap:18px;
  padding:12px 26px 18px;
}
.home-hint{font-size:11px;color:var(--text3);}
.hud-btn-sm{
  background:var(--glass);border:1px solid var(--glass-border);
  color:var(--text2);font-size:12px;padding:6px 14px;border-radius:20px;
  cursor:pointer;transition:.25s;font-family:inherit;
}
.hud-btn-sm:hover{color:var(--text);border-color:var(--accent);background:rgba(77,227,255,.06);}

/* ---------- HOME VIEW · 葡萄树（藤自上而下生长） ---------- */
.vine-wrap{
  position:relative;z-index:2;flex:1;min-height:0;
  overflow-y:auto;overflow-x:hidden;
  padding:0 22px 46px;
}
.vine-wrap::-webkit-scrollbar{width:6px;}
.vine-wrap::-webkit-scrollbar-thumb{background:rgba(120,160,255,.22);border-radius:3px;}
.vine-scene{position:relative;max-width:1120px;margin:0 auto;min-height:100%;}

/* ① 顶部棚架主藤 */
.vine-trellis{position:relative;width:100%;height:112px;margin-top:-8px;}
.vine-trellis svg{width:100%;height:100%;display:block;overflow:visible;}
.vine-trunk{stroke:#5c3f26;stroke-width:15;stroke-linecap:round;fill:none;
  filter:drop-shadow(0 8px 20px rgba(0,0,0,.65));}
.vine-twig{stroke:#6d4c2d;stroke-width:7;stroke-linecap:round;fill:none;}
.vine-tendril{stroke:#4f9a4a;stroke-width:2.4;fill:none;stroke-linecap:round;opacity:.8;
  animation:tendril-sway 7s ease-in-out infinite;}
.vine-leaf{stroke-width:11;stroke-linejoin:round;}
.vine-leaf.l1{fill:#3d9b4a;stroke:#3d9b4a;opacity:.92;}
.vine-leaf.l2{fill:#2c7a38;stroke:#2c7a38;opacity:.78;}
.vine-leaf.l3{fill:#1f5c2c;stroke:#1f5c2c;opacity:.6;}
@keyframes tendril-sway{0%,100%{transform:translateX(0)}50%{transform:translateX(4px)}}

/* ② 主干藤：从棚架正中一路往下长，贯穿小学 → 初中 → 高中 */
.vine-spine{
  position:absolute;left:50%;top:78px;bottom:34px;width:120px;
  transform:translateX(-50%);z-index:0;pointer-events:none;overflow:visible;
}
.spine-line{
  fill:none;stroke:#5c3f26;stroke-width:9;stroke-linecap:round;
  vector-effect:non-scaling-stroke;
  filter:drop-shadow(0 6px 14px rgba(0,0,0,.6));
}
.spine-line.s2{stroke:#7a5734;stroke-width:3;opacity:.55;}

/* ③ 学段 */
.vine-zone{position:relative;z-index:2;padding-bottom:22px;}
.zone-head{
  display:flex;justify-content:center;margin:2px 0 26px;
}
.zone-head span{
  display:flex;align-items:center;gap:12px;
  padding:6px 18px;border-radius:22px;
  background:rgba(9,12,32,.82);border:1px solid rgba(120,160,255,.13);
  box-shadow:0 6px 20px rgba(0,0,0,.4);
}
.zone-name{font-size:14px;font-weight:800;letter-spacing:6px;color:var(--text2);}
.zone-note{font-size:10px;letter-spacing:2px;color:var(--text3);}
.zone--born .zone-name{color:#E8D6FF;}
.zone--dormant{opacity:.72;}
.zone--active .zone-head span{
  border-color:var(--accent);
  box-shadow:0 0 0 1px rgba(77,227,255,.28),0 6px 22px rgba(0,0,0,.4);
}
.zone--active .zone-name{color:#fff;text-shadow:0 0 14px var(--accent-glow);}

/* ④ 三串从棚架垂下，错落分列左右；主干藤继续往下走 */
.zone-grid{display:grid;grid-template-columns:repeat(3,1fr);align-items:start;}
.vine-item{
  --stag:0px;--stem:58px;
  position:relative;width:176px;margin-top:var(--stag);justify-self:center;
  animation:item-drop .85s cubic-bezier(.34,1.4,.64,1) backwards;
}
.vine-item.side-c{--stag:70px;--stem:128px;}
.vine-item.side-r{--stag:30px;--stem:88px;}
.item-branch{
  position:absolute;left:50%;top:calc(-1 * var(--stem));
  width:7px;height:var(--stem);margin-left:-3.5px;border-radius:5px;
  background:linear-gradient(90deg,#3f2c18,#8a6640 45%,#4a3520);
  box-shadow:0 3px 10px rgba(0,0,0,.5);
}
.item-branch::before{
  content:'';position:absolute;left:-24px;top:14px;width:44px;height:28px;
  background:linear-gradient(135deg,#5fd06f,#1c6b32);
  border-radius:0 100% 0 100%;transform:rotate(-22deg);
  box-shadow:0 4px 12px rgba(0,0,0,.4);
}
.item-branch::after{
  content:'';position:absolute;right:-2px;top:6px;width:16px;height:16px;
  border:2px solid rgba(79,154,74,.85);border-radius:50% 50% 50% 0;
  border-left-color:transparent;border-bottom-color:transparent;
  transform:rotate(30deg);
}
.vine-item.side-r .item-branch::before{left:auto;right:-24px;transform:rotate(22deg) scaleX(-1)}
@keyframes item-drop{from{opacity:0;transform:translateY(-16px)}to{opacity:1;transform:none}}

.bunch{
  position:relative;width:176px;height:236px;flex-shrink:0;
  background:none;border:0;padding:0;cursor:pointer;font-family:inherit;
  transition:transform .4s cubic-bezier(.34,1.56,.64,1),filter .4s;
}
.bunch:hover{transform:translateY(-11px) scale(1.05);filter:brightness(1.12);}
.bunch:active{transform:translateY(-4px) scale(1.01);}
.bunch-grapes{
  position:absolute;inset:0 0 56px;
  transform-origin:50% -8px;
  animation:bunch-sway 7s ease-in-out infinite;
}
.bunch:nth-child(2) .bunch-grapes{animation-delay:-2.3s;}
@keyframes bunch-sway{0%,100%{transform:rotate(-1.6deg)}50%{transform:rotate(1.6deg)}}
.bunch-stem{
  position:absolute;left:50%;top:-6px;width:6px;height:34px;
  transform:translateX(-50%);border-radius:4px;
  background:linear-gradient(180deg,#8a6640,#4a3520);
  box-shadow:0 3px 8px rgba(0,0,0,.5);
}
.bunch-leaf{
  position:absolute;left:53%;top:0;width:56px;height:36px;
  background:linear-gradient(135deg,#5fd06f,#1c6b32);
  border-radius:0 100% 0 100%;
  transform-origin:0 100%;transform:rotate(-16deg);
  box-shadow:0 5px 14px rgba(0,0,0,.45);
  animation:leaf-flutter 5.5s ease-in-out infinite;
}
@keyframes leaf-flutter{0%,100%{transform:rotate(-16deg)}50%{transform:rotate(-7deg)}}

.bg{
  position:absolute;transform:translate(-50%,-50%);border-radius:50%;
  background:radial-gradient(circle at 42% 38%,#6b3fa0 0%,#3a1f5e 58%,#1a0d2c 100%);
  box-shadow:inset -5px -8px 14px rgba(0,0,0,.55),0 3px 9px rgba(0,0,0,.4);
}
.bg::after{
  content:'';position:absolute;inset:0;border-radius:50%;
  background:
    radial-gradient(circle at 32% 26%,rgba(255,255,255,.92) 0 7%,rgba(255,255,255,.2) 16%,transparent 34%),
    radial-gradient(circle at 50% 52%,var(--gc) 0%,transparent 82%);
  opacity:.18;transition:opacity .6s;
}
.bg.lit::after{opacity:1;}
.bg.lit{box-shadow:inset -4px -6px 11px rgba(0,0,0,.4),0 0 15px var(--gg),0 0 32px var(--gg);}

.bunch-cap{
  position:absolute;left:0;right:0;bottom:0;height:60px;
  display:flex;flex-direction:column;align-items:center;gap:2px;
}
.bunch-name{font-size:20px;font-weight:800;letter-spacing:3px;color:var(--gc);}
.bunch-en{font-size:9px;letter-spacing:3px;color:var(--text3);text-transform:uppercase;}
.bunch-stat{display:flex;align-items:center;gap:8px;margin-top:3px;}
.bunch-ring{position:relative;width:26px;height:26px;}
.bunch-ring svg{width:100%;height:100%;transform:rotate(-90deg);}
.bunch-ring-bg{fill:none;stroke:rgba(255,255,255,.09);stroke-width:3;}
.bunch-ring-fg{fill:none;stroke:var(--gc);stroke-width:3;stroke-linecap:round;transition:stroke-dashoffset .7s;}
.bunch-count{font-size:11px;color:#fff;letter-spacing:.5px;opacity:.82;}
.bunch-void{
  margin-top:4px;font-size:10.5px;letter-spacing:1px;color:var(--text3);
  padding:4px 10px;border-radius:14px;
  background:rgba(255,255,255,.04);border:1px dashed rgba(160,180,220,.22);
}
.bunch--empty{opacity:.42;filter:saturate(.3);}
.bunch--empty:hover{transform:translateY(-4px);filter:saturate(.45) brightness(1.05);}

/* ⑤ 未结果的学段：花蕾与嫩梢 */
.dormant-card{
  max-width:660px;margin:0 auto;padding:16px 20px 18px;
  border-radius:18px;border:1px dashed rgba(120,160,255,.22);
  background:linear-gradient(180deg,rgba(16,20,48,.6),rgba(10,13,36,.3));
}
.bud-row{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;}
.bud{
  display:inline-flex;align-items:center;gap:6px;
  padding:5px 12px;border-radius:16px;font-size:11px;color:var(--text3);
  background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.07);
}
.bud i{width:8px;height:8px;border-radius:50%;background:#2f2a45;
  box-shadow:inset -1px -2px 3px rgba(0,0,0,.6);}
.dormant-note{margin-top:12px;text-align:center;font-size:11px;letter-spacing:1px;color:var(--text3);}
.vine-shoot{
  position:relative;z-index:1;width:120px;height:104px;margin:-6px auto 0;
  animation:shoot-sway 6s ease-in-out infinite;
}
.vine-shoot svg{width:100%;height:100%;overflow:visible;}
.shoot-curl{fill:none;stroke:#4f9a4a;stroke-width:4;stroke-linecap:round;opacity:.85;}
@keyframes shoot-sway{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(3deg)}}

/* ---------- ORBIT · 葡萄串内部递归下钻 ---------- */
.level-hud{
  position:relative;z-index:4;flex-shrink:0;
  display:flex;align-items:center;gap:14px;
  padding:14px 22px;
  border-bottom:1px solid rgba(120,160,255,.08);
  background:linear-gradient(180deg,rgba(10,13,36,.9),rgba(10,13,36,.35));
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
}
.back-btn{
  display:flex;align-items:center;gap:6px;flex-shrink:0;
  background:var(--glass);border:1px solid var(--glass-border);
  color:var(--text2);font-size:12px;padding:7px 14px;border-radius:20px;
  cursor:pointer;transition:.25s;font-family:inherit;
}
.back-btn:hover{color:var(--text);border-color:var(--accent);background:rgba(77,227,255,.07);}
.level-title{flex:1;min-width:0;font-size:13px;color:var(--text2);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.level-title b{color:var(--gc,var(--accent));font-weight:700;}
.level-progress{display:flex;align-items:center;gap:8px;font-size:11px;color:var(--text2);flex-shrink:0;}
.lp-bar{width:96px;height:6px;border-radius:3px;background:rgba(255,255,255,.07);overflow:hidden;}
.lp-fill{height:100%;border-radius:3px;background:linear-gradient(90deg,var(--gc,var(--accent)),var(--gc2,var(--accent2)));transition:width .5s;}

.orbit{position:relative;z-index:2;flex:1;min-height:0;display:flex;align-items:stretch;}

/* 左侧：已下钻的大葡萄 */
.dock{
  position:relative;
  width:158px;flex-shrink:0;
  display:flex;flex-direction:column;align-items:center;gap:10px;
  padding:22px 10px 30px;overflow-y:auto;
  border-right:1px solid rgba(120,160,255,.07);
  background:linear-gradient(180deg,rgba(12,16,41,.55),rgba(12,16,41,.12));
}
/* 路径主干藤：停靠的葡萄一路挂在上面 */
.dock::before{
  content:'';position:absolute;left:50%;top:4px;bottom:12px;width:6px;margin-left:-3px;z-index:0;
  border-radius:4px;background:linear-gradient(90deg,#3f2c18,#8a6640 45%,#4a3520);
  box-shadow:0 0 14px rgba(0,0,0,.55);opacity:.9;
}
.dock-item{
  position:relative;z-index:1;
  flex-shrink:0;background:none;border:0;padding:2px;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;gap:5px;font-family:inherit;
  transition:transform .3s;
}
.dock-item::after{
  content:'';position:absolute;left:calc(50% + 9px);top:-2px;width:20px;height:13px;
  background:linear-gradient(135deg,#5fd06f,#1c6b32);
  border-radius:0 100% 0 100%;transform:rotate(-16deg);
  opacity:.75;box-shadow:0 3px 8px rgba(0,0,0,.4);pointer-events:none;
}
.dock-item:hover{transform:translateY(-3px);}
.dock-item .grape-label{margin-top:5px;font-size:11px;max-width:130px;
  padding:2px 8px;border-radius:9px;background:rgba(9,12,32,.86);}
.dock-item.fly{animation:dock-in .55s cubic-bezier(.2,.9,.3,1.15);}
@keyframes dock-in{
  0%{opacity:.35;transform:translateX(240px) scale(2.6)}
  60%{opacity:1}
  100%{opacity:1;transform:none}
}
.dock-sep{width:5px;height:13px;border-radius:3px;flex-shrink:0;z-index:1;
  background:linear-gradient(#8a6640,#4a3520);box-shadow:0 0 8px rgba(0,0,0,.5);}

/* 主区：本级的葡萄颗粒 */
.stage{
  flex:1;min-width:0;overflow-y:auto;overflow-x:hidden;
  display:flex;flex-direction:column;align-items:center;
  padding:20px 24px 40px;
}
.stage-head{text-align:center;margin-bottom:6px;max-width:760px;}
.stage-kicker{font-size:10px;letter-spacing:4px;color:var(--text3);text-transform:uppercase;margin-bottom:8px;}
.stage-title{font-size:26px;font-weight:800;letter-spacing:1px;
  background:linear-gradient(90deg,var(--gc,var(--accent)),var(--gc2,var(--accent2)));
  -webkit-background-clip:text;background-clip:text;color:transparent;margin-bottom:8px;}
.stage-desc{font-size:13px;color:var(--text2);line-height:1.7;}
.stage-hint{font-size:11px;color:var(--text3);margin-top:10px;letter-spacing:1px;}

.stage-grapes{
  width:100%;max-width:1080px;margin-top:18px;
  display:flex;flex-direction:column;align-items:center;
}
/* 每一排葡萄都挂在一条横藤上 */
.grape-row{
  --cw:176px;
  position:relative;display:flex;justify-content:center;align-items:flex-start;
  width:100%;padding-top:32px;
}
.grape-row+.grape-row{margin-top:6px;}
.grape-row.row-taper{margin-top:2px;}
.grape-row::before{
  content:'';position:absolute;left:50%;right:auto;transform:translateX(-50%);
  width:calc(var(--cols,3) * var(--cw));max-width:96%;top:13px;height:4px;border-radius:4px;
  background:linear-gradient(90deg,transparent,#3f2c18 9%,#8a6640 50%,#3f2c18 91%,transparent);
  box-shadow:0 3px 10px rgba(0,0,0,.5);
}
.grape-row::after{
  content:'';position:absolute;top:6px;left:calc(50% - var(--cols,3) * var(--cw) / 2 + 26px);
  width:22px;height:14px;
  background:linear-gradient(135deg,#5fd06f,#1c6b32);
  border-radius:0 100% 0 100%;transform:rotate(-20deg);
  opacity:.78;box-shadow:0 3px 8px rgba(0,0,0,.4);
}
.grape-row.row-taper::after{display:none;}

.grape{
  position:relative;background:none;border:0;padding:8px 4px;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;
  width:168px;font-family:inherit;
  animation:grape-pop .5s cubic-bezier(.34,1.56,.64,1) backwards;
}
/* 果梗：把葡萄吊在藤上 */
.grape::before{
  content:'';position:absolute;left:50%;top:-24px;width:4px;height:32px;margin-left:-2px;
  border-radius:3px;background:linear-gradient(90deg,#3f2c18,#8a6640 45%,#4a3520);
  box-shadow:0 2px 7px rgba(0,0,0,.45);
}
@keyframes grape-pop{
  from{opacity:0;transform:translateY(26px) scale(.45)}
  to{opacity:1;transform:none}
}
.grape-ball{
  position:relative;border-radius:50%;display:grid;place-items:center;
  background:radial-gradient(circle at 42% 38%,#6b3fa0 0%,#3a1f5e 58%,#180c28 100%);
  box-shadow:inset -7px -10px 18px rgba(0,0,0,.55),0 7px 20px rgba(0,0,0,.45);
  transition:transform .32s cubic-bezier(.34,1.56,.64,1),box-shadow .32s,filter .32s;
}
.grape-ball::after{
  content:'';position:absolute;inset:0;border-radius:50%;
  background:
    radial-gradient(circle at 32% 26%,rgba(255,255,255,.9) 0 7%,rgba(255,255,255,.2) 16%,transparent 35%),
    radial-gradient(circle at 50% 52%,var(--gc) 0%,transparent 82%);
  opacity:.22;transition:opacity .45s;pointer-events:none;
}
.grape-stem{
  position:absolute;left:50%;top:-7px;width:3px;height:11px;
  transform:translateX(-50%);border-radius:2px;
  background:linear-gradient(#8a6640,#4a3520);
}
.grape:hover .grape-ball{transform:translateY(-8px) scale(1.07);filter:brightness(1.15);}
.grape:hover .grape-ball::after{opacity:.6;}
.grape.lit .grape-ball::after{opacity:1;}
.grape.lit .grape-ball{
  box-shadow:inset -6px -8px 15px rgba(0,0,0,.38),0 0 22px var(--gg),0 0 48px var(--gg);
}
.grape.current .grape-ball{box-shadow:inset -6px -8px 15px rgba(0,0,0,.4),0 0 0 2px var(--gc),0 0 26px var(--gg);}

.grape-ring{position:absolute;inset:-10px;transform:rotate(-90deg);pointer-events:none;}
.gring-bg{fill:none;stroke:rgba(255,255,255,.07);stroke-width:2.5;}
.gring-fg{fill:none;stroke:var(--gc);stroke-width:2.5;stroke-linecap:round;
  filter:drop-shadow(0 0 5px var(--gg));transition:stroke-dashoffset .7s;}

.grape-text{
  position:relative;z-index:2;
  width:78%;max-height:84%;overflow:hidden;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4;
  text-align:center;line-height:1.24;font-weight:700;color:#fff;
  letter-spacing:.2px;word-break:break-word;overflow-wrap:anywhere;
  text-shadow:0 1px 6px rgba(0,0,0,.85);
}
.grape-icon{position:relative;z-index:2;font-size:22px;line-height:1;filter:drop-shadow(0 2px 6px rgba(0,0,0,.6));}
.grape-stars{position:relative;z-index:2;display:flex;gap:4px;}
.grape-stars i{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.2);}
.grape-stars i.on{background:#fff;box-shadow:0 0 7px var(--gc);}
.grape-check{position:absolute;right:-2px;top:-2px;z-index:3;
  width:20px;height:20px;border-radius:50%;display:grid;place-items:center;
  font-size:11px;color:#0a0f24;font-weight:900;
  background:var(--gc);box-shadow:0 0 12px var(--gg);}

.grape-label{
  margin-top:9px;font-size:12px;line-height:1.4;color:#fff;
  text-align:center;max-width:152px;
}
.grape-meta{
  margin-top:5px;font-size:11px;color:#fff;opacity:.92;letter-spacing:.6px;
  display:flex;align-items:center;justify-content:center;gap:6px;flex-wrap:wrap;
}
.grape-meta .medal-tag{color:#FFB86B;opacity:1;}
.grape-meta .bank-tag{color:#9CFF8A;opacity:1;}
.meta-stars{display:inline-flex;gap:1px;}
.meta-stars i{font-style:normal;font-size:9px;line-height:1;color:rgba(255,255,255,.24);}
.meta-stars i.on{color:var(--gc,var(--accent));text-shadow:0 0 6px var(--gg,var(--gc));}

/* ---------- 全景/逐级 切换 ---------- */
.view-toggle{
  display:flex;flex-shrink:0;gap:2px;padding:2px;border-radius:16px;
  background:rgba(255,255,255,.05);border:1px solid var(--glass-border);
}
.vt-btn{
  border:0;background:none;color:var(--text3);font-family:inherit;cursor:pointer;
  font-size:11.5px;font-weight:700;letter-spacing:1px;padding:5px 12px;border-radius:14px;
  transition:.22s;
}
.vt-btn:hover{color:var(--text2);}
.vt-btn.on{
  color:#0a0f24;
  background:linear-gradient(135deg,var(--gc,var(--accent)),var(--gc2,var(--accent2)));
  box-shadow:0 0 14px var(--gg,rgba(77,227,255,.3));
}
.stage-flat{
  display:inline-block;font-size:11px;color:#9CFF8A;letter-spacing:.5px;
  padding:3px 10px;border-radius:10px;background:rgba(75,242,192,.09);
  border:1px solid rgba(75,242,192,.18);
}

/* ---------- 全景藤架 ---------- */
.vine-map{display:none;width:100%;max-width:1340px;margin:10px auto 34px;}
.is-map .vine-map{display:block;}
.is-map .dock{display:none;}
.is-map .stage-grapes{display:none;}
.is-map .stage{align-items:stretch;padding:12px 18px 30px;}
.is-map .stage-head{text-align:left;margin-bottom:2px;max-width:none;}
.is-map .stage-title{font-size:22px;}
/* 全景往下滚时，图例和统计留在顶上 */
.is-map .stage-head{
  position:sticky;top:0;z-index:3;margin:-12px -18px 0;padding:12px 18px 10px;
  background:linear-gradient(180deg,rgba(8,11,30,.97) 62%,rgba(8,11,30,.72) 88%,transparent);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
}

.map-counts{display:flex;flex-wrap:wrap;gap:6px 8px;margin-top:10px;}
.map-counts span{
  font-size:11px;color:var(--text2);letter-spacing:.5px;
  padding:4px 10px;border-radius:11px;background:rgba(255,255,255,.045);
  border:1px solid rgba(120,160,255,.1);
}
.map-counts b{font-size:13px;font-weight:800;color:var(--gc,var(--accent));margin-right:3px;}
.map-counts .mc-done{background:rgba(75,242,192,.09);border-color:rgba(75,242,192,.2);}
.map-counts .mc-done b{color:#4BF2C0;}

.map-legend{display:flex;flex-wrap:wrap;gap:4px 14px;margin-top:9px;}
.map-legend .ml{font-size:10.5px;color:var(--text3);letter-spacing:.4px;display:flex;align-items:center;gap:5px;}
.map-legend .ml::before{content:'';border-radius:50%;background:var(--gc,var(--accent));opacity:.75;}
.map-legend .ml1::before{width:13px;height:13px;}
.map-legend .ml2::before{width:10px;height:10px;}
.map-legend .ml3::before{width:8px;height:8px;opacity:.6;}
.map-legend .ml4::before{width:6px;height:6px;opacity:.45;}

.map-tools{display:flex;align-items:center;gap:8px;margin-top:11px;flex-wrap:wrap;}
.mt-btn{
  background:var(--glass);border:1px solid var(--glass-border);color:var(--text2);
  font-size:11px;font-family:inherit;padding:5px 12px;border-radius:14px;cursor:pointer;transition:.22s;
}
.mt-btn:hover{color:var(--text);border-color:var(--gc,var(--accent));background:rgba(77,227,255,.07);}
a.mt-btn{display:inline-block;line-height:1.4;text-decoration:none;}
a.hud-btn-sm{display:inline-flex;align-items:center;text-decoration:none;color:inherit;}
.mt-hint{font-size:10.5px;color:var(--text3);letter-spacing:.4px;}

.map-grid{
  display:grid;grid-template-columns:repeat(var(--mc,3),minmax(0,1fr));
  gap:20px 22px;align-items:start;margin-top:18px;
}
.map-branch{
  position:relative;padding:0 4px 0 20px;
  animation:map-in .55s cubic-bezier(.34,1.56,.64,1) backwards;
}
/* 主枝：一条粗藤从上垂到底 */
.map-branch::before{
  content:'';position:absolute;left:6px;top:6px;bottom:8px;width:6px;border-radius:5px;
  background:linear-gradient(180deg,#7a5734,#3f2c18 75%);
  box-shadow:0 0 10px rgba(0,0,0,.45);opacity:.85;
}
.map-branch::after{
  content:'';position:absolute;left:1px;top:-4px;width:20px;height:13px;
  background:linear-gradient(135deg,#5fd06f,#1c6b32);
  border-radius:0 100% 0 100%;transform:rotate(-18deg);opacity:.8;
  box-shadow:0 3px 8px rgba(0,0,0,.4);
}
.map-node{position:relative;padding:4px 6px 4px 16px;animation:map-in .5s cubic-bezier(.34,1.56,.64,1) backwards;}
.map-node.lv1{
  border-radius:14px;margin-bottom:4px;
  background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.012));
  border:1px solid rgba(120,160,255,.07);
}
.map-node.lv2{padding:2px 4px 2px 13px;}
/* 小枝：把每一串吊在粗藤上 */
.map-node::before{
  content:'';position:absolute;left:-6px;top:19px;width:14px;height:3px;border-radius:3px;
  background:linear-gradient(90deg,#7a5734,#3f2c18);
}
.map-body{padding:0 0 0 4px;}
.map-node.shut>.map-body{display:none;}
/* 收起态的「小串珠子」：只在 shut 时露出来 */
.map-dots{display:none;align-items:center;gap:6px;padding:3px 10px 7px 10px;cursor:pointer;}
.map-node.shut>.map-dots{display:flex;}
.map-dots:hover .map-dot{transform:scale(1.35);}
.map-dots:hover .map-dots-n{color:var(--gc,var(--accent));}
.map-dot{
  width:12px;height:12px;border-radius:50%;flex-shrink:0;transition:transform .2s,color .2s;
  background:radial-gradient(circle at 40% 36%,#7d54b8 0%,#43246b 60%,#1b0f2e 100%);
  box-shadow:inset -2px -3px 5px rgba(0,0,0,.55),0 2px 5px rgba(0,0,0,.4);
  position:relative;
}
.map-dot::after{
  content:'';position:absolute;inset:0;border-radius:50%;
  background:radial-gradient(circle at 50% 55%,var(--gc) 0%,transparent 80%);opacity:.45;
}
.map-dot.lit{box-shadow:inset -2px -3px 5px rgba(0,0,0,.4),0 0 9px var(--gg);}
.map-dots-n{font-size:9.5px;color:var(--text3);letter-spacing:.4px;white-space:nowrap;transition:.2s;}

.map-head{
  display:flex;align-items:center;gap:9px;width:100%;text-align:left;cursor:pointer;
  font-family:inherit;padding:6px 8px;border-radius:12px;transition:.22s;
  background:rgba(12,16,40,.42);border:1px solid rgba(120,160,255,.08);
}
.map-head:hover{background:rgba(77,227,255,.06);border-color:var(--gg);transform:translateX(2px);}
.map-head .mh-text{min-width:0;flex:1;display:flex;flex-direction:column;gap:2px;}
.mh-name{font-size:13px;font-weight:700;color:#fff;line-height:1.3;word-break:break-word;}
.mh-num{font-size:9.5px;color:var(--text3);letter-spacing:.4px;font-style:normal;}
.mh-caret{font-style:normal;font-size:10px;color:var(--text3);flex-shrink:0;transition:transform .25s;}
.map-node.shut>.map-head .mh-caret{transform:rotate(-90deg);}
.mh-go{
  font-style:normal;font-size:10px;color:var(--gc,var(--accent));flex-shrink:0;
  letter-spacing:.5px;opacity:.8;
}
.mh-ball{
  position:relative;flex-shrink:0;border-radius:50%;display:grid;place-items:center;
  background:radial-gradient(circle at 42% 38%,#6b3fa0 0%,#3a1f5e 58%,#180c28 100%);
  box-shadow:inset -5px -7px 12px rgba(0,0,0,.55),0 4px 12px rgba(0,0,0,.4);
}
.mh-ball::after{
  content:'';position:absolute;inset:0;border-radius:50%;
  background:radial-gradient(circle at 32% 26%,rgba(255,255,255,.85) 0 7%,rgba(255,255,255,.18) 16%,transparent 34%),
             radial-gradient(circle at 50% 52%,var(--gc) 0%,transparent 82%);
  opacity:.3;pointer-events:none;
}
.mh-ball .grape-ring{inset:-6px;}
.mh-check{
  position:absolute;right:-3px;top:-3px;z-index:3;width:15px;height:15px;border-radius:50%;
  display:grid;place-items:center;font-size:9px;font-weight:900;color:#0a0f24;
  background:var(--gc);box-shadow:0 0 9px var(--gg);
}
/* 主枝头：最粗，名字用主题色 */
.mh0{
  background:linear-gradient(135deg,rgba(255,255,255,.07),rgba(12,16,40,.5));
  border-color:var(--gg);padding:9px 10px;margin-bottom:8px;
}
.mh0 .mh-name{font-size:15.5px;font-weight:800;letter-spacing:.6px;color:var(--gc,var(--accent));}
.mh0 .mh-ball::after{opacity:.5;}
.mh0:hover{transform:none;background:linear-gradient(135deg,rgba(255,255,255,.11),rgba(12,16,40,.5));}
/* 模块头 */
.mh1 .mh-name{font-size:13.5px;}
/* 知识簇头：更轻，靠缩进和细线区分 */
.mh2{background:none;border:0;padding:5px 6px 3px;}
.mh2 .mh-name{font-size:12px;color:var(--text2);font-weight:600;}
.mh2:hover{transform:none;background:rgba(255,255,255,.04);}

/* 叶子葡萄：球小没关系，名字写在球下面 */
.map-leaves{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(82px,1fr));
  gap:3px 2px;padding:8px 0 10px 6px;
}
.mg{
  position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;
  padding:12px 3px 9px;background:none;border:0;cursor:pointer;font-family:inherit;
  border-radius:12px;transition:background .22s;
  animation:map-in .45s cubic-bezier(.34,1.56,.64,1) backwards;
}
.mg:hover{background:rgba(255,255,255,.05);}
/* 果梗 */
.mg::before{
  content:'';position:absolute;left:50%;top:3px;width:2px;height:9px;margin-left:-1px;
  border-radius:2px;background:linear-gradient(#7a5734,#3f2c18);
}
.mg-ball{
  position:relative;width:26px;height:26px;border-radius:50%;
  background:radial-gradient(circle at 42% 38%,#6b3fa0 0%,#3a1f5e 60%,#180c28 100%);
  box-shadow:inset -4px -5px 9px rgba(0,0,0,.55),0 3px 9px rgba(0,0,0,.4);
  transition:transform .28s cubic-bezier(.34,1.56,.64,1),box-shadow .28s;
}
.mg-ball::after{
  content:'';position:absolute;inset:0;border-radius:50%;
  background:
    radial-gradient(circle at 32% 26%,rgba(255,255,255,.9) 0 8%,rgba(255,255,255,.2) 18%,transparent 38%),
    radial-gradient(circle at 50% 52%,var(--gc) 0%,transparent 80%);
  opacity:.26;transition:opacity .4s;
}
.mg:hover .mg-ball{transform:translateY(-4px) scale(1.14);}
.mg.lit .mg-ball::after{opacity:1;}
.mg.lit .mg-ball{box-shadow:inset -3px -5px 8px rgba(0,0,0,.35),0 0 14px var(--gg),0 0 28px var(--gg);}
.mg-stem{position:absolute;left:50%;top:-5px;width:2px;height:6px;transform:translateX(-50%);
  border-radius:2px;background:linear-gradient(#8a6640,#4a3520);}
.mg-check{
  position:absolute;right:-3px;top:-3px;z-index:3;width:14px;height:14px;border-radius:50%;
  display:grid;place-items:center;font-size:8px;font-weight:900;color:#0a0f24;
  background:var(--gc);box-shadow:0 0 8px var(--gg);
}
.mg-name{
  font-size:11px;line-height:1.32;color:#fff;text-align:center;font-weight:600;
  max-width:100%;word-break:break-word;overflow-wrap:anywhere;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;
  text-shadow:0 1px 5px rgba(0,0,0,.8);
}
.mg-meta{
  display:flex;align-items:center;gap:4px;font-size:9px;color:var(--text3);
  letter-spacing:.3px;flex-wrap:wrap;justify-content:center;
}
.mg-meta em{font-style:normal;}
.mg-badge{font-style:normal;font-size:8.5px;padding:1px 5px;border-radius:7px;}
.mg-badge.medal{color:#FFB86B;background:rgba(255,184,107,.12);}
.mg-badge.bank{color:#9CFF8A;background:rgba(156,255,138,.12);}
/* 一栏默认只露 6 颗：压平后主枝能直接挂二十几颗，全铺就顶穿一屏 */
.map-leaves .mg.hid{display:none;}
.mg-more{
  grid-column:1/-1;justify-self:start;margin:2px 0 0;padding:5px 13px;
  font-family:inherit;font-size:10.5px;font-weight:700;letter-spacing:.4px;cursor:pointer;
  color:var(--gc,var(--accent));background:rgba(255,255,255,.04);
  border:1px dashed rgba(255,255,255,.2);border-radius:999px;
  transition:background .2s,border-color .2s,color .2s;
}
.mg-more:hover{background:rgba(255,255,255,.1);border-color:var(--gc,var(--accent));}
@keyframes map-in{
  from{opacity:0;transform:translateY(16px) scale(.92)}
  to{opacity:1;transform:none}
}
@media (max-width:760px){
  .map-grid{gap:16px 14px;}
  .map-leaves{grid-template-columns:repeat(auto-fill,minmax(74px,1fr));}
  .mh0 .mh-name{font-size:14px;}
}

/* ---------- KNOWLEDGE CARD MODAL ---------- */
.modal{
  position:fixed;inset:0;z-index:50;
  display:flex;align-items:center;justify-content:center;
  background:rgba(6,8,26,.8);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  opacity:0;pointer-events:none;
  transition:opacity .3s;
}
.modal.open{opacity:1;pointer-events:auto;}

.modal-card{
  width:90%;max-width:560px;max-height:85vh;
  border-radius:20px;
  background:linear-gradient(160deg,rgba(20,24,56,.95),rgba(12,16,40,.98));
  border:1px solid var(--glass-border);
  box-shadow:0 24px 80px rgba(0,0,0,.5);
  overflow:hidden;
  transform:translateY(20px) scale(.96);
  transition:transform .3s;
}
.modal.open .modal-card{transform:translateY(0) scale(1);}

.modal-close{
  position:absolute;top:12px;right:12px;z-index:2;
  width:32px;height:32px;border-radius:50%;
  border:1px solid var(--glass-border);
  background:rgba(255,255,255,.04);
  color:var(--text2);font-size:18px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:all .2s;
}
.modal-close:hover{border-color:var(--accent);color:var(--accent);}

/* Card body */
.card-body{position:relative;padding:28px 28px 24px;overflow-y:auto;max-height:85vh;}
.card-body::-webkit-scrollbar{width:3px;}
.card-body::-webkit-scrollbar-thumb{background:rgba(255,255,255,.08);border-radius:2px;}

.card-crumb{
  font-size:11px;color:var(--text3);margin-bottom:8px;
  padding-right:38px;
  display:flex;align-items:center;gap:4px;flex-wrap:wrap;
}
.card-crumb span{color:var(--accent);}

.card-title{
  font-size:21px;font-weight:800;color:#fff;letter-spacing:.5px;
  margin-bottom:6px;line-height:1.4;
}

.card-meta{
  display:flex;gap:8px;align-items:center;margin-bottom:16px;flex-wrap:wrap;
}
.card-tag{
  padding:3px 10px;border-radius:10px;font-size:11px;font-weight:600;
  background:rgba(77,227,255,.08);color:var(--accent);
}
.card-star{display:flex;gap:2px;}
.card-star i{
  width:8px;height:8px;border-radius:50%;
  background:rgba(255,255,255,.1);display:block;
}
.card-star i.on{background:var(--accent);}

.card-section{margin-bottom:16px;}
.card-section-title{
  font-size:11px;letter-spacing:2px;text-transform:uppercase;
  color:var(--text3);margin-bottom:6px;
  padding-bottom:4px;border-bottom:1px solid rgba(255,255,255,.04);
}
.card-section-body{
  font-size:14px;color:var(--text2);line-height:1.8;
}

/* Lego brick decoration on card */
.card-brick-deco{
  display:flex;gap:6px;margin-bottom:16px;
}
.card-brick-dot{
  width:14px;height:14px;border-radius:50%;
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  box-shadow:0 2px 6px var(--accent-glow),inset 0 1px 2px rgba(255,255,255,.3);
}

.card-quiz-btn{
  display:block;width:100%;padding:14px;border:none;border-radius:var(--radius-sm);
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  color:#fff;font-size:15px;font-weight:700;cursor:pointer;
  box-shadow:0 4px 20px var(--accent-glow);
  transition:all .2s;
  margin-top:8px;
}
.card-quiz-btn:hover{transform:translateY(-2px);box-shadow:0 8px 28px var(--accent-glow);}

.card-done-badge{
  display:flex;align-items:center;justify-content:center;gap:8px;
  padding:12px;border-radius:var(--radius-sm);
  background:rgba(77,227,255,.08);
  border:1px solid rgba(77,227,255,.2);
  color:var(--accent);font-size:14px;font-weight:600;
  margin-top:8px;
}

/* Medal display in card */
.card-medal{
  display:flex;align-items:center;gap:10px;
  padding:10px 14px;border-radius:var(--radius-sm);
  background:rgba(255,184,107,.08);
  border:1px solid rgba(255,184,107,.2);
  margin-bottom:12px;
}
.card-medal-icon{font-size:24px;}
.card-medal-name{font-size:13px;font-weight:600;color:#FFB86B;}

/* ---------- QUIZ MODAL ---------- */
.quiz-body{position:relative;padding:28px;overflow-y:auto;max-height:85vh;}

.quiz-header{
  display:flex;align-items:center;gap:8px;margin-bottom:16px;
}
.quiz-badge{
  padding:4px 12px;border-radius:12px;font-size:11px;font-weight:700;
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  color:#fff;letter-spacing:1px;
}
.quiz-leaf{font-size:12px;color:var(--text3);}

.quiz-q{
  font-size:16px;font-weight:600;color:var(--text);
  line-height:1.6;margin-bottom:16px;
  padding:14px 16px;border-radius:var(--radius-sm);
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.06);
}

.quiz-opts{display:flex;flex-direction:column;gap:8px;margin-bottom:16px;}
.quiz-opt{
  padding:12px 16px;border-radius:var(--radius-sm);
  background:rgba(255,255,255,.03);
  border:1.5px solid rgba(255,255,255,.08);
  cursor:pointer;transition:all .2s;
  font-size:14px;color:var(--text);
  display:flex;align-items:center;gap:10px;
}
.quiz-opt:hover{border-color:var(--accent);background:rgba(77,227,255,.04);}
.quiz-opt .opt-letter{
  width:24px;height:24px;border-radius:50%;
  background:rgba(255,255,255,.06);
  display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:700;color:var(--text2);
  flex-shrink:0;
}
.quiz-opt.correct{
  border-color:var(--accent);background:rgba(77,227,255,.1);
}
.quiz-opt.correct .opt-letter{background:var(--accent);color:#000;}
.quiz-opt.wrong{
  border-color:#ff5a5a;background:rgba(255,90,90,.06);
}
.quiz-opt.wrong .opt-letter{background:#ff5a5a;color:#fff;}
.quiz-opt.disabled{pointer-events:none;opacity:.5;}

.quiz-feedback{
  padding:14px 16px;border-radius:var(--radius-sm);
  margin-bottom:12px;
  font-size:13px;line-height:1.6;
  animation:feedback-in .3s ease;
}
.quiz-feedback.success{
  background:rgba(77,227,255,.08);border:1px solid rgba(77,227,255,.2);color:var(--accent);
}
.quiz-feedback.fail{
  background:rgba(255,90,90,.06);border:1px solid rgba(255,90,90,.15);color:#ff8a8a;
}
.quiz-feedback b{display:block;font-size:12px;letter-spacing:1px;margin-bottom:4px;}

.quiz-actions{display:flex;gap:8px;}
.quiz-btn{
  flex:1;padding:10px;border:none;border-radius:var(--radius-sm);
  font-size:13px;font-weight:600;cursor:pointer;transition:all .2s;
}
.quiz-btn.primary{
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  color:#fff;box-shadow:0 2px 12px var(--accent-glow);
}
.quiz-btn.primary:hover{transform:translateY(-1px);}
.quiz-btn.secondary{
  background:rgba(255,255,255,.04);color:var(--text2);
  border:1px solid var(--glass-border);
}
.quiz-btn.secondary:hover{border-color:var(--accent);color:var(--accent);}

/* ---------- TOAST ---------- */
.toast{
  position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(80px);
  z-index:200;
  padding:10px 24px;border-radius:20px;
  background:var(--glass);border:1px solid var(--glass-border);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  font-size:13px;color:var(--text);
  box-shadow:0 8px 32px rgba(0,0,0,.3);
  transition:transform .4s cubic-bezier(.34,1.56,.64,1);
  pointer-events:none;
}
.toast.show{transform:translateX(-50%) translateY(0);}

}

/* ---------- ANIMATIONS ---------- */
@keyframes feedback-in{
  from{opacity:0;transform:translateY(8px)}
  to{opacity:1;transform:translateY(0)}
}
@keyframes particle-burst{
  0%{transform:translate(0,0) scale(1);opacity:1}
  100%{transform:translate(var(--dx),var(--dy)) scale(0);opacity:0}
}

/* ---------- PARTICLES ---------- */
.particles{position:fixed;inset:0;z-index:60;pointer-events:none;overflow:hidden;}
.particle{
  position:absolute;width:6px;height:6px;border-radius:50%;
  animation:particle-burst .8s ease-out forwards;
}

/* 知识点拆卡 · 每个最小点一张卡，可并排 */
.modal-card.wide{max-width:920px;width:94%;}
.card-section-body.lead{margin-bottom:2px;}
.point-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(176px,1fr));
  gap:12px;margin-top:12px;
}
.point-card{
  border-radius:14px;padding:10px 10px 12px;
  background:linear-gradient(165deg,rgba(32,38,78,.78),rgba(15,19,44,.9));
  border:1px solid rgba(120,160,255,.13);
  box-shadow:0 6px 18px rgba(0,0,0,.3);
  transition:transform .28s,border-color .28s,box-shadow .28s;
}
.point-card:hover{
  transform:translateY(-4px);border-color:var(--accent);
  box-shadow:0 12px 28px rgba(0,0,0,.42),0 0 0 1px rgba(77,227,255,.22);
}
.pc-pair{
  display:flex;align-items:center;gap:2px;
  border-radius:10px;background:rgba(6,8,26,.55);
  border:1px solid rgba(120,160,255,.1);
  padding:4px 4px 0;
}
.pc-slot{display:flex;align-items:center;justify-content:center;gap:1px;flex:1;}
.pc-slot.one img{width:76px;height:76px;object-fit:contain;}
.pc-slot.many img{width:52px;height:52px;object-fit:contain;}
.pc-arrow{font-style:normal;font-size:14px;color:var(--accent);flex-shrink:0;}
.pc-word{
  display:flex;align-items:center;justify-content:center;gap:7px;
  margin-top:7px;font-size:15px;font-weight:800;color:#fff;
}
.pc-word span{font-size:13px;color:var(--accent);}
.pc-word .pl{color:#9CFF8A;}
.pc-ipa{margin-top:3px;text-align:center;font-size:10px;color:var(--text3);}
.pc-cn{margin-top:5px;text-align:center;font-size:11px;color:var(--text2);}
.rule-card .pc-t{font-size:14px;font-weight:700;color:#fff;line-height:1.45;}
.rule-card .pc-d{font-size:12px;color:var(--text2);margin-top:5px;line-height:1.65;}
.rule-card .pc-ex{
  margin-top:8px;padding:5px 8px;border-radius:8px;font-size:11px;color:var(--accent);
  background:rgba(77,227,255,.07);
}

/* 小卡片：居中排版 + 朗读按钮 + 配图 */
.point-card.rule-card{text-align:center;}
.point-card.rule-card .pc-ex{display:inline-block;}
.pc-t{display:flex;align-items:center;justify-content:center;gap:7px;flex-wrap:wrap;}
.pc-sub{margin-top:4px;font-size:11px;color:var(--accent);letter-spacing:.4px;}
.pc-img{margin-bottom:8px;}
.pc-img img{width:100%;max-width:132px;height:84px;object-fit:contain;border-radius:10px;background:rgba(6,8,26,.5);}
/* 笔顺动画图：单字是 240×300 的竖图，笔画/规则是 454×266 或 454×500，
   按高度收比按宽度收更划算（格子才不会缩成一团） */
.pc-img.st{display:flex;justify-content:center;}
.pc-img.st img{width:auto;height:auto;max-width:100%;max-height:152px;}
.pc-aud{
  display:inline-flex;align-items:center;justify-content:center;
  width:24px;height:24px;border-radius:50%;flex-shrink:0;cursor:pointer;
  background:rgba(77,227,255,.1);border:1px solid rgba(77,227,255,.3);
  color:var(--accent);transition:.2s;
}
.pc-aud svg{width:14px;height:14px;display:block;}
.pc-aud:hover{background:var(--accent);color:#06101f;box-shadow:0 0 14px rgba(77,227,255,.45);transform:scale(1.08);}
.pc-aud.speaking{background:var(--accent);color:#06101f;animation:aud-pulse .9s ease-in-out infinite;}
@keyframes aud-pulse{0%,100%{box-shadow:0 0 8px rgba(77,227,255,.4)}50%{box-shadow:0 0 20px rgba(77,227,255,.85)}}
.pc-word .ar{font-size:13px;color:var(--text3);margin:0 -2px;}
.pc-word .pc-aud{width:21px;height:21px;}
.pc-word .pc-aud svg{width:12px;height:12px;}
.card-aud-hint{
  margin-top:9px;font-size:11px;color:var(--text3);letter-spacing:.6px;
}

/* ---------- v6 · 小卡片放大（点卡片 → 居中放大，例子列在下面） ---------- */
.point-card.zoomable{position:relative;cursor:pointer;}
.point-card.zoomable:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
.pc-zoom{
  position:absolute;top:6px;right:7px;z-index:1;
  font-size:11px;line-height:1;color:var(--text3);
  opacity:.55;transition:opacity .2s,color .2s;
}
.point-card.zoomable:hover .pc-zoom{opacity:1;color:var(--accent);}
.pc-more{
  margin-top:7px;font-size:10px;color:var(--accent);opacity:.8;
  letter-spacing:.4px;
}
.point-card.rule-card .pc-ex{
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}

/* ---------- v9 卡片分组：规律与方法在前，知识细节在后 ---------- */
.pc-group{margin-top:14px;}
.pcg-head{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;padding:0 2px;}
.pcg-head b{font-size:13px;letter-spacing:1px;color:var(--text1);}
.pcg-head.law b{color:#FFD37A;}
.pcg-head span{font-size:11px;color:var(--text3);}
.pc-group.law{
  border:1px solid rgba(255,196,106,.22);border-radius:16px;padding:10px 12px 12px;
  background:linear-gradient(160deg,rgba(255,196,106,.07),rgba(255,196,106,.015));
}
.pc-group.law .point-grid{margin-top:9px;}
.point-card.law{
  border-color:rgba(255,196,106,.3);
  background:linear-gradient(165deg,rgba(58,44,26,.62),rgba(24,19,40,.9));
}
.point-card.law:hover{
  border-color:#FFC46A;
  box-shadow:0 12px 28px rgba(0,0,0,.42),0 0 0 1px rgba(255,196,106,.3);
}
.pc-kind{
  position:absolute;top:7px;left:8px;z-index:1;
  font-size:9px;letter-spacing:.6px;padding:2px 6px;border-radius:999px;
  background:rgba(255,196,106,.16);color:#FFD37A;border:1px solid rgba(255,196,106,.32);
}
/* 角标占一行的高度，标题往下让，别压在字上 */
.point-card.law .pc-t{padding-top:17px;}
.zoom-kind{
  display:inline-block;margin-bottom:8px;font-size:11px;letter-spacing:.6px;
  padding:3px 10px;border-radius:999px;
  background:rgba(255,196,106,.14);color:#FFD37A;border:1px solid rgba(255,196,106,.3);
}
.zoom-back-law{
  display:block;width:100%;margin-top:16px;padding:11px;border-radius:12px;cursor:pointer;
  background:rgba(255,196,106,.08);border:1px dashed rgba(255,196,106,.35);
  color:#FFD37A;font-size:13px;font-weight:600;font-family:inherit;
}
.zoom-back-law:hover{background:rgba(255,196,106,.16);}

/* ---------- v9 「我自己总结的规律」：学完细节后回写一句 ---------- */
.pc-note{
  margin-top:12px;padding:10px 12px;border-radius:14px;
  border:1px dashed rgba(120,160,255,.28);background:rgba(10,14,36,.5);
}
.pc-note.has{border-style:solid;border-color:rgba(77,227,255,.35);background:rgba(77,227,255,.06);}
.pcn-head{font-size:11px;letter-spacing:1px;color:var(--text3);margin-bottom:6px;}
.pc-note.has .pcn-head{color:var(--accent);}
.pcn-in{
  width:100%;box-sizing:border-box;min-height:44px;resize:vertical;
  border-radius:10px;padding:8px 10px;font-family:inherit;
  background:rgba(6,8,26,.6);border:1px solid rgba(120,160,255,.16);
  color:var(--text1);font-size:13px;line-height:1.6;
}
.pcn-in:focus{outline:none;border-color:var(--accent);}
.pcn-foot{display:flex;align-items:center;justify-content:space-between;margin-top:6px;}
.pcn-cnt{font-size:10px;color:var(--text3);}
.pcn-save{
  padding:6px 14px;border-radius:999px;cursor:pointer;font-size:12px;font-weight:600;font-family:inherit;
  background:rgba(77,227,255,.12);border:1px solid rgba(77,227,255,.3);color:var(--accent);
}
.pcn-save:hover{background:rgba(77,227,255,.22);}

/* ---------- v9 字词星海卡：拼音 / 会写标记 / 单元分隔行 ---------- */
.point-card{position:relative;}
.point-card.can-write{border-color:rgba(255,196,106,.24);}
.point-card.can-write:hover{border-color:#FFC46A;}
.pc-py{margin-top:7px;text-align:center;font-size:12px;color:var(--accent);letter-spacing:1px;}
.pc-word b{font-weight:800;}
.pc-word b.han{font-size:26px;line-height:1.1;letter-spacing:1px;}
.pc-write{
  margin-top:6px;text-align:center;font-size:10px;letter-spacing:.6px;
  color:#FFD37A;opacity:.9;
}
.pc-cn + .pc-write{margin-top:4px;}
.pg-sep{
  grid-column:1/-1;display:flex;align-items:center;gap:9px;
  margin:6px 0 -2px;font-size:11px;letter-spacing:1.2px;color:var(--text3);
}
.pg-sep::after{content:'';flex:1;height:1px;background:linear-gradient(90deg,rgba(120,160,255,.26),transparent);}
/* 单字知识块的居中大搜索框（生字几十上百个，不铺开、让人搜） */
.han-find{grid-column:1/-1;margin:2px auto 14px;width:100%;max-width:560px;text-align:center;}
.hf-box{
  display:flex;align-items:center;gap:10px;padding:0 12px;border-radius:16px;
  background:rgba(8,12,30,.72);border:1px solid rgba(120,160,255,.2);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 6px 18px rgba(0,0,0,.35);
  transition:border-color .2s,box-shadow .2s;
}
.hf-box:focus-within{border-color:var(--gc,var(--accent));box-shadow:0 0 0 3px rgba(120,160,255,.12),0 6px 18px rgba(0,0,0,.35);}
.hf-ic{font-style:normal;font-size:20px;color:var(--text3);flex-shrink:0;}
.hf-in{
  flex:1;min-width:0;border:0;outline:0;background:transparent;color:#fff;
  font-family:inherit;font-size:17px;font-weight:600;letter-spacing:.6px;padding:15px 0;
}
.hf-in::placeholder{font-size:13px;font-weight:400;letter-spacing:.3px;color:var(--text3);opacity:.8;}
.hf-clr{
  border:0;background:transparent;color:var(--text3);font-size:14px;cursor:pointer;
  padding:6px;border-radius:8px;flex-shrink:0;
}
.hf-clr:hover{color:#fff;background:rgba(255,255,255,.08);}
.hf-bar{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;margin-top:8px;}
.hf-n{font-size:11px;color:var(--text3);letter-spacing:.3px;}
.hf-all{
  border:1px solid rgba(120,160,255,.18);background:rgba(120,160,255,.07);color:#cfe0ff;
  font-family:inherit;font-size:11px;padding:5px 12px;border-radius:999px;cursor:pointer;transition:.2s;
}
.hf-all:hover{background:rgba(120,160,255,.16);color:#fff;}
.hf-hide{display:none!important;}
.zoom-unit{
  margin:0 auto 10px;width:fit-content;max-width:100%;font-size:11px;letter-spacing:.8px;
  padding:4px 12px;border-radius:999px;color:#9CFF8A;
  background:rgba(156,255,138,.1);border:1px solid rgba(156,255,138,.24);
}
.zoom-py{width:100%;font-size:16px;font-weight:600;color:var(--accent);letter-spacing:3px;}
.zoom-ex{
  margin:12px auto 0;width:fit-content;max-width:100%;font-size:14px;color:var(--text2);
  padding:7px 14px;border-radius:10px;background:rgba(156,255,138,.07);
  border:1px solid rgba(156,255,138,.18);
}
.pc-word-ex{
  margin-top:6px;text-align:center;font-size:10px;color:#9CFF8A;opacity:.85;letter-spacing:.4px;
}

.zoom-card{max-width:660px;width:92%;position:relative;}
.zoom-body{
  position:relative;padding:30px 30px 26px;
  overflow-y:auto;max-height:86vh;
  background:radial-gradient(120% 80% at 50% 0%,rgba(30,40,92,.92),rgba(9,12,32,.98));
}
.zoom-body::-webkit-scrollbar{width:3px;}
.zoom-body::-webkit-scrollbar-thumb{background:rgba(255,255,255,.08);border-radius:2px;}
.zoom-crumb{font-size:11px;color:var(--text3);margin-bottom:12px;padding-right:38px;}
.zoom-t{
  font-size:26px;font-weight:800;color:#fff;line-height:1.4;letter-spacing:.5px;
  display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;
  text-align:center;text-shadow:0 0 22px rgba(77,227,255,.28);
}
.zoom-ar{font-size:20px;color:var(--text3);margin:0 2px;}
.zoom-sub{margin-top:8px;text-align:center;font-size:14px;color:var(--accent);letter-spacing:.5px;}
.zoom-d{margin-top:10px;text-align:center;font-size:15px;color:var(--text2);line-height:1.8;}
.zoom-img{display:flex;justify-content:center;margin:6px 0 14px;}
.zoom-img img{
  max-width:min(430px,92%);height:auto;max-height:48vh;object-fit:contain;
  border-radius:16px;background:rgba(6,8,26,.55);
  border:1px solid rgba(120,160,255,.16);
  box-shadow:0 14px 40px rgba(0,0,0,.45);
}
.zoom-sec{
  margin:22px 0 10px;font-size:11px;letter-spacing:2px;color:var(--text3);
  display:flex;align-items:center;gap:10px;
}
.zoom-sec::after{content:'';flex:1;height:1px;background:linear-gradient(90deg,rgba(120,160,255,.28),transparent);}
.ex-list{list-style:none;counter-reset:ex;display:flex;flex-direction:column;gap:9px;}
.ex-list li{
  counter-increment:ex;position:relative;
  padding:11px 13px 11px 40px;border-radius:12px;
  background:linear-gradient(165deg,rgba(32,38,78,.6),rgba(15,19,44,.8));
  border:1px solid rgba(120,160,255,.12);
}
.ex-list li::before{
  content:counter(ex);position:absolute;left:12px;top:11px;
  width:19px;height:19px;border-radius:50%;
  background:rgba(77,227,255,.14);color:var(--accent);
  font-size:11px;font-weight:700;
  display:flex;align-items:center;justify-content:center;
}
.ex-list li b{display:block;font-size:15px;color:#fff;font-weight:700;line-height:1.6;}
.ex-list li span{display:block;margin-top:3px;font-size:12.5px;color:var(--text2);line-height:1.75;}
.zoom-art{
  margin:12px 0 0;padding:14px 16px;border-radius:12px;
  background:rgba(7,10,26,.72);border:1px solid rgba(120,160,255,.16);
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:13px;line-height:1.7;color:#CFF6FF;
  white-space:pre;overflow-x:auto;overscroll-behavior-x:contain;
}
.zoom-art:first-child{margin-top:0;}
.ex-list li .zoom-art{margin-top:10px;font-size:12.5px;}
.zoom-tbl{
  width:100%;margin-top:12px;border-collapse:collapse;font-size:13.5px;
  display:table;table-layout:auto;
}
.zoom-tbl th,.zoom-tbl td{
  padding:9px 10px;text-align:center;
  border:1px solid rgba(120,160,255,.18);color:var(--text2);white-space:nowrap;
}
.zoom-tbl th{background:rgba(77,227,255,.1);color:#fff;font-weight:700;}
.zoom-tbl tr:last-child td{color:#fff;}
@media (max-width:900px){
  .zoom-art{font-size:11.5px;padding:11px 12px;}
  .zoom-tbl{font-size:12px;}
  .zoom-tbl th,.zoom-tbl td{padding:7px 6px;}
}
@media (max-width:900px){
  .zoom-card{width:94%;max-width:none;}
  .zoom-body{padding:24px 18px 20px;}
  .zoom-t{font-size:21px;}
}

/* ---------- RESPONSIVE ---------- */
@media (max-width:760px){
  .vine-scene{max-width:560px;}
  .vine-spine{display:none;}
  .vine-trellis{height:86px;}
  .zone-grid{grid-template-columns:1fr;row-gap:34px;}
  .vine-item,.vine-item.side-c,.vine-item.side-r{--stag:0px;--stem:56px;}
  .zone-head span{padding:6px 14px;}
}
@media (max-width:900px){
  .orbit{flex-direction:column;}
  .dock{
    width:auto;flex-direction:row;align-items:flex-start;
    overflow-x:auto;overflow-y:hidden;flex-shrink:0;
    padding:24px 14px 12px;border-right:0;border-bottom:1px solid rgba(120,160,255,.07);
  }
  .dock::before{
    left:12px;right:12px;top:11px;bottom:auto;width:auto;height:5px;margin:0;
    background:linear-gradient(90deg,#3f2c18,#8a6640 45%,#4a3520);
  }
  .dock-item::after{display:none;}
  .dock-sep{width:13px;height:5px;border-radius:3px;margin-top:26px;
    background:linear-gradient(#8a6640,#4a3520);}
  .grape{width:136px;}
  .grape-row{--cw:144px;}
  .stage-title{font-size:21px;}
  .point-grid{grid-template-columns:repeat(auto-fill,minmax(136px,1fr));gap:9px;}
}
@media (max-width:600px){
  .home-header{padding:10px 14px 0;}
  .gp-text em{display:none;}
  .level-hud{padding:10px 14px;flex-wrap:wrap;}
  .gp-mini{margin-left:0;}
  .stage{padding:16px 12px 34px;}
  .grape-row{padding-top:26px;}
  .modal-card{width:95%;border-radius:16px;}
  .modal-card.wide{width:96%;}
  .card-body,.quiz-body{padding:20px;}
}

/* ---------- SUBJECT THEMES ---------- */
body[data-subject="math"]{--accent:#4DE3FF;--accent2:#8B7CFF;--accent-glow:rgba(77,227,255,.25);}
body[data-subject="chinese"]{--accent:#4BF2C0;--accent2:#9CFF8A;--accent-glow:rgba(75,242,192,.25);}
body[data-subject="english"]{--accent:#FFB86B;--accent2:#FF7AA8;--accent-glow:rgba(255,184,107,.25);}

/* ---------- SCROLLBAR ---------- */
::-webkit-scrollbar{width:6px;height:6px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,.08);border-radius:3px;}
::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.15);}

/* ---------- 减少动效偏好（系统开了「减弱动态效果」就不做入场动画） ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-delay:0s !important;
    transition-duration:.01ms !important;
    transition-delay:0s !important;
  }
}